/* ============================================================
 * Social Radar — Component utilities
 * 모든 변수는 tokens.css 의 :root 에서 옴.
 * ============================================================ */

/* ─── Type utils ─────────────────────────────────────────── */
.mono { font-family: var(--font-mono); letter-spacing: 0; }
.num  { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.ink     { color: var(--ink); }
.ink-2   { color: var(--ink-2); }
.muted   { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.muted-3 { color: var(--muted-3); }

.hair   { border-color: var(--line); }
.hair-2 { border-color: var(--line-2); }

.sec-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}

.hr { height: 1px; background: var(--line); }

/* ─── Surface ────────────────────────────────────────────── */
.surface      { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.surface-flat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }

/* ─── Pills ──────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2.5px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2);
}
.pill-ghost {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2.5px 8px;
  border-radius: 999px;
  background: var(--bg-2); color: var(--muted);
}
.pill-ink {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2.5px 9px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
}
.pill-blue {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2.5px 9px;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 500;
  border: 1px solid rgba(42,109,244,.18);
}
.pill-soft-ok     { background: var(--ok-soft);     color: #14833b; border: 1px solid rgba(22,163,74,.2); }
.pill-soft-crit   { background: var(--crit-soft);   color: #991b1b; border: 1px solid rgba(220,38,38,.22); }
.pill-soft-warn   { background: var(--warn-soft);   color: #8a4c00; border: 1px solid rgba(217,119,6,.22); }
.pill-soft-violet { background: var(--violet-soft); color: #6d28d9; border: 1px solid rgba(124,58,237,.18); }
.pill-soft-teal   { background: var(--teal-soft);   color: #0b7568; border: 1px solid rgba(13,148,136,.2); }

/* ─── Tags ───────────────────────────────────────────────── */
.tag-dance     { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; padding: 2px 7px; border-radius: 4px; background: var(--bg-2);     color: var(--muted); text-transform: uppercase; }
.tag-installed { font-size: 10px;  font-weight: 500; padding: 2px 8px;     border-radius: 4px; background: var(--ok-soft);     color: #118a3a; border: 1px solid rgba(22,163,74,.2); }
.tag-new       { font-size: 10px;  font-weight: 500; padding: 2px 8px;     border-radius: 4px; background: var(--accent-soft); color: var(--accent); border: 1px solid rgba(42,109,244,.18); }
.tag-beta      { font-size: 10px;  font-weight: 500; padding: 2px 8px;     border-radius: 4px; background: var(--warn-soft);   color: #a05b00; border: 1px solid rgba(217,119,6,.22); }
.tag-curated   { font-size: 10px;  font-weight: 500; padding: 2px 8px;     border-radius: 4px; background: var(--violet-soft); color: #6d28d9; border: 1px solid rgba(124,58,237,.2); }

/* ─── Segmented control ──────────────────────────────────── */
.seg {
  display: inline-flex; padding: 3px;
  background: var(--bg-2); border-radius: 10px;
  font-size: 12px; gap: 2px;
}
.seg > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  color: var(--muted); font-weight: 500;
  cursor: pointer;
}
.seg > button.is-active {
  background: var(--surface); color: var(--accent);
  box-shadow: 0 1px 0 rgba(15,18,22,.04), 0 1px 3px rgba(15,18,22,.06);
}

/* ─── Nav rows ───────────────────────────────────────────── */
.nav-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 8px;
  color: var(--ink-2); font-size: 13px;
  cursor: pointer;
}
.nav-row:hover { background: var(--line-soft); }
.nav-row.active { background: var(--ink); color: #fff; }
.nav-row.active [data-lucide] { color: #fff; }

/* ─── Cards (registry) ───────────────────────────────────── */
.reg-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  display: flex; flex-direction: column;
  min-height: 178px;
}
.reg-card:hover {
  border-color: #d7d9de;
  box-shadow: 0 1px 0 rgba(15,18,22,.02), 0 6px 22px -6px rgba(15,18,22,.1);
}
.reg-card.featured {
  border-color: rgba(42,109,244,.35);
  box-shadow: 0 0 0 3px rgba(42,109,244,.08);
}
.reg-card.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.bolt-ico { width: 18px; height: 18px; color: var(--bolt); flex-shrink: 0; }
.bolt-lg  { width: 26px; height: 26px; color: var(--bolt); flex-shrink: 0; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px;
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 1px 3px rgba(15,18,22,.08);
  cursor: pointer;
}
.btn-primary:hover { background: var(--ink-2); }
.btn-primary:disabled,
.btn-primary[disabled] { opacity: 0.5; cursor: not-allowed; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  background: var(--surface); color: var(--ink-2); font-size: 12.5px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.btn-outline:hover { border-color: var(--ink-3); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  color: var(--ink-2); font-size: 12.5px;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--bg-2); }

.btn-blue {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 500;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 4px 10px -4px rgba(42,109,244,.4);
  cursor: pointer;
}
.btn-blue:hover { background: var(--accent-ink); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px;
  background: var(--crit); color: #fff; font-size: 12.5px; font-weight: 500;
  cursor: pointer;
}
.btn-danger:hover { background: #b91c1c; }

/* ─── Inputs ─────────────────────────────────────────────── */
.input {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,109,244,.12);
}
.input input,
.input textarea,
.input select {
  border: 0; outline: 0; background: transparent;
  font-size: 13.5px; flex: 1; color: var(--ink);
  font-family: inherit;
}
.input input::placeholder { color: var(--muted-2); }

.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.field-help {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}
.field-error {
  font-size: 11.5px;
  color: var(--crit);
  margin-top: 4px;
}

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 10.5px;
  border: 1px solid var(--line); border-radius: 4px;
  color: var(--muted); background: var(--bg-2);
}

/* ─── Toggle switch (Daisy 보강용) ───────────────────────── */
.sr-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px; height: 20px;
  background: var(--bg-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s;
}
.sr-toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .14s;
}
.sr-toggle.is-on { background: var(--accent); }
.sr-toggle.is-on::after { transform: translateX(16px); }

/* ─── Indicators ─────────────────────────────────────────── */
.dot { display:inline-block; width:6px; height:6px; border-radius:9999px; }
.dot-live { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.dot-warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
.dot-crit { background: var(--crit); box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.dot-off  { background: var(--muted-3); }

/* ─── Avatar ─────────────────────────────────────────────── */
.avatar {
  width: 22px; height: 22px; border-radius: 99px;
  display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 600; color: #fff;
}
.avatar-lg { width: 32px; height: 32px; font-size: 12px; }

/* ─── Lucide icons sizing ────────────────────────────────── */
[data-lucide]          { width: 14px; height: 14px; color: var(--muted); stroke-width: 1.75; }
.icon-sm [data-lucide] { width: 12px; height: 12px; }
.icon-md [data-lucide] { width: 15px; height: 15px; }
.icon-lg [data-lucide] { width: 18px; height: 18px; }

/* ─── Hero banner ────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(900px 300px at 10% 0%, rgba(42,109,244,.08), transparent 60%),
    radial-gradient(700px 300px at 100% 100%, rgba(124,58,237,.08), transparent 60%),
    linear-gradient(180deg, #fff, #fafbfd);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 30px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; top: 0; right: 0; width: 320px; height: 100%;
  background-image:
    linear-gradient(rgba(15,18,22,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,18,22,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(240px 240px at 70% 50%, #000, transparent 70%);
  mask-image: radial-gradient(240px 240px at 70% 50%, #000, transparent 70%);
  opacity: .45;
  pointer-events: none;
}

/* ─── Filter chip ────────────────────────────────────────── */
.coll-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer;
}
.coll-chip:hover { border-color: var(--ink-3); }
.coll-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.coll-chip.is-active [data-lucide] { color: #fff; }

/* ─── Category tile ──────────────────────────────────────── */
.cat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px; display: flex; align-items: center; gap: 12px;
  transition: border-color .12s, transform .12s;
  cursor: pointer;
}
.cat-tile:hover { border-color: #d7d9de; transform: translateY(-1px); }
.cat-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.cat-ico-blue   { background: var(--accent-soft); color: var(--accent); }
.cat-ico-violet { background: var(--violet-soft); color: #7c3aed; }
.cat-ico-teal   { background: var(--teal-soft);   color: #0d9488; }
.cat-ico-warn   { background: var(--warn-soft);   color: #a05b00; }
.cat-ico-crit   { background: var(--crit-soft);   color: #dc2626; }
.cat-ico-ok     { background: var(--ok-soft);     color: #118a3a; }
.cat-ico [data-lucide] { width: 17px; height: 17px; color: inherit; }

/* ─── Scrollbar ──────────────────────────────────────────── */
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #d8dade; border-radius: 99px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* ─── Drawer ─────────────────────────────────────────────── */
.drawer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(15,18,22,.02), 0 30px 60px -28px rgba(15,18,22,.22);
}

/* ─── Sparkline placeholder ──────────────────────────────── */
.spark { height: 40px; width: 100%; }

/* ─── Source brand icon ──────────────────────────────────── */
.srcico {
  width: 20px; height: 20px; border-radius: 6px;
  display: inline-grid; place-items: center;
  color: #fff; font-size: 9.5px; font-weight: 700;
}
.src-x                 { background:#0a0a0a; }
.src-naver_news        { background:#16a34a; }
.src-naver_blog        { background:#22c55e; }
.src-naver_cafe        { background:#03c75a; }
.src-naver_cafe_member { background:#03c75a; }
.src-naver_cafe_open   { background:#16a34a; }
.src-dcinside          { background:#1f2024; }
.src-ppomppu           { background:#d97706; }
.src-instagram         { background: linear-gradient(135deg,#ec4899,#06b6d4); }
.src-youtube           { background:#ff0000; }

/* ─── Channel health badges (🟢🟡🔴⚪⚫) ─────────────────── */
.health-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2.5px 8px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  white-space: nowrap;
}
.health-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 99px; flex-shrink: 0;
}
.health-ok      { background: var(--ok-soft);   color: #14833b; border-color: rgba(22,163,74,.22); }
.health-ok::before      { background: #16a34a; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.health-warn    { background: var(--warn-soft); color: #8a4c00; border-color: rgba(217,119,6,.22); }
.health-warn::before    { background: var(--warn); box-shadow: 0 0 0 3px rgba(217,119,6,.18); }
.health-crit    { background: var(--crit-soft); color: #991b1b; border-color: rgba(220,38,38,.22); }
.health-crit::before    { background: var(--crit); box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.health-soon    { background: var(--bg-2);      color: var(--muted); }
.health-soon::before    { background: var(--muted-3); }
.health-off     { background: var(--surface);   color: var(--muted); }
.health-off::before     { background: var(--muted-3); }

/* ─── Flow diagram (수집 흐름) ───────────────────────────── */
.flow {
  display: grid; gap: 8px;
  grid-template-columns: repeat(5, 1fr);
  align-items: stretch;
}
.flow-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 92px;
}
.flow-step::after {
  content: "→";
  position: absolute; right: -14px; top: 50%; transform: translateY(-50%);
  color: var(--muted-2); font-size: 14px; z-index: 1;
}
.flow-step:last-child::after { content: ""; }
.flow-step .flow-step-label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}
.flow-step .flow-step-value {
  font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.2;
}
.flow-step .flow-step-meta {
  font-size: 11.5px; color: var(--muted); margin-top: auto;
}
.flow-step a, .flow-step button {
  font-size: 11.5px; color: var(--accent); margin-top: auto;
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer;
}
.flow-step a:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr 1fr; }
  .flow-step::after { content: ""; }
}

/* ─── Wizard ────────────────────────────────────────────── */
.wizard-shell { background: var(--bg); min-height: 100vh; padding: 40px 24px; }
.wizard-card {
  max-width: 720px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 30px 60px -28px rgba(15,18,22,.18);
}
.wizard-stepper {
  display: flex; gap: 0; padding: 20px 28px; border-bottom: 1px solid var(--line);
}
.wizard-stepper > div {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted-2);
}
.wizard-stepper > div .step-num {
  width: 22px; height: 22px; border-radius: 99px;
  background: var(--bg-2); color: var(--muted);
  display: grid; place-items: center; font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.wizard-stepper > div.is-current .step-num,
.wizard-stepper > div.is-done .step-num {
  background: var(--ink); color: #fff;
}
.wizard-stepper > div.is-current { color: var(--ink); font-weight: 500; }

/* ─── Sandbox ────────────────────────────────────────────── */
.sandbox-grid {
  display: grid; grid-template-columns: 320px 1fr; gap: 16px;
  align-items: start;
}
@media (max-width: 980px) { .sandbox-grid { grid-template-columns: 1fr; } }

.tab-bar {
  display: inline-flex; padding: 3px;
  background: var(--bg-2); border-radius: 10px;
  font-size: 12.5px; gap: 2px;
}
.tab-bar > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  color: var(--muted); font-weight: 500;
  cursor: pointer;
}
.tab-bar > button.is-active {
  background: var(--surface); color: var(--ink);
  box-shadow: 0 1px 0 rgba(15,18,22,.04), 0 1px 3px rgba(15,18,22,.06);
}

.code-block {
  font-family: var(--font-mono); font-size: 11.5px;
  background: #0b0b0c; color: #e6e7e8;
  padding: 14px 16px; border-radius: 10px;
  overflow: auto; max-height: 480px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-all;
}

/* ─── Matrix monitor ─────────────────────────────────────── */
.matrix {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px;
}
.matrix th, .matrix td {
  border-bottom: 1px solid var(--line-2);
  padding: 10px 12px;
}
.matrix thead th {
  font-weight: 500; font-size: 11.5px; color: var(--muted);
  background: var(--surface-2);
}
.matrix tbody td.cell-on  { background: rgba(22,163,74,.05); }
.matrix tbody td.cell-warn { background: rgba(217,119,6,.05); }
.matrix tbody td.cell-crit { background: rgba(220,38,38,.05); }

/* ─── Source row chip (가입 카페) ────────────────────────── */
.src-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; background: var(--surface);
}
.src-row .url { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.src-row .x   { margin-left: auto; color: var(--muted); cursor: pointer; }
.src-row .x:hover { color: var(--crit); }

/* ─── Sentiment badges ───────────────────────────────────── */
.sentiment-positive { background: var(--ok-soft);   color: #118a3a; }
.sentiment-neutral  { background: var(--bg-2);      color: var(--muted); }
.sentiment-negative { background: var(--crit-soft); color: #991b1b; }

/* ─── Risk score bars ────────────────────────────────────── */
.risk-bar {
  display: inline-flex; gap: 2px; align-items: center;
}
.risk-bar > span {
  width: 4px; height: 12px; border-radius: 2px; background: var(--line);
}
.risk-bar.lvl-1 > span:nth-child(-n+1),
.risk-bar.lvl-2 > span:nth-child(-n+2),
.risk-bar.lvl-3 > span:nth-child(-n+3),
.risk-bar.lvl-4 > span:nth-child(-n+4),
.risk-bar.lvl-5 > span:nth-child(-n+5) { background: var(--crit); }

/* ─── Table ──────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.tbl thead th {
  text-align: left;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.tbl tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  vertical-align: middle;
}
.tbl tbody tr:hover { background: var(--line-soft); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* ─── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,18,22,.4);
  display: grid; place-items: center; z-index: 50;
  backdrop-filter: blur(4px);
}
.modal-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.25);
  max-width: 560px; width: 92%;
  max-height: 85vh; overflow-y: auto;
}

/* ─── Empty state ────────────────────────────────────────── */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--muted);
}
.empty [data-lucide] { width: 36px; height: 36px; color: var(--muted-2); }

/* ─── Alert / inline notice ──────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-2);
}
.alert [data-lucide] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert-ok    { background: rgba(16,185,129,.06);  border-color: rgba(16,185,129,.35);  color: #047857; }
.alert-ok    [data-lucide] { color: #10b981; }
.alert-warn  { background: rgba(245,158,11,.06);  border-color: rgba(245,158,11,.35);  color: #b45309; }
.alert-warn  [data-lucide] { color: #f59e0b; }
.alert-crit  { background: rgba(239,68,68,.06);   border-color: rgba(239,68,68,.35);   color: #b91c1c; }
.alert-crit  [data-lucide] { color: #ef4444; }
.alert-info  { background: rgba(59,130,246,.06);  border-color: rgba(59,130,246,.30);  color: #1d4ed8; }
.alert-info  [data-lucide] { color: #3b82f6; }

/* ─── Hint / 사용법 카드 ─────────────────────────────────── */
.hint-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
}
.hint-card [data-lucide] { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; margin-top: 2px; }

/* ─── Table row state ────────────────────────────────────── */
.tbl tbody tr.row-ok   { background: rgba(16,185,129,.045); }
.tbl tbody tr.row-crit { background: rgba(239,68,68,.045); }
.tbl tbody tr.row-warn { background: rgba(245,158,11,.045); }

/* ─── Login layout ───────────────────────────────────────── */
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(42,109,244,.07), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(124,58,237,.06), transparent 60%),
    var(--bg);
}
.login-card {
  width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 0 rgba(15,18,22,.02), 0 20px 50px -20px rgba(15,18,22,.18);
}