/* Kompas Bankrolla — arkusz stylów
   Kolorystyka wzięta z typowi.pl: tłem jest dokładnie #0A111E, czyli barwa,
   którą tamten serwis podaje jako swoją w meta theme-color. Reszta palety
   jest z niej wyprowadzona — kolejne powierzchnie to ten sam granat rozjaśniany
   krok po kroku, więc karty odcinają się od tła bez ani jednej obcej barwy.

   Motyw CIEMNY jest domyślny, bo typowi.pl jest ciemny i ta apka ma się
   docelowo w nim znaleźć. Jasny wariant zostaje dla osób, które mają w systemie
   ustawiony jasny motyw — tam ta sama paleta jest odwrócona, nie podmieniona. */

:root{
  --ground:#0A111E; --surface:#0F1A2D; --surface-2:#16233B;
  --border:#22314D; --border-strong:#33456B;
  --ink:#EAF1FB; --ink-2:#B4C4DC; --muted:#7C8DA8;
  --accent:#4C9BF5; --accent-2:#82BFFF; --accent-soft:#12233E;
  --win:#3DD68C; --win-soft:#0D2B1E;
  --loss:#FF6B5B; --loss-soft:#2E1613;
  --warn:#FFB020; --warn-soft:#2D2010;
  --grid:rgba(234,241,251,.08);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -20px rgba(0,0,0,.85);
  --r:12px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#F1F5FA; --surface:#FFFFFF; --surface-2:#E8EFF8;
    --border:#D5DFEC; --border-strong:#B0C0D6;
    --ink:#0A111E; --ink-2:#33415A; --muted:#68778F;
    --accent:#1462C4; --accent-2:#0D4A99; --accent-soft:#E1EDFB;
    --win:#11724A; --win-soft:#DEF2E7;
    --loss:#BE3527; --loss-soft:#FBE4E1;
    --warn:#8E5E06; --warn-soft:#FAEDD1;
    --grid:rgba(10,17,30,.08);
    --shadow:0 1px 2px rgba(10,17,30,.06), 0 12px 30px -18px rgba(10,17,30,.4);
  }
}
:root[data-theme="light"]{
  --ground:#F1F5FA; --surface:#FFFFFF; --surface-2:#E8EFF8;
  --border:#D5DFEC; --border-strong:#B0C0D6;
  --ink:#0A111E; --ink-2:#33415A; --muted:#68778F;
  --accent:#1462C4; --accent-2:#0D4A99; --accent-soft:#E1EDFB;
  --win:#11724A; --win-soft:#DEF2E7;
  --loss:#BE3527; --loss-soft:#FBE4E1;
  --warn:#8E5E06; --warn-soft:#FAEDD1;
  --grid:rgba(10,17,30,.08);
  --shadow:0 1px 2px rgba(10,17,30,.06), 0 12px 30px -18px rgba(10,17,30,.4);
}

/* Przeglądarka musi WIEDZIEĆ, że strona jest ciemna. Bez tego Safari i Chrome
   na Macu (przy ustawieniu „zawsze pokazuj paski przewijania”) rysują jasny
   pasek przewijania wzdłuż całej prawej krawędzi — na granatowym tle wygląda
   to jak usterka. To samo dotyczy list rozwijanych i pól daty. */
:root{color-scheme:dark}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){color-scheme:light} }
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
html{scrollbar-color:var(--border-strong) var(--ground)}

*{box-sizing:border-box}
/* karty mają display:flex, więc sam atrybut hidden by ich nie schował */
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{min-width:0; max-width:1120px; margin:0 auto; padding:28px 20px 80px; display:flex; flex-direction:column; gap:22px}
h1,h2,h3{margin:0; font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-weight:600; letter-spacing:-.021em; text-wrap:balance}
h1{font-size:26px} h2{font-size:19px} h3{font-size:15px}
p{margin:0}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums}
.strong{font-weight:600}
.lbl{font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.small{font-size:12.5px}
.mb6{margin-bottom:6px} .mt12{margin-top:12px}
.grow{flex:1 1 220px} .w90{width:90px; flex:none}
.self-start{align-self:flex-start}
.stack8{display:flex; flex-direction:column; gap:8px}
.stack18{display:flex; flex-direction:column; gap:18px}
.gap4{gap:4px}
.dim{opacity:.55}

.top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:14px; padding-bottom:4px}
.brand{display:flex; align-items:center; gap:11px}
.dot{width:26px;height:26px;border-radius:50%;background:var(--accent);position:relative;flex:none}
.dot::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--surface)}
.sub{color:var(--muted); font-size:13px; max-width:52ch}
.who{font-size:12.5px; color:var(--muted); padding-right:4px}

.syncbar{font-size:12.5px; padding:8px 12px; border-radius:8px; background:var(--warn-soft); border:1px solid var(--warn); color:var(--ink)}

.bankstrip{min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.bs{min-width:0; overflow:hidden; background:var(--surface); padding:13px 15px; display:flex; flex-direction:column; gap:3px}

.bs .v{overflow-wrap:anywhere; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:21px; font-weight:600; letter-spacing:-.02em}
.bs .n{font-size:11.5px; color:var(--muted)}
.pos{color:var(--win)} .neg{color:var(--loss)} .neu{color:var(--ink)}

.card{min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px}
.cardhead{min-width:0; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.grid2{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:18px; align-items:start}
.grid2 > *{min-width:0}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}

.seg{display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:2px; gap:2px}
.seg button, .segbtn{font:inherit; font-size:12.5px; padding:5px 11px; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; text-decoration:none; display:inline-block}
.seg button[aria-pressed="true"], .segbtn.on{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); font-weight:500}
.seg button:focus-visible, .segbtn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.authseg{align-self:stretch; justify-content:center}

.fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:11px; min-width:0}
.f{display:flex; flex-direction:column; gap:4px; min-width:0}
.f.span2{grid-column:span 2}
.f.end{justify-content:flex-end}
@media(max-width:520px){.f.span2{grid-column:span 1}}
.f label{font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
input,select,textarea{font:inherit; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; padding:8px 10px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--ink); width:100%; min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent)}
input[type=text],input[type=email],input[type=password]{font-family:"IBM Plex Sans",sans-serif}
select.mini{padding:4px 6px; font-size:12px; width:auto}
.hint{font-size:11.5px; color:var(--muted)}

button.btn, a.btn{font:inherit; font-weight:500; font-size:14px; padding:9px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:var(--surface); cursor:pointer; text-decoration:none; display:inline-block; text-align:center}
button.btn:hover, a.btn:hover{background:var(--accent-2); border-color:var(--accent-2)}
button.btn.ghost, a.btn.ghost{background:transparent; color:var(--ink); border-color:var(--border-strong)}
button.btn.ghost:hover, a.btn.ghost:hover{background:var(--surface-2)}
button.btn.sm, a.btn.sm{padding:5px 10px; font-size:12.5px}
button.btn:focus-visible, a.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.row{display:flex; gap:9px; flex-wrap:wrap; align-items:center}

.rec{border:1px solid var(--accent); border-radius:var(--r); background:var(--accent-soft); padding:16px 18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.rec > *{min-width:0}
@media(max-width:520px){.rec{grid-template-columns:1fr}}
.rec .big{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:34px; font-weight:600; line-height:1.1; letter-spacing:-.03em; color:var(--accent-2)}
.rec .cap{font-size:12px; color:var(--ink-2)}
.note{font-size:12.5px; padding:9px 12px; border-radius:8px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); display:flex; gap:8px; align-items:flex-start}
.note.warn{background:var(--warn-soft); border-color:var(--warn); color:var(--ink)}
.note.bad{background:var(--loss-soft); border-color:var(--loss); color:var(--ink)}
.note .ic{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--warn); flex:none}
.note.bad .ic{color:var(--loss)}

.tw{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th{font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:500; text-align:left; padding:9px 12px; border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2)}
td{padding:8px 12px; border-bottom:1px solid var(--border); white-space:nowrap; vertical-align:top}
tr:last-child td{border-bottom:0}
td.num, th.num{text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--surface-2)}
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; padding:2px 8px; border-radius:999px; border:1px solid transparent}
.pill.win{background:var(--win-soft); color:var(--win); border-color:var(--win)}
.pill.lose{background:var(--loss-soft); color:var(--loss); border-color:var(--loss)}
.pill.void{background:var(--surface-2); color:var(--muted); border-color:var(--border-strong)}
.pill.pending{background:var(--warn-soft); color:var(--warn); border-color:var(--warn)}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(126px,1fr)); gap:12px; min-width:0}
.st{min-width:0; border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--surface-2); display:flex; flex-direction:column; gap:2px}
.st .v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:18px; font-weight:600}
.st .n{font-size:11px; color:var(--muted); line-height:1.35}

.chart{width:100%; height:230px; display:block; touch-action:none}
.c-area{fill:var(--accent); opacity:.13}
.c-line{fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.c-base{stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 4}
.c-grid{stroke:var(--grid); stroke-width:1}
.c-end{fill:var(--accent); stroke:var(--surface); stroke-width:2}
.c-txt{fill:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:10.5px}
.c-cross{stroke:var(--border-strong); stroke-width:1}
.tip{position:absolute; pointer-events:none; background:var(--surface); border:1px solid var(--border-strong); border-radius:7px; padding:6px 9px; font-size:12px; box-shadow:var(--shadow); white-space:nowrap; opacity:0; transition:opacity .1s}
.chartbox{position:relative}

details.settings{border:1px solid var(--border); border-radius:var(--r); background:var(--surface)}
details.settings > summary{cursor:pointer; padding:14px 18px; font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; align-items:center}
details.settings > summary::-webkit-details-marker{display:none}
details.settings > summary::after{content:"+"; font-family:"IBM Plex Mono",monospace; color:var(--muted)}
details.settings[open] > summary::after{content:"−"}
.settings .body{padding:0 18px 18px; display:flex; flex-direction:column; gap:14px}

.foot{font-size:12.5px; color:var(--muted); line-height:1.6; border-top:1px solid var(--border); padding-top:16px; max-width:76ch}
.foot strong{color:var(--ink-2)}
.ladder td.risk{color:var(--loss)}
tr.dayrow td{background:var(--surface-2); border-bottom:1px solid var(--border-strong); padding:5px 12px}
tr.dayrow:hover td{background:var(--surface-2)}
#variants table td:last-child{white-space:normal; min-width:220px}
.empty{padding:26px; text-align:center; color:var(--muted); font-size:13.5px; white-space:normal}

/* logowanie */
body.auth{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px}
.authbox{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:26px; display:flex; flex-direction:column; gap:16px}
.authbox .brand{margin-bottom:2px}
.stack{display:flex; flex-direction:column; gap:12px}
.stack .btn{margin-top:4px}


/* ═════════ prosty ekran: plan na dziś ═════════ */
.setup h2{margin-bottom:2px}
.advtoggle{justify-content:center; margin-top:-4px}

.plan{
  border:1px solid var(--accent); border-radius:var(--r); background:var(--accent-soft);
  padding:24px 26px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow);
}
.plan-eyebrow{font-family:"IBM Plex Mono",monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--accent-2); font-weight:600}
.plan-big{
  font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:clamp(24px,3.4vw,34px);
  line-height:1.15; letter-spacing:-.02em; color:var(--ink); text-wrap:balance;
}
.plan-odds{
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:clamp(17px,2.2vw,21px); font-weight:600; color:var(--accent-2);
}
.plan-sums{display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:13px; color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.plan-sums .dot-sep{opacity:.45}
.plan-why{font-size:14px; line-height:1.6; color:var(--ink-2); max-width:62ch}
.plan-note{font-size:12.5px; color:var(--ink-2); background:var(--surface); border:1px solid var(--border);
  border-radius:8px; padding:8px 11px}
.plan-acts{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}

.plan-recover{border-color:var(--warn); background:var(--warn-soft)}
.plan-recover .plan-eyebrow, .plan-recover .plan-odds{color:var(--warn)}
.plan-reset, .plan-stop, .plan-toohigh{border-color:var(--loss); background:var(--loss-soft)}
.plan-reset .plan-eyebrow, .plan-stop .plan-eyebrow, .plan-toohigh .plan-eyebrow{color:var(--loss)}
.plan-reset .plan-odds{color:var(--loss)}
.plan-done, .plan-toosmall{border-color:var(--border-strong); background:var(--surface-2)}
.plan-done .plan-eyebrow, .plan-toosmall .plan-eyebrow{color:var(--muted)}

/* lista kuponów na dziś */
.cpn{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:12px 14px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2);
  margin-bottom:8px}
