/* Orbit — compact UI. Light by default; dark via [data-theme="dark"]. */
:root, [data-theme="light"]{
  --bg:#f5f6f8; --bg2:#eef0f3; --card:#ffffff; --line:#e4e7ec; --line2:#d5dae1;
  --text:#1b1f27; --muted:#5a6472; --dim:#98a0ac;
  --accent:#2563eb; --accent-ink:#fff;
  --ok:#1a7f37; --warn:#9a6a00; --danger:#c4362e; --expired:#6f42c1; --unknown:#6b7280;
  --shadow:0 1px 2px rgba(20,24,33,.05);
}
[data-theme="dark"]{
  --bg:#0e1014; --bg2:#12151b; --card:#171a21; --line:#252a33; --line2:#333a45;
  --text:#e7e9ef; --muted:#8b93a5; --dim:#5c6472;
  --accent:#3b82f6; --accent-ink:#fff;
  --ok:#5cd67a; --warn:#f0c750; --danger:#ff8a82; --expired:#c4a5ff; --unknown:#aab2c0;
  --shadow:0 1px 0 rgba(255,255,255,.02);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--text);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
h1{font-size:19px; margin:0} h2{margin:0}

/* icons */
.ic{width:16px; height:16px; flex:0 0 auto; vertical-align:-3px}
.ic.xs{width:12px; height:12px; vertical-align:-1px}
.ic.sm{width:15px; height:15px}

/* ---- Header ---- */
.topbar{display:flex; align-items:center; gap:16px; padding:0 18px; height:52px;
  background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.brand{font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:7px; white-space:nowrap}
.brand-icon .ic{width:20px; height:20px; color:var(--accent)}
.modnav{display:flex; gap:2px; overflow:auto}
.modlink{display:flex; align-items:center; gap:6px; padding:6px 11px; border-radius:8px; color:var(--muted); font-weight:500; white-space:nowrap}
.modlink:hover{background:var(--bg2); color:var(--text)}
.modlink.active{background:var(--bg2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line)}
.actions{margin-left:auto; display:flex; gap:6px}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:8px; border:1px solid var(--line2); background:var(--card); color:var(--text); cursor:pointer}
.icon-btn.sm{width:30px; height:30px}
.icon-btn:hover{border-color:var(--muted)}
.t-light{display:none} [data-theme="dark"] .t-light{display:inline-flex} [data-theme="dark"] .t-dark{display:none}

/* ---- Sub-nav (module views) ---- */
.subnav{background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:52px; z-index:15}
.subnav-inner{max-width:920px; margin:0 auto; padding:0 18px; display:flex; align-items:center; gap:8px}
.subtabs{display:flex; gap:4px; overflow-x:auto; flex:1; scrollbar-width:thin; -webkit-overflow-scrolling:touch}
.subtab{display:flex; align-items:center; gap:7px; padding:11px 12px; color:var(--muted); font-weight:500;
  font-size:13.5px; border-bottom:2px solid transparent; white-space:nowrap}
.subtab:hover{color:var(--text)}
.subtab.active{color:var(--accent); border-bottom-color:var(--accent)}
.subhelp{flex:0 0 auto; border:none; background:transparent; color:var(--muted)}
.subhelp:hover{color:var(--accent); border:none}

/* ---- auth pages ---- */
.auth-body{background:var(--bg)}
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px}
.auth-card{background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  width:100%; max-width:380px; padding:26px}
.auth-brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px; margin-bottom:18px}
.auth-brand .brand-icon .ic{width:22px; height:22px; color:var(--accent)}
.auth-h{font-size:18px; margin:0 0 4px}
.auth-sub{color:var(--muted); font-size:12.5px; margin:0 0 16px}
.auth-form{display:flex; flex-direction:column; gap:12px; margin-top:12px}
.auth-btn{justify-content:center; margin-top:4px}
.auth-err{background:color-mix(in srgb,var(--danger) 12%,transparent); border:1px solid var(--danger);
  color:var(--danger); padding:8px 12px; border-radius:9px; font-size:13px; margin-bottom:6px}
.auth-ok-box{background:color-mix(in srgb,var(--ok) 12%,transparent); border:1px solid var(--ok);
  color:var(--ok); padding:8px 12px; border-radius:9px; font-size:13px; margin-bottom:6px}
.auth-links{display:flex; justify-content:space-between; margin-top:16px; font-size:13px}
.auth-links a{color:var(--muted); display:inline-flex; align-items:center; gap:5px}
.auth-links a:hover{color:var(--text)}

/* ---- Layout ---- */
.wrap{max-width:920px; margin:0 auto; padding:22px 18px 40px}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:16px; flex-wrap:wrap}
.sub{color:var(--muted); margin:3px 0 0; font-size:12.5px}
.dim{color:var(--dim)}
.head-actions{display:flex; gap:8px}
.back-link{color:var(--muted); font-size:12.5px; display:inline-flex; align-items:center; gap:5px; margin-bottom:4px}
.back-link:hover{color:var(--text)}
.flash{display:flex; align-items:center; gap:8px; background:color-mix(in srgb,var(--ok) 14%,transparent);
  border:1px solid var(--ok); color:var(--ok); padding:8px 12px; border-radius:9px; margin-bottom:14px; font-size:13px}
