:root { --fg:#1a1a1a; --muted:#667; --line:#e2e2e8; --accent:#2451b3; --bg:#f7f7fa; --danger:#b3242d; --ok:#1a7f37; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; color:var(--fg); background:var(--bg); }
header { display:flex; justify-content:space-between; align-items:center; background:#fff; border-bottom:1px solid var(--line); padding:.6rem 1.2rem; }
nav a { margin-right:1rem; text-decoration:none; color:var(--accent); }
nav .brand { font-weight:700; margin-right:1.6rem; }
.logout { display:flex; gap:.8rem; align-items:center; }
.logout .who { color:var(--muted); font-size:.9rem; }
main { max-width: 72rem; margin: 1.5rem auto; padding: 0 1.2rem; }
h1 { font-size:1.4rem; } h2 { font-size:1.1rem; margin-top:2rem; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); }
th, td { text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--line); font-size:.92rem; vertical-align:middle; }
th { background:#fafafc; color:var(--muted); font-weight:600; }
tr:last-child td { border-bottom:none; }
form.inline { display:inline; }
button { font: inherit; padding:.35rem .7rem; border:1px solid var(--line); border-radius:4px; background:#fff; cursor:pointer; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { color:var(--danger); border-color:var(--danger); background:#fff; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=datetime-local], select { font:inherit; padding:.4rem .55rem; border:1px solid var(--line); border-radius:4px; }
.created { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.created .createdurl { flex:1; min-width:16rem; max-width:28rem; background:#fff; color:var(--fg); }
.created a { color:var(--accent); }
.flash { background:#e8f5ec; border:1px solid var(--ok); color:var(--ok); padding:.6rem .9rem; border-radius:4px; margin-bottom:1rem; overflow-wrap:anywhere; }
.error { background:#fdeaea; border:1px solid var(--danger); color:var(--danger); padding:.6rem .9rem; border-radius:4px; margin-bottom:1rem; }
.cards { display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0 2rem; }
.card { background:#fff; border:1px solid var(--line); border-radius:6px; padding:1rem 1.3rem; min-width:11rem; }
.card .num { font-size:1.7rem; font-weight:700; }
.card .label { color:var(--muted); font-size:.85rem; }
.muted { color:var(--muted); }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:99px; font-size:.78rem; border:1px solid var(--line); }
.badge.on { color:var(--ok); border-color:var(--ok); }
.badge.off { color:var(--muted); }
.badge.blocked { color:var(--danger); border-color:var(--danger); }
.login-box { max-width:22rem; margin:14vh auto; background:#fff; border:1px solid var(--line); border-radius:8px; padding:1.6rem; }
.login-box h1 { margin-top:0; }
.login-box label { display:block; margin:.8rem 0 .25rem; font-size:.9rem; color:var(--muted); }
.login-box input { width:100%; }
.login-box button { width:100%; margin-top:1.2rem; }
.formrow { display:flex; gap:.6rem; align-items:end; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:6px; padding:.9rem; margin:.8rem 0 1.4rem; }
.formrow label { display:block; font-size:.82rem; color:var(--muted); margin-bottom:.2rem; }
.pager { margin:1rem 0; display:flex; gap:.8rem; }
.pager a { color:var(--accent); text-decoration:none; }
code { background:#f0f0f4; padding:.1rem .35rem; border-radius:3px; }
.target { max-width:22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:bottom; }
.selfcenter { align-self:center; }
.chartbox { background:#fff; border:1px solid var(--line); border-radius:6px; padding:1rem; overflow-x:auto; }