:root{color-scheme:dark;--bg:#1a1c20;--fg:#eceef1;--mut:#9aa1ab;--card:#24272c;--card2:#2c3036;--line:#383c43;--pos:#3fd49a;--neg:#ff8f7a;--acc:#e4122f;--acc2:#ff3b57;--lk:#ff6b7e;--on:#fff;--r:14px;--sh:0 6px 18px rgba(0,0,0,.28)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-variant-numeric:tabular-nums;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
nav{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;padding:12px 20px;background:var(--acc);color:var(--on)}
nav strong{margin-right:auto;font-size:1.05rem}
nav a{color:var(--on);text-decoration:none;opacity:.78;padding:4px 0;border-bottom:2px solid transparent}
nav a.on,nav a:hover{opacity:1;border-color:currentColor}
nav .s{display:none}
main{max-width:900px;margin:0 auto;padding:20px 16px 60px}
h1{font-size:1.5rem;margin:.2em 0 .6em}h3{margin:1.6em 0 .4em;font-size:1.05rem}
a{color:var(--acc)}
.muted,em{color:var(--mut);font-style:normal}
.small{font-size:.85rem}
.pos{color:var(--pos)}.neg{color:var(--neg)}
.flash{background:var(--card);border-left:4px solid var(--pos);padding:10px 14px;margin-bottom:14px;border-radius:4px}
.err{color:var(--neg)}
.hero{padding:10px 0 4px}.hero p{margin:0}
.big{font-size:clamp(2.2rem,8vw,3.4rem);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.sum{display:flex;flex-wrap:wrap;gap:4px 18px;margin:.5em 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0}
.tile{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px;min-width:0}
.tile span{display:block;color:var(--mut);font-size:.85rem}
.tile b{display:block;font-size:1.2rem;overflow-wrap:anywhere}
.tile small{display:block;color:var(--mut);font-size:.8rem;overflow-wrap:anywhere}
.spark{display:flex;gap:5px;align-items:flex-end;height:130px;padding:8px 0;border-bottom:1px solid var(--line)}
.col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.col i{display:block;width:100%;background:var(--neg);opacity:.55;border-radius:3px 3px 0 0;min-height:2px}
.col.today i{opacity:1}.col small{color:var(--mut);font-size:.7rem;margin-top:3px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;gap:6px;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.list li>span:first-child{flex:1;min-width:0}.list em{display:block;font-size:.85rem}
.list .amt{white-space:nowrap;text-align:right}
.amt small{display:block;color:var(--mut);font-size:.75rem}
.list form{margin:0}
.day{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:0;border-bottom:2px solid var(--line);padding-bottom:4px}
.day small{color:var(--mut);font-weight:400}
.monthbar{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:16px 0 4px}
.monthbar form{margin:0}
.tabs{display:flex;gap:8px;margin-bottom:6px}
.tabs a{padding:8px 18px;border:1px solid var(--line);border-radius:99px;text-decoration:none}
.tabs a.on{background:var(--acc);color:var(--on);border-color:var(--acc)}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;margin:12px 0;display:block}
a.card{text-decoration:none;color:inherit}a.card:hover{border-color:var(--acc)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.grid .wide{grid-column:1/-1}
label{display:flex;flex-direction:column;gap:3px;font-size:.85rem;color:var(--mut)}
label.check{flex-direction:row;align-items:center;gap:8px;color:var(--fg)}
input,select,button{font:inherit;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg);min-width:0}
input[type=checkbox]{width:auto;min-height:0}
input[type=date],input[type=month]{-webkit-appearance:none;appearance:none;min-height:42px}
button{background:var(--acc);color:var(--on);border:0;cursor:pointer;font-weight:600}
button:hover{filter:brightness(1.1)}
.x{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
button.x{background:none;color:var(--mut);font-size:1.3rem;padding:0 8px;line-height:1}
button.x:hover{color:var(--neg)}
a.x{color:var(--mut);text-decoration:none;font-size:1.15rem}a.x:hover{color:var(--acc)}
button.ghost{background:none;color:var(--neg);border:1px solid var(--neg);margin-top:24px}
button.danger{background:var(--neg);color:#fff;border:0}
html{scroll-behavior:smooth}
.tile b,.big{transition:color .4s,opacity .4s}.upd{animation:flashv 1.2s ease}
@keyframes flashv{0%{opacity:.25;transform:translateY(-2px)}100%{opacity:1;transform:none}}
.tile.hi{border-color:var(--pos);background:linear-gradient(0deg,var(--card),var(--card))}
.tile.hi b{font-size:1.35rem}
main>*{animation:fadein .35s ease both}@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.live-stamp{font-weight:400;font-size:.75rem}
.spark2{display:flex;gap:4px;align-items:flex-end;height:150px;padding:8px 0;border-bottom:1px solid var(--line)}
.c2{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.c2 .b{display:flex;gap:2px;align-items:flex-end;width:100%;height:calc(100% - 16px)}
.c2 .b>div{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.c2 i{display:block;width:100%;min-height:0;transition:height .5s}
.c2 i.r{background:var(--pos)}.c2 i.g{background:var(--acc)}.c2 i.e{background:var(--neg);opacity:.75}
.c2.today{outline:1px solid var(--line);outline-offset:1px;border-radius:3px}.c2 small{color:var(--mut);font-size:.7rem;margin-top:3px}
.sw.r{background:var(--pos)}.sw.g{background:var(--acc)}.sw.e{background:var(--neg)}
svg.evo{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--line);border-radius:8px}
svg.evo .gr{stroke:var(--line);stroke-width:1}svg.evo .ax{fill:var(--mut);font-size:10px}
svg.evo .ln{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}svg.evo .pt{stroke:none}
.ln.t,.pt.t,.sw.t{stroke:var(--acc);fill:var(--acc);background:var(--acc)}.ln.c,.pt.c,.sw.c{stroke:var(--pos);fill:var(--pos);background:var(--pos)}.ln.k,.pt.k,.sw.k{stroke:var(--neg);fill:var(--neg);background:var(--neg)}
svg.evo .ln.t{fill:none}svg.evo .ln.c{fill:none;stroke-width:1.6;opacity:.8}svg.evo .ln.k{fill:none;stroke-width:1.6;opacity:.8}
.legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:6px 0}.legend .sw{display:inline-block;width:12px;height:4px;border-radius:2px;margin-right:6px;vertical-align:middle}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.btn{display:inline-block;padding:10px 14px;border-radius:8px;background:var(--acc);color:var(--on);text-decoration:none;font-weight:600;min-height:44px}
small.blk{display:block;color:var(--mut);font-weight:400}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.login{max-width:360px;margin:12vh auto;display:flex;flex-direction:column;gap:12px}
.row{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bar{height:8px;background:var(--line);border-radius:4px;margin:10px 0;overflow:hidden}.bar i{display:block;height:100%;background:var(--pos)}
.tag{font-size:.75rem;padding:2px 8px;border-radius:99px;border:1px solid currentColor;vertical-align:middle;white-space:nowrap}
.tag.owe{color:var(--neg)}.tag.lent{color:var(--pos)}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:3px 10px;border-radius:99px;border:1px solid var(--line);font-size:.85rem}
.chip.income{border-color:var(--pos);color:var(--pos)}
.logout{margin-top:28px}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--mut);font-weight:600}
tbody th{font-weight:600;text-align:left}
tr.tot th,tr.tot td{border-top:2px solid var(--fg);font-weight:700}
th.wrap,td.wrap{white-space:normal;min-width:150px}
details{margin:8px 0;border-top:1px solid var(--line)}
summary{cursor:pointer;color:var(--acc);padding:10px 0;min-height:40px;font-weight:600}
details[open]>summary{margin-bottom:8px}
button.small-btn{margin-top:10px;min-height:0;padding:6px 12px;font-size:.85rem}

/* ===== Thème graphite + rouge Whish ===== */
.tm{display:inline-block;font-weight:700;color:var(--acc2);background:rgba(228,18,47,.14);border-radius:6px;padding:0 6px;font-size:.8rem;font-variant-numeric:tabular-nums}
body{background:radial-gradient(900px 420px at 88% -8%,rgba(228,18,47,.14),transparent 70%),radial-gradient(700px 380px at -10% 110%,rgba(228,18,47,.07),transparent 70%),var(--bg);background-attachment:fixed;min-height:100vh}
nav{background:linear-gradient(180deg,#22252a,#16181c);border-bottom:2px solid var(--acc);box-shadow:0 4px 16px rgba(0,0,0,.35);position:sticky;top:0;z-index:20}
nav strong{color:#fff;letter-spacing:.02em}nav strong::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--acc);margin-right:8px;box-shadow:0 0 10px var(--acc)}
nav a{color:#fff;opacity:.65;transition:opacity .2s,border-color .2s,background .2s}
nav a.on,nav a:hover{opacity:1;border-color:var(--acc2)}
a{color:var(--lk)}
h1{letter-spacing:-.01em}
h3{padding-left:10px;border-left:3px solid var(--acc)}
.card,.tile,.flash,svg.evo{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card,.tile,a.card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
a.card:hover,.tile:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.4)}
.flash{border-left:4px solid var(--pos)}
.tile.hi{border-color:var(--acc);background:linear-gradient(180deg,rgba(228,18,47,.22),var(--card));box-shadow:0 0 0 1px rgba(228,18,47,.25),var(--sh)}
.big{color:#fff;text-shadow:0 2px 24px rgba(228,18,47,.35)}
input,select{background:#17191d;border:1px solid var(--line);border-radius:10px;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus{outline:none;border-color:var(--acc2);box-shadow:0 0 0 3px rgba(228,18,47,.28)}
button,.btn{background:linear-gradient(135deg,var(--acc2),var(--acc));color:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(228,18,47,.32);transition:transform .15s ease,filter .2s,box-shadow .2s}
button:hover,.btn:hover{filter:brightness(1.1);box-shadow:0 6px 16px rgba(228,18,47,.45)}
button:active,.btn:active{transform:scale(.97)}
button.x{background:none;box-shadow:none;color:var(--mut)}button.x:hover{color:var(--neg);box-shadow:none}
button.ghost{background:none;box-shadow:none;color:var(--neg);border:1px solid var(--neg)}
button.danger{background:linear-gradient(135deg,#ff5a4a,#c4180a)}
a.x:hover{color:var(--lk)}
.tabs a{background:var(--card);border-radius:99px;transition:background .2s,border-color .2s}
.tabs a:hover{border-color:var(--acc)}
.tabs a.on{background:linear-gradient(135deg,var(--acc2),var(--acc));border-color:var(--acc);color:#fff}
summary{color:var(--lk)}
:focus-visible{outline:2px solid var(--acc2)}
.bar{background:#17191d}.bar i{background:linear-gradient(90deg,var(--acc),var(--acc2))}
.chip{background:var(--card)}
.tag.lent{color:var(--pos)}.tag.owe{color:var(--neg)}
thead th{color:var(--mut);border-bottom:2px solid var(--line)}
tbody tr{transition:background .15s}tbody tr:hover{background:rgba(255,255,255,.035)}
tr.tot th,tr.tot td{border-top:2px solid var(--acc)}
.list li{transition:background .15s}.list li:hover{background:rgba(255,255,255,.03)}
.c2 i.r{background:var(--pos)}.c2 i.g{background:var(--acc)}.c2 i.e{background:var(--neg);opacity:.8}
.c2 i,.col i{border-radius:3px 3px 0 0}
.col i{background:var(--acc);opacity:.6}.col.today i{opacity:1}
.c2.today{outline-color:var(--acc)}
svg.evo .gr{stroke:#33373e}
.ln.t,.pt.t,.sw.t{stroke:var(--acc2);fill:var(--acc2);background:var(--acc2)}
.upd{animation:flashv 1.2s ease}
::selection{background:var(--acc);color:#fff}
::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-thumb{background:#454a52;border-radius:8px}

@media(max-width:640px){
  nav{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:0 0 env(safe-area-inset-bottom);border-top:2px solid var(--acc);border-bottom:0;background:rgba(22,24,28,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  nav strong,nav .out{display:none}
  nav a{display:flex;align-items:center;justify-content:center;min-height:58px;padding:0 2px;font-size:.64rem;text-align:center;border-bottom:0;border-top:3px solid transparent}
  nav a.on{border-top-color:var(--acc2);background:rgba(228,18,47,.16)}
  nav .l{display:none}nav .s{display:inline}
  main{padding:14px 14px calc(96px + env(safe-area-inset-bottom))}
  h1{font-size:1.3rem}
  .two{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
  .grid label.wide,.grid button,.grid p.wide{grid-column:1/-1}
  input,select,button{min-height:46px;font-size:16px}
  input[type=checkbox]{min-height:0}
  .sum{flex-direction:column;gap:2px}
  .tiles{grid-template-columns:1fr 1fr}
  .tiles .tile.wide{grid-column:1/-1}
  .wallets{grid-template-columns:1fr}
  .wallets .tile{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .wallets .tile span{flex:0 0 3rem}.wallets .tile b{flex:1}.wallets .tile small{flex-basis:100%;padding-left:calc(3rem + 10px)}
  .spark{gap:3px;height:110px}
  .monthbar a{padding:10px 6px}
  .login{margin:8vh auto}
}
@media print{
  :root{--bg:#fff;--fg:#000;--mut:#555;--card:#fff;--card2:#fff;--line:#ccc;--pos:#0b7a5a;--neg:#b4412f;--acc:#c8102e;--lk:#c8102e}
  body{background:#fff!important}.card,.tile{box-shadow:none;background:#fff}.big{color:#000;text-shadow:none}
  nav,.tabs,.monthbar,.noprint,.spark,button,.x{display:none!important}
  main{padding:0;max-width:none}
  body{font-size:12px}
}