:root { color-scheme: light; --ink:#20211f; --muted:#77766f; --paper:#f5f2eb; --card:#fffdf9; --line:#e7e0d6; --red:#a63d35; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 8% 8%,#fffaf0 0,transparent 35%),var(--paper); font-family:Manrope,"Microsoft YaHei",sans-serif; }
.admin-shell { max-width:1240px; margin:0 auto; padding:34px; }
.panel { background:var(--card); border:1px solid #ebe4da; border-radius:16px; box-shadow:0 11px 32px #5d4c3310; }
.login-panel { max-width:430px; margin:10vh auto 0; padding:28px; }
.eyebrow { color:var(--muted); font:500 10px "DM Mono",monospace; letter-spacing:.16em; }
h1 { margin:8px 0; font:900 25px "Noto Serif SC","Microsoft YaHei",sans-serif; } p { color:var(--muted); font-size:13px; line-height:1.7; }
form { display:grid; gap:9px; margin-top:22px; } label { color:var(--muted); font-size:12px; } input { width:100%; height:42px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:#fff; font:14px Manrope,sans-serif; } button { height:40px; padding:0 16px; border:0; border-radius:8px; color:#fffaf3; background:#272824; font:700 12px Manrope,"Microsoft YaHei",sans-serif; cursor:pointer; } .secondary { color:#4f514b; border:1px solid var(--line); background:#fff; } .button-link { display:inline-flex; height:40px; padding:0 16px; align-items:center; justify-content:center; border-radius:8px; text-decoration:none; font:700 12px Manrope,"Microsoft YaHei",sans-serif; }
.dashboard-head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:20px; } .head-actions { display:flex; align-items:center; gap:8px; } #updatedAt { color:#99938a; font-size:11px; }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; } .metric { padding:17px; border:1px solid var(--line); border-radius:10px; background:#fffdf9; } .metric span { display:block; color:var(--muted); font-size:11px; } .metric strong { display:block; margin-top:7px; color:var(--red); font:700 22px "DM Mono",monospace; }
.table-panel { overflow:hidden; } .table-scroll { overflow:auto; } table { width:100%; border-collapse:collapse; min-width:850px; } th,td { padding:13px 14px; border-bottom:1px solid #eee8df; text-align:left; white-space:nowrap; font-size:12px; } th { color:var(--muted); background:#faf6f0; font-size:11px; } td { color:#4f514b; } .status-online { color:#66865e; } .status-offline { color:#99938a; } .empty { padding:36px; color:#aaa49b; text-align:center; } .privacy-note { font-size:11px; }
.error { min-height:19px; margin-top:10px; color:#b8322c; font-size:12px; } .hidden { display:none !important; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:16px 0 4px; } .toolbar input { flex:1; min-width:180px; max-width:420px; } button[aria-pressed="true"] { border-color:var(--red); color:var(--red); } .password-panel { max-width:480px; padding:20px; } .password-panel h2 { font-size:16px; margin:0 0 10px; } td small { color:var(--muted); } .visitor-code { color:var(--muted); font-size:10px; }
@media (max-width:620px) { .admin-shell { padding:18px 10px; } .dashboard-head { align-items:flex-start; flex-direction:column; } .head-actions { width:100%; flex-wrap:wrap; } .summary-grid { grid-template-columns:repeat(2,1fr); } .metric strong { font-size:18px; } }