.cpn-win{border-color:var(--win); background:var(--win-soft)}
.cpn-lose{border-color:var(--loss); background:var(--loss-soft)}
.cpn-main{min-width:0; flex:1 1 220px}
.cpn-title{font-weight:500; font-size:14.5px}
.cpn-meta{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:12.5px; color:var(--muted); margin-top:2px}
.cpn-acts{display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.cpn-res{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:13px; font-weight:600}
button.mark{font:inherit; font-size:13.5px; font-weight:500; padding:8px 16px; border-radius:8px;
  cursor:pointer; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink)}
button.mark.ok{border-color:var(--win); color:var(--win)}
button.mark.ok:hover{background:var(--win); color:var(--surface)}
button.mark.no{border-color:var(--loss); color:var(--loss)}
button.mark.no:hover{background:var(--loss); color:var(--surface)}
button.mark.undo{font-size:12px; padding:5px 10px; color:var(--muted)}
button.mark:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.quickform{display:flex; flex-wrap:wrap; gap:11px; align-items:flex-end; margin-top:4px}
.qf{display:flex; flex-direction:column; gap:4px; min-width:0; flex:0 0 130px}
.qf.grow2{flex:1 1 220px}
.qf label{font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--muted)}
.quickform .btn{flex:0 0 auto}
.empty2{padding:14px 2px; color:var(--muted); font-size:13.5px}


/* daty i przyciski dnia w szybkim formularzu */
.qf-date{flex:0 0 200px}
.daybtns{display:flex; gap:5px; margin-top:5px; flex-wrap:wrap}
button.daybtn{font:inherit; font-size:11.5px; padding:3px 9px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--muted)}
button.daybtn:hover{background:var(--surface-2); color:var(--ink)}
button.daybtn.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-2); font-weight:500}
button.daybtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* drobne akcje na kuponie */
button.mark.tiny{font-size:12px; padding:5px 10px; color:var(--muted)}
button.mark.tiny:hover{background:var(--surface-2); color:var(--ink)}
button.mark.tiny.danger:hover{background:var(--loss); border-color:var(--loss); color:var(--surface)}

/* nagłówek dnia w pełnej liście */
.daysep{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:12px 2px 6px; border-top:1px solid var(--border); margin-top:6px}
.daysep:first-child{border-top:0; margin-top:0; padding-top:2px}
.daysep-date{font-family:"IBM Plex Mono",monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:.11em; color:var(--muted); font-weight:600}
.daysep-res{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:12.5px; font-weight:600; color:var(--muted)}

/* poprawianie kuponu w miejscu */
.cpn-edit{background:var(--surface); border-color:var(--accent); align-items:stretch}
.editform{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; width:100%}
.editform .qf{flex:0 0 120px}
.editform .qf.grow2{flex:1 1 200px}
.editform .qf.qf-date{flex:0 0 150px}
.editform .btn{flex:0 0 auto}
.editerr{flex:1 1 100%; color:var(--loss)}


/* rozwijane „dlaczego tyle” pod planem */
details.whybox{border-top:1px solid rgba(0,0,0,.08); margin-top:4px; padding-top:10px}
details.whybox > summary{cursor:pointer; font-size:13px; font-weight:500; color:var(--ink-2);
  list-style:none; display:inline-flex; align-items:center; gap:6px}
details.whybox > summary::-webkit-details-marker{display:none}
details.whybox > summary::before{content:"▸"; font-size:11px; color:var(--muted)}
details.whybox[open] > summary::before{content:"▾"}
details.whybox > summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.whybody{display:flex; flex-direction:column; gap:8px; margin-top:10px; font-size:13.5px;
  line-height:1.6; color:var(--ink-2); max-width:66ch}

/* karta „czy zarabiasz” */
.money-big{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; font-weight:600; font-size:clamp(21px,2.8vw,27px);
  letter-spacing:-.02em; color:var(--ink)}
.money-ok{border-color:var(--win)}
.money-bad{border-color:var(--loss)}
.money-ok .money-big{color:var(--win)}
.money-bad .money-big{color:var(--loss)}
.money-rows{display:flex; flex-direction:column; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:9px; overflow:hidden}
.money-row{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  background:var(--surface); padding:10px 14px}
.mr-a{font-size:13.5px; color:var(--ink-2)}
.mr-b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:600; text-align:right}
.money-why{font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:66ch}
.money-key{font-size:13.5px; line-height:1.6; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:11px 14px; max-width:70ch}
.progbar{height:7px; border-radius:99px; background:var(--surface-2); border:1px solid var(--border);
  overflow:hidden; max-width:320px}
