:root { --ink:#1f2933; --dim:#5b6b7c; --bg:#f4f6f8; --panel:#fff; --line:#d9e0e7; --accent:#1565c0; --ok:#2e7d32; --warn:#e65100; --danger:#c62828; --navy:#102a43; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 "Segoe UI", system-ui, sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
header.top { background:var(--navy); color:#fff; padding:0 20px; display:flex; align-items:center; gap:18px; height:52px; }
header.top .brand { font-weight:700; font-size:17px; color:#fff; }
header.top nav a { color:#cfe0f5; padding:6px 8px; border-radius:4px; }
header.top nav a.active, header.top nav a:hover { background:rgba(255,255,255,.12); color:#fff; text-decoration:none; }
header.top .who { margin-left:auto; color:#b2dfdb; font-size:13px; display:flex; gap:10px; align-items:center; }
header.top button.link { background:none; border:0; color:#cfe0f5; cursor:pointer; font:inherit; }
main { max-width:1200px; margin:0 auto; padding:20px; }
h1 { font-size:22px; margin:0 0 14px; } h2 { font-size:16px; margin:22px 0 8px; }
.cards { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:12px 16px; min-width:150px; }
.card .n { font-size:26px; font-weight:700; } .card .l { color:var(--dim); font-size:12.5px; }
.card.warn .n { color:var(--warn); } .card.danger .n { color:var(--danger); } .card.ok .n { color:var(--ok); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; background:var(--panel); }
th, td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--dim); font-weight:600; font-size:12.5px; background:#fafbfc; }
tr:hover td { background:#f7f9fb; }
.num { text-align:right; font-variant-numeric:tabular-nums; }
.mono { font-family:Consolas, monospace; }
.dim { color:var(--dim); } .small { font-size:12.5px; }
.tag { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:#e3eaf2; color:var(--ink); }
.tag.ok { background:#e3f2e4; color:var(--ok); } .tag.warn { background:#fdebd9; color:var(--warn); } .tag.danger { background:#fbe4e4; color:var(--danger); }
form.inline { display:inline; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
label { display:block; font-size:12.5px; color:var(--dim); margin-bottom:2px; }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:5px; background:#fff; min-width:120px; }
textarea { width:100%; min-height:60px; }
.field { margin-bottom:10px; }
button, .btn { font:inherit; padding:6px 14px; border-radius:5px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink); }
button.primary, .btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.ok { background:var(--ok); color:#fff; border-color:var(--ok); }
button.danger { background:#fff; color:var(--danger); border-color:var(--danger); }
button.small { padding:3px 9px; font-size:12.5px; }
.msg { padding:10px 14px; border-radius:6px; margin-bottom:14px; }
.msg.ok { background:#e3f2e4; color:var(--ok); } .msg.err { background:#fbe4e4; color:var(--danger); }
.code { font:22px/1.3 Consolas, monospace; letter-spacing:1px; background:#fff8e1; border:1px dashed var(--warn); padding:10px 14px; border-radius:6px; display:inline-block; }
.login { max-width:380px; margin:80px auto; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; }
.kv td:first-child { color:var(--dim); width:180px; }
@media (max-width:700px) { .grid2 { grid-template-columns:1fr; } header.top { flex-wrap:wrap; height:auto; padding:8px 12px; } }