:root { --bg:#f6f7f9; --card:#fff; --text:#1d2433; --muted:#6b7280; --line:#e5e7eb; --brand:#128c7e; --brand-d:#0b6b60;
  --warn:#b45309; --warn-bg:#fef3c7; --bad:#b91c1c; --bad-bg:#fee2e2; --ok:#047857; --ok-bg:#d1fae5; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:var(--text); }
a { color:var(--brand-d); }
.hidden { display:none !important; }
.muted { color:var(--muted); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 24px; background:var(--card); border-bottom:1px solid var(--line); }
.topbar nav { display:flex; gap:16px; align-items:center; }
.brand { font-weight:700; text-decoration:none; color:var(--text); }
main { max-width:1180px; margin:24px auto; padding:0 24px 48px; }
h1 { font-size:22px; margin:0 0 16px; } h2 { font-size:17px; margin:24px 0 10px; } h3 { font-size:15px; margin:16px 0 8px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-bottom:16px; overflow-x:auto; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.row > * { flex:0 0 auto; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px 20px; }
label { display:flex; flex-direction:column; gap:4px; font-weight:500; }
label.inline { flex-direction:row; align-items:center; gap:6px; font-weight:400; }
input, select, textarea { font:inherit; padding:7px 9px; border:1px solid #cfd4dc; border-radius:7px; background:#fff; min-width:0; max-width:100%; }
textarea { min-height:70px; resize:vertical; }
button { font:inherit; padding:7px 14px; border-radius:7px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer; }
button.secondary { background:#fff; color:var(--brand-d); }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
a.button { display:inline-block; padding:7px 14px; border-radius:7px; border:1px solid var(--brand); text-decoration:none; }
a.button.secondary { background:#fff; color:var(--brand-d); }
button.link { background:none; border:none; color:var(--brand-d); padding:0; }
button:disabled { opacity:.55; cursor:default; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-weight:600; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.02em; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; background:#eef2f7; }
.pill.ok { background:var(--ok-bg); color:var(--ok); } .pill.warn { background:var(--warn-bg); color:var(--warn); } .pill.bad { background:var(--bad-bg); color:var(--bad); }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.kpi .v { font-size:24px; font-weight:700; font-variant-numeric:tabular-nums; } .kpi .l { color:var(--muted); font-size:12px; }
.bar { height:8px; background:#eef2f7; border-radius:4px; overflow:hidden; min-width:80px; }
.bar > i { display:block; height:100%; background:var(--brand); }
.notice { padding:10px 12px; border-radius:8px; background:var(--warn-bg); color:var(--warn); margin:8px 0; }
.notice.bad { background:var(--bad-bg); color:var(--bad); } .notice.ok { background:var(--ok-bg); color:var(--ok); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tabs button { background:none; color:var(--muted); border:none; border-bottom:2px solid transparent; border-radius:0; }
.tabs button.active { color:var(--text); border-bottom-color:var(--brand); font-weight:600; }
.toast { position:fixed; bottom:20px; right:20px; background:#111827; color:#fff; padding:10px 14px; border-radius:8px; max-width:420px; }
.toast.bad { background:var(--bad); }
.login { max-width:360px; margin:12vh auto; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
.small { font-size:12px; }
ul.problems { margin:6px 0 0 18px; padding:0; }
.step { border:1px dashed var(--line); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
@media (max-width:640px) { main { padding:0 12px 32px; } .topbar { padding:10px 12px; flex-wrap:wrap; gap:6px; } .topbar nav { gap:10px; flex-wrap:wrap; } h1 { font-size:19px; } }