:root { --bg:#f5f6f8; --card:#fff; --text:#1f2933; --muted:#6b7785; --line:#dde2e8; --accent:#1f497d; --ok:#1e7b3a; --err:#b3261e; --warn:#a15c00; }
@media (prefers-color-scheme: dark) { :root { --bg:#14181d; --card:#1d232a; --text:#e6e9ed; --muted:#9aa5b1; --line:#2c353f; --accent:#6ea3e0; --ok:#5bc27a; --err:#f0877f; --warn:#e0a24a; } }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.45 -apple-system, "Segoe UI", Arial, sans-serif; background:var(--bg); color:var(--text); }
header { background:var(--card); border-bottom:1px solid var(--line); padding:0 20px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
header .brand { font-weight:700; color:var(--accent); padding:14px 0; }
header nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; }
header nav a { color:var(--text); text-decoration:none; padding:14px 10px; }
header nav a:hover { color:var(--accent); }
header form { margin:0; }
main { padding:20px; max-width:1300px; margin:0 auto; }
h1 { font-size:20px; margin:0 0 14px; } h2 { font-size:16px; margin:22px 0 10px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
table { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:rgba(127,127,127,.08); font-weight:600; white-space:nowrap; }
.scroll { overflow-x:auto; }
input, select, button, textarea { font:inherit; padding:6px 9px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text); }
input[type=text], input[type=password], input[type=email], input[type=date] { min-width:150px; }
button { cursor:pointer; background:var(--accent); color:#fff; border-color:var(--accent); }
button.secondary { background:transparent; color:var(--text); border-color:var(--line); }
button.danger { background:transparent; color:var(--err); border-color:var(--err); }
form.inline { display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; margin:2px 0; }
form.row { display:flex; gap:8px; flex-wrap:wrap; align-items:end; }
label { display:flex; flex-direction:column; gap:3px; color:var(--muted); font-size:12px; }
.flash { padding:9px 12px; border-radius:6px; margin-bottom:10px; border:1px solid var(--line); }
.flash.ok { border-color:var(--ok); color:var(--ok); } .flash.error { border-color:var(--err); color:var(--err); }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--line); }
.badge.active, .badge.ok { color:var(--ok); border-color:var(--ok); } .badge.pending { color:var(--warn); border-color:var(--warn); }
.badge.inactive, .badge.error { color:var(--muted); } .badge.manual { color:var(--warn); border-color:var(--warn); }
.muted { color:var(--muted); } .err { color:var(--err); } code, .mono { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12.5px; word-break:break-all; }
.login { max-width:340px; margin:12vh auto; } .login form { display:flex; flex-direction:column; gap:10px; }
.pager { display:flex; gap:10px; align-items:center; margin-top:10px; }