.progfill{height:100%; background:var(--accent)}

/* sekcja „jak to działa” */
.howpart{display:flex; flex-direction:column; gap:7px; padding-bottom:16px; margin-bottom:4px;
  border-bottom:1px solid var(--border)}
.howpart:last-child{border-bottom:0; padding-bottom:0}
.howpart h3{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; font-size:16px}
.howpart p{font-size:13.5px; line-height:1.65; color:var(--ink-2); max-width:70ch}


.plan-opts{display:flex; flex-direction:column; gap:10px; margin-top:2px}
.plan-opts .opt{display:flex; flex-direction:column; gap:3px; padding:11px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:9px}
.plan-opts .opt strong{font-size:14px}
.plan-opts .opt span{font-size:13px; line-height:1.6; color:var(--ink-2)}

@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}


/* ═══════════ WYKRESY: symulacje i scenariusze ═══════════ */

/* paleta trzech serii — sprawdzona pod kątem daltonizmu i kontrastu
   w obu motywach; te same trzy barwy w jasnym i ciemnym */
:root{ --cat-a:#0D9488; --cat-b:#C2610C; --cat-c:#7C4DDB; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --cat-a:#2DD4BF; --cat-b:#F59E4B; --cat-c:#A78BFA; }
}
:root[data-theme="dark"]{ --cat-a:#2DD4BF; --cat-b:#F59E4B; --cat-c:#A78BFA; }

.charts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:4px}
.chart-card{min-width:0; display:flex; flex-direction:column; gap:9px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:15px 16px}
.chart-card:first-child{grid-column:1 / -1}
.chart-card.small{justify-content:flex-start; align-self:start}
@media (max-width:760px){ .charts{grid-template-columns:1fr} .chart-card:first-child{grid-column:auto} }

.ch-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px}
.ch-head h3{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; font-size:15.5px}
.ch-sub{font-size:11.5px; color:var(--muted); line-height:1.4}
.ch-box{position:relative; width:100%; min-width:0}
.ch-svg{width:100%; display:block; overflow:visible}

.ch-grid{stroke:var(--grid); stroke-width:1}
.ch-axis{stroke:var(--border-strong); stroke-width:1}
.ch-base{stroke:var(--muted); stroke-width:1; stroke-dasharray:3 4; opacity:.75}
.ch-tick{fill:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:10px}
.ch-tick2{fill:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:9px; opacity:.85}
.ch-endlab{fill:var(--ink-2); font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600}

/* wachlarz scenariuszy */
.ch-band-outer{fill:var(--cat-a); opacity:.14; stroke:none}
.ch-band-inner{fill:var(--cat-a); opacity:.28; stroke:none}
.ch-line-med{fill:none; stroke:var(--cat-a); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}

/* porównanie strategii */
.ch-line{fill:none; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.ch-end{stroke:var(--surface); stroke-width:2}
.ch-line.c-a{stroke:var(--cat-a)} .ch-end.c-a{fill:var(--cat-a)} .ch-endlab.c-a{fill:var(--cat-a)}
.ch-line.c-b{stroke:var(--cat-b); stroke-dasharray:7 4}
.ch-end.c-b{fill:var(--cat-b)} .ch-endlab.c-b{fill:var(--cat-b)}
.ch-line.c-c{stroke:var(--cat-c); stroke-dasharray:2 4}
.ch-end.c-c{fill:var(--cat-c)} .ch-endlab.c-c{fill:var(--cat-c)}

/* słupki */
.ch-bar{stroke:none}
.ch-bar.ch-pos{fill:var(--win)} .ch-bar.ch-neg{fill:var(--loss)}
.ch-barlab{font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:600}
.ch-pos-t{fill:var(--win)} .ch-neg-t{fill:var(--loss)}

/* legenda i podpisy */
.ch-legend{display:flex; flex-wrap:wrap; gap:8px 16px; padding-top:2px}
.ch-leg{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2)}
.ch-dot{width:11px; height:11px; border-radius:3px; flex:none; background:var(--muted)}
.ch-dot.c-a{background:var(--cat-a)} .ch-dot.c-b{background:var(--cat-b)} .ch-dot.c-c{background:var(--cat-c)}
.ch-note{font-size:12.5px; line-height:1.6; color:var(--ink-2); max-width:72ch; margin:0}
.big-note{font-size:13.5px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:11px 14px; margin-top:2px}

/* wskaźnik ryzyka bankructwa */
.gauge{display:flex; flex-direction:column; gap:9px}
.gauge-v{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:36px; font-weight:600; line-height:1.05; letter-spacing:-.03em}
.gauge-v.pos{color:var(--win)} .gauge-v.neg{color:var(--loss)} .gauge-v.warn-t{color:var(--warn)}
.warn-t{color:var(--warn)}
.gauge-bar{height:10px; border-radius:99px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden}
.gauge-fill{height:100%; border-radius:99px}
.gauge-fill.g-ok{background:var(--win)}
.gauge-fill.g-mid{background:var(--warn)}
.gauge-fill.g-bad{background:var(--loss)}

/* plan „gramy minimum bukmachera” — ta sama forma co zwykły plan,
   ale z ostrzegawczym akcentem, żeby było widać, że to tryb awaryjny */
.plan-forced{border-color:var(--warn)}
.plan-forced .plan-eyebrow{color:var(--warn)}

