:root {
  --bg: #F4F5F7; --surface: #FFFFFF; --surface2: #F9FAFB; --border: #E3E6EA; --border2: #EEF0F3;
  --input-border: #D5D9DF; --text: #1A1D21; --muted: #4B5563; --muted2: #374151; --code-bg: #1A1D21; --code-text: #E5E7EB;
  --accent: #2457C5; --link: #2457C5; --accent-soft: #EEF2FB; --accent-text: #1A3F99; --avatar-bg: #DCE4F7; --chip: #F1F3F6;
  --ok-bg: #DCFCE7; --ok-fg: #166534; --err-bg: #FEE2E2; --err-fg: #991B1B; --err-border: #FCA5A5;
  --warn-bg: #FFEDD5; --warn-fg: #9A3412; --off-bg: #E5E7EB; --off-fg: #374151;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1114; --surface: #171A1F; --surface2: #1D2127; --border: #2A2F37; --border2: #232830;
    --input-border: #3A414B; --text: #E8EAED; --muted: #A3AAB5; --muted2: #C2C7CF; --code-bg: #0B0D10; --code-text: #D1D5DB;
    --accent: #3B72D9; --link: #8AB4F8; --accent-soft: #1E2A44; --accent-text: #9DBCF7; --avatar-bg: #2A3A5C; --chip: #262B33;
    --ok-bg: #14361F; --ok-fg: #6EE7A0; --err-bg: #3F1515; --err-fg: #F49A9A; --err-border: #7F2A2A;
    --warn-bg: #3E2410; --warn-fg: #F5B477; --off-bg: #2A2F37; --off-fg: #C2C7CF;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0F1114; --surface: #171A1F; --surface2: #1D2127; --border: #2A2F37; --border2: #232830;
  --input-border: #3A414B; --text: #E8EAED; --muted: #A3AAB5; --muted2: #C2C7CF; --code-bg: #0B0D10; --code-text: #D1D5DB;
  --accent: #3B72D9; --link: #8AB4F8; --accent-soft: #1E2A44; --accent-text: #9DBCF7; --avatar-bg: #2A3A5C; --chip: #262B33;
  --ok-bg: #14361F; --ok-fg: #6EE7A0; --err-bg: #3F1515; --err-fg: #F49A9A; --err-border: #7F2A2A;
  --warn-bg: #3E2410; --warn-fg: #F5B477; --off-bg: #2A2F37; --off-fg: #C2C7CF;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); line-height: 1.45; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); }
a:hover { color: var(--accent-text); }
h1 { font-size: 24px; font-weight: 600; margin: 0; }
h2 { font-size: 18px; font-weight: 600; margin: 0; }
h3 { font-size: 15px; font-weight: 600; margin: 0; }
p { margin: 0; }
.mono, code, pre { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.muted { color: var(--muted); }
.muted2 { color: var(--muted2); }
.small { font-size: 12px; }
.strong { font-weight: 500; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.err-text { color: var(--err-fg); }
.danger-text { color: var(--err-fg) !important; }
.select-all { user-select: all; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 32px; min-height: 60px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.topbar-left { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 16px; }
.nav { display: flex; gap: 4px; }
.nav a { padding: 8px 12px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 14px; }
.nav a.active { background: var(--accent-soft); color: var(--link); font-weight: 500; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--avatar-bg); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; }
.footer { padding: 16px; text-align: center; font-size: 12px; color: var(--muted); }

/* layout */
.container { width: 100%; max-width: 1216px; margin: 0 auto; padding: 32px 16px 48px; display: flex; flex-direction: column; gap: 24px; flex: 1; }
.container.wide { max-width: none; padding: 24px 32px 48px; gap: 20px; }
.container.settings { max-width: 1440px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.page-head > div { display: flex; flex-direction: column; gap: 4px; }
.section { display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.section-head > div { display: flex; flex-direction: column; gap: 2px; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs .mono { color: var(--text); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-2 { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.row.space { justify-content: space-between; align-items: flex-start; }
.grow { flex: 1 1 280px; }
.two-col { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.two-col > form { flex: 999 1 560px; min-width: 0; }
.two-col > aside { flex: 1 1 380px; min-width: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

/* settings sub-navigation */
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
.settings-content { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.subnav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
.subnav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 14px; }
.subnav a:hover { background: var(--surface2); color: var(--text); }
.subnav a.active { background: var(--accent-soft); color: var(--link); font-weight: 500; }
.subnav .count { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--muted2); font-weight: 500; }
.subnav a.active .count { background: var(--surface); }
@media (max-width: 860px) {
  .settings-layout { grid-template-columns: 1fr; }
  .subnav { position: static; flex-direction: row; flex-wrap: wrap; }
  .subnav a { padding: 7px 10px; }
}

/* cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.card.stack, .card.form, .card.host-head, article.card { padding: 20px; }
.card.dashed { border-style: dashed; padding: 0; }
.card.dashed summary { padding: 16px 20px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.card.dashed summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
.card.dashed[open] summary::before { content: "▾"; }
.card.dashed > form { padding: 0 20px 20px; }
.card.empty { padding: 32px; text-align: center; color: var(--muted); }
.stat { padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 28px; font-weight: 600; }
.host-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.host-head h1 { font-size: 22px; }
.host-head .meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.right-col { align-items: flex-end; gap: 8px; }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 960px; }
.table th { background: var(--surface2); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 10px 12px; font-weight: 500; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 2; }
.table thead tr:first-child th:first-child { border-top-left-radius: 8px; }
.table thead tr:first-child th:last-child { border-top-right-radius: 8px; }
.table td { padding: 7px 12px; border-bottom: 1px solid var(--border2); vertical-align: middle; height: 46px; }
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th.actions-col, .table td.actions-cell { position: sticky; right: 0; width: 1%; white-space: nowrap; padding-right: 16px; }
.table th.actions-col { background: var(--surface2); z-index: 3; }
.table td.actions-cell { background: var(--surface); box-shadow: -8px 0 8px -8px rgba(0,0,0,.25); }
.table td.actions-cell .actions { flex-wrap: nowrap; }
.table .actions .btn.icon-btn { width: 32px; min-height: 32px; }
.table .inline { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; }
.ellipsis { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.table td.nowrap > * { vertical-align: middle; }
/* Narrow screens: the table scrolls inside its card (both axes); header and actions column stick inside it.
   Wide screens: no inner scroll box, so the header sticks to the window while the page scrolls. */
.table-wrap { max-height: 75vh; overflow: auto; }
@media (min-width: 1400px) { .table-wrap { max-height: none; overflow: visible; display: inline-block; min-width: 100%; } }
.table tr:last-child td { border-bottom: none; }
.table td.empty { text-align: center; color: var(--muted); padding: 32px; }
.table a.mono { color: var(--text); text-decoration: none; }
.actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.actions.left { justify-content: flex-start; gap: 8px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 3px 8px; border-radius: 4px; background: var(--chip); }
.pager { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* pills */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.accent { background: var(--accent-soft); color: var(--accent-text); }
.pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill.err { background: var(--err-bg); color: var(--err-fg); }
.pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill.off { background: var(--off-bg); color: var(--off-fg); }
.code-pill { display: inline-flex; padding: 2px 8px; border-radius: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; }
.code-pill.ok { background: var(--ok-bg); color: var(--ok-fg); }
.code-pill.neutral { background: var(--chip); color: var(--muted2); }
.code-pill.warn { background: var(--warn-bg); color: var(--warn-fg); }
.code-pill.err { background: var(--err-bg); color: var(--err-fg); }
.code-pill.accent { background: var(--accent-soft); color: var(--accent-text); }
.wrap { overflow-wrap: anywhere; }
.test-result { font-size: 12px; }
.test-result.ok { color: var(--ok-fg); }
.test-result.err { color: var(--err-fg); }

/* buttons & inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--input-border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 14px; font-family: inherit; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { border-color: var(--muted); color: var(--text); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; font-weight: 500; }
.btn.primary:hover { filter: brightness(1.08); color: #FFFFFF; }
.btn.big { min-height: 48px; font-size: 15px; width: 100%; }
.btn.danger { border-color: var(--err-border); color: var(--err-fg); }
.btn.icon-btn { width: 36px; min-height: 36px; padding: 0; color: var(--muted2); }
.btn.link { border: none; background: none; padding: 6px 8px; color: var(--link); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: default; }
button.link { background: none; border: none; padding: 0; color: var(--link); font-family: inherit; cursor: pointer; font-size: 13px; }
.input { min-height: 40px; padding: 8px 12px; border: 1px solid var(--input-border); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); width: 100%; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
select.input { width: auto; }
.input.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
textarea.input { resize: vertical; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.form legend { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0; margin-bottom: 10px; }
.form fieldset + fieldset { border-top: 1px solid var(--border2); padding-top: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; }
.field .row .input { flex: 1 1 240px; width: auto; }
.hint { font-size: 12px; color: var(--muted); }
.field-error { font-size: 12px; color: var(--err-fg); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.check input { width: 18px; height: 18px; margin: 2px 0 0; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-actions.left { justify-content: flex-start; }
.kv { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.kv.wide { grid-template-columns: 160px minmax(0, 1fr); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.code-block { background: var(--code-bg); color: var(--code-text); border-radius: 8px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.code-label { font-size: 12px; color: #9CA3AF; text-transform: uppercase; letter-spacing: .04em; }
.code-block pre { margin: 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }

/* router help tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--link); border-bottom-color: var(--accent); font-weight: 500; }
.tab-panel[hidden] { display: none; }
.steps { margin: 0; padding-left: 20px; font-size: 13px; color: var(--muted2); display: flex; flex-direction: column; gap: 4px; }
.copy { cursor: pointer; position: relative; border-bottom: 1px dashed var(--input-border); overflow-wrap: anywhere; }
.copy:hover { color: var(--link); border-bottom-color: var(--link); }
.copy:empty::before { content: "—"; color: var(--muted); }
.copy.copied::after { content: "Copiado"; position: absolute; left: 0; top: -22px; font-size: 11px; font-family: "IBM Plex Sans", system-ui, sans-serif; background: var(--ok-bg); color: var(--ok-fg); padding: 1px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; }
.copy.url-box { border-bottom: 1px solid var(--border); }
pre.copy { border-bottom: none; border-radius: 6px; padding: 6px 8px; margin: 0 -8px; }
pre.copy:hover { background: rgba(255,255,255,.06); color: var(--code-text); }
pre.copy.copied::after { top: -4px; left: 8px; }
.code-block pre.muted { color: #9CA3AF; }
.url-box { display: block; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 12px; overflow-wrap: anywhere; }

/* flash */
.flash { padding: 12px 16px; border-radius: 6px; font-size: 14px; border: 1px solid; }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); border-color: transparent; }
.flash.error { background: var(--err-bg); color: var(--err-fg); border-color: transparent; }
.flash a { color: inherit; font-weight: 500; }

/* login */
.login-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.login-card { width: 100%; max-width: 420px; padding: 40px; display: flex; flex-direction: column; gap: 28px; }
.login-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.login-head h1 { font-size: 22px; }

/* htmx */
.htmx-request .btn, .btn.htmx-request { opacity: .6; }

@media (max-width: 720px) {
  .topbar { padding: 0 16px; }
  .user-name { display: none; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .right-col { align-items: flex-start; }
}