/* ============================================================
   automaticmachine — Admin Console v4
   "Vault & Brass" — operator-first, dense, gold semantic
   ============================================================ */

/* === RESET ================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; }
img, svg { display: block; }

/* === TOKENS ================================================= */
:root {
    /* === Backgrounds (deep operator black) === */
    --ink-0:   #06060A;   /* vault — overlays */
    --ink-1:   #08080C;   /* deep — header bg */
    --ink-2:   #0C0C12;   /* shell — page bg */
    --ink-3:   #11111B;   /* panel */
    --ink-4:   #15151F;   /* panel raised */
    --ink-5:   #1A1A26;   /* input */
    --ink-6:   #2E2D29;   /* shadow text */
    --ink-7:   #585650;   /* faint text / borders */
    --ink-8:   #8A8881;   /* muted text */
    --ink-9:   #D2D0C7;   /* body text */
    --ink-10:  #F2F1EC;   /* bright text */

    /* === Accents — Gold (oxidized brass, SEMANTIC ONLY) === */
    --gold:        #C9A961;     /* primary action, active state, featured */
    --gold-bright: #DCBE7E;     /* hover */
    --gold-deep:   #8E764D;     /* darker shade */
    --gold-soft:   rgba(201, 169, 97, 0.10);
    --gold-trace:  rgba(201, 169, 97, 0.04);
    --gold-glow:   rgba(201, 169, 97, 0.30);

    /* === Legacy alias for backward-compat === */
    --acid:        #C9A961;     /* maps to gold for legacy CSS using --acid */
    --acid-dim:    #8E764D;
    --acid-soft:   rgba(201, 169, 97, 0.10);

    /* === Status colors (refined, operator-readable) === */
    --moss:        #7BB991;     /* alive / valid / done */
    --moss-soft:   rgba(123, 185, 145, 0.12);
    --rust:        #C46868;     /* dead / invalid / error */
    --rust-soft:   rgba(196, 104, 104, 0.12);
    --sodium:      #D69A5C;     /* redirect / captcha / 2fa / warning */
    --sodium-soft: rgba(214, 154, 92, 0.12);
    --steam:       #7BA3C8;     /* info / processing / content_captured */
    --steam-soft:  rgba(123, 163, 200, 0.12);
    --violet:      #8589A8;     /* skipped */
    --violet-soft: rgba(133, 137, 168, 0.12);

    /* === Hairlines === */
    --hair:        1px solid rgba(255, 255, 255, 0.06);
    --hair-soft:   1px solid rgba(255, 255, 255, 0.04);
    --hair-strong: 1px solid rgba(255, 255, 255, 0.10);
    --hair-gold:   1px solid rgba(201, 169, 97, 0.18);

    /* === Typography === */
    --font-mono:    "IBM Plex Mono", ui-monospace, "JetBrains Mono", Consolas, monospace;
    --font-display: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --font-sans:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* === Type scale (admin-appropriate, denser than v3) === */
    --tx-xxs: 10px;
    --tx-xs:  11px;
    --tx-sm:  12px;
    --tx-md:  13px;
    --tx-base:14px;
    --tx-lg:  16px;
    --tx-xl:  20px;
    --tx-2xl: 24px;     /* page H1 */
    --tx-3xl: 30px;     /* KPI value */
    --tx-4xl: 42px;
    --tx-5xl: 56px;     /* rarely used */

    /* === Spacing === */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 48px;
    --s-9: 64px;

    /* === Layers === */
    --z-bg:    0;
    --z-base:  1;
    --z-topbar:50;
    --z-modal: 200;

    /* === Layout === */
    --topbar-h: 52px;
    --page-max: 1480px;
}

/* === BASE =================================================== */
body {
    background: var(--ink-2);
    color: var(--ink-9);
    font-family: var(--font-sans);
    font-size: var(--tx-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    letter-spacing: 0.005em;
}

/* === SHELL ================================================== */
.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: var(--z-base);
}
.main {
    flex: 1;
    width: 100%;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: var(--s-6) var(--s-6) var(--s-8);
}
body.page-records .main {
    max-width: none;
    padding-left: var(--s-5);
    padding-right: var(--s-5);
}
body.page-records .tbl .host, body.page-records .tbl td.host { max-width: 460px; }

