:root{
  --bg:#f5f5f4; --surface:#fff; --line:#e7e5e4; --line-strong:#d6d3d1;
  --text:#1c1917; --text-2:#57534e; --text-3:#a8a29e;
  --accent:#1c1917; --pos:#15803d; --neg:#b91c1c;
  --radius:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}
h1{font-size:20px;font-weight:600;margin:0}
h2{font-size:16px;font-weight:600;margin:0}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar-in{max-width:1200px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600}
.topnav{display:flex;gap:20px;margin-left:32px;flex:1}
.topnav a{font-size:14px;color:var(--text-2);padding:4px 0;border-bottom:2px solid transparent}
.topnav a.on{color:var(--text);border-bottom-color:var(--text);text-decoration:none}
.who{font-size:14px;color:var(--text-2);display:flex;align-items:center;gap:12px}

.page{max-width:1200px;margin:0 auto;padding:24px}
.head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;gap:16px}
.sub{font-size:13px;color:var(--text-3);margin-top:2px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.card.flush{padding:0;overflow:hidden}
.stack>*+*{margin-top:20px}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.kpi-l{font-size:13px;color:var(--text-2)}
.kpi-v{font-size:24px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi-d{font-size:12px;margin-top:4px;color:var(--text-3)}
.pos{color:var(--pos)} .neg{color:var(--neg)}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:10px 16px;font-weight:500;font-size:13px;color:var(--text-2);background:#fafaf9}
td{padding:11px 16px;border-top:1px solid var(--line)}
.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover{background:#fafaf9}

label{display:block;font-size:14px;margin-bottom:6px;color:var(--text-2)}
input[type=text],input[type=email],input[type=password],select{
  width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;
  font-size:15px;font-family:inherit;background:var(--surface);color:var(--text)}
input:focus,select:focus{outline:2px solid var(--text);outline-offset:-1px}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:auto;margin:0}

.btn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:9px 16px;
  font-size:14px;font-family:inherit;cursor:pointer}
.btn:hover{opacity:.88}
.btn-ghost{background:none;color:var(--text-2);border:1px solid var(--line-strong)}
.btn-link{background:none;color:var(--text-2);border:0;padding:0;font-size:14px;
  text-decoration:underline;cursor:pointer}

.note{padding:12px 14px;border-radius:8px;font-size:14px;border:1px solid}
.note-ok{background:#f0fdf4;border-color:#bbf7d0;color:#166534}
.note-err{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.note-warn{background:#fffbeb;border-color:#fde68a;color:#92400e}
code{background:#f5f5f4;padding:2px 6px;border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,monospace;font-size:14px}

.empty{padding:32px 20px;text-align:center;color:var(--text-3);font-size:14px}
.auth{max-width:400px;margin:64px auto}