/* Domowe centrum: tablet przy lodówce (poziomo, ok. 1 m) + telefony. Tokeny kolorów z prototypu. */
:root{
  --bg:#eef2f3; --surface:#ffffff; --surface-2:#e3e9eb; --fg:#17262b; --muted:#5b6d73; --line:#cfd9dc;
  --accent:#1f6f7a; --accent-fg:#ffffff;
  --ok:#2f8a4e; --ok-bg:#e2f3e7;
  --soon:#b7791f; --soon-bg:#fbefd6;
  --crit:#c2412d; --crit-bg:#fbe1db;
  --dead:#6b7478; --dead-bg:#e4e7e8;
  --shadow:0 1px 2px rgba(23,38,43,.06),0 4px 14px rgba(23,38,43,.06);
  --f-display:"Bricolage Grotesque",ui-rounded,system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nav-h:0px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f181b; --surface:#172327; --surface-2:#1f2e33; --fg:#e4eef0; --muted:#93a6ab; --line:#2a3b40;
  --accent:#5fb8c4; --accent-fg:#0b1416;
  --ok:#5cc47d; --ok-bg:#16301f; --soon:#e8ae4f; --soon-bg:#33270f;
  --crit:#f07a63; --crit-bg:#3a1a14; --dead:#8b979b; --dead-bg:#222c2f;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark;}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
html,body{min-height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{background:var(--bg);color:var(--fg);font:16px/1.4 var(--f-body);-webkit-tap-highlight-color:transparent;
  padding:14px max(16px,env(safe-area-inset-right,0px)) calc(var(--nav-h) + 24px) max(16px,env(safe-area-inset-left,0px))}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

/* nagłówek */
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.clock{font:800 clamp(2rem,5vw,3.2rem)/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock small{display:block;font:400 1rem var(--f-body);color:var(--muted);margin-top:6px;letter-spacing:0}
.wx{margin-left:auto;display:flex;align-items:center;gap:12px;border:0;background:none;padding:6px 8px;border-radius:14px;text-align:left}
.wx .ico{font-size:2.6rem;line-height:1}
.wx b{font:800 2rem/1 var(--f-display);font-variant-numeric:tabular-nums;display:block}
.wx span{color:var(--muted);font-size:.9rem}
.iconbtn{border:0;background:var(--surface-2);border-radius:99px;min-width:48px;height:48px;padding:0 14px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--muted)}
.net::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor}
.net.on{color:var(--ok)} .net.off{color:var(--soon)}

/* nawigacja: na tablecie u góry, na telefonie na dole */
.nav{display:flex;background:var(--surface-2);border-radius:14px;padding:4px;gap:4px}
.nav button{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:transparent;padding:12px 10px;border-radius:10px;font-weight:700;color:var(--muted);font-size:1.02rem;min-height:52px}
.nav button[aria-current="page"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.nav .badge{display:inline-block;min-width:22px;padding:0 6px;border-radius:99px;background:var(--accent);color:var(--accent-fg);font-size:.8rem;margin-left:4px}
@media (max-width:700px){
  .nav{position:fixed;left:0;right:0;bottom:0;border-radius:0;z-index:10;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 12px rgba(0,0,0,.08)}
  .nav button{font-size:clamp(.68rem,3.1vw,.9rem);padding:8px 2px;letter-spacing:-.01em}
  .wx .ico{font-size:2rem} .wx b{font-size:1.5rem}
  .top{gap:8px 10px} .wx{order:3;flex-basis:100%;margin-left:0;padding:4px 0} #net{margin-left:auto}
}

/* ekran główny */
.home{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;grid-auto-flow:row dense}
@media (max-width:1000px){.home{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.home{grid-template-columns:minmax(0,1fr)}}
.tile{border:0;text-align:left;background:var(--surface);border-radius:18px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.tile h2{font:800 1.35rem var(--f-display);margin:0;display:flex;align-items:baseline;gap:8px}
.tile h2 small{font:400 .9rem var(--f-body);color:var(--muted);margin-left:auto}
.tile.big{grid-row:span 2}
@media (max-width:700px){.tile.big{grid-row:auto}}
.tlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tlist li{display:flex;align-items:center;gap:10px;font-size:1.05rem;min-width:0}
.tlist li>span:first-child{flex:none}
.tlist .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c);flex:none}
.muted{color:var(--muted)}
.counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.counts div{min-width:0;overflow-wrap:anywhere;background:var(--cb);color:var(--c);border-radius:12px;padding:10px;display:flex;flex-direction:column}
.counts b{font:800 1.8rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.counts span{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.hours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;text-align:center}
.hours div{background:var(--surface-2);border-radius:10px;padding:8px 2px;font-size:.85rem}
.hours b{display:block;font:700 1.05rem var(--f-display)}
.hours .i{font-size:1.3rem;display:block}
.umbrella{background:var(--soon-bg);color:var(--soon);border-radius:12px;padding:8px 12px;font-weight:700}

.st-ok{--c:var(--ok);--cb:var(--ok-bg)} .st-soon{--c:var(--soon);--cb:var(--soon-bg)}
.st-crit{--c:var(--crit);--cb:var(--crit-bg)} .st-dead{--c:var(--dead);--cb:var(--dead-bg)}

/* lodówka (z prototypu) */
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.sum{border:0;text-align:left;border-radius:14px;padding:12px 14px;background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;border-top:5px solid var(--c)}
.sum b{font:800 2rem/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--c)}
.sum span{font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.sum[aria-pressed="true"]{background:var(--cb)}
@media (max-width:520px){.summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:10px 14px;border-radius:9px;font-weight:700;color:var(--muted);min-height:44px}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.spacer{flex:1}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ptile{border:0;text-align:left;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:0;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.ptile .band{background:var(--cb);color:var(--c);padding:10px 14px 8px;display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.ptile .days{font:800 1.7rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.ptile .days.word{font-size:1.15rem;white-space:nowrap}
.ptile .unit{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ptile .body{padding:10px 14px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.ptile .name{font:700 1.1rem/1.2 var(--f-body);overflow-wrap:anywhere}
.ptile .meta{font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px}
.pill{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:99px;background:var(--surface-2);color:var(--muted)}
.pill.open{background:var(--soon-bg);color:var(--soon)}
.ptile.st-dead .name{text-decoration:line-through;text-decoration-thickness:2px;color:var(--muted)}
.ptile.st-crit .band{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{filter:saturate(1.6)}}
.empty{padding:40px 20px;text-align:center;color:var(--muted);background:var(--surface);border-radius:16px}

/* panele: zakupy, notatki, statystyki */
.panel{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:12px}
.panel h2{font:700 1.3rem var(--f-display);margin:0}
.addrow{display:flex;gap:8px}
.addrow input{flex:1;min-width:0}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);min-height:56px}
.list li.done .t{text-decoration:line-through;color:var(--muted)}
.list input[type=checkbox]{width:28px;height:28px;accent-color:var(--accent);flex:none}
.list label{flex:1;min-width:0;font-size:1.1rem}
.x{margin-left:auto;border:0;background:none;color:var(--muted);font-size:1.5rem;padding:4px 12px;min-height:44px}
.note{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:8px;border:0;text-align:left;width:100%}
.note.urgent{border-left:6px solid var(--crit)}
.note.pinned{border-top:4px solid var(--accent)}
.note p{margin:0;font-size:1.15rem;white-space:pre-wrap;overflow-wrap:anywhere}
.note .meta{font-size:.85rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.stat{background:var(--surface-2);border-radius:12px;padding:14px}
.stat b{font:800 2.2rem/1 var(--f-display);font-variant-numeric:tabular-nums;display:block}
.ratio{height:14px;border-radius:99px;background:var(--crit-bg);overflow:hidden}
.ratio i{display:block;height:100%;background:var(--ok)}
.log{list-style:none;margin:0;padding:0;font-size:.92rem}
.log li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.log time{color:var(--muted);font-variant-numeric:tabular-nums}

/* arkusze (formularze) */
.scrim{position:fixed;inset:0;background:rgba(10,20,24,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);width:min(640px,100%);max-height:92%;overflow:auto;border-radius:22px 22px 0 0;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.sheet h2{font:800 1.5rem var(--f-display);margin:0;overflow-wrap:anywhere}
.field{display:flex;flex-direction:column;gap:6px}
.field>label,.lbl{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
input[type=text],input[type=date],input[type=number],input[type=password],select,textarea{background:var(--surface-2);border:2px solid transparent;border-radius:12px;padding:12px 14px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:2px solid var(--line);background:var(--surface);border-radius:99px;padding:10px 14px;font-weight:700;min-height:44px}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--accent-fg)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.btn{border:0;border-radius:14px;padding:14px;font-weight:700;background:var(--surface-2);min-height:52px}
.btn.primary{background:var(--accent);color:var(--accent-fg)}
.btn.good{background:var(--ok-bg);color:var(--ok)}
.btn.bad{background:var(--crit-bg);color:var(--crit)}
.btn.warn{background:var(--soon-bg);color:var(--soon)}
.link{border:0;background:none;color:var(--accent);font-weight:700;padding:6px;text-decoration:underline}
.hint{font-size:.9rem;color:var(--muted);margin:0}
.toggle{display:flex;align-items:center;gap:12px;font-size:1.05rem}
.toggle input{width:26px;height:26px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 18px;border-radius:99px;font-weight:700;z-index:40}

/* okno pilne: delikatnie pulsuje */
.alert-scrim{position:fixed;inset:0;background:rgba(10,20,24,.55);z-index:30;display:flex;align-items:center;justify-content:center;padding:20px}
.alert{background:var(--surface);border-radius:24px;width:min(560px,100%);padding:28px;display:flex;flex-direction:column;gap:16px;border:3px solid var(--ac,var(--crit));animation:glow 2.8s ease-in-out infinite}
.alert .kind{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ac,var(--crit))}
.alert h2{font:800 1.9rem/1.15 var(--f-display);margin:0;overflow-wrap:anywhere}
.alert p{margin:0;font-size:1.15rem;white-space:pre-wrap}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--ac,var(--crit)) 22%,transparent)}}
@media (prefers-reduced-motion:reduce){.alert,.ptile.st-crit .band{animation:none}}

/* parowanie */
.pair{max-width:460px;margin:8vh auto 0;background:var(--surface);border-radius:22px;box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;gap:14px}
.pair h1{font:800 1.8rem var(--f-display);margin:0}

/* leki, Ryśka, apteczka */
.btn.mini{min-height:44px;padding:8px 14px;border-radius:12px;flex:none}
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.hcard h2{display:flex;align-items:baseline;gap:8px}
.hcard h2 small{margin-left:auto;font:400 .9rem var(--f-body)}
.slot{font:700 1.05rem var(--f-display);font-variant-numeric:tabular-nums;min-width:64px;color:var(--muted)}
.list li.due{background:var(--crit-bg);margin:0 -10px;padding-left:10px;padding-right:10px;border-radius:12px}
.list li.due .slot{color:var(--crit)}
.okmark{color:var(--ok);font-weight:700;font-size:.92rem}
.rowbtn{border:0;background:none;text-align:left;width:100%;padding:0;font-size:1.05rem;min-height:44px}
.panel.rowbtn{padding:16px}
.warnbox{background:var(--soon-bg);color:var(--soon);border-radius:12px;padding:12px 14px;font-weight:700;margin:0}
input[type=time]{background:var(--surface-2);border:2px solid transparent;border-radius:12px;padding:12px 14px;width:100%}
#hBody{display:flex;flex-direction:column;gap:14px}
details.field summary{cursor:pointer;min-height:44px;display:flex;align-items:center}

/* skanowanie kodów */
.scanbtn{background:var(--surface-2);border:2px dashed var(--accent);color:var(--accent)}
.scan{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.scan video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-frame{position:absolute;left:50%;top:42%;width:min(80vw,420px);height:min(30vw,160px);transform:translate(-50%,-50%);border:3px solid #fff;border-radius:16px;box-shadow:0 0 0 9999px rgba(0,0,0,.45)}
.scan-msg{position:relative;color:#fff;font-weight:700;font-size:1.1rem;text-align:center;margin:0}
.scan .btn{position:relative;min-width:200px}

/* płatności */
.pmonth{font:800 1.5rem var(--f-display);margin:0;min-width:170px;text-align:center;text-transform:capitalize}
.amt{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.stat .lbl{display:block;margin-bottom:6px}
.bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end}
.barcol{border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;font-size:.78rem;color:var(--muted)}
.barcol .bv{text-align:center;font-variant-numeric:tabular-nums;min-height:1.1em}
.barcol .bt{height:150px;display:flex;align-items:flex-end;background:var(--surface-2);border-radius:8px;overflow:hidden}
.barcol .bt>i{display:flex;align-items:flex-end;width:100%;background:color-mix(in srgb,var(--accent) 35%,var(--surface-2))}
.barcol .bt>i>i{display:block;width:100%;background:var(--accent)}
.barcol .bl{text-align:center;font-weight:700}
.barcol .bl.cur{color:var(--accent)}
.ptable{border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:.92rem;width:100%}
.ptable th,.ptable td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.ptable tbody th,.ptable thead th:first-child{text-align:left}
@media (max-width:520px){.barcol .bt{height:110px}.barcol .bv{font-size:.66rem}}
@media (max-width:600px){
  .payrow{flex-wrap:wrap;row-gap:6px}
  .payrow .slot{min-width:56px}
  .payrow .rowbtn{flex:1 1 calc(100% - 70px)!important}
  .payrow>.btn,.payrow>.okmark{margin-left:auto}
  .payrow .okmark .by{display:none}
}
@media (max-width:700px){
  .nav button{position:relative}
  .nav .badge{position:absolute;top:2px;right:2px;margin:0;min-width:16px;padding:0 4px;font-size:.65rem;line-height:16px}
}