/* «📱 La mia bisca» — variante A «Cruscotto». Colours come from Telegram (--tg-theme-*, set by telegram-web-app.js);
   the values after the comma are fallbacks for a browser outside Telegram. */
:root{
  --f-bg:#f3f1ea; --f-sec:#ffffff; --f-ink:#1c1b17; --f-hint:#7a766a; --f-line:#e3dfd2; --f-accent:#2f6b4f; --f-accent-ink:#ffffff;
  --win:#2f7a52; --lose:#b0402c; --wait:#9a6f12;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --f-bg:#141612; --f-sec:#1d211b; --f-ink:#ecebe4; --f-hint:#9a9a8c; --f-line:#2d3229; --f-accent:#7cc39c; --f-accent-ink:#10140f;
  --win:#7cc39c; --lose:#f08a74; --wait:#e2b75a; color-scheme:dark}}
:root[data-theme="dark"]{
  --f-bg:#141612; --f-sec:#1d211b; --f-ink:#ecebe4; --f-hint:#9a9a8c; --f-line:#2d3229; --f-accent:#7cc39c; --f-accent-ink:#10140f;
  --win:#7cc39c; --lose:#f08a74; --wait:#e2b75a; color-scheme:dark}
:root{
  --bg:var(--tg-theme-secondary-bg-color,var(--f-bg));
  --sec:var(--tg-theme-section-bg-color,var(--tg-theme-bg-color,var(--f-sec)));
  --ink:var(--tg-theme-text-color,var(--f-ink));
  --hint:var(--tg-theme-hint-color,var(--f-hint));
  --line:var(--tg-theme-section-separator-color,var(--f-line));
  --accent:var(--tg-theme-button-color,var(--f-accent));
  --accent-ink:var(--tg-theme-button-text-color,var(--f-accent-ink));
  --head:var(--tg-theme-section-header-text-color,var(--hint));
  --chip:var(--bg);
  --f-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --f-disp:Georgia,"Times New Roman",serif;
  --f-num:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --top:calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px));
  --bottom:calc(var(--tg-safe-area-inset-bottom,0px) + var(--tg-content-safe-area-inset-bottom,0px));
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.4;
  min-height:var(--tg-viewport-stable-height,100vh);
  padding-top:calc(10px + var(--top));padding-bottom:calc(28px + var(--bottom) + env(safe-area-inset-bottom,0px));
  padding-left:max(16px,calc(var(--tg-safe-area-inset-left,0px) + 12px),env(safe-area-inset-left,0px));
  padding-right:max(16px,calc(var(--tg-safe-area-inset-right,0px) + 12px),env(safe-area-inset-right,0px))}
.app{max-width:460px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
h1,h2{margin:0;text-wrap:balance}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.big{font-family:var(--f-disp);font-size:42px;line-height:1.05;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.lab{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--head)}
.sec{background:var(--sec);border-radius:16px;padding:14px}
.sec h2{font-size:15px;margin-bottom:8px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.row>*{min-width:0}
.pos{color:var(--win)}.neg{color:var(--lose)}.pend{color:var(--wait)}
.slip{border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:6px}
.slip + .slip{margin-top:8px}
.leg{display:grid;grid-template-columns:18px 1fr auto;gap:6px;font-size:14px;align-items:baseline}
.leg>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.list{display:flex;flex-direction:column}
.list .it{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:9px 0;border-top:1px solid var(--line)}
.list .it:first-child{border-top:0}
.sub{font-size:12.5px;color:var(--hint)}
.empty{color:var(--hint);font-size:14px;margin:6px 0}
.note{font-size:13px;color:var(--hint);margin:8px 0 0}
svg text{fill:var(--hint);font-size:10px;font-family:var(--f-ui)}
.bars{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bar{background:var(--chip);border-radius:12px;padding:10px;min-width:0}
.bar .num{font-size:20px;overflow-wrap:anywhere}
details summary{cursor:pointer;color:var(--hint);font-size:13px;padding-top:8px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--hint);font-size:12px;padding:0 4px}
.btn{font:inherit;font-size:13px;border:0;border-radius:999px;padding:7px 14px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gate{text-align:center;padding:28px 18px}
.gate .ico{font-size:40px;line-height:1}
.gate h1{font-size:19px;margin:10px 0 6px}
.list details.it{display:block}
.list details.it summary{list-style:none;cursor:pointer}
.list details.it summary::-webkit-details-marker{display:none}