/* === TOPBAR (replaces sidebar) =============================== */
.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);
    display: flex;
    align-items: center;
    gap: var(--s-7);
    height: var(--topbar-h);
    padding: 0 var(--s-6);
    background: var(--ink-1);
    border-bottom: var(--hair);
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--tx-sm);
    font-weight: 500;
    color: var(--ink-10);
    letter-spacing: 0.04em;
}
.brand-mark {
    width: 22px; height: 22px;
    border: 1px solid var(--gold);
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.brand-mark::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--gold);
}
.brand strong {
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.06em;
}
.brand-sub { display: none; }   /* hide old sidebar sub */

.nav {
    display: flex;
    gap: 2px;
    margin-left: var(--s-4);
}
.nav-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    font-family: var(--font-sans);
    font-size: var(--tx-sm);
    color: var(--ink-8);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
    letter-spacing: 0.01em;
}
.nav-item svg {
    width: 13px; height: 13px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}
.nav-item:hover { color: var(--ink-10); }
.nav-item.active {
    color: var(--gold);
    border-color: rgba(201, 169, 97, 0.20);
    background: var(--gold-trace);
}
.nav-section { display: none; }   /* hide sidebar-section label */

.topbar-spacer { flex: 1; }
.topbar-meta {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
    letter-spacing: 0.04em;
}
.topbar-meta .live::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--moss);
    margin-right: 6px;
    box-shadow: 0 0 0 3px var(--moss-soft);
    vertical-align: middle;
    animation: pulse-dot 2s ease-in-out infinite;
}
.topbar-meta .user {
    color: var(--gold);
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* === SIDEBAR (deprecated, hide for backward-compat) ========== */
.sidebar { display: none; }
.sidebar-foot { display: none; }

/* === PAGE HEAD ============================================== */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
    padding-bottom: 0;
    border-bottom: 0;
}
.page-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-7);
    margin-bottom: 6px;
}
.page-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--tx-2xl);
    letter-spacing: -0.01em;
    color: var(--ink-10);
    margin: 0;
    line-height: 1.1;
}
.page-actions {
    display: flex;
    gap: var(--s-2);
}

/* === KPI STRIP (new admin component) ======================== */
.kpi-strip {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: var(--hair);
    margin-bottom: var(--s-5);
}
.kpi {
    background: var(--ink-3);
    padding: var(--s-4) var(--s-5);
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    transition: background 0.2s ease;
}
.kpi:hover { background: var(--ink-4); }
.kpi.featured {
    background: linear-gradient(135deg, var(--ink-4), var(--ink-3));
}
.kpi.featured::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--gold);
}
.kpi-label {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--ink-7);
}
.kpi-value {
    font-family: var(--font-mono);
    font-size: var(--tx-3xl);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink-10);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.kpi-value.gold { color: var(--gold-bright); }
.kpi-delta {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
    letter-spacing: 0.04em;
}
.kpi-delta .up { color: var(--moss); }
.kpi-delta .down { color: var(--rust); }
.kpi-delta .pct { color: var(--ink-7); }

/* === STAGE CARDS (re-styled .triage-panel) ================== */
.triage-panel {
    background: var(--ink-3);
    border: var(--hair);
    padding: var(--s-5);
    margin-bottom: var(--s-4);
    position: relative;
    transition: border-color 0.2s ease;
}
.triage-panel:hover { border-color: rgba(255, 255, 255, 0.10); }
.triage-panel[data-state="running"],
.triage-panel.is-running {
    border-color: rgba(201, 169, 97, 0.30);
}
.triage-panel[data-state="running"]::before,
.triage-panel.is-running::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--gold);
}
.triage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: var(--hair);
    margin-bottom: var(--s-4);
}
.triage-title {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--tx-lg);
    color: var(--ink-10);
    margin: 0;
    letter-spacing: -0.005em;
}
.triage-controls {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    align-items: center;
}
.triage-body { display: flex; flex-direction: column; gap: var(--s-3); }
.triage-meta {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.triage-meta .mono { color: var(--ink-10); }
.triage-progress {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}
.triage-progress-bar {
    flex: 1;
    height: 2px;
    background: var(--ink-5);
    position: relative;
    overflow: hidden;
}
.triage-progress-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--gold);
    transition: width 0.6s ease;
}
.triage-progress-text {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.triage-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: var(--s-3);
    border-top: var(--hair-soft);
}
.breakdown-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* === Stage marker label (new) === */
.stage-marker {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    font-weight: 500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.stage-marker::before {
    content: "";
    width: 8px; height: 1px;
    background: var(--gold);
}
.stage-tagline {
    font-family: var(--font-sans);
    font-size: var(--tx-sm);
    color: var(--ink-8);
    margin: 4px 0 0 0;
    line-height: 1.4;
    max-width: 36ch;
}
.stage-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-7);
    padding: 3px 8px;
    background: var(--ink-5);
    border: var(--hair);
    white-space: nowrap;
}
.stage-state-badge .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ink-6);
}
.is-running .stage-state-badge,
[data-state="running"] .stage-state-badge {
    color: var(--gold);
    border-color: rgba(201, 169, 97, 0.20);
    background: var(--gold-trace);
}
.is-running .stage-state-badge .dot,
[data-state="running"] .stage-state-badge .dot {
    background: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
    animation: pulse-dot 1.6s ease-in-out infinite;
}

