:root{
  --ink:#16181d; --muted:#6b7280; --line:#e3e6ec; --bg:#f6f7f9;
  --card:#ffffff; --brand:#1e3a5f; --accent:#2563eb; --good:#047857;
  --bad:#b42318; --badbg:#fdeceb; --warnbg:#fff7e6;
  --ui:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);
     font-size:15px;line-height:1.5;}
main{max-width:1100px;margin:0 auto;padding:20px 16px 72px;}
h1{font-size:22px;margin:4px 0 16px;}
h2{font-size:16px;margin:26px 0 10px;}
.muted{color:var(--muted);} .small{font-size:12.5px;}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.bad{color:var(--bad);font-weight:700;}
code{background:#eef1f6;padding:1px 5px;border-radius:4px;font-size:12.5px;}

.top{background:var(--brand);color:#fff;padding:10px 16px;display:flex;
     gap:16px;align-items:center;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:9px;color:#fff;
       text-decoration:none;font-weight:800;font-size:16px;}
.brand img{height:30px;width:auto;border-radius:4px;background:#fff;padding:2px;}
.top nav{display:flex;gap:4px;flex-wrap:wrap;}
.top nav a{color:#dbe4f0;text-decoration:none;padding:6px 11px;
           border-radius:7px;font-size:14px;}
.top nav a:hover{background:rgba(255,255,255,.14);color:#fff;}
.who{margin-left:auto;font-size:13px;color:#c9d6e8;}
.who a{color:#fff;margin-left:8px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:12px;
      padding:16px;margin-bottom:18px;}
label{display:block;font-size:12.5px;font-weight:600;color:#44495a;
      margin-bottom:12px;}
input,select{width:100%;font:inherit;font-size:15px;padding:9px 10px;
  margin-top:4px;border:1px solid #cfd5df;border-radius:8px;background:#fff;
  color:var(--ink);}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:1px;}
.row2{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.row3{display:grid;gap:0 14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
button,.btn{font:inherit;font-size:14px;font-weight:700;padding:9px 16px;
  border:1px solid #cfd5df;border-radius:9px;background:#fff;color:var(--ink);
  cursor:pointer;text-decoration:none;display:inline-block;}
.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.big{width:100%;padding:14px;font-size:16px;}
.sm{padding:5px 10px;font-size:12.5px;}

.flash{padding:11px 14px;border-radius:9px;margin-bottom:14px;font-size:14px;}
.flash.success{background:#e8f5ee;border:1px solid #bfe3d0;color:#065f46;}
.flash.error{background:var(--badbg);border:1px solid #f3c6c2;color:#8a1c14;}

.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
      margin-bottom:12px;}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;
     padding:13px 15px;}
.kpi span{display:block;font-size:12px;color:var(--muted);font-weight:600;}
.kpi b{font-size:22px;font-variant-numeric:tabular-nums;}
.kpi.good b{color:var(--good);}
.kpis.sub .kpi b{font-size:18px;}

table.grid{width:100%;border-collapse:collapse;background:var(--card);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  font-size:14px;margin-bottom:18px;}
.grid th{background:#eef1f6;text-align:left;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em;color:#4b5563;padding:9px 11px;}
.grid td{padding:9px 11px;border-top:1px solid var(--line);}
.grid tr.tot td{background:#f3f6fb;font-weight:800;}
.grid tr.rowbad td{background:var(--badbg);}
.grid tr.dim td{opacity:.5;}

.warnbox{background:var(--warnbg);border-color:#f0dcb4;}
.warnbox h2{margin-top:0;}
.warnbox ul{margin:0;padding-left:20px;}
.warnbox li{margin-bottom:4px;font-size:14px;}

.chart{width:100%;height:180px;display:block;}
.total{font-size:19px;font-weight:700;margin:6px 0 4px;}
.hint{font-size:12.5px;color:var(--muted);margin-bottom:12px;}
.hint.bad{color:var(--bad);}
.sellform .wide{grid-column:1/-1;}
.filters{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;}
.filters label{margin-bottom:0;}
.logoprev{max-height:70px;border:1px solid var(--line);border-radius:8px;
          padding:5px;background:#fff;}

.loginwrap{min-height:70vh;display:flex;align-items:center;justify-content:center;}
.login{max-width:360px;width:100%;}
.login h1{margin:0 0 2px;}

@media (max-width:640px){
  .top{gap:10px;} .who{margin-left:0;width:100%;}
  table.grid{font-size:13px;} .grid th,.grid td{padding:7px 8px;}
}