/* SymPRM UI v2 "monitor" - wspolna warstwa wygladu modulow (triage, leki, dawki, przypadki, pals, als, rko, zespol).
   Ladowana jako OSTATNI arkusz; nie zmienia logiki ani klas - tylko wyglad.
   Kierunek: kardiomonitor / sprzet w karetce. Zawsze ciemne tlo, kolory parametrow jak na monitorze,
   duze liczby o stalej szerokosci, czcionka Inter. Tryb ciemny modulow jest wlaczony na stale (build). */

/* ---------- tokeny (zawsze ciemne) ---------- */
:root:not(#_){  /* :not(#_) = wygrywa z motywami modulow */
  color-scheme: dark;
  --bg:#07090b; --page:#07090b; --surface:#0f1418; --surface-2:#151c21; --surface-3:#1c252b;
  --ink:#e9eef2; --ink-2:#b3bfc7; --muted:#7f8c96;
  --border:rgba(150,180,200,.13); --border-strong:rgba(150,180,200,.28);
  --good:#2fe07a; --good-wash:rgba(47,224,122,.12);
  --bad:#ff4d4f; --bad-wash:rgba(255,77,79,.13);
  --warn:#ffb020; --warn-wash:rgba(255,176,32,.13);
  --info:#22d3ee;
  --on-bad:#1a0303; --on-good:#03180b;
  --shadow:none;
  --r:8px; --r-lg:12px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:var(--sans); --mono:var(--sans);
}