/* ostrzeżenie nad symulacjami: wpisane założenie jest nierealne */
.sim-warn{font-size:13.5px; line-height:1.6; color:var(--ink); background:var(--warn-soft);
  border:1px solid var(--warn); border-radius:9px; padding:11px 14px; max-width:80ch; margin:0}

/* porównanie strategii: mediana obok dolnych 5% i ryzyka wyzerowania banku */
.ch-table{display:flex; flex-direction:column; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:9px; overflow:hidden; font-size:12.5px}
.ch-trow{display:grid; grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  gap:8px; align-items:center; background:var(--surface); padding:8px 12px}
.ch-thead{background:var(--surface-2); color:var(--muted);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:.07em}
.ch-thead span:not(:first-child), .ch-tnum{text-align:right}
.ch-tname{display:flex; align-items:center; gap:7px; min-width:0}
.ch-tname > span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ch-tnum{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-weight:600}

/* pasek zużycia dziennego limitu ryzyka — informacja, nie zakaz */
.daymeter{display:flex; flex-direction:column; gap:5px; margin-top:2px; max-width:420px}
.dm-row{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  font-size:12.5px; color:var(--ink-2)}
.dm-cap{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted)}
.dm-bar{height:6px; border-radius:99px; background:var(--surface);
  border:1px solid var(--border); overflow:hidden}
.dm-fill{height:100%; background:var(--accent); border-radius:99px}
.dm-fill.dm-over{background:var(--warn)}

/* trzy kroki „co teraz zrobić” pod stawką i kursem */
/* Wprowadzenie na pierwszym ekranie — oddzielone od pola na bank, żeby było
   widać, że to wyjaśnienie, a nie kolejna rzecz do wypełnienia. */
.setup-next{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.setup-next .plan-kroki{margin:12px 0 10px}

.plan-kroki{margin:2px 0 0; padding:0; list-style:none; counter-reset:krok;
  display:flex; flex-direction:column; gap:9px; max-width:72ch}
.plan-kroki li{counter-increment:krok; position:relative; padding-left:30px;
  font-size:13.5px; line-height:1.6; color:var(--ink)}
.plan-kroki li::before{content:counter(krok); position:absolute; left:0; top:1px;
  width:21px; height:21px; border-radius:50%; background:var(--accent); color:var(--surface);
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; font-weight:600;
  display:flex; align-items:center; justify-content:center}

/* wklejanie kuponu z bukmachera */
details.paste{border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2);
  padding:11px 14px; margin-bottom:2px}
details.paste > summary{cursor:pointer; font-size:13.5px; font-weight:500; color:var(--ink);
  list-style:none; display:inline-flex; align-items:center; gap:7px}
details.paste > summary::-webkit-details-marker{display:none}
details.paste > summary::before{content:"▸"; font-size:11px; color:var(--muted)}
details.paste[open] > summary::before{content:"▾"}
details.paste > summary:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.paste-body{display:flex; flex-direction:column; gap:10px; margin-top:11px}
.paste-body textarea{font:inherit; font-size:13.5px; line-height:1.5; width:100%; resize:vertical;
  padding:10px 12px; border:1px solid var(--border-strong); border-radius:8px;
  background:var(--surface); color:var(--ink)}
.paste-rows{display:flex; flex-direction:column; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:9px; overflow:hidden}
.paste-row{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  background:var(--surface); padding:9px 13px}
.pr-a{font-size:13px; color:var(--ink-2); flex:none}
.pr-b{font-family:"IBM Plex Mono",monospace; font-size:13px; font-weight:600;
  text-align:right; overflow-wrap:anywhere}
.paste-note{font-size:12.5px; line-height:1.6; color:var(--ink-2); margin:0; max-width:72ch}
.paste-warn{font-size:13px; line-height:1.6; color:var(--ink); margin:0; max-width:72ch;
  background:var(--warn-soft); border:1px solid var(--warn); border-radius:8px; padding:9px 12px}
.paste-bad{font-size:13px; line-height:1.6; color:var(--ink); margin:0; max-width:72ch;
  background:var(--loss-soft); border:1px solid var(--loss); border-radius:8px; padding:9px 12px}

/* pole „Wygrana z kuponu” ma pod sobą wyjaśnienie o podatku, więc jest wyższe
   od pozostałych — wyrównujemy formularz do góry, żeby nic nie skakało */
.quickform{align-items:flex-start}
.quickform .qf{padding-top:0}
.quickform .qf > .hint{max-width:150px; line-height:1.45; margin-top:2px}
.quickform .btn{margin-top:18px}

/* ── karta wyniku: łańcuch liczb zamiast rozsypanych kafelków ── */
.money-open{border-color:var(--warn)}
.money-open .money-big{color:var(--warn)}
.chain{display:flex; flex-direction:column; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:9px; overflow:hidden}
.chain-row{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  background:var(--surface); padding:10px 14px}
.chain-row:last-child{background:var(--surface-2)}
.ch-l{font-size:13.5px; color:var(--ink-2)}
.ch-r{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:600; text-align:right; white-space:nowrap}
.chain-row:last-child .ch-r{font-size:17px}

/* ── pasek niepewności ── */
.rb{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.rb-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px;
  align-items:baseline; font-size:13px; color:var(--ink-2)}
.rb-sub{font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--muted)}
.rb-track{position:relative; height:34px; border-radius:8px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden}
.rb-band{position:absolute; top:0; bottom:0; background:var(--warn); opacity:.28}
.rb-band.rb-pos{background:var(--win); opacity:.30}
.rb-band.rb-neg{background:var(--loss); opacity:.30}
.rb-zero{position:absolute; top:0; bottom:0; width:2px; margin-left:-1px;
  background:var(--ink-2); opacity:.55}
