/* roulang page: index */
:root {
      --brand-primary: #059669;
      --brand-primary-light: #10B981;
      --brand-accent: #F97316;
      --brand-dark: #0B0F19;
      --brand-slate: #0F172A;
      --brand-surface: #F8FAFC;
      --text-main: #1E293B;
      --text-muted: #64748B;
      --border-subtle: #E2E8F0;
    }

    html {
      scroll-behavior: smooth;
      font-family: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }

    body {
      background-color: #FFFFFF;
      color: var(--text-main);
      overflow-x: hidden;
      line-height: 1.6;
    }

    .glass-nav {
      background: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    }

    .brand-btn-primary {
      background: linear-gradient(135deg, #059669 0%, #10B981 100%);
      box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .brand-btn-primary:hover {
      box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
      transform: translateY(-2px);
    }

    .brand-btn-accent {
      background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
      box-shadow: 0 4px 14px rgba(249, 115, 22, 0.28);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .brand-btn-accent:hover {
      box-shadow: 0 6px 20px rgba(249, 115, 22, 0.42);
      transform: translateY(-2px);
    }

    .card-modern {
      background: #FFFFFF;
      border: 1px solid var(--border-subtle);
      border-radius: 1rem;
      transition: all 0.3s ease;
    }
    .card-modern:hover {
      border-color: #A7F3D0;
      box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
      transform: translateY(-4px);
    }

    /* 抽屉导航交互 */
    #navDrawerOverlay {
      transition: opacity 0.3s ease-in-out;
    }
    #navDrawerPanel {
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 手风琴原生优化 */
    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }
    details[open] summary svg {
      transform: rotate(180deg);
    }