.flash .ic{color:var(--ok)}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line2); background:var(--card);
  color:var(--text); padding:8px 14px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,var(--line2))}
.btn.danger:hover{border-color:var(--danger)}
.btn[disabled]{opacity:.55; cursor:default}

/* ---- Progress ---- */
.progress{position:relative; height:30px; background:var(--bg2); border:1px solid var(--line);
  border-radius:9px; overflow:hidden; margin-bottom:6px}
.progress-fill{position:absolute; inset:0 auto 0 0; width:0; background:color-mix(in srgb,var(--accent) 22%,transparent); transition:width .2s}
.progress-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12.5px; color:var(--muted)}

/* ---- Pills ---- */
.pills{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.pill{display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line);
  border-radius:999px; padding:5px 11px; font-size:12.5px}
.pill .dot{width:8px; height:8px; border-radius:50%; background:var(--c)}
.s-ok{--c:var(--ok)} .s-warn{--c:var(--warn)} .s-danger{--c:var(--danger)}
.s-expired{--c:var(--expired)} .s-unknown{--c:var(--unknown)}

/* ---- Card + table ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}
.card.pad{padding:16px}
.table-wrap{overflow:auto}
table.grid{width:100%; border-collapse:collapse; font-size:13.5px}
.grid th,.grid td{text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
.grid th{color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.grid tr:last-child td{border-bottom:none}
.grid tbody tr:hover{background:var(--bg2)}
.domain{font-weight:600}
.note{font-weight:400; font-size:12px; color:var(--muted); margin-top:2px}
.days{font-weight:700; white-space:nowrap}
.days.neg{color:var(--expired)}
.reg a{color:var(--accent); display:inline-flex; align-items:center; gap:4px}
.pad{padding:16px}
.tag{display:inline-block; padding:2px 8px; border-radius:6px; font-size:11px; font-weight:700; text-transform:uppercase;
  color:var(--c); background:color-mix(in srgb,var(--c) 16%,transparent)}
.col-edit{width:36px; text-align:right}
.col-check{width:34px}
.foot-note{margin-top:12px; font-size:12px}

/* ---- Settings / forms ---- */
.settings{display:flex; flex-direction:column; gap:16px}
fieldset.card{border:1px solid var(--line); padding:16px; margin:0}
legend{padding:0 8px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:7px}
legend .ic{color:var(--accent)}
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:12px}
.field:last-child{margin-bottom:0}
.field>span{font-size:12.5px; color:var(--muted)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px}
input[type=text],input[type=number],input[type=date],input[type=password],textarea,select{
  background:var(--bg2); border:1px solid var(--line2); color:var(--text); border-radius:8px; padding:8px 10px; font:inherit; width:100%}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent)}
input.filled{border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,var(--bg2)); transition:background .3s,border-color .3s}
textarea{resize:vertical; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.hint{font-size:11.5px; color:var(--dim); line-height:1.45}
.check{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-top:4px; flex-wrap:wrap}
.check .mini{width:64px}
.chan-label{font-size:12.5px; font-weight:700; margin:14px 0 8px; padding-top:12px; border-top:1px solid var(--line)}
.chan-label:first-of-type{border-top:none; padding-top:0; margin-top:4px}
.wa{margin-top:12px; border-top:1px solid var(--line); padding-top:10px}
.wa summary{cursor:pointer; color:var(--muted); font-size:12.5px}
.wa[open] summary{margin-bottom:10px}
.actions-row{display:flex; gap:10px; flex-wrap:wrap}

/* ---- chips / muted rows ---- */
.chip{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:middle}
.chip.auto{color:var(--ok); background:color-mix(in srgb,var(--ok) 15%,transparent)}
.chip.mute{color:var(--muted); background:color-mix(in srgb,var(--muted) 15%,transparent)}
.chip .ic{width:11px; height:11px}
tr.muted-row{opacity:.6}

/* ---- help modal ---- */
.overlay{position:fixed; inset:0; background:rgba(8,10,14,.55); z-index:50; display:flex; align-items:flex-start;
  justify-content:center; padding:60px 16px; overflow:auto}
.overlay[hidden]{display:none}
.modal{background:var(--card); border:1px solid var(--line2); border-radius:14px; max-width:560px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--line)}
.modal-head h2{font-size:16px; display:flex; align-items:center; gap:8px}
.modal-head .ic{color:var(--accent)}
.modal-body{padding:16px 18px}
.modal-body h3{font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:16px 0 8px}
.muted{color:var(--muted)}
.legend{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13px}
.legend li{color:var(--muted); line-height:1.45}
.legend .tag{margin-right:6px}
code{background:var(--bg2); border:1px solid var(--line); border-radius:5px; padding:1px 5px; font-size:12px}

.foot{max-width:920px; margin:0 auto; padding:16px 18px 30px; color:var(--dim); font-size:12px}

/* ---- Responsive ---- */
@media(max-width:760px){
  .col-extra{display:none}
  .grid2{grid-template-columns:1fr}
  .mod-name{display:none}
  .topbar{gap:10px; padding:0 12px}
  .wrap{padding:16px 12px 40px}
  .subnav-inner{padding:0 12px}
  .page-head{align-items:flex-start}
  .head-actions{width:100%}
  .head-actions .btn{flex:1; justify-content:center}
  .modal{margin:0 auto}
}
@media(max-width:480px){ .col-date{display:none} }