:root {
  --blue:      #4a7dff;
  --blue-dim:  rgba(74,125,255,.18);
  --blue-glow: rgba(74,125,255,.08);
  --blue-faint:rgba(74,125,255,.04);
  --text:      #f0f0f5;
  --text-dim:  rgba(160,160,176,.7);
  --text-faint:rgba(106,106,122,.75);
  --bg:        #08080d;
  --surface:   rgba(12,12,20,.95);
  --border:    rgba(255,255,255,.055);
  --border-b:  rgba(74,125,255,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:'Montserrat',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:#06060a}
::-webkit-scrollbar-thumb{background:#1a1a28;border-radius:2px}
::selection{background:rgba(74,125,255,.25);color:#fff}

/* GRAIN */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}

/* MOUSE GLOW */
.mouse-glow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(74,125,255,.045) 0%,transparent 65%);pointer-events:none;z-index:1;transform:translate(-50%,-50%);will-change:left,top;transition:left .08s,top .08s}
@media(max-width:768px){.mouse-glow{display:none}}

/* AMBIENT ORBS */
.orb{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.orb-1{width:700px;height:700px;top:-15%;left:-10%;background:radial-gradient(circle,rgba(74,125,255,.055) 0%,transparent 70%);animation:orbd 24s ease-in-out infinite}
.orb-2{width:500px;height:500px;bottom:5%;right:-8%;background:radial-gradient(circle,rgba(100,80,255,.04) 0%,transparent 70%);animation:orbd 28s ease-in-out infinite;animation-delay:-10s}
@keyframes orbd{0%,100%{transform:translate(0,0)}25%{transform:translate(30px,-20px)}50%{transform:translate(-20px,30px)}75%{transform:translate(20px,20px)}}

/* TOPBAR */
.topbar{position:sticky;top:0;z-index:100;background:rgba(8,8,13,.75);backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border-bottom:1px solid var(--border);padding:0 clamp(16px,3vw,48px);height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-brand{display:flex;align-items:center;gap:14px}
.brand-mono{font-size:18px;font-weight:200;letter-spacing:.25em;color:var(--text)}
.brand-sep{width:1px;height:22px;background:var(--border)}
.brand-sub{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(74,125,255,.5)}
.topbar-stats{display:flex;gap:0;border:1px solid var(--border);border-radius:3px;overflow:hidden}
.tstat{padding:0 20px;height:48px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--border);min-width:90px;position:relative}
.tstat:last-child{border-right:none}
.tstat-val{font-size:15px;font-weight:300;letter-spacing:-.01em;color:var(--text);line-height:1}
.tstat-val.blue{color:var(--blue)}
.tstat-val.green{color:#10b981}
.tstat-val.purple{color:#8b5cf6}
.tstat-val.amber{color:#f59e0b}
.tstat-lbl{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint);margin-top:4px}
.tstat-glow{position:absolute;inset:0;background:var(--blue-faint);opacity:0;transition:opacity .3s}
.tstat:hover .tstat-glow{opacity:1}
.topbar-level{display:flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid var(--border-b);border-radius:2px;background:rgba(74,125,255,.04)}
.level-lbl{font-size:8px;letter-spacing:.2em;text-transform:uppercase;color:rgba(74,125,255,.45)}
.level-val{font-size:16px;font-weight:200;color:var(--blue);letter-spacing:.05em}

/* TABS */
.tabs{display:flex;border-bottom:1px solid var(--border);padding:0 clamp(16px,3vw,48px);background:rgba(8,8,13,.6);position:sticky;top:64px;z-index:90;backdrop-filter:blur(20px)}
.tab{padding:14px 22px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid transparent;cursor:pointer;transition:color .2s,border-color .2s;position:relative;margin-bottom:-1px}
.tab:hover{color:rgba(240,240,245,.6)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--danger-c,#ef4444);margin-left:6px;vertical-align:middle;opacity:0;transition:opacity .3s}
.tab-dot.visible{opacity:1}

/* LAYOUT */
.panels{padding:clamp(14px,2vw,28px) clamp(16px,3vw,48px);position:relative;z-index:2}
.panel{display:none}
.panel.active{display:block}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.col-full{grid-column:1/-1}
@media(max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* GLASS CARD */
.gc{background:rgba(8,8,13,.85);border:1px solid var(--border);border-radius:4px;padding:24px;position:relative;overflow:hidden}
.gc::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(74,125,255,0),rgba(74,125,255,.015));transition:background .4s;pointer-events:none}
.gc:hover::before{background:linear-gradient(135deg,rgba(74,125,255,0),rgba(74,125,255,.04))}
.gc-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:rgba(74,125,255,.42);margin-bottom:16px;font-weight:500}
.gc-title{font-size:14px;font-weight:400;color:var(--text);margin-bottom:4px}

/* TICKER ROW */
.ticker-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:4px;overflow:hidden;background:var(--border);gap:1px;margin-bottom:20px}
.ticker-cell{background:rgba(8,8,13,.9);padding:22px 20px;position:relative}
.ticker-cell-glow{position:absolute;inset:0;background:var(--blue-faint);opacity:0;transition:opacity .3s;pointer-events:none}
.ticker-cell:hover .ticker-cell-glow{opacity:1}
.ticker-n{font-size:30px;font-weight:200;letter-spacing:-.03em;line-height:1;color:var(--text)}
.ticker-n .unit{font-size:16px;color:var(--blue)}
.ticker-n.green .unit,.ticker-n.green{color:#10b981}
.ticker-n.purple .unit,.ticker-n.purple{color:#8b5cf6}
.ticker-n.amber .unit,.ticker-n.amber{color:#f59e0b}
.ticker-l{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-faint);margin-top:7px}
@media(max-width:680px){.ticker-row{grid-template-columns:1fr 1fr}}

/* BAR */
.bar-wrap{margin:10px 0}
.bar-lbl{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.bar-bg{height:2px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden}
.bar-fill{height:100%;border-radius:1px;transition:width .3s ease}
.bar-fill.blue{background:linear-gradient(90deg,rgba(74,125,255,.7),#4a7dff)}
.bar-fill.green{background:#10b981}
.bar-fill.amber{background:#f59e0b}
.bar-fill.red{background:#ef4444}

/* SECTION DIVIDERS */
.section-line{height:1px;background:var(--border);margin:20px 0}
.section-eyebrow{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(74,125,255,.38);font-weight:500;margin-bottom:12px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:none;border-radius:2px;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background .2s}
.btn:hover::after{background:rgba(255,255,255,.04)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:disabled::after{display:none}
.btn-blue{background:rgba(74,125,255,.15);color:var(--blue);border:1px solid rgba(74,125,255,.25);width:100%}
.btn-blue:hover:not(:disabled){background:rgba(74,125,255,.22);border-color:rgba(74,125,255,.4)}
.btn-ghost{background:rgba(255,255,255,.04);color:rgba(240,240,245,.5);border:1px solid var(--border);width:100%}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.07);color:rgba(240,240,245,.8)}
.btn-green{background:rgba(16,185,129,.12);color:#10b981;border:1px solid rgba(16,185,129,.2)}
.btn-green:hover:not(:disabled){background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.4)}
.btn-red{background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.18)}
.btn-red:hover:not(:disabled){background:rgba(239,68,68,.18)}
.btn-accent{background:linear-gradient(135deg,rgba(74,125,255,.2),rgba(100,130,255,.15));color:var(--blue);border:1px solid rgba(74,125,255,.3);width:100%;padding:12px 20px}
.btn-accent:hover:not(:disabled){background:linear-gradient(135deg,rgba(74,125,255,.3),rgba(100,130,255,.22));border-color:rgba(74,125,255,.5)}
.btn-sm{padding:6px 12px;font-size:9px}

/* ACTION PULSE (sprint) */
@keyframes btnPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,125,255,.3)}50%{box-shadow:0 0 0 6px rgba(74,125,255,0)}}
.btn-pulsing{animation:btnPulse .8s infinite}

/* CONTRACT CARDS */
.contracts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.ccard{background:rgba(8,8,13,.9);border:1px solid var(--border);border-radius:4px;padding:18px;transition:border-color .2s;position:relative;overflow:hidden}
.ccard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(74,125,255,.2),transparent);opacity:0;transition:opacity .3s}
.ccard:hover{border-color:rgba(255,255,255,.1)}
.ccard:hover::after{opacity:1}
.ccard.active-c{border-color:rgba(74,125,255,.35)}
.ccard.active-c::after{opacity:1;background:linear-gradient(90deg,transparent,rgba(74,125,255,.4),transparent)}
.ccard-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.ccard-name{font-size:12px;font-weight:500;color:var(--text);letter-spacing:.01em}
.ctype{font-size:8px;letter-spacing:.15em;text-transform:uppercase;padding:3px 9px;border-radius:1px}
.ctype-web{background:rgba(74,125,255,.12);color:rgba(107,140,255,.8);border:1px solid rgba(74,125,255,.15)}
.ctype-social{background:rgba(139,92,246,.12);color:rgba(167,139,250,.8);border:1px solid rgba(139,92,246,.15)}
.ctype-seo{background:rgba(16,185,129,.1);color:rgba(52,211,153,.8);border:1px solid rgba(16,185,129,.15)}
.ctype-campaign{background:rgba(245,158,11,.1);color:rgba(251,191,36,.8);border:1px solid rgba(245,158,11,.15)}
.ctype-branding{background:rgba(236,72,153,.1);color:rgba(244,114,182,.8);border:1px solid rgba(236,72,153,.15)}
.ccard-client{font-size:10px;color:var(--text-faint);margin-bottom:10px;letter-spacing:.03em}
.ccard-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.cstat{display:flex;flex-direction:column;gap:3px}
.cstat-l{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:rgba(74,74,102,.8)}
.cstat-v{font-size:11px;font-weight:500}
.cstat-v.g{color:#10b981}
.cstat-v.p{color:#8b5cf6}
.cstat-v.w{color:#f59e0b}
.cstat-v.r{color:#ef4444}
.ccard-btns{display:flex;gap:8px}
.ccard-btns .btn{flex:1}
.no-data{text-align:center;color:var(--text-faint);padding:36px 20px;font-size:11px;letter-spacing:.08em;border:1px solid var(--border);border-radius:4px}

/* ROW ITEMS */
.row-item{display:flex;align-items:center;gap:14px;padding:14px 16px;border-top:1px solid var(--border);transition:background .2s;cursor:default}
.row-item:first-child{border-top:none}
.row-item:hover{background:rgba(74,125,255,.03)}
.row-info{flex:1}
.row-name{font-size:12px;font-weight:400;color:var(--text);letter-spacing:.01em}
.row-desc{font-size:10px;color:var(--text-faint);margin-top:3px;letter-spacing:.03em}
.row-lock{font-size:9px;color:rgba(239,68,68,.6);letter-spacing:.06em;margin-top:3px}
.row-val{font-size:11px;color:rgba(245,158,11,.8);font-weight:500;letter-spacing:.04em;white-space:nowrap;margin-right:10px}
.row-done{font-size:9px;color:rgba(16,185,129,.7);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;margin-right:10px}

/* EMP ITEM */
.emp-item{display:flex;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--border);transition:background .2s}
.emp-item:first-child{border-top:none}
.emp-item:hover{background:rgba(74,125,255,.025)}
.emp-avatar{width:32px;height:32px;border-radius:2px;background:rgba(74,125,255,.1);border:1px solid rgba(74,125,255,.18);display:flex;align-items:center;justify-content:center;font-size:9px;letter-spacing:.08em;color:rgba(74,125,255,.7);flex-shrink:0;font-weight:500}
.emp-info{flex:1}
.emp-name{font-size:12px;font-weight:400;color:var(--text)}
.emp-role{font-size:9px;color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.emp-stats{text-align:right}
.emp-income{font-size:11px;color:#10b981;font-weight:500}
.emp-rep{font-size:9px;color:rgba(139,92,246,.7);margin-top:2px}

/* MILESTONE */
.m-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.m-item:first-child{border-top:none}
.m-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;transition:background .3s}
.m-dot.done{background:#10b981}
.m-dot.todo{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15)}
.m-text{flex:1;font-size:11px;color:var(--text-dim);letter-spacing:.02em}
.m-item.done .m-text{color:rgba(255,255,255,.3)}
.m-reward{font-size:9px;color:rgba(74,125,255,.55);letter-spacing:.08em;white-space:nowrap}

/* SECTION HEADER WITHIN CONTRACTS */
.s-header{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(74,125,255,.38);margin:20px 0 12px;font-weight:500}
.s-header:first-child{margin-top:0}

/* DATA FLOW LINE */
.dfl{height:1px;background:linear-gradient(90deg,transparent,rgba(74,125,255,.15),rgba(74,125,255,.35),rgba(74,125,255,.15),transparent);animation:dflow 3s linear infinite;margin:16px 0}
@keyframes dflow{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}

/* SCANLINES on active work section */
.scanlines-overlay{position:absolute;inset:0;opacity:.012;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.25) 2px,rgba(0,0,0,.25) 4px);pointer-events:none;z-index:0}

/* LOG */
.log{background:#06060a;border:1px solid var(--border);border-radius:3px;padding:12px;max-height:160px;overflow-y:auto;font-family:'Courier New',monospace;font-size:10px}
.log-e{padding:3px 0;border-bottom:1px solid rgba(255,255,255,.03);display:flex;gap:10px}
.log-t{color:rgba(74,74,102,.7);flex-shrink:0}
.log-m{letter-spacing:.02em}
.log-m.ok{color:rgba(74,125,255,.8)}
.log-m.g{color:rgba(16,185,129,.8)}
.log-m.w{color:rgba(245,158,11,.75)}
.log-m.e{color:rgba(239,68,68,.75)}
.log-m.v{color:rgba(139,92,246,.8)}

/* TOAST */
.toast{position:fixed;top:80px;right:20px;z-index:500;background:rgba(12,12,20,.97);border:1px solid var(--border);border-radius:4px;padding:16px 20px;max-width:280px;animation:tIn .3s ease;backdrop-filter:blur(20px)}
.toast.g{border-left:2px solid #10b981}
.toast.b{border-left:2px solid #ef4444}
.toast.i{border-left:2px solid var(--blue)}
.toast-title{font-size:11px;font-weight:500;color:var(--text);margin-bottom:4px;letter-spacing:.04em}
.toast-msg{font-size:10px;color:var(--text-faint);line-height:1.5;letter-spacing:.02em}
@keyframes tIn{from{transform:translateX(110%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes tOut{to{transform:translateX(30%);opacity:0}}

/* ACTIVE CONTRACT DISPLAY */
.active-contract-bar{background:rgba(74,125,255,.04);border:1px solid rgba(74,125,255,.1);border-radius:3px;padding:14px 16px;margin-bottom:16px}
.acb-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(74,125,255,.4);margin-bottom:6px}
.acb-name{font-size:13px;font-weight:400;color:var(--text);margin-bottom:8px}
.acb-meta{font-size:9px;color:var(--text-faint);letter-spacing:.06em;display:flex;gap:16px}

/* SPRINT COUNTER */
.sprint-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:rgba(74,125,255,.08);border:1px solid rgba(74,125,255,.2);border-radius:2px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;opacity:0;transition:opacity .3s}
.sprint-badge.visible{opacity:1}
.sprint-dot{width:5px;height:5px;border-radius:50%;background:var(--blue);animation:spd .5s infinite alternate}
@keyframes spd{from{opacity:.3}to{opacity:1}}

/* ── INTRO VIDEO BG ── */
.intro-video-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:1;pointer-events:none}
.intro-video-tint{display:none}
/* ── INTRO SCREEN ── */
#intro{position:fixed;inset:0;z-index:9999;background:transparent;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
#intro.out{opacity:0;transform:scale(1.03);pointer-events:none}
.intro-inner{max-width:560px;width:100%;position:relative;z-index:2}
.intro-eyebrow{font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:rgba(74,125,255,.45);margin-bottom:28px;opacity:0;animation:iup .7s cubic-bezier(.16,1,.3,1) .2s forwards}
.intro-day{font-size:clamp(56px,12vw,110px);font-weight:200;letter-spacing:.06em;line-height:1;color:var(--text);margin-bottom:4px;opacity:0;animation:iup .9s cubic-bezier(.16,1,.3,1) .4s forwards}
.intro-day-sub{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(74,125,255,.4);margin-bottom:40px;opacity:0;animation:iup .7s cubic-bezier(.16,1,.3,1) .6s forwards}
.intro-rule{height:1px;background:linear-gradient(90deg,rgba(74,125,255,.35),transparent);margin-bottom:36px;opacity:0;animation:iup .6s ease .8s forwards}
.intro-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.055);border-radius:3px;overflow:hidden;margin-bottom:32px;opacity:0;animation:iup .7s cubic-bezier(.16,1,.3,1) 1s forwards}
.intro-stat{background:#08080d;padding:18px 16px}
.intro-stat-n{font-size:28px;font-weight:200;letter-spacing:-.02em;line-height:1}
.intro-stat-n.red{color:#ef4444}
.intro-stat-n.blue{color:var(--blue)}
.intro-stat-n.dim{color:rgba(255,255,255,.2)}
.intro-stat-l{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(106,106,122,.7);margin-top:6px}
.intro-lines{margin-bottom:36px;opacity:0;animation:iup .7s cubic-bezier(.16,1,.3,1) 1.2s forwards}
.intro-line{display:flex;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid rgba(255,255,255,.04);font-size:11px;color:rgba(160,160,176,.65);line-height:1.5;letter-spacing:.02em}
.intro-line:first-child{border-top:none}
.intro-line .dot{width:4px;height:4px;border-radius:50%;background:rgba(239,68,68,.5);flex-shrink:0;margin-top:5px}
.intro-line .dot.b{background:rgba(74,125,255,.5)}
.intro-cta{opacity:0;animation:iup .7s cubic-bezier(.16,1,.3,1) 1.5s forwards}
.intro-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 32px;background:rgba(74,125,255,.12);color:var(--blue);border:1px solid rgba(74,125,255,.25);border-radius:2px;font-family:'Montserrat',sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:all .25s;width:100%;justify-content:center}
.intro-btn:hover{background:rgba(74,125,255,.22);border-color:rgba(74,125,255,.45)}
.intro-btn svg{transition:transform .25s}
.intro-btn:hover svg{transform:translateX(4px)}
.intro-orb{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(130px);top:-30%;left:-20%;background:radial-gradient(circle,rgba(74,125,255,.06) 0%,transparent 70%);pointer-events:none;z-index:0}
@keyframes iup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ── HELP BUTTON ── */
.help-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:transparent;border:1px solid rgba(255,255,255,.07);border-radius:2px;font-family:'Montserrat',sans-serif;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:rgba(240,240,245,.35);cursor:pointer;transition:all .2s;flex-shrink:0}
.help-btn:hover{border-color:rgba(74,125,255,.3);color:rgba(74,125,255,.7);background:rgba(74,125,255,.04)}
/* ── LIGHTBOX ── */
#help-modal{position:fixed;inset:0;z-index:8000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s}
#help-modal.open{opacity:1;pointer-events:auto}
.hm-backdrop{position:absolute;inset:0;background:rgba(4,4,8,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hm-box{position:relative;z-index:1;background:#0c0c16;border:1px solid rgba(255,255,255,.07);border-radius:4px;width:100%;max-width:660px;max-height:90vh;overflow-y:auto;transform:translateY(16px);transition:transform .35s cubic-bezier(.16,1,.3,1)}
#help-modal.open .hm-box{transform:translateY(0)}
.hm-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 20px;border-bottom:1px solid rgba(255,255,255,.055)}
.hm-title{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue);font-weight:500}
.hm-close{background:none;border:none;color:rgba(255,255,255,.25);cursor:pointer;padding:4px;line-height:1;transition:color .2s;font-size:18px}
.hm-close:hover{color:rgba(255,255,255,.7)}
.hm-body{padding:24px 26px}
.hm-section{margin-bottom:28px}
.hm-section:last-child{margin-bottom:0}
.hm-sec-label{font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:rgba(74,125,255,.4);margin-bottom:14px;font-weight:500;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.04)}
.hm-step{display:flex;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.03)}
.hm-step:first-of-type{border-top:none}
.hm-step-n{font-size:11px;color:rgba(74,125,255,.35);font-weight:200;min-width:20px;flex-shrink:0;padding-top:1px}
.hm-step-body{}
.hm-step-title{font-size:12px;font-weight:400;color:rgba(240,240,245,.85);margin-bottom:3px;letter-spacing:.01em}
.hm-step-desc{font-size:11px;color:rgba(106,106,122,.9);line-height:1.65;letter-spacing:.02em}
.hm-tip{display:flex;gap:10px;padding:12px 14px;background:rgba(74,125,255,.04);border:1px solid rgba(74,125,255,.1);border-radius:3px;margin-top:6px}
.hm-tip-icon{font-size:13px;flex-shrink:0}
.hm-tip-text{font-size:11px;color:rgba(160,160,176,.7);line-height:1.65;letter-spacing:.02em}
.hm-tip-text strong{color:rgba(107,140,255,.8);font-weight:500}
.hm-warn{background:rgba(245,158,11,.04);border-color:rgba(245,158,11,.12)}
.hm-warn .hm-tip-text strong{color:rgba(251,191,36,.75)}
.hm-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.hm-stat{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);border-radius:3px;padding:10px 12px}
.hm-stat-name{font-size:10px;color:rgba(240,240,245,.75);font-weight:500;margin-bottom:3px}
.hm-stat-desc{font-size:10px;color:rgba(106,106,122,.85);line-height:1.5}

/* ══ MONITOR PANEL ══ */
.monitor{background:rgba(6,6,12,.95);border:1px solid rgba(255,255,255,.055);border-radius:4px;padding:0;overflow:hidden;margin-bottom:16px;position:relative}
.monitor-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.04);background:rgba(8,8,14,1)}
.monitor-title{font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:rgba(74,125,255,.4);font-weight:500}
.monitor-status{display:flex;align-items:center;gap:6px;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:rgba(106,106,122,.6)}
.monitor-led{width:5px;height:5px;border-radius:50%;background:#10b981;animation:ledPulse 2s ease-in-out infinite}
@keyframes ledPulse{0%,100%{opacity:.5;box-shadow:0 0 0 0 rgba(16,185,129,.4)}50%{opacity:1;box-shadow:0 0 0 3px rgba(16,185,129,0)}}
.monitor-led.warn{background:#f59e0b;animation:ledWarn .4s ease-in-out infinite}
@keyframes ledWarn{0%,100%{opacity:.4}50%{opacity:1}}
.monitor-led.crit{background:#ef4444;animation:ledCrit .25s ease-in-out infinite}
@keyframes ledCrit{0%,100%{opacity:.2}50%{opacity:1}}
.monitor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.035)}
.chart-cell{background:rgba(6,6,12,.97);padding:12px 14px 10px;position:relative;overflow:hidden}
.chart-cell-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.chart-label{font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:rgba(106,106,122,.7)}
.chart-val{font-size:13px;font-weight:300;letter-spacing:-.01em;line-height:1}
.chart-delta{font-size:8px;letter-spacing:.06em;margin-top:2px;transition:color .4s}
.chart-delta.up{color:#10b981}
.chart-delta.down{color:#ef4444}
.chart-delta.flat{color:rgba(106,106,122,.5)}
canvas.sparkline{display:block;width:100%;height:44px}
/* ALERT FLASH */
.chart-cell.flash-warn{animation:cellFlashW .5s ease}
.chart-cell.flash-crit{animation:cellFlashC .4s ease}
@keyframes cellFlashW{0%{background:rgba(245,158,11,.08)}100%{background:rgba(6,6,12,.97)}}
@keyframes cellFlashC{0%{background:rgba(239,68,68,.12)}100%{background:rgba(6,6,12,.97)}}
/* ALERT BAR */
.alert-bar{display:none;align-items:center;gap:10px;padding:7px 16px;font-size:9px;letter-spacing:.1em;border-top:1px solid transparent;color:var(--text-faint)}
.alert-bar.visible{display:flex}
.alert-bar.warn{background:rgba(245,158,11,.05);border-color:rgba(245,158,11,.15);color:rgba(251,191,36,.75)}
.alert-bar.crit{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.18);color:rgba(252,165,165,.8);animation:alertBlink .6s ease-in-out infinite}
@keyframes alertBlink{0%,100%{opacity:.7}50%{opacity:1}}
.alert-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.alert-bar.warn .alert-dot{background:#f59e0b}
.alert-bar.crit .alert-dot{background:#ef4444}
@media(max-width:780px){.monitor-grid{grid-template-columns:repeat(2,1fr)}}

/* ── MILESTONE VIDEO TOAST ── */
#milestone-toast{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9000;
  width:200px;
  aspect-ratio:9/16;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(74,125,255,.15);
  opacity:0;
  transform:translateY(20px) scale(.95);
  transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
#milestone-toast.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#milestone-toast video{width:100%;height:100%;object-fit:cover;display:block}
#milestone-toast .mt-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(4,4,12,.92) 0%,rgba(4,4,12,.3) 40%,transparent 70%);
  pointer-events:none;
}
#milestone-toast .mt-content{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px 12px;
}
#milestone-toast .mt-eyebrow{
  font-size:8px;letter-spacing:.25em;text-transform:uppercase;
  color:rgba(74,125,255,.8);font-weight:500;margin-bottom:6px;
}
#milestone-toast .mt-title{
  font-size:13px;font-weight:500;color:#f0f0f5;line-height:1.3;
  margin-bottom:4px;letter-spacing:.01em;
}
#milestone-toast .mt-reward{
  font-size:10px;color:rgba(16,185,129,.9);letter-spacing:.06em;
}
#milestone-toast .mt-close{
  position:absolute;top:8px;right:8px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8);font-size:14px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;font-family:inherit;
}
#milestone-toast .mt-close:hover{background:rgba(0,0,0,.85);color:#fff}
#milestone-toast .mt-controls{
  position:absolute;bottom:10px;right:10px;
  display:flex;gap:6px;
}
#milestone-toast .mt-btn{
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.8);font-size:13px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .15s;font-family:inherit;
}
#milestone-toast .mt-btn:hover{background:rgba(0,0,0,.85);color:#fff;transform:scale(1.1)}
#milestone-toast .mt-btn:active{transform:scale(.95)}
/* pulsing ring gdy film zatrzymany */
#milestone-toast.paused .mt-play-btn{
  background:rgba(74,125,255,.35);
  border-color:rgba(74,125,255,.6);
  animation:mtPlayPulse 1.2s ease-in-out infinite;
}
@keyframes mtPlayPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,125,255,.3)}50%{box-shadow:0 0 0 5px rgba(74,125,255,0)}}

/* ═══════════════════════════════════════
   MOBILE — max-width: 480px
   ═══════════════════════════════════════ */
@media(max-width:480px){

  /* TOPBAR — ukryj statystyki, zostaw brand + level */
  .topbar{padding:0 14px;height:52px;gap:10px}
  .topbar-stats{display:none}
  .brand-sep{display:none}
  .brand-sub{display:none}
  .brand-mono{font-size:15px}
  .topbar-level{padding:5px 10px}
  .level-val{font-size:14px}

  /* TABS — mniejszy padding, tekst skrócony przez overflow */
  .tabs{padding:0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:0;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{padding:12px 12px;font-size:9px;letter-spacing:.12em;white-space:nowrap;flex-shrink:0}

  /* PANELS */
  .panels{padding:12px 12px}

  /* TICKER — 2×2 zamiast 4×1 */
  .ticker-row{grid-template-columns:1fr 1fr}
  .ticker-cell{padding:14px 12px}
  .ticker-n{font-size:22px}
  .ticker-n .unit{font-size:13px}

  /* GRIDS */
  .grid-3,.grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}

  /* GLASS CARD */
  .gc{padding:16px 14px}

  /* PRZYCISKI AKCJI — większy tap target */
  .btn{padding:12px 16px;font-size:10px}
  .btn-accent{padding:14px 16px}
  .btn-sm{padding:8px 12px;font-size:9px}

  /* CONTRACT CARDS */
  .contracts-grid{grid-template-columns:1fr}
  .ccard{padding:14px}
  .ccard-stats{grid-template-columns:repeat(2,1fr)}

  /* ROW ITEMS — luźniejszy układ na wąskim */
  .row-item{padding:12px 10px;gap:10px;flex-wrap:wrap}
  .row-val{margin-right:4px}

  /* MONITOR — 2 kolumny */
  .monitor-grid{grid-template-columns:1fr 1fr}
  .chart-cell{padding:10px 10px 8px}

  /* MILESTONE TOAST — fullscreen na mobile */
  #milestone-toast{
    inset:0;
    width:100%;
    height:100%;
    right:0;left:0;top:0;bottom:0;
    border-radius:0;
    aspect-ratio:auto;
    z-index:99999;
    background:#000;
  }
  #milestone-toast video{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0.7;
  }
  #milestone-toast .mt-overlay{
    display:block;
    background:linear-gradient(to top, rgba(4,4,12,.95) 0%, rgba(4,4,12,.3) 50%, transparent 100%);
  }
  #milestone-toast .mt-content{
    position:absolute;
    bottom:90px;
    left:0;right:0;
    padding:0 28px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  #milestone-toast .mt-eyebrow{font-size:10px;letter-spacing:.2em}
  #milestone-toast .mt-title{font-size:26px;line-height:1.2}
  #milestone-toast .mt-reward{font-size:15px}
  #milestone-toast .mt-close{
    position:fixed;
    top:calc(16px + env(safe-area-inset-top,0px));
    right:16px;
    width:44px;height:44px;
    font-size:22px;
    z-index:100000;
  }
  #milestone-toast .mt-play-btn{display:none}
  #milestone-toast .mt-controls{
    position:absolute;
    bottom:calc(24px + env(safe-area-inset-bottom,0px));
    left:28px;
    gap:12px;
  }
  #milestone-toast .mt-btn{
    width:44px;height:44px;
    font-size:20px;
  }

  /* TOAST NOTYFIKACJE */
  .toast{right:12px;left:12px;max-width:none}

  /* HELP MODAL */
  .hm-box{max-height:95vh;border-radius:4px}
  .hm-body{padding:16px 16px}
  .hm-head{padding:16px 16px 14px}
  .hm-stat-row{grid-template-columns:1fr}

  /* INTRO */
  .intro-inner{padding:0 4px}
  .intro-stats{grid-template-columns:1fr}
  .intro-stat{padding:12px 14px}
  .intro-stat-n{font-size:22px}

  /* LOG */
  .log{font-size:9px;max-height:120px}

  /* SPRINT BOX — kompaktowy */
  #sprint-box{padding:14px}

  /* ACTIVE CONTRACT BAR */
  .active-contract-bar{padding:12px}
  .acb-meta{flex-wrap:wrap;gap:8px}
}

/* ═══════════════════════════════════════
   MOBILE — max-width: 360px (małe ekrany)
   ═══════════════════════════════════════ */
@media(max-width:360px){
  .ticker-n{font-size:19px}
  .tab{font-size:8px;padding:12px 10px;letter-spacing:.08em}
  .gc{padding:12px 10px}
  .panels{padding:10px 10px}
  .topbar{height:48px}
}
@media(max-width:768px){.sound-label-text{display:none}}