.rb-mark{position:absolute; top:3px; bottom:3px; width:3px; margin-left:-1.5px;
  border-radius:2px; background:var(--ink)}
.rb-scale{display:flex; justify-content:space-between; gap:10px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted)}
.rb-zl{color:var(--ink-2)}

/* statystyki pogrupowane tematycznie zamiast jednego ciągu kafelków */
#stats{display:flex; flex-direction:column; gap:18px}
.sgrp{display:flex; flex-direction:column; gap:9px}
.sgrp-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px}
.sgrp-head h3{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif; font-size:15px}
.sgrp-sub{font-size:11.5px; color:var(--muted)}
.stats-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}

/* ── mały wykres banku w karcie wyniku ── */
.mini{display:flex; flex-direction:column; gap:7px; margin-top:2px}
.mini-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px;
  align-items:baseline; font-size:13px; color:var(--ink-2)}
.mini-sub{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted)}
.mini-box{width:100%; min-width:0}
.mini-svg{width:100%; display:block}
.mini-up{fill:var(--win); opacity:.20; stroke:none}
.mini-down{fill:var(--loss); opacity:.20; stroke:none}
.mini-start{stroke:var(--muted); stroke-width:1; stroke-dasharray:3 4; opacity:.8}
.mini-line{fill:none; stroke:var(--ink-2); stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round}
.mini-end{stroke:var(--surface); stroke-width:2}
.mini-end.up{fill:var(--win)} .mini-end.down{fill:var(--loss)}
.mini-scale{display:flex; justify-content:space-between; gap:10px;
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted)}
.mini-scale .pos{color:var(--win)} .mini-scale .neg{color:var(--loss)}

/* ── kropki kuponów ── */
.dots{display:flex; flex-direction:column; gap:8px; margin-top:2px}
.dots-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px;
  align-items:baseline; font-size:13px; color:var(--ink-2)}
.dots-sub{font-family:"IBM Plex Mono",monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted)}
.dots-grid{display:flex; flex-wrap:wrap; gap:5px; padding:11px 12px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:9px}
.cdot{width:13px; height:13px; border-radius:50%; flex:none; display:inline-block}
.cdot-w{background:var(--win)}
.cdot-l{background:var(--loss)}
.dots-leg{display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px;
  font-size:12px; color:var(--ink-2)}
.dots-leg .dl{display:inline-flex; align-items:center; gap:6px}
.dots-leg .cdot{width:11px; height:11px}
.dots-note{font-size:12px; color:var(--muted)}

/* linia odniesienia (próg opłacalności) — cienka, przerywana, wyraźnie wtórna */
.ch-ref{fill:none; stroke:var(--muted); stroke-width:1.4; stroke-dasharray:5 4; opacity:.85}
.ch-reflab{fill:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:10px}
.ch-dot.leg-ref{background:transparent; border-bottom:2px dashed var(--muted);
  border-radius:0; height:2px; align-self:center}

/* ═══════════ szlif wizualny ═══════════ */

/* Karty: mocniejsze zaokrąglenie i delikatniejszy cień — mniej „tabelki”,
   więcej spokojnego dokumentu. */
.card{border-radius:14px; padding:20px}
.cardhead{padding-bottom:12px; border-bottom:1px solid var(--border)}
.cardhead h2{position:relative; padding-left:13px}
.cardhead h2::before{content:""; position:absolute; left:0; top:.28em; bottom:.24em;
  width:4px; border-radius:99px; background:var(--accent)}
.money-ok .cardhead h2::before{background:var(--win)}
.money-bad .cardhead h2::before{background:var(--loss)}
.money-open .cardhead h2::before{background:var(--warn)}

/* Nagłówek strony */
.top{padding-bottom:10px; border-bottom:1px solid var(--border)}
.brand .dot{width:30px; height:30px;
  background:linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow:0 2px 8px -2px var(--accent)}
.brand .dot::after{content:""; position:absolute; inset:9px; border-radius:50%;
  background:var(--surface); opacity:.92}
h1{letter-spacing:-.02em}

/* Karta planu: lekki gradient zamiast płaskiego tła */
.plan{border-radius:16px;
  background:linear-gradient(160deg, var(--accent-soft), var(--surface) 78%)}

/* Karty wykresów */
.chart-card{border-radius:12px}
.ch-head h3{position:relative; padding-left:11px}
.ch-head h3::before{content:""; position:absolute; left:0; top:.3em; bottom:.26em;
  width:3px; border-radius:99px; background:var(--accent); opacity:.75}

/* Kafelki liczb: wyraźniejsza wartość, spokojniejszy podpis */
.st{border-radius:11px; transition:border-color .15s ease}
.st:hover{border-color:var(--border-strong)}
.st .v{letter-spacing:-.02em}

/* Przyciski */
button.btn, a.btn{border-radius:9px; transition:background .15s ease, border-color .15s ease}
button.mark{transition:border-color .15s ease, background .15s ease}

/* Pasek u góry szczegółów */
.bankstrip .bs{border-radius:11px}

@media (max-width:640px){
  .card{padding:16px; border-radius:12px}
  .cardhead h2{padding-left:11px}
}

