:root{
  --bg:#eef3f2; --surface:#ffffff; --surface-2:#f3f7f6; --ink:#122024; --ink-2:#435257; --muted:#6f7f83;
  --border:rgba(18,32,36,.13); --border-strong:rgba(18,32,36,.26);
  --accent:#0f766e; --accent-ink:#ffffff; --accent-wash:rgba(15,118,110,.10);
  --good:#15803d; --good-wash:rgba(21,128,61,.12); --bad:#c0272d; --bad-wash:rgba(192,39,45,.10);
  --pick:#2563eb; --pick-wash:rgba(37,99,235,.12);
  --shadow:0 1px 2px rgba(18,32,36,.06), 0 10px 26px -14px rgba(18,32,36,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1213; --surface:#151c1e; --surface-2:#1b2427; --ink:#eef4f4; --ink-2:#c3cfd1; --muted:#8a9a9d;
    --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.24);
    --accent:#2dd4bf; --accent-ink:#06201d; --accent-wash:rgba(45,212,191,.14);
    --good:#4ade80; --good-wash:rgba(74,222,128,.14); --bad:#f87171; --bad-wash:rgba(248,113,113,.14);
    --pick:#60a5fa; --pick-wash:rgba(96,165,250,.16);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0d1213; --surface:#151c1e; --surface-2:#1b2427; --ink:#eef4f4; --ink-2:#c3cfd1; --muted:#8a9a9d;
  --border:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.24);
  --accent:#2dd4bf; --accent-ink:#06201d; --accent-wash:rgba(45,212,191,.14);
  --good:#4ade80; --good-wash:rgba(74,222,128,.14); --bad:#f87171; --bad-wash:rgba(248,113,113,.14);
  --pick:#60a5fa; --pick-wash:rgba(96,165,250,.16);
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; padding-inline:16px; line-height:1.5}
#app{max-width:1000px; margin:0 auto; padding-block:18px 50px}
h1,h2,h3{margin:0; text-wrap:balance; line-height:1.2}
button{font:inherit}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px}

.btn{appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:14.5px; padding:10px 18px; border-radius:10px;
  cursor:pointer; text-decoration:none; transition:transform .1s ease, filter .1s ease}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.98)}
.btn-ghost{background:var(--surface-2); color:var(--ink); border-color:var(--border-strong); font-weight:600}
.btn-ghost:hover{border-color:var(--accent)}
.btn-sm{padding:7px 12px; font-size:13px}
.btn[disabled]{opacity:.45; cursor:not-allowed}

/* naglowek */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:12px 16px; margin-bottom:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow)}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand img{width:40px; height:40px; border-radius:10px}
.brand-text{display:flex; flex-direction:column; line-height:1.15}
.brand-text b{font-size:18px}
.brand-text small{font-size:12px; color:var(--muted)}
.top-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
#btn-install[hidden]{display:none}
.pop{position:relative}
.pop-panel{position:absolute; right:0; top:calc(100% + 8px); z-index:40; width:min(330px, calc(100vw - 32px)); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:10px; box-shadow:var(--shadow); padding:8px 0}
.pop-head{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); padding:6px 16px}
.pop-body{padding:2px 16px 10px; font-size:13px; color:var(--ink-2)}
.pop-body ol{margin:4px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:5px}
@media (max-width:560px){ .pop-panel{position:fixed; top:76px; left:16px; right:16px; width:auto} }

.panel{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow)}
.stack{display:flex; flex-direction:column; gap:16px}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)}
.lede{color:var(--ink-2); margin:6px 0 0}
.muted{color:var(--muted)}
.small{font-size:13px}

/* ekran startowy */
.modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
.mode{display:flex; flex-direction:column; gap:6px; text-align:left; padding:16px; border-radius:12px; border:1.5px solid var(--border);
  background:var(--surface-2); color:var(--ink); cursor:pointer; position:relative; overflow:hidden}
.mode:hover{border-color:var(--accent)}
.mode .ic{font-size:24px; line-height:1}
.mode h3{font-size:17px}
.mode p{margin:0; font-size:13px; color:var(--muted)}
.scope-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.boxes{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:10px}
.box{background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:8px 4px; text-align:center}
.box b{display:block; font-family:"IBM Plex Mono",monospace; font-size:18px}
.box span{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em}

/* pasek gry */
.gamebar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between}
.gamebar .meta{font-size:13px; color:var(--muted)}
.gamebar .meta b{color:var(--ink); font-family:"IBM Plex Mono",monospace}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); padding:6px 11px; border-radius:99px; font-size:13px; cursor:pointer; font-weight:600}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}