/* === BUTTONS ================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: var(--tx-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: transparent;
    color: var(--ink-9);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    height: 30px;
    border-radius: 0;
}
.btn-primary {
    background: var(--gold);
    color: var(--ink-0);
    border-color: var(--gold);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--gold-bright);
    border-color: var(--gold-bright);
}
.btn-primary:disabled {
    background: var(--ink-5);
    color: var(--ink-7);
    border-color: var(--ink-5);
    cursor: not-allowed;
}
.btn-ghost { color: var(--ink-9); }
.btn-ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-trace);
}
.btn-danger {
    color: var(--rust);
    border-color: rgba(196, 104, 104, 0.30);
}
.btn-danger:hover {
    background: var(--rust-soft);
    border-color: var(--rust);
}
.btn-xs {
    height: 24px;
    padding: 0 8px;
    font-size: var(--tx-xxs);
    letter-spacing: 0.04em;
    gap: 4px;
}

/* === PILLS (admin status badges) ============================ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border: 1px solid;
    border-radius: 0;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Status colors mapped to refined palette */
.pill.alive,    .pill.valid,    .pill.done     { color: var(--moss); border-color: rgba(123,185,145,0.32); background: var(--moss-soft); }
.pill.dead,     .pill.invalid,  .pill.error,
.pill.llm_error                                { color: var(--rust); border-color: rgba(196,104,104,0.32); background: var(--rust-soft); }
.pill.redirect, .pill.captcha,  .pill.two_factor,
.pill.warn                                     { color: var(--sodium); border-color: rgba(214,154,92,0.32); background: var(--sodium-soft); }
.pill.pending,  .pill.queued                   { color: var(--gold); border-color: rgba(201,169,97,0.32); background: var(--gold-soft); }
.pill.skipped,  .pill.session_expired          { color: var(--violet); border-color: rgba(133,137,168,0.28); background: var(--violet-soft); }
.pill.content_captured, .pill.llm_processing,
.pill.stopping, .pill.extracting, .pill.parsing,
.pill.uploading                                { color: var(--steam); border-color: rgba(123,163,200,0.32); background: var(--steam-soft); }
.pill.ingested                                 { color: var(--steam); border-color: rgba(123,163,200,0.32); background: var(--steam-soft); }
.pill.failed                                   { color: var(--rust); border-color: rgba(196,104,104,0.32); background: var(--rust-soft); }

