/* 🐕 小狗的家 — base.css */

    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* ========== 设计系统 ========== */
    :root {
      --c-primary: #e07b39;
      --c-primary-light: #ffb347;
      --c-primary-pale: #fff5eb;
      --c-primary-glow: rgba(224, 123, 57, 0.15);
      --c-gold: #b8860b;
      --c-gold-light: #d4a843;
      --c-bg: #fffaf5;
      --c-bg-warm: #fff3e6;
      --c-card: #ffffff;
      --c-text: #3a3028;
      --c-text-soft: #7a6e62;
      --c-text-muted: #b0a89e;
      --c-border: #f0e6d8;
      --c-green: #4a9e4a;
      --c-green-bg: #f0fff4;
      --c-red: #e05050;
      --shadow-sm: 0 2px 8px rgba(180, 130, 80, 0.06);
      --shadow-md: 0 4px 16px rgba(180, 130, 80, 0.10);
      --shadow-lg: 0 8px 32px rgba(180, 130, 80, 0.14);
      --shadow-glow: 0 4px 20px rgba(224, 123, 57, 0.25);
      --radius-sm: 10px;
      --radius-md: 16px;
      --radius-lg: 22px;
      --radius-pill: 50px;
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* ========== 全局增强 ========== */
    body {
      background: linear-gradient(160deg, var(--c-bg) 0%, var(--c-bg-warm) 50%, #ffecd2 100%);
      color: var(--c-text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* 自定义滚动条 */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(224, 123, 57, 0.2); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(224, 123, 57, 0.4); }

    /* ========== 动画 ========== */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    @keyframes gentleBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    .animate-in {
      animation: fadeUp 0.5s var(--ease-out) both;
    }
    .page.active > .card {
      animation: fadeUp 0.45s var(--ease-out) both;
    }
    .page.active > .card:nth-child(2) { animation-delay: 0.06s; }
    .page.active > .card:nth-child(3) { animation-delay: 0.12s; }
    .page.active > .card:nth-child(4) { animation-delay: 0.18s; }

    /* 骨架屏加载效果 */
    .loading-shimmer {
      background: linear-gradient(90deg, #f5ede4 25%, #fff5eb 50%, #f5ede4 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: var(--radius-sm);
      height: 60px;
      margin-bottom: 10px;
    }


    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: linear-gradient(135deg, #fff9f0 0%, #ffe8d6 100%);
      min-height: 100vh;
      overflow-x: hidden;
    }