:root { color-scheme: light; --ink:#17211b; --muted:#68736d; --line:#dce4df; --panel:#fff; --accent:#0f7b53; --soft:#edf8f3; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; color:var(--ink); background:#f4f7f5; }
header { height:64px; padding:0 max(24px,calc((100vw - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid var(--line); }
main { max-width:1180px; margin:auto; padding:30px 24px 60px; }
.brand { font-size:20px; font-weight:800; letter-spacing:-.04em; }
.safety { margin-left:12px; padding:4px 9px; border-radius:99px; color:#8a4d09; background:#fff5dc; font-size:12px; font-weight:650; }
.hero { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }
h1 { margin:2px 0 4px; font-size:32px; letter-spacing:-.04em; }
h2 { margin:0 0 14px; font-size:17px; }
.eyebrow { margin:0; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:.16em; }
.muted { color:var(--muted); }.small { font-size:12px; }.error { color:#b42318; min-height:20px; }
.counts { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:18px; }
.count,.panel { background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 3px 16px rgba(24,52,38,.035); }
.count { padding:14px; }.count b { display:block; font-size:23px; }.count span { color:var(--muted); font-size:12px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.span-2 { grid-column:span 2; }.panel { padding:20px; overflow:auto; }
table { width:100%; border-collapse:collapse; } th,td { padding:9px 8px; text-align:left; border-bottom:1px solid #edf0ee; white-space:nowrap; } th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
form { display:grid; gap:10px; margin-bottom:18px; } label { display:grid; gap:4px; color:var(--muted); font-size:12px; }
input,select,textarea { width:100%; border:1px solid #cfd9d3; border-radius:8px; padding:9px 10px; background:#fff; color:var(--ink); font:inherit; }
textarea { resize:vertical; font-family:ui-monospace,monospace; font-size:12px; }
button { border:0; border-radius:8px; padding:9px 13px; color:#fff; background:var(--accent); font-weight:700; cursor:pointer; }
.button-link { display:inline-block; border-radius:8px; padding:9px 13px; color:#fff; background:var(--accent); font-weight:700; text-decoration:none; }
button.secondary { margin-left:12px; color:var(--ink); background:#edf1ef; } button:disabled { opacity:.5; cursor:not-allowed; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.empty { color:var(--muted); padding:12px 0; }
#notice { position:fixed; right:24px; bottom:22px; padding:10px 14px; border-radius:9px; background:#183b2b; color:white; opacity:0; transition:.2s; } #notice.show { opacity:1; }
.login-page { min-height:100vh; display:grid; place-items:center; background:radial-gradient(circle at top,#e7f7ef,#f5f7f6 55%); }
.login-card { width:min(420px,calc(100% - 32px)); padding:34px; background:white; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 60px rgba(22,70,47,.12); }
.login-card h1 { font-size:26px; }.login-card form { margin-top:24px; }
@media (max-width:800px) { .counts { grid-template-columns:repeat(2,1fr); }.grid { grid-template-columns:1fr; }.span-2 { grid-column:span 1; } header { padding:0 16px; } }