* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0f172a; --panel:#1e293b; --panel2:#273449; --line:#334155;
  --txt:#e2e8f0; --mut:#94a3b8; --acc:#38bdf8; --ok:#22c55e; --err:#ef4444;
  --warn:#f59e0b;
}
body { font:14px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--txt); }
header { background:var(--panel); border-bottom:1px solid var(--line); padding:14px 22px;
  display:flex; align-items:center; gap:14px; }
header h1 { font-size:17px; font-weight:600; }
header h1 span { color:var(--acc); }
header .who { margin-left:auto; color:var(--mut); font-size:13px; }
header button.logout { background:none; border:1px solid var(--line); color:var(--mut);
  padding:5px 12px; border-radius:6px; cursor:pointer; }
.wrap { max-width:980px; margin:0 auto; padding:22px; }
.layout { display:flex; align-items:flex-start; }
nav.side { width:190px; flex:0 0 190px; padding:18px 12px;
  border-right:1px solid var(--line); min-height:calc(100vh - 57px); }
nav.side button { display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--mut); padding:10px 14px; border-radius:8px; cursor:pointer; font-size:13.5px; margin-bottom:4px; }
nav.side button:hover { background:var(--panel); color:var(--txt); }
nav.side button.active { background:var(--acc); color:#04263a; font-weight:600; }
main { flex:1; padding:22px; max-width:900px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-bottom:18px; }
.card h2 { font-size:15px; margin-bottom:4px; }
.card .sub { color:var(--mut); font-size:12.5px; margin-bottom:16px; }
label { display:block; font-size:12px; color:var(--mut); margin:10px 0 4px; }
input,select { width:100%; background:var(--panel2); border:1px solid var(--line);
  color:var(--txt); padding:9px 11px; border-radius:8px; font-size:13px; }
input:focus,select:focus { outline:none; border-color:var(--acc); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
button.primary { background:var(--acc); color:#04263a; border:none; padding:10px 18px;
  border-radius:8px; font-weight:600; cursor:pointer; margin-top:16px; font-size:13px; }
button.ghost { background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  padding:7px 13px; border-radius:7px; cursor:pointer; font-size:12.5px; }
button.danger { color:var(--err); border-color:var(--err); }
.sys { border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px;
  background:var(--panel2); }
.sys .top { display:flex; align-items:center; gap:10px; }
.sys .badge { font-size:11px; padding:2px 9px; border-radius:20px; font-weight:600; }
.badge.source { background:#0c4a6e; color:#7dd3fc; }
.badge.target { background:#3b0764; color:#e9d5ff; }
.badge.direct { background:#14532d; color:#86efac; }
.badge.saprouter { background:#78350f; color:#fcd34d; }
.badge.vpn { background:#1e3a8a; color:#93c5fd; }
.sys .meta { color:var(--mut); font-size:12px; margin-top:5px; }
.sys .actions { margin-left:auto; display:flex; gap:8px; }
.result { font-size:12.5px; margin-top:8px; padding:8px 11px; border-radius:7px; }
.result.ok { background:#052e16; color:var(--ok); border:1px solid #14532d; }
.result.err { background:#3f1212; color:var(--err); border:1px solid #7f1d1d; }
.result.warn { background:#3a2c08; color:var(--warn); border:1px solid #78350f; }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th,td { text-align:left; padding:7px 9px; border-bottom:1px solid var(--line); }
th { color:var(--mut); font-weight:500; }
.pill { font-size:11px; padding:2px 9px; border-radius:20px; font-weight:600; }
.pill.completed,.pill.verify-ok,.pill.ok,.pill.done { background:#052e16; color:var(--ok); }
.pill.running,.pill.selecting,.pill.queued { background:#0c2a4a; color:var(--acc); }
.pill.failed,.pill.WRITE-ERR,.pill.ERROR,.pill.MISMATCH,.pill.DEL-ERR { background:#3f1212; color:var(--err); }
.pill.deleted { background:#3a2c08; color:var(--warn); }
.pill.would-delete { background:#0c2a4a; color:var(--acc); }
.pill.fn-copy { background:#0c2a4a; color:var(--acc); }
.pill.fn-delete { background:#3a1212; color:var(--err); }
.pill.no-data { background:#3a2c08; color:var(--warn); }
.muted { color:var(--mut); }
.hide { display:none; }
.center { max-width:380px; margin:60px auto; }
.toggle { display:flex; gap:8px; font-size:12px; margin-top:8px; }
.toggle a { color:var(--acc); cursor:pointer; }
.kv { display:flex; gap:8px; font-size:12px; color:var(--mut); margin-top:3px; }
.bar { height:6px; background:var(--panel2); border-radius:4px; overflow:hidden; margin-top:6px; }
.bar > div { height:100%; background:var(--acc); }
.flex { display:flex; gap:10px; align-items:center; }
.note { font-size:12px; color:var(--warn); background:#3a2c08; border:1px solid #78350f;
  padding:9px 12px; border-radius:8px; margin-bottom:14px; }
#cFilters { display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.fld label { color:var(--txt); font-weight:600; }                 /* description: bright */
.fld label .code { color:var(--acc); font-size:11px; font-weight:400;
  font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--panel2);
  padding:1px 6px; border-radius:5px; margin-left:4px; }          /* field name: accent code-tag */
.fld input[type=date] { width:auto; }
.fld .flex span { color:var(--mut); font-size:12px; }
input[type=date] { color-scheme:dark; }