:root { --bg:#f5f6f8; --card:#fff; --ink:#1d2330; --muted:#6b7280; --line:#e3e6eb; --accent:#2457c5;
        --good:#1f8a4c; --warn:#b7791f; --bad:#c53030; --info:#2457c5; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font: 15px/1.7 Vazirmatn, Tahoma, "Segoe UI", sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 1.4rem; margin: 0 0 16px; }
h2 { font-size: 1.1rem; margin: 0 0 12px; }
h3 { font-size: 1rem; margin: 16px 0 8px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
nav.top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:10px 20px; background:var(--ink);
          color:#fff; }
nav.top a { color:#cfd6e4; }
nav.top a.active { color:#fff; font-weight:bold; }
nav.top .brand { font-weight:bold; letter-spacing:.5px; }
nav.top .spacer { flex:1; }
nav.top .user { color:#cfd6e4; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:16px;
        overflow-x:auto; }
.card.muted, .muted { color:var(--muted); }
.small { font-size:.85rem; }
.login { max-width: 380px; margin: 60px auto; }
label { display:block; margin-bottom:12px; }
input, select, textarea { display:block; width:100%; margin-top:4px; padding:8px 10px; border:1px solid var(--line);
        border-radius:6px; font:inherit; background:#fff; }
input[type=checkbox] { display:inline; width:auto; margin:0 0 0 6px; }
label.check { display:flex; align-items:center; }
button { padding:8px 18px; border:0; border-radius:6px; background:var(--accent); color:#fff; font:inherit;
         cursor:pointer; }
button.secondary { background:#e8ecf4; color:var(--ink); }
button.danger { background:var(--bad); }
button.small { padding:3px 10px; font-size:.85rem; }
button.link { background:none; color:#cfd6e4; padding:0; }
form.inline { display:inline; margin:0; }
form.row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
form.row label { margin:0; min-width:160px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-bottom:16px; }
.grid .card { margin:0; }
.grid2 { display:grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap:16px; }
.tile .big { font-size:1.6rem; font-weight:bold; }
.tile .sub { color:var(--muted); font-size:.9rem; }
.alert { padding:8px 12px; border-radius:6px; margin:0 0 8px; }
.alert.bad { background:#fdecec; color:var(--bad); }
.alert.warn { background:#fdf6e7; color:#8a5a12; }
.alert.good { background:#e9f6ee; color:var(--good); }
.alert.info { background:#eaf0fb; color:var(--info); }
.alert .hint { display:block; font-size:.85rem; color:var(--ink); opacity:.8; }
.badge { display:inline-block; padding:0 8px; border-radius:10px; font-size:.82rem; background:#eef0f4;
         color:var(--ink); white-space:nowrap; }
.badge.good { background:#e3f4ea; color:var(--good); }
.badge.warn { background:#fbf0d9; color:#8a5a12; }
.badge.bad { background:#fbe3e3; color:var(--bad); }
.badge.info { background:#e3ebfa; color:var(--info); }
.grade { display:inline-block; min-width:28px; text-align:center; border-radius:6px; font-weight:bold; }
.grade.A { background:#e3f4ea; color:var(--good); }
.grade.B { background:#e3ebfa; color:var(--info); }
.grade.C { background:#fbf0d9; color:#8a5a12; }
.grade.D { background:#fbe3e3; color:var(--bad); }
table { border-collapse:collapse; width:100%; }
table.data th, table.data td { padding:6px 8px; border-bottom:1px solid var(--line); text-align:right;
         vertical-align:top; }
table.data th { color:var(--muted); font-weight:normal; font-size:.88rem; white-space:nowrap; }
table.data tr:hover td { background:#fafbfc; }
table.facts { width:auto; }
table.facts th { text-align:right; padding:4px 0 4px 24px; color:var(--muted); font-weight:normal; white-space:nowrap; }
table.facts td { padding:4px 0; }
.num { direction:ltr; unicode-bidi:embed; }
.ltr { direction:ltr; unicode-bidi:embed; text-align:left; }
code, .mono { font-family: Consolas, "Courier New", monospace; font-size:.88rem; direction:ltr; unicode-bidi:embed; }
.chart-wrap { direction:ltr; }
svg.chart { display:block; max-width:100%; }
svg.ratio { vertical-align:middle; }
.pager { display:flex; gap:12px; margin-top:12px; }
.filters { margin-bottom:12px; }
.qr img { width:220px; height:220px; image-rendering:pixelated; background:#fff; border:1px solid var(--line); }
.secret { word-break:break-all; background:#f3f4f7; padding:6px 10px; border-radius:6px; display:block; }
details summary { cursor:pointer; color:var(--accent); }