/* === TIER BADGES ============================================ */
.tier-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4em; height: 1.4em; border-radius: 3px;
    font-size: var(--tx-xxs); font-weight: 700; font-family: var(--font-mono);
    border: 1px solid; margin-right: 3px; vertical-align: middle;
    line-height: 1;
}
.tier-S { color: #92400e; border-color: rgba(245,158,11,0.6); background: rgba(245,158,11,0.18); }
.tier-A { color: #065f46; border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.14); }
.tier-B { color: #78350f; border-color: rgba(234,179,8,0.4);  background: rgba(234,179,8,0.12);  }
.tier-C { color: var(--ink-6); border-color: rgba(107,114,128,0.3); background: rgba(107,114,128,0.08); }
.tier-D { color: var(--rust); border-color: rgba(196,104,104,0.25); background: rgba(196,104,104,0.06); opacity: 0.7; }

/* === VIEW TOGGLE ============================================ */
.view-toggle {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 4px;
    overflow: hidden;
    margin-right: var(--s-3);
}
.view-toggle-btn {
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    letter-spacing: 0.10em;
    color: var(--ink-7);
    text-transform: uppercase;
    transition: all 0.15s ease;
    text-decoration: none;
}
.view-toggle-btn:hover { color: var(--ink-10); background: rgba(255,255,255,0.03); }
.view-toggle-btn.active {
    background: var(--gold);
    color: var(--ink-0);
}

/* === HOST EXPAND (credentials_hosts.html) =================== */
.host-expand { display: block; }
.host-summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--tx-sm);
    padding: 2px 0;
}
.host-summary::-webkit-details-marker { display: none; }
.host-summary::before {
    content: "▶";
    display: inline-block;
    width: 1.2em;
    font-size: 0.7em;
    color: var(--ink-6);
    transition: transform 0.15s ease;
}
.host-expand[open] .host-summary::before {
    transform: rotate(90deg);
    color: var(--gold);
}
.host-expand[open] .host-summary { color: var(--gold); }
.host-creds {
    padding: var(--s-3) var(--s-2);
    background: var(--ink-4);
    margin: var(--s-2) 0;
    border-left: 2px solid var(--gold);
}
.host-creds-loading {
    color: var(--ink-6);
    font-size: var(--tx-xs);
    font-style: italic;
}
.host-creds-more {
    padding: var(--s-2) var(--s-3);
    font-size: var(--tx-xs);
    text-align: right;
}
.host-creds-more a { color: var(--gold); }

/* Inline table inside host expand */
.tbl-inline { background: transparent; border: none; }
.tbl-inline td {
    padding: var(--s-2) var(--s-3);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: var(--tx-xs);
}
.tbl-inline .idx { color: var(--ink-6); font-family: var(--font-mono); }
.tbl-inline .login-cell { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.tbl-inline .pw-cell { color: var(--ink-6); cursor: pointer; }
.tbl-inline .actions-cell { white-space: nowrap; }
.tbl-inline .actions-cell a { margin-right: 6px; text-decoration: none; }

/* Host view specific */
.valid-cell { color: var(--moss); font-weight: 600; }
.tier-cell { white-space: nowrap; }
.tbl-sort { display: flex; align-items: center; gap: var(--s-2); }
.tbl-sort-label { color: var(--ink-6); font-size: var(--tx-xs); text-transform: uppercase; letter-spacing: 0.1em; }
.tbl-sort-link {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-7);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
}
.tbl-sort-link:hover { color: var(--ink-10); background: rgba(255,255,255,0.05); }
.tbl-sort-link.active { color: var(--gold); background: rgba(201,169,97,0.12); }

/* Block host button */
.btn-block-host {
    background: transparent;
    border: 1px solid rgba(196,104,104,0.3);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s ease;
}
.btn-block-host:hover {
    opacity: 1;
    background: rgba(196,104,104,0.15);
    border-color: var(--rust);
}
.btn-block-host:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* === TABLES ================================================= */
.tbl-wrap {
    border: var(--hair);
    background: var(--ink-3);
    overflow-x: auto;
}
.tbl-scroll { overflow-x: auto; }
.tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--tx-sm);
}
.tbl thead th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-7);
    padding: var(--s-3) var(--s-4);
    border-bottom: var(--hair);
    background: var(--ink-1);
    white-space: nowrap;
}
.tbl tbody td {
    padding: var(--s-3) var(--s-4);
    border-bottom: var(--hair);
    color: var(--ink-9);
    vertical-align: middle;
}
.tbl tbody tr:hover td { background: var(--ink-4); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.row-viewed td { background: var(--moss-soft); }
.tbl tbody tr.row-viewed:hover td { background: rgba(123, 185, 145, 0.18); }
.tbl tbody tr.row-viewed td:first-child { box-shadow: inset 3px 0 0 var(--moss); }
.tbl tbody tr.row-archived td { opacity: 0.5; }
.tbl tbody tr.row-archived td:first-child { box-shadow: inset 3px 0 0 var(--ink-7); }
.tbl tbody tr.row-important td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.tbl tbody tr.row-priority-5 td:first-child,
.tbl tbody tr.row-priority-4 td:first-child { box-shadow: inset 3px 0 0 var(--rust); }
.tbl tbody tr.row-priority-3 td:first-child { box-shadow: inset 3px 0 0 var(--sodium); }
.tbl tbody tr.row-priority-2 td:first-child,
.tbl tbody tr.row-priority-1 td:first-child { box-shadow: inset 3px 0 0 var(--gold-deep); }

.tbl .idx, .tbl td.idx, .tbl .col-idx {
    font-family: var(--font-mono);
    color: var(--ink-7);
    letter-spacing: 0.04em;
    font-size: var(--tx-xs);
}
.tbl .host, .tbl td.host {
    color: var(--ink-10);
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tbl .host a { color: var(--ink-10); text-decoration: none; border-bottom: 1px dotted rgba(201,169,97,0.3); }
.tbl .host a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.host-cell { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tbl .text-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: 0.02em;
}
.tbl .text-alive { color: var(--moss); }
.tbl .muted-cell { color: var(--ink-8); }
.tbl .title-cell { color: var(--ink-9); }
.tbl .pw { color: var(--ink-10); cursor: pointer; font-family: var(--font-mono); }
.tbl .pw:hover { color: var(--gold); }
.tbl .pw.copied { color: var(--moss); }
.tbl .actions-cell { white-space: nowrap; display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.tbl .actions-cell .btn-xs + .btn-xs { margin-left: 0; }
.tbl-empty {
    text-align: center;
    padding: var(--s-7);
    color: var(--ink-7);
    font-family: var(--font-mono);
    font-size: var(--tx-sm);
}
.tbl-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) var(--s-4);
    background: var(--ink-1);
    border-bottom: var(--hair);
    gap: var(--s-3);
}
.tbl-count {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
    letter-spacing: 0.04em;
}
.tbl-count strong { color: var(--gold); font-weight: 500; }

/* === FORMS & INPUTS ========================================= */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-7);
}
.filter-chips {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.field-hint {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    color: var(--ink-7);
    letter-spacing: 0.04em;
    line-height: 1.6;
}
.field-hint code {
    background: var(--ink-5);
    color: var(--ink-10);
    padding: 1px 5px;
    font-family: var(--font-mono);
}
.input, .select {
    font-family: var(--font-mono);
    font-size: var(--tx-sm);
    color: var(--ink-10);
    background: var(--ink-5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 7px 10px;
    height: 32px;
    border-radius: 0;
    width: 100%;
    transition: border-color 0.15s ease;
}
.input:focus, .select:focus {
    outline: none;
    border-color: var(--gold);
}
.select { padding-right: 24px; appearance: none; cursor: pointer; }
.filterbar {
    display: flex;
    gap: var(--s-3);
    flex-wrap: wrap;
    align-items: flex-end;
    padding: var(--s-4);
    background: var(--ink-3);
    border: var(--hair);
    margin-bottom: var(--s-4);
}
.filterbar .field { min-width: 120px; }
.filterbar .field.grow { flex: 1; min-width: 200px; }

/* === DROPZONE =============================================== */
.dropzone {
    display: block;
    padding: var(--s-7) var(--s-6);
    border: 1px dashed rgba(201, 169, 97, 0.30);
    background: var(--ink-3);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.dropzone:hover { border-color: var(--gold); background: var(--ink-4); }
.dropzone.is-drag { border-color: var(--gold); background: var(--gold-trace); }
.dropzone input[type="file"] { display: none; }
.dropzone-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: var(--s-3);
}
.dropzone-title {
    font-family: var(--font-sans);
    font-size: var(--tx-lg);
    font-weight: 500;
    color: var(--ink-10);
    margin-bottom: 4px;
}
.dropzone-hint {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
    letter-spacing: 0.04em;
}
.dropzone-fname {
    margin-top: var(--s-4);
    font-family: var(--font-mono);
    font-size: var(--tx-sm);
    color: var(--ink-7);
}
.dropzone-fname.is-set { color: var(--gold); }

/* === PANEL ================================================== */
.panel {
    background: var(--ink-3);
    border: var(--hair);
    padding: var(--s-5);
    position: relative;
}
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: var(--hair);
}
.panel-title {
    font-family: var(--font-mono);
    font-size: var(--tx-sm);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-9);
}
.panel-meta {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-7);
    letter-spacing: 0.04em;
}

