/* ============================================================
   LAYOUT — casca da página: topbar (KPIs de XP/streak) e hero.
   Por que separado: é a única parte do CSS que não muda quando
   se adiciona/edita uma trilha — fica estável e fácil de achar.
   ============================================================ */

/* ============ TOP BAR ============ */
.topbar{position:sticky;top:0;z-index:40;background:rgba(11,18,32,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.topbar-inner{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 18px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.2px;flex-shrink:0;cursor:pointer;}
.brand-mark{width:30px;height:30px;position:relative;flex-shrink:0;}
.brand-mark svg{width:100%;height:100%;}
.kpi-row{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end;}
.kpi-chip{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);padding:6px 10px 6px 8px;border-radius:10px;font-family:var(--font-display);font-size:13px;font-weight:600;white-space:nowrap;}
.kpi-chip .ico{width:16px;height:16px;flex-shrink:0;}
.kpi-chip .lbl{color:var(--text-faint);font-family:var(--font-body);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-right:2px;}

/* ============ HERO ============ */
.hero{max-width:1180px;margin:0 auto;width:100%;padding:38px 18px 8px;}
.hero-eyebrow{font-family:var(--font-mono);font-size:12px;color:var(--core);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.hero-eyebrow::before{content:'';width:7px;height:7px;border-radius:2px;background:var(--core);display:inline-block;transform:rotate(45deg);}
.hero h1{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,4.2vw,42px);line-height:1.08;letter-spacing:-.5px;max-width:820px;}
.hero h1 .accent{color:var(--core);}
.hero p{color:var(--text-dim);font-size:15px;max-width:640px;margin-top:12px;line-height:1.6;}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(120%);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 20px;font-size:13px;z-index:200;transition:transform .25s;font-family:var(--font-display);font-weight:600;}
.toast.show{transform:translateX(-50%) translateY(0);}