/* ── zestawienia „co Ci wychodzi najlepiej” ── */
.wym{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--border)}
.wym-head h3{font-size:14px;margin:0 0 6px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.wym-wniosek{margin:0 0 10px;font-size:14px;line-height:1.5}
.wn-widac{color:var(--ink)} .wn-cicho{color:var(--muted)}
/* Grupa poniżej progu ma wyglądać na to, czym jest: nie na wynik. */
.grp-slaba td{opacity:.55}
.grp-slaba td.hint{font-size:12px;padding-top:0}

/* ── zdarzenia odczytane z kuponu ── */
.zdarzenia{margin:10px 0 0;padding:12px 14px;background:var(--surface-2);border-radius:10px}
.zdarzenia ul.zdarz{list-style:none;margin:8px 0 0;padding:0}
.zdarzenia ul.zdarz li{padding:5px 0;border-bottom:1px solid var(--border)}
.zdarzenia ul.zdarz li:last-child{border-bottom:0}
.zd-opis{font-weight:600;font-size:14px}
.zd-info{display:block;font-size:12px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}

/* ── ROZLICZENIE NÓG ────────────────────────────────────────────────
   Kolor niesie tu informację, ale nigdy sam: przy każdej nodze stoi znak
   ✓ ✗ ?, a pod nią zdanie z liczbą. Kto nie odróżnia zieleni od czerwieni,
   czyta dokładnie to samo. */
.zd-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.zdarzenia ul.zdarz li{padding:9px 0 7px;border-bottom:1px solid var(--border)}
.zd-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.zd-ikona{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:15px;line-height:1}
.zd-wynik{margin-left:auto;font-family:ui-monospace,Menlo,monospace;font-size:13px;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}
.zd-warunek{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;
  padding:4px 0 4px 8px;margin-top:4px;border-left:2px solid var(--border)}
.zd-znak{font-family:ui-monospace,Menlo,monospace;font-weight:700;font-size:12px;
  flex:0 0 auto;min-width:10px}
.zd-nazwa{font-size:13px;flex:1 1 120px;min-width:0}
.zd-kurs{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.zd-powod{flex:1 0 100%;font-size:12px;color:var(--muted);line-height:1.45;padding-left:18px}
.zd-sel{flex:0 0 auto;width:auto;max-width:130px;font-size:11px;padding:2px 6px;
  border-radius:6px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted)}
.zd-ok  > .zd-top > .zd-ikona,  .zd-ok.zd-warunek  > .zd-znak{color:var(--win)}
.zd-zle > .zd-top > .zd-ikona,  .zd-zle.zd-warunek > .zd-znak{color:var(--loss)}
.zd-hmm > .zd-top > .zd-ikona,  .zd-hmm.zd-warunek > .zd-znak{color:var(--warn)}
.zd-zle.zd-warunek{border-left-color:var(--loss)}
.zd-ok.zd-warunek{border-left-color:var(--win)}
.zd-hmm.zd-warunek{border-left-color:var(--warn)}
.zd-werdykt{display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border)}
.zd-werdykt.zd-zle{border-color:var(--loss);background:var(--loss-soft)}
.zd-werdykt.zd-ok{border-color:var(--win);background:var(--win-soft)}
.zd-werdykt.zd-hmm{border-color:var(--warn);background:var(--warn-soft)}
.zd-zdanie{font-size:13.5px;line-height:1.5}
@media (max-width:560px){
  .zd-nazwa{flex:1 1 100%}
}

/* ── archiwum zamkniętych okresów ── */
.okres{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-left-width:3px;border-radius:9px;background:var(--surface-2)}
.ok-plus{border-left-color:var(--win)} .ok-minus{border-left-color:var(--loss)}
.okres-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.okres-wynik{font-size:16px;font-weight:600}
.okres-liczby{font-size:12px;color:var(--muted);margin-top:3px}
.okres-ciekawostka{margin-top:8px;font-size:13.5px;line-height:1.5}
.okres .row{margin-top:9px}
/* Słupki dzień po dniu: wysokość względem najmocniejszego dnia okresu. */
.dni-wyk{display:flex;align-items:flex-end;gap:2px;height:38px;margin-top:10px}
.dw-kol{flex:1 1 auto;min-width:3px;display:flex;align-items:flex-end;height:100%}
.dw-slup{width:100%;border-radius:2px}
.dw-plus{background:var(--win)} .dw-minus{background:var(--loss)}

/* ─────────────────────────────────────────────────────────────────────────
   WYKOŃCZENIE W STYLU typowi.pl

   Warstwa dopisana na końcu, żeby nie przepisywać 300 reguł powyżej — te
   ostatnie i tak wygrywają w kaskadzie. Wszystko bierze kolor z tokenów,
   więc zmiana jednej zmiennej --accent przemalowuje cały interfejs.

   Zasada, której się tu trzymam: kolor niesie ZNACZENIE, nie ozdabia.
   Akcent oznacza „to jest sterowanie apką”, zieleń i czerwień wyłącznie
   wynik pieniężny, bursztyn wyłącznie stan oczekiwania. Dzięki temu na
   ekranie pełnym liczb widać od razu, na co patrzeć — a nie tylko, że jest
   kolorowo.
   ───────────────────────────────────────────────────────────────────────── */

/* Delikatna poświata pod nagłówkiem — ten sam granat, tylko rozjaśniony.
   Daje głębię bez ani jednego dodatkowego koloru. */
body{
  background-image:
    radial-gradient(1200px 380px at 12% -140px, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(900px 320px at 92% -180px, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  background-repeat:no-repeat;
}

/* ── nagłówek: pasek marki ── */
.top{
  position:relative; padding-bottom:16px; margin-bottom:2px;
  border-bottom:1px solid var(--border);
}
.top::after{
  content:""; position:absolute; left:0; bottom:-1px; width:96px; height:2px;
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  border-radius:2px;
}
.brand h1{font-size:27px; font-weight:700; letter-spacing:-.03em}
.dot{
  width:30px; height:30px;
  background:linear-gradient(145deg, var(--accent-2), var(--accent));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
             0 6px 18px -8px var(--accent);
}
.dot::after{inset:9px; background:var(--ground)}

/* ── pasek banku: pierwsza komórka wyróżniona akcentem ── */
.bankstrip{border-color:var(--border-strong)}
.bs{position:relative; transition:background .15s ease}
.bs:first-child{background:linear-gradient(180deg, var(--accent-soft), var(--surface) 62%)}
.bs:first-child::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--accent);
}
.bs .v{font-size:22px}
.bs .n{letter-spacing:.01em}

