@font-face { font-family: "Inter"; src: url(/fonts/inter.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
:root { --paper:#f6f3ee; --ink:#16181d; --muted:#5d606a; --line:#e2dbd0; --cobalt:#1f3cff; --soft:#e7eaff; --mint:#7cf5c4; --ok:#067647; --danger:#b42318; --warn:#9a6700; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.55 Inter, system-ui, sans-serif; color:var(--ink); background:var(--paper); }
a { color: var(--cobalt); }
:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.layout { display:grid; grid-template-columns: 240px 1fr; min-height:100vh; }
.side { background:var(--ink); color:#c9ccd5; padding:20px 14px; position:sticky; top:0; height:100vh; overflow:auto; }
.side .brand { color:#fff; font-weight:800; font-size:1.15rem; padding:4px 10px 18px; display:block; text-decoration:none; }
.side .brand span { color:var(--mint); }
.side nav a { display:block; color:#d7d9df; text-decoration:none; padding:8px 10px; border-radius:8px; font-size:.93rem; }
.side nav a:hover, .side nav a.on { background:#262a33; color:#fff; }
.side h3 { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#7d818c; margin:18px 10px 6px; }
.side .me { border-top:1px solid #30343e; margin-top:20px; padding:14px 10px 0; font-size:.85rem; }
.side .me button { background:none; border:1px solid #4a4e59; color:#e6e7eb; border-radius:8px; padding:6px 10px; cursor:pointer; margin-top:8px; font:inherit; }
main { padding:28px clamp(16px,3vw,40px); max-width:1280px; }
h1 { font-size:1.7rem; letter-spacing:-.02em; margin:0 0 6px; }
h2 { font-size:1.2rem; margin:28px 0 10px; }
.sub { color:var(--muted); margin:0 0 20px; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:16px; }
.grid { display:grid; gap:14px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.kpi b { display:block; font-size:1.9rem; letter-spacing:-.03em; }
.kpi span { color:var(--muted); font-size:.88rem; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; font-size:.92rem; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:#f1ede6; font-weight:600; font-size:.82rem; color:#3a3d45; }
tr:last-child td { border-bottom:0; }
.tag { display:inline-block; padding:2px 8px; border-radius:99px; font-size:.78rem; font-weight:600; background:#efe9e0; }
.tag.ok { background:#e6f6ee; color:var(--ok); } .tag.bad { background:#fdecea; color:var(--danger); } .tag.warn { background:#fff4d6; color:var(--warn); } .tag.info { background:var(--soft); color:var(--cobalt); }
.btn { display:inline-flex; align-items:center; gap:6px; background:var(--cobalt); color:#fff; border:2px solid var(--cobalt); border-radius:99px; padding:8px 16px; font:600 .9rem Inter, sans-serif; cursor:pointer; text-decoration:none; }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--ink); }
.btn.danger { background:var(--danger); border-color:var(--danger); }
.btn.sm { padding:4px 10px; font-size:.82rem; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
label { font-weight:600; font-size:.88rem; display:block; margin-bottom:4px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=date], input[type=datetime-local], input[type=search], select, textarea { width:100%; font:inherit; padding:9px 11px; border:2px solid var(--line); border-radius:9px; background:#fff; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--cobalt); }
textarea { min-height:120px; font-family: ui-monospace, Menlo, monospace; font-size:.86rem; }
.field { margin-bottom:12px; }
.flash { padding:12px 14px; border-radius:10px; margin-bottom:16px; }
.flash.ok { background:#e6f6ee; color:var(--ok); } .flash.err { background:#fdecea; color:var(--danger); } .flash.info { background:var(--soft); color:var(--cobalt); }
.muted { color:var(--muted); } .small { font-size:.84rem; }
.info { display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--soft); color:var(--cobalt); font-size:.72rem; font-weight:700; cursor:help; position:relative; border:0; vertical-align:middle; }
.info-pop { position:absolute; z-index:5; left:50%; top:24px; transform:translateX(-50%); width:280px; background:var(--ink); color:#fff; padding:10px 12px; border-radius:10px; font-weight:400; font-size:.82rem; line-height:1.45; text-align:left; display:none; }
.info:hover .info-pop, .info:focus .info-pop { display:block; }
.bar { height:8px; background:#efe9e0; border-radius:8px; overflow:hidden; } .bar i { display:block; height:100%; background:var(--cobalt); }
.auth { min-height:100vh; display:grid; place-items:center; padding:20px; }
.auth .card { width:min(100%, 440px); padding:28px; }
.auth .brand { font-weight:800; font-size:1.3rem; margin-bottom:6px; } .auth .brand span { color:var(--cobalt); }
.codes { font-family: ui-monospace, Menlo, monospace; display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#f1ede6; padding:12px; border-radius:10px; }
.qr svg { width:200px; height:200px; }
pre { white-space:pre-wrap; background:#f1ede6; padding:12px; border-radius:10px; font-size:.85rem; }
@media (max-width: 900px) { .layout { grid-template-columns:1fr; } .side { position:static; height:auto; } .g3, .g4 { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px) { .g2, .g3, .g4 { grid-template-columns:1fr; } }
.pagination{display:flex;gap:8px;list-style:none;padding:0;margin:14px 0}.pagination li a,.pagination li span{display:inline-block;padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none}