/* === MODAL ================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(6, 6, 10, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.modal {
    background: var(--ink-3);
    border: 1px solid rgba(201, 169, 97, 0.20);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.5);
    position: relative;
}
.modal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.6;
}
.modal-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-4) var(--s-5);
    border-bottom: var(--hair);
}
.modal-title {
    font-family: var(--font-mono);
    font-size: var(--tx-sm);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--ink-10);
    font-weight: 500;
}
.modal-close {
    background: transparent;
    border: none;
    color: var(--ink-7);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s ease;
}
.modal-close:hover { color: var(--rust); }
.modal-body {
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.modal-body .field-hint code { background: var(--ink-5); padding: 1px 5px; }
.modal-actions {
    display: flex;
    gap: var(--s-3);
    justify-content: flex-end;
    padding-top: var(--s-3);
    border-top: var(--hair-soft);
}

/* === HERO STAT (legacy support, used by some templates) ===== */
.hero-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-7);
    align-items: center;
    padding: var(--s-5);
    background: var(--ink-3);
    border: var(--hair);
    margin-bottom: var(--s-5);
}
.hero-stat-number {
    font-family: var(--font-mono);
    font-size: var(--tx-3xl);
    color: var(--gold-bright);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.hero-stat-number .unit {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-7);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-left: var(--s-3);
}
.hero-stat-label {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    color: var(--ink-7);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-top: 6px;
}
.hero-stat-bar {
    height: 4px;
    background: var(--ink-5);
    overflow: hidden;
    display: flex;
}

