:root { --ink:#12354a; --muted:#5f7f91; --line:#b8d2df; --paper:#eaf6fb; --card:#f8fcfe; --accent:#237a9b; --good:#2d8a68; --bad:#c75b5b; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font:15px 'DM Sans','Segoe UI',sans-serif; background:radial-gradient(circle at 80% 0%,#b9e3ee 0,transparent 38%),var(--paper); }
.shell { width:min(1180px,calc(100% - 32px)); margin:auto; padding:36px 0 60px; }
.topbar { display:flex; justify-content:space-between; align-items:end; gap:20px; border-bottom:3px solid var(--ink); padding-bottom:18px; }
.eyebrow { margin:0 0 7px; color:var(--accent); font:700 11px ui-monospace,Consolas,monospace; letter-spacing:.12em; }
h1,h2,p { margin:0; } h1 { font-size:clamp(2rem,5vw,3rem); } h2 { font-size:20px; }
.admin-user { display:flex; align-items:center; gap:10px; color:var(--muted); font:700 12px ui-monospace,Consolas,monospace; }
button { min-height:44px; border:1px solid var(--ink); background:#8fcfe3; color:var(--ink); padding:9px 12px; font:700 12px ui-monospace,Consolas,monospace; cursor:pointer; }
button:hover { background:#b8e2ee; } button:disabled { opacity:.55; cursor:not-allowed; }
.panel { margin-top:22px; border:1px solid var(--line); border-left:6px solid var(--accent); background:var(--card); padding:20px; box-shadow:5px 5px 0 rgba(18,53,74,.12); }
.login-panel { max-width:480px; } form { display:grid; gap:14px; margin-top:18px; } label { display:grid; gap:6px; color:var(--muted); font-weight:700; } input { padding:10px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.actions { display:flex; align-items:center; gap:12px; margin:22px 0 14px; } .message { color:var(--muted); } .message.success { color:var(--good); } .message.error { color:var(--bad); }
.metrics-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.metric { border:1px solid var(--line); background:var(--card); padding:14px; } .metric span { display:block; color:var(--muted); font-size:11px; } .metric strong { display:block; margin-top:8px; font-size:18px; }
.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; } table { width:100%; border-collapse:collapse; } th,td { text-align:left; border-top:1px solid var(--line); padding:10px 8px; vertical-align:middle; } th { color:var(--muted); font-size:11px; text-transform:uppercase; } .badge,.status { display:inline-block; padding:3px 6px; font-size:10px; font-weight:700; } .badge { background:#d9eef6; color:var(--accent); } .status.active { color:var(--good); } .status.inactive { color:var(--bad); }
@media (max-width:900px) { .metrics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px) {
	body { font-size:16px; }
	.shell { width:min(100% - 20px,1180px); padding:20px 0 36px; }
	.topbar { align-items:stretch; flex-direction:column; gap:14px; }
	.admin-user { width:100%; justify-content:space-between; gap:8px; }
	.admin-user button { flex:0 0 auto; }
	.actions { align-items:stretch; flex-direction:column; margin:16px 0 12px; }
	.actions button { width:100%; }
	.metrics-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
	.metric { padding:12px 10px; min-height:82px; }
	.metric strong { font-size:16px; overflow-wrap:anywhere; }
	.panel { margin-top:14px; padding:14px; border-left-width:4px; }
	.section-heading { align-items:flex-start; flex-direction:column; }
	.table-wrap { overflow:visible; }
	table, thead, tbody, tr, td { display:block; width:100%; }
	thead { display:none; }
	tbody { display:grid; gap:10px; }
	tr { border:1px solid var(--line); background:var(--card); padding:8px 10px; }
	td { display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; padding:8px 0; text-align:right; }
	td::before { content:attr(data-label); color:var(--muted); font-size:11px; font-weight:700; text-align:left; }
	td:last-child { border-top:1px solid var(--line); padding-top:10px; }
	td:last-child button { width:100%; }
}