body { background: #09090f; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; }

    .glass {
      background: rgba(25,25,35,.45);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.09);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 32px rgba(0,0,0,.35);
    }
    .glow-bg {
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background:
        radial-gradient(ellipse 55% 40% at 15% 0%,  rgba(124,92,191,.13) 0%, transparent 65%),
        radial-gradient(ellipse 40% 30% at 85% 100%, rgba(124,92,191,.08) 0%, transparent 60%),
        radial-gradient(ellipse 30% 25% at 50% 50%,  rgba(124,92,191,.04) 0%, transparent 70%);
    }

    /* Nav sidebar */
    .nav-link {
      display: block; padding: 7px 12px; border-radius: 9px;
      color: #555; font-size: .8rem; font-weight: 600;
      text-decoration: none; transition: background .15s, color .15s;
      border: 1px solid transparent;
    }
    .nav-link:hover { background: rgba(124,92,191,.1); color: #c4abf5; border-color: rgba(124,92,191,.2); }
    .nav-link.active { background: rgba(124,92,191,.15); color: #c4abf5; border-color: rgba(124,92,191,.3); }

    /* Section cards */
    .guide-card {
      scroll-margin-top: 88px;
    }
    .guide-card + .guide-card { margin-top: 20px; }

    .section-emoji {
      font-size: 2.4rem; line-height: 1;
      filter: drop-shadow(0 0 18px rgba(124,92,191,.5));
    }

    /* Highlight boxes */
    .tip-box {
      background: rgba(124,92,191,.07);
      border: 1px solid rgba(124,92,191,.2);
      border-radius: 12px; padding: 13px 16px;
      font-size: .82rem; color: #bbb; line-height: 1.6;
    }
    .tip-box strong { color: #c4abf5; }

    .warn-box {
      background: rgba(255,180,0,.05);
      border: 1px solid rgba(255,180,0,.2);
      border-radius: 12px; padding: 13px 16px;
      font-size: .82rem; color: #bbb; line-height: 1.6;
    }
    .warn-box strong { color: #ffc94d; }

    .good-box {
      background: rgba(76,175,80,.05);
      border: 1px solid rgba(76,175,80,.2);
      border-radius: 12px; padding: 13px 16px;
      font-size: .82rem; color: #bbb; line-height: 1.6;
    }
    .good-box strong { color: #81c784; }

    /* Formula block */
    .formula {
      background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.07);
      border-radius: 10px; padding: 12px 16px;
      font-family: 'Courier New', monospace; font-size: .82rem;
      color: #9d7fe0; line-height: 1.7;
    }

    /* Stat row */
    .stat-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04);
      font-size: .84rem;
    }
    .stat-row:last-child { border-bottom: none; }
    .stat-icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }
    .stat-label { flex: 1; color: #bbb; }
    .stat-value { font-weight: 700; color: #c4abf5; }
    .stat-value.green { color: #81c784; }
    .stat-value.red   { color: #e57373; }

    /* Format badge */
    .format-badge {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700;
      border: 1px solid; white-space: nowrap;
    }
    .badge-purple { color: #c4abf5; border-color: rgba(157,127,224,.3); background: rgba(124,92,191,.1); }
    .badge-gold   { color: #ffc94d; border-color: rgba(255,180,0,.3);   background: rgba(255,180,0,.07); }
    .badge-green  { color: #81c784; border-color: rgba(76,175,80,.3);   background: rgba(76,175,80,.07); }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: rgba(124,92,191,.35); border-radius: 3px; }

    /* Footer */
    .footer-link { color: #555; text-decoration: none; transition: color .15s; }
    .footer-link:hover { color: #9d7fe0; }

    /* Active section highlight */
    @media (min-width: 1024px) {
      .sticky-nav { position: sticky; top: 24px; }
    }