/* === BREAKDOWN BAR COLORS (legacy) === */
.col-alive,  .col-valid,  .col-done   { background: var(--moss); }
.col-dead,   .col-inv,    .col-err    { background: var(--rust); }
.col-redir,  .col-capt,   .col-2fa    { background: var(--sodium); }
.col-pend                              { background: var(--gold); }
.col-skip                              { background: var(--violet); }
.text-alive  { color: var(--moss); }
.text-valid  { color: var(--moss); }
.text-done   { color: var(--moss); }

/* === BREAKDOWN LIST (legacy bd-row) ========================= */
.bd-list { display: flex; flex-direction: column; gap: var(--s-2); }
.bd-row {
    display: grid;
    grid-template-columns: 24px 80px 1fr 60px;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--tx-sm);
}
.bd-letter {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-7);
    text-align: center;
}
.bd-name {
    font-family: var(--font-mono);
    color: var(--ink-9);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}
.bd-bar {
    height: 3px;
    background: var(--ink-5);
    overflow: hidden;
}
.bd-bar span {
    display: block;
    height: 100%;
    transition: width 0.4s ease;
}
.bd-value {
    font-family: var(--font-mono);
    color: var(--ink-10);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* === MISC HELPERS =========================================== */
.text-mono { font-family: var(--font-mono); }
.text-muted { color: var(--ink-7); }
.text-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

/* === GRIDS ================================================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 1200px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* === ANIMATIONS ============================================= */
.fade-in { animation: fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-in-1 { animation-delay: 0.05s; }
.fade-in-2 { animation-delay: 0.15s; }
.fade-in-3 { animation-delay: 0.25s; }
.fade-in-4 { animation-delay: 0.35s; }
@keyframes fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === EMPTY STATE ============================================ */
.empty {
    padding: var(--s-8);
    text-align: center;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    background: var(--ink-3);
    color: var(--ink-8);
}
.empty-title {
    font-family: var(--font-sans);
    font-size: var(--tx-lg);
    font-weight: 500;
    color: var(--ink-10);
    margin-bottom: var(--s-2);
}

/* === FORMAT EXAMPLE BLOCK (prepare page) ==================== */
.format-example {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
    line-height: 1.8;
    letter-spacing: 0.02em;
}
.format-example .cmt  { color: var(--ink-7); }
.format-example .url  { color: var(--steam); }
.format-example .lo   { color: var(--moss); }
.format-example .pw   { color: var(--sodium); }
.format-card { background: var(--ink-3); border: var(--hair); padding: var(--s-4); }

/* === ROW ACTION BUTTONS ===================================== */
.row-archive-btn, .block-btn, .star-btn, .tag-btn, .priority-add-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ink-7);
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s ease;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.row-archive-btn:hover, .block-btn:hover, .star-btn:hover, .tag-btn:hover, .priority-add-btn:hover {
    color: var(--gold);
    border-color: var(--gold);
}
.star-btn.is-on { color: var(--gold); }

/* === TAG CHIPS ============================================== */
.tag-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-left: 6px;
    vertical-align: middle;
}
.tag-chip {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-8);
    background: var(--ink-4);
    padding: 1px 6px;
    border: 1px solid var(--ink-5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.tag-chip:hover { color: var(--gold); border-color: var(--gold); }

/* === PRIORITY BADGES ======================================== */
.priority-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 1px 5px;
    background: var(--ink-4);
    color: var(--ink-9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-right: 4px;
    text-transform: uppercase;
}
.priority-5 { background: rgba(196, 104, 104, 0.18); color: var(--rust); border-color: rgba(196, 104, 104, 0.35); }
.priority-4 { background: rgba(214, 154, 92, 0.18); color: var(--sodium); border-color: rgba(214, 154, 92, 0.35); }
.priority-3 { background: rgba(201, 169, 97, 0.18); color: var(--gold); border-color: rgba(201, 169, 97, 0.35); }
.priority-2 { background: rgba(123, 163, 200, 0.18); color: var(--steam); border-color: rgba(123, 163, 200, 0.35); }
.priority-1 { background: var(--ink-5); color: var(--ink-8); }

/* === SORT LINKS ============================================= */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.sort-link:hover { color: var(--gold); }
.sort-mark { color: var(--gold); font-size: 10px; }

/* === BULK BAR (selection in tables) ========================= */
.bulk-bar {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    padding: var(--s-3) var(--s-4);
    background: var(--gold-trace);
    border-bottom: var(--hair-gold);
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--gold);
    letter-spacing: 0.06em;
}

