body {
      background-color: #09090f;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      font-family: 'Inter', system-ui, sans-serif;
      font-size: 14px;
    }

    .glass {
      background: rgba(67, 66, 66, 0.3) !important;
      border-radius: 30px !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
    }
    .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: #555555; font-size: 12.8px; font-weight: 600; line-height: 1.5;
      text-decoration: none; transition: background .15s, color .15s;
      border: 1px solid transparent;
      font-family: 'Inter', system-ui, sans-serif;
    }
    /* Figma: "Разделы:" label — Inter 700, 13px, not uppercase, Boulder #9D9D9D */
    .sticky-nav .glass > div:first-child {
      font-size: 13px !important;
      font-weight: 700 !important;
      color: #9D9D9D !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
      margin-bottom: 10px !important;
    }
    .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); }

    /* Hero block (Figma 324:584) */
    .guide-hero {
      text-align: center;
      padding: 8px 16px 24px;
      margin-bottom: 8px;
    }
    .guide-hero-title {
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 900;
      font-size: 36px;
      line-height: 1.111;
      letter-spacing: -0.025em;
      color: #ECECEC;
      margin: 0 0 14px;
    }
    .guide-hero-sub {
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.625;
      color: #C9C9C9;
      max-width: 580px;
      margin: 0 auto;
    }

    /* 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));
    }

    /* Figma alignment: section titles #ECECEC, subtitles #9D9D9D */
    .guide-card h2 { color: #ECECEC !important; font-size: 20px; line-height: 1.4; font-weight: 900; }
    .guide-card h2 + p,
    .guide-card .flex > div > p.text-xs { color: #9D9D9D !important; }

    /* Body paragraphs inside sections: Inter 400, 13px, lh 1.75, color Alto #C9C9C9 */
    .guide-card > p.text-sm,
    .guide-card .text-sm.text-gray-400 {
      color: #C9C9C9 !important;
      font-size: 13px !important;
      line-height: 1.75 !important;
    }

    /* Stat group header rows: Inter 700, 13px, not uppercase, color Alto #C9C9C9 */
    .stat-row .stat-label.uppercase,
    .stat-row > .stat-label.text-gray-600 {
      color: #C9C9C9 !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      text-transform: none !important;
      letter-spacing: 0 !important;
    }

    /* 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 — Figma fill #EF9A9A */
    .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: #EF9A9A; line-height: 1.7;
      white-space: pre-line;
    }

    /* 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: #C9C9C9; font-size: 13px; }
    .stat-label .text-xs { color: #9D9D9D !important; }
    /* Figma stat-value: green #4CAF50, red #EF9A9A, neutral ± #0781A1 */
    .stat-value { font-weight: 700; color: #0781A1; font-size: 13.4px; }
    .stat-value.green { color: #4CAF50; }
    .stat-value.red   { color: #EF9A9A; }

    /* 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; }

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

    /* Locked arenas content: noise distortion instead of solid overlay */
    .locked-content {
      filter: url(#arenas-noise) contrast(0.15) brightness(0.4);
      pointer-events: none;
      user-select: none;
    }