:root{
  --bg:#f6f7fb; --panel:#fff; --ink:#1d2233; --muted:#6b7386; --line:#e6e8f0;
  --accent:#3f6dd8; --accent-soft:#eaf0ff; --pos:#177a4a; --neg:#c0392b; --warn:#b8860b;
  --radius:12px; --shadow:0 1px 2px rgba(20,25,50,.06), 0 4px 16px rgba(20,25,50,.05);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14161f; --panel:#1c1f2b; --ink:#e9ecf5; --muted:#9aa2b8; --line:#2b3040;
    --accent:#7ea2ff; --accent-soft:#232a42; --pos:#4cc38a; --neg:#ff7a6b; --warn:#e0b341;
    --shadow:0 1px 2px rgba(0,0,0,.4); }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
header{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
header nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
header nav a{padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-size:14px}
header nav a:hover{background:var(--accent-soft);color:var(--accent)}
header nav a.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.out{display:flex;align-items:center;gap:8px}
.who{color:var(--muted);font-size:13px}
h1{font-size:24px;margin:24px 0 16px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
h1 .period{font-size:15px;font-weight:400;color:var(--muted)}
h2{font-size:16px;margin:0}
main{padding-bottom:40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card > table{margin:0}
.card .pad{padding:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
tbody tr:last-child td{border-bottom:none}
tr.total td{font-weight:700;background:var(--accent-soft)}
td.num,th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.pos{color:var(--pos)} .neg{color:var(--neg)} .zero{color:var(--muted)}
.scroll{overflow-x:auto}
a{color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow)}
.tile-label{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.tile-value{font-size:22px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.tile-hint{font-size:12px;color:var(--muted);margin-top:2px}
.tile.good .tile-value{color:var(--pos)} .tile.bad .tile-value{color:var(--neg)}
button,.btn{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:9px 14px;
  font:inherit;font-size:14px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{filter:brightness(1.06)}
button.ghost,.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--line)}
button.link{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;font:inherit;text-decoration:underline}
button.danger{background:var(--neg)}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel);color:var(--ink);max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.grid .full{grid-column:1/-1}
form.inline{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.months{display:flex;gap:8px;align-items:center}
.flash{padding:12px 16px;border-radius:10px;margin:16px 0;border:1px solid var(--line)}
.flash.ok{background:#e8f6ee;border-color:#bfe3ce;color:#14562f}
.flash.err{background:#fdeceb;border-color:#f3c3bd;color:#8f2318}
@media (prefers-color-scheme: dark){
  .flash.ok{background:#14301f;border-color:#1f5637;color:#8ee0b0}
  .flash.err{background:#33191a;border-color:#6b2b2b;color:#ff9d92}
}
.empty{color:var(--muted);padding:16px;margin:0}
.badge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:20px;
  background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.badge.warn{background:#fdf3d7;color:#8a6400}
.badge.bad{background:#fdeceb;color:#a02c1f}
.badge.good{background:#e8f6ee;color:#14562f}
@media (prefers-color-scheme: dark){
  .badge.warn{background:#3a2f10;color:#e9c85e}
  .badge.bad{background:#3a1b19;color:#ff9d92}
  .badge.good{background:#123024;color:#7fd7a6}
}
.muted{color:var(--muted)}
.small{font-size:13px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--line);
  border-radius:20px;text-decoration:none;color:var(--ink);font-size:14px;background:var(--panel);
  white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip b{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.on b{color:#fff;opacity:.8}
.chip .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.chip.on .dot{background:#fff !important}
.mark-list{list-style:none;margin:0;padding:0}
.mark-item{padding:14px 16px;border-bottom:1px solid var(--line)}
.mark-item:last-child{border-bottom:none}
.mark-name{font-weight:600;margin-bottom:2px}
.mark-sub{font-size:12px;color:var(--muted);margin-bottom:10px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px}
.opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:14px;cursor:pointer;background:var(--panel);color:var(--ink)}
.opt input{margin:0}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.sticky-save{position:sticky;bottom:0;background:var(--panel);border-top:1px solid var(--line);
  padding:12px 16px;display:flex;gap:10px;align-items:center}
.bar{height:8px;background:var(--accent-soft);border-radius:4px;overflow:hidden;min-width:80px}
.bar > i{display:block;height:100%;background:var(--accent)}
.chart{display:flex;align-items:flex-end;gap:10px;height:160px;padding:16px}
.chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.chart .col i{display:block;width:100%;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px}
.chart .col i.loss{background:var(--neg)}
.chart .col span{font-size:11px;color:var(--muted);white-space:nowrap}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
details summary{cursor:pointer;color:var(--accent);font-size:13px}
.login{max-width:340px;margin:60px auto}
footer{color:var(--muted);font-size:12px;padding:20px 16px 40px}
@media (max-width:640px){
  h1{font-size:20px}
  th,td{padding:9px 10px}
  header .wrap{gap:8px}
  /* меню — одна прокручиваемая строка, а не столбик в пол-экрана */
  header nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
  header nav a{white-space:nowrap}
  .opts{grid-template-columns:1fr 1fr}
  form.inline > div{flex:1 1 45%}
  form.inline select,form.inline input{width:100%}
}