/* fiszka */
.card-wrap{perspective:1200px}
.flash{min-height:300px; border-radius:16px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); padding:22px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:10px; position:relative}
.flash.back{cursor:default; align-items:stretch; text-align:left; justify-content:flex-start}
.flash .big{font-size:clamp(26px,5vw,38px); font-weight:700; letter-spacing:.01em}
.flash .hint{font-size:13px; color:var(--muted)}
.flash .front-q{font-size:16px; color:var(--ink-2); max-width:56ch}
.flash .front-q ul{text-align:left}
.rate-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.rate-row .btn{min-width:150px}
.btn-bad{background:var(--bad); border-color:var(--bad); color:#fff}
.btn-good{background:var(--good); border-color:var(--good); color:#fff}

/* karta leku */
.drug{display:flex; flex-direction:column; gap:12px}
.drug-head h3{font-size:22px}
.drug-head .names{font-size:13px; color:var(--muted); margin-top:2px}
.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px}
.field{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.field h4{margin:0 0 4px; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent)}
.field ul{margin:0; padding-left:18px; font-size:14px; display:flex; flex-direction:column; gap:3px}
.field p{margin:0; font-size:14px}
.field.adult{border-left:4px solid #ea7a1e}
.field.child{border-left:4px solid #2563eb}
.src{font-size:11.5px; color:var(--muted)}

/* laczenie par */
.match{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:12px}
.col{display:flex; flex-direction:column; gap:8px}
.tile{border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); border-radius:10px; padding:10px 12px; text-align:left; cursor:pointer;
  font-size:14px; line-height:1.35; min-height:48px; transition:background .12s ease, border-color .12s ease}
.tile.drug-tile{font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:13.5px}
.tile:hover:not(:disabled){border-color:var(--accent)}
.tile.sel{border-color:var(--pick); background:var(--pick-wash)}
.tile.ok{border-color:var(--good); background:var(--good-wash); cursor:default}
.tile.err{border-color:var(--bad); background:var(--bad-wash); animation:shake .3s ease}
.tile:disabled{opacity:1}
.tile .pair-no{display:inline-block; min-width:20px; font-family:"IBM Plex Mono",monospace; color:var(--good); font-weight:700}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:620px){ .match{grid-template-columns:1fr} .col.left{display:grid; grid-template-columns:1fr 1fr} }

/* quiz */
.q-text{font-size:17px; font-weight:600}
.q-feature{background:var(--surface-2); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:10px; padding:12px 14px; font-size:15.5px}
.answers{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px}

.result{border-radius:12px; padding:14px 16px; border:1.5px solid var(--border)}
.result.ok{border-color:var(--good); background:var(--good-wash)}
.result.bad{border-color:var(--bad); background:var(--bad-wash)}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px}
.stat{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px}
.stat .l{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700}
.stat .v{font-family:"IBM Plex Mono",monospace; font-size:26px; font-weight:600}
.mistakes{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:14px}
.mistakes .was{color:var(--bad)}
.mistakes .should{color:var(--good)}

/* lista */
.search{width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font:inherit; font-size:15px}
.druglist{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px}
.druglist .tile{font-weight:700; font-size:13.5px}
.druglist label.tile{display:flex; gap:8px; align-items:center}
.druglist input{width:18px; height:18px; accent-color:var(--accent)}

/* modal */
.modal-bg{position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:60}
.modal-bg[hidden]{display:none}
.modal{background:var(--surface); border-radius:14px; width:min(820px,100%); max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.modal-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border)}
.modal-head h2{font-size:18px}
.modal-body{padding:16px 18px; overflow:auto}

.note{font-size:12px; color:var(--muted); text-align:center; margin-top:28px; line-height:1.6}
.note a{color:var(--accent)}
.credit-kg{display:block; width:fit-content; margin:10px auto 0; padding:4px 12px; border:1px solid var(--border); border-radius:99px; text-decoration:none; color:var(--muted) !important}
.credit-kg b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .tile.err{animation:none} .btn{transition:none} }
.mt{margin-top:10px}
@media (max-width:560px){ .modes{grid-template-columns:1fr 1fr} .mode{padding:12px} .mode p{display:none} }

/* warunki korzystania */
.legal{max-width:760px; margin:0 auto}
.legal h1{font-size:28px}
.legal h2{font-size:17px; margin-top:8px}
.legal p, .legal li{font-size:15px; line-height:1.6; color:var(--ink-2); margin:0}
.legal ul{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:4px}
.legal-meta{font-size:13px !important; color:var(--muted) !important}
.legal-back{font-size:14px; color:var(--accent); text-decoration:none; font-weight:600}
.copy{display:block; margin-top:6px}
.copy a{color:var(--accent)}

/* ---- Dawki leków ---- */
.task{background:var(--surface-2); border:1px solid var(--border); border-left:4px solid var(--accent); border-radius:12px; padding:14px 16px}
.task h2{font-size:22px; margin:2px 0 6px}
.task-lines{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:4px; font-size:15.5px}
.small-task .task-lines{font-size:14px}
.answers-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.ans{display:flex; flex-direction:column; gap:5px}
.ans .lbl{font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.ans .inp{display:flex; align-items:center; gap:8px}
.num{flex:1 1 auto; min-width:0; max-width:220px; padding:11px 12px; border-radius:10px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink); font:inherit; font-family:"IBM Plex Mono",monospace; font-size:17px}
.num:focus{outline:2.5px solid var(--accent); outline-offset:1px}
.num.ok{border-color:var(--good); background:var(--good-wash)}
.num.err{border-color:var(--bad); background:var(--bad-wash)}
.unit{font-family:"IBM Plex Mono",monospace; color:var(--ink-2); font-weight:600; white-space:nowrap}
.answers-check{margin:8px 0; padding-left:18px; font-size:14.5px}
.steps{margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:4px; font-size:14.5px; font-family:"IBM Plex Mono",monospace}
.note-warn{font-size:13px; color:var(--muted); border-top:1px solid var(--border); padding-top:10px; margin:0}
.field-card{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:12px 14px}
.field-card h4{margin:0 0 6px; font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent)}
.formula{font-family:"IBM Plex Mono",monospace; font-size:14.5px; margin:0 0 6px}