/* === VIEWED MARKER ========================================== */
.viewed-bar {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    padding: 4px var(--s-3);
    border: 1px solid var(--ink-5);
    background: var(--ink-1);
    color: var(--ink-9);
    font-size: var(--tx-xs);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-right: var(--s-3);
    font-family: var(--font-mono);
}
.viewed-bar .viewed-count strong { color: var(--moss); font-size: var(--tx-sm); }

/* === PAGER ================================================== */
.pager {
    display: flex;
    gap: var(--s-2);
    justify-content: center;
    align-items: center;
    margin-top: var(--s-5);
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    color: var(--ink-8);
}
.pager a, .pager span {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.15s ease;
}
.pager a:hover { color: var(--gold); border-color: var(--gold); }
.pager-disabled { color: var(--ink-7); }
.pager-current { color: var(--gold); border-color: var(--gold); }

/* === HOVER PREVIEW (screenshot) ============================= */
.shot-preview {
    position: fixed;
    z-index: 1000;
    width: 640px;
    max-height: 380px;
    background: var(--ink-1);
    border: 1px solid var(--gold);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    padding: 4px;
    pointer-events: none;
}
.shot-preview img { max-width: 100%; max-height: 372px; display: block; }

/* === LOGIN page ============================================= */
.login-body {
    background: var(--ink-2);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-6);
}
.login-wrap { width: 100%; max-width: 360px; }
.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--tx-md);
    font-weight: 500;
    color: var(--gold);
    margin-bottom: var(--s-5);
    letter-spacing: 0.06em;
}
.login-card {
    background: var(--ink-3);
    border: 1px solid rgba(201, 169, 97, 0.20);
    padding: var(--s-6);
    position: relative;
}
.login-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.6;
}
.login-card-title {
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    text-transform: uppercase;
    letter-spacing: 0.20em;
    color: var(--ink-7);
    margin-bottom: var(--s-5);
}
.login-form { display: flex; flex-direction: column; gap: var(--s-3); }
.login-error {
    color: var(--rust);
    font-family: var(--font-mono);
    font-size: var(--tx-xs);
    margin-top: var(--s-3);
}
.login-foot {
    margin-top: var(--s-4);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    color: var(--ink-7);
    letter-spacing: 0.10em;
}

/* === OVERVIEW LEGACY BLOCKS ================================= */
.overview-block { display: flex; flex-direction: column; gap: var(--s-2); }
.overview-label {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    color: var(--ink-7);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.overview-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.overview-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; }

/* === STAT CELLS ============================================= */
.stat-row { display: flex; gap: var(--s-5); }
.stat-cell { display: flex; flex-direction: column; gap: 4px; }
.stat-label {
    font-family: var(--font-mono);
    font-size: var(--tx-xxs);
    color: var(--ink-7);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.stat-value {
    font-family: var(--font-mono);
    font-size: var(--tx-lg);
    color: var(--ink-10);
    font-variant-numeric: tabular-nums;
}

/* === Mobile-ish breakpoints ================================= */
@media (max-width: 1100px) {
    .topbar { gap: var(--s-4); padding: 0 var(--s-4); }
    .topbar-meta { display: none; }
    .kpi-strip { grid-template-columns: 1fr 1fr; }
    .main { padding: var(--s-4); }
}