/* ── karty ── */
.card{
  border-color:var(--border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 42%, var(--surface)), var(--surface) 84px);
}
.cardhead h2::before{background:var(--accent); width:3px; border-radius:2px}
.cardhead .lbl{
  color:var(--accent-2); background:var(--accent-soft);
  padding:3px 9px; border-radius:999px; letter-spacing:.09em;
}

/* ── przyciski ── */
button.btn, a.btn{
  font-weight:600; border-radius:9px; letter-spacing:.005em;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color:color-mix(in srgb, var(--accent) 70%, #000);
  color:#04101F;
  box-shadow:0 1px 0 rgba(255,255,255,.16) inset, 0 6px 16px -10px var(--accent);
  transition:transform .1s ease, box-shadow .15s ease, background .15s ease;
}
button.btn:hover, a.btn:hover{
  background:linear-gradient(180deg, var(--accent-2), var(--accent-2));
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 10px 22px -10px var(--accent);
}
button.btn:active, a.btn:active{transform:translateY(1px)}
button.btn.ghost, a.btn.ghost{
  background:var(--surface-2); color:var(--ink);
  border-color:var(--border-strong); box-shadow:none;
}
button.btn.ghost:hover, a.btn.ghost:hover{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent-2);
}

/* ── tabele: nagłówek mocniejszy, wiersze reagujące ── */
th{
  color:var(--ink-2); background:var(--surface-2);
  border-bottom:1px solid var(--border-strong); font-weight:600;
}
tbody tr:nth-child(even) td, table tr:nth-child(even) td{
  background:color-mix(in srgb, var(--surface-2) 34%, transparent);
}
table tr:hover td{background:var(--accent-soft)}
td{border-bottom-color:var(--grid)}

/* ── plakietki wyniku: kolor + wypełnienie, czytelne z drugiego końca stołu ── */
.pill{font-weight:600; padding:3px 10px; border-width:1px}
.pill.win{background:var(--win-soft); color:var(--win); border-color:color-mix(in srgb, var(--win) 55%, transparent)}
.pill.lose{background:var(--loss-soft); color:var(--loss); border-color:color-mix(in srgb, var(--loss) 55%, transparent)}
.pill.pending{background:var(--warn-soft); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 55%, transparent)}
.pill::before{width:7px; height:7px; box-shadow:0 0 8px currentColor}

/* ── kafelki liczbowe ── */
.st{background:var(--surface-2); border-color:var(--border)}
.st:hover{border-color:var(--border-strong)}
.st .v{font-size:19px; letter-spacing:-.02em}
.st .v.pos{color:var(--win)} .st .v.neg{color:var(--loss)}

/* ── pola formularza ── */
input, select, textarea{
  background:var(--ground); color:var(--ink);
  border:1px solid var(--border-strong); border-radius:9px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
input::placeholder, textarea::placeholder{color:var(--muted)}

/* ── przełącznik segmentowy ── */
.seg{background:var(--ground); border:1px solid var(--border); border-radius:9px; padding:3px}
.seg button[aria-pressed="true"], .segbtn.on{
  background:var(--accent-soft); color:var(--accent-2); box-shadow:none; font-weight:600;
}

/* ── słupki dzień po dniu: mocniejszy kontrast ── */
.dw-plus{background:linear-gradient(180deg, var(--win), color-mix(in srgb, var(--win) 55%, transparent))}
.dw-minus{background:linear-gradient(180deg, color-mix(in srgb, var(--loss) 55%, transparent), var(--loss))}

/* ── ramka skupienia dla klawiatury: jedna, wspólna dla wszystkiego ── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* Ludzie, którzy wyłączyli animacje w systemie, mają je wyłączone i tutaj. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition:none !important; animation:none !important}
}

/* ── WERSJA 28 ─────────────────────────────────────────────────────── */
/* liczby na górze strony: odstęp od planu dnia */
.wrap > .bankstrip{margin-bottom:14px}
#alerty{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}
#alerty:empty{display:none}
.note-body{min-width:0; flex:1; line-height:1.55}
.note-body strong{color:var(--ink)}
.auto-lista{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:4px}
.auto-lista li{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.auto-lista li > span:nth-last-child(2){flex:1 1 220px; min-width:0}
.auto-lista .pos{color:var(--win); font-weight:600} .auto-lista .neg{color:var(--loss); font-weight:600}
button.btn.xs{padding:2px 9px; font-size:11.5px; border-radius:6px}

/* menu eksportu */
.exp-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:250px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:10px;
  box-shadow:var(--shadow); padding:5px; display:flex; flex-direction:column; gap:2px}
.exp-menu[hidden]{display:none}
.exp-opt{display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left;
  padding:8px 10px; border:0; border-radius:7px; background:transparent; color:var(--ink);
  font:inherit; font-size:13px; cursor:pointer}
.exp-opt:hover, .exp-opt:focus-visible{background:var(--surface-2); outline:none}
.exp-opt .muted{font-size:11.5px; color:var(--muted)}

/* wykres „szczęście czy umiejętność” */
.ch-dot.leg-band{background:var(--cat-a); opacity:.35}
.ch-box .tip{top:8px; line-height:1.5}
.tip .muted{color:var(--muted)}
#fartCard .chart-card{margin-top:10px}