:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --border:#2b3444;
  --text:#e6edf3; --soft:#9aa7b8; --accent:#3b82f6; --accent2:#2563eb;
  --ok:#22c55e; --ko:#ef4444; --warn:#f59e0b; --radius:10px;
  --shadow:0 6px 24px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f4f6fb; --panel:#ffffff; --panel2:#f0f3f9; --border:#dde3ee;
    --text:#0d1117; --soft:#5a6675; --shadow:0 6px 24px rgba(20,30,60,.10); }
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{ background:var(--bg); color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
#app{ height:100vh; }
a{ color:var(--accent); text-decoration:none; }
button{ font:inherit; cursor:pointer; }
input,select,textarea{ font:inherit; }

/* ---- Login ---- */
.login-wrap{ display:grid; place-items:center; height:100vh; padding:24px; }
.login-card{ width:min(380px,100%); background:var(--panel); border:1px solid var(--border);
  border-radius:16px; padding:28px; box-shadow:var(--shadow); }
.login-card h1{ margin:0 0 4px; font-size:20px; }
.login-card p{ margin:0 0 20px; color:var(--soft); font-size:13px; }
.login-card .brand{ font-size:26px; }

/* ---- Shell ---- */
.shell{ display:grid; grid-template-columns:238px 1fr; height:100vh; }
.side{ background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; }
.side .logo{ padding:18px 20px; font-weight:700; font-size:16px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--border); }
.side nav{ padding:12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.side nav a{ padding:10px 12px; border-radius:8px; color:var(--soft); font-weight:600; display:flex; gap:10px; align-items:center; }
.side nav a:hover{ background:var(--panel2); color:var(--text); }
.side nav a.active{ background:var(--accent); color:#fff; }
.side .foot{ padding:14px; border-top:1px solid var(--border); font-size:12px; color:var(--soft); }
.side .foot button{ margin-top:8px; width:100%; }
.main{ overflow:auto; padding:24px 28px; }
.page-h{ display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.page-h h2{ margin:0; font-size:20px; }
.page-h .sp{ flex:1; }
.crumb{ color:var(--soft); font-size:13px; margin-bottom:14px; }
.crumb a{ font-weight:600; }

/* ---- Controls ---- */
.btn{ background:var(--panel2); color:var(--text); border:1px solid var(--border);
  padding:8px 14px; border-radius:8px; font-weight:600; }
.btn:hover{ border-color:var(--accent); }
.btn.pri{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.pri:hover{ background:var(--accent2); }
.btn.danger{ color:var(--ko); border-color:transparent; background:transparent; }
.btn.small{ padding:5px 10px; font-size:12.5px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.search{ display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border);
  border-radius:9px; padding:8px 12px; min-width:240px; }
.search input{ background:transparent; border:0; outline:none; color:var(--text); width:100%; }
.field{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.field label{ font-size:12.5px; color:var(--soft); font-weight:600; }
.field input,.field select{ background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:9px 11px; color:var(--text); outline:none; }
.field input:focus,.field select:focus{ border-color:var(--accent); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:720px){ .grid2{ grid-template-columns:1fr; } .shell{ grid-template-columns:1fr; } .side{ display:none; } }

/* ---- Cards ---- */
.card{ background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:18px; }
.card h3{ margin:0 0 4px; font-size:15px; display:flex; align-items:center; gap:10px; }
.card .card-sub{ color:var(--soft); font-size:12.5px; margin:0 0 14px; }
.card-h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card-h .sp{ flex:1; }

/* ---- Lists ---- */
.list{ list-style:none; margin:0; padding:0; }
.row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--border);
  border-radius:9px; margin-bottom:8px; background:var(--panel); }
.row:hover{ border-color:var(--accent); }
.row .grow{ flex:1; min-width:0; }
.row .title{ font-weight:600; }
.row .meta{ color:var(--soft); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row.click{ cursor:pointer; }
.scroll{ max-height:60vh; overflow:auto; padding-right:4px; }
.sentinel{ height:1px; }
.empty,.loading{ color:var(--soft); text-align:center; padding:22px; }

/* ---- Badges ---- */
.badge{ font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:999px; white-space:nowrap; }
.badge.ok{ background:rgba(34,197,94,.16); color:var(--ok); }
.badge.ko{ background:rgba(239,68,68,.16); color:var(--ko); }
.badge.muted{ background:var(--panel2); color:var(--soft); }
.badge.warn{ background:rgba(245,158,11,.16); color:var(--warn); }
.badge.pri{ background:rgba(59,130,246,.16); color:var(--accent); }
.count{ color:var(--soft); font-size:13px; font-weight:600; }

/* ---- Toast + modal ---- */
.toasts{ position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast{ background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--accent);
  padding:11px 14px; border-radius:8px; box-shadow:var(--shadow); max-width:360px; }
.toast.ok{ border-left-color:var(--ok); }
.toast.ko{ border-left-color:var(--ko); }
.modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.5); display:grid; place-items:center; z-index:40; padding:20px; }
.modal{ background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:22px;
  width:min(560px,100%); box-shadow:var(--shadow); max-height:88vh; overflow:auto; }
.modal h3{ margin:0 0 14px; }
.modal .actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:16px; }
.err{ color:var(--ko); font-size:13px; margin-top:8px; }
.spin{ display:inline-block; width:15px; height:15px; border:2px solid var(--border);
  border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin{ to{ transform:rotate(360deg); } }