/* akcent modulu - jak kolory torow na monitorze */
html[data-app="triage"]:not(#_)   {--accent:#60a5fa; --accent-ink:#06142a; --accent-wash:rgba(96,165,250,.14);}
html[data-app="przypadki"]:not(#_){--accent:#fbbf24; --accent-ink:#231802; --accent-wash:rgba(251,191,36,.13);}
html[data-app="als"]:not(#_)      {--accent:#22d3ee; --accent-ink:#03191d; --accent-wash:rgba(34,211,238,.13);}
html[data-app="pals"]:not(#_)     {--accent:#ff7aa8; --accent-ink:#2a0613; --accent-wash:rgba(255,122,168,.13);}
html[data-app="leki"]:not(#_)     {--accent:#2dd4bf; --accent-ink:#03201c; --accent-wash:rgba(45,212,191,.13);}
html[data-app="dawki"]:not(#_)    {--accent:#a78bfa; --accent-ink:#150a2e; --accent-wash:rgba(167,139,250,.14);}
html[data-app="rko"]:not(#_), html[data-app="zespol"]:not(#_){--accent:#34d399; --accent-ink:#03201a; --accent-wash:rgba(52,211,153,.13);}

/* ---------- baza ---------- */
html{background:var(--bg);}
body{background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"tnum" 1, "ss02" 1;}
body, body *{font-family:var(--sans) !important;}
#app{max-width:980px; padding-top:0;}
h1,h2,h3,h4,.stencil{font-weight:700; letter-spacing:-.015em; text-transform:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
::selection{background:var(--accent); color:var(--accent-ink);}
.tabular,.mono{font-variant-numeric:tabular-nums;}
a{color:var(--accent);}

/* ---------- pasek gorny: jak naglowek monitora ---------- */
.topbar{
  background:var(--bg); border:0; border-radius:0; box-shadow:none;
  padding:14px 0 12px; margin:0 0 20px; position:relative;
  border-bottom:1px solid var(--border);
}
.topbar::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); opacity:.9;}
.brand{gap:12px;}
.brand-badge, .brand img{width:36px; height:36px; border-radius:var(--r); box-shadow:none;}
.brand-badge{background:transparent; padding:0;}
.brand-text h1, .brand-text b{font-size:19px; font-weight:750; line-height:1.1; letter-spacing:-.01em; text-transform:none; color:var(--ink);}
.brand-text p, .brand-text small{font-size:12px; color:var(--muted); margin-top:2px;}
.topbar-actions, .top-actions{gap:6px;}

/* ---------- przyciski: duze pola dotyku ---------- */
.btn{border-radius:var(--r); min-height:44px; padding:10px 16px; font-weight:600; font-size:14.5px; border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); box-shadow:none; transition:background .12s,border-color .12s;}
.btn:hover{border-color:var(--ink-2); background:var(--surface-3);}
.btn-primary, .btn.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700;}
.btn-primary:hover{filter:none; background:var(--accent); opacity:.9;}
.btn-ghost{background:transparent;}
.btn-sm{min-height:36px; padding:6px 12px; font-size:13px;}
.btn-support{border-radius:var(--r);}

/* ---------- panele ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:none; padding:20px 22px;}
.panel .panel{border:0; padding:0; background:transparent;}
.stack{gap:16px;}

/* ---------- wprowadzenie ---------- */
.hero, .panel.hero{background:transparent; border:0; box-shadow:none; padding:2px 0 4px; gap:8px;}
.hero .eyebrow{display:none;}
.hero h2{font-size:clamp(26px,4vw,34px); line-height:1.1; letter-spacing:-.02em; font-weight:750;}
.lede{font-size:15px; line-height:1.55; color:var(--ink-2); max-width:64ch;}
.eyebrow{font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

/* ---------- etykiety sekcji: jak opisy parametrow na monitorze ---------- */
.field-label{font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.field-label::after{content:""; flex:1; height:1px; background:var(--border);}
.field-label::before{content:none !important;}
.calc-field .field-label{display:block;}
.calc-field .field-label::after{content:none; display:none;}

/* ---------- wybor opcji ---------- */
.option-grid{gap:8px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.option-card, .mode{
  position:relative; border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2);
  padding:13px 14px 13px 40px; gap:3px; box-shadow:none; transition:border-color .12s, background .12s;
}
.option-card::before{
  content:""; position:absolute; left:14px; top:16px; width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--border-strong); background:transparent; box-sizing:border-box;
}
.option-card:hover, .mode:hover{border-color:var(--border-strong); background:var(--surface-3); transform:none;}
.option-card[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-wash); box-shadow:inset 3px 0 0 var(--accent);}
.option-card[aria-pressed="true"]::before{border:4px solid var(--accent);}
.option-card h4{font-size:15px; font-weight:650; letter-spacing:-.005em;}
.option-card p, .mode p{font-size:12.5px; color:var(--muted); line-height:1.45;}
.option-card.alg-card{padding-left:16px;}
.option-card.alg-card::before{display:none;}

/* ---------- zakladki ---------- */
.tabs{gap:0; border-bottom:1px solid var(--border); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{border:0; border-radius:0; background:transparent; color:var(--muted); padding:11px 14px; font-weight:600; font-size:14px; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.tab-btn:hover{color:var(--ink);}
.tab-btn[aria-selected="true"]{background:transparent; color:var(--accent); border-bottom-color:var(--accent);}
.main-tabs .tab-btn{flex:0 0 auto; min-height:44px;}

/* ---------- pasek postepu / gra ---------- */
.incident-bar, .gamebar{background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:6px 0 10px; box-shadow:none;}
.progress-track{height:4px; border-radius:2px; background:var(--surface-3);}
.progress-fill{border-radius:2px; background:var(--accent);}
.tag-card{border-radius:var(--r-lg); box-shadow:none; border:1px solid var(--border-strong); background:var(--surface);}
.tag-strip{height:3px; opacity:1; background:var(--accent);}

/* ---------- liczby: odczyt jak z monitora ---------- */
.stat-tile, .stat, .box{border-radius:var(--r); box-shadow:none; background:#000; border:1px solid var(--border);}
.stat-tile .value, .stat .v, .box b{font-weight:700; color:var(--accent); letter-spacing:-.02em;}
.stat-tile .label, .stat .l, .box span{font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

/* ---------- odpowiedzi, kafle, chipy ---------- */
.answer-btn, .tile, .ans{border-radius:var(--r); border-width:1px; background:var(--surface-2);}
.answer-btn:hover:not(:disabled), .tile:hover:not(:disabled){background:var(--surface-3); border-color:var(--border-strong);}
.chip{border-radius:999px; font-size:12px; font-weight:600; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border-strong); padding:6px 11px;}
.chip[aria-pressed="true"]{background:var(--accent-wash); color:var(--accent); border-color:var(--accent); box-shadow:none;}
.reveal{border-radius:var(--r-lg); border-width:1px; border-left-width:4px;}
.case-result, .q-result, .hist-item, .chg, .calc-card, .fb-box, .fb-dec, .prompt{border-radius:var(--r);}

/* ---------- pals / als / rko / zespol ---------- */
.calc-card{box-shadow:none; background:var(--surface-2); border:1px solid var(--border); border-top-width:1px !important; border-left:4px solid var(--border-strong);}
.calc-card.c-shock{border-left-color:var(--bad);} .calc-card.c-drug{border-left-color:var(--accent);} .calc-card.c-air{border-left-color:var(--good);} .calc-card.c-other{border-left-color:var(--warn);}
.calc-card .val{font-size:28px; font-weight:750; letter-spacing:-.02em;}
.calc-card.c-shock .val{color:var(--bad);} .calc-card.c-air .val{color:var(--good);} .calc-card.c-other .val{color:var(--warn);}
.calc-section{font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:10px; margin-top:14px;}
.calc-section::after{content:""; flex:1; height:1px; background:var(--border);}
.calc-field select, .calc-field input, .search, .num{border-radius:var(--r); border:1px solid var(--border-strong); background:#000; color:var(--ink); min-height:44px; font-size:16px; font-weight:600;}
.calc-field select:focus, .calc-field input:focus, .search:focus, .num:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-wash);}
.fb-box{border-width:1px; border-left-width:4px;}
.flow > .fb:not(:last-child)::after{background:var(--border-strong);}
#alg-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
#alg-list .alg-card h4{font-size:15.5px; font-weight:700; text-transform:none; letter-spacing:-.005em;}

/* timer: ekran monitora */
.timer-head, .run-head{border-radius:var(--r-lg); box-shadow:none; background:#000; border:1px solid var(--border-strong);}
.t-huge, .t-big{font-weight:750; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
.t-huge{color:var(--good);}
.t-big{color:var(--ink);}
#t-shocks{color:var(--bad);}
.timer-head .label, .run-head .label, .t-block .label{font-size:10.5px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.mega{border-radius:var(--r-lg); font-size:24px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;}
.mega small{text-transform:none; letter-spacing:0; font-weight:500;}
.prompt{border-width:1px; border-left-width:4px;}
.mega-shock, .t-shock, .pause-bar{background:var(--bad); border-color:var(--bad); color:#fff;}
.mega-resume, .pause-bar.ok{background:var(--good); border-color:var(--good); color:var(--on-good);}
.mega-inline-shock{color:var(--bad); border-color:var(--bad);}
.t-rosc{color:var(--good); border-color:var(--good);}

/* ---------- przypadki / triage ---------- */
.vitals > div{border-radius:var(--r); background:#000; border:1px solid var(--border);}
.vitals dt{font-size:10.5px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.vitals dd{font-weight:750; letter-spacing:-.02em;}
.drug-opt{border-radius:var(--r); border-width:1px;}

/* ---------- leki / dawki ---------- */
.modes{gap:8px;}
.mode{padding:14px 16px;}
.mode .ic{border-radius:var(--r);}
.mode h3{font-size:16px; font-weight:700; text-transform:none; letter-spacing:-.005em;}
.flash{border-radius:var(--r-lg); box-shadow:none; background:var(--surface); border:1px solid var(--border-strong);}
.modal{border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border-strong);}
.pop-panel, .updates-panel{border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border-strong); box-shadow:0 16px 40px -12px rgba(0,0,0,.7);}

/* ---------- wsparcie i inne aplikacje ---------- */
.suite{margin-top:32px;}
.suite-support{border-radius:var(--r-lg); box-shadow:none; background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--support,#fb7185);}
.suite-cta{border-radius:var(--r);}
.suite-title{font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.suite-app{border-radius:var(--r); box-shadow:none; background:var(--surface-2); border:1px solid var(--border);}
.promo-symprm{border-radius:var(--r-lg); box-shadow:none; background:var(--surface); border:1px solid var(--border);}
.promo-symprm::before{display:none;}

/* ---------- stopka ---------- */
footer.note{font-size:12px; line-height:1.7; color:var(--muted); border-top:1px solid var(--border); margin-top:40px; padding-top:18px;}
.credit-kg{border:0; background:transparent; padding:0; margin-top:6px; box-shadow:none; font-size:12px;}
.credit-kg .credit-sub{display:none;}
.legal h1, .legal h2{text-transform:none; font-weight:700;}

@media (max-width:560px){
  body{padding-inline:14px;}
  .topbar{padding:12px 0 10px; margin-bottom:16px;}
  .brand-text h1, .brand-text b{font-size:18px;}
  .panel{padding:16px;}
  .hero h2{font-size:26px;}
  .option-grid{grid-template-columns:1fr;}
  .mega{font-size:21px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;} }

/* timer: odczyt czytelny z odleglosci */
.timer-head .t-huge{font-size:clamp(40px,11vw,60px); line-height:1;}
.timer-head .t-big{font-size:clamp(26px,7vw,36px); line-height:1.05;}