/* ── Online/Offline Status Dots ── */
.status-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:0.35rem; vertical-align:middle; flex-shrink:0; }
.status-dot.status-online { background:var(--green); box-shadow:0 0 4px var(--green); }
.status-dot.status-offline { background:var(--red); box-shadow:0 0 4px var(--red); }

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Phase 6d a11y — global keyboard focus ring ────────
   Applies to every focusable element on admin pages. base.html sets a
   per-page rule too but this catches templates that bypass base.html
   (login, install, embedded reports). */
:focus-visible {
  outline: 2px solid var(--accent, #4a9eff);
  outline-offset: 2px;
}

/* ── Subtle scrollbars ──
   macOS shows chunky scrollbars whenever "Always show scrollbars" is set.
   Override across the whole app: thin (8px), translucent thumb, transparent
   track. Functional but invisible until you hover. Firefox uses
   scrollbar-width / scrollbar-color; WebKit/Blink use the pseudo-elements. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(139,143,163,0.30) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(139,143,163,0.30);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(139,143,163,0.55); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }

:root {
    --bg: #0f1117;
    --bg-card: #1a1d27;
    --bg-input: #232733;
    --border: #2d3140;
    --text: #e1e4ed;
    --text-muted: #8b8fa3;
    --primary: #4a9eff;
    --primary-hover: #6bb2ff;
    --accent: #4a9eff;
    --danger: #e5484d;
    --danger-hover: #f2555a;
    --green: #34c759;
    --yellow: #ff9f0a;
    --red: #ff3b30;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.25);
    --transition: 0.2s ease;
}

/* ── Sidebar dark variants ── */
[data-variant="blueblack"] {
    --bg: #070b14; --bg-card: #0e1321; --bg-input: #161d30;
    --border: #1d2540; --text: #eef1f8; --text-muted: #94a0bd;
}
[data-variant="neutral"] {
    --bg: #0b0b0d; --bg-card: #131317; --bg-input: #1b1c21;
    --border: #232429; --text: #f0efec; --text-muted: #9ca0a8;
}
[data-variant="warm"] {
    --bg: #0a0807; --bg-card: #0e0c0b; --bg-input: #181513;
    --border: #24201d; --text: #f5efe6; --text-muted: #a9a099;
}

/* ── Accent colors ── */
[data-accent="cyan"]    { --accent: #4a9eff; --primary: #4a9eff; --primary-hover: #6bb2ff; }
[data-accent="orange"]  { --accent: #fb923c; --primary: #fb923c; --primary-hover: #fdad6e; }
[data-accent="indigo"]  { --accent: #818cf8; --primary: #818cf8; --primary-hover: #a5adff; }
[data-accent="emerald"] { --accent: #34d399; --primary: #34d399; --primary-hover: #6ee7b7; }
[data-accent="rose"]    { --accent: #fb7185; --primary: #fb7185; --primary-hover: #fda4af; }

/* ── Light Mode ── */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #f5f5f7;
        --bg-card: #ffffff;
        --bg-input: #f0f0f2;
        --border: #d2d2d7;
        --text: #1d1d1f;
        --text-muted: #86868b;
        --primary: #0071e3;
        --primary-hover: #0077ed;
        --danger: #ff3b30;
        --danger-hover: #ff453a;
        --green: #34c759;
        --yellow: #ff9f0a;
        --red: #ff3b30;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
        --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    }
}

/* Manual theme override via data attribute */
[data-theme="light"] {
    --bg: #f2f3f7;
    --bg-card: #ffffff;
    --bg-input: #e8eaf0;
    --border: #c8ccd8;
    --text: #111318;
    --text-muted: #5a6074;
    --accent: #0071e3;
    --primary: #0071e3;
    --primary-hover: #0077ed;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --green: #16a34a;
    --yellow: #d97706;
    --red: #dc2626;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.15);
}
[data-theme="dark"] {
    --bg: #0f1117;
    --bg-card: #1a1d27;
    --bg-input: #232733;
    --border: #2d3140;
    --text: #e1e4ed;
    --text-muted: #8b8fa3;
    --accent: #4a9eff;
    --primary: #4a9eff;
    --primary-hover: #6bb2ff;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.25);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.01em;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary-hover); }

/* ── Sidebar ── */
.sidebar {
    width: 220px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 1.5rem 0 0;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sidebar-header {
    padding: 0 1.25rem 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

.sidebar-header h1 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}

.sidebar .subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.sidebar-org-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sidebar-edit-org {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.sidebar-edit-org:hover {
    opacity: 1;
    color: var(--primary);
}
/* Restart indicator */
.restart-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: var(--red, #e74c3c);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    animation: restart-pulse 1.5s ease-in-out infinite;
}
.restart-indicator:hover {
    animation: none;
    opacity: 0.9;
}
.agent-build-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #111;
    background: var(--yellow, #f0ad4e);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    animation: restart-pulse 1.8s ease-in-out infinite;
}
.agent-build-indicator:hover {
    animation: none;
    filter: brightness(1.05);
}
.agent-build-indicator[disabled] {
    cursor: wait;
    opacity: 0.7;
    animation: none;
}
@keyframes restart-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sidebar ul { list-style: none; flex: 1; overflow-y: auto; }

/* ── Sidebar nav icons ── */
.snav-icon {
    width: 14px; height: 14px; flex-shrink: 0;
    color: var(--text-muted);
    transition: color 0.12s;
    stroke: currentColor;
    display: inline-block;
    vertical-align: middle;
}
.sidebar li a:hover .snav-icon { color: var(--text); }
.sidebar li a.active .snav-icon { color: var(--accent); }
.sidebar-submenu-toggle:hover .snav-icon { color: var(--text); }
.sidebar-submenu details[open] > summary .snav-icon { color: var(--accent); }

.sidebar li a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0.42rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: background 0.12s, color 0.12s;
    border-radius: 7px;
    margin: 1px 8px;
    border-left: 2px solid transparent;
}

.sidebar li a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.sidebar li a.active {
    color: var(--text);
    background: rgba(255,255,255,0.07);
    border-left: 2px solid var(--accent);
    font-weight: 500;
    padding-left: calc(0.85rem - 2px);
}
[data-theme="light"] .sidebar li a.active { background: rgba(0,113,227,0.08); }

/* ── Sidebar Sub-menus ── */
.sidebar-submenu { list-style: none; }
.sidebar-submenu details { margin: 0; }
.sidebar-submenu details summary { list-style: none; }
.sidebar-submenu details summary::-webkit-details-marker { display: none; }
.sidebar-submenu-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0.42rem 0.85rem;
    margin: 1px 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    border-radius: 7px;
    user-select: none;
}
.sidebar-submenu-toggle .sidebar-caret { margin-left: auto; }
.sidebar-submenu-toggle:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.sidebar-caret { font-size: 0.6rem; opacity: 0.5; transition: transform 0.2s; }
.sidebar-submenu details:not([open]) .sidebar-caret { transform: rotate(-90deg); }
.sidebar-submenu-items { list-style: none; padding: 0; margin: 0; }
.sidebar-submenu-items li a {
    padding-left: 2rem;
    font-size: 0.775rem;
    border-radius: 0 6px 6px 0;
    border-left: 2px solid rgba(255,255,255,0.08);
    margin-left: 1.35rem;
    margin-right: 8px;
}
.sidebar-submenu-items li a:hover {
    background: rgba(255,255,255,0.05);
    border-left-color: rgba(255,255,255,0.25);
}
.sidebar-submenu-items li a.active {
    color: var(--text);
    background: rgba(255,255,255,0.07);
    border-left-color: var(--accent);
    font-weight: 500;
}
[data-theme="light"] .sidebar-submenu-items li a { border-left-color: rgba(0,0,0,0.1); }
[data-theme="light"] .sidebar-submenu-items li a:hover { background: rgba(0,0,0,0.04); border-left-color: rgba(0,0,0,0.25); }
[data-theme="light"] .sidebar-submenu-items li a.active { background: rgba(0,113,227,0.07); }

/* ── Content ── */
.content {
    flex: 1;
    padding: calc(48px + 1.5rem) 2rem 2rem 2rem;
    margin-left: 220px;
    max-width: 1400px;
    min-width: 0;
    overflow-x: hidden;
}

/* ── Top Bar ──────────────────────────────────────────────────────────────── */
.sk-topbar {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 1.25rem;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
    position: fixed;
    top: 0;
    left: 220px;
    right: 0;
    z-index: 200;
}
.sk-topbar-breadcrumbs {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
}
.sk-topbar-breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    transition: color 0.15s;
}
.sk-topbar-breadcrumbs a:hover { color: var(--text); }
.sk-topbar-breadcrumbs .sk-bc-sep {
    color: var(--border);
    flex-shrink: 0;
    font-size: 0.9rem;
}
.sk-topbar-breadcrumbs .sk-bc-current {
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.sk-topbar-stats {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    z-index: 3;
}
.sk-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.sk-topbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    height: 32px;
}
.sk-topbar-btn:hover {
    background: var(--bg-input);
    color: var(--text);
    border-color: rgba(128,128,128,0.6);
}
.sk-assist-btn { border-color: rgba(74,158,255,0.4); color: var(--accent,#4a9eff); }
.sk-assist-btn:hover { background: rgba(74,158,255,0.1); border-color: var(--accent,#4a9eff); }
.sk-topbar .search-toggle {
    border-radius: 7px;
    width: auto;
    height: 32px;
    padding: 0 10px;
    gap: 6px;
}
.sk-topbar .search-toggle .search-shortcut { display: inline; }

/* Topbar stat pills */
.sk-tb-stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.sk-tb-stat:hover { color: var(--text); border-color: rgba(128,128,128,0.6); }
.sk-tb-stat-warn { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.35); color: #f59e0b; }
.sk-tb-stat-warn:hover { background: rgba(245,158,11,0.18); }
.sk-tb-stat-info { background: rgba(74,158,255,0.08); border-color: rgba(74,158,255,0.3); color: var(--accent,#4a9eff); }
.sk-tb-stat-info:hover { background: rgba(74,158,255,0.15); }
/* Rollout indicators — amber pulse when running, green arrow when upgrade available. */
.sk-tb-stat-rollout { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.4); color: #f59e0b; gap: 4px; }
.sk-tb-stat-rollout:hover { background: rgba(245,158,11,0.18); }
.sk-tb-stat-ai {
    background: rgba(124,58,237,0.10);
    border-color: rgba(124,58,237,0.45);
    color: #a78bfa;
    gap: 6px;
    cursor: default;
}
.sk-tb-ai-spinner {
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid rgba(124,58,237,0.25);
    border-top-color: #a78bfa;
    animation: sk-tb-ai-spin 0.9s linear infinite;
    display: inline-block;
}
.sk-tb-ai-detail {
    font-size: 0.78rem; color: var(--text-muted, #9ca3af);
    max-width: 260px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
@keyframes sk-tb-ai-spin {
    to { transform: rotate(360deg); }
}
.sk-tb-rollout-dot { width:6px; height:6px; border-radius:50%; background:#f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,0.5); animation: sk-tb-rollout-pulse 1.8s ease-in-out infinite; flex-shrink:0; }
@keyframes sk-tb-rollout-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); } 50% { box-shadow: 0 0 0 5px rgba(245,158,11,0); } }
.sk-tb-stat-upgrade { background: rgba(63,185,80,0.10); border-color: rgba(63,185,80,0.4); color: #3fb950; gap: 4px; }
.sk-tb-stat-upgrade:hover { background: rgba(63,185,80,0.18); }
.sk-tb-label { font-weight: 400; opacity: 0.8; }
.sk-tb-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.led-green { background: #3fb950; box-shadow: 0 0 5px rgba(63,185,80,0.5); }
.led-amber { background: #f59e0b; box-shadow: 0 0 5px rgba(245,158,11,0.4); }
.led-gray  { background: #6b7280; }

/* ── SiteKings Guidance side panel ───────────────────────────────────────── */
.sk-assist-panel-shell {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0,0,0,0.3);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.sk-assist-panel-shell.open { right: 0; }
.sk-assist-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 1999;
    display: none;
}
.sk-assist-backdrop.open { display: block; }
.sk-assist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(18, 22, 34, 0.92);
}
.sk-assist-title-row,
.sk-assist-actions,
.sk-assist-input-row,
.sk-assist-feedback,
.sk-assist-export-row,
.sk-assist-chip-row,
.sk-assist-tool-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sk-assist-title-row { min-width: 0; flex: 1; }
.sk-assist-title {
    font-weight: 650;
    color: var(--text);
    white-space: nowrap;
}
.sk-assist-context,
.sk-assist-pageinfo {
    color: var(--text-muted);
    font-size: 0.78rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sk-assist-new-btn,
.sk-assist-icon-btn,
.sk-assist-close-btn,
.sk-assist-send,
.sk-assist-export-btn,
.sk-assist-suggest-btn,
.sk-assist-chip {
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.35rem 0.55rem;
}
.sk-assist-close-btn {
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.22rem 0.5rem;
}
.sk-assist-send {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.sk-assist-history,
.sk-assist-messages {
    overflow-y: auto;
    padding: 0.85rem;
}
.sk-assist-history {
    max-height: 35vh;
    border-bottom: 1px solid var(--border);
    background: rgba(0,0,0,0.12);
}
.sk-assist-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.sk-assist-input-wrap {
    border-top: 1px solid var(--border);
    padding: 0.85rem;
    background: rgba(18, 22, 34, 0.92);
}
.sk-assist-input {
    min-width: 0;
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    padding: 0.55rem 0.65rem;
}
.sk-assist-welcome,
.sk-assist-msg,
.sk-assist-tool-msg,
.sk-assist-tool-card,
.sk-assist-result-card,
.sk-assist-history-empty,
.sk-assist-loading {
    border: 1px solid var(--border);
    border-radius: 9px;
    background: rgba(255,255,255,0.025);
    padding: 0.75rem;
}
.sk-assist-msg-user {
    align-self: flex-end;
    background: rgba(74,158,255,0.11);
    border-color: rgba(74,158,255,0.28);
}
.sk-assist-msg-response { align-self: flex-start; }
.sk-assist-msg-body {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
.sk-assist-msg-badge,
.sk-assist-tool-status,
.sk-assist-tool-provider,
.assist-status-line {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-family: var(--mono, monospace);
}
.sk-assist-tool-status.is-ok { color: #3fb950; }
.sk-assist-tool-status.is-error { color: #ef4444; }
.sk-assist-tool-status.is-pending { color: #f59e0b; }
.sk-assist-tool-pre,
.sk-assist-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}
.sk-assist-tool-pre {
    margin: 0.5rem 0 0;
    padding: 0.6rem;
    border-radius: 7px;
    background: rgba(0,0,0,0.28);
    color: var(--text);
    font-size: 0.76rem;
}
.sk-assist-suggestions,
.sk-assist-result-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.65rem;
}
.sk-assist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.sk-assist-table th,
.sk-assist-table td {
    padding: 0.35rem 0.45rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.sk-assist-history-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.25rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}
.sk-assist-dots span {
    animation: skGuideDotPulse 1.2s ease-in-out infinite;
}
.sk-assist-dots span:nth-child(2) { animation-delay: 0.15s; }
.sk-assist-dots span:nth-child(3) { animation-delay: 0.3s; }

/* Global Search */
/* Apple-spotlight style global search. Collapsed state is a small
   circular icon button pinned top-right; click (or ⌘/Ctrl+K) expands
   it into a full overlay modal that takes focus.
   z-index MUST be higher than the .search-backdrop (10000) because
   the container creates a stacking context and children can't escape
   it. Without this, the expanded .search-bar (z-index 10001) is
   capped at 50 globally and the dim backdrop covers it. */
.global-search-container {
    position: relative;
    z-index: 10002;
    /* Guard against accidental click-capture if this flex item stretches:
       only explicit controls inside should receive pointer events. */
    pointer-events: none;
}
.global-search-container > * { pointer-events: auto; }
.search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-card);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: var(--shadow-sm);
}
.search-toggle:hover {
    border-color: var(--primary);
    color: var(--text);
    transform: scale(1.05);
}
/* Hide the "Ctrl+K" label inside the collapsed circle — only keep
   the icon visible. The label lives inside the expanded search bar
   as a dismissal hint instead. */
.search-toggle .search-shortcut { display: none; }
.search-shortcut {
    font-size: 0.7rem;
    padding: 0.1rem 0.3rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: monospace;
}
/* Expanded search: Apple Spotlight style — centered overlay with a
   soft backdrop blur, floating above the content. */
.search-bar {
    position: fixed;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: min(620px, 92vw);
    padding: 0.8rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
    z-index: 10001;
    animation: searchFadeIn 0.15s ease-out;
}
@keyframes searchFadeIn {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.search-bar .search-bar-icon { width: 20px; height: 20px; }
.search-bar input { font-size: 1.05rem; padding: 0.15rem 0; }
.search-bar-icon { flex-shrink: 0; color: var(--text-muted); }
.search-bar input {
    flex: 1;
    min-width: 8ch;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    outline: none;
}
.search-bar.search-scoped input {
    display: block;
    flex: 1 1 auto;
    min-width: 8ch;
}
/* The Spotlight search field is a naked input inside the .search-bar box.
   Win over the global `input[type="text"]` form-control rule (same
   specificity, defined later) so the field stays borderless/transparent
   instead of rendering a second boxed input — focused or not. */
#global-search,
#global-search:focus {
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
}
.search-kbd {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 3px;
    font-family: monospace;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}
.search-dropdown {
    /* Spotlight-style: anchored to the viewport just below the
       centered .search-bar so results float as an extension of it. */
    display: none;
    position: fixed;
    top: calc(15vh + 64px);
    left: 50%;
    transform: translateX(-50%);
    width: min(620px, 92vw);
    max-width: 92vw;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset;
    z-index: 10001;
    max-height: 60vh;
    overflow-y: auto;
    animation: searchFadeIn 0.15s ease-out;
}
/* Backdrop shown when the search is open. Plain div inserted by JS. */
.search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 10000;
    animation: searchFadeIn 0.15s ease-out;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--bg-input); }
.search-type-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}
.search-type-machine { background: rgba(46,204,113,0.15); color: #2ecc71; }
.search-type-ticket { background: rgba(155,89,182,0.15); color: #9b59b6; }
.search-type-asset { background: rgba(241,196,15,0.15); color: #f1c40f; }
.search-type-user { background: rgba(0,188,212,0.15); color: #00bcd4; }
.search-type-device { background: rgba(92,107,192,0.15); color: #5c6bc0; }
.search-type-invoice { background: rgba(243,156,18,0.15); color: #f39c12; }
.search-type-estimate { background: rgba(134,239,172,0.15); color: #86efac; }
.search-type-customer { background: rgba(121,192,255,0.15); color: #79c0ff; }
.search-type-org { background: rgba(121,192,255,0.15); color: #79c0ff; }
.search-type-location { background: rgba(0,150,136,0.15); color: #009688; }
.search-type-group { background: rgba(91,138,245,0.15); color: #5b8af5; }
.search-type-policy { background: rgba(121,134,148,0.15); color: #798694; }
.search-type-kb-external { background: rgba(64,156,255,0.15); color: #409cff; }
.search-type-subscription { background: rgba(46,204,113,0.15); color: #2ecc71; }
.search-type-asset-external { background: rgba(243,156,18,0.15); color: #f39c12; }
.search-title { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-subtitle { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-empty { padding: 0.75rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

.sk-search-scope-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 12rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(74,158,255,0.3);
    background: rgba(74,158,255,0.12);
    color: var(--accent,#4a9eff);
    font-size: 0.7rem;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.sk-search-scope-tag::after { content: '\2715'; opacity: 0.72; font-size: 0.62rem; }
.sk-search-scope-tag.is-static { cursor: default; }
.sk-search-scope-tag.is-static::after { content: ''; display: none; }
.sk-search-scope-tag.scope-mach,
.sk-search-scope-tag.scope-machine { border-color: rgba(46,204,113,0.34); background: rgba(46,204,113,0.12); color: #2ecc71; }
.sk-search-scope-tag.scope-ticket { border-color: rgba(155,89,182,0.34); background: rgba(155,89,182,0.12); color: #b68cff; }
.sk-search-scope-tag.scope-user { border-color: rgba(0,188,212,0.34); background: rgba(0,188,212,0.12); color: #3dd8e8; }
.sk-search-scope-tag.scope-new { border-color: rgba(245,158,11,0.34); background: rgba(245,158,11,0.12); color: #f59e0b; }
.sk-recent-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
}
.search-prefix-panel {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.search-prefix-title,
.search-section-label {
    margin: 0.2rem 0 0.45rem;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sk-prefix-chip {
    display: inline-flex;
    align-items: center;
    margin: 0.15rem 0.2rem 0.15rem 0;
    padding: 0.16rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.74rem;
}
.sk-prefix-chip.is-active,
.sk-prefix-chip:hover {
    color: var(--text);
    border-color: rgba(74,158,255,0.4);
    background: rgba(74,158,255,0.10);
}
.search-action-row,
.search-create-row {
    justify-content: space-between;
}
/* "See all results for <query> ›" must read as one flowing line — not
   space-between, which flung the query to the far right edge. */
.search-see-all {
    justify-content: flex-start;
}
.search-action-icon,
.search-create-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}
.search-action-chip {
    margin-left: auto;
}
.search-see-all {
    color: var(--accent,#4a9eff);
    font-weight: 650;
}
.search-see-all-query {
    color: var(--text);
    font-weight: 650;
}

/* Global search overlay — phone hardening.
   The base .search-bar / .search-dropdown widths are already fluid
   (min(620px, 92vw)) and a 768px media query further clamps them, so
   this block only adds what genuinely needs to differ on a phone:
   the SCOPE chip row must wrap cleanly with tappable chips, the
   results list must scroll within the viewport, and nothing may
   trigger horizontal page scroll. */
@media (max-width: 600px) {
    /* SCOPE chip row: explicit flex-wrap with a consistent gap so the
       14 scope chips reflow onto multiple lines instead of overflowing. */
    .search-prefix-panel {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem;
    }
    /* The "Scopes" label spans the full row above the chips. */
    .search-prefix-panel .search-prefix-title {
        flex: 1 0 100%;
        margin-bottom: 0;
    }
    /* Keep chips comfortably tappable — drop the horizontal margin
       (the flex gap handles spacing) and give them a bit more height. */
    .sk-prefix-chip {
        margin: 0;
        padding: 0.32rem 0.6rem;
        font-size: 0.78rem;
    }
    /* Active scope pill: allow it to wrap with the input rather than
       forcing a single overflowing line. */
    .search-bar { flex-wrap: wrap; }
    .sk-search-scope-tag { max-width: 100%; }
    /* Results list scrolls within the viewport; cap height a touch
       tighter so it never runs off a short phone screen. */
    .search-dropdown { max-height: 70vh; }
    /* Results rows: let long titles/subtitles wrap instead of being
       clipped on a narrow screen. */
    .search-title, .search-subtitle { white-space: normal; }
}

.shell-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
}
.shell-modal-content {
    position: fixed;
    inset: 5vh 5vw;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    box-shadow: 0 24px 70px rgba(0,0,0,0.48);
    overflow: hidden;
}
.shell-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--border);
}
.shell-modal-frame {
    width: 100%;
    height: calc(100% - 36px);
    border: 0;
    background: #020617;
}

.keyboard-help-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10020;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,0.52);
}
.keyboard-help-card {
    width: min(560px, 96vw);
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-card);
    padding: 1rem;
    box-shadow: 0 24px 70px rgba(0,0,0,0.48);
}
.keyboard-help-title {
    margin-top: 0;
}
.keyboard-help-table {
    width: 100%;
    border-collapse: collapse;
}
.keyboard-help-table td {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border);
}
.keyboard-help-table kbd {
    display: inline-block;
    min-width: 2rem;
    padding: 0.12rem 0.36rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--mono, monospace);
    text-align: center;
}
.keyboard-help-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.85rem;
}

h2 { font-size: 1.5rem; margin-bottom: 1.25rem; font-weight: 600; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.75rem; font-weight: 600; }
hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.sk-skip-link {
    position: fixed;
    left: 1rem;
    top: 0.5rem;
    z-index: 10040;
    transform: translateY(-160%);
    padding: 0.45rem 0.7rem;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    transition: transform 0.12s ease;
}
.sk-skip-link:focus { transform: translateY(0); }
.sk-page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 10030;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    transform: translateX(-100%);
    transition: opacity 0.15s ease;
}
.sk-page-loader.is-active {
    opacity: 1;
    animation: skPageLoaderSlide 1.1s ease-in-out infinite;
}
@keyframes skPageLoaderSlide {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
.sk-impersonate-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 36px;
    padding: 0.35rem 1rem;
    background: #7c2d12;
    color: #fff7ed;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}
body.sk-impersonating { padding-top: 36px; }
.sk-impersonate-stop {
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 6px;
    background: rgba(255,255,255,0.12);
    color: #fff;
    padding: 0.22rem 0.5rem;
    cursor: pointer;
}
.sidebar-live-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.15rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}
.sidebar-live-badge:empty { display: none; }
.sidebar-live-badge.is-ticket { background: rgba(74,158,255,0.16); color: var(--accent,#4a9eff); }
.sidebar-live-badge.is-alert { background: rgba(245,158,11,0.16); color: #f59e0b; }
.sk-sidebar-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.admin-legacy-note {
    color: var(--text-muted);
    font-size: 0.72rem;
    vertical-align: super;
}
.sync-drift-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(245,158,11,0.36);
    border-radius: 9px;
    background: rgba(245,158,11,0.10);
    color: #f59e0b;
}
.sync-drift-banner.is-unreachable {
    border-color: rgba(239,68,68,0.38);
    background: rgba(239,68,68,0.11);
    color: #ef4444;
}
.sync-drift-copy {
    flex: 1 1 auto;
    min-width: 0;
}
.sync-drift-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex: 0 0 auto;
}
.sync-drift-restart-btn {
    background: rgba(245,158,11,0.18);
    border: 1px solid rgba(245,158,11,0.55);
    color: #fbbf24;
    white-space: nowrap;
}
.sync-drift-restart-btn:disabled {
    opacity: 0.65;
    cursor: wait;
}
.sync-drift-settings-link {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-decoration: underline;
}
.sync-drift-restart-status {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
}
.sync-drift-cadence {
    color: var(--text-muted);
    font-size: 0.72rem;
}
.page-header h2 { margin-bottom: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.2; }
.page-header > div, .page-header > form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* Templates that embed a description `<p>` inside .page-header — force it
   onto its own row below the title rather than squeezing it next to the h2
   under the flex layout. Many admin pages do this. */
.page-header > p { flex-basis: 100%; margin: 0; }

/* ── Flash messages ── */
.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    animation: flashSlideIn 0.3s ease;
}
@keyframes flashSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.flash-success { background: rgba(52,199,89,0.12); border: 1px solid var(--green); color: var(--green); }
.flash-error { background: rgba(255,59,48,0.12); border: 1px solid var(--red); color: var(--red); }
.flash-warning { background: rgba(255,159,10,0.12); border: 1px solid var(--yellow); color: var(--yellow); }
.flash-info { background: rgba(0,113,227,0.12); border: 1px solid var(--primary); color: var(--primary); }

/* ── Stats (Bundle 29 polish — give cards more breathing room + icon slot) ── */
.stats-grid {
    display: grid;
    /* Floor bumped from 180 → 220 because cards carry sub-content
       (e.g. "(N urgent)", transport pills) that cramped at 180. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.25rem;
    text-align: left;
    /* Bundle 44: bumped from 100 → 120 so cards with single-line
       labels match the height of cards with multi-line sub-content
       (transport pills, aging counters, breakdown chips). */
    min-height: 120px;
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.7rem;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

/* Icon slot — small accent chip on the left of each card. Cards
   without .stat-card-icon still render correctly (the column
   collapses to the number cell since the empty grid cell takes 0
   width). Bundle 44: shrunk from 40px chip / 22px svg to 28px / 16px
   so the icon reads as a tasteful accent, not a focal element. */
.stat-card-icon {
    grid-row: 1 / span 2;
    grid-column: 1;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-card-icon svg { width: 16px; height: 16px; }
.stat-card-icon.green  { background: rgba(34, 197, 94, 0.13);  color: #22c55e; }
.stat-card-icon.amber  { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
.stat-card-icon.red    { background: rgba(239, 68, 68, 0.14);  color: #ef4444; }
.stat-card-icon.purple { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.stat-card-icon.cyan   { background: rgba(34, 211, 238, 0.14); color: #22d3ee; }
.stat-card-icon.muted  { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

.stat-number {
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
    grid-column: 2;
}
.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0.1rem 0 0;
    grid-column: 2;
    line-height: 1.3;
}

.stat-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.stat-card-link:hover .stat-card {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    transition: all var(--transition);
}

@media (max-width: 600px) {
    /* Stack vertically on mobile — full-width cards. */
    .stats-grid { grid-template-columns: 1fr !important; }
    .stat-card { grid-template-columns: 28px 1fr; }
}

/* ── Tables ── */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.88rem;
    box-shadow: var(--shadow-sm);
}

thead { background: rgba(255,255,255,0.03); position: sticky; top: 0; z-index: 5; }
th { text-align: left; padding: 0.7rem 0.85rem; color: var(--text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
td { padding: 0.6rem 0.85rem; border-top: 1px solid var(--border); transition: background var(--transition); }
tr:hover td { background: rgba(255,255,255,0.02); }
tr[data-href]:hover td { background: rgba(0,113,227,0.06); cursor: pointer; }
.nowrap { white-space: nowrap; }
.actions { white-space: nowrap; }
.row-disabled td { opacity: 0.5; }

/* ── Log table ── */
.log-table { font-size: 0.82rem; }
.log-table td { padding: 0.4rem 0.7rem; font-family: 'SF Mono', 'Fira Code', monospace; }
.log-ERROR td { background: rgba(229,72,77,0.06); }
.log-WARN td { background: rgba(245,166,35,0.06); }

/* ── Badges ── */
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-INFO { background: rgba(91,138,245,0.15); color: var(--primary); }
.badge-estimate { background: rgba(139,92,246,0.18); color: #a78bfa; }
.badge-WARN { background: rgba(245,166,35,0.15); color: var(--yellow); }
.badge-ERROR { background: rgba(229,72,77,0.15); color: var(--red); }
.badge-DEBUG { background: rgba(139,143,163,0.15); color: var(--text-muted); }
.badge-unknown { background: rgba(139,143,163,0.15); color: var(--text-muted); }
.badge-admin { background: rgba(245,166,35,0.15); color: var(--yellow); }

/* ── Buttons ──
   Sized + radiused to match .skui-btn (see app/templates/_macros/ui.html).
   Keeps legacy .btn / .btn-primary / .btn-small markup but renders with the
   same visual weight as the macro-emitted buttons, so reskinned and legacy
   pages don't clash side-by-side. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, transform 0.12s;
    user-select: none;
}
.btn:hover { background: var(--bg-input); color: var(--text); border-color: var(--accent, var(--primary)); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); opacity: 0.9; }
.btn:focus-visible { outline: 2px solid var(--accent, var(--primary)); outline-offset: 2px; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-small, .btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn-small.active, .btn-sm.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-link { background: none; border: none; padding: 0; cursor: pointer; font-size: 0.85rem; font-weight: 600; }
.text-green { color: var(--green); }
.text-red { color: var(--red); }

.inline { display: inline; }

/* ── Forms ── */
.form { max-width: 560px; }

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text);
}

.form-group small {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group input[type="search"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

/* ── Global form element theming ── */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="tel"], input[type="url"],
input[type="date"], input[type="datetime-local"], input[type="search"],
input[type="file"], select, textarea {
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus,
input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="search"]:focus,
select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(91,138,245,0.2);
}
/* Ensure selects render properly on dark theme */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b8fa3' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 2rem;
}
select option {
    background: var(--bg-card);
    color: var(--text);
}
/* Disabled state for all inputs */
input:disabled, select:disabled, textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.form-group input:disabled {
    opacity: 0.5;
}

.form-group textarea { resize: vertical; }

.form-row { display: flex; gap: 2rem; }

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary);
}

.password-field {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.password-field input { flex: 1; }

.form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* ── Filter bar ── */
.filter-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-bar select {
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
}

.input-small {
    width: 70px;
    padding: 0.3rem 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
}

/* ── Misc ── */
.empty { color: var(--text-muted); font-style: italic; padding: 2rem 0; }
.hint { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; }

.machine-info {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.code-block {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 1rem;
}
.code-block label { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.5rem; display: block; }
.code-block code, .code-block pre {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Install page ── */
.install-methods { display: flex; flex-direction: column; gap: 1.5rem; margin: 1.5rem 0; }

.install-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}

.install-card h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.install-card p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.75rem; }

.install-steps ol {
    margin: 0.75rem 0 0 1.25rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}
.install-steps ol li { margin-bottom: 0.35rem; }
.install-steps ol li code { background: var(--bg-input); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.82rem; }

.btn-large { padding: 0.7rem 1.5rem; font-size: 1rem; }

.config-table { max-width: 560px; }
.config-table td { padding: 0.5rem 0.85rem; }
.config-table td:first-child { width: 140px; color: var(--text-muted); }

.checklist { margin: 0.75rem 0 0 1.25rem; font-size: 0.9rem; line-height: 1.8; }
.checklist li { color: var(--text-muted); }

/* ── Login page ── */
.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--bg);
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 380px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.login-card h1 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.login-subtitle { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.5rem; }

.login-form { text-align: left; }
.login-form .form-group { margin-bottom: 1rem; }
.login-form input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9rem;
}
.login-form input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(91,138,245,0.2); }

.btn-full { width: 100%; text-align: center; margin-top: 0.5rem; }

/* ── SSO Login Buttons ── */
.login-sso-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}
.login-sso-divider::before,
.login-sso-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--border);
}
.login-sso-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.btn-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 1rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.btn-sso:hover:not(:disabled) {
    border-color: var(--primary);
    background: rgba(91,138,245,0.06);
}
.btn-sso-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sso-badge {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    background: rgba(139,143,163,0.2);
    color: var(--text-muted);
    margin-left: auto;
}

/* ── Sidebar footer ── */
.sidebar-footer {
    flex-shrink: 0;
    padding: 0.55rem 0.75rem 0.65rem;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--bg-card);
}
.sidebar-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 0.45rem;
}
.sidebar-user-status-row {
    min-width: 0;
}
.sidebar-version-line {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.12rem;
    min-width: 0;
    margin-top: 0.35rem;
    white-space: nowrap;
    color: var(--text-muted);
}
.sidebar-version-line .sidebar-version:not(:first-child)::before {
    content: "·";
    margin-right: 0.1rem;
    opacity: 0.45;
}
.sidebar-version {
    color: var(--text-muted);
    font-size: 0.52rem;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    opacity: 0.72;
    text-decoration: none;
    cursor: default;
}
/* The version chips render their text inside a JS-injected .label span
   (shared with the collapsible sidebar nav), which inherits the bare
   global `.label` rule — 8pt + 0.05em letter-spacing. Override both,
   scoped to the version line, so the flask/agent/tray strip stays on a
   single line within the 220px sidebar. */
.sidebar-version-line .label {
    font-size: 0.52rem;
    letter-spacing: 0;
}
.sidebar-version[href] {
    cursor: pointer;
}
.sidebar-version[href]:hover {
    color: var(--text);
    opacity: 1;
}
.sidebar-footer-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 30px;
}
/* Sidebar footer: keep the Restart pill and the Collapse button on a
   single row. The Restart pill is only in the DOM/visible when a server
   restart is pending; when it is, cap its width and let Collapse shrink
   to share the row instead of wrapping below it. */
.sidebar-footer-controls .restart-indicator {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 50%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sidebar-footer-controls:has(.restart-indicator) .sk-collapse-toggle {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sidebar-footer-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    flex-wrap: wrap;
}
.sidebar-user {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: clamp(0.66rem, 0.72vw, 0.76rem);
    line-height: 1;
}
.sidebar-logout { color: var(--danger); font-size: 0.78rem; flex-shrink: 0; }

/* ── User Avatar ── */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ── User Menu ── */
.user-menu-wrapper {
    position: relative;
    flex: 1;
    min-width: 0;
}
/* Admin / Setup popup — compact gear button beside the user menu. */
.admin-menu-wrapper {
    position: relative;
    flex-shrink: 0;
}
.admin-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.admin-menu-trigger:hover {
    background: rgba(255,255,255,0.04);
    border-color: var(--border);
    color: var(--text);
}
.admin-menu-trigger-active {
    color: var(--text);
    background: rgba(88,166,255,0.08);
    border-color: rgba(88,166,255,0.35);
}
.admin-menu-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 0.35rem;
    width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
    z-index: 200;
    padding: 0.25rem 0;
}
.admin-menu-dropdown.admin-menu-open {
    display: block;
}
body.sk-sidebar-collapsed .admin-menu-dropdown {
    position: fixed;
    left: 68px;
    bottom: 8px;
    width: 280px;
    max-width: calc(100vw - 84px);
    max-height: min(78vh, 680px);
    margin-bottom: 0;
    z-index: 10060;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.48);
}
.admin-menu-header {
    padding: 0.4rem 0.75rem 0.3rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.15rem;
}
.admin-menu-item {
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}
.admin-menu-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}
.admin-menu-item-active {
    background: rgba(88,166,255,0.08);
    color: var(--text);
    border-left: 2px solid #58a6ff;
    padding-left: calc(0.75rem - 2px);
}
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    background: rgba(255,255,255,0.025);
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.22rem 0.3rem 0.22rem 0.22rem;
    color: inherit;
    cursor: pointer;
}
.user-menu-trigger:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border);
}
.user-menu-caret {
    flex-shrink: 0;
    opacity: 0.5;
}
.sidebar-monitor {
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-width: 72px;
    height: 30px;
    flex: 0 0 auto;
    font-size: clamp(0.6rem, 0.65vw, 0.68rem);
    line-height: 1;
    color: var(--text-muted);
    padding: 0 0.55rem;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sidebar-monitor:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
}
.sidebar-monitor-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8b949e;
    box-shadow: 0 0 4px rgba(139,148,158,0.4);
    transition: background 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
}
.sidebar-monitor-online {
    color: #3fb950;
    border-color: rgba(63,185,80,0.35);
    background: rgba(63,185,80,0.08);
}
.sidebar-monitor-online .sidebar-monitor-led {
    background: #3fb950;
    box-shadow: 0 0 5px rgba(63,185,80,0.5);
}
.sidebar-monitor-offline {
    color: #f85149;
    border-color: rgba(248,81,73,0.38);
    background: rgba(248,81,73,0.08);
}
.sidebar-monitor-offline .sidebar-monitor-led {
    background: #f85149;
    box-shadow: 0 0 5px rgba(248,81,73,0.5);
}
.sidebar-monitor-warning {
    color: #d29922;
    border-color: rgba(210,153,34,0.38);
    background: rgba(210,153,34,0.10);
}
.sidebar-monitor-warning .sidebar-monitor-led {
    background: #d29922;
    box-shadow: 0 0 5px rgba(210,153,34,0.5);
}
.sidebar-monitor-critical {
    color: #f85149;
    border-color: rgba(248,81,73,0.42);
    background: rgba(248,81,73,0.12);
}
.sidebar-monitor-critical .sidebar-monitor-led {
    background: #f85149;
    box-shadow: 0 0 5px rgba(248,81,73,0.55);
}
.user-menu-dropdown {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;
    margin-bottom: 0.35rem;
    width: min(280px, calc(100vw - 24px));
    max-height: 70vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4);
    z-index: 200;
    overflow-y: auto;
}
.user-menu-dropdown.user-menu-open {
    display: block;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.1s, color 0.1s;
}
.user-menu-item:hover {
    background: rgba(255,255,255,0.04);
    color: var(--text);
}
.user-menu-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}
.user-menu-divider {
    border-top: 1px solid var(--border);
    margin: 0.15rem 0;
}
.user-menu-logout {
    color: var(--danger);
}
.user-menu-logout:hover {
    background: rgba(229,72,77,0.08);
    color: var(--danger);
}
/* ── Theme picker in user menu ── */
.theme-picker-section {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
}
.theme-picker-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    font-family: ui-monospace, 'SF Mono', monospace;
}
.theme-variant-row, .theme-accent-row {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.theme-variant-swatch {
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.1s;
    position: relative;
}
.theme-variant-swatch:hover { transform: scale(1.08); }
.theme-variant-swatch.active { border-color: var(--accent); }
.theme-accent-dot {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.12s, transform 0.1s;
}
.theme-accent-dot:hover { transform: scale(1.12); }
.theme-accent-dot.active { border-color: var(--text); }
.org-switcher-select {
    width: 100%;
    padding: 0.25rem 0.4rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ── Mobile hamburger ── */
.sidebar-toggle {
    display: none;
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 1100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 1.4rem;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer;
    line-height: 1;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-toggle { display: block; }
    .sidebar-overlay.open { display: block; }
    .content {
        margin-left: 0 !important;
        /* Topbar is position:fixed and can wrap to two rows on narrow
           screens (stats + actions). Pad enough to clear the worst case. */
        padding: calc(56px + 0.5rem) 1rem 1rem 1rem;
        width: 100%;
        max-width: 100%;
    }
    /* Topbar mobile (≤768px) — let stat pills wrap to a second line
       instead of horizontal-scrolling, and let the topbar itself grow
       so the breadcrumb / stats / actions stack rather than crowd.
       Search collapses to icon-only and the Copilot label hides. */
    .sk-topbar {
        left: 0;
        height: auto;
        min-height: 48px;
        padding: 6px 0.75rem;
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .sk-topbar-stats { flex-wrap: wrap; row-gap: 4px; margin-left: auto; }
    .sk-topbar-actions { flex-wrap: wrap; }
    /* Keep the LED dot + count pills, drop the trailing word ("machines",
       "alert", "ticket") so each pill's footprint shrinks on small screens. */
    .sk-tb-stat .sk-tb-label { display: none; }
    /* On mobile drop the machines-online stat + any rollout / staged-
       version pills entirely — alerts + tickets badges plus the search
       toggle are what an operator actually needs while moving around
       a warehouse, and the topbar was pushing them onto a second row
       on iPhone-sized viewports. */
    .sk-tb-stat-machines,
    .sk-tb-stat-rollout,
    .sk-tb-stat-upgrade { display: none !important; }
    /* AI status pill keeps showing on mobile but collapses to just
       the spinner + 'AI' label — drop the long detail text so it
       doesn't push the rest of the topbar onto a second row. */
    .sk-tb-stat-ai .sk-tb-ai-detail { display: none !important; }
    .sk-tb-stat-ai { padding: 2px 8px !important; }
    .sk-topbar .search-toggle .search-shortcut { display: none; }
    .sk-topbar .search-toggle span:not(.search-shortcut) { display: none; }
    .sk-topbar .search-toggle { padding: 0 8px; gap: 0; }
    .sk-assist-btn { font-size: 0; gap: 0; padding: 0 8px; width: 32px; }
    .sk-assist-btn svg { margin: 0; }
    /* Anchor to the actual viewport on iPhone/PWA — the desktop rule used
       width:400px which can leak past the visible edge on standalone iOS
       where %-width doesn't account for the safe-area inset. 100dvw +
       inset(left) keeps the panel inside the safe area. */
    .sk-assist-panel-shell {
        width: 100dvw;
        max-width: 100dvw;
        left: 0;
        right: auto;
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 0);
        box-sizing: border-box;
    }
    .sk-assist-panel-shell.open { transform: translateX(0); right: auto; }
    .page-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .page-header h2 { font-size: 1.25rem; }
    /* Tables: horizontal scroll wrapper */
    table { font-size: 0.8rem; }
    .table-wrap, table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Tabs */
    .tab-bar { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .tab { padding: 0.4rem 0.6rem; font-size: 0.8rem; }
    /* Forms: single column */
    .form-row { flex-direction: column; gap: 0.75rem; }
    .form { max-width: 100%; }
    /* Grids: single column */
    .detail-grid { grid-template-columns: 1fr !important; }
    .advanced-grid { grid-template-columns: 1fr !important; }
    .device-grid { grid-template-columns: 1fr !important; }
    .org-grid { grid-template-columns: 1fr !important; }
    /* Stats: stack on mobile */
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat-number { font-size: 1.5rem; }
    /* Machine detail header */
    .machine-header { flex-direction: column; gap: 0.5rem; }
    .machine-header .actions { flex-wrap: wrap; }
    .machine-info { flex-direction: column; gap: 0.5rem; }
    /* Search bar: adapt to mobile.
       IMPORTANT: .global-search-container MUST keep z-index: 10002 (matching
       desktop) because it creates a stacking context — children (.search-bar
       at 10001) get clamped to the container's z-index, and the .search-backdrop
       sits at 10000. Dropping the container to z-index 50 on mobile (as this
       rule used to) hid the entire search UI behind the blurred backdrop. */
    .search-bar {
        max-width: 100%;
        width: calc(100vw - 24px);
        top: 60px;          /* below the mobile header, not 15vh */
        padding: 0.6rem 0.75rem;
    }
    .search-bar input { font-size: 16px !important; }  /* >=16px stops iOS input zoom */
    /* Site-wide: ALL text inputs/selects/textareas at >=16px on mobile
       so iOS Safari does not zoom-on-focus. !important because page-
       scoped CSS often hard-codes font-size:1rem on inputs and 1rem
       isn't reliably 16px on every page (some pages bump root font-
       size). The visual cost is ~1px of design density; the win is
       every form on every page staying usable on a phone without the
       zoom-and-pinch dance every time the input gains focus. */
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="tel"], input[type="url"],
    input[type="date"], input[type="datetime-local"], input[type="search"],
    input[type="file"], select, textarea,
    .form-group input, .login-form input {
        font-size: 16px !important;
    }
    /* Touch targets: ensure buttons + links inside .btn meet 44px min on mobile. */
    .btn { min-height: 40px; }
    .btn-small { min-height: 36px; }
    .search-dropdown {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        top: calc(60px + 56px);
    }
    .global-search-container { position: relative; width: auto; z-index: 10002; }
    /* Filter bar: wrap nicely */
    .filter-bar { flex-wrap: wrap; gap: 0.4rem; }
    .filter-bar select, .filter-bar input { flex: 1; min-width: 120px; }
    /* Header actions: wrap */
    .header-actions { flex-wrap: wrap; gap: 0.4rem; }
    /* Modals: fit mobile */
    .modal-content {
        max-width: calc(100vw - 2rem) !important;
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    /* Chat */
    .chat-container { max-width: 100%; }
    .chat-messages { height: 350px; }
    /* Toast */
    #toast-container { right: 0.75rem; left: 0.75rem; max-width: 100%; }
    /* Queue stats */
    .queue-stats { flex-wrap: wrap; gap: 0.75rem; }
    /* Device stats */
    .device-stats { flex-wrap: wrap; }
    /* Shell */
    .shell-output { height: 350px; }
    /* Password field */
    .password-field { flex-direction: column; align-items: stretch; }
    /* Sidebar submenu: touch-friendly */
    .sidebar-submenu-toggle { padding: 0.75rem 1.25rem; min-height: 44px; }
    .sidebar-submenu-items li a { padding: 0.65rem 1.25rem 0.65rem 2rem; min-height: 44px; display: flex; align-items: center; }
    .sidebar-section-label { padding: 0.6rem 1.1rem 0.2rem; }
    /* Searchable select: full width on mobile */
    .searchable-select-options { max-height: 180px; }
    /* Ticket filters: wrap on mobile */
    .ticket-filters { flex-direction: column; gap: 0.4rem; }
    .ticket-filters select, .ticket-filters input { width: 100%; min-width: 0; }
    /* Ticket stats: 2-col grid */
    .ticket-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
    /* Bulk bar: stack vertically */
    .bulk-bar { flex-direction: column; align-items: stretch; gap: 0.4rem; }
    .bulk-bar .bulk-count { text-align: center; }
    /* Ticket detail: stack sidebar below content */
    .ticket-detail-layout { grid-template-columns: 1fr !important; }
    /* Quick-close action menu */
    .qc-menu { right: 0; left: auto; min-width: 140px; }
    /* Password Vault: stack folder sidebar above table */
    .pw-layout { flex-direction: column !important; }
    .pw-layout .pw-sidebar { width: 100% !important; flex-direction: row; overflow-x: auto; gap: 0.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
    .pw-layout .pw-sidebar .pw-folder { white-space: nowrap; padding: 0.35rem 0.5rem !important; }
    .pw-layout .pw-sidebar .pw-folder-new { white-space: nowrap; }
    .pw-layout .pw-sidebar .pw-trash-link { border-top: none; margin-top: 0; padding-top: 0; }
    /* Machines table: hide less critical columns on mobile */
    .machines-hide-mobile { display: none !important; }
    /* Alerts table: ensure horizontal scroll */
    .alert-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .alert-table-wrap table { min-width: 600px; }
    /* Resolved alerts: hide message + resolution columns on mobile */
    .resolved-hide-mobile { display: none !important; }
    /* Tickets table: hide less critical columns on mobile */
    .tickets-hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
    /* Topbar may wrap to two rows on iPhone-class viewports — bump
       content top padding so cards aren't covered by the fixed bar. */
    .content { padding: 0.5rem; padding-top: calc(72px + 0.5rem); }
    table th, table td { padding: 0.3rem 0.4rem; }
    .btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
    .btn-small { padding: 0.35rem 0.6rem; font-size: 0.75rem; min-height: 32px; }
    /* Stats: single column on very small screens */
    .stats-grid { grid-template-columns: 1fr; }
    /* Login card */
    .login-card { margin: 1rem; padding: 1.5rem; }
    /* Form actions wrap */
    .form-actions { flex-wrap: wrap; }
    .form-actions .btn { flex: 1; min-width: 0; text-align: center; }
}

@media (min-width: 769px) {
    .sidebar-toggle { display: none !important; }
    .sidebar-overlay { display: none !important; }
}

/* ── Standardized status badges ── */
.badge-success, .status-success { background: rgba(70,167,88,0.15); color: var(--green); }
.badge-danger, .badge-error, .status-error { background: rgba(229,72,77,0.15); color: var(--danger); }
.badge-warning, .status-warning { background: rgba(245,166,35,0.15); color: var(--yellow); }
.badge-info, .status-info, .status-running { background: rgba(91,138,245,0.15); color: var(--primary); }
.badge-muted, .status-never { background: rgba(139,143,163,0.1); color: var(--text-muted); }

/* Standard badge sizing — `.badge` itself is defined above (single canonical rule). */
.badge-sm { font-size:0.68rem; padding:0.1rem 0.4rem; }
.badge-lg { font-size:0.82rem; padding:0.2rem 0.6rem; }

/* Standard button variants (use instead of inline styles) */
.btn-success { background:transparent; border-color:var(--green); color:var(--green); }
.btn-success:hover { background:var(--green); color:#fff; }
.btn-warning { background:transparent; border-color:var(--yellow); color:var(--yellow); }
.btn-warning:hover { background:var(--yellow); color:#000; }
.btn-info { background:transparent; border-color:var(--primary); color:var(--primary); }
.btn-info:hover { background:var(--primary); color:#fff; }

/* Utility colors */
.text-success { color: var(--green); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--yellow); }
.text-info { color: var(--primary); }
.text-muted { color: var(--text-muted); }

/* ── Table responsive wrapper ── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0.5rem; }
.table-responsive table { min-width: min(100%, 600px); }

/* Shared layout containment */
.minimal-main,
.content,
.main-content {
    min-width: 0;
    max-width: 100%;
}

.content :where(table, pre, code, img, svg, canvas, video, iframe) {
    max-width: 100%;
}

.content :where(th, td) {
    overflow-wrap: anywhere;
}

.table-responsive {
    max-width: 100%;
}

/* Shared extracted component chrome */
.skui-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

#stepUpModal[hidden],
.fh-modal[hidden],
.sk-help-drawer[hidden],
.sk-lb-overlay[hidden] {
    display: none !important;
}

.fh-modal,
.sk-lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.sk-filter-select {
    min-width: 0;
}

.sk-help-drawer {
    max-width: min(420px, calc(100vw - 2rem));
}

.sk-pager,
.sk-saved-views {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.el-panel,
.ph-info-card,
.browser-orders-grid {
    min-width: 0;
}

@keyframes skGuideDotPulse {
    0%, 100% { opacity: 0.45; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1); }
}

/* ── Shell button ── */
.btn-shell { background: rgba(70,167,88,0.15); border-color: var(--green); color: var(--green); }
.btn-shell:hover { background: var(--green); color: #fff; }
.btn-rd { background: rgba(124,58,237,0.15); border-color: #7c3aed; color: #a78bfa; }
.btn-rd:hover { background: #7c3aed; color: #fff; }

/* ── Remote Shell ── */
.shell-container {
    background: #0d1117;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.shell-output {
    height: 500px;
    overflow-y: auto;
    padding: 1rem;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    line-height: 1.6;
}

.shell-welcome { color: var(--text-muted); margin-bottom: 0.5rem; }

.shell-entry { margin-bottom: 0.75rem; }

.shell-cmd-line {
    color: var(--text);
    padding: 0.15rem 0;
}

.shell-prompt { color: var(--primary); font-weight: 600; margin-right: 0.5rem; }

.shell-cmd-output {
    color: #8b949e;
    margin: 0.25rem 0 0 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 2px solid var(--border);
    white-space: pre-wrap;
    word-break: break-all;
    font-family: inherit;
    font-size: inherit;
}

.shell-waiting {
    color: var(--yellow);
    font-style: italic;
    padding-left: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.shell-spinner {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid var(--yellow);
    border-top-color: transparent;
    border-radius: 50%;
    animation: shell-spin 0.8s linear infinite;
}

@keyframes shell-spin {
    to { transform: rotate(360deg); }
}

.shell-status-pending { color: var(--yellow); font-size: 0.75rem; margin-left: 0.5rem; }
.shell-status-running { color: var(--primary); font-size: 0.75rem; margin-left: 0.5rem; }
.shell-status-ok { color: var(--green); font-size: 0.75rem; margin-left: 0.5rem; }
.shell-status-error { color: var(--red); font-size: 0.75rem; margin-left: 0.5rem; }

.shell-input-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}

.shell-input-bar .shell-prompt { flex-shrink: 0; }

.shell-input-bar input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    outline: none;
}

.shell-input-bar input::placeholder { color: #484f58; }

/* ── Changelog ── */
.changelog-list { margin-top: 1rem; }

.changelog-version-group {
    margin-bottom: 1.5rem;
}

.changelog-version {
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.changelog-entry {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}

.changelog-entry-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
}

.changelog-meta {
    color: var(--text-muted);
    font-size: 0.78rem;
    margin-left: auto;
}

.changelog-body {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border);
    white-space: pre-wrap;
}

.badge-version { background: rgba(91,138,245,0.15); color: var(--primary); font-size: 0.85rem; padding: 0.25rem 0.75rem; }
.badge-feature { background: rgba(70,167,88,0.15); color: var(--green); }
.badge-fix { background: rgba(245,166,35,0.15); color: var(--yellow); }
.badge-update { background: rgba(91,138,245,0.15); color: var(--primary); }
.badge-security { background: rgba(229,72,77,0.15); color: var(--red); }
.badge-breaking { background: rgba(229,72,77,0.25); color: var(--red); font-weight: 700; }
.badge-critical { background: rgba(229,72,77,0.15); color: var(--red); }
.badge-important { background: rgba(245,166,35,0.15); color: var(--yellow); }
.badge-moderate { background: rgba(91,138,245,0.15); color: var(--primary); }
.badge-low, .badge-normal { background: rgba(139,143,163,0.15); color: var(--text-muted); }

/* ── Tabs (v6.5.53 Apple-style redesign) ──
   Segmented-pill tab bar inspired by iOS/macOS settings.
   Each tab is a rounded chip; the active chip gets a filled
   background. Much more uniform and scannable than the thin
   underline bar. The old .tab / .tab-bar class names are kept
   so no templates break; the new .sk-tabs / .sk-tab classes
   are aliases with a few extra affordances. */
.tab-bar, .sk-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
}
.tab-bar::-webkit-scrollbar, .sk-tabs::-webkit-scrollbar { height: 4px; }
.tab-bar > .tab, .sk-tabs > .sk-tab { flex-shrink: 0; white-space: nowrap; }
.tab, .sk-tab {
    padding: 0.45rem 0.95rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 7px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.tab:hover, .sk-tab:hover {
    color: var(--text);
    background: rgba(255,255,255,0.035);
}
.tab.active, .sk-tab.active {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.tab.active:hover, .sk-tab.active:hover {
    background: var(--primary);
}
.tab-badge {
    background: var(--red);
    color: #fff;
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 0.1rem;
    font-weight: 700;
    line-height: 1.1;
}
.tab.active .tab-badge { background: rgba(255,255,255,0.2); }
.tab-content, .sk-tab-content { display: none; }
.tab-content.active, .sk-tab-content.active {
    display: block;
    animation: sk-tab-fade 0.18s ease;
}
@keyframes sk-tab-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Section headings inside tab content — give them room to breathe */
.tab-content h3, .sk-tab-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem 0;
}
.tab-content .sub-section, .sk-tab-content .sub-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.9rem;
}
.sub-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.header-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* ── Detail grid ── */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}
.detail-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}
.detail-section h3 { font-size: 0.9rem; margin: 0 0 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-table { width: 100%; background: transparent; border: none; font-size: 0.85rem; }
.detail-table td { padding: 0.3rem 0.5rem; border: none; border-top: 1px solid rgba(255,255,255,0.03); }
.detail-table td:first-child { color: var(--text-muted); width: 120px; font-weight: 500; }
.detail-table tr:first-child td { border-top: none; }

/* Progress bar */
.progress-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    margin-top: 0.3rem;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: var(--green);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.progress-warn { background: var(--yellow); }

/* ── Enhanced Progress Indicators ── */
/* Circular progress */
.progress-ring {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.progress-ring svg {
    transform: rotate(-90deg);
}
.progress-ring-bg {
    fill: none;
    stroke: var(--bg-input);
    stroke-width: 3;
}
.progress-ring-fill {
    fill: none;
    stroke: var(--primary);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease;
}
.progress-ring-fill.progress-success { stroke: var(--green); }
.progress-ring-fill.progress-warn { stroke: var(--yellow); }
.progress-ring-fill.progress-danger { stroke: var(--red); }
.progress-ring-label {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text);
}

/* Animated progress bar with shimmer */
.progress-bar-animated .progress-fill {
    background: linear-gradient(90deg, var(--primary) 0%, rgba(0,113,227,0.7) 50%, var(--primary) 100%);
    background-size: 200% 100%;
    animation: progressShimmer 1.5s ease infinite;
}
@keyframes progressShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Progress bar with label */
.progress-labeled {
    position: relative;
    height: 20px;
    background: var(--bg-input);
    border-radius: 10px;
    overflow: hidden;
}
.progress-labeled .progress-fill {
    height: 100%;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
}
.progress-labeled .progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text);
    mix-blend-mode: difference;
}

/* Command execution spinner */
.cmd-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: cmdSpin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 0.3rem;
}
@keyframes cmdSpin { to { transform: rotate(360deg); } }

/* Backup progress card widget */
.backup-progress-widget {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0,113,227,0.06);
    border: 1px solid rgba(0,113,227,0.15);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    animation: fadeIn 0.3s ease;
}
.backup-progress-widget .progress-bar {
    flex: 1;
    margin-top: 0;
}
.backup-progress-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Update progress indicator on machine cards */
.update-progress-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.update-progress-inline .progress-bar {
    flex: 1;
    max-width: 120px;
    margin-top: 0;
}

/* Pulsing status indicator */
.status-pulse {
    animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.progress-danger { background: var(--red); }

/* ── Account list ── */
.accounts-list { margin-top: 0.5rem; }
.account-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 0.85rem;
}
.account-row:last-child { border-bottom: none; }
.account-disabled { opacity: 0.45; }
.account-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.account-name { font-weight: 500; }
.account-logon { font-size: 0.75rem; color: var(--text-muted); }
.account-actions { flex-shrink: 0; }
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-icon:hover { background: rgba(255,255,255,0.05); }
.btn-icon-danger:hover { background: rgba(229,72,77,0.15); color: var(--red); border-color: var(--red); }

/* ── Chat ── */
.chat-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.chat-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    max-width: 650px;
    position: relative;
}
.chat-messages {
    height: 450px;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.chat-bubble {
    max-width: 80%;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    font-size: 0.88rem;
    animation: chatFadeIn 0.2s ease;
}
@keyframes chatFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.chat-to_machine {
    background: linear-gradient(135deg, rgba(91,138,245,0.2), rgba(91,138,245,0.1));
    align-self: flex-end;
    border-bottom-right-radius: 3px;
}
.chat-from_machine {
    background: var(--bg-input);
    align-self: flex-start;
    border-bottom-left-radius: 3px;
}
.chat-sender { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.2rem; text-transform: uppercase; letter-spacing: 0.03em; }
.chat-text { word-wrap: break-word; line-height: 1.5; }
.chat-time { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.3rem; opacity: 0.7; }

/* Chat images */
.chat-image {
    margin: 0.4rem 0;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    max-width: 280px;
}
.chat-image img {
    width: 100%;
    display: block;
    border-radius: 8px;
    transition: opacity 0.15s;
}
.chat-image img:hover { opacity: 0.85; }

/* Chat file links */
.chat-file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.82rem;
    color: var(--primary);
    margin: 0.3rem 0;
}
.chat-file-link:hover { background: rgba(255,255,255,0.08); }
.chat-file-link small { color: var(--text-muted); }

/* Chat input */
.chat-input-bar {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--border);
    align-items: center;
}
.chat-attach-btn {
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    padding: 0.3rem;
    border-radius: 4px;
    transition: all 0.15s;
}
.chat-attach-btn:hover { color: var(--primary); background: rgba(91,138,245,0.1); }
.chat-input-bar input[type="text"] {
    flex: 1;
    padding: 0.55rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    font-size: 0.88rem;
}
.chat-input-bar input[type="text"]:focus { outline: none; border-color: var(--primary); }

/* File preview bar */
.chat-file-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(91,138,245,0.08);
    border-top: 1px solid var(--border);
    font-size: 0.82rem;
    color: var(--primary);
}

/* Drag and drop overlay */
.chat-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(91,138,245,0.15);
    border: 2px dashed var(--primary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}
.chat-drop-overlay.visible { opacity: 1; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    cursor: pointer;
    animation: lbFadeIn 0.2s ease;
}
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    cursor: default;
}
.lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Screenshot ── */
.screenshot-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
}
.screenshot-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* ── Windows 10 EOL Banner ── */
.win10-banner {
    background: linear-gradient(135deg, rgba(229,72,77,0.12), rgba(245,166,35,0.08));
    border: 1px solid var(--red);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: 1.5rem;
}
.win10-banner-content strong {
    color: var(--red);
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
}
.win10-banner-content p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 0.75rem;
}

/* ── Org Grid ── */
.org-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin: 1rem 0; }
.org-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    color: var(--text);
    transition: all var(--transition);
    display: block;
    box-shadow: var(--shadow-sm);
}
.org-card:hover { border-color: var(--primary); transform: translateY(-3px); color: var(--text); box-shadow: var(--shadow-md); }
.org-card h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.org-stats { display: flex; gap: 1.5rem; font-size: 0.88rem; color: var(--text-muted); }
.org-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.5rem; }
.text-green { color: var(--green); }

/* ── Queue ── */
.queue-stats { display: flex; gap: 1.5rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-muted); }
.queue-stat strong { color: var(--text); }
.queue-stat-error strong { color: var(--red); }
.queue-output { background: var(--bg-input); padding: 0.5rem; border-radius: var(--radius); font-size: 0.78rem; max-height: 200px; overflow-y: auto; white-space: pre-wrap; margin-top: 0.5rem; }
.cmd-cell code { font-size: 0.8rem; background: var(--bg-input); padding: 0.15rem 0.4rem; border-radius: 3px; }
.sidebar-divider { border-top: 1px solid var(--border); margin: 0.5rem 0; list-style: none; }
.sidebar-section-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', monospace;
    color: var(--text-muted);
    padding: 0.85rem 1.1rem 0.2rem;
    opacity: 0.65;
    list-style: none;
}

/* ── Searchable Select ── */
.searchable-select {
    position: relative;
}
.searchable-select-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.searchable-select-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(91,138,245,0.2);
}
.searchable-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    margin-top: 2px;
}
.searchable-select.open .searchable-select-options {
    display: block;
}
.searchable-select-option {
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: background 0.1s;
}
.searchable-select-option:last-child { border-bottom: none; }
.searchable-select-option:hover { background: var(--primary); color: #fff; }
.searchable-select-option.selected { background: rgba(91,138,245,0.15); color: var(--primary); }
.searchable-select-option.hidden { display: none; }
.searchable-select-empty {
    padding: 0.5rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
}

/* ── Scripts Library ── */
.script-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.script-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.script-card-actions { display: flex; gap: 0.4rem; }
.script-card-desc { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.script-card-code {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    font-size: 0.82rem;
    color: var(--text);
    margin-top: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
}
.script-run-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.script-machine-select {
    padding: 0.3rem 0.5rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.85rem;
}

/* ── File Manager ── */
.file-breadcrumb {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.85rem;
    flex-wrap: wrap;
}
.file-breadcrumb a { cursor: pointer; color: var(--primary); }
.file-breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--text-muted); margin: 0 0.15rem; }
.file-drop-zone { position: relative; min-height: 200px; }
.file-drop-overlay {
    position: absolute; inset: 0;
    background: rgba(91,138,245,0.12); border: 2px dashed var(--primary); border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 600; color: var(--primary);
    pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 10;
}
.file-drop-overlay.visible { opacity: 1; }
.file-table { font-size: 0.85rem; }
.file-table td { padding: 0.35rem 0.6rem; }
.file-table svg { vertical-align: -2px; margin-right: 0.3rem; color: var(--text-muted); }
.file-row-dir { cursor: pointer; }
.file-row-dir:hover td { background: rgba(91,138,245,0.06); }
.file-row-dir svg { color: var(--yellow); }
.file-status {
    padding: 0.5rem 0.75rem; margin-top: 0.5rem;
    background: rgba(91,138,245,0.08); border-radius: var(--radius);
    font-size: 0.85rem; color: var(--primary);
}

/* ── Advanced / macOS / Windows tool tabs — card grid ──
   Matches the customer-dashboard .cust-card aesthetic: subtle
   hover lift + shadow, staggered fade-in on first render. Keep
   the grid auto-fill so cards reflow cleanly on narrow panes. */
.advanced-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    align-items: start;
    gap: 1rem;
    margin-top: 1rem;
}
.advanced-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    opacity: 0;
    animation: advancedCardFadeIn 0.35s ease forwards;
}
.advanced-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
@keyframes advancedCardFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Staggered reveal across the first ~12 cards — past that the effect
   stops being perceptible and a longer delay would feel sluggish. */
.advanced-card:nth-child(1)  { animation-delay: 0.00s; }
.advanced-card:nth-child(2)  { animation-delay: 0.03s; }
.advanced-card:nth-child(3)  { animation-delay: 0.06s; }
.advanced-card:nth-child(4)  { animation-delay: 0.09s; }
.advanced-card:nth-child(5)  { animation-delay: 0.12s; }
.advanced-card:nth-child(6)  { animation-delay: 0.15s; }
.advanced-card:nth-child(7)  { animation-delay: 0.18s; }
.advanced-card:nth-child(8)  { animation-delay: 0.21s; }
.advanced-card:nth-child(9)  { animation-delay: 0.24s; }
.advanced-card:nth-child(10) { animation-delay: 0.27s; }
.advanced-card:nth-child(11) { animation-delay: 0.30s; }
.advanced-card:nth-child(12) { animation-delay: 0.33s; }
.advanced-card h4 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.advanced-card p {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.advanced-card .advanced-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: auto;
}
.advanced-card-warn {
    border-color: var(--red);
    background: linear-gradient(135deg, rgba(229,72,77,0.08), rgba(245,166,35,0.05));
}
.advanced-card-warn h4 { color: var(--red); }
.advanced-card-warn:hover { border-color: var(--red); }

/* Anchor-as-card: when .advanced-card is applied to an <a>, strip the
   default link underline + inherit text colour so the card doesn't
   render with blue link text. `display:block` so the whole tile is
   clickable and flex children don't collapse to inline-a width. */
.advanced-card[href] {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Settings-style pages: when a .form lives inside (or IS) an
   .advanced-card, let it grow to fill the card. The default .form
   rule caps width at 560px, which looks wrong when the card is
   full-width. */
.advanced-card > form.form,
.advanced-card > .form,
form.form.advanced-card {
    max-width: none;
}

#machine-lifecycle-actions { display: contents; }

.sk-netscan-last {
    margin-top: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255,255,255,0.025);
    min-width: 0;
}
.sk-netscan-last-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-muted);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.sk-netscan-last-summary {
    margin-top: 0.4rem;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sk-netscan-last-details {
    margin-top: 0.45rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.sk-netscan-last-details pre,
.sk-netscan-raw {
    max-height: 320px;
    overflow: auto;
    margin: 0.45rem 0 0;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #0a0e13;
    color: #d1d5db;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.74rem;
}

/* Network-scan device table — Advanced > Network Scan card */
.sk-netscan-devices {
    margin-top: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.025);
}
.sk-netscan-devices-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    font-size: 0.78rem;
}
.sk-netscan-devices-count {
    color: var(--text-muted);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.7rem;
}
.sk-netscan-unifi-pill {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sk-netscan-devices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}
.sk-netscan-devices-table th,
.sk-netscan-devices-table td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-top: 1px solid var(--border);
}
.sk-netscan-devices-table thead th {
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 0;
}
.sk-netscan-devices-table .sk-netscan-mono {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 0.74rem;
}
.sk-netscan-unifi-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.sk-netscan-unifi-tag.is-wired {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.35);
}
.sk-netscan-unifi-tag.is-wifi {
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.35);
}
.sk-netscan-unifi-tag.is-miss {
    background: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.35);
}
.sk-netscan-unifi-tag.is-off { opacity: 0.5; }
.sk-lifecycle-danger-card {
    grid-column: 1 / -1;
    border-color: rgba(239, 68, 68, 0.55);
}
.sk-lifecycle-danger-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.85rem;
    margin-top: 0.85rem;
}
.sk-lifecycle-danger-section {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.035);
}
.sk-lifecycle-danger-section h5 {
    margin: 0 0 0.35rem;
    color: var(--text);
    font-size: 0.88rem;
    letter-spacing: 0;
}
.sk-lifecycle-danger-section p {
    margin: 0 0 0.7rem;
}
.sk-uninstall-form {
    display: none;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    background: var(--bg-elevated, rgba(255, 0, 0, 0.05));
}
.sk-uninstall-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.sk-uninstall-input {
    padding: 0.4rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 4px;
    font-family: ui-monospace, Menlo, monospace;
}
.sk-uninstall-countdown {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── Network Devices ── */
.device-stats { display: flex; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.85rem; align-items: center; flex-wrap: wrap; }
.device-stats span { color: var(--text-muted); }
.device-stats strong { color: var(--text); }
.badge-printer { background: rgba(245,166,35,0.15); color: var(--yellow); }
.badge-windows { background: rgba(91,138,245,0.15); color: var(--primary); }
.badge-linux { background: rgba(70,167,88,0.15); color: var(--green); }
.badge-web { background: rgba(167,70,167,0.15); color: #a746a7; }
.badge-unknown-device { background: rgba(139,143,163,0.15); color: var(--text-muted); }
.monitor-badge { font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 3px; border: none; cursor: pointer; transition: all 0.15s; }
.monitor-on { background: rgba(70,167,88,0.15); color: var(--green); }
.monitor-on:hover { background: rgba(70,167,88,0.25); }
.monitor-off { background: rgba(139,143,163,0.1); color: var(--text-muted); }
.monitor-off:hover { background: rgba(139,143,163,0.2); }
.badge-queued_for_offline { background: rgba(230,126,34,0.15); color: #e67e22; }

.device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}
.device-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.device-card-header { display: flex; justify-content: space-between; align-items: center; }
.device-card-ip { font-size: 1rem; font-weight: 600; }
.device-card-ip code { font-size: 0.95rem; background: none; padding: 0; }
.device-card-hostname { font-size: 0.82rem; color: var(--text-muted); }
.device-card-asset { font-size: 0.85rem; font-weight: 500; color: var(--primary); }
.device-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}
.device-card-footer {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border);
}

/* ── Process Table ── */
.proc-table { font-size: 0.82rem; }
.proc-table td { padding: 0.3rem 0.6rem; }
.proc-table th { font-size: 0.75rem; }

/* ── Modal ── */
[hidden],
.modal[hidden] {
    display: none !important;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    padding: 1rem;
    animation: modalFadeIn 0.15s ease;
}
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalSlideIn 0.2s ease;
}
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.modal-content h3 { margin: 0 0 1rem; }
.modal-content .form-group { margin-bottom: 0.75rem; }
.modal-content .form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.25rem; }
.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 0.88rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.modal-content .form-group input:focus,
.modal-content .form-group select:focus,
.modal-content .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(91,138,245,0.2);
}

/* ── Screenshot History ── */
.screenshot-history {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.5rem 0;
}
.screenshot-thumb {
    flex-shrink: 0;
    width: 160px;
    cursor: pointer;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.screenshot-thumb:hover { border-color: var(--primary); transform: translateY(-2px); }
.screenshot-thumb img { width: 100%; display: block; }
.screenshot-thumb span { display: block; padding: 0.25rem 0.4rem; font-size: 0.7rem; color: var(--text-muted); background: var(--bg-card); }

/* ── Sync Indicator ── */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 400;
    vertical-align: middle;
    margin-left: 0.75rem;
    color: var(--text-muted);
}
.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    display: inline-block;
}
.sync-dot.stale { background: var(--yellow); }
.sync-dot.offline { background: var(--red); }

/* ── Toast Notifications ── */
#toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    max-width: 400px;
}
.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.88rem;
    box-shadow: var(--shadow-lg);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    border-left: 3px solid var(--primary);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.toast-show { transform: translateX(0); }
.toast-success { border-left-color: var(--green); }
.toast-error { border-left-color: var(--red); }
.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
}

/* ── Lightbox Navigation ── */
.lightbox-nav {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0,0,0,0.6);
    padding: 0.5rem 1rem;
    border-radius: 20px;
}
.lightbox-prev, .lightbox-next {
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.3); }
.lightbox-counter { color: rgba(255,255,255,0.7); font-size: 0.85rem; }

/* Priority badges — used on tickets, dashboard, reports */
.priority-badge { display:inline-block; padding:1px 8px; border-radius:4px; font-size:0.75rem; font-weight:600; }
.priority-badge.critical, .priority-badge.urgent { background:#ef444422; color:#ef4444; }
.priority-badge.high { background:#f59e0b22; color:#f59e0b; }
.priority-badge.medium { background:#3b82f622; color:#3b82f6; }
.priority-badge.low { background:#6b728022; color:#6b7280; }


/* Compact machine list mode */
table.compact-mode td { padding: 2px 6px !important; font-size: 0.8rem !important; }
table.compact-mode tr { height: auto !important; }
table.compact-mode small, table.compact-mode br + small { display: none !important; }
table.compact-mode .status-dot { width: 6px !important; height: 6px !important; }


/* ── Human-Friendly Error Messages ── */
.error-card {
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    animation: flashSlideIn 0.3s ease;
}
.error-card-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.error-card-content {
    flex: 1;
    min-width: 0;
}
.error-card-title {
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.2rem;
}
.error-card-hint {
    font-size: 0.82rem;
    opacity: 0.85;
    margin-top: 0.15rem;
}
.error-card-detail {
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    opacity: 0.6;
    margin-top: 0.35rem;
    cursor: pointer;
}
.error-card-detail:hover { opacity: 0.9; }

/* Severity levels */
.error-info {
    background: rgba(0,113,227,0.08);
    border: 1px solid rgba(0,113,227,0.2);
    color: var(--primary);
}
.error-warning {
    background: rgba(255,159,10,0.08);
    border: 1px solid rgba(255,159,10,0.2);
    color: var(--yellow);
}
.error-error {
    background: rgba(255,59,48,0.08);
    border: 1px solid rgba(255,59,48,0.2);
    color: var(--red);
}
.error-critical {
    background: rgba(255,59,48,0.12);
    border: 1px solid rgba(255,59,48,0.3);
    color: var(--red);
    animation: criticalPulse 2s ease-in-out infinite;
}
@keyframes criticalPulse {
    0%, 100% { border-color: rgba(255,59,48,0.3); }
    50% { border-color: rgba(255,59,48,0.6); box-shadow: 0 0 8px rgba(255,59,48,0.15); }
}

/* ── Traffic Light Status (Portal) ── */
.traffic-light {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 500;
}
.traffic-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.traffic-green { background: var(--green); box-shadow: 0 0 4px rgba(52,199,89,0.4); }
.traffic-amber { background: var(--yellow); box-shadow: 0 0 4px rgba(255,159,10,0.4); }
.traffic-red { background: var(--red); box-shadow: 0 0 4px rgba(255,59,48,0.4); }

/* ── Portal Card Enhancements ── */
.portal-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.portal-health-item {
    text-align: center;
    padding: 1rem 0.5rem;
    background: var(--bg-input);
    border-radius: var(--radius-sm);
    transition: transform var(--transition);
}
.portal-health-item:hover { transform: translateY(-2px); }
.portal-health-number {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.portal-health-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* ── Skeleton Loading ── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-input) 25%, rgba(255,255,255,0.05) 50%, var(--bg-input) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* Shared install-agent modal */
.iamodal-hidden {
    display: none !important;
}

.iamodal-content {
    max-width: min(920px, calc(100vw - 2rem));
}

.iamodal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.iamodal-title {
    margin: 0;
}

.iamodal-tabs,
.iamodal-note,
.iamodal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.iamodal-help,
.iamodal-note,
.iamodal-footer {
    color: var(--text-muted);
    font-size: 0.86rem;
}

.iamodal-code {
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.8rem;
    font-size: 0.78rem;
}

.iamodal-code-recover {
    max-height: 360px;
}

.iamodal-rule {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

/* Label template editor preview */
.label-template-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 1rem;
    align-items: start;
}

.label-template-form,
.label-template-preview-card {
    min-width: 0;
}

.label-template-grid-2,
.label-template-grid-3 {
    display: grid;
    gap: 0.75rem;
}

.label-template-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.label-template-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.label-template-label,
.label-template-checkbox {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.84rem;
    font-weight: 600;
}

.label-template-hint {
    display: block;
    font-weight: 400;
}

.label-template-shortcodes,
.label-template-actions,
.label-template-preview-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.label-template-shortcode-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.label-template-preview-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
}

.label-template-preview-head {
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.label-template-preview-head h3,
.label-template-preview-head p {
    margin: 0;
}

.label-template-preview-stage {
    overflow-x: auto;
    padding: 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.label-template-builder-canvas {
    position: relative;
    width: 360px;
    height: 116px;
    background: #fff;
    color: #0b0f17;
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.label-template-builder-item {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed rgba(91, 138, 245, 0.75);
    background: rgba(91, 138, 245, 0.08);
    color: inherit;
    cursor: grab;
    font-family: inherit;
    padding: 0;
}

.label-template-builder-item.is-bold {
    font-weight: 700;
}

.label-template-builder-item:active {
    cursor: grabbing;
}

.label-template-preview-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.label-template-preview-qr {
    display: block;
    width: 100%;
    height: 100%;
}

.label-template-preview-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.label-template-preview-generic {
    min-height: 120px;
    padding: 1rem;
    background: #fff;
    color: #0b0f17;
    border-radius: var(--radius-sm);
}

.label-template-preview-row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 0.25rem 0;
}

.label-template-preview-generic-code {
    margin-top: 0.75rem;
    text-align: center;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

@media (max-width: 980px) {
    .label-template-editor-layout,
    .label-template-grid-2,
    .label-template-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Print styles for reports */
@media print {
    .sidebar, .header-bar, .page-header .btn, .no-print, .search-toggle, nav { display: none !important; }
    main { margin: 0 !important; padding: 1rem !important; }
    body { background: #fff !important; color: #000 !important; font-size: 11pt; }
    table { border-collapse: collapse; width: 100%; }
    table th, table td { border: 1px solid #ccc; padding: 4px 8px; }
    .card, .stat-card { border: 1px solid #ccc !important; page-break-inside: avoid; }
    a { color: #000 !important; text-decoration: none !important; }
}

/* ── Reusable filterable select component (v6.5.50) ── */
.sk-filter-select { position: relative; display: inline-block; min-width: 200px; vertical-align: middle; }
.sk-filter-select-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.sk-filter-select-button:hover { border-color: var(--primary); }
.sk-filter-select-button:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.sk-filter-select-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-filter-select-arrow { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; }
.sk-filter-select-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    max-width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    z-index: 500;
    overflow: hidden;
    animation: sk-fs-fade 0.12s ease;
}
@keyframes sk-fs-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.sk-filter-select-search {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-input);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}
.sk-filter-select-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
.sk-filter-select-item {
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 2px solid transparent;
}
.sk-filter-select-item:hover,
.sk-filter-select-item.sk-key-focus { background: var(--bg-input); }
.sk-filter-select-item.sk-active { background: var(--bg-input); border-left-color: var(--primary); font-weight: 600; }
.sk-filter-select-item.sk-hidden { display: none; }
.sk-filter-select-empty { padding: 12px 14px; color: var(--text-muted); font-size: 0.8rem; text-align: center; }

.sk-filter-select-panel.is-hidden { display: none; }

/* Reusable native-select search upgrade. */
.sk-searchable-select { position: relative; display: inline-block; min-width: 200px; }
.sk-searchable-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.sk-searchable-select-button {
    width: 100%;
    padding: 0.4rem 0.6rem;
    text-align: left;
    background: var(--bg-input, #0d1117);
    color: var(--text, #e6edf3);
    border: 1px solid var(--border, #30363d);
    border-radius: var(--radius, 4px);
    font-size: 0.85rem;
    cursor: pointer;
}
.sk-searchable-select-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-card, var(--bg-input, #0d1117));
    color: var(--text, #e6edf3);
    border: 1px solid var(--border, #30363d);
    border-radius: var(--radius, 4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    margin-top: 2px;
    max-height: 320px;
    overflow: hidden;
}
.sk-searchable-select.is-open .sk-searchable-select-panel { display: block; }
.sk-searchable-select-search {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: none;
    border-bottom: 1px solid var(--border, #30363d);
    background: var(--bg-input, #0d1117);
    color: var(--text, #e6edf3);
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}
.sk-searchable-select-list { max-height: 260px; overflow-y: auto; }
.sk-searchable-select-row {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text, #e6edf3);
}
.sk-searchable-select-row.is-selected { background: var(--bg-hover, rgba(88, 166, 255, 0.18)); font-weight: 600; }
.sk-searchable-select-row.is-highlighted { outline: 2px solid var(--accent, #6366f1); }
.sk-searchable-select-empty { padding: 0.4rem 0.6rem; color: var(--text-muted, #888); font-size: 0.8rem; }

/* ── Canonical card / data-table / status pills (consolidation 2026-04-24) ──
   Several templates were rolling their own `.card` and `.data-table` rules
   inline; these utility classes give them a single source of truth. Pages
   that already define a more specific `.card` (e.g. ai_dashboard.html) win
   on cascade so there is no behavior change for them — the global rule
   only kicks in where there was no rule at all. */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.card-pad-sm { padding: 0.6rem 0.75rem; }
.card-pad-lg { padding: 1.5rem; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.data-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.data-table td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:hover td { background: var(--bg-input); }

/* Three semantic pill helpers — replace inline
   `background:rgba(...);color:var(--green);…` blocks scattered through
   templates. Same rgba alpha (0.15) used everywhere so themes stay calm. */
.status-pill-ok   { background: rgba(52,199,89,0.15);  color: var(--green);  }
.status-pill-warn { background: rgba(255,159,10,0.15); color: var(--yellow); }
.status-pill-err  { background: rgba(255,59,48,0.15);  color: var(--red);    }
.status-pill-ok, .status-pill-warn, .status-pill-err {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Sidebar section sub-label (Phase 2 — small uppercase divider between
   submenu groups inside the per-org section). Inherits from
   `.sidebar-section-label`; this modifier tightens spacing and adds a
   thin top margin so the four groups visually separate. */
.sidebar-section-sub {
    padding: 0.5rem 1.1rem 0.15rem;
    margin-top: 0.4rem;
    opacity: 0.55;
}
.sidebar-section-sub + .sidebar-submenu > details > summary {
    margin-top: 0.05rem;
}

/* Admin / Setup popup section divider (Phase 2 — split the popup into
   primary / fleet diagnostics / catalogs groups so 30 items scan
   cleanly). */
.admin-menu-section {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.7rem 0.85rem 0.25rem;
    opacity: 0.6;
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
}
.admin-menu-section:first-child { border-top: none; margin-top: 0; }

/* Announcement banners (rendered above page content from base.html). */
.announce {
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    border: 1px solid transparent;
}
.announce-critical { background: rgba(255,59,48,0.13);  border-color: rgba(255,59,48,0.27);  color: var(--red); }
.announce-warning  { background: rgba(255,159,10,0.13); border-color: rgba(255,159,10,0.27); color: var(--yellow); }
.announce-info     { background: rgba(74,158,255,0.13); border-color: rgba(74,158,255,0.27); color: var(--primary); }

/* ─────────────────────────────────────────────────────────────────────────
   Card system foundation (2026-04-24)
   --------------------------------------------------------------------------
   Six namespaced `.sk-card-*` classes used by `app/templates/components/
   cards.html` macros. Namespaced so they never collide with the existing
   global `.card` / `.stat-card` / `.page-header` rules above — pages migrate
   to the new system one at a time. See docs/card-system.md.
   ───────────────────────────────────────────────────────────────────────── */

/* 1) Page header card --------------------------------------------------- */
.sk-card-page-header {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.sk-card-page-header__main { min-width: 0; flex: 1 1 auto; }
.sk-card-page-header__breadcrumb {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}
.sk-card-page-header__title { font-size: 1.4rem; font-weight: 600; margin: 0; line-height: 1.25; }
.sk-card-page-header__subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.sk-card-page-header__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* 2) Stat card ---------------------------------------------------------- */
.sk-card-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.sk-card-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 78px;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
a.sk-card-stat:hover, .sk-card-stat-grid a.sk-card-stat:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.sk-card-stat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sk-card-stat__value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--text);
}
.sk-card-stat__icon {
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.sk-card-stat__label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sk-card-stat__trend {
    font-size: 0.72rem;
    font-weight: 600;
}
.sk-card-stat__trend--up   { color: var(--green); }
.sk-card-stat__trend--down { color: var(--red); }
.sk-card-stat__trend--flat { color: var(--text-muted); }
.sk-card-stat--accent  { border-left: 3px solid var(--primary); }
.sk-card-stat--ok      { border-left: 3px solid var(--green); }
.sk-card-stat--warn    { border-left: 3px solid var(--yellow); }
.sk-card-stat--err     { border-left: 3px solid var(--red); }

@media (max-width: 1024px) {
    .sk-card-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .sk-card-stat-grid { grid-template-columns: 1fr; }
}

/* 3) Filter / action toolbar card --------------------------------------- */
.sk-card-toolbar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.sk-card-toolbar__filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}
.sk-card-toolbar__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* 4) Table card --------------------------------------------------------- */
.sk-card-table {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.sk-card-table__scroll {
    overflow-x: auto;
}
.sk-card-table__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.sk-card-table__title { font-size: 0.95rem; font-weight: 600; margin: 0; }
.sk-card-table table { border-radius: 0; border: none; box-shadow: none; }
.sk-card-table__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* 5) Empty-state card --------------------------------------------------- */
.sk-card-empty {
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 2.25rem 1.5rem;
    box-shadow: var(--shadow-sm);
    text-align: center;
    margin-bottom: 1.25rem;
}
.sk-card-empty__icon {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    opacity: 0.7;
    line-height: 1;
}
.sk-card-empty__title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
    color: var(--text);
}
.sk-card-empty__body {
    font-size: 0.88rem;
    color: var(--text-muted);
    max-width: 480px;
    margin: 0 auto 1rem;
    line-height: 1.5;
}
.sk-card-empty__action { margin-top: 0.25rem; }

/* 6) Form section card -------------------------------------------------- */
.sk-card-form-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
}
.sk-card-form-section__head { margin-bottom: 1rem; }
.sk-card-form-section__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.sk-card-form-section__desc {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.sk-card-form-section__body { display: flex; flex-direction: column; gap: 1rem; }
.sk-field { display: flex; flex-direction: column; gap: 0.4rem; }
.sk-field__label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
}
.sk-field__help {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.sk-field__error {
    font-size: 0.75rem;
    color: var(--red);
    line-height: 1.4;
}

/* Generic responsive collapses ----------------------------------------- */
@media (max-width: 720px) {
    .sk-card-page-header,
    .sk-card-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .sk-card-page-header__actions,
    .sk-card-toolbar__actions { justify-content: flex-start; }
}

/* Visible focus for keyboard users on interactive cards ----------------- */
a.sk-card-stat:focus-visible,
.sk-card-empty .btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Bundle 13 (6.40.0): sidebar emoji wrapper + notification badges ── */
/* Fixed-width box around bare-emoji prefixes so labels start at the
   same x-coordinate as SVG-iconed siblings (.snav-icon is 14×14). */
.sidebar li a > .snav-emoji,
.sidebar-submenu-toggle .snav-emoji {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

/* iPhone-style count chip pinned to the right of a sidebar row. */
.sidebar-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    background: var(--accent, #ef4444);
    color: #fff;
    flex-shrink: 0;
}
.sidebar li a:hover .sidebar-badge,
.sidebar-submenu-toggle:hover .sidebar-badge {
    background: var(--accent, #ef4444);
}
/* /Bundle 13 sidebar badges */

/* ── Notification Center — Bundle 14 (6.41.0) ─────────────────────────────── */
.notif-bell-btn { position: relative; }
.notif-bell-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-card);
}
.notif-panel {
    position: fixed;
    top: 0;
    right: -440px;
    width: 420px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 32px rgba(0,0,0,0.3);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.notif-panel.open { right: 0; }
.notif-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.25);
    z-index: 1999;
    display: none;
}
.notif-panel-backdrop.open { display: block; }
.notif-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
}
.sk-notif-scope-btn {
    background: var(--bg-input, #1f2937);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sk-notif-scope-btn:hover {
    color: var(--text);
    border-color: rgba(124,58,237,0.4);
}
.sk-notif-scope-btn.is-active {
    background: rgba(124,58,237,0.15);
    color: #a78bfa;
    border-color: rgba(124,58,237,0.55);
}
.notif-search-wrap {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.notif-search-wrap input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input, #111827);
    color: var(--text);
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
}
.notif-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.notif-day-header {
    padding: 0.4rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border);
}
.notif-row {
    display: block;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    transition: background 0.12s;
}
.notif-row:hover { background: var(--bg-input); }
.notif-row.notif-unread { background: rgba(74,158,255,0.06); border-left: 3px solid var(--accent,#4a9eff); padding-left: calc(1rem - 3px); }
.notif-row-title {
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.15rem;
    color: var(--text);
}
.notif-row-body {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.notif-expand-btn {
    margin-top: 0.35rem;
    padding: 2px 7px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg-input, #111827);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
}
.notif-row-details {
    margin: 0.45rem 0 0;
    max-height: 260px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg, #0b1220);
    color: var(--text);
    padding: 0.55rem;
    font-size: 0.72rem;
    line-height: 1.4;
}
.notif-row-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.notif-sev-info { color: var(--accent,#4a9eff); }
.notif-sev-warn { color: #f59e0b; }
.notif-sev-err  { color: #ef4444; }
.notif-empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

@media (max-width: 768px) {
    .notif-panel { width: 100%; right: -100%; }
    .notif-panel.open { right: 0; }
}

/* ============================================================
   Privacy Mode (6.77.12)
   Strips brand colors / logos / customer-name strings for
   over-the-shoulder protection. Toggle via topbar eye-icon
   or Ctrl+Shift+P. Server-side: session['privacy_mode'].
   ============================================================ */
/* IMPORTANT: do NOT apply `filter:` to body — that creates a CSS
   containing block which traps every position:fixed descendant
   (sidebar, topbar, modals). Privacy desaturation happens via:
     1. Color-token overrides (vars below)
     2. Per-element filter on images / svg / video only
     3. Explicit overrides for chromatic widgets further down
*/
body.privacy-mode {
  --brand-primary: #888 !important;
  --brand-accent: #555 !important;
  --accent: #888 !important;
  --primary: #888 !important;
  --link: #aaa !important;
  --success: #888 !important;
  --warning: #999 !important;
  --danger: #aaa !important;
  --info: #888 !important;
  --prt-accent: #888 !important;
  --prt-on: #888 !important;
  --prt-off: #aaa !important;
  --prt-warn: #999 !important;
}

body.privacy-mode img,
body.privacy-mode svg,
body.privacy-mode video,
body.privacy-mode picture {
  filter: grayscale(100%) brightness(0.95);
}

/* Hide every logo image regardless of class: sidebar SiteKings logo,
   sidebar customer logo, dashboard cards, page headers. Belt + suspenders. */
body.privacy-mode .dash-org-logo,
body.privacy-mode .dash-org-avatar,
body.privacy-mode .card-bg-logo,
body.privacy-mode .org-brand-logo,
body.privacy-mode .portal-brand-logo,
body.privacy-mode .brand-watermark,
body.privacy-mode .org-logo-img,
body.privacy-mode .sidebar-header img,
body.privacy-mode img[src*="customer_logos"],
body.privacy-mode img[src*="/brand/"],
body.privacy-mode img[alt="SiteKings"] {
  visibility: hidden !important;
  background: #2a2a2a !important;
  border-radius: 4px !important;
}

body.privacy-mode .dash-org-avatar,
body.privacy-mode .dash-org-avatar-fallback {
  background: #444 !important;
  color: transparent !important;
}

/* Customer-name strings — class-based + structural fallback for sidebar
   header where the org-name pill is inline-styled with no class. */
body.privacy-mode .org-name-display,
body.privacy-mode .cust-card-name,
body.privacy-mode .portal-brand-name,
body.privacy-mode .sidebar-header [style*="rgba(121,192,255"] {
  color: transparent !important;
  background: #2a2a2a !important;
  border-radius: 3px;
  user-select: none;
}

body.privacy-mode .btn-primary,
body.privacy-mode .pbpill-on,
body.privacy-mode .pbpill-warn,
body.privacy-mode .pbpill-off {
  background: #555 !important;
  color: #ddd !important;
  border-color: #666 !important;
}

body.privacy-mode a { color: #aaa !important; }
body.privacy-mode a:hover { color: #ddd !important; }

body.privacy-mode .status-badge,
body.privacy-mode .alert-badge,
body.privacy-mode [class*="badge-"] {
  filter: grayscale(100%) !important;
}

/* The toggle itself stays visible and color-cued so the user knows the
   privacy state at a glance. */
body.privacy-mode .privacy-mode-toggle {
  filter: none !important;
  background: #ff9800 !important;
  color: #000 !important;
}

body.privacy-mode {
  outline: 2px solid #ff9800;
  outline-offset: -2px;
}

/* Topbar button — neutral idle state, hover hint. */
.privacy-mode-toggle {
  background: transparent;
  border: 1px solid var(--border, #21262d);
  color: var(--text-muted, #8b949e);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.privacy-mode-toggle:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text, #c9d1d9);
}
/* 6.87.12: instant on-click highlight independent of body.privacy-mode
   so the button feels responsive even before the server round-trip. */
.privacy-mode-toggle.privacy-on {
  background: #ff9800 !important;
  color: #000 !important;
  border-color: #ff9800 !important;
}

/* ── KK-9c: attachment metadata modal ─────────────────────────────── */
.att-meta-modal[hidden] { display: none !important; }
.att-meta-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.att-meta-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.att-meta-panel {
  position: relative;
  width: min(480px, calc(100vw - 1rem));
  max-height: calc(100vh - 2rem);
  background: var(--bg-card, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.att-meta-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border, #30363d);
}
.att-meta-header h3 { margin: 0; font-size: 1rem; }
.att-meta-close {
  background: transparent;
  border: 0;
  color: var(--text-muted, #8b949e);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
}
.att-meta-close:hover { color: var(--text, #c9d1d9); }
.att-meta-body {
  padding: 0.85rem 1rem;
  overflow-y: auto;
  flex: 1 1 auto;
}
.att-meta-preview {
  margin-bottom: 0.75rem;
  text-align: center;
}
.att-meta-preview img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 4px;
  border: 1px solid var(--border, #30363d);
}
.att-meta-preview .att-meta-noimg {
  color: var(--text-muted, #8b949e);
  font-size: 0.85rem;
  padding: 1.5rem;
}
.att-meta-section { margin-bottom: 0.85rem; position: relative; }
.att-meta-tag-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--bg-card, #1a1d27);
  border: 1px solid var(--border, #2d3140);
  border-radius: 6px;
  margin-top: 0.25rem;
  max-height: 220px;
  overflow-y: auto;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.att-meta-tag-suggest-row {
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text, #e1e4e8);
}
.att-meta-tag-suggest-row.is-active,
.att-meta-tag-suggest-row:hover {
  background: var(--bg-elevated, #21262d);
}
.att-meta-section label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted, #8b949e);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.att-meta-section textarea,
.att-meta-section input[type="text"] {
  width: 100%;
  background: var(--bg-input, #0d1117);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  font-size: 0.88rem;
  font-family: inherit;
  box-sizing: border-box;
}
.att-meta-tags,
.att-meta-auto-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
  min-height: 1.6rem;
}
.att-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(56,139,253,0.18);
  color: var(--accent, #58a6ff);
  border: 1px solid rgba(56,139,253,0.35);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.4;
}
.att-meta-pill button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  margin-left: 0.1rem;
}
.att-meta-pill button:hover { color: var(--danger, #ef4444); }
.att-meta-pill.is-auto {
  background: rgba(139,148,158,0.12);
  color: var(--text-muted, #8b949e);
  border-color: rgba(139,148,158,0.35);
}
.att-meta-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-top: 1px solid var(--border, #30363d);
  background: rgba(0,0,0,0.15);
}
@media (max-width: 600px) {
  .att-meta-panel {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}


/* Staff authentication shell and two-factor pages. */
body.sk-auth-body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg, #0d1117);
    color: var(--text, #e1e4e8);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem 1.5rem;
    box-sizing: border-box;
}
.sk-auth-shell {
    flex: 1;
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sk-auth-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.sk-auth-brand img {
    max-width: 180px;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.sk-auth-tagline {
    font-size: 0.75rem;
    color: var(--text-muted, #8b949e);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.sk-auth-card {
    width: 100%;
    background: var(--bg-card, #161b22);
    border: 1px solid var(--border, #30363d);
    border-radius: 12px;
    padding: 2rem 1.85rem 1.6rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
}
.sk-auth-card h2 {
    margin: 0 0 0.3rem;
    font-size: 1.25rem;
    text-align: center;
}
.sk-auth-subtitle {
    margin: 0 0 1.4rem;
    text-align: center;
    color: var(--text-muted, #8b949e);
    font-size: 0.85rem;
}
.sk-auth-flash {
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    margin-bottom: 0.85rem;
    font-size: 0.82rem;
    background: rgba(248, 81, 73, 0.1);
    border-left: 3px solid #f85149;
    color: #f85149;
}
.sk-auth-flash.flash-success,
.sk-auth-flash.flash-info {
    background: rgba(74, 158, 255, 0.1);
    border-left-color: #4a9eff;
    color: #4a9eff;
}
.sk-auth-footer {
    margin-top: 1.75rem;
    font-size: 0.75rem;
    color: var(--text-muted, #8b949e);
    text-align: center;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.sk-auth-footer a {
    color: var(--text-muted, #8b949e);
    text-decoration: none;
}
.sk-auth-footer a:hover { color: var(--text, #e1e4e8); }
.sk-password-wrap { position: relative; }
.sk-password-input { padding-right: 2.5rem; }
.sk-password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #8b949e;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}
.sk-hidden { display: none; }
.sk-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.sk-remember {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}
.sk-remember input { flex-shrink: 0; }
.sk-muted-link {
    font-size: 0.85rem;
    color: #8b949e;
    text-decoration: none;
}
.sk-auth-links {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #30363d);
}
.sk-auth-sep {
    color: #8b949e;
    font-size: 0.85rem;
    margin: 0 0.5rem;
}
.sk-login-lockout {
    background: rgba(231,76,60,0.12);
    border: 1px solid rgba(231,76,60,0.45);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.9rem;
    font-size: 0.88rem;
    color: #f78b8b;
}
.login-form button[type="submit"]:disabled,
.sk-auth-card form button[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.twofa-card { max-width: 600px; }
.twofa-enabled-title { color: #2ecc71; }
.twofa-help { font-size: 0.85em; opacity: 0.7; }
.twofa-codes {
    background: #1a1a2e;
    padding: 12px 16px;
    border-radius: 6px;
    font-family: monospace;
    margin-bottom: 16px;
}
.twofa-code { display: inline-block; margin: 4px 12px 4px 0; }
.twofa-disable-form { margin-top: 16px; }
.twofa-qr-wrap { text-align: center; margin: 20px 0; }
.twofa-qr { border-radius: 8px; background: #fff; padding: 8px; }
.twofa-secret {
    background: #1a1a2e;
    padding: 10px 14px;
    border-radius: 6px;
    font-family: monospace;
    word-break: break-all;
    margin-bottom: 16px;
    text-align: center;
    font-size: 1.1em;
    letter-spacing: 0.15em;
}
.twofa-code-input {
    text-align: center;
    font-size: 1.3em;
    letter-spacing: 0.3em;
}
.twofa-verify-help {
    text-align: center;
    margin-top: 1em;
    font-size: 0.85em;
    opacity: 0.7;
}
@media (max-width: 480px) {
    body.sk-auth-body { padding: 1.5rem 0.75rem 1rem; }
    .sk-auth-card { padding: 1.5rem 1.1rem 1.2rem; }
}


/* Password reset and minimal auth-adjacent pages. */
.forgot-copy {
    font-size: 0.92rem;
    line-height: 1.55;
    color: #c9d1d9;
}
.forgot-reset-link {
    background: rgba(74,158,255,0.1);
    border: 1px solid rgba(74,158,255,0.3);
    border-radius: 6px;
    padding: 0.8rem;
    margin-top: 1rem;
}
.forgot-reset-title {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: #4a9eff;
}
.forgot-reset-url {
    margin: 0;
    word-break: break-all;
}
.forgot-reset-url a { color: #4a9eff; }
.forgot-note {
    margin-top: 1rem;
    font-size: 0.82rem;
    color: #8b949e;
}
.forgot-turnstile {
    margin: 0.75rem 0;
    display: flex;
    justify-content: center;
}
.forgot-help {
    font-size: 0.82rem;
    color: #8b949e;
    margin-top: 1rem;
    line-height: 1.5;
}
.forgot-back,
.reset-back {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border, #30363d);
}
.forgot-back a,
.reset-back a {
    color: #8b949e;
    text-decoration: none;
    font-size: 0.85rem;
}
.reset-state {
    text-align: center;
    padding: 1rem 0;
}
.reset-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reset-icon.is-success { background: rgba(74,158,255,0.15); }
.reset-icon.is-error { background: rgba(248,81,73,0.15); }
.reset-copy {
    font-size: 0.95rem;
    color: #c9d1d9;
}
.reset-copy.is-error { font-size: 0.92rem; }
.reset-muted {
    font-size: 0.82rem;
    color: #8b949e;
    margin-top: 0.5rem;
}
.reset-link {
    display: inline-block;
    margin-top: 1rem;
    color: #4a9eff;
    text-decoration: none;
    font-size: 0.9rem;
}
.reset-login-btn {
    display: inline-block;
    margin-top: 1rem;
    text-decoration: none;
}
.sk-minimal-body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.minimal-main {
    padding: 0.5rem 1rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.minimal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.minimal-header h2 {
    font-size: 0.95rem;
    margin: 0;
    font-weight: 600;
}
.minimal-header .meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}


/* Extracted legacy template styles: keep class-based templates rendered while page CSS is split out. */
.sk-cmd-timeline {
    background: #1a1d23;
    color: #d4d7de;
    border: 1px solid #2a2e36;
    border-radius: 6px;
    margin: 0.5rem 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
  }
  .sk-cmd-timeline > summary {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    background: #21252c;
    border-radius: 6px 6px 0 0;
    user-select: none;
    font-weight: 600;
    color: #9aa3b3;
  }
  .sk-cmd-timeline[open] > summary { border-bottom: 1px solid #2a2e36; }
  .sk-cmd-timeline-body { padding: 0.5rem 0.75rem; max-height: 320px; overflow: auto; }
  .sk-cmd-timeline-list { list-style: none; margin: 0; padding: 0; }
  .sk-cmd-timeline-item {
    padding: 2px 0;
    white-space: nowrap;
    overflow-x: auto;
    border-left: 2px solid #2a2e36;
    padding-left: 6px;
    margin-left: 4px;
  }
  .sk-cmd-timeline-item.sk-lvl-warn  { border-left-color: #d6a82c; color: #f1d38a; }
  .sk-cmd-timeline-item.sk-lvl-error { border-left-color: #d65c5c; color: #f0a8a8; }
  .sk-cmd-ts     { color: #6c7385; }
  .sk-cmd-phase  { color: #88a3c8; margin-left: 6px; white-space: pre; }
  .sk-cmd-pct    { color: #b0b6c2; margin-left: 4px; white-space: pre; }
  .sk-cmd-bracket { color: #6c7385; margin-right: 6px; }
  .sk-cmd-msg    { color: #d4d7de; }
  .sk-cmd-timeline-empty { color: #6c7385; padding: 0.25rem 0; margin: 0; }
  .sk-cmd-timeline-load {
    background: #2a2e36; color: #d4d7de; border: 1px solid #3a3f4a;
    padding: 4px 10px; border-radius: 4px; cursor: pointer; font: inherit;
  }
  .sk-cmd-timeline-load:hover { background: #343943; }

#feature-help-body h1, #feature-help-body h2, #feature-help-body h3 {
    margin: 1.1rem 0 0.5rem;
    color: var(--text);
}
#feature-help-body h1 { font-size: 1.25rem; }
#feature-help-body h2 { font-size: 1.05rem; border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; }
#feature-help-body h3 { font-size: 0.95rem; color: #93c5fd; }
#feature-help-body p { margin: 0 0 0.7rem; }
#feature-help-body ul, #feature-help-body ol { margin: 0 0 0.7rem 1.25rem; }
#feature-help-body li { margin-bottom: 0.2rem; }
#feature-help-body code {
    background: rgba(148, 163, 184, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.82em;
}
#feature-help-body pre {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    overflow: auto;
    margin: 0 0 0.8rem;
}
#feature-help-body pre code { background: none; padding: 0; font-size: 0.8rem; }
#feature-help-body hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
#feature-help-body a { color: #60a5fa; text-decoration: underline; }
.fh-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    vertical-align: middle;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fh-icon-btn:hover {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.35);
}

.sk-lb-thumb { cursor: zoom-in; }
.sk-lb-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 1rem;
    cursor: zoom-out;
}
.sk-lb-overlay.open { display: flex; animation: sk-lb-fade 0.18s ease-out; }
@keyframes sk-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.sk-lb-frame {
    max-width: 95vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.sk-lb-frame img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
}
.sk-lb-caption {
    color: #f3f4f6;
    font-size: 0.84rem;
    text-align: center;
    max-width: 700px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.sk-lb-close {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.55);
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    cursor: pointer;
    font-size: 1.1rem;
}
.sk-lb-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sk-lb-spin 0.8s linear infinite;
}
@keyframes sk-lb-spin { to { transform: rotate(360deg); } }

.sk-wiz-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1.25rem;
}
.sk-wiz-overlay.open { display: flex; animation: sk-wiz-fade 0.18s ease-out; }
@keyframes sk-wiz-fade { from { opacity: 0; } to { opacity: 1; } }

.sk-wiz-card {
    background: var(--bg-card, #1f2937);
    border: 1px solid var(--border, #374151);
    border-radius: 10px;
    width: min(640px, 100%);
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    color: var(--text, #e5e7eb);
}
.sk-wiz-head {
    padding: 1rem 1.25rem 0.6rem;
    border-bottom: 1px solid var(--border, #374151);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.sk-wiz-head h3 { margin: 0 0 0.25rem; font-size: 1rem; font-weight: 600; }
.sk-wiz-head p  { margin: 0; font-size: 0.8rem; color: var(--text-muted, #9ca3af); }
.sk-wiz-close {
    background: none; border: none; color: var(--text-muted, #9ca3af);
    font-size: 1.2rem; cursor: pointer; padding: 0.1rem 0.4rem;
}
.sk-wiz-steps {
    display: flex; gap: 0.4rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border, #374151);
    flex-wrap: wrap;
}
.sk-wiz-pill {
    font-size: 0.7rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border, #374151);
    background: var(--bg, #111827);
    color: var(--text-muted, #9ca3af);
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sk-wiz-pill .num {
    width: 1.1rem; height: 1.1rem; border-radius: 50%;
    background: var(--border, #374151); color: var(--bg, #111827);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.7rem;
}
.sk-wiz-pill.active {
    background: rgba(74, 158, 255, 0.12);
    color: var(--text, #e5e7eb);
    border-color: rgba(74, 158, 255, 0.5);
}
.sk-wiz-pill.active .num { background: var(--primary, #4a9eff); color: #fff; }
.sk-wiz-pill.done {
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.4);
}
.sk-wiz-pill.done .num { background: #22c55e; color: #fff; }
.sk-wiz-pill.done .num::before { content: '✓'; }
.sk-wiz-pill.done .num span { display: none; }

.sk-wiz-body { padding: 1rem 1.25rem 0; }
.sk-wiz-pane { display: none; }
.sk-wiz-pane.active { display: block; animation: sk-wiz-slide 0.18s ease-out; }
@keyframes sk-wiz-slide { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.sk-wiz-pane label { display: block; font-size: 0.78rem; margin-bottom: 0.55rem; }
.sk-wiz-pane label > .lbl { display: block; margin-bottom: 0.18rem; color: var(--text-muted, #9ca3af); font-weight: 500; }
.sk-wiz-pane input[type=text],
.sk-wiz-pane input[type=password],
.sk-wiz-pane input[type=number],
.sk-wiz-pane select,
.sk-wiz-pane textarea {
    width: 100%;
    padding: 0.4rem 0.55rem;
    background: var(--bg, #111827);
    border: 1px solid var(--border, #374151);
    color: var(--text, #e5e7eb);
    border-radius: 4px;
    font-size: 0.85rem;
    box-sizing: border-box;
}
.sk-wiz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.55rem 0.75rem;
}
.sk-wiz-hint {
    font-size: 0.74rem;
    color: var(--text-muted, #9ca3af);
    margin: 0.5rem 0 0;
}
.sk-wiz-test-result {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.82rem;
    border: 1px solid var(--border, #374151);
    background: var(--bg, #111827);
    color: var(--text-muted, #9ca3af);
    white-space: pre-wrap;
    font-family: var(--font-mono, ui-monospace, "SF Mono", monospace);
    display: none;
    word-break: break-word;
}
.sk-wiz-test-result.shown { display: block; }
.sk-wiz-test-result.ok    { border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.08); color: #15803d; }
.sk-wiz-test-result.err   { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); color: #b91c1c; }

.sk-wiz-controls {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border, #374151);
    margin-top: 1rem;
}
.sk-wiz-btn {
    padding: 0.42rem 0.9rem;
    border-radius: 4px;
    font-size: 0.8rem;
    border: 1px solid var(--border, #374151);
    background: var(--bg, #111827);
    color: var(--text, #e5e7eb);
    cursor: pointer;
    font-weight: 500;
}
.sk-wiz-btn:hover:not(:disabled) { background: var(--hover, #374151); }
.sk-wiz-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.sk-wiz-btn-primary {
    background: var(--primary, #4a9eff);
    border-color: var(--primary, #4a9eff);
    color: #fff;
}
.sk-wiz-btn-primary:hover:not(:disabled) { background: var(--primary-dark, #2563eb); border-color: var(--primary-dark, #2563eb); }
.sk-wiz-error { font-size: 0.78rem; color: #b91c1c; margin: 0.4rem 0 0; }

  /* macro-internal utilities — prefixed .skui- to avoid collisions */
  .skui-page-header { display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2,0.5rem); margin:0 0 var(--space-4,1.25rem); padding-bottom:var(--space-3,0.85rem); border-bottom:1px solid var(--border,#2d3140); }
  .skui-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:0.35rem; font-size:0.8rem; color:var(--text-muted,#8b8fa3); margin:0; padding:0; list-style:none; }
  .skui-breadcrumb a { color:inherit; text-decoration:none; }
  .skui-breadcrumb a:hover { color:var(--accent,#4a9eff); text-decoration:underline; }
  .skui-breadcrumb-sep { opacity:0.5; }
  .skui-page-header h1 { margin:0; font-size:1.5rem; font-weight:600; color:var(--text,#e1e4ed); line-height:1.2; }
  .skui-page-header .skui-subtitle { margin:0.25rem 0 0; font-size:0.9rem; color:var(--text-muted,#8b8fa3); line-height:1.45; }
  .skui-page-header-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4,1rem); flex-wrap:wrap; }
  .skui-page-header-actions { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
  .skui-btn { display:inline-flex; align-items:center; gap:0.4rem; padding:0.45rem 0.9rem; border-radius:var(--radius-md,8px); font-size:0.85rem; font-weight:500; line-height:1; border:1px solid var(--border,#2d3140); background:var(--surface,var(--bg-card,#1a1d27)); color:var(--text,#e1e4ed); cursor:pointer; text-decoration:none; transition:background 0.12s, border-color 0.12s; }
  .skui-btn:hover { border-color:var(--accent,#4a9eff); }
  .skui-btn:focus-visible { outline:2px solid var(--accent,#4a9eff); outline-offset:2px; }
  .skui-btn-primary { background:var(--accent,#4a9eff); border-color:var(--accent,#4a9eff); color:#fff; }
  .skui-btn-primary:hover { filter:brightness(1.08); border-color:var(--accent,#4a9eff); }
  .skui-btn-icon { width:1em; height:1em; display:inline-block; }

  .skui-metric-card { display:flex; flex-direction:column; gap:0.35rem; padding:var(--space-3,1rem); border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--surface,var(--bg-card,#1a1d27)); text-decoration:none; color:inherit; transition:border-color 0.12s, transform 0.12s; }
  a.skui-metric-card:hover { border-color:var(--accent,#4a9eff); transform:translateY(-1px); }
  .skui-metric-label { font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted,#8b8fa3); font-weight:500; }
  .skui-metric-value { font-size:1.65rem; font-weight:600; color:var(--text,#e1e4ed); line-height:1.1; }
  .skui-metric-sub { font-size:0.8rem; color:var(--text-muted,#8b8fa3); }
  .skui-metric-card[data-status="good"] .skui-metric-value { color:var(--success,#3fb950); }
  .skui-metric-card[data-status="warn"] .skui-metric-value { color:var(--warning,#d29922); }
  .skui-metric-card[data-status="bad"]  .skui-metric-value { color:var(--danger,#e5484d); }
  .skui-metric-card[data-status="info"] .skui-metric-value { color:var(--info,#4a9eff); }

  .skui-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; text-align:center; padding:var(--space-6,3rem) var(--space-4,1.25rem); border:1px dashed var(--border,#2d3140); border-radius:var(--radius-md,8px); color:var(--text-muted,#8b8fa3); }
  .skui-empty-icon { font-size:2.25rem; line-height:1; opacity:0.7; }
  .skui-empty-title { margin:0; font-size:1rem; font-weight:600; color:var(--text,#e1e4ed); }
  .skui-empty-body { margin:0; max-width:46ch; font-size:0.88rem; line-height:1.5; }

  .skui-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.18rem 0.6rem; border-radius:999px; font-size:0.72rem; font-weight:600; line-height:1.2; border:1px solid currentColor; background:transparent; }
  .skui-badge::before { content:""; width:0.45em; height:0.45em; border-radius:50%; background:currentColor; }
  .skui-badge[data-state="good"] { color:var(--success,#3fb950); }
  .skui-badge[data-state="warn"] { color:var(--warning,#d29922); }
  .skui-badge[data-state="bad"]  { color:var(--danger,#e5484d); }
  .skui-badge[data-state="info"] { color:var(--info,#4a9eff); }
  .skui-badge[data-state="mute"] { color:var(--text-muted,#8b8fa3); }

  .skui-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; padding:0.6rem 0; margin:0 0 var(--space-3,1rem); }

  .skui-chip { display:inline-flex; align-items:center; gap:0.4rem; padding:0.3rem 0.75rem; border-radius:999px; font-size:0.8rem; font-weight:500; border:1px solid var(--border,#2d3140); background:var(--surface,var(--bg-card,#1a1d27)); color:var(--text,#e1e4ed); text-decoration:none; cursor:pointer; transition:all 0.12s; }
  .skui-chip:hover { border-color:var(--accent,#4a9eff); }
  .skui-chip[aria-pressed="true"], .skui-chip.is-active { border-color:var(--accent,#4a9eff); background:color-mix(in srgb, var(--accent,#4a9eff) 15%, transparent); color:var(--accent,#4a9eff); }
  .skui-chip-count { padding:0.05rem 0.4rem; border-radius:999px; background:color-mix(in srgb, currentColor 15%, transparent); font-size:0.7rem; font-weight:600; }

  .skui-menu { position:relative; display:inline-block; }
  .skui-menu > summary { list-style:none; }
  .skui-menu > summary::-webkit-details-marker { display:none; }
  .skui-menu-list { position:absolute; right:0; top:calc(100% + 4px); min-width:11rem; padding:0.35rem; margin:0; list-style:none; background:var(--surface,var(--bg-card,#1a1d27)); border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); box-shadow:0 6px 20px rgba(0,0,0,0.35); z-index:50; }
  .skui-menu-item { display:block; padding:0.45rem 0.7rem; font-size:0.85rem; color:var(--text,#e1e4ed); text-decoration:none; border-radius:var(--radius-sm,6px); cursor:pointer; }
  .skui-menu-item:hover, .skui-menu-item:focus-visible { background:color-mix(in srgb, var(--accent,#4a9eff) 12%, transparent); outline:none; }
  .skui-menu-item[data-danger="true"] { color:var(--danger,#e5484d); }
  .skui-menu-divider { height:1px; margin:0.3rem 0; background:var(--border,#2d3140); }

  .skui-table-card { border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--surface,var(--bg-card,#1a1d27)); overflow:hidden; }
  .skui-table-card-header { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; padding:0.85rem 1rem; border-bottom:1px solid var(--border,#2d3140); }
  .skui-table-card-titles { display:flex; flex-direction:column; gap:0.15rem; min-width:0; }
  .skui-table-card-title { margin:0; font-size:0.95rem; font-weight:600; color:var(--text,#e1e4ed); }
  .skui-table-card-subtitle { margin:0; font-size:0.8rem; color:var(--text-muted,#8b8fa3); }
  .skui-table-card-toolbar { display:flex; align-items:center; gap:0.4rem; }
  .skui-table-card-body { overflow-x:auto; }
  .skui-table-card table { width:100%; border-collapse:collapse; font-size:0.88rem; }
  .skui-table-card thead th { text-align:left; font-weight:500; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted,#8b8fa3); padding:0.65rem 1rem; background:var(--bg,#0f1117); border-bottom:1px solid var(--border,#2d3140); }
  .skui-table-card tbody td { padding:0.65rem 1rem; border-bottom:1px solid var(--border,#2d3140); color:var(--text,#e1e4ed); vertical-align:middle; }
  .skui-table-card tbody tr:last-child td { border-bottom:none; }
  .skui-table-card tbody tr:hover { background:color-mix(in srgb, var(--accent,#4a9eff) 6%, transparent); }
  .skui-table-card tbody tr[aria-selected="true"] { background:color-mix(in srgb, var(--accent,#4a9eff) 14%, transparent); }

  /* ── Bundle H — unified card primitives ───────────────────────────────
     Shared base (.skui-card) + per-type modifiers. 8px radius, 1px subtle
     border, --space-4 internal padding, --accent border on hover. Each
     macro composes the base + a modifier so visual polish stays uniform
     while the slot content varies per type. ─────────────────────────── */
  .skui-card {
    display:flex; flex-direction:column; gap:var(--space-3,0.75rem);
    padding:var(--space-4,1rem);
    background:var(--surface,var(--bg-card,#1a1d27));
    border:1px solid var(--border,#2d3140);
    border-radius:var(--radius-md,8px);
    color:var(--text,#e1e4ed);
    text-decoration:none;
    transition:border-color 0.15s ease, transform 0.12s ease, background 0.15s ease;
  }
  .skui-card:hover { border-color:var(--accent,#4a9eff); }
  a.skui-card:hover, .skui-card[data-clickable="true"]:hover { transform:translateY(-1px); }
  .skui-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3,0.75rem); }
  .skui-card-title { margin:0; font-size:0.95rem; font-weight:600; line-height:1.25; color:var(--text,#e1e4ed); }
  .skui-card-subtitle { margin:0; font-size:0.78rem; color:var(--text-muted,#8b8fa3); line-height:1.4; }
  .skui-card-body { font-size:0.85rem; line-height:1.5; color:var(--text,#e1e4ed); }
  .skui-card-body p { margin:0; }
  .skui-card-footer {
    display:flex; align-items:center; justify-content:space-between; gap:var(--space-2,0.5rem);
    padding-top:var(--space-3,0.75rem);
    margin-top:auto;
    border-top:1px solid var(--border,#2d3140);
    font-size:0.78rem; color:var(--text-muted,#8b8fa3);
  }
  .skui-card-footer-actions { display:flex; gap:0.4rem; align-items:center; }

  /* ── customer_card ──────────────────────────────────────────────── */
  .skui-card-customer { gap:var(--space-2,0.5rem); }
  .skui-card-customer .skui-card-title { font-size:1rem; }
  .skui-card-customer-meta {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));
    gap:var(--space-2,0.5rem) var(--space-3,0.75rem); margin:0; padding:0;
  }
  .skui-card-customer-meta dt { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted,#8b8fa3); margin:0; font-weight:500; }
  .skui-card-customer-meta dd { margin:0.1rem 0 0; font-size:0.88rem; font-weight:600; color:var(--text,#e1e4ed); }
  .skui-card-customer-meta dd[data-status="good"] { color:var(--success,#22c55e); }
  .skui-card-customer-meta dd[data-status="warn"] { color:var(--warning,#f59e0b); }
  .skui-card-customer-meta dd[data-status="bad"]  { color:var(--danger,#ef4444); }
  .skui-card-customer-hover-actions {
    display:flex; gap:0.35rem; flex-wrap:wrap;
    opacity:0; transition:opacity 0.15s ease;
    margin-top:var(--space-2,0.5rem);
  }
  .skui-card-customer:hover .skui-card-customer-hover-actions { opacity:1; }

  /* ── risk_card ──────────────────────────────────────────────────── */
  .skui-card-risk { border-left:3px solid var(--text-muted,#8b8fa3); }
  .skui-card-risk[data-severity="info"]     { border-left-color:var(--info,#38bdf8); }
  .skui-card-risk[data-severity="low"]      { border-left-color:var(--success,#22c55e); }
  .skui-card-risk[data-severity="medium"]   { border-left-color:var(--warning,#f59e0b); }
  .skui-card-risk[data-severity="high"]     { border-left-color:var(--danger,#ef4444); }
  .skui-card-risk[data-severity="critical"] { border-left-color:var(--danger,#ef4444); background:color-mix(in srgb, var(--danger,#ef4444) 5%, var(--surface,#1a1d27)); }
  .skui-card-risk-severity {
    font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
    padding:0.18rem 0.55rem; border-radius:999px;
    border:1px solid currentColor; line-height:1.2;
    flex-shrink:0;
  }
  .skui-card-risk[data-severity="info"]     .skui-card-risk-severity { color:var(--info,#38bdf8); }
  .skui-card-risk[data-severity="low"]      .skui-card-risk-severity { color:var(--success,#22c55e); }
  .skui-card-risk[data-severity="medium"]   .skui-card-risk-severity { color:var(--warning,#f59e0b); }
  .skui-card-risk[data-severity="high"]     .skui-card-risk-severity { color:var(--danger,#ef4444); }
  .skui-card-risk[data-severity="critical"] .skui-card-risk-severity { color:var(--danger,#ef4444); }

  /* ── integration_card ───────────────────────────────────────────── */
  .skui-card-integration .skui-card-title { display:inline-flex; align-items:center; gap:0.45rem; }
  .skui-card-integration-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:1.6rem; height:1.6rem; flex-shrink:0;
    border-radius:var(--radius-sm,4px);
    background:var(--bg,#0f1117); border:1px solid var(--border,#2d3140);
    font-size:0.95rem; line-height:1;
  }
  .skui-card-integration-status {
    font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em;
    display:inline-flex; align-items:center; gap:0.3rem;
    color:var(--text-muted,#8b8fa3);
  }
  .skui-card-integration-status::before {
    content:""; width:0.5em; height:0.5em; border-radius:50%; background:currentColor;
  }
  .skui-card-integration-status[data-status="connected"],
  .skui-card-integration-status[data-status="enabled"],
  .skui-card-integration-status[data-status="ok"]        { color:var(--success,#22c55e); }
  .skui-card-integration-status[data-status="warn"],
  .skui-card-integration-status[data-status="degraded"]  { color:var(--warning,#f59e0b); }
  .skui-card-integration-status[data-status="error"],
  .skui-card-integration-status[data-status="failed"]    { color:var(--danger,#ef4444); }
  .skui-card-integration-status[data-status="disabled"],
  .skui-card-integration-status[data-status="none"]      { color:var(--text-muted,#8b8fa3); }

  /* ── help_article_card ──────────────────────────────────────────── */
  a.skui-card-help { color:inherit; }
  .skui-card-help-icon {
    display:inline-flex; align-items:center; justify-content:center;
    flex-shrink:0; width:2rem; height:2rem;
    border-radius:var(--radius-sm,4px);
    background:var(--bg,#0f1117); border:1px solid var(--border,#2d3140);
    font-size:1.1rem; line-height:1;
  }
  .skui-card-help-row { display:flex; gap:var(--space-3,0.75rem); align-items:flex-start; }
  .skui-card-help-category { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted,#8b8fa3); font-weight:600; }
  .skui-card-help .skui-card-title { font-size:0.9rem; }
  .skui-card-help-summary { margin:0.25rem 0 0; font-size:0.78rem; color:var(--text-muted,#8b8fa3); line-height:1.45; }

  /* ── Bundle FF — risk pill + confirm sheet ─────────────────────────────
     Risk pills annotate buttons that perform destructive or impactful
     operations. Designed to sit *next to* a button rather than replacing
     it, so the existing click handler stays intact. The pill carries a
     `title` attribute so hover-tooltip explains the risk concisely. */
  .skui-risk-pill {
    display:inline-flex; align-items:center; gap:0.25rem;
    padding:0.1rem 0.45rem; border-radius:var(--radius-sm,4px);
    font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
    line-height:1.3; border:1px solid currentColor; cursor:help; user-select:none;
    background:transparent;
  }
  .skui-risk-pill[data-level="info"]     { color:var(--info,#4a9eff); }
  .skui-risk-pill[data-level="low"]      { color:var(--success,#3fb950); }
  .skui-risk-pill[data-level="medium"]   { color:var(--warning,#d29922); }
  .skui-risk-pill[data-level="high"]     { color:var(--danger,#e5484d); }
  .skui-risk-pill[data-level="critical"] {
    color:var(--danger,#e5484d);
    background:color-mix(in srgb, var(--danger,#e5484d) 12%, transparent);
  }
  .skui-risk-pill::before {
    content:""; width:0.4em; height:0.4em; border-radius:50%; background:currentColor;
  }

  /* ── Bundle AA — generic right-side detail drawer ─────────────────────────
     Right-aligned slide-in panel for inspector-style detail views. Designed
     as shared infra so Bundles AA (printers), Q (endpoints inspector), V
     (backup detail) can all reuse the same skeleton. The macro drawer()
     emits the chrome; callers fill the body via Jinja {{ '{%' }} call {{ '%}' }}.
     JS opens via data-skui-drawer-open="<id>" on a trigger element. */
  .skui-drawer-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    opacity:0; pointer-events:none;
    transition:opacity 0.18s ease; z-index:90;
  }
  .skui-drawer-backdrop[data-open="true"] { opacity:1; pointer-events:auto; }
  .skui-drawer {
    position:fixed; top:0; right:0; bottom:0;
    width:min(420px, 92vw);
    background:var(--surface,var(--bg-card,#1a1d27));
    border-left:1px solid var(--border,#2d3140);
    box-shadow:-12px 0 36px rgba(0,0,0,0.45);
    transform:translateX(100%);
    transition:transform 0.22s ease;
    z-index:91;
    display:flex; flex-direction:column;
    color:var(--text,#e1e4ed);
  }
  .skui-drawer[data-open="true"] { transform:translateX(0); }
  .skui-drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    gap:0.75rem; padding:0.85rem 1rem;
    border-bottom:1px solid var(--border,#2d3140);
    flex-shrink:0;
  }
  .skui-drawer-title { margin:0; font-size:1rem; font-weight:600; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .skui-drawer-close {
    background:transparent; border:none; color:var(--text-muted,#8b8fa3);
    font-size:1.4rem; line-height:1; cursor:pointer; padding:0.1rem 0.4rem;
    border-radius:var(--radius-sm,4px);
  }
  .skui-drawer-close:hover { color:var(--text,#e1e4ed); background:var(--bg,#0f1117); }
  .skui-drawer-body {
    padding:1rem; overflow-y:auto; flex:1; font-size:0.88rem; line-height:1.5;
  }
  .skui-drawer-body dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:0.45rem 0.85rem; }
  .skui-drawer-body dt { color:var(--text-muted,#8b8fa3); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; }
  .skui-drawer-body dd { margin:0; color:var(--text,#e1e4ed); word-break:break-word; }
  .skui-drawer-section { margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--border,#2d3140); }
  .skui-drawer-section:first-child { margin-top:0; padding-top:0; border-top:none; }
  .skui-drawer-section-title { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted,#8b8fa3); margin:0 0 0.5rem; font-weight:600; }
  .skui-drawer-actions {
    display:flex; gap:0.5rem; padding:0.75rem 1rem;
    border-top:1px solid var(--border,#2d3140); flex-shrink:0; flex-wrap:wrap;
  }


.skui-onboarding {
  background: var(--surface, #1a1d27);
  border: 1px solid var(--border, #2d3140);
  border-radius: var(--radius-md, 8px);
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
  position: relative;
}
.skui-onboarding-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap: 0.75rem; margin-bottom: 0.65rem;
}
.skui-onboarding-titles { min-width: 0; }
.skui-onboarding-title {
  margin: 0; font-size: 0.95rem; font-weight: 600;
  color: var(--text, #e1e4ed);
  display:flex; align-items:center; gap:0.5rem;
}
.skui-onboarding-role {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--accent, #4a9eff); padding: 0.1rem 0.45rem;
  border: 1px solid currentColor; border-radius: var(--radius-sm,4px);
  font-weight: 700;
}
.skui-onboarding-sub {
  margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-muted, #8b8fa3);
}
.skui-onboarding-progress {
  height: 4px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #8b8fa3) 20%, transparent);
  overflow: hidden; margin: 0.6rem 0 0.85rem;
}
.skui-onboarding-bar {
  height: 100%;
  background: var(--accent, #4a9eff);
  transition: width 0.25s ease;
}
.skui-onboarding-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 0.5rem;
}
.skui-onboarding-item {
  display:flex; align-items:flex-start; gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg, #0f1117);
  border: 1px solid var(--border, #2d3140);
  border-radius: var(--radius-sm, 6px);
  font-size: 0.83rem;
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.skui-onboarding-item:hover { border-color: var(--accent, #4a9eff); transform: translateY(-1px); }
.skui-onboarding-item[data-done="true"] {
  opacity: 0.55;
  text-decoration: line-through;
}
.skui-onboarding-item[data-done="true"] .skui-onboarding-check::before { content: "✔"; color: var(--success, #3fb950); }
.skui-onboarding-check {
  width: 1rem; height: 1rem; border-radius: 999px;
  border: 1.5px solid var(--text-muted, #8b8fa3);
  flex-shrink: 0; display:inline-flex; align-items:center; justify-content:center;
  font-size: 0.7rem; line-height: 1; margin-top: 0.1rem;
}
.skui-onboarding-text { min-width: 0; }
.skui-onboarding-text-title { font-weight: 600; color: var(--text, #e1e4ed); }
.skui-onboarding-text-body { font-size: 0.74rem; color: var(--text-muted, #8b8fa3); margin-top: 0.15rem; }
.skui-onboarding-dismiss {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: transparent; border: none; color: var(--text-muted, #8b8fa3);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  padding: 0.2rem 0.45rem; border-radius: var(--radius-sm, 4px);
}
.skui-onboarding-dismiss:hover { color: var(--text, #e1e4ed); background: var(--bg, #0f1117); }

.sk-assignee-row { display:flex; align-items:center; gap:0.6rem;
    padding:0.45rem 0.7rem; cursor:pointer;
    border-bottom:1px solid var(--border,#2d3140); }
  .sk-assignee-row:last-child { border-bottom:none; }
  .sk-assignee-row:hover, .sk-assignee-row.is-focused {
    background:color-mix(in srgb, var(--accent,#4a9eff) 12%, transparent); }
  .sk-assignee-row .ta-name { font-weight:500; color:var(--text,#e1e4ed); }
  .sk-assignee-row .ta-sub { font-size:0.78rem; color:var(--text-muted,#9ba3af); }
  .sk-assignee-kind { padding:0.1rem 0.45rem; border-radius:999px;
    font-size:0.7rem; font-weight:600; border:1px solid var(--border,#2d3140); }
  .sk-assignee-kind.is-user { color:#4a9eff; border-color:#4a9eff55; }
  .sk-assignee-kind.is-contact { color:#22c55e; border-color:#22c55e55; }
  .sk-assignee-empty { padding:0.55rem 0.7rem; color:var(--text-muted,#9ba3af);
    font-size:0.85rem; font-style:italic; }
  .sk-assignee-add-row { padding:0.5rem 0.7rem; cursor:pointer;
    background:var(--bg-elevated,#11141d); color:var(--accent,#4a9eff);
    font-weight:600; border-top:1px solid var(--border,#2d3140); }
  .sk-assignee-add-row:hover { background:color-mix(in srgb, var(--accent,#4a9eff) 14%, transparent); }

  /* Modal */
  .sk-contact-modal-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:1000;
    display:flex; align-items:center; justify-content:center; }
  .sk-contact-modal {
    background:var(--bg-card,#1a1d27); border:1px solid var(--border,#2d3140);
    border-radius:10px; padding:1.1rem 1.2rem; min-width:360px; max-width:520px;
    box-shadow:0 12px 40px rgba(0,0,0,0.5); }
  .sk-contact-modal h3 { margin:0 0 0.6rem 0; }
  .sk-contact-modal .form-group { margin-bottom:0.5rem; }
  .sk-contact-modal label { font-size:0.85em; color:var(--text-muted,#9ba3af); }
  .sk-contact-modal .actions { display:flex; gap:0.5rem; justify-content:flex-end; margin-top:0.7rem; }
  .sk-contact-modal .err { color:#ef4444; font-size:0.85em; min-height:1.2em; }

.sk-typeahead-row { display:flex; align-items:center; gap:0.7rem;
    padding:0.6rem 0.8rem; cursor:pointer; border-bottom:1px solid var(--border,#2d3140); }
  .sk-typeahead-row:last-child { border-bottom:none; }
  .sk-typeahead-row:hover, .sk-typeahead-row.is-focused {
    background:color-mix(in srgb, var(--accent,#4a9eff) 12%, transparent); }
  .sk-typeahead-row .ta-thumb { width:38px; height:38px; flex-shrink:0;
    border-radius:4px; object-fit:cover; background:var(--bg,#0c0e15);
    border:1px solid var(--border,#2d3140); }
  .sk-typeahead-row .ta-thumb-empty { width:38px; height:38px; flex-shrink:0;
    border-radius:4px; background:var(--bg,#0c0e15);
    border:1px solid var(--border,#2d3140); display:flex;
    align-items:center; justify-content:center; color:var(--text-muted,#9ba3af);
    font-size:0.65rem; }
  .sk-typeahead-row .ta-name { font-weight:500; color:var(--text,#e1e4ed); }
  .sk-typeahead-row .ta-name mark, .sk-typeahead-row .ta-sku mark {
    background:rgba(74,158,255,0.35); color:inherit; padding:0 1px; border-radius:2px; }
  .sk-typeahead-row .ta-sku { font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:0.8rem; color:var(--text-muted,#9ba3af); }
  .sk-typeahead-row .ta-sub { font-size:0.78rem; color:var(--text-muted,#9ba3af); }
  .sk-typeahead-row .ta-meta { display:flex; align-items:center; gap:0.4rem;
    flex-shrink:0; flex-direction:column; }
  .sk-typeahead-row .ta-price { font-size:0.78rem; color:var(--text-muted,#9ba3af); }
  .sk-typeahead-badge { padding:0.15rem 0.5rem; border-radius:999px; font-size:0.72rem;
    font-weight:600; border:1px solid var(--border,#2d3140); white-space:nowrap; }
  .sk-typeahead-badge.is-ok { color:#22c55e; border-color:#22c55e55; background:#22c55e15; }
  .sk-typeahead-badge.is-warn { color:#f59e0b; border-color:#f59e0b55; background:#f59e0b15; }
  .sk-typeahead-badge.is-bad { color:#ef4444; border-color:#ef444455; background:#ef444415; }
  .sk-typeahead-clear { margin-left:0.4rem; cursor:pointer; color:var(--text-muted,#9ba3af);
    border:none; background:transparent; font-size:1rem; line-height:1; }
  .sk-typeahead-clear:hover { color:#ef4444; }
  .sk-typeahead-empty { padding:0.6rem 0.75rem; color:var(--text-muted,#9ba3af);
    font-size:0.85rem; font-style:italic; }
  .sk-typeahead-input { padding-right:2rem; }
  .sk-typeahead-wrap-clear { position:absolute; right:0.5rem; top:50%; transform:translateY(-50%); }

.sk-saved-views { display:flex; flex-wrap:nowrap; align-items:center; gap:0.4rem; padding:0.4rem 0; margin:0 0 0.75rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
    .sk-saved-views::-webkit-scrollbar { height:4px; }
    .sk-saved-views::-webkit-scrollbar-thumb { background:var(--border,#2d3140); border-radius:2px; }
    .sk-saved-views .skv-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted,#8b8fa3); margin-right:0.2rem; flex-shrink:0; }
    .sk-saved-views .skv-chip { display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.7rem; border-radius:999px; font-size:0.78rem; font-weight:500; line-height:1; border:1px solid var(--border,#2d3140); background:var(--surface,var(--bg-card,#1a1d27)); color:var(--text,#e1e4ed); text-decoration:none; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:border-color 0.12s, background 0.12s; }
    .sk-saved-views .skv-chip:hover { border-color:var(--accent,#4a9eff); }
    .sk-saved-views .skv-chip.is-active { border-color:var(--accent,#4a9eff); background:color-mix(in srgb, var(--accent,#4a9eff) 15%, transparent); color:var(--accent,#4a9eff); }
    .sk-saved-views .skv-chip-default { color:var(--warning,#d29922); margin-left:0.1rem; }
    .sk-saved-views .skv-chip-menu-btn { background:transparent; border:none; color:var(--text-muted,#8b8fa3); cursor:pointer; padding:0 0 0 0.3rem; font-size:0.85rem; line-height:1; }
    .sk-saved-views .skv-chip-menu-btn:hover { color:var(--accent,#4a9eff); }
    .sk-saved-views .skv-save-btn { padding:0.3rem 0.7rem; border-radius:999px; font-size:0.78rem; font-weight:500; line-height:1; border:1px dashed var(--border,#2d3140); background:transparent; color:var(--text-muted,#8b8fa3); cursor:pointer; white-space:nowrap; flex-shrink:0; }
    .sk-saved-views .skv-save-btn:hover { border-color:var(--accent,#4a9eff); color:var(--accent,#4a9eff); }
    .sk-saved-views .skv-menu { position:absolute; min-width:10rem; padding:0.3rem; margin:0; list-style:none; background:var(--surface,var(--bg-card,#1a1d27)); border:1px solid var(--border,#2d3140); border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.35); z-index:9999; }
    .sk-saved-views .skv-menu button { display:block; width:100%; text-align:left; padding:0.4rem 0.6rem; background:transparent; border:none; color:var(--text,#e1e4ed); font-size:0.8rem; cursor:pointer; border-radius:4px; }
    .sk-saved-views .skv-menu button:hover { background:var(--bg-input,#0f1117); color:var(--accent,#4a9eff); }

.fq-panel { margin: 0 0 1.25rem; }
.fq-panel h3 { font-size: 0.95rem; margin: 0 0 0.6rem; color: var(--text); }
.fq-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.fq-table th { text-align: left; padding: 0.4rem 0.6rem; color: var(--text-muted); font-weight: var(--weight-bold); border-bottom: 1px solid var(--border); }
.fq-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.fq-actions { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.fq-actions form { display: inline; margin: 0; }
.fq-actions button, .fq-actions a { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
.fq-row { display: none; }
.fq-row.is-visible { display: table-row; }
.fq-name { font-weight: var(--weight-bold); }
.fq-meta { font-size: 0.72rem; color: var(--text-muted); }
.fq-sev { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.fq-sev--crit { background: rgba(239,68,68,0.15);  color: #ef4444; border: 1px solid rgba(239,68,68,0.4); }
.fq-sev--high { background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); }
.fq-sev--med  { background: rgba(59,130,246,0.15); color: #3b82f6; border: 1px solid rgba(59,130,246,0.4); }
.fq-owner-empty { color: var(--text-muted); font-style: italic; font-size: 0.78rem; }
.fq-empty { padding: 0.75rem; text-align: center; color: var(--text-muted); font-style: italic; }
.fq-modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:center; justify-content:center; }
.fq-modal-bg.is-open { display: flex; }
.fq-modal { background: var(--bg-card, #161b22); border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; min-width: 360px; max-width: 480px; }
.fq-modal h4 { margin: 0 0 0.75rem; font-size: 1rem; }
.fq-modal label { display:block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.fq-modal input[type=text] { width:100%; padding: 0.4rem 0.6rem; background: var(--surface-input); border: 1px solid var(--border); color: var(--text); border-radius: 4px; font-family: monospace; }
.fq-modal-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top: 1rem; }

.vo-filter-row { display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
  .vo-filter-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .65rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); text-decoration:none; font-size:.78rem; }
  .vo-filter-pill.active { border-color:var(--primary); color:var(--primary); background:rgba(88,166,255,.08); }
  .vo-search-row { display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:0 0 1rem; }
  .vo-view-toggle { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .vo-view-toggle button { background:transparent; color:var(--text-muted); border:0; padding:.45rem .75rem; cursor:pointer; }
  .vo-view-toggle button.active { background:rgba(88,166,255,.12); color:var(--primary); }
  .vo-search-row input { min-width:260px; max-width:520px; width:100%; background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:.55rem .75rem; }
  .vo-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; }
  .vo-order { margin-bottom:1rem; overflow:hidden; }
  .vo-order-head { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; padding:.9rem 1rem; border-bottom:1px solid rgba(255,255,255,.05); }
  .vo-order-head h3 { margin:0; font-size:1rem; display:flex; gap:.45rem; align-items:center; flex-wrap:wrap; }
  .vo-order-meta { font-size:.82rem; color:var(--text-muted); display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.35rem; }
  .vo-order-tools { display:flex; gap:.45rem; flex-wrap:wrap; }
  .vo-note-btn, .vo-track-link { border:1px solid var(--border); background:transparent; color:var(--text-muted); border-radius:6px; padding:.35rem .55rem; text-decoration:none; font-size:.76rem; }
  .vo-track-link { color:var(--primary); border-color:rgba(88,166,255,.35); }
  .vo-order-note { margin:.85rem 1rem 0; padding:.6rem .75rem; border:1px solid rgba(88,166,255,.2); background:rgba(88,166,255,.06); border-radius:6px; font-size:.82rem; }
  .vo-ship { margin:.75rem 1rem 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; }
  .vo-ship-box { padding:.65rem .75rem; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:6px; }
  .vo-ship-box .k { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:.25rem; }
  .vo-items { padding:.85rem 1rem 1rem; display:grid; gap:.7rem; }
  .vo-item { display:grid; grid-template-columns:32px 68px 1fr 120px 130px 86px; gap:.8rem; align-items:center; padding:.7rem .75rem; border:1px solid rgba(255,255,255,.06); border-radius:8px; background:rgba(255,255,255,.02); }
  .vo-item.imported { border-color:rgba(34,197,94,.22); background:rgba(34,197,94,.06); }
  .vo-item.assigned { border-color:rgba(59,130,246,.22); background:rgba(59,130,246,.06); }
  .vo-item img { width:60px; height:60px; object-fit:contain; border-radius:6px; background:#fff; }
  .vo-img-empty { width:60px; height:60px; border-radius:6px; border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:.72rem; }
  .vo-item-title { font-weight:600; font-size:.86rem; }
  .vo-item-sub { color:var(--text-muted); font-size:.74rem; margin-top:.22rem; font-family:ui-monospace, monospace; }
  .vo-stat { font-size:.72rem; padding:2px 8px; border-radius:999px; border:1px solid var(--border); display:inline-block; }
  .vo-stat.ok { color:#22c55e; border-color:rgba(34,197,94,.35); }
  .vo-stat.blue { color:#60a5fa; border-color:rgba(96,165,250,.35); }
  .vo-bulk-bar { position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); z-index:220; background:var(--bg-card); border:1px solid var(--primary); border-radius:8px; padding:.7rem 1rem; box-shadow:0 6px 24px rgba(0,0,0,.45); display:flex; gap:.8rem; align-items:center; }
  .vo-bulk-bar .count { color:var(--primary); font-weight:600; }
  .vo-modal { position:fixed; inset:0; z-index:260; background:rgba(0,0,0,.56); display:none; align-items:center; justify-content:center; padding:1rem; }
  .vo-modal-card { width:min(920px,96vw); max-height:92vh; overflow:auto; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1rem; }
  .vo-dest-grid { display:grid; gap:.55rem; }
  .vo-dest { display:flex; gap:.65rem; align-items:flex-start; padding:.65rem .75rem; border:1px solid var(--border); border-radius:8px; cursor:pointer; }
  .vo-hint { color:var(--text-muted); font-size:.75rem; margin-top:.18rem; }
  .vo-results { margin-top:.5rem; max-height:220px; overflow:auto; border:1px solid var(--border); border-radius:6px; }
  .vo-result-row { padding:.55rem .7rem; border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
  .vo-result-row:hover { background:rgba(88,166,255,.08); }
  .vo-empty { color:var(--text-muted); padding:.7rem; font-size:.8rem; }
  .vo-toast { position:fixed; bottom:2rem; right:2rem; background:rgba(34,197,94,0.95); color:white; padding:.8rem 1.2rem; border-radius:6px; box-shadow:0 4px 16px rgba(0,0,0,0.4); display:none; z-index:1000; font-weight:600; font-size:.85rem; max-width:400px; }
  .vo-toast.err { background:rgba(239,68,68,0.95); }
  .vo-toast a { color:white; text-decoration:underline; margin-left:0.6rem; }
  body.vo-view-grid .vo-items { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
  body.vo-view-grid .vo-item { grid-template-columns:32px 1fr; align-items:start; }
  body.vo-view-grid .vo-item > div:nth-child(2) { grid-column:1 / span 2; display:flex; align-items:center; gap:.8rem; }
  body.vo-view-grid .vo-item > div:nth-child(3) { grid-column:1 / span 2; }
  body.vo-view-grid .vo-item > .vo-col-qty,
  body.vo-view-grid .vo-item > .vo-col-price,
  body.vo-view-grid .vo-item > .vo-col-state { grid-column:1 / span 2; margin-left:0; }
  body.vo-view-grid .vo-item img,
  body.vo-view-grid .vo-item .vo-img-empty { width:72px; height:72px; }
  @media (max-width: 980px) {
    .vo-item { grid-template-columns:32px 60px 1fr; }
    .vo-item > .vo-col-qty, .vo-item > .vo-col-price, .vo-item > .vo-col-state { margin-left:92px; }
  }

.ap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:1.5rem; }
  .ap-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
  .ap-card h4 { margin:0 0 .5rem; font-size:.85rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
  .ap-num { font-size:1.7rem; font-weight:600; }
  .ap-sub { font-size:.85rem; color:var(--text-muted); margin-top:.25rem; }
  .ap-sec { margin-bottom:1.5rem; }
  .ap-sec h3 { margin:0 0 .5rem; }
  .badge-ok    { background:#1f7a3d; color:#fff; padding:.2rem .5rem; border-radius:4px; font-size:.75rem; }
  .badge-wait  { background:#a87a17; color:#fff; padding:.2rem .5rem; border-radius:4px; font-size:.75rem; }
  .badge-off   { background:#666;   color:#fff; padding:.2rem .5rem; border-radius:4px; font-size:.75rem; }

.ad-w {
    --ad-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ad-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --ad-accent: var(--primary, #4a9eff);
    --ad-mute: var(--text-muted);
    font-family: var(--ad-sans);
    letter-spacing: -0.005em;
    animation: ad-fade-in 0.4s ease-out;
}

@keyframes ad-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ad-w * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────── */
.ad-w .ad-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.ad-w .ad-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
    display: flex; align-items: center; gap: 0.5rem;
}
.ad-w .ad-hint {
    font-family: var(--ad-mono); font-size: 0.66rem;
    color: var(--ad-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1.5rem;
}

/* ── Sections ───────────────────────────────────────────────────── */
.ad-w .ad-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 2rem;
}
.ad-w .ad-section fieldset {
    margin: 0; padding: 0; border: none;
}
.ad-w .ad-section legend {
    font-weight: 600; font-size: 0.85rem;
    color: var(--text); padding: 0;
}
.ad-w .ad-section p {
    font-size: 0.82rem; color: var(--ad-mute);
    margin: 0.25rem 0 1rem; line-height: 1.4;
}
.ad-w .ad-section small {
    font-size: 0.72rem; color: var(--ad-mute);
}
.ad-w .ad-section code {
    font-family: var(--ad-mono); font-size: 0.75rem;
    background: rgba(255,255,255,0.05); padding: 1px 4px; border-radius: 3px;
}

/* ── Grid & fields ──────────────────────────────────────────────── */
.ad-w .ad-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
}
@media (max-width: 700px) {
    .ad-w .ad-grid { grid-template-columns: 1fr; }
}

.ad-w .ad-field {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.ad-w .ad-field label {
    font-size: 0.8rem; font-weight: 500; color: var(--text);
}
.ad-w .ad-input {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--ad-mono); font-size: 0.74rem;
}
.ad-w .ad-input:focus { outline: none; border-color: var(--ad-accent); }

/* ── Checkbox grid ──────────────────────────────────────────────── */
.ad-w .ad-check-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 1rem; margin-top: 0.9rem;
}
.ad-w .ad-check {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; cursor: pointer;
}

/* ── Divider ────────────────────────────────────────────────────── */
.ad-w .ad-divider {
    margin: 1rem 0; opacity: 0.3;
}

/* ── Actions ────────────────────────────────────────────────────── */
.ad-w .ad-actions {
    display: flex; gap: 0.5rem; align-items: center;
}

.ao-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)); gap:1rem; margin:1rem 0; }
.ao-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem; }
.ao-card h4 { margin:0 0 0.25rem 0; font-size:0.95rem; display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.ao-card p { margin:0.25rem 0 0 0; font-size:0.8rem; color:var(--text-muted); }
.ao-toggle { position:relative; display:inline-block; width:40px; height:22px; }
.ao-toggle input { opacity:0; width:0; height:0; }
.ao-toggle .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:22px; transition:.2s; }
.ao-toggle .slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.2s; }
.ao-toggle input:checked + .slider { background:var(--accent, #198754); }
.ao-toggle input:checked + .slider:before { transform:translateX(18px); }
.ao-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.7rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.ao-badge--builtin          { background:rgba(34,197,94,0.15);  color:#22c55e; border:1px solid rgba(34,197,94,0.4); }
.ao-badge--agent_subsystem  { background:rgba(59,130,246,0.15); color:#3b82f6; border:1px solid rgba(59,130,246,0.4); }
.ao-badge--integration     { background:rgba(168,85,247,0.15); color:#a855f7; border:1px solid rgba(168,85,247,0.4); }
.ao-meta { font-size:0.75rem; color:var(--text-muted); margin-top:0.5rem; display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; }
.ao-scope { margin-top:0.5rem; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
.ao-scope input[type="text"] { padding:0.35rem 0.5rem; border:1px solid var(--border); border-radius:4px; background:var(--bg-input); color:var(--text); font-size:0.8rem; width:220px; }
.ao-section { margin-bottom:1.5rem; }
.ao-section h2 { font-size:1.1rem; margin:1.5rem 0 0.5rem 0; border-bottom:1px solid var(--border); padding-bottom:0.25rem; }
.ao-count { font-size:0.7rem; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1px 6px; color:var(--text-muted); }

.ao-org-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:1rem; margin:1rem 0; }
.ao-org-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:8px;
    padding:1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ao-org-card.ao-org-enabled {
    border-color: var(--success, #46a758);
    box-shadow: 0 0 0 1px var(--success, #46a758), 0 0 12px rgba(70,167,88,0.12);
}
.ao-org-card h4 {
    margin:0 0 0.25rem 0;
    font-size:0.95rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
}
.ao-org-card p {
    margin:0.25rem 0 0 0;
    font-size:0.8rem;
    color:var(--text-muted);
}
.ao-org-meta {
    font-size:0.75rem;
    color:var(--text-muted);
    margin-top:0.5rem;
    display:flex;
    gap:0.75rem;
    flex-wrap:wrap;
    align-items:center;
}
.ao-toggle {
    position:relative;
    display:inline-block;
    width:40px;
    height:22px;
}
.ao-toggle input { opacity:0; width:0; height:0; }
.ao-toggle .slider {
    position:absolute;
    cursor:pointer;
    top:0; left:0; right:0; bottom:0;
    background:var(--border-color, #ccc);
    border-radius:22px;
    transition: background 0.2s;
}
.ao-toggle .slider:before {
    position:absolute;
    content:"";
    height:16px; width:16px;
    left:3px; bottom:3px;
    background:white;
    border-radius:50%;
    transition: transform 0.2s;
}
.ao-toggle input:checked + .slider {
    background: var(--success, #46a758);
}
.ao-toggle input:checked + .slider:before {
    transform: translateX(18px);
}
.ao-badge {
    display:inline-block;
    padding:2px 8px;
    border-radius:10px;
    font-size:0.7rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
}
.ao-badge--builtin          { background:rgba(34,197,94,0.15);  color:#22c55e; border:1px solid rgba(34,197,94,0.4); }
.ao-badge--agent_subsystem  { background:rgba(59,130,246,0.15); color:#3b82f6; border:1px solid rgba(59,130,246,0.4); }
.ao-badge--integration     { background:rgba(168,85,247,0.15); color:#a855f7; border:1px solid rgba(168,85,247,0.4); }
.ao-badge--setup {
    background:rgba(245,158,11,0.15);
    color:#f59e0b;
    border:1px solid rgba(245,158,11,0.4);
}
.ao-section { margin-bottom:1.5rem; }
.ao-section h2 {
    font-size:1.1rem;
    margin:1.5rem 0 0.5rem 0;
    border-bottom:1px solid var(--border);
    padding-bottom:0.25rem;
}
.ao-count {
    font-size:0.7rem;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:10px;
    padding:1px 6px;
    color:var(--text-muted);
}

.ad-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:700px) { .ad-stats { grid-template-columns:repeat(2,1fr); } }
.ad-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.ad-stat .v { font-size:1.8rem; font-weight:800; line-height:1; }
.ad-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }
.ad-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.ad-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.ad-table { width:100%; border-collapse:collapse; }
.ad-table th, .ad-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.ad-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.ad-table tr:last-child td { border-bottom:none; }
.ad-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.ad-ok    { background:#16a34a22; color:#16a34a; }
.ad-warn  { background:#f59e0b22; color:#f59e0b; }
.ad-red   { background:#ef444422; color:#ef4444; }
.ad-grey  { background:#6b728022; color:#6b7280; }
.ad-bar-wrap { background:var(--border); border-radius:4px; height:6px; width:80px; display:inline-block; vertical-align:middle; }
.ad-bar { height:6px; border-radius:4px; background:#ef4444; }

.admatt-section { margin-bottom: 2rem; }
.admatt-section-title {
    font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin: 0 0 0.75rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.admatt-badge {
    font-size: 0.7rem; font-weight: 700;
    padding: 1px 8px; border-radius: 999px;
    border: 1px solid currentColor;
}
.admatt-badge--good { color: var(--success); background: var(--success-soft); }
.admatt-active { color: var(--success); font-weight: 600; }
.admatt-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1.5rem; margin-bottom: 2rem;
}
.admatt-panel { min-width: 0; }
@media (max-width: 768px) { .admatt-grid { grid-template-columns: 1fr; } }

/* ── Stat tiles (eal-stat pattern) ── */
.fbf-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:700px) { .fbf-stats { grid-template-columns:repeat(2,1fr); } }
.fbf-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.fbf-stat .v { font-size:2rem; font-weight:800; line-height:1; }
.fbf-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }

/* ── Shared card shell ── */
.fbf-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.fbf-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.fbf-table { width:100%; border-collapse:collapse; }
.fbf-table th, .fbf-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.fbf-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.fbf-table tr:last-child td { border-bottom:none; }
.fbf-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.fbf-fresh  { background:#16a34a22; color:#16a34a; }
.fbf-stale  { background:#f59e0b22; color:#f59e0b; }
.fbf-failed { background:#ef444422; color:#ef4444; }
.fbf-never  { background:#6b728022; color:#6b7280; }

.acao-wrap   { max-width:1280px; margin:0 auto; padding:1.25rem 1rem; color:var(--text); }
.acao-stat   { background:var(--bg-card); border:1px solid var(--border); padding:.55rem .9rem;
               border-radius:8px; min-width:130px; }
.acao-stat .lbl { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.acao-stat .val { font-size:1.45rem; font-weight:600; color:var(--text); }
.acao-section { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
                margin-bottom:1rem; overflow:hidden; }
.acao-section-head { padding:.55rem .9rem; border-bottom:1px solid var(--border);
                     display:flex; justify-content:space-between; align-items:center; }
.acao-section-head h3 { margin:0; font-size:.95rem; font-weight:600; color:var(--text); }
.acao-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.acao-table th { text-align:left; padding:.45rem .9rem; border-bottom:1px solid var(--border);
                 font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
                 background:var(--bg-input, var(--bg)); }
.acao-table td { padding:.5rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
.acao-mono   { font-family:var(--font-mono, ui-monospace, monospace); }
.acao-dim    { color:var(--text-muted); font-size:.75rem; }
.acao-empty  { border:1px dashed var(--border); border-radius:8px; padding:1.6rem;
               text-align:center; color:var(--text-muted); background:var(--bg-card); }
.acao-pill { display:inline-block; padding:.12rem .45rem; border-radius:999px; font-size:.7rem;
             background:rgba(74,158,255,0.15); color:var(--accent, #4a9eff); margin-right:.3rem;
             text-decoration:none; }
.acao-pill:hover { background:rgba(74,158,255,0.25); }

.assist-admin-panel {
    border:1px solid var(--border,#2d3140);
    border-radius:8px;
    background:var(--surface,var(--bg-card,#1a1d27));
    padding:0.85rem 1rem;
    margin-bottom:1rem;
  }
  .copilot-filter-row {
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:0.75rem;
  }
  .copilot-filter-field {
    display:flex;
    flex-direction:column;
    gap:0.3rem;
    min-width:11rem;
  }
  .copilot-filter-field label {
    color:var(--text-muted,#8b8fa3);
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
  }
  .copilot-filter-field select {
    min-height:2.2rem;
    border:1px solid var(--border,#2d3140);
    border-radius:8px;
    background:var(--input-bg,var(--surface,#1a1d27));
    color:var(--text,#e1e4ed);
    padding:0.4rem 0.55rem;
  }
  .assist-status {
    display:inline-flex;
    align-items:center;
    gap:0.35rem;
    font-weight:600;
    white-space:nowrap;
  }
  .assist-status[data-state="good"] { color:var(--success,#3fb950); }
  .assist-status[data-state="warn"] { color:var(--warning,#d29922); }
  .assist-status[data-state="bad"] { color:var(--danger,#e5484d); }
  .copilot-pagination {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    align-items:center;
    margin-top:1rem;
    color:var(--text-muted,#8b8fa3);
  }
  .assist-empty {
    text-align:center;
    padding:1.25rem;
    color:var(--text-muted,#8b8fa3);
  }

.assist-feedback-stack {
    display:grid;
    gap:1rem;
  }
  .assist-rating {
    display:inline-flex;
    align-items:center;
    min-width:3.25rem;
    font-weight:700;
  }
  .assist-rating[data-state="good"] { color:var(--success,#3fb950); }
  .assist-rating[data-state="bad"] { color:var(--danger,#e5484d); }
  .copilot-score {
    font-weight:700;
    color:var(--text,#e1e4ed);
  }
  .assist-empty {
    text-align:center;
    padding:1.25rem;
    color:var(--text-muted,#8b8fa3);
  }
  .copilot-comment {
    max-width:48rem;
    white-space:normal;
  }

/* ── Stat tiles ── */
.fdf-stats { display:grid; grid-template-columns:repeat(5, 1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:800px) { .fdf-stats { grid-template-columns:repeat(3,1fr); } }
@media (max-width:500px) { .fdf-stats { grid-template-columns:repeat(2,1fr); } }
.fdf-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.fdf-stat .v { font-size:2rem; font-weight:800; line-height:1; }
.fdf-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }

/* ── Shared card shell ── */
.fdf-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.fdf-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.fdf-table { width:100%; border-collapse:collapse; }
.fdf-table th, .fdf-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.fdf-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.fdf-table tr:last-child td { border-bottom:none; }

/* ── Pills ── */
.fdf-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.fdf-critical { background:#ef444422; color:#ef4444; }
.fdf-low      { background:#f59e0b22; color:#f59e0b; }
.fdf-ok       { background:#3b82f622; color:#3b82f6; }
.fdf-healthy  { background:#16a34a22; color:#16a34a; }
.fdf-unknown  { background:#6b728022; color:#6b7280; }

/* ── Mini progress bar ── */
.fdf-bar-wrap { width:80px; height:8px; background:var(--border); border-radius:4px; display:inline-block; vertical-align:middle; }
.fdf-bar { height:8px; border-radius:4px; }

.bnc-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.6rem; margin-bottom:1rem; }
.bnc-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.7rem .9rem; }
.bnc-stat .v { font-size:1.5rem; font-weight:700; }
.bnc-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; }
.bnc-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.bnc-table th, .bnc-table td { padding:.5rem .65rem; text-align:left; border-bottom:1px solid var(--border); font-size:.85rem; vertical-align:top; }
.bnc-table th { background:var(--bg); color:var(--text-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.bnc-table tr:last-child td { border-bottom:none; }
.bnc-count { display:inline-block; min-width:32px; padding:.1rem .5rem; border-radius:10px; font-size:.78rem; font-weight:700; text-align:center; }
.bnc-count.high { background:#ef444422; color:#ef4444; }
.bnc-count.med  { background:#f59e0b22; color:#f59e0b; }
.bnc-count.low  { background:#9ca3af22; color:#9ca3af; }
.window-form { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.5rem .8rem; margin-bottom:1rem; display:inline-flex; gap:.5rem; align-items:center; font-size:.85rem; }
.window-form select { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:.3rem .5rem; border-radius:5px; font-size:.85rem; }
.bnc-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:600; white-space:nowrap; }
.bnc-pill.disabled  { background:#ef444422; color:#ef4444; }
.bnc-pill.override  { background:#16a34a22; color:#16a34a; }
.bnc-pill.active    { background:#9ca3af22; color:#9ca3af; }
.bnc-actions { display:flex; gap:.3rem; flex-wrap:wrap; }
.bnc-banner { background:#f59e0b18; border:1px solid #f59e0b44; border-radius:8px; padding:.6rem .9rem; margin-bottom:1rem; font-size:.83rem; color:var(--text); }

.eh-windows { display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:700px) { .eh-windows { grid-template-columns:1fr; } }
.eh-window { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.9rem 1rem; }
.eh-window .win-label { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; margin-bottom:.4rem; }
.eh-window .win-rate { font-size:2rem; font-weight:800; line-height:1; margin-bottom:.35rem; }
.eh-window .win-total { font-size:.82rem; color:var(--text-muted); margin-bottom:.5rem; }
.eh-breakdown { display:flex; gap:.4rem; flex-wrap:wrap; }
.eh-breakdown span { font-size:.72rem; padding:.1rem .45rem; border-radius:8px; font-weight:600; }
.eh-sent    { background:#16a34a22; color:#16a34a; }
.eh-failed  { background:#ef444422; color:#ef4444; }
.eh-bounced { background:#f59e0b22; color:#f59e0b; }
.eh-partial { background:#8b5cf622; color:#8b5cf6; }
.eh-blocked { background:#6b728022; color:#6b7280; }

.eh-headline { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1.1rem 1.25rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.eh-headline .big { font-size:3.2rem; font-weight:900; line-height:1; }
.eh-headline .sub { font-size:.85rem; color:var(--text-muted); }

.eh-layout { display:grid; grid-template-columns:1fr 280px; gap:1rem; align-items:start; }
@media (max-width:860px) { .eh-layout { grid-template-columns:1fr; } }

.eh-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1rem; }
.eh-card-header { padding:.55rem .85rem; border-bottom:1px solid var(--border); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.eh-table { width:100%; border-collapse:collapse; }
.eh-table th, .eh-table td { padding:.45rem .7rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.eh-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.eh-table tr:last-child td { border-bottom:none; }
.eh-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:600; }
.eh-pill.disabled { background:#ef444422; color:#ef4444; }
.eh-pill.override { background:#16a34a22; color:#16a34a; }
.eh-pill.active   { background:#9ca3af22; color:#9ca3af; }

.eh-sidebar-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.8rem .9rem; margin-bottom:.75rem; }
.eh-sidebar-card .sc-title { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:.55rem; }
.eh-sidebar-row { display:flex; justify-content:space-between; align-items:center; font-size:.83rem; padding:.25rem 0; border-bottom:1px solid var(--border); }
.eh-sidebar-row:last-child { border-bottom:none; }
.eh-worker-pill { display:inline-block; padding:.15rem .6rem; border-radius:10px; font-size:.75rem; font-weight:600; }
.eh-worker-ok    { background:#16a34a22; color:#16a34a; }
.eh-worker-error { background:#ef444422; color:#ef4444; }
.eh-worker-never { background:#9ca3af22; color:#9ca3af; }

.eal-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:.6rem; margin-bottom:1rem; }
.eal-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.7rem .9rem; }
.eal-stat .v { font-size:1.5rem; font-weight:700; }
.eal-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; }
.eal-filters { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.6rem .8rem; margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.eal-filters select, .eal-filters input { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:.35rem .55rem; border-radius:6px; font-size:.85rem; }
.eal-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.eal-table th, .eal-table td { padding:.5rem .65rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:top; }
.eal-table th { background:var(--bg); color:var(--text-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.eal-table tr:last-child td { border-bottom:none; }
.eal-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.68rem; font-weight:600; }
.eal-pill.sent { background:#16a34a22; color:#16a34a; }
.eal-pill.failed { background:#ef444422; color:#ef4444; }
.eal-pill.src { background:#3b82f622; color:#3b82f6; }
.eal-detail { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:.5rem; margin-top:.4rem; font-family:ui-monospace, monospace; font-size:.72rem; max-height:160px; overflow:auto; }
.eal-row.expanded .eal-body-row { display: table-row; }
.eal-body-row { display: none; }
.eal-bulk-bar { display:none; background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:.5rem .8rem; margin-bottom:.6rem; align-items:center; gap:.6rem; flex-wrap:wrap; }
.eal-bulk-bar.active { display:flex; }
.bulk-cb-wrap { width:28px; text-align:center; }

/* ── Stat tiles ── */
.fup-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:900px) { .fup-stats { grid-template-columns:repeat(3,1fr); } }
@media (max-width:550px) { .fup-stats { grid-template-columns:repeat(2,1fr); } }
.fup-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.fup-stat .v { font-size:2rem; font-weight:800; line-height:1; }
.fup-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }

/* ── Shared card shell ── */
.fup-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.fup-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.fup-table { width:100%; border-collapse:collapse; }
.fup-table th, .fup-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.fup-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.fup-table tr:last-child td { border-bottom:none; }
.fup-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.fup-online   { background:#16a34a22; color:#16a34a; }
.fup-offline  { background:#f59e0b22; color:#f59e0b; }
.fup-stale    { background:#f97316aa; color:#ea580c; }
.fup-long     { background:#ef444422; color:#ef4444; }
.fup-muted    { color:var(--text-muted); }

.adm-inc-w {
    --aiw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --aiw-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --aiw-on: #22c55e;
    --aiw-off: #ef4444;
    --aiw-warn: #f59e0b;
    --aiw-info: #38bdf8;
    --aiw-accent: var(--primary, #4a9eff);
    --aiw-mute: var(--text-muted);
    font-family: var(--aiw-sans);
    letter-spacing: -0.005em;
}

/* ── Compact header bar with mono stat pills ─────────────────── */
.adm-inc-w .aiw-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}
.adm-inc-w .aiw-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.adm-inc-w .aiw-pill {
    font-family: var(--aiw-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.adm-inc-w .aiw-pill b { font-weight: 700; }
.adm-inc-w .aiw-pill .lbl {
    color: var(--aiw-mute); text-transform: uppercase;
    letter-spacing: 0.18em; font-size: 0.62rem;
}
.adm-inc-w .aiw-pill.warn { color: var(--aiw-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.adm-inc-w .aiw-pill.info { color: var(--aiw-info); border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.07); }

.adm-inc-w .aiw-hint {
    font-family: var(--aiw-mono); font-size: 0.66rem;
    color: var(--aiw-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 0.7rem; padding: 0;
}

/* ── Card / table ──────────────────────────────────────────────── */
.adm-inc-w .aiw-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.4rem 0.5rem; overflow-x: auto;
}
.adm-inc-w .aiw-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.adm-inc-w .aiw-tbl thead th {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-family: var(--aiw-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--aiw-mute);
    font-weight: 600; white-space: nowrap;
}
.adm-inc-w .aiw-tbl tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.adm-inc-w .aiw-tbl tbody tr:hover { background: rgba(74,158,255,0.06); }
.adm-inc-w .aiw-tbl tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.25;
}

.adm-inc-w .aiw-org { font-weight: 600; color: var(--text); }
.adm-inc-w .aiw-host { font-weight: 600; color: var(--text); }
.adm-inc-w .aiw-sub { font-family: var(--aiw-mono); font-size: 0.7rem; color: var(--aiw-mute); margin-top: 2px; }
.adm-inc-w .aiw-ip { font-family: var(--aiw-mono); font-size: 0.78rem; color: var(--aiw-accent); }
.adm-inc-w .aiw-time { font-family: var(--aiw-mono); font-size: 0.74rem; color: var(--aiw-mute); }

.adm-inc-w .aiw-select {
    padding: 0.35rem 0.55rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--aiw-mono); font-size: 0.74rem; min-width: 200px;
}
.adm-inc-w .aiw-select:focus { outline: none; border-color: var(--aiw-accent); }

.adm-inc-w .aiw-empty {
    text-align: center; padding: 1.6rem 1rem;
    color: var(--aiw-mute);
    font-family: var(--aiw-mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.16em;
}

/* Staggered row fade-in (capped at 8 rows) */
@keyframes aiw-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.adm-inc-w .aiw-tbl tbody tr { animation: aiw-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(1) { animation-delay: 0ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(2) { animation-delay: 50ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(3) { animation-delay: 100ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(4) { animation-delay: 150ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(5) { animation-delay: 200ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(6) { animation-delay: 250ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(7) { animation-delay: 300ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(8) { animation-delay: 350ms; }
.adm-inc-w .aiw-tbl tbody tr:nth-child(n+9) { animation: none; }

.kb-md-btn {
        background:#161b22;color:#c9d1d9;border:1px solid #30363d;border-radius:5px;
        padding:4px 9px;font-size:0.82rem;cursor:pointer;line-height:1.2;
      }
      .kb-md-btn:hover { background:#1f242c;border-color:#58a6ff;color:#e6edf3; }
      .kb-md-sep {
        display:inline-block;width:1px;background:#30363d;margin:2px 4px;align-self:stretch;
      }

.alr-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:800px) { .alr-stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .alr-stats { grid-template-columns:repeat(1,1fr); } }
.alr-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.alr-stat .v { font-size:2rem; font-weight:800; line-height:1; }
.alr-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }
.alr-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.alr-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.alr-table { width:100%; border-collapse:collapse; }
.alr-table th, .alr-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.alr-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.alr-table tr:last-child td { border-bottom:none; }
.alr-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.alr-ok   { background:#16a34a22; color:#16a34a; }
.alr-warn { background:#f59e0b22; color:#f59e0b; }
.alr-bad  { background:#ef444422; color:#ef4444; }
.alr-num  { text-align:right; }

.lcf-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:700px) { .lcf-stats { grid-template-columns:repeat(1,1fr); } }
.lcf-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.lcf-stat .v { font-size:2rem; font-weight:800; line-height:1; }
.lcf-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }

.lcf-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.lcf-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.lcf-table { width:100%; border-collapse:collapse; }
.lcf-table th, .lcf-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.lcf-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.lcf-table tr:last-child td { border-bottom:none; }
.lcf-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.lcf-ok   { background:#16a34a22; color:#16a34a; }
.lcf-warn { background:#f59e0b22; color:#f59e0b; }
.lcf-bad  { background:#ef444422; color:#ef4444; }
.lcf-num  { text-align:right; }

.la-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.la-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.la-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1rem; padding:1rem; }
@media (max-width:600px) { .la-form-grid { grid-template-columns:1fr; } }
.la-form-full { grid-column:1/-1; }
.la-label { font-size:.75rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.25rem; display:block; }
.la-input { width:100%; padding:.42rem .65rem; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:.85rem; box-sizing:border-box; }
.la-input:focus { outline:none; border-color:var(--accent,#58a6ff); }
.la-table { width:100%; border-collapse:collapse; }
.la-table th, .la-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.la-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.la-table tr:last-child td { border-bottom:none; }
.la-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.la-pill-available   { background:#16a34a22; color:#16a34a; }
.la-pill-checked_out { background:#1a73e822; color:#60a5fa; }
.la-pill-maintenance { background:#f59e0b22; color:#f59e0b; }
.la-pill-retired     { background:#6b728022; color:#6b7280; }
.la-pill-returned    { background:#16a34a22; color:#16a34a; }
.la-pill-outstanding { background:#ef444422; color:#ef4444; }

.la-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:700px) { .la-stats { grid-template-columns:repeat(2,1fr); } }
.la-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.la-stat .v { font-size:1.8rem; font-weight:800; line-height:1; }
.la-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }
.la-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.la-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.la-table { width:100%; border-collapse:collapse; }
.la-table th, .la-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.la-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.la-table tr:last-child td { border-bottom:none; }
.la-tabs { display:flex; gap:.35rem; margin-bottom:1rem; flex-wrap:wrap; }
.la-tab { padding:.35rem .9rem; border-radius:6px; font-size:.8rem; font-weight:600; text-decoration:none;
          border:1px solid var(--border); color:var(--text-muted); background:var(--bg-card); cursor:pointer; }
.la-tab:hover { border-color:var(--accent,#58a6ff); color:var(--accent,#58a6ff); }
.la-tab.active { background:rgba(88,166,255,.15); border-color:var(--accent,#58a6ff); color:var(--accent,#58a6ff); }
.la-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.la-pill-available  { background:#16a34a22; color:#16a34a; }
.la-pill-checked_out { background:#1a73e822; color:#60a5fa; }
.la-pill-maintenance { background:#f59e0b22; color:#f59e0b; }
.la-pill-retired     { background:#6b728022; color:#6b7280; }

.la-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.la-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.la-table { width:100%; border-collapse:collapse; }
.la-table th, .la-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.la-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.la-table tr:last-child td { border-bottom:none; }
.la-late { color:#ef4444; font-weight:700; }

/* ── Stat tiles (fbf pattern) ── */
.fpf-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:700px) { .fpf-stats { grid-template-columns:repeat(2,1fr); } }
.fpf-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.fpf-stat .v { font-size:2rem; font-weight:800; line-height:1; }
.fpf-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }

/* ── Shared card ── */
.fpf-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.fpf-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.fpf-table { width:100%; border-collapse:collapse; }
.fpf-table th, .fpf-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.fpf-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.fpf-table tr:last-child td { border-bottom:none; }
.fpf-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.fpf-ok      { background:#16a34a22; color:#16a34a; }
.fpf-warn    { background:#f59e0b22; color:#f59e0b; }
.fpf-bad     { background:#ef444422; color:#ef4444; }
.fpf-neutral { background:#6b728022; color:#6b7280; }
.fpf-sec     { background:#7c3aed22; color:#7c3aed; }

.pca-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0.75rem; margin-bottom:1.25rem; }
  .pca-stat { padding:0.85rem 1rem; }
  .pca-stat .lbl { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; font-weight:700; letter-spacing:0.04em; }
  .pca-stat .val { font-size:1.45rem; font-weight:700; margin-top:0.2rem; }
  .pca-stat .sub { font-size:0.78rem; color:var(--text-muted); margin-top:0.15rem; }
  .pca-section { margin-bottom:1.5rem; }
  .pca-section h3 { margin:0 0 0.5rem 0; font-size:1rem; }
  .pca-bar { background:var(--bg-tertiary, #eee); height:4px; border-radius:2px; overflow:hidden; margin-top:0.25rem; }
  .pca-bar > span { display:block; height:100%; background:var(--accent, #2563eb); }
  table.pca-tbl { width:100%; border-collapse:collapse; font-size:0.85rem; }
  table.pca-tbl th, table.pca-tbl td { padding:0.45rem 0.6rem; border-bottom:1px solid var(--border, #e5e7eb); text-align:left; }
  table.pca-tbl th { font-weight:600; font-size:0.72rem; text-transform:uppercase; color:var(--text-muted); letter-spacing:0.04em; }
  table.pca-tbl tr:hover td { background:var(--bg-hover, rgba(0,0,0,0.02)); }
  .pca-num { font-variant-numeric: tabular-nums; text-align:right; }
  .pca-actions { display:flex; gap:0.35rem; flex-wrap:wrap; }
  .pca-input-days { width:5.5rem; padding:0.2rem 0.4rem; font-size:0.85rem; }
  .pca-badge { display:inline-block; padding:0.1rem 0.45rem; border-radius:10px; font-size:0.72rem; font-weight:600; }
  .pca-badge.warn { background:#fef3c7; color:#92400e; }
  .pca-badge.err  { background:#fee2e2; color:#991b1b; }
  .pca-badge.ok   { background:#dcfce7; color:#166534; }
  .pca-flash { margin-top:0.5rem; font-size:0.85rem; color:var(--text-muted); }

.qs-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; align-items:start; }
@media (max-width:860px) { .qs-grid { grid-template-columns:1fr; } }
.qs-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.1rem; }
.qs-label { display:block; font-size:.82rem; font-weight:600; color:var(--text-muted); margin-bottom:.3rem; text-transform:uppercase; letter-spacing:.04em; }
.qs-input { width:100%; background:var(--bg-input); color:var(--text); border:1px solid var(--border);
            padding:.42rem .6rem; border-radius:6px; font-size:.88rem; box-sizing:border-box; }
.qs-input:focus { outline:2px solid var(--primary); border-color:var(--primary); }
.qs-textarea { font-family:ui-monospace,monospace; font-size:.8rem; resize:vertical; min-height:180px; }
.qs-row { margin-bottom:.85rem; }
.qs-subject-preview { font-size:.82rem; color:var(--text-muted); margin-top:.3rem; min-height:1.2em; }

.sp-table { width:100%; border-collapse:collapse; font-size:.8rem; margin-bottom:1.5rem; }
  .sp-table th, .sp-table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); }
  .sp-table th { color:var(--text-muted); font-size:.7rem; text-transform:uppercase; }
  .saml-form { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:1rem; display:none; margin-bottom:1.5rem; }
  .saml-form.open { display:block; }
  .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:.6rem; }
  .form-row-full { margin-bottom:.6rem; }
  .form-row label, .form-row-full label { display:block; font-size:.72rem; color:var(--text-muted); margin-bottom:2px; }
  .form-row input, .form-row select, .form-row-full input, .form-row-full textarea, .form-row-full select {
    width:100%; padding:.35rem .5rem; background:var(--bg-input,#1a1a1a);
    border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:.8rem; box-sizing:border-box; }
  .form-row-full textarea { font-family:monospace; font-size:.72rem; resize:vertical; min-height:80px; }
  .check-row { display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:.6rem; }
  .check-row label { display:flex; align-items:center; gap:.3rem; font-size:.8rem; cursor:pointer; }
  .badge-on  { background:#10b98122; color:#10b981; border-radius:3px; padding:1px 6px; font-size:.7rem; }
  .badge-off { background:#ef444422; color:#ef4444; border-radius:3px; padding:1px 6px; font-size:.7rem; }

.ad-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.25rem; }
@media (max-width:700px) { .ad-stats { grid-template-columns:repeat(2,1fr); } }
.ad-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.85rem 1rem; }
.ad-stat .v { font-size:1.8rem; font-weight:800; line-height:1; }
.ad-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:.25rem; font-weight:600; }
.ad-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.ad-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.ad-table { width:100%; border-collapse:collapse; }
.ad-table th, .ad-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.ad-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.ad-table tr:last-child td { border-bottom:none; }
.ad-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.ad-expired { background:#ef444422; color:#ef4444; }
.ad-critical { background:#f97316aa; color:#ea580c; }
.ad-soon     { background:#f59e0b22; color:#f59e0b; }
.ad-watch    { background:#6b728022; color:#6b7280; }
.ad-ok       { background:#16a34a22; color:#16a34a; }

/* ── Layout ────────────────────────────────────────────────────── */
    .page-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; }
    .page-header h1 { margin: 0; font-size: 1.4rem; font-weight: 600; color: var(--text); }
    .page-header h1 span { color: var(--accent); }
    .page-body { padding: 28px 32px; max-width: 1400px; }

    /* ── Toolbar ──────────────────────────────────────────────────── */
    .toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
    .btn-danger { background: var(--red); color: #fff; }
    .btn-danger:hover { background: #ef4444; }
    .btn-sm { padding: 4px 10px; font-size: 0.8rem; }
    .btn-success { background: var(--green); color: #000; }
    .btn-success:hover { background: #22c55e; }
    .btn-warning { background: var(--yellow); color: #000; }
    .btn-warning:hover { background: #f59e0b; }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; }

    select, input[type="text"], input[type="number"], textarea {
      background: var(--surface2); color: var(--text); border: 1px solid var(--border);
      border-radius: 6px; padding: 6px 10px; font-size: 0.875rem; outline: none;
    }
    select:focus, input:focus, textarea:focus { border-color: var(--accent); }
    textarea { resize: vertical; font-family: 'Courier New', monospace; }
    label { font-size: 0.8rem; color: var(--text-muted); display: block; margin-bottom: 3px; }

    /* ── Filter bar ───────────────────────────────────────────────── */
    .filter-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-bottom: 22px; display: flex; gap: 12px; align-items: flex-end; }
    .filter-group { display: flex; flex-direction: column; gap: 4px; }
    .filter-group label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }

    /* ── Cards ───────────────────────────────────────────────────── */
    .webhook-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; margin-bottom: 18px; overflow: hidden;
      transition: border-color 0.2s;
    }
    .webhook-card:hover { border-color: var(--accent); }
    .webhook-card.disabled { opacity: 0.55; }

    .card-header {
      padding: 14px 18px; display: flex; align-items: center;
      justify-content: space-between; border-bottom: 1px solid var(--border);
      gap: 12px;
    }
    .card-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .card-title { font-size: 1rem; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-desc { font-size: 0.8rem; color: var(--text-muted); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .card-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }

    .card-body { padding: 14px 18px; }

    /* ── Badge ───────────────────────────────────────────────────── */
    .badge-enabled { background: rgba(74,222,128,0.15); color: var(--green); }
    .badge-disabled { background: rgba(248,113,113,0.15); color: var(--red); }
    .badge-ok { background: rgba(74,222,128,0.15); color: var(--green); }
    .badge-fail { background: rgba(248,113,113,0.15); color: var(--red); }
    .badge-pending { background: rgba(251,191,36,0.15); color: var(--yellow); }
    .badge-trigger { background: rgba(96,165,250,0.15); color: var(--blue); }

    /* ── Pipeline Block (trigger → filters → action) ──────────────── */
    .pipeline {
      display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
      background: var(--bg); border-radius: 8px; padding: 10px; margin-bottom: 10px;
    }
    .pipeline-node {
      background: var(--surface2); border-radius: 8px; padding: 10px 12px;
      min-width: 160px; border: 1px solid var(--border); flex: 1;
    }
    .pipeline-node.trigger { border-left: 3px solid var(--accent); }
    .pipeline-node.filters { border-left: 3px solid var(--yellow); flex: 0 0 auto; min-width: 120px; }
    .pipeline-node.action { border-left: 3px solid var(--green); }

    .node-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 6px; }
    .trigger .node-title { color: var(--accent); }
    .filters .node-title { color: var(--yellow); }
    .action .node-title { color: var(--green); }

    .node-body { font-size: 0.82rem; color: var(--text-muted); }
    .node-body strong { color: var(--text); display: block; margin-bottom: 2px; font-size: 0.88rem; }

    .arrow { display: flex; align-items: center; color: var(--text-muted); font-size: 1.1rem; padding: 0 2px; flex-shrink: 0; align-self: center; }

    /* ── Filter chips ─────────────────────────────────────────────── */
    .filter-list { display: flex; flex-direction: column; gap: 4px; }
    .filter-chip {
      background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
      padding: 5px 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
    }
    .filter-chip-text { font-size: 0.78rem; font-family: 'Courier New', monospace; color: var(--text-muted); }
    .filter-chip-text strong { color: var(--text); }
    .filter-chip .chip-ops { display: flex; gap: 4px; }

    /* ── Inline form rows ─────────────────────────────────────────── */
    .inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
    .inline-form .form-group { display: flex; flex-direction: column; gap: 3px; }
    .inline-form input, .inline-form select { min-width: 130px; }

    /* ── Modal overlay ──────────────────────────────────────────────
       Scoped to `.modal-overlay .modal` so the inner-box styles only
       apply to the overlay-wrapped pattern (webhook-builder, change /
       incident management, etc.). The global `.modal` rule above
       (search ".modal {" near line 3486) is the canonical house
       pattern — position:fixed inset:0 flex-centered with a dark
       backdrop, used directly by step_up_modal.html, base.html
       restart-modal / impersonate-modal, dashboard invoice-modal,
       tray_chat, etc. Pre-fix this block defined a bare `.modal`
       at the same specificity but later in source order, which
       made bare-house modals render as a 90%-wide block at the
       left edge with var(--surface) background and no flex
       centering — the "white box on the left" regression. */
    .modal-overlay {
      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
      z-index: 1000; align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal-overlay .modal {
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
      padding: 24px; width: 90%; max-width: 560px; max-height: 90vh; overflow-y: auto;
    }
    .modal-overlay .modal h2 { margin: 0 0 18px; font-size: 1.1rem; color: var(--text); }
    .modal-overlay .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
    .modal-overlay .modal-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
    .modal-overlay .modal-field input, .modal-overlay .modal-field select, .modal-overlay .modal-field textarea { width: 100%; }

    /* ── Delivery log table ──────────────────────────────────────── */
    .mono { font-family: 'Courier New', monospace; font-size: 0.8rem; }

    /* ── Test panel ──────────────────────────────────────────────── */
    .test-panel { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 12px; display: none; }
    .test-panel.open { display: block; }
    .test-result { margin-top: 10px; font-size: 0.82rem; padding: 8px 12px; border-radius: 6px; }
    .test-result.success { background: rgba(74,222,128,0.1); color: var(--green); }
    .test-result.failure { background: rgba(248,113,113,0.1); color: var(--red); }

    /* ── Empty state ─────────────────────────────────────────────── */
    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .empty-state p { margin: 0 0 16px; font-size: 1rem; }
    .token-display { font-family: 'Courier New', monospace; font-size: 0.78rem; background: var(--bg); padding: 8px 12px; border-radius: 6px; word-break: break-all; margin-top: 6px; color: var(--yellow); }

    /* ── Scrollable pipeline area ─────────────────────────────────── */
    .pipelines-container { display: flex; flex-direction: column; gap: 8px; }
    .pipeline-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .pipeline-row .delete-row { color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 4px; border-radius: 4px; }
    .pipeline-row .delete-row:hover { color: var(--red); background: rgba(248,113,113,0.1); }

    /* ── Drag handle ──────────────────────────────────────────────── */
    .drag-handle { cursor: grab; color: var(--text-muted); font-size: 0.9rem; padding: 2px 4px; }
    .drag-handle:active { cursor: grabbing; }

    /* ── Tabs ──────────────────────────────────────────────────────── */
    .tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
    .tab { padding: 8px 18px; cursor: pointer; font-size: 0.875rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
    .tab:hover { color: var(--text); }
    .tab.active { color: var(--accent); border-bottom-color: var(--accent); }

    .page-header { background: var(--surface); border-bottom: 1px solid var(--border); padding: 16px 28px; display: flex; align-items: center; gap: 16px; }
    .badge-success { background: rgba(74,222,128,0.15); color: var(--green); }
    .badge-fail { background: rgba(248,113,113,0.15); color: var(--red); }
    .badge-pending { background: rgba(251,191,36,0.15); color: var(--yellow); }
    .mono { font-family: 'Courier New', monospace; font-size: 0.78rem; color: var(--text-muted); }
    .page-body { padding: 20px 28px; }
    .pagination { display: flex; gap: 6px; margin-top: 16px; align-items: center; }
    .pagination a, .pagination span { padding: 5px 12px; border-radius: 6px; font-size: 0.82rem; }
    .pagination a { background: var(--surface2); color: var(--text); text-decoration: none; }
    .pagination a:hover { background: var(--border); }
    .pagination span.current { background: var(--accent); color: #fff; }
    .empty-state { text-align: center; padding: 50px; color: var(--text-muted); }

.drift-banner { display:flex; align-items:center; gap:0.9rem; padding:0.85rem 1.1rem;
                border-radius:8px; margin-bottom:1rem; border:1px solid var(--border); }
.drift-banner.green { background:rgba(39,174,96,0.08);  border-color:rgba(39,174,96,0.35);  color:#27ae60; }
.drift-banner.red   { background:rgba(231,76,60,0.08);  border-color:rgba(231,76,60,0.4);   color:#e74c3c; }
.drift-banner .dot { width:12px; height:12px; border-radius:50%; background:currentColor; }
.drift-banner .label { font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.78rem; }
.drift-banner .msg   { color:var(--text); font-size:0.88rem; }

.drift-table { width:100%; border-collapse:collapse; font-size:0.85rem; margin-top:0.5rem; }
.drift-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                  font-size:0.75rem; color:var(--text-muted); text-transform:uppercase;
                  letter-spacing:0.05em; }
.drift-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); }
.drift-table .mono { font-family:var(--font-mono, monospace); }
.drift-ver-old { color:#e74c3c; font-weight:600; }
.drift-ver-target { color:#27ae60; font-weight:600; }

.ident-banner { display:flex; align-items:center; gap:0.9rem; padding:0.85rem 1.1rem;
                border-radius:8px; margin-bottom:1rem; border:1px solid var(--border); }
.ident-banner.green  { background:rgba(39,174,96,0.08); border-color:rgba(39,174,96,0.35); color:#27ae60; }
.ident-banner.yellow { background:rgba(243,156,18,0.08); border-color:rgba(243,156,18,0.35); color:#f39c12; }
.ident-banner.red    { background:rgba(231,76,60,0.08); border-color:rgba(231,76,60,0.4); color:#e74c3c; }
.ident-banner .dot { width:12px; height:12px; border-radius:50%; background:currentColor; }
.ident-banner .label { font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.78rem; }
.ident-banner .msg   { color:var(--text); font-size:0.88rem; }

.ident-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.75rem; margin-bottom:1.5rem; }
.ident-stat { background:var(--card); border:1px solid var(--border); border-radius:8px; padding:1rem; text-align:center; }
.ident-stat .val { font-size:1.8rem; font-weight:700; }
.ident-stat .lbl { font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-top:0.25rem; }
.ident-stat .val.green { color:#27ae60; }
.ident-stat .val.yellow { color:#f39c12; }
.ident-stat .val.blue { color:#3498db; }

.ident-table { width:100%; border-collapse:collapse; font-size:0.85rem; margin-top:0.5rem; }
.ident-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                  font-size:0.75rem; color:var(--text-muted); text-transform:uppercase;
                  letter-spacing:0.05em; }
.ident-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); }
.ident-table .mono { font-family:var(--font-mono, monospace); font-size:0.8rem; }

.auth-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.75rem; font-weight:600; }
.auth-badge.ed25519 { background:rgba(39,174,96,0.12); color:#27ae60; }
.auth-badge.legacy  { background:rgba(231,76,60,0.1);  color:#e74c3c; }
.auth-badge.revoked { background:rgba(128,128,128,0.1); color:#888; }

.enforcement-panel { background:var(--card); border:1px solid var(--border); border-radius:8px;
                     padding:1.25rem; margin-bottom:1.5rem; }
.enforcement-panel h3 { margin:0 0 0.75rem 0; font-size:0.95rem; }

.am-w {
    --am-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --am-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --am-accent: var(--primary, #4a9eff);
    --am-mute: var(--text-muted);
    font-family: var(--am-sans);
    letter-spacing: -0.005em;
    animation: am-fade-in 0.4s ease-out;
}
@keyframes am-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.am-w * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────── */
.am-w .am-header {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.am-w .am-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.am-w .am-hint {
    font-family: var(--am-mono); font-size: 0.66rem;
    color: var(--am-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1.5rem;
}

/* ── Section ────────────────────────────────────────────────────── */
.am-w .am-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
}
.am-w .am-section h3 {
    font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem;
}
.am-w .am-section p {
    font-size: 0.82rem; color: var(--am-mute); margin-bottom: 1rem; line-height: 1.4;
}
.am-w .am-section small {
    font-size: 0.75rem; color: var(--am-mute);
}

/* ── Grid & fields ──────────────────────────────────────────────── */
.am-w .am-grid {
    display: grid; grid-template-columns: max-content 1fr;
    gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.75rem;
    max-width: 640px;
}
.am-w .am-field {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.am-w .am-field label {
    font-size: 0.8rem; font-weight: 500; color: var(--text);
}
.am-w .am-input {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--am-mono); font-size: 0.74rem;
}
.am-w .am-input:focus { outline: none; border-color: var(--am-accent); }
.am-w .am-select {
    padding: 0.35rem 0.5rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--am-sans); font-size: 0.82rem;
    min-width: 240px;
}
.am-w .am-select:focus { outline: none; border-color: var(--am-accent); }

/* ── Checkbox grid ──────────────────────────────────────────────── */
.am-w .am-check-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.4rem;
}
.am-w .am-check {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; cursor: pointer;
}

/* ── Checkbox inline ────────────────────────────────────────────── */
.am-w .am-check-inline {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; cursor: pointer;
}

/* ── Status pill ───────────────────────────────────────────────── */
.am-w .am-pill {
    font-family: var(--am-mono); font-size: 0.7rem; font-weight: 600;
    padding: 0.2rem 0.6rem; border-radius: 4px;
}
.am-w .am-pill.ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.am-w .am-pill.neutral { background: rgba(107,114,128,0.15); color: #6b7280; }

/* ── Fieldset ──────────────────────────────────────────────────── */
.am-w .am-fieldset {
    border: 1px solid var(--border); border-radius: 6px;
    padding: 0.75rem 1rem; margin: 0.5rem 0 1rem 0;
}
.am-w .am-fieldset legend {
    font-size: 0.85rem; font-weight: 600; padding: 0 0.5rem;
}
.am-w .am-fieldset p {
    font-size: 0.8rem; color: var(--am-mute);
    margin: 0 0 0.5rem; line-height: 1.4;
}

/* ── Scope selector ─────────────────────────────────────────────── */
.am-w .am-scope {
    display: flex; gap: 0.5rem; align-items: center;
    margin: 0.5rem 0 1rem 0;
}

/* ── Menu editor ────────────────────────────────────────────────── */
.am-w .am-editor {
    margin-bottom: 1rem;
}
.am-w .am-menu-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem; margin-bottom: 0.25rem;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 4px; cursor: grab;
}
.am-w .am-menu-row:active { cursor: grabbing; }
.am-w .am-menu-row.dragging { opacity: 0.5; border-color: var(--am-accent); }
.am-w .am-menu-row input,
.am-w .am-menu-row select {
    font-size: 0.85rem; padding: 0.25rem 0.4rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 3px; color: var(--text);
}
.am-w .am-menu-row .am-label-input { flex: 1; min-width: 120px; }
.am-w .am-menu-row .am-value-input { flex: 2; min-width: 180px; }
.am-w .am-type-badge {
    font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.4rem;
    border-radius: 3px; background: rgba(74,158,255,0.15); color: var(--am-accent);
    white-space: nowrap; font-family: var(--am-mono);
}
.am-w .am-sep-row {
    justify-content: center; background: transparent; border-style: dashed;
}
.am-w .am-drag-handle { color: var(--am-mute); font-size: 1.1rem; cursor: grab; user-select: none; }

/* ── Preview ────────────────────────────────────────────────────── */
.am-w .am-preview {
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.5rem; min-height: 100px; max-width: 280px;
}
.am-w .am-prev-item {
    padding: 0.35rem 0.75rem; font-size: 0.85rem; cursor: default;
    border-radius: 3px;
}
.am-w .am-prev-item:hover { background: var(--am-accent); color: #fff; }
.am-w .am-prev-sep {
    border-top: 1px solid var(--border); margin: 0.25rem 0.5rem;
}

/* ── Data table ─────────────────────────────────────────────────── */
.am-w .am-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.am-w .am-table thead th {
    text-align: left; padding: 8px 9px;
    border-bottom: 1px solid var(--border);
    font-family: var(--am-mono); font-size: 0.62rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--am-mute); font-weight: 600;
}
.am-w .am-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.am-w .am-table tbody tr:hover { background: rgba(74,158,255,0.06); }
.am-w .am-table tbody td { padding: 8px 9px; vertical-align: middle; }
.am-w .am-empty { padding: 1.5rem; text-align: center; color: var(--am-mute); font-size: 0.85rem; }

.au-page { max-width:1400px; margin:0 auto; padding:1rem; }
.au-h2 { margin-top:0; }
.au-lead { color:var(--text-muted); font-size:var(--text-sm); margin-bottom:1rem; }
.au-tip { color:var(--text-muted); font-size:var(--text-sm); margin-bottom:1rem; background:var(--info-soft); border-left:3px solid var(--info); padding:0.6rem 0.8rem; border-radius:var(--radius-sm); }
.au-stalled-card { background:color-mix(in srgb, var(--danger) 20%, var(--surface)); border:1px solid var(--danger); border-radius:var(--radius-lg); padding:1rem; margin-bottom:1.25rem; }
.au-stalled-h3 { margin:0 0 0.5rem 0; color:var(--danger); }
.au-stalled-h3 small { font-weight:var(--weight-normal); font-size:var(--text-sm); color:var(--text-muted); }
.au-table-full { width:100%; font-size:var(--text-sm); }
.au-thead-row { text-align:left; color:var(--text-muted); }
.au-row { border-top:1px solid var(--border); }
.au-warn-pill { background:var(--warning-soft); color:var(--warning); }
.au-msg-cell { color:var(--text-muted); font-size:var(--text-sm); }
.au-rescue-btn { background:color-mix(in srgb, var(--warning) 35%, #000); border-color:color-mix(in srgb, var(--warning) 55%, #000); color:#fff; font-size:var(--text-sm); padding:0.2rem 0.5rem; }
.au-rescue-btn[disabled] { background:color-mix(in srgb, var(--text-muted) 35%, transparent); border-color:var(--border); color:var(--text-muted); cursor:not-allowed; opacity:0.6; }
.au-preview-link { font-size:var(--text-xs); margin-left:0.3rem; color:var(--text-muted); }
.au-peer-btn { background:color-mix(in srgb, var(--accent) 35%, #000); border-color:color-mix(in srgb, var(--accent) 55%, #000); color:#fff; font-size:var(--text-sm); padding:0.2rem 0.5rem; margin-left:0.3rem; }
.au-no-peer { font-size:var(--text-xs); color:var(--text-muted); }

.au-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:10000; align-items:center; justify-content:center; }
.au-modal-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); max-width:720px; width:92%; max-height:86vh; overflow:auto; }
.au-modal-h3 { margin-top:0; }
.au-modal-h3--danger { color:var(--danger); }
.au-modal-h3--info { color:var(--info); }
.au-modal-body { color:var(--text-muted); font-size:var(--text-sm); }
.au-guess-warn { display:none; background:var(--warning-soft); color:var(--warning); padding:0.4rem 0.6rem; border-radius:var(--radius-sm); font-size:var(--text-sm); margin-bottom:0.75rem; }
.au-cmd-label { font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; margin-bottom:0.2rem; }
.au-cmd-pre { background:var(--bg); border:1px solid var(--border); padding:0.6rem; border-radius:var(--radius-sm); font-size:0.75rem; white-space:pre-wrap; word-break:break-all; max-height:200px; overflow:auto; }
.au-modal-actions { display:flex; gap:0.6rem; margin-top:1rem; align-items:center; }
.au-confirm-btn--danger { background:color-mix(in srgb, var(--danger) 50%, #000); border:1px solid var(--danger); color:#fff; padding:0.45rem 0.9rem; border-radius:var(--radius-sm); opacity:0.5; cursor:not-allowed; }
.au-confirm-btn--info { background:color-mix(in srgb, var(--accent) 35%, #000); border:1px solid var(--accent); color:#fff; padding:0.45rem 0.9rem; border-radius:var(--radius-sm); opacity:0.5; cursor:not-allowed; }
.au-result-text { font-size:var(--text-sm); color:var(--text-muted); margin-left:auto; }

.au-summary-row { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.au-summary-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:0.5rem 0.8rem; }
.au-summary-label { font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; }
.au-summary-num { font-size:var(--text-lg); font-weight:var(--weight-semibold); }
.au-summary-since { align-self:center; font-size:var(--text-xs); color:var(--text-muted); }

.au-filter-form { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:end; margin-bottom:0.75rem; }
.au-filter-label { display:block; font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; }
.au-filter-input { background:var(--surface-input); color:var(--text); border:1px solid var(--border); padding:0.35rem 0.5rem; border-radius:var(--radius-lg); }
.au-filter-num { width:80px; }
.au-filter-btn { height:34px; }
.au-filter-clear { height:34px; line-height:22px; }

.au-history-table { width:100%; font-size:var(--text-sm); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.au-history-thead { text-align:left; color:var(--text-muted); background:var(--bg); border-bottom:1px solid var(--border); }
.au-history-thead th { padding:0.5rem; }
.au-cell { padding:0.4rem 0.5rem; }
.au-cell--mute { color:var(--text-muted); }
.au-cell--msg { color:var(--text-muted); max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.au-empty { padding:2rem; text-align:center; color:var(--text-muted); }

/* Bundle I (6.76.23): page-local --aiadm-* now alias canonical tokens. */
.aiadm-w {
    --aiadm-mono: var(--font-mono);
    --aiadm-sans: var(--font-sans);
    --aiadm-accent: var(--accent);
    --aiadm-mute: var(--text-muted);
    --aiadm-on: var(--success);
    --aiadm-off: var(--danger);
    --aiadm-warn: var(--warning);
    --aiadm-info: var(--info);
    font-family: var(--aiadm-sans);
    letter-spacing: -0.005em;
    animation: aiadm-fade-in 0.4s ease-out;
}
@keyframes aiadm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.aiadm-w * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────── */
.aiadm-w .aiadm-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    flex-wrap: wrap; gap: 1rem;
}
.aiadm-w .aiadm-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
    display: flex; align-items: center; gap: 0.5rem;
}
.aiadm-w .aiadm-hint {
    font-family: var(--aiadm-mono); font-size: 0.66rem;
    color: var(--aiadm-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0.25rem 0 0;
}
.aiadm-w .aiadm-sub {
    font-size: 0.82rem; color: var(--aiadm-mute); margin: 0.25rem 0 0;
}

/* ── Section ────────────────────────────────────────────────────── */
.aiadm-w .aiadm-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
}
.aiadm-w .aiadm-section h3 {
    font-size: 0.9rem; font-weight: 600; margin: 0 0 0.75rem;
}
.aiadm-w .aiadm-section p {
    font-size: 0.82rem; color: var(--aiadm-mute); margin-bottom: 1rem; line-height: 1.4;
}
.aiadm-w .aiadm-section small {
    font-size: 0.75rem; color: var(--aiadm-mute);
}

/* ── Provider status cards ──────────────────────────────────────── */
.aiadm-w .aiadm-prov-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.aiadm-w .aiadm-prov-card {
    padding: 0.75rem; background: var(--bg-input);
    border-radius: 8px; border: 1px solid var(--border);
}
.aiadm-w .aiadm-prov-label {
    font-size: 0.7rem; color: var(--aiadm-mute);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.aiadm-w .aiadm-prov-value {
    font-size: 1rem; font-weight: 600;
}
.aiadm-w .aiadm-prov-value.ok { color: var(--aiadm-on); }
.aiadm-w .aiadm-prov-value.neutral { color: var(--aiadm-mute); }
.aiadm-w .aiadm-prov-sub {
    font-size: 0.7rem; color: var(--aiadm-mute); margin-top: 0.15rem;
    font-family: var(--aiadm-mono);
}

/* ── Stat cards ──────────────────────────────────────────────────── */
.aiadm-w .aiadm-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem; margin-top: 1rem;
}
.aiadm-w .aiadm-stat {
    text-align: center; padding: 0.75rem;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px;
}
.aiadm-w .aiadm-stat-value {
    font-size: 2rem; font-weight: 700;
    color: var(--aiadm-accent); line-height: 1;
    margin-bottom: 0.35rem;
}
.aiadm-w .aiadm-stat-label {
    font-size: 0.72rem; color: var(--aiadm-mute);
    text-transform: uppercase; letter-spacing: 0.05em;
}

/* ── Form elements ──────────────────────────────────────────────── */
.aiadm-w .aiadm-input {
    width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-input);
    color: var(--text); border: 1px solid var(--border); border-radius: 6px;
    font-family: var(--aiadm-mono); font-size: 0.85rem;
    box-sizing: border-box;
}
.aiadm-w .aiadm-input:focus { outline: none; border-color: var(--aiadm-accent); }
.aiadm-w .aiadm-textarea {
    width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-input);
    color: var(--text); border: 1px solid var(--border); border-radius: 6px;
    font-family: var(--aiadm-mono); font-size: 0.85rem; resize: vertical;
    box-sizing: border-box;
}
.aiadm-w .aiadm-textarea:focus { outline: none; border-color: var(--aiadm-accent); }

/* ── Tab toggle ─────────────────────────────────────────────────── */
.aiadm-w .aiadm-tabs {
    display: inline-flex; gap: 0; margin-bottom: 1rem;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 8px; padding: 3px;
}
.aiadm-w .aiadm-tab {
    padding: 0.45rem 1rem; border: 0; border-radius: 6px;
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    font-family: var(--aiadm-sans);
    transition: background 0.15s, color 0.15s;
}
.aiadm-w .aiadm-tab.active {
    background: var(--aiadm-accent); color: #fff;
}
.aiadm-w .aiadm-tab.inactive {
    background: transparent; color: var(--aiadm-mute);
}
.aiadm-w .aiadm-tab.inactive:hover { color: var(--text); }

/* ── Result box ─────────────────────────────────────────────────── */
.aiadm-w .aiadm-result {
    margin-top: 0.75rem; padding: 0.75rem;
    background: var(--bg-input); border-radius: 6px;
    border: 1px solid var(--border); display: none;
    font-family: var(--aiadm-mono); font-size: 0.8rem;
    overflow-x: auto; white-space: pre-wrap;
}

/* ── Table ──────────────────────────────────────────────────────── */
.aiadm-w .aiadm-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.aiadm-w .aiadm-table thead th {
    text-align: left; padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--aiadm-mono); font-size: 0.62rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--aiadm-mute); font-weight: 600;
}
.aiadm-w .aiadm-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.aiadm-w .aiadm-table tbody tr:hover { background: rgba(74,158,255,0.06); }
.aiadm-w .aiadm-table tbody td { padding: 0.5rem; vertical-align: middle; }

/* ── Feedback card ──────────────────────────────────────────────── */
.aiadm-w .aiadm-feedback-card {
    padding: 0.75rem; background: var(--bg-input);
    border-radius: 6px; border: 1px solid var(--border);
    margin-bottom: 0.5rem;
}

/* ── Sync options modal ────────────────────────────────────────── */
.aiadm-w .aiadm-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 9999;
    align-items: center; justify-content: center;
}
.aiadm-w .aiadm-modal {
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    max-width: 640px; width: 92%; max-height: 86vh;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.aiadm-w .aiadm-modal-header {
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}
.aiadm-w .aiadm-modal-header h3 { margin: 0; font-size: 0.9rem; font-weight: 600; }
.aiadm-w .aiadm-modal-body {
    padding: 0.75rem 1.25rem; overflow: auto; flex: 1;
    font-size: 0.85rem;
}
.aiadm-w .aiadm-modal-footer {
    padding: 0.75rem 1.25rem; border-top: 1px solid var(--border);
    display: flex; gap: 0.5rem; justify-content: flex-end;
}

/* ── Interval row ───────────────────────────────────────────────── */
.aiadm-w .aiadm-interval {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem; background: var(--bg-input);
    border-radius: 6px; border: 1px solid var(--border);
    margin-bottom: 1rem; flex-wrap: wrap;
}
.aiadm-w .aiadm-interval input[type="number"] {
    width: 80px; padding: 0.3rem 0.5rem; background: var(--bg-card);
    color: var(--text); border: 1px solid var(--border);
    border-radius: 4px; text-align: center;
    font-family: var(--aiadm-mono); font-size: 0.85rem;
}

/* ── Focus pill row ─────────────────────────────────────────────── */
.aiadm-w .aiadm-focus-row {
    display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}

/* ── Sync-dot indicator ─────────────────────────────────────────── */
.aiadm-w .sync-dot {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; background: var(--aiadm-on);
    margin-right: 0.35rem;
}

/* Bundle I utility classes for inline-style replacement */
.aiadm-w .aiadm-help-btn { border:0; background:transparent; cursor:pointer; font-size:1rem; vertical-align:middle; }
.aiadm-w .aiadm-sync-pill { cursor:pointer; margin-left:0.6rem; font-size:0.68rem; vertical-align:middle; }
.aiadm-w .aiadm-no-sync { margin-left:0.6rem; font-size:0.68rem; color:var(--aiadm-mute); vertical-align:middle; }
.aiadm-w .aiadm-header-actions { display:flex; gap:0.5rem; }
.aiadm-w .aiadm-prov-grid-2 { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0.75rem; }
.aiadm-w .aiadm-stat-num--accent { color:var(--aiadm-accent); }
.aiadm-w .aiadm-stat-num--ok { color:var(--aiadm-on); }
.aiadm-w .aiadm-stat-frac { display:flex; gap:0.2rem; align-items:baseline; justify-content:center; }
.aiadm-w .aiadm-stat-frac .ok { color:var(--aiadm-on); }
.aiadm-w .aiadm-stat-frac .mute { color:var(--aiadm-mute); font-size:1rem; }
.aiadm-w .aiadm-stat-frac .bad { color:var(--aiadm-off); }
.aiadm-w .aiadm-stat-sub { font-size:0.7rem; color:var(--aiadm-mute); margin-top:0.15rem; }
.aiadm-w .aiadm-section--mt { margin-top:1.5rem; }
.aiadm-w .aiadm-kb-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:0.5rem; }
.aiadm-w .aiadm-kb-card { padding:0.6rem; background:var(--bg-input); border-radius:var(--radius-sm); border:1px solid var(--border); text-align:center; }
.aiadm-w .aiadm-kb-num { font-size:1.4rem; font-weight:var(--weight-semibold); }
.aiadm-w .aiadm-kb-lbl { font-size:0.7rem; color:var(--aiadm-mute); text-transform:uppercase; letter-spacing:0.05em; }
.aiadm-w .aiadm-teach-grid { display:grid; grid-template-columns:1fr; gap:0.75rem; }
.aiadm-w .aiadm-form-label { display:block; font-size:0.75rem; color:var(--aiadm-mute); margin-bottom:0.25rem; text-transform:uppercase; letter-spacing:0.05em; }
.aiadm-w .aiadm-help-text { font-size:0.7rem; color:var(--aiadm-mute); margin-top:0.25rem; }
.aiadm-w .aiadm-button-row { display:flex; gap:0.5rem; }
.aiadm-w .aiadm-interval-label { font-size:0.85rem; margin:0; white-space:nowrap; }
.aiadm-w .aiadm-interval-unit { font-size:0.85rem; }
.aiadm-w .aiadm-interval-saved { font-size:0.75rem; color:var(--aiadm-on); display:none; }
.aiadm-w .aiadm-purge-btn { background:var(--aiadm-warn); color:#fff; }
.aiadm-w .aiadm-th-c { text-align:center; }
.aiadm-w .aiadm-td-c { text-align:center; }
.aiadm-w .aiadm-td-c--bold { text-align:center; font-weight:var(--weight-semibold); }
.aiadm-w .aiadm-td-source { font-size:0.75rem; color:var(--aiadm-mute); }
.aiadm-w .aiadm-status-text--ok { color:var(--aiadm-on); font-size:0.75rem; }
.aiadm-w .aiadm-status-text--mute { color:var(--aiadm-mute); font-size:0.75rem; }
.aiadm-w .aiadm-feedback-q { font-weight:var(--weight-medium); }
.aiadm-w .aiadm-feedback-sql { display:block; font-size:0.7rem; color:var(--aiadm-mute); margin-top:0.25rem; }
.aiadm-w .aiadm-feedback-comment { font-size:0.75rem; color:var(--aiadm-mute); margin-top:0.25rem; font-style:italic; }
.aiadm-w .aiadm-feedback-ts { font-size:0.7rem; color:var(--aiadm-mute); margin-top:0.25rem; font-family:var(--aiadm-mono); }
.aiadm-w .aiadm-modal-toolbar { padding:0.75rem 1.25rem; border-bottom:1px solid var(--border); display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.aiadm-w .aiadm-modal-toolbar-aside { font-size:0.75rem; color:var(--aiadm-mute); margin-left:auto; }
.aiadm-w .aiadm-loading { color:var(--aiadm-mute); }

/* ── Bundle CC: tabbed reorg (6.76.76) ─────────────────────────────
   Same pattern as Bundle V's bk-tabs in backup_overview.html, with
   the bk- prefix renamed to ai- to avoid clobbering. */
.aiadm-w .ai-tabs {
    display: flex; gap: 2px; align-items: stretch; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin: 0.6rem 0 1rem;
}
.aiadm-w .ai-tab {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted);
    font-family: var(--aiadm-mono);
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 600;
    padding: 0.55rem 0.95rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.aiadm-w .ai-tab:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.aiadm-w .ai-tab.active {
    color: var(--text);
    border-bottom-color: var(--aiadm-accent);
}
.aiadm-w .aiadm-panel { animation: aiadm-fade-in 0.25s cubic-bezier(0.2,0.7,0.2,1); }

.aibrief-summary { white-space: pre-wrap; line-height: 1.55; font-size: 0.95rem; }
.aibrief-placeholder { color: var(--text-muted); font-style: italic; padding: 0.75rem 0; }
.aibrief-provider { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; }
.aibrief-error { color: #f85149; font-size: 0.85rem; padding: 0.5rem 0; }
.aibrief-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid #58a6ff; border-right-color: transparent; border-radius: 50%; animation: aibrief-spin 0.8s linear infinite; vertical-align: middle; margin-right: 0.4rem; }
@keyframes aibrief-spin { to { transform: rotate(360deg); } }
.aibrief-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
.aibrief-meta code { background: rgba(110,118,129,0.1); padding: 0 0.25rem; border-radius: 3px; }

.aiins-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0.75rem; margin-bottom:1.5rem; }
.aiins-stat { background:var(--bg-card, #1e1e2e); border:1px solid var(--border); border-radius:6px; padding:0.9rem 1rem; }
.aiins-stat .label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.aiins-stat .value { font-size:1.6rem; font-weight:700; margin-top:0.25rem; }
.aiins-stat .delta { font-size:0.78rem; margin-top:0.2rem; }
.delta.up { color:#f85149; }
.delta.down { color:#3fb950; }
.delta.flat { color:var(--text-muted); }
.spark { width:100%; height:34px; margin-top:0.4rem; }
.aiins-row { background:var(--bg-card, #1e1e2e); border:1px solid var(--border); border-radius:6px; padding:0.85rem 1rem; margin-bottom:0.65rem; }
.aiins-row .name { font-weight:600; font-size:0.95rem; display:flex; align-items:center; gap:0.5rem; }
.aiins-row .name a { color:inherit; text-decoration:none; }
.aiins-row .name a:hover { color:var(--primary); }
.aiins-meta { font-size:0.78rem; color:var(--text-muted); display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.35rem; }
.aiins-meta b { color:var(--text); font-weight:600; }
.anom-card { background:rgba(248,81,73,0.08); border-left:3px solid #f85149; padding:0.55rem 0.7rem; border-radius:4px; margin-top:0.45rem; font-size:0.83rem; }
.anom-card.warning { background:rgba(210,153,34,0.1); border-left-color:#d29922; }
.aiins-narrative { margin-top:0.55rem; padding:0.65rem 0.8rem; background:rgba(88,166,255,0.08); border-left:3px solid #58a6ff; border-radius:4px; font-size:0.85rem; line-height:1.45; }
.concern-badge { font-size:0.65rem; padding:1px 6px; border-radius:9px; font-weight:700; }
.concern-badge.high { background:#5a1a1a; color:#f85149; }
.concern-badge.med { background:#3d2e00; color:#d29922; }
.concern-badge.low { background:#0d3320; color:#3fb950; }
.aiins-actions { display:flex; gap:0.5rem; margin-top:0.5rem; }
.aiins-row.is-healthy { display:none; }
body.aiins-show-all .aiins-row.is-healthy { display:block; }
.aiins-toggle { display:flex; align-items:center; gap:0.5rem; margin:0.6rem 0 0.4rem; font-size:0.85rem; color:var(--text-muted); }
.aiins-toggle input { transform:scale(1.05); }
.aiins-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:none; align-items:center; justify-content:center; z-index:9000; }
.aiins-modal-backdrop.open { display:flex; }
.aiins-modal { background:var(--bg-card,#1e1e2e); border:1px solid var(--border); border-radius:8px; width:min(640px, 92vw); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 18px 60px rgba(0,0,0,0.55); }
.aiins-modal header { padding:0.85rem 1rem; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.aiins-modal header h4 { margin:0; font-size:0.95rem; }
.aiins-modal header button { background:transparent; border:0; color:var(--text-muted); font-size:1.2rem; cursor:pointer; }
.aiins-modal .body { padding:0.9rem 1rem; overflow:auto; flex:1; }
.aiins-modal .body textarea { width:100%; min-height:70px; resize:vertical; background:var(--bg, #0e0e15); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:0.5rem; font:inherit; }
.aiins-modal .body .actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:0.5rem; }
.aiins-history { margin-top:1rem; border-top:1px solid var(--border); padding-top:0.75rem; }
.aiins-history h5 { margin:0 0 0.4rem 0; font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.aiins-history-item { background:rgba(88,166,255,0.05); border-left:2px solid #58a6ff; padding:0.5rem 0.7rem; border-radius:4px; margin-bottom:0.4rem; font-size:0.82rem; line-height:1.45; }
.aiins-history-item .q { color:var(--text); font-weight:600; }
.aiins-history-item .a { color:var(--text-muted); margin-top:0.25rem; white-space:pre-wrap; }
.aiins-history-item .meta { font-size:0.7rem; color:var(--text-muted); margin-top:0.3rem; }
.aiins-history-empty { font-size:0.8rem; color:var(--text-muted); }

.asg-w {
  --asg-bg: var(--bg-card);
  --asg-bg-subtle: var(--bg-subtle);
  --asg-border: var(--border);
  --asg-text: var(--text);
  --asg-text-muted: var(--text-muted);
  --asg-primary: var(--primary);
  --asg-red: #f85149;
  --asg-orange: #d29922;
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  animation: asgFadeIn 0.4s ease-out;
}
@keyframes asgFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.asg-hdr h2 {
  margin: 0 0 0.75rem 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.asg-hint {
  color: var(--asg-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
.asg-alert {
  padding: 1rem;
  border: 1px solid #c79a00;
  background: #3a2f00;
  color: #ffd76b;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.asg-alert a {
  color: #ffd76b;
  text-decoration: underline;
}
.asg-card {
  background: var(--asg-bg);
  border: 1px solid var(--asg-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.asg-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--asg-text);
}
.asg-input {
  width: 100%;
  padding: 0.6rem;
  background: var(--asg-bg-subtle);
  border: 1px solid var(--asg-border);
  border-radius: 6px;
  color: var(--asg-text);
  font-family: inherit;
  font-size: 0.9rem;
}
.asg-textarea {
  width: 100%;
  padding: 0.6rem;
  background: var(--asg-bg-subtle);
  border: 1px solid var(--asg-border);
  border-radius: 6px;
  color: var(--asg-text);
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
}
.asg-select {
  width: 100%;
  padding: 0.6rem;
  background: var(--asg-bg-subtle);
  border: 1px solid var(--asg-border);
  border-radius: 6px;
  color: var(--asg-text);
  font-size: 0.9rem;
}
.asg-result-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.asg-result-hdr h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.asg-warnings {
  display: none;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #3a1f1f;
  border-left: 4px solid #e74c3c;
  border-radius: 4px;
}
.asg-warnings strong {
  color: #ffb4b4;
  display: block;
  margin-bottom: 0.5rem;
}
.asg-warnings ul {
  margin: 0.5rem 0 0 1.25rem;
  color: #ffd6d6;
  font-size: 0.85rem;
}
.asg-explanation {
  margin-bottom: 1rem;
  color: var(--asg-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.asg-code-block {
  margin: 0;
  border-radius: 6px;
  max-height: 520px;
  overflow: auto;
}
.asg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.asg-refine {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--asg-border);
}
.asg-refine label {
  font-weight: 500;
  font-size: 0.85rem;
}
.asg-refine-inputs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.asg-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.asg-modal {
  background: var(--asg-bg);
  border: 1px solid var(--asg-border);
  border-radius: 8px;
  padding: 1.5rem;
  max-width: 480px;
  width: 90%;
}
.asg-modal h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.asg-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

.triage-counters { display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0; }
.triage-counter { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.75rem 1.1rem; min-width:120px; }
.triage-counter .num { font-size:1.6rem; font-weight:600; }
.triage-counter .lbl { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.triage-counter.pending .num { color:var(--primary); }
.triage-counter.accepted .num { color:#3fb950; }
.triage-counter.rejected .num { color:#f85149; }

.triage-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1rem; }
.triage-card h3 { margin:0 0 0.3rem 0; font-size:1rem; }
.triage-card h3 a { color:var(--text); text-decoration:none; }
.triage-card h3 a:hover { color:var(--primary); }
.triage-meta-row { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.4rem 0 0.6rem 0; align-items:center; font-size:0.8rem; color:var(--text-muted); }
.prio-badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:10px; font-size:0.72rem; text-transform:uppercase; font-weight:600; letter-spacing:0.03em; }
.prio-low { background:#1a73e822; color:#6ab0ff; border:1px solid #1a73e866; }
.prio-normal { background:#3fb95022; color:#7ee787; border:1px solid #3fb95066; }
.prio-high { background:#f59e0b22; color:#f9c66b; border:1px solid #f59e0b66; }
.prio-critical { background:#f8514922; color:#ff8a80; border:1px solid #f8514966; }
.cat-badge { background:var(--bg-input); color:var(--text); padding:0.15rem 0.55rem; border-radius:10px; font-size:0.72rem; border:1px solid var(--border); text-transform:capitalize; }

.triage-section { margin-top:0.65rem; }
.triage-section-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; margin-bottom:0.25rem; letter-spacing:0.04em; }
.triage-similar-list { display:flex; flex-direction:column; gap:0.25rem; }
.triage-similar-list a { font-size:0.82rem; color:var(--primary); text-decoration:none; }
.triage-similar-list a:hover { text-decoration:underline; }
.triage-draft { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); padding:0.6rem 0.75rem; font-size:0.85rem; white-space:pre-wrap; color:var(--text); }
.triage-actions { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.85rem; }
.triage-actions button { font-size:0.82rem; padding:0.4rem 0.85rem; border-radius:var(--radius); cursor:pointer; border:1px solid var(--border); background:var(--bg-input); color:var(--text); }
.triage-actions .btn-accept { background:var(--primary); color:#fff; border-color:var(--primary); }
.triage-actions .btn-reject { background:#f8514922; color:#ff8a80; border-color:#f8514966; }
.triage-actions .btn-edit { background:var(--bg-card); }

.empty-state { background:var(--bg-card); border:1px dashed var(--border); border-radius:var(--radius); padding:2rem; text-align:center; color:var(--text-muted); }

/* Modal */
.tr-modal-bg { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:2000; align-items:center; justify-content:center; }
.tr-modal-bg.open { display:flex; }
.tr-modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.4rem; max-width:560px; width:92%; max-height:85vh; overflow-y:auto; }
.tr-modal h3 { margin-top:0; }
.tr-modal label { display:block; font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; margin:0.6rem 0 0.2rem; }
.tr-modal select, .tr-modal textarea { width:100%; background:var(--bg-input); border:1px solid var(--border); color:var(--text); border-radius:var(--radius); padding:0.45rem 0.6rem; font-size:0.85rem; }
.tr-modal textarea { min-height:130px; resize:vertical; font-family:inherit; }
.tr-modal-actions { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem; }

.rule-form {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    padding:1.25rem; margin-bottom:1.5rem; opacity:0; animation:cardFadeIn 0.3s ease forwards;
}
@keyframes cardFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.rule-form .form-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0.75rem;
}
.rule-form label { display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:0.25rem; }
.rule-form input, .rule-form select { width:100%; }
.rule-form .form-actions { grid-column:1 / -1; display:flex; gap:0.5rem; margin-top:0.5rem; }
.badge-yes { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-no { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-switch .slider { position:absolute; cursor:pointer; inset:0; background:#444; border-radius:20px; transition:0.3s; }
.toggle-switch .slider::before { content:''; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + .slider { background:var(--green); }
.toggle-switch input:checked + .slider::before { transform:translateX(16px); }

.alrt {
    --al-fg: var(--text);
    --al-mute: var(--text-muted);
    --al-bg: var(--bg);
    --al-card: var(--bg-card, var(--card-bg));
    --al-bd: var(--border, var(--border-color));
    --al-crit: #ef4444;
    --al-warn: #f59e0b;
    --al-info: #38bdf8;
    --al-ok: #22c55e;
    --al-accent: var(--primary, #4a9eff);
    --al-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --al-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--al-sans);
    color: var(--al-fg);
    letter-spacing: -0.005em;
}

/* ── Stat pill row ──────────────────────────────────────────────── */
.alrt .al-stats {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin: 0.2rem 0 1rem;
}
.alrt .al-pill {
    font-family: var(--al-mono); font-size: 0.75rem;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--al-bd);
    display: inline-flex; gap: 0.45rem; align-items: center; line-height: 1.1;
}
.alrt .al-pill b { font-weight: 700; }
.alrt .al-pill .lbl {
    color: var(--al-mute); text-transform: uppercase;
    letter-spacing: 0.18em; font-size: 0.62rem; font-weight: 500;
}
.alrt .al-pill.crit { color: var(--al-crit); border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.07); }
.alrt .al-pill.warn { color: var(--al-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.alrt .al-pill.info { color: var(--al-info); border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.07); }
.alrt .al-pill.ok   { color: var(--al-ok);   border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.07); }
.alrt .al-pill.acc  { color: var(--al-accent); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.07); }

/* ── Toolbar / filter chip bar ──────────────────────────────────── */
.alrt .al-tb {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    padding: 0.4rem 0; margin-bottom: 0.6rem;
}
.alrt .al-tb input[type="text"] {
    flex: 1 1 240px; min-width: 0;
    background: var(--al-card); border: 1px solid var(--al-bd);
    border-radius: 4px; padding: 0.4rem 0.7rem;
    font-family: var(--al-mono); font-size: 0.78rem; color: var(--al-fg);
}
.alrt .al-tb input[type="text"]::placeholder { color: var(--al-mute); }
.alrt .al-tb input[type="text"]:focus { outline: none; border-color: var(--al-accent); }
.alrt .al-tb .btn,
.alrt .al-tb a.btn {
    background: var(--al-card); border: 1px solid var(--al-bd); color: var(--al-mute);
    font-family: var(--al-mono); font-size: 0.72rem;
    padding: 0.4rem 0.75rem; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.08em;
    text-decoration: none; cursor: pointer; line-height: 1.1;
}
.alrt .al-tb .btn:hover,
.alrt .al-tb a.btn:hover { color: var(--al-fg); border-color: var(--al-accent); }

/* ── Table ──────────────────────────────────────────────────────── */
.alrt .alert-table-wrap {
    background: var(--al-card); border: 1px solid var(--al-bd);
    border-radius: 6px; overflow-x: auto;
}
.alrt .alert-table-wrap table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.alrt .alert-table-wrap thead th {
    text-align: left; padding: 8px 10px;
    background: var(--al-card);
    border-bottom: 1px solid var(--al-bd);
    font-family: var(--al-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--al-mute);
    font-weight: 600; white-space: nowrap;
}
.alrt .alert-table-wrap tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.3;
}
.alrt .alert-table-wrap tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.alrt .alert-table-wrap tbody tr:hover { background: rgba(74,158,255,0.06); }

/* Severity left-stripe on rows */
.alrt .alert-table-wrap tbody tr[data-sev="critical"] { box-shadow: inset 4px 0 0 0 var(--al-crit); }
.alrt .alert-table-wrap tbody tr[data-sev="warning"]  { box-shadow: inset 4px 0 0 0 var(--al-warn); }
.alrt .alert-table-wrap tbody tr[data-sev="info"]     { box-shadow: inset 4px 0 0 0 var(--al-info); }
.alrt .alert-table-wrap tbody tr[data-sev="resolved"] { box-shadow: inset 4px 0 0 0 rgba(255,255,255,0.08); }

/* ── Severity cell: dot + mono pill ────────────────────────────── */
.alrt .al-sev {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--al-mono); font-size: 0.66rem;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid var(--al-bd); line-height: 1.1;
    background: rgba(255,255,255,0.04);
}
.alrt .al-sev .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.alrt .al-sev.crit { color: var(--al-crit); border-color: rgba(239,68,68,0.45);  background: rgba(239,68,68,0.10); }
.alrt .al-sev.warn { color: var(--al-warn); border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.10); }
.alrt .al-sev.info { color: var(--al-info); border-color: rgba(56,189,248,0.45); background: rgba(56,189,248,0.10); }
.alrt .al-sev.muted { color: var(--al-mute); }
.alrt .al-sev.crit .dot {
    box-shadow: 0 0 5px rgba(239,68,68,0.7);
    animation: al-pulse 1.8s ease-out infinite;
}
@keyframes al-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* ── Type pill (mono compact) ──────────────────────────────────── */
.alrt .al-type {
    display: inline-block;
    font-family: var(--al-mono); font-size: 0.68rem;
    padding: 2px 7px; border-radius: 3px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--al-bd);
    color: var(--al-fg); white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.06em;
}

.alrt .alert-table-wrap td.host a {
    font-family: var(--al-mono); color: var(--al-accent);
    text-decoration: none; font-weight: 500;
}
.alrt .alert-table-wrap td.host a:hover { text-decoration: underline; }
.alrt .alert-table-wrap td.nowrap {
    font-family: var(--al-mono); font-size: 0.72rem; color: var(--al-mute);
    white-space: nowrap;
}
.alrt .alert-table-wrap td.msg a {
    color: var(--al-fg); text-decoration: none;
    border-bottom: 1px dotted var(--al-mute);
}
.alrt .alert-table-wrap td.msg a:hover { color: var(--al-accent); border-bottom-color: var(--al-accent); }

/* Resolved table: muted */
.alrt .al-resolved tbody tr { opacity: 0.72; }
.alrt .al-resolved tbody tr:hover { opacity: 1; }

/* Staggered row fade-in (first 8 rows) */
@keyframes al-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.alrt .alert-table-wrap tbody tr {
    animation: al-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.alrt .alert-table-wrap tbody tr:nth-child(1) { animation-delay: 0ms; }
.alrt .alert-table-wrap tbody tr:nth-child(2) { animation-delay: 50ms; }
.alrt .alert-table-wrap tbody tr:nth-child(3) { animation-delay: 100ms; }
.alrt .alert-table-wrap tbody tr:nth-child(4) { animation-delay: 150ms; }
.alrt .alert-table-wrap tbody tr:nth-child(5) { animation-delay: 200ms; }
.alrt .alert-table-wrap tbody tr:nth-child(6) { animation-delay: 250ms; }
.alrt .alert-table-wrap tbody tr:nth-child(7) { animation-delay: 300ms; }
.alrt .alert-table-wrap tbody tr:nth-child(8) { animation-delay: 350ms; }
.alrt .alert-table-wrap tbody tr:nth-child(n+9) { animation: none; }

.alrt h2,
.alrt h3 {
    font-family: var(--al-sans);
    letter-spacing: -0.01em;
}
.alrt h3 {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--al-mute);
    margin-top: 1.6rem; margin-bottom: 0.6rem;
}

.alc-cl-w {
    --ac-fg: var(--text);
    --ac-mute: var(--text-muted);
    --ac-bg: var(--bg);
    --ac-card: var(--bg-card, var(--card-bg));
    --ac-bd: var(--border, var(--border-color));
    --ac-crit: #ef4444;
    --ac-warn: #f59e0b;
    --ac-info: #38bdf8;
    --ac-accent: var(--primary, #4a9eff);
    --ac-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ac-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--ac-sans);
    color: var(--ac-fg);
    letter-spacing: -0.005em;
}

.alc-cl-w h2 {
    font-family: var(--ac-sans);
    letter-spacing: -0.01em;
}

/* ── Toolbar ────────────────────────────────────────────────────── */
.alc-cl-w .ac-tb {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    padding: 0.4rem 0; margin-bottom: 0.6rem;
}
.alc-cl-w .ac-tb .btn {
    background: var(--ac-card); border: 1px solid var(--ac-bd); color: var(--ac-mute);
    font-family: var(--ac-mono); font-size: 0.72rem;
    padding: 0.4rem 0.75rem; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.08em;
    text-decoration: none; cursor: pointer; line-height: 1.1;
}
.alc-cl-w .ac-tb .btn:hover { color: var(--ac-fg); border-color: var(--ac-accent); }
.alc-cl-w .ac-tb label {
    font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem;
    cursor: pointer; user-select: none;
}

/* ── Table ──────────────────────────────────────────────────────── */
.alc-cl-w .ac-table-wrap {
    background: var(--ac-card); border: 1px solid var(--ac-bd);
    border-radius: 6px; overflow-x: auto;
}
.alc-cl-w .ac-table-wrap table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.alc-cl-w .ac-table-wrap thead th {
    text-align: left; padding: 8px 10px;
    background: var(--ac-card);
    border-bottom: 1px solid var(--ac-bd);
    font-family: var(--ac-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-mute);
    font-weight: 600; white-space: nowrap;
}
.alc-cl-w .ac-table-wrap tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.3;
}
.alc-cl-w .ac-table-wrap tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.alc-cl-w .ac-table-wrap tbody tr:hover { background: rgba(74,158,255,0.06); }

/* ── Severity badges ────────────────────────────────────────────── */
.alc-cl-w .ac-sev-badge {
    display: inline-block; font-family: var(--ac-mono); font-size: 0.68rem;
    padding: 3px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: #fff;
}
.alc-cl-w .ac-sev-badge.crit { background: var(--ac-crit); }
.alc-cl-w .ac-sev-badge.warn { background: var(--ac-warn); }
.alc-cl-w .ac-sev-badge.info { background: var(--ac-info); }

/* ── Location-wide badge ────────────────────────────────────────── */
.alc-cl-w .ac-loc-badge {
    display: inline-block; font-family: var(--ac-mono); font-size: 0.68rem;
    padding: 3px 8px; border-radius: 999px;
    background: #c0392b; color: #fff;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.alc-cl-w .ac-loc-no {
    color: var(--ac-mute); font-family: var(--ac-mono); font-size: 0.75rem;
}

.alc-cl-w .ac-table-wrap td details {
    font-family: var(--ac-mono); font-size: 0.75rem;
}
.alc-cl-w .ac-table-wrap td details summary {
    cursor: pointer; color: var(--ac-accent);
}
.alc-cl-w .ac-table-wrap td details div {
    color: var(--ac-mute); margin-top: 0.25rem; max-width: 320px;
}
.alc-cl-w .ac-table-wrap td .nowrap {
    font-family: var(--ac-mono); font-size: 0.72rem; color: var(--ac-mute);
    white-space: nowrap;
}

/* Staggered row fade-in */
@keyframes ac-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.alc-cl-w .ac-table-wrap tbody tr {
    animation: ac-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.alc-cl-w .ac-table-wrap tbody tr:nth-child(1) { animation-delay: 0ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(2) { animation-delay: 50ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(3) { animation-delay: 100ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(4) { animation-delay: 150ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(5) { animation-delay: 200ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(6) { animation-delay: 250ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(7) { animation-delay: 300ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(8) { animation-delay: 350ms; }
.alc-cl-w .ac-table-wrap tbody tr:nth-child(n+9) { animation: none; }

/* Bundle Q — row hover actions. Cell holds a tight icon strip that
   stays invisible until the row is hovered, so the table doesn't
   look noisy at rest. */
.ep-row .ep-actions { opacity:0; transition:opacity 0.12s ease-out; white-space:nowrap; text-align:right; }
.ep-row:hover .ep-actions { opacity:1; }
.ep-row .ep-actions .btn-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; padding:0; margin-left:2px;
  border:1px solid var(--border,#2d3140); border-radius:5px;
  background:var(--bg-card,#1a1d27); color:var(--text,#d8dbe5);
  font-size:0.85rem; line-height:1; cursor:pointer; text-decoration:none;
}
.ep-row .ep-actions .btn-icon:hover { background:var(--bg-input,#0f1117); border-color:var(--accent,#4a9eff); }
@media (max-width: 900px) {
  .ep-row .ep-actions { opacity:1; }  /* always-on for touch devices */
}

.fl {
    --fl-fg: var(--text);
    --fl-mute: var(--text-muted);
    --fl-bg: var(--bg);
    --fl-card: var(--bg-card);
    --fl-bd: var(--border);
    --fl-on: #22c55e;
    --fl-off: #ef4444;
    --fl-warn: #f59e0b;
    --fl-info: #38bdf8;
    --fl-accent: var(--primary, #4a9eff);
    --fl-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --fl-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--fl-sans);
    color: var(--fl-fg);
    margin: -1rem -1rem 0 -1rem;
    padding: 0.5rem 1rem 2rem;
    letter-spacing: -0.005em;
}

/* ── Header strip ───────────────────────────────────────────────── */
.fl-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--fl-bd);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.fl-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.fl-test-badge {
    font-family: var(--fl-mono); font-size: 0.6rem; letter-spacing: 0.18em;
    color: var(--fl-warn); border: 1px solid var(--fl-warn);
    padding: 1px 6px; border-radius: 3px; text-transform: uppercase;
}
.fl-stat-pills { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.fl-pill {
    font-family: var(--fl-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--fl-bd);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.fl-pill b { font-weight: 700; }
.fl-pill .lbl { color: var(--fl-mute); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; }
.fl-pill.on  { color: var(--fl-on); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.07); }
.fl-pill.off { color: var(--fl-off); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.07); }
.fl-pill.acc { color: var(--fl-accent); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.07); }

/* ── Per-customer health chart ─────────────────────────────────── */
.fl-chart {
    background: var(--fl-card); border: 1px solid var(--fl-bd);
    border-radius: 6px; padding: 0.7rem 0.85rem; margin-bottom: 0.7rem;
}
.fl-chart-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.5rem;
}
.fl-chart-title {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--fl-mute);
}
.fl-chart-meta { font-family: var(--fl-mono); font-size: 0.68rem; color: var(--fl-mute); }
.fl-chart-rows { display: flex; flex-direction: column; gap: 3px; }
.fl-chart-row {
    display: grid; grid-template-columns: 130px 1fr 70px;
    gap: 0.6rem; align-items: center; font-size: 0.74rem; cursor: pointer;
    padding: 1px 0; border-radius: 3px; transition: background 0.12s;
}
.fl-chart-row:hover { background: rgba(255,255,255,0.04); }
.fl-chart-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--fl-fg); font-weight: 500;
}
.fl-chart-bar {
    height: 14px; background: rgba(239,68,68,0.18); border-radius: 2px;
    overflow: hidden; position: relative;
}
.fl-chart-bar .seg {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    transform-origin: left;
    animation: fl-grow 0.7s 0.05s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
@keyframes fl-grow { from { transform: scaleX(0); } }
.fl-chart-count {
    font-family: var(--fl-mono); font-size: 0.68rem; color: var(--fl-mute);
    text-align: right;
}
.fl-chart-count b { color: var(--fl-on); font-weight: 600; }
.fl-chart-count.bad b { color: var(--fl-off); }

/* ── Toolbar ────────────────────────────────────────────────────── */
.fl-tb {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    padding: 0.5rem 0; margin-bottom: 0.4rem;
    position: sticky; top: 0; background: var(--fl-bg); z-index: 5;
}
.fl-search { flex: 1 1 260px; position: relative; min-width: 0; }
.fl-search input {
    width: 100%; background: var(--fl-card); border: 1px solid var(--fl-bd);
    border-radius: 4px; padding: 0.4rem 0.6rem 0.4rem 1.85rem;
    font-family: var(--fl-mono); font-size: 0.78rem; color: var(--fl-fg);
}
.fl-search input::placeholder { color: var(--fl-mute); }
.fl-search input:focus { outline: none; border-color: var(--fl-accent); }
.fl-search svg { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--fl-mute); }
.fl-chip-group { display: inline-flex; border: 1px solid var(--fl-bd); border-radius: 4px; overflow: hidden; }
.fl-chip {
    background: var(--fl-card); border: none; color: var(--fl-mute);
    font-family: var(--fl-mono); font-size: 0.72rem;
    padding: 0.4rem 0.7rem; cursor: pointer; border-right: 1px solid var(--fl-bd);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.fl-chip:last-child { border-right: none; }
.fl-chip:hover { color: var(--fl-fg); }
.fl-chip[aria-pressed="true"] { color: #fff; background: var(--fl-accent); }
.fl-chip-group.os .fl-chip[aria-pressed="true"] { background: #1f6feb; }
.fl-tb-meta { font-family: var(--fl-mono); font-size: 0.7rem; color: var(--fl-mute); margin-left: auto; }
.fl-tb-meta b { color: var(--fl-fg); }

/* ── Table ──────────────────────────────────────────────────────── */
.fl-tbl-wrap {
    background: var(--fl-card); border: 1px solid var(--fl-bd);
    border-radius: 6px; overflow-x: auto;
}
.fl-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.fl-tbl thead th {
    position: sticky; top: 44px; background: var(--fl-card);
    text-align: left; padding: 7px 10px;
    border-bottom: 1px solid var(--fl-bd);
    font-family: var(--fl-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--fl-mute);
    font-weight: 600; white-space: nowrap; user-select: none; cursor: pointer;
}
.fl-tbl thead th[data-sort]:hover { color: var(--fl-fg); }
.fl-tbl thead th .arrow { color: var(--fl-accent); margin-left: 2px; opacity: 0; font-size: 0.7rem; }
.fl-tbl thead th.sort-asc .arrow,
.fl-tbl thead th.sort-desc .arrow { opacity: 1; }
.fl-tbl thead th.sort-desc .arrow { display: inline-block; transform: rotate(180deg); }

/* Row / divider spacing — bigger air between rows + clear org breaks. */
.fl-tbl tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    cursor: pointer; transition: background 0.1s;
}
.fl-tbl tbody tr:hover { background: rgba(74,158,255,0.06); }
.fl-tbl tbody td { padding: 9px 10px; vertical-align: middle; white-space: nowrap; line-height: 1.25; }
/* Org section header — accent-tinted band with strong contrast text + left stripe */
.fl-tbl tbody tr.org-divider {
    cursor: default;
    background: rgba(74,158,255,0.10);
    border-top: 1px solid rgba(74,158,255,0.35);
    border-bottom: 1px solid rgba(74,158,255,0.25);
}
.fl-tbl tbody tr.org-divider td {
    padding: 12px 14px;
    font-family: var(--fl-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--fl-fg);
    border-left: 3px solid var(--fl-accent);
}
.fl-tbl tbody tr.org-divider td b {
    color: var(--fl-fg);
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.005em;
    text-transform: none;
    margin-right: 0.5rem;
}
.fl-tbl tbody tr.org-divider td .ratio { color: var(--fl-mute); font-weight: 500; }
/* Page-bg-colored spacer row gives the visual gap between sections */
.fl-tbl tbody tr.fl-spacer td {
    padding: 0; height: 14px; border: none; background: var(--fl-bg);
}

.fl-tbl td.host { font-family: var(--fl-mono); font-weight: 500; color: var(--fl-fg); }
.fl-tbl td.cust a { color: var(--fl-accent); text-decoration: none; }
.fl-tbl td.cust a:hover { text-decoration: underline; }
.fl-tbl td.mono { font-family: var(--fl-mono); font-size: 0.74rem; color: var(--fl-mute); }
.fl-tbl td.muted { color: var(--fl-mute); }

/* Status indicator */
.fl-st {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--fl-mono); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.fl-st .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fl-off); }
.fl-st.on  { color: var(--fl-on); }
.fl-st.on  .dot { background: var(--fl-on); box-shadow: 0 0 5px rgba(34,197,94,0.7); animation: fl-pulse 2.4s ease-out infinite; }
.fl-st.off { color: var(--fl-off); }
@keyframes fl-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
    70% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* OS column: brand glyph + version label */
.fl-os {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--fl-mono); font-size: 0.74rem; line-height: 1;
}
.fl-os svg { width: 14px; height: 14px; flex-shrink: 0; }
.fl-os.win   { color: #79c0ff; }
.fl-os.svr   { color: #fb923c; }
.fl-os.mac   { color: #e2e8f0; }
.fl-os.lnx   { color: #34d399; }
.fl-os.unk   { color: var(--fl-mute); }

/* CPU column: vendor brand mark + percent (full chip name on hover) */
.fl-cpu {
    display: inline-flex; align-items: center; gap: 0.55rem;
    font-family: var(--fl-mono); font-size: 0.74rem;
    cursor: help;
}
.fl-cpu-mark {
    height: 16px; width: auto; flex-shrink: 0; display: inline-block; vertical-align: middle;
}
.fl-cpu-mark.unk {
    width: 16px; color: var(--fl-mute);
}
.fl-cpu-pct { color: var(--fl-mute); }
.fl-cpu-pct.warm { color: var(--fl-warn); }
.fl-cpu-pct.hot  { color: var(--fl-off); font-weight: 600; }

/* RAM — bare number */
.fl-ram { font-family: var(--fl-mono); font-size: 0.74rem; color: var(--fl-fg); }
.fl-ram .unit { color: var(--fl-mute); font-size: 0.66rem; margin-left: 1px; }

/* Last-seen color ramp */
.fl-ago.fresh { color: var(--fl-on); }
.fl-ago.warm  { color: var(--fl-warn); }
.fl-ago.stale { color: var(--fl-off); }

.fl-empty { text-align: center; padding: 2.5rem 1rem; color: var(--fl-mute); font-size: 0.85rem; }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .fl-tbl thead th.col-loc, .fl-tbl tbody td.col-loc,
    .fl-tbl thead th.col-cpu, .fl-tbl tbody td.col-cpu,
    .fl-tbl thead th.col-ram, .fl-tbl tbody td.col-ram,
    .fl-tbl thead th.col-user, .fl-tbl tbody td.col-user { display: none; }
}
@media (max-width: 768px) {
    .fl { margin: -1rem -0.5rem 0; padding: 0.4rem 0.5rem 2rem; }
    .fl-tbl thead th.col-ip, .fl-tbl tbody td.col-ip { display: none; }
    .fl-tbl thead th { font-size: 0.62rem; padding: 5px 6px; }
    .fl-tbl tbody td { padding: 7px 6px; }
    .fl-chart-row { grid-template-columns: 95px 1fr 60px; font-size: 0.7rem; }
}

.ao-badge { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-family: ui-monospace, monospace; border: 1px solid var(--border); }
  .ao-running { color: #f59e0b; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
  .ao-err { color: #ef4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }
  .ao-idle { color: var(--text-muted); }

  .ao-order { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 1rem; }
  .ao-order-head { display:flex; justify-content: space-between; align-items: center; gap:0.5rem; padding: .55rem .9rem; border-bottom: 1px solid var(--border); }
  .ao-order-head .meta { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; font-size: .78rem; color: var(--text); }
  .ao-order-head .ao-order-date { color: var(--text-muted); font-family: ui-monospace, monospace; font-size: .72rem; }
  .ao-order-head .ao-order-total { font-weight:600; }
  .ao-order-head .ao-order-status { font-size:.65rem; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,0.06); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
  /* Order ID is informational; downplay so the date + total + status read first. */
  .ao-order-head .ao-order-id { font-family: ui-monospace, monospace; font-size:.65rem; color:var(--text-muted); opacity:0.7; }
  /* Compact Amazon button (logo + small label). Replaces the wide
     "View on Amazon ↗" pill that ate header room. */
  .ao-amzn-btn { display:inline-flex; align-items:center; gap:0.35rem; padding:3px 9px; background:#ff9900; color:#000 !important; border-radius:4px; font-size:.7rem; font-weight:700; text-decoration:none; flex-shrink:0; }
  .ao-amzn-btn:hover { filter:brightness(1.08); }
  .ao-amzn-btn svg { display:block; }
  body.ao-view-grid .ao-amzn-btn .ao-amzn-btn-label { display:none; }
  body.ao-view-grid .ao-order-id { display:none; }
  /* Spinner animation for the syncing badge */
  .ao-spin { display:inline-block; animation: ao-spin-anim 1.1s linear infinite; }
  @keyframes ao-spin-anim { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  /* View-toggle row + grid layout. .ao-view-grid swaps the per-order
     items list to a card grid so multi-item orders take less vertical
     space. Default remains list view. */
  .ao-view-toggle { display:inline-flex; gap:0; margin-left:auto; }
  .ao-view-toggle button { background:var(--bg); border:1px solid var(--border); color:var(--text-muted); padding:3px 10px; font-size:.78rem; cursor:pointer; }
  .ao-view-toggle button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
  .ao-view-toggle button:first-child { border-radius:4px 0 0 4px; }
  .ao-view-toggle button:last-child { border-radius:0 4px 4px 0; }
  /* Grid mode: per-order items grid (cards within one order) AND
     order-level grid (the orders themselves flow into columns).
     #bulkForm wraps every .ao-order so we drive both off it. */
  /* Outer grid: orders flow into 320–360px columns. */
  body.ao-view-grid #bulkForm { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:0.8rem; align-items:start; }
  body.ao-view-grid .ao-order { margin-bottom:0; }
  /* Items inside an order stack VERTICALLY and fill the order card.
     Big orders (many items) get a max-height + scroll so the order
     card stays uniform with siblings. */
  body.ao-view-grid .ao-items { display:flex; flex-direction:column; gap:.4rem; padding:.5rem; max-height:520px; overflow-y:auto; }
  body.ao-view-grid .ao-item { display:grid; grid-template-columns:56px 1fr auto auto; gap:.5rem; align-items:center; padding:.45rem; border:1px solid var(--border); border-radius:6px; }
  body.ao-view-grid .ao-item img { width:56px; height:56px; object-fit:contain; background:#fff; border-radius:4px; }
  body.ao-view-grid .ao-item .title { font-size:.78rem; font-weight:600; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  body.ao-view-grid .ao-item .meta { display:flex; flex-wrap:wrap; gap:.25rem .55rem; font-size:.65rem; margin-top:.15rem; }
  body.ao-view-grid .ao-item .meta span { margin:0; }
  body.ao-view-grid .ao-item-actions { margin-top:.35rem; }
  body.ao-view-grid .ao-assign-target { display:none; }
  body.ao-view-grid .ao-status { font-size:.6rem; padding:1px 6px; }
  /* Submit row + empty state push to span all columns. */
  body.ao-view-grid #bulkForm > button[type="submit"] { grid-column:1 / -1; }
  body.ao-view-grid #bulkForm > .ao-empty { grid-column:1 / -1; }

  .ao-items { display: grid; grid-template-columns: 1fr; }
  .ao-item { display: grid; grid-template-columns: 80px 1fr 220px 200px 80px; gap: .8rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .ao-item:last-child { border-bottom: 0; }
  .ao-item.imported { background: rgba(34,197,94,0.05); }
  .ao-item.returned { opacity: 0.55; background: rgba(239,68,68,0.04); }
  .ao-item img { width: 70px; height: 70px; object-fit: contain; background: white; border-radius: 4px; }
  .ao-item .title { font-weight: 600; font-size: .85rem; line-height: 1.3; }
  .ao-item .meta { font-family: ui-monospace, monospace; font-size: .7rem; color: var(--text-muted); margin-top: 4px; }
  .ao-item .meta span { margin-right: .8rem; }
  .ao-item-actions { margin-top:.45rem; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
  .ao-item .note-line { margin-top: .35rem; font-size: .72rem; color: #93c5fd; }
  .ao-item .note-line strong { color: var(--text-muted); }
  .ao-note-btn { display:inline-flex; align-items:center; justify-content:center; gap:.32rem; min-width:1.55rem; height:1.7rem; padding:0 .55rem; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text-muted); cursor:pointer; vertical-align:middle; }
  .ao-note-btn:hover { color: var(--text); border-color: var(--primary); }
  .ao-note-btn svg { width: .9rem; height: .9rem; display:block; }
  .ao-note-label { font-size:.72rem; font-weight:600; }
  .ao-similar { margin-top: .45rem; border: 1px solid rgba(245,158,11,0.28); border-radius: 6px; background: rgba(245,158,11,0.06); overflow: hidden; }
  .ao-similar-title { padding: .3rem .45rem; font-size: .68rem; font-weight: 700; color: #f59e0b; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(245,158,11,0.18); }
  .ao-similar-row { display: block; padding: .36rem .45rem; color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .ao-similar-row:last-child { border-bottom: 0; }
  .ao-similar-row:hover { background: rgba(245,158,11,0.10); }
  .ao-similar-name { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; }
  .ao-similar-confidence { margin-left: auto; color: var(--text-muted); font-family: ui-monospace, monospace; font-size: .64rem; font-weight: 500; }
  .ao-similar-meta { margin-top: .15rem; color: var(--text-muted); font-family: ui-monospace, monospace; font-size: .64rem; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
  .ao-status { font-family: ui-monospace, monospace; font-size: .7rem; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; }
  .ao-status.imported { color: #22c55e; background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.30); }
  .ao-status.pending { color: var(--text-muted); border: 1px solid var(--border); }

  /* Floats over viewport bottom always when items selected — sticky
     to the form's tail meant the operator had to scroll past every
     order to find it. Fixed position keeps the Import button under
     the cursor regardless of scroll. */
  .ao-bulk-bar { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--bg-card); border: 1px solid var(--primary); border-radius: 8px; padding: .7rem 1.1rem; box-shadow: 0 6px 24px rgba(0,0,0,0.45); display: flex; gap: .8rem; align-items: center; }
  .ao-bulk-bar .count { font-weight: 600; color: var(--primary); }
  .ao-assign-target select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 4px; font-size: .78rem; }

  .ao-toast { position: fixed; bottom: 2rem; right: 2rem; background: rgba(34,197,94,0.95); color: white; padding: .8rem 1.2rem; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); display: none; z-index: 1000; font-weight: 600; font-size: .85rem; max-width: 400px; }
  .ao-toast.clickable { cursor: pointer; }
  .ao-toast.clickable:hover { filter: brightness(1.05); }
  .ao-toast.err { background: rgba(239,68,68,0.95); }
  .ao-toast a { color: white; text-decoration: underline; margin-left: 0.6rem; }

  .ao-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 999; }
  .ao-modal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; width: 580px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
  .ao-modal-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
  .ao-modal-body { padding: 1rem; overflow: auto; flex: 1; }
  .ao-modal-foot { padding: .8rem 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; }
  .btn-close { background: transparent; border: 0; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; line-height: 1; }
  .ao-dest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
  .ao-dest { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--bg); }
  .ao-dest:hover { border-color: var(--primary); }
  .ao-dest input { margin-top: .15rem; }
  .ao-dest .ao-hint { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
  .ao-pick-block { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
  .ao-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; }
  .ao-pick-block input[type="text"] { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: .4rem .6rem; border-radius: 4px; box-sizing: border-box; }
  .ao-results { max-height: 220px; overflow-y: auto; margin-top: .4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); }
  .ao-result-row { padding: .5rem .6rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: .82rem; }
  .ao-result-row:last-child { border-bottom: 0; }
  .ao-result-row:hover, .ao-result-row.selected { background: rgba(91,138,245,0.10); }
  .ao-result-row .meta { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
  .ao-empty { padding: .6rem; color: var(--text-muted); font-size: .78rem; text-align: center; }
  .ao-inventory-option { display:flex; gap:0.55rem; align-items:flex-start; padding:0.65rem; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,0.03); }
  .ao-inventory-option input { margin-top:0.2rem; }
  .ao-new-customer-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
  .ao-new-customer-grid label { display:flex; flex-direction:column; gap:0.25rem; font-size:0.78rem; color:var(--text-muted); }
  .ao-new-customer-grid input, .ao-new-customer-grid textarea { background:var(--bg-input); border:1px solid var(--border); color:var(--text); padding:.4rem .6rem; border-radius:4px; box-sizing:border-box; width:100%; }
  .ao-new-customer-grid .full { grid-column:1 / -1; }

.fz-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.9rem; margin:1rem 0; }
.fz-stat { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.fz-stat .label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.fz-stat .value { font-size:1.5rem; font-weight:700; margin-top:0.25rem; }
.fz-stat.fail .value { color:#e74c3c; }
.fz-stat.ok .value { color:#27ae60; }

.fz-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.fz-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.fz-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); vertical-align:top; }
.fz-table .mono { font-family:var(--font-mono, monospace); font-size:0.78rem; color:var(--text-muted); }
.fz-excerpt { font-family:var(--font-mono, monospace); font-size:0.72rem; color:var(--text-muted);
              max-width:32ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fz-badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-size:0.72rem;
            font-weight:600; }
.fz-badge.s5xx { background:rgba(231,76,60,0.15); color:#e74c3c; }
.fz-badge.tmo { background:rgba(241,196,15,0.15); color:#d68910; }
.fz-actions { display:flex; gap:0.4rem; flex-wrap:wrap; }
.fz-actions form { display:inline; }

.fz-runs-table { margin-top:2rem; }

.apns-banner { display:flex; align-items:center; gap:0.9rem; padding:0.85rem 1.1rem;
               border-radius:8px; margin-bottom:1rem; border:1px solid var(--border); }
.apns-banner.green { background:rgba(39,174,96,0.08);  border-color:rgba(39,174,96,0.35);  color:#27ae60; }
.apns-banner.red   { background:rgba(231,76,60,0.08);  border-color:rgba(231,76,60,0.4);   color:#e74c3c; }
.apns-banner .dot { width:12px; height:12px; border-radius:50%; background:currentColor; }
.apns-banner .label { font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.78rem; }
.apns-table { width:100%; border-collapse:collapse; font-size:0.85rem; margin-top:0.5rem; }
.apns-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                 font-size:0.75rem; color:var(--text-muted); text-transform:uppercase;
                 letter-spacing:0.05em; }
.apns-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); }
.apns-table .mono { font-family:var(--font-mono, monospace); }
.apns-pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:0.7rem;
             font-weight:700; letter-spacing:0.03em; }
.apns-pill.ok   { background:rgba(39,174,96,0.15);  color:#27ae60; }
.apns-pill.bad  { background:rgba(231,76,60,0.15);  color:#e74c3c; }

.aud-trl-w {
    --atw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --atw-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --atw-on: #22c55e;
    --atw-off: #ef4444;
    --atw-warn: #f59e0b;
    --atw-info: #38bdf8;
    --atw-accent: var(--primary, #4a9eff);
    --atw-mute: var(--text-muted);
    font-family: var(--atw-sans);
    letter-spacing: -0.005em;
}

/* ── Compact header bar with actions ───────────────────────────── */
.aud-trl-w .atw-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}
.aud-trl-w .atw-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.aud-trl-w .atw-pill {
    font-family: var(--atw-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.aud-trl-w .atw-pill b { font-weight: 700; }
.aud-trl-w .atw-pill .lbl {
    color: var(--atw-mute); text-transform: uppercase;
    letter-spacing: 0.18em; font-size: 0.62rem;
}
.aud-trl-w .atw-pill.on  { color: var(--atw-on);  border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.07); }
.aud-trl-w .atw-pill.off { color: var(--atw-off); border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.07); }

.aud-trl-w .atw-result {
    display: none; margin-bottom: 1rem; padding: 0.75rem;
    border-radius: 6px; font-size: 0.85rem; line-height: 1.4;
}
.aud-trl-w .atw-result.valid {
    background: rgba(34,197,94,0.1);
    border: 1px solid var(--atw-on);
    color: var(--atw-on);
}
.aud-trl-w .atw-result.invalid {
    background: rgba(239,68,68,0.1);
    border: 1px solid var(--atw-off);
    color: var(--atw-off);
}

/* ── Filter bar ────────────────────────────────────────────────── */
.aud-trl-w .atw-filter {
    display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap;
}
.aud-trl-w .atw-select {
    padding: 0.35rem 0.55rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--atw-mono); font-size: 0.74rem;
}
.aud-trl-w .atw-select:focus { outline: none; border-color: var(--atw-accent); }
.aud-trl-w .atw-input {
    padding: 0.35rem 0.55rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--atw-mono); font-size: 0.74rem; width: 150px;
}
.aud-trl-w .atw-input:focus { outline: none; border-color: var(--atw-accent); }
.aud-trl-w .atw-input::placeholder { color: var(--atw-mute); }

/* ── Card / table ──────────────────────────────────────────────── */
.aud-trl-w .atw-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.4rem 0.5rem; overflow-x: auto;
}
.aud-trl-w .atw-tbl { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 0.80rem; }
@media (max-width: 640px) {
    .aud-trl-w .atw-hide-mobile { display: none; }
}
.aud-trl-w .atw-tbl thead th {
    text-align: left; padding: 8px 9px;
    border-bottom: 1px solid var(--border);
    font-family: var(--atw-mono);
    font-size: 0.62rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--atw-mute);
    font-weight: 600; white-space: nowrap;
}
.aud-trl-w .atw-tbl tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.aud-trl-w .atw-tbl tbody tr:hover { background: rgba(74,158,255,0.06); }
.aud-trl-w .atw-tbl tbody td {
    padding: 8px 9px; vertical-align: middle; line-height: 1.3;
}

.aud-trl-w .atw-id { font-family: var(--atw-mono); font-size: 0.72rem; color: var(--atw-mute); }
.aud-trl-w .atw-time { font-family: var(--atw-mono); font-size: 0.74rem; color: var(--atw-mute); white-space: nowrap; }
.aud-trl-w .atw-tag {
    display: inline-block;
    font-family: var(--atw-mono); font-size: 0.60rem;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 2px 6px; border-radius: 3px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--atw-mute);
}
.aud-trl-w .atw-tag.info { color: var(--atw-info);   border-color: rgba(56,189,248,0.4);  background: rgba(56,189,248,0.07); }
.aud-trl-w .atw-tag.warn { color: var(--atw-warn);   border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.07); }
.aud-trl-w .atw-actor { font-weight: 500; color: var(--text); }
.aud-trl-w .atw-ip { font-family: var(--atw-mono); font-size: 0.72rem; color: var(--atw-mute); }
.aud-trl-w .atw-target { font-size: 0.82rem; color: var(--text); }
.aud-trl-w .atw-details {
    max-width: 300px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-size: 0.80rem; color: var(--atw-mute);
}
.aud-trl-w .atw-hash {
    font-family: var(--atw-mono); font-size: 0.66rem; color: var(--atw-mute);
}

/* ── Pagination ───────────────────────────────────────────────── */
.aud-trl-w .atw-pag {
    padding: 0.75rem; display: flex; justify-content: center; gap: 0.25rem; flex-wrap: wrap;
}
.aud-trl-w .atw-pag a {
    min-width: 2rem; text-align: center;
}

.aud-trl-w .atw-footer {
    font-size: 0.75rem; color: var(--atw-mute);
    font-family: var(--atw-mono); margin-top: 0.5rem;
}

/* Staggered row fade-in (capped at 8 rows) */
@keyframes atw-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.aud-trl-w .atw-tbl tbody tr { animation: atw-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards; }
.aud-trl-w .atw-tbl tbody tr:nth-child(1) { animation-delay: 0ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(2) { animation-delay: 50ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(3) { animation-delay: 100ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(4) { animation-delay: 150ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(5) { animation-delay: 200ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(6) { animation-delay: 250ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(7) { animation-delay: 300ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(8) { animation-delay: 350ms; }
.aud-trl-w .atw-tbl tbody tr:nth-child(n+9) { animation: none; }

.aut-dsh-w {
  --aut-bg: var(--bg-card);
  --aut-bg-subtle: var(--bg-subtle);
  --aut-border: var(--border);
  --aut-text: var(--text);
  --aut-text-muted: var(--text-muted);
  --aut-primary: var(--primary);
  --aut-primary-hover: var(--primary-hover);
  --aut-green: #3fb950;
  --aut-red: #f85149;
  --aut-orange: #d29922;
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  animation: autFadeIn 0.4s ease-out;
}
@keyframes autFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.aut-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.aut-hdr h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.aut-desc {
  color: var(--aut-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.aut-card {
  background: var(--aut-bg);
  border: 1px solid var(--aut-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.aut-card h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.aut-card p {
  color: var(--aut-text-muted);
  font-size: 0.85rem;
  margin: 0;
}
.aut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}
.aut-template-card {
  background: var(--aut-bg-subtle);
  border: 1px solid var(--aut-border);
  border-radius: 8px;
  padding: 0.75rem;
  animation: autFadeIn 0.3s ease-out backwards;
}
.aut-template-card:nth-child(1) { animation-delay: 0.05s; }
.aut-template-card:nth-child(2) { animation-delay: 0.1s; }
.aut-template-card:nth-child(3) { animation-delay: 0.15s; }
.aut-template-card:nth-child(4) { animation-delay: 0.2s; }
.aut-template-card:nth-child(5) { animation-delay: 0.25s; }
.aut-template-card h4 {
  margin: 0 0 0.25rem 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.aut-template-card .aut-meta {
  color: var(--aut-text-muted);
  font-size: 0.75rem;
  margin: 0.25rem 0 0.5rem 0;
}
.aut-template-card .aut-badge {
  background: var(--aut-border);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.7rem;
}
.aut-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--aut-bg);
  border: 1px solid var(--aut-border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 1rem;
}
.aut-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--aut-text-muted);
  background: var(--aut-bg-subtle);
  font-weight: 600;
}
.aut-table td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--aut-border);
  font-size: 0.85rem;
}
.aut-table tr:hover td {
  background: var(--aut-bg-subtle);
}
.aut-table strong {
  font-weight: 600;
}
.aut-table .aut-muted {
  color: var(--aut-text-muted);
  font-size: 0.75rem;
}
.aut-stat-pill {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  background: var(--aut-bg-subtle);
  border: 1px solid var(--aut-border);
  color: var(--aut-text);
}
.aut-stat-pill.success {
  background: rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.3);
  color: var(--aut-green);
}
.aut-stat-pill.error {
  background: rgba(248, 81, 73, 0.15);
  border-color: rgba(248, 81, 73, 0.3);
  color: var(--aut-red);
}
.aut-stat-pill.neutral {
  background: rgba(110, 118, 129, 0.15);
  border-color: rgba(110, 118, 129, 0.3);
  color: var(--aut-text-muted);
}

.aut-runs-w {
  --ar-bg: var(--bg-card);
  --ar-bg-subtle: var(--bg-subtle);
  --ar-border: var(--border);
  --ar-text: var(--text);
  --ar-text-muted: var(--text-muted);
  --ar-green: #3fb950;
  --ar-red: #f85149;
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  animation: arFadeIn 0.4s ease-out;
}
@keyframes arFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ar-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.ar-hdr h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ar-meta {
  color: var(--ar-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.ar-meta code {
  background: var(--ar-bg-subtle);
  border: 1px solid var(--ar-border);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.8rem;
  color: var(--ar-text);
}
.ar-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ar-bg);
  border: 1px solid var(--ar-border);
  border-radius: 10px;
  overflow: hidden;
}
.ar-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ar-text-muted);
  background: var(--ar-bg-subtle);
  font-weight: 600;
}
.ar-table td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--ar-border);
  font-size: 0.85rem;
}
.ar-table tr:hover td {
  background: var(--ar-bg-subtle);
}
.ar-table code {
  display: block;
  max-height: 100px;
  overflow: auto;
  font-size: 0.75rem;
  background: var(--ar-bg-subtle);
  padding: 0.25rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  line-height: 1.4;
}
.ar-table .ar-error-row {
  color: var(--ar-red);
  font-size: 0.8rem;
  background: rgba(248, 81, 73, 0.1);
}
.ar-stat-pill {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  background: var(--ar-bg-subtle);
  border: 1px solid var(--ar-border);
  color: var(--ar-text);
}
.ar-stat-pill.success {
  background: rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.3);
  color: var(--ar-green);
}
.ar-stat-pill.error {
  background: rgba(248, 81, 73, 0.15);
  border-color: rgba(248, 81, 73, 0.3);
  color: var(--ar-red);
}
.ar-empty {
  text-align: center;
  padding: 2rem;
  color: var(--ar-text-muted);
  font-size: 0.9rem;
}

.ba-w {
    --ba-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ba-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --ba-on: #22c55e;
    --ba-off: #ef4444;
    --ba-warn: #f59e0b;
    --ba-accent: var(--primary, #4a9eff);
    --ba-mute: var(--text-muted);
    font-family: var(--ba-sans);
    letter-spacing: -0.005em;
}
.ba-w h2, .ba-w h3 { font-family: var(--ba-mono); letter-spacing: -0.005em; }

.ba-w .ba-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.ba-w .ba-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.ba-w .ba-section { margin-bottom: 1.5rem; }
.ba-w .ba-section h3 {
    font-family: var(--ba-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ba-mute);
    font-weight: 600; margin-bottom: 0.55rem;
}

.ba-w .ba-pill {
    font-family: var(--ba-mono); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.ba-w .ba-pill-success { background: rgba(34,197,94,0.10); color: var(--ba-on);   border: 1px solid rgba(34,197,94,0.35); }
.ba-w .ba-pill-error   { background: rgba(239,68,68,0.10); color: var(--ba-off);  border: 1px solid rgba(239,68,68,0.35); }
.ba-w .ba-pill-warn    { background: rgba(245,158,11,0.10); color: var(--ba-warn); border: 1px solid rgba(245,158,11,0.35); }
.ba-w .ba-pill-muted   { background: rgba(142,142,147,0.10); color: #8e8e93; border: 1px solid rgba(142,142,147,0.35); }

  .sub { color: #555; font-size: 10pt; margin-bottom: 1.2rem; }
  td.r { text-align: right; }
  .pill { display: inline-block; padding: 1pt 7pt; border-radius: 999px; font-size: 8pt; font-weight: 700;
          border: 1px solid currentColor; }
  .pill-good { color: #2e7d32; }
  .pill-warn { color: #b8860b; }
  .pill-bad  { color: #b71c1c; }
  @media print {
  }
  .actions { margin-bottom: 1rem; }
  .actions button { padding: 6pt 14pt; font-size: 11pt; cursor: pointer; }
  @media print { .actions { display: none; } }

.bd-w {
    --bd-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --bd-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --bd-on: #22c55e;
    --bd-off: #ef4444;
    --bd-warn: #f59e0b;
    --bd-accent: var(--primary, #4a9eff);
    --bd-mute: var(--text-muted);
    font-family: var(--bd-sans);
    letter-spacing: -0.005em;
}
.bd-w h2, .bd-w h3 { font-family: var(--bd-mono); letter-spacing: -0.005em; }

.bd-w .bd-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.bd-w .bd-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.bd-w .bd-pill {
    font-family: var(--bd-mono); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.bd-w .bd-pill-success { background: rgba(34,197,94,0.10); color: var(--bd-on);   border: 1px solid rgba(34,197,94,0.35); }
.bd-w .bd-pill-error   { background: rgba(239,68,68,0.10); color: var(--bd-off);  border: 1px solid rgba(239,68,68,0.35); }
.bd-w .bd-pill-warn    { background: rgba(245,158,11,0.10); color: var(--bd-warn); border: 1px solid rgba(245,158,11,0.35); }
.bd-w .bd-pill-muted   { background: rgba(142,142,147,0.10); color: #8e8e93; border: 1px solid rgba(142,142,147,0.35); }

.bd-w .bd-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.bd-w .bd-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 1rem; text-align: center;
}
.bd-w .bd-stat-num {
    font-size: 2rem; font-weight: 700;
    margin-bottom: 0.25rem;
}
.bd-w .bd-stat-label {
    font-size: 0.85rem; color: var(--text-muted);
}

/* Bundle I (6.76.23): page-local --bo-* now alias canonical tokens. */
.bo-w {
    --bo-mono: var(--font-mono);
    --bo-sans: var(--font-sans);
    --bo-on: var(--success);
    --bo-off: var(--danger);
    --bo-warn: var(--warning);
    --bo-accent: var(--accent);
    --bo-mute: var(--text-muted);
    font-family: var(--bo-sans);
    letter-spacing: -0.005em;
}
.bo-w h2, .bo-w h3, .bo-w h4 { font-family: var(--bo-mono); letter-spacing: -0.005em; }

/* ── Header bar with mono stat pills ─────────────────────────── */
.bo-w .bo-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}
.bo-w .bo-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.bo-w .bo-bar-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.bo-w .bo-stat-pills { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.bo-w .bo-pill {
    font-family: var(--bo-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.bo-w .bo-pill b { font-weight: 700; }
.bo-w .bo-pill .lbl { color: var(--bo-mute); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; }
.bo-w .bo-pill.on   { color: var(--bo-on);   border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.07); }
.bo-w .bo-pill.warn { color: var(--bo-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.bo-w .bo-pill.off  { color: var(--bo-off);  border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.07); }

/* ── Section labels ──────────────────────────────────────────── */
.bo-w .bk-section h3 {
    font-family: var(--bo-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bo-mute);
    font-weight: 600; margin-bottom: 0.55rem;
}

/* ── Endpoint table: mono uppercase header + 9px row padding +
     hairline row dividers + severity left-stripe for stale/failed ── */
.bo-w #bk-table thead th {
    font-family: var(--bo-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bo-mute);
    font-weight: 600;
}
.bo-w #bk-table tbody td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.bo-w #bk-table tbody tr.bk-endpoint-row { border-bottom: 1px solid rgba(255,255,255,0.04); }
.bo-w #bk-table tbody tr.bk-endpoint-row[data-severity="stale"]  { box-shadow: inset 3px 0 0 0 var(--bo-warn); }
.bo-w #bk-table tbody tr.bk-endpoint-row[data-severity="failed"] { box-shadow: inset 3px 0 0 0 var(--bo-off); }

/* ── Status pills: color-coded ─────────────────────────────── */
.bo-w .bk-pill {
    font-family: var(--bo-mono); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.bo-w .bk-pill-success { background: rgba(34,197,94,0.10); color: var(--bo-on);   border: 1px solid rgba(34,197,94,0.35); }
.bo-w .bk-pill-error   { background: rgba(239,68,68,0.10); color: var(--bo-off);  border: 1px solid rgba(239,68,68,0.35); }
.bo-w .bk-pill-running { background: rgba(56,189,248,0.10);color: #38bdf8;        border: 1px solid rgba(56,189,248,0.35); }
.bo-w .bk-pill-pending { background: rgba(245,158,11,0.10);color: var(--bo-warn); border: 1px solid rgba(245,158,11,0.35); }
.bo-w .bk-pill-never   { background: rgba(239,68,68,0.10); color: var(--bo-off);  border: 1px solid rgba(239,68,68,0.35); }
.bo-w .bk-pill-sla     { background: rgba(245,158,11,0.10);color: var(--bo-warn); border: 1px solid rgba(245,158,11,0.35); }

/* ── Pulsing red dot for machines with no recent backup ──── */
.bo-w .bo-nodot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--bo-off); margin-right: 5px; vertical-align: middle;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.55);
    animation: bo-pulse 2.4s ease-out infinite;
}
@keyframes bo-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* ── Staggered row fade-in (first 8 rows) ───────────────── */
@keyframes bo-rowin { from { opacity:0; transform: translateY(2px); } to { opacity:1; transform:none; } }
.bo-w #bk-table tbody tr.bk-endpoint-row { animation: bo-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(1)  { animation-delay: 0ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(3)  { animation-delay: 50ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(5)  { animation-delay: 100ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(7)  { animation-delay: 150ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(9)  { animation-delay: 200ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(11) { animation-delay: 250ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(13) { animation-delay: 300ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(15) { animation-delay: 350ms; }
.bo-w #bk-table tbody tr.bk-endpoint-row:nth-of-type(n+17) { animation: none; }

/* Bundle I utility classes for inline-style replacement */
.bo-w .bo-borderless { border:none; }
.bo-w .bk-card .num--accent { color:var(--accent); }
.bo-w .bk-card .num--ok { color:var(--success); }
.bo-w .bk-card .num--bad { color:var(--danger); }
.bo-w .bk-card .num--warn { color:var(--warning); }
.bo-w .bk-card .num--info { color:var(--info); }
.bo-w .bk-card .num--small { font-size:1.1rem; }
.bo-w .bk-card--sla-border { border-color:color-mix(in srgb, var(--danger) 30%, transparent); }
.bo-w .bk-card--ondisk-border { border-color:color-mix(in srgb, var(--info) 30%, transparent); }
.bo-w .bk-health-strip-tweak { margin-bottom:1rem; padding:0.75rem 1rem; }
.bo-w .bk-health-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }
.bo-w .bk-health-h3 { margin:0; font-size:0.95rem; font-weight:var(--weight-semibold); }
.bo-w .bk-health-actions { display:flex; gap:0.5rem; align-items:center; font-size:0.75rem; color:var(--text-muted); }
.bo-w .bk-health-cards { margin-top:0.6rem; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:0.4rem; }
.bo-w .bk-health-loading { color:var(--text-muted); font-size:var(--text-sm); }
.bo-w .bk-sla-spacer { margin-top:0.6rem; }
.bo-w .bk-trend-h3 { margin:0 0 0.5rem; font-size:0.9rem; font-weight:var(--weight-semibold); }
.bo-w .bk-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.75rem; flex-wrap:wrap; gap:0.5rem; }
.bo-w .bk-section-title { margin:0; }
.bo-w .bk-section-actions { display:flex; gap:0.5rem; align-items:center; }
.bo-w .bk-search { max-width:280px; min-width:180px; padding:0.35rem 0.6rem; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:var(--text-sm); }
.bo-w .bk-host-strong { font-weight:var(--weight-semibold); }
.bo-w .bk-progress--mt { margin-top:4px; }
.bo-w .bk-progress-msg { font-size:0.7rem; color:var(--text-muted); margin-top:2px; }
.bo-w .bk-org-cell { font-size:var(--text-sm); }
.bo-w .bk-sla-pill-inline { margin-left:4px; }
.bo-w .bk-status-cell { font-size:var(--text-sm); }
.bo-w .bk-age-line { font-size:0.7rem; color:var(--text-muted); }
.bo-w .bk-mute { color:var(--text-muted); }
.bo-w .bk-snap-count { text-align:center; }
.bo-w .bk-storage-cell { font-size:var(--text-sm); }
.bo-w .bk-storage-num { font-weight:var(--weight-semibold); }
.bo-w .bk-storage-sub { font-size:0.7rem; color:var(--text-muted); }
.bo-w .bk-dedup { font-size:0.7rem; color:var(--success); }
.bo-w .bk-no-stats { font-size:0.7rem; color:var(--text-muted); }
.bo-w .bk-actions-row { display:flex; gap:0.3rem; flex-wrap:wrap; }
.bo-w .bk-snap-drawer-loading { text-align:center; color:var(--text-muted); font-size:var(--text-sm); }
.bo-w .bk-empty { text-align:center; padding:3rem; color:var(--text-muted); }

.bo-w .bk-empty-h1 { font-size:1.1rem; margin-bottom:0.5rem; }
.bo-w .bk-empty-help { font-size:var(--text-sm); }
.bo-w .bk-repo-head { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.25rem; }
.bo-w .bk-repo-help { font-size:0.72rem; color:var(--text-muted); }
.bo-w .bk-repo-name { font-weight:var(--weight-semibold); }
.bo-w .bk-repo-link { color:var(--text); text-decoration:none; }
.bo-w .bk-repo-path { font-size:var(--text-sm); }
.bo-w .bk-repo-progress { margin-top:3px; }
.bo-w .bk-repo-pct { font-size:0.68rem; color:var(--text-muted); }
.bo-w .bk-repo-actions { white-space:nowrap; text-align:right; }
.bo-w .bk-open-btn { font-size:0.7rem; padding:3px 8px; text-decoration:none; }
.bo-w .bk-empty-mute { color:var(--text-muted); font-size:var(--text-sm); }
.bo-w .bk-grid-2 { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:1rem; }
.bo-w .bk-tile { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem; }
.bo-w .bk-tile-h4 { margin:0 0 0.75rem; font-size:0.9rem; }
.bo-w .bk-input-full { width:100%; margin-bottom:0.5rem; padding:0.35rem; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--surface-input); color:var(--text); font-size:var(--text-sm); box-sizing:border-box; }
.bo-w .bk-btn-full { width:100%; }
.bo-w .bk-snap-host { font-weight:var(--weight-semibold); }
.bo-w .bk-snap-org { font-size:var(--text-sm); }
.bo-w .bk-modal-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.bo-w .bk-modal-h3 { margin:0; }
.bo-w .bk-modal-close { padding:0.2rem 0.5rem; }
.bo-w .bk-cfg-presets { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.5rem; }
.bo-w .bk-cfg-preset-label { display:flex; align-items:center; gap:0.3rem; padding:0.25rem 0.5rem; background:var(--surface-input); border:1px solid var(--border); border-radius:var(--radius-md); font-size:var(--text-sm); cursor:pointer; }
.bo-w .bk-cfg-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.bo-w .bk-cfg-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.75rem; margin-top:0.5rem; }
.bo-w .bk-cfg-row { display:flex; gap:0.5rem; margin-top:1rem; }
.bo-w .bk-cfg-spacer { flex:1; }
.bo-w .bk-cfg-inline-label { display:flex; align-items:center; gap:0.3rem; font-size:var(--text-sm); }
.bo-w .bk-cfg-retry-label { font-size:var(--text-sm); }
.bo-w .bk-cfg-retry-input { width:50px; }
.bo-w .bk-cfg-actions { text-align:right; margin-top:1rem; }
.bo-w .bk-error-card { max-width:600px; }
.bo-w .bk-error-h3 { margin-top:0; color:var(--danger); }
.bo-w .bk-error-pre { background:var(--surface-input); border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem; font-size:var(--text-sm); white-space:pre-wrap; max-height:400px; overflow:auto; }
.bo-w .bk-error-actions { text-align:right; margin-top:1rem; }

/* ── Bundle V: tabbed reorg (6.76.75) ──────────────────────── */
.bo-w .bk-tabs {
    display: flex; gap: 2px; align-items: stretch; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin: 0.6rem 0 1rem;
}
.bo-w .bk-tab {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted);
    font-family: var(--bo-mono);
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 600;
    padding: 0.55rem 0.95rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.bo-w .bk-tab:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.bo-w .bk-tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.bo-w .bk-panel { animation: bo-rowin 0.25s cubic-bezier(0.2,0.7,0.2,1); }

/* Apple-inspired design tokens */
.bk-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:0.6rem; margin-bottom:1.5rem; }
.bk-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
    padding:0.8rem 1rem; text-align:center; transition:transform 0.2s, box-shadow 0.2s;
    opacity:0; animation:bkFadeIn 0.4s ease forwards;
}
.bk-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.15); }
@keyframes bkFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.bk-card .num { font-size:1.6rem; font-weight:700; letter-spacing:-0.02em; }
.bk-card .label { font-size:0.72rem; color:var(--text-muted); margin-top:0.15rem; text-transform:uppercase; letter-spacing:0.03em; }
.bk-section { margin-bottom:2rem; }
.bk-section h3 { font-size:1rem; font-weight:600; margin-bottom:0.75rem; letter-spacing:-0.01em; }

/* Status pills */
.bk-pill { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.6rem; border-radius:20px; font-size:0.72rem; font-weight:600; }
.bk-pill-success { background:rgba(52,199,89,0.12); color:#34c759; }
.bk-pill-error { background:rgba(255,59,48,0.12); color:#ff3b30; }
.bk-pill-running { background:rgba(0,122,255,0.12); color:#007aff; }
.bk-pill-pending { background:rgba(255,149,0,0.12); color:#ff9500; }
.bk-pill-never { background:rgba(142,142,147,0.12); color:#8e8e93; }
.bk-pill-sla { background:rgba(255,59,48,0.08); color:#ff3b30; border:1px solid rgba(255,59,48,0.2); }

/* Progress bar */
.bk-progress { width:100%; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.bk-progress-fill { height:100%; background:linear-gradient(90deg, #007aff, #5ac8fa); border-radius:2px; transition:width 0.5s ease; }
.bk-progress-error .bk-progress-fill { background:linear-gradient(90deg, #ff3b30, #ff6961); }

/* Endpoint row with progress */
.bk-endpoint-row { transition:background 0.2s; }
.bk-endpoint-row:hover { background:rgba(0,122,255,0.04); }
.bk-endpoint-row.running { background:rgba(0,122,255,0.03); }

/* Config modal */
.bk-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; justify-content:center; align-items:center; backdrop-filter:blur(4px); }
.bk-modal-content { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; max-width:700px; width:95%; max-height:85vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.bk-modal-content h3 { margin-top:0; font-size:1.1rem; }
.bk-modal-content label { display:block; font-size:0.82rem; font-weight:600; margin-bottom:0.25rem; margin-top:0.75rem; }
.bk-modal-content input, .bk-modal-content select, .bk-modal-content textarea {
    width:100%; padding:0.4rem 0.6rem; border:1px solid var(--border); border-radius:8px;
    background:var(--bg); color:var(--text-color); font-size:0.85rem; box-sizing:border-box;
}
.bk-modal-content textarea { min-height:60px; font-family:monospace; }

/* Toggle switch */
.bk-toggle { position:relative; display:inline-block; width:38px; height:22px; }
.bk-toggle input { opacity:0; width:0; height:0; }
.bk-toggle .slider { position:absolute; cursor:pointer; inset:0; background:#48484a; border-radius:22px; transition:0.3s; }
.bk-toggle .slider::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; }
.bk-toggle input:checked + .slider { background:#34c759; }
.bk-toggle input:checked + .slider::before { transform:translateX(16px); }

/* Action error tooltip */
.bk-error-hint { cursor:pointer; position:relative; }
.bk-error-hint .hint-popup {
    display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:0.6rem 0.8rem;
    font-size:0.78rem; white-space:normal; max-width:360px; min-width:200px; z-index:100;
    box-shadow:0 8px 24px rgba(0,0,0,0.2); text-align:left;
}
.bk-error-hint:hover .hint-popup { display:block; }
.bk-error-hint .hint-popup .hint-action { color:#ff9500; font-weight:600; margin-top:0.3rem; }

/* Snapshot drawer */
.bk-drawer { display:none; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:1rem; margin:0.5rem 0; }

/* Chart container */
.bk-chart-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1rem; margin-bottom:1.5rem; }

@media (max-width: 768px) {
    .bk-grid { grid-template-columns: repeat(3, 1fr); }
    .hide-mobile { display: none !important; }
    .bk-modal-content { padding: 1rem; }
}

.bs-w {
    --bs-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --bs-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --bs-on: #22c55e;
    --bs-off: #ef4444;
    --bs-warn: #f59e0b;
    --bs-accent: var(--primary, #4a9eff);
    --bs-mute: var(--text-muted);
    font-family: var(--bs-sans);
    letter-spacing: -0.005em;
}
.bs-w h2, .bs-w h3 { font-family: var(--bs-mono); letter-spacing: -0.005em; }

.bs-w .bs-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.bs-w .bs-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.bs-w .bs-pill {
    font-family: var(--bs-mono); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.bs-w .bs-pill-success { background: rgba(34,197,94,0.10); color: var(--bs-on);   border: 1px solid rgba(34,197,94,0.35); }
.bs-w .bs-pill-error   { background: rgba(239,68,68,0.10); color: var(--bs-off);  border: 1px solid rgba(239,68,68,0.35); }
.bs-w .bs-pill-warn    { background: rgba(245,158,11,0.10); color: var(--bs-warn); border: 1px solid rgba(245,158,11,0.35); }
.bs-w .bs-pill-muted   { background: rgba(142,142,147,0.10); color: #8e8e93; border: 1px solid rgba(142,142,147,0.35); }

.btd-section { margin-bottom: 1.5rem; }
.btd-section h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.btd-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 1rem 1.1rem;
}
.btd-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.6rem; margin-bottom: 1rem;
}
.btd-stat { text-align: center; padding: 0.7rem 0.8rem; }
.btd-stat .num { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.btd-stat .label { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; text-transform: uppercase; letter-spacing: 0.03em; }

.btd-kv { display: grid; grid-template-columns: 160px 1fr; gap: 0.4rem 1rem; font-size: 0.85rem; }
.btd-kv .k { color: var(--text-muted); }
.btd-kv .v code { font-size: 0.8rem; word-break: break-all; }

.btd-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.15rem 0.55rem; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
}
.btd-pill-success { background: rgba(52,199,89,0.12); color: #34c759; }
.btd-pill-error { background: rgba(255,59,48,0.12); color: #ff3b30; }
.btd-pill-degraded { background: rgba(255,149,0,0.12); color: #ff9500; }
.btd-pill-muted { background: rgba(142,142,147,0.12); color: #8e8e93; }

.bte-w {
    --bte-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --bte-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --bte-on: #22c55e;
    --bte-off: #ef4444;
    --bte-warn: #f59e0b;
    --bte-accent: var(--primary, #4a9eff);
    --bte-mute: var(--text-muted);
    font-family: var(--bte-sans);
    letter-spacing: -0.005em;
}
.bte-w h2, .bte-w h3 { font-family: var(--bte-mono); letter-spacing: -0.005em; }

.bte-w .bte-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.bte-w .bte-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }

.bte-w .bte-pill {
    font-family: var(--bte-mono); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.bte-w .bte-pill-success { background: rgba(34,197,94,0.10); color: var(--bte-on);   border: 1px solid rgba(34,197,94,0.35); }
.bte-w .bte-pill-error   { background: rgba(239,68,68,0.10); color: var(--bte-off);  border: 1px solid rgba(239,68,68,0.35); }
.bte-w .bte-pill-warn    { background: rgba(245,158,11,0.10); color: var(--bte-warn); border: 1px solid rgba(245,158,11,0.35); }
.bte-w .bte-pill-info    { background: rgba(74,158,255,0.10); color: #4a9eff;     border: 1px solid rgba(74,158,255,0.35); }
.bte-w .bte-pill-muted   { background: rgba(142,142,147,0.10); color: #8e8e93;     border: 1px solid rgba(142,142,147,0.35); }

.bte-w .bte-stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem; margin-top: 1rem;
}
.bte-w .bte-stat-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.85rem 1rem;
}
.bte-w .bte-stat-label {
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
}
.bte-w .bte-stat-value {
    font-size: 1.4rem; font-weight: 700; margin-top: 0.25rem;
}

.bt-w {
    --bt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --bt-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --bt-on: #22c55e;
    --bt-off: #ef4444;
    --bt-warn: #f59e0b;
    --bt-accent: var(--primary, #4a9eff);
    --bt-mute: var(--text-muted);
    font-family: var(--bt-sans);
    letter-spacing: -0.005em;
}
.bt-w h2, .bt-w h3, .bt-w h4 { font-family: var(--bt-mono); letter-spacing: -0.005em; }

/* Header bar */
.bt-w .bt-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
}
.bt-w .bt-h1 { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.bt-w .bt-bar-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Section labels */
.bt-w .bt-section h3 {
    font-family: var(--bt-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--bt-mute);
    font-weight: 600; margin-bottom: 0.55rem;
}

/* Target cards grid */
.bt-w .bt-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.bt-w .bt-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 1.25rem;
    transition: transform 0.2s, box-shadow 0.2s;
    opacity: 0; animation: btFadeIn 0.4s ease forwards;
}
.bt-w .bt-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
@keyframes btFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Status pills */
.bt-w .bt-pill {
    font-family: var(--bt-mono); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.bt-w .bt-pill-success { background: rgba(34,197,94,0.10); color: var(--bt-on);   border: 1px solid rgba(34,197,94,0.35); }
.bt-w .bt-pill-error   { background: rgba(239,68,68,0.10); color: var(--bt-off);  border: 1px solid rgba(239,68,68,0.35); }
.bt-w .bt-pill-warn    { background: rgba(245,158,11,0.10); color: var(--bt-warn); border: 1px solid rgba(245,158,11,0.35); }
.bt-w .bt-pill-muted   { background: rgba(142,142,147,0.10); color: #8e8e93; border: 1px solid rgba(142,142,147,0.35); }

/* Type selection cards in modal */
.bt-w .bt-type-card {
    cursor: pointer; padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--border); border-radius: 8px;
    background: var(--bg-input);
    transition: border-color 0.12s, background 0.12s;
}
.bt-w .bt-type-card:hover { border-color: var(--bt-accent); }
.bt-w .bt-type-card.bt-type-active {
    border-color: var(--bt-accent);
    background: rgba(74, 158, 255, 0.06);
}

/* Staggered card fade-in */
.bt-w .bt-card:nth-of-type(1)  { animation-delay: 0ms; }
.bt-w .bt-card:nth-of-type(2)  { animation-delay: 50ms; }
.bt-w .bt-card:nth-of-type(3)  { animation-delay: 100ms; }
.bt-w .bt-card:nth-of-type(4)  { animation-delay: 150ms; }
.bt-w .bt-card:nth-of-type(5)  { animation-delay: 200ms; }
.bt-w .bt-card:nth-of-type(n+6) { animation-delay: 250ms; }

.bk-stats { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:0.6rem; margin-bottom:1.5rem; }
.bk-stats .card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
    padding:0.65rem 0.8rem; text-align:center; transition:transform 0.2s;
}
.bk-stats .card:hover { transform:translateY(-1px); }
.bk-stats .card .num { font-size:1.3rem; font-weight:700; letter-spacing:-0.02em; }
.bk-stats .card .label { font-size:0.72rem; color:var(--text-muted); margin-top:0.1rem; text-transform:uppercase; letter-spacing:0.03em; }
.bk-pill { display:inline-flex; align-items:center; gap:0.25rem; padding:0.15rem 0.5rem; border-radius:16px; font-size:0.72rem; font-weight:600; }
.bk-pill-success { background:rgba(52,199,89,0.12); color:#34c759; }
.bk-pill-error { background:rgba(255,59,48,0.12); color:#ff3b30; }
.bk-pill-running { background:rgba(0,122,255,0.12); color:#007aff; }
.bk-pill-never { background:rgba(142,142,147,0.12); color:#8e8e93; }
.bk-progress { width:100%; height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.bk-progress-fill { height:100%; background:linear-gradient(90deg, #007aff, #5ac8fa); border-radius:2px; transition:width 0.5s ease; }
.bk-toggle { position:relative; display:inline-block; width:36px; height:20px; }
.bk-toggle input { opacity:0; width:0; height:0; }
.bk-toggle .slider { position:absolute; cursor:pointer; inset:0; background:#48484a; border-radius:20px; transition:0.3s; }
.bk-toggle .slider::before { content:''; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; }
.bk-toggle input:checked + .slider { background:#34c759; }
.bk-toggle input:checked + .slider::before { transform:translateX(16px); }
.error-tooltip { position:relative; cursor:help; }
.error-tooltip:hover::after {
    content:attr(data-error); position:absolute; bottom:100%; left:0; background:#1a1a2e;
    color:#ff3b30; padding:0.4rem 0.6rem; border-radius:8px; font-size:0.72rem; white-space:pre-wrap;
    max-width:350px; z-index:100; border:1px solid #30363d; box-shadow:0 4px 12px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
    .bk-stats { grid-template-columns: repeat(3, 1fr); }
    .detail-table { font-size: 0.8rem; }
    .detail-table th, .detail-table td { padding: 0.4rem; }
    .hide-mobile { display: none; }
}

.bk-endpoint-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:0.85rem; margin-bottom:1.25rem; }
.bk-endpoint-card {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:0.85rem 1rem;
    display:flex;
    flex-direction:column;
    gap:0.6rem;
    transition:border-color 0.15s ease, transform 0.1s ease;
}
.bk-endpoint-card:hover { border-color:var(--primary); }
.bk-ep-header { display:flex; align-items:flex-start; justify-content:space-between; gap:0.5rem; }
.bk-ep-host { font-weight:700; font-size:0.95rem; color:var(--text); letter-spacing:-0.01em; }
.bk-ep-host a { color:inherit; text-decoration:none; }
.bk-ep-host a:hover { color:var(--primary); }
.bk-ep-meta { font-size:0.72rem; color:var(--text-muted); margin-top:0.1rem; }
.bk-ep-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:0.3rem; font-size:0.72rem; }
.bk-ep-stats > div { background:var(--bg-input); border-radius:6px; padding:0.35rem 0.4rem; text-align:center; }
.bk-ep-stats .v { font-weight:700; font-size:0.85rem; color:var(--text); display:block; }
.bk-ep-stats .k { color:var(--text-muted); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.04em; }
.bk-ep-controls { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; }
.bk-ep-controls select { width:100%; font-size:0.75rem; padding:0.35rem 0.45rem; background:var(--bg-input); border:1px solid var(--border); border-radius:6px; color:var(--text); }
.bk-ep-controls label { font-size:0.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.15rem; display:block; }
.bk-ep-actions { display:flex; gap:0.3rem; flex-wrap:wrap; padding-top:0.25rem; border-top:1px solid var(--border); align-items:center; }
.bk-ep-actions .btn { font-size:0.72rem; padding:0.3rem 0.6rem; }
.bk-ep-actions .bk-toggle { margin-left:auto; }
.bk-ep-progress { margin-top:0.3rem; }
.bk-ep-progress .bk-progress-fill { background:linear-gradient(90deg, #58a6ff, #79c0ff); }

/* ── Billable Time Picker (scoped under .btp) ──────────────────────── */
.btp {
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--sans);
    color: var(--text);
    letter-spacing: -0.005em;
}
.btp .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.btp h2 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}
.btp .summary-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.btp .tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.btp .tile .tile-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.btp .tile .tile-value {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
}
.btp .filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.btp .filter-bar label {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.btp .filter-bar select,
.btp .filter-bar input[type="date"] {
    font-family: var(--mono);
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    color: var(--text);
    min-width: 9rem;
}
.btp .bulk-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}
.btp .bulk-bar .bulk-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 0.25rem;
}
.btp .ticket-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.btp .ticket-card .card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.btp .ticket-card .card-head .tnum {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary, #4a9eff);
    white-space: nowrap;
}
.btp .ticket-card .card-head .tsubj {
    font-weight: 600;
    font-size: 0.92rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.btp .ticket-card .card-head .ttotals {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.btp .entry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.btp .entry-table th {
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.45rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.btp .entry-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.btp .entry-table tr:last-child td {
    border-bottom: none;
}
.btp .entry-table tr:hover td {
    background: color-mix(in srgb, var(--primary, #4a9eff) 5%, transparent);
}
.btp .mono { font-family: var(--mono); }
.btp .action-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border-top: 2px solid var(--border);
    padding: 0.85rem 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}
.btp .action-bar .sel-count {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-right: auto;
}
.btp .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.85rem;
}
@media (max-width: 600px) {
    .btp .summary-tiles { grid-template-columns: 1fr; }
}

.bil-w {
    --bil-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --bil-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --bil-on: #22c55e;
    --bil-off: #ef4444;
    --bil-warn: #f59e0b;
    --bil-accent: var(--primary, #4a9eff);
    --bil-mute: var(--text-muted);
    font-family: var(--bil-sans);
    letter-spacing: -0.005em;
}

/* ── Compact mono header bar ────────────────────────────────── */
.bil-w .bil-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.bil-w .bil-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}

/* ── Stat pills ──────────────────────────────────────────────── */
.bil-w .bil-stats {
    display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.bil-w .bil-pill {
    font-family: var(--bil-mono); font-size: 0.72rem; padding: 5px 10px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.bil-w .bil-pill b { font-weight: 700; font-size: 0.85rem; }
.bil-w .bil-pill.draft b { color: var(--bil-mute); }
.bil-w .bil-pill.approved b { color: var(--bil-warn); }
.bil-w .bil-pill.invoiced b { color: var(--bil-on); }

/* ── Card & form ─────────────────────────────────────────────── */
.bil-w .bil-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem;
    margin-bottom: 0.75rem;
}
.bil-w .bil-card h4 {
    margin: 0 0 0.65rem 0; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--bil-mute); font-weight: 600;
}
.bil-w .bil-form-row {
    display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap;
}
.bil-w .bil-form-group label {
    display: block; font-size: 0.7rem; color: var(--bil-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.bil-w .bil-form-group select,
.bil-w .bil-form-group input {
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); padding: 0.4rem 0.6rem;
    border-radius: var(--radius); font-size: 0.85rem;
}

/* ── Table ───────────────────────────────────────────────────── */
.bil-w .bil-table {
    width: 100%; border-collapse: collapse;
}
.bil-w .bil-table th {
    text-align: left; font-size: 0.7rem; color: var(--bil-mute);
    padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.bil-w .bil-table td {
    padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.bil-w .bil-table .mono { font-family: var(--bil-mono); }
.bil-w .bil-table .money { font-family: var(--bil-mono); text-align: right; }
.bil-w .bil-table .badge {
    font-family: var(--bil-mono); font-size: 0.7rem;
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.bil-w .bil-table .badge-success { background: rgba(34,197,94,0.12); color: var(--bil-on); }
.bil-w .bil-table .badge-warning { background: rgba(245,158,11,0.12); color: var(--bil-warn); }

@keyframes cardFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.br-w {
    --br-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --br-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --br-accent: var(--primary, #4a9eff);
    --br-mute: var(--text-muted);
    font-family: var(--br-sans);
    letter-spacing: -0.005em;
    animation: br-fade-in 0.4s ease-out;
}

@keyframes br-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.br-w * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────── */
.br-w .br-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.br-w .br-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.br-w .br-hint {
    font-family: var(--br-mono); font-size: 0.66rem;
    color: var(--br-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1rem;
}

/* ── Sections ───────────────────────────────────────────────────── */
.br-w .br-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
}
.br-w .br-section h4 {
    font-size: 0.8rem; font-weight: 600; margin: 0 0 1rem;
    color: var(--br-mute); text-transform: uppercase; letter-spacing: 0.08em;
}

/* ── Grid & fields ──────────────────────────────────────────────── */
.br-w .br-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 900px) {
    .br-w .br-grid { grid-template-columns: 1fr; }
}

.br-w .br-field {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.br-w .br-field label {
    font-size: 0.8rem; font-weight: 500; color: var(--text);
}
.br-w .br-input {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--br-mono); font-size: 0.74rem;
}
.br-w .br-input:focus { outline: none; border-color: var(--br-accent); }

.br-w .br-textarea {
    padding: 0.5rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--br-mono); font-size: 0.75rem; line-height: 1.4;
    resize: vertical;
}
.br-w .br-textarea:focus { outline: none; border-color: var(--br-accent); }

.br-w .br-hint {
    font-size: 0.72rem; color: var(--br-mute); margin-top: 0.25rem;
}

/* ── Color picker ───────────────────────────────────────────────── */
.br-w .br-color-row {
    display: flex; align-items: center; gap: 0.5rem;
}
.br-w .br-color-row input[type="color"] {
    width: 50px; height: 35px; padding: 2px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 4px;
}
.br-w .br-color-row input[type="text"] {
    flex: 1;
}

.br-w .br-preview {
    display: flex; gap: 0.5rem; margin-top: 0.75rem;
}
.br-w .br-swatch {
    width: 80px; height: 30px; border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ── Image preview ──────────────────────────────────────────────── */
.br-w .br-img-preview {
    margin-bottom: 0.5rem;
}
.br-w .br-img-preview img {
    max-height: 40px; border-radius: 4px;
}

.bt-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.9rem; margin:1rem 0; }
.bt-stat { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.bt-stat .label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.bt-stat .value { font-size:1.5rem; font-weight:700; margin-top:0.25rem; }
.bt-stat.ok .value { color:#27ae60; }
.bt-stat.fail .value { color:#e74c3c; }

.bt-banner { padding:0.75rem 1rem; border-radius:8px; margin:0.75rem 0; font-size:0.85rem; }
.bt-banner.warn { background:rgba(245,158,11,0.10); border:1px solid rgba(245,158,11,0.30); color:#b45309; }
.bt-banner.ok { background:rgba(39,174,96,0.08); border:1px solid rgba(39,174,96,0.30); color:#1f7a3a; }

.bt-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.bt-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.bt-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.bt-table .mono { font-family:var(--font-mono, monospace); font-size:0.8rem; color:var(--text-muted); }
.bt-badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-size:0.72rem;
             font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.bt-badge.pass { background:rgba(39,174,96,0.15); color:#27ae60; }
.bt-badge.fail, .bt-badge.error { background:rgba(231,76,60,0.15); color:#e74c3c; }
.bt-badge.running { background:rgba(52,152,219,0.15); color:#2980b9; }
.bt-badge.idle { background:rgba(127,127,127,0.15); color:var(--text-muted); }

.bt-form { margin-top:1.5rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px;
            background:var(--bg-2, var(--bg)); }
.bt-form summary { cursor:pointer; font-weight:600; font-size:0.95rem; padding:0.25rem 0; }
.bt-form .grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.85rem; margin-top:0.85rem; }
.bt-form label { display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:0.25rem; }
.bt-form input[type="text"], .bt-form input[type="number"], .bt-form select, .bt-form textarea {
    width:100%; padding:0.45rem 0.6rem; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text); font-size:0.85rem;
}
.bt-form textarea { font-family:var(--font-mono, monospace); min-height:80px; }
.bt-form .full { grid-column:1 / -1; }
.bt-form .actions { margin-top:0.85rem; display:flex; gap:0.6rem; }

.bt-actions { display:flex; gap:0.4rem; flex-wrap:wrap; }
.bt-actions form { display:inline; }

.bt-form { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px;
            background:var(--bg-2, var(--bg)); }
.bt-form .grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.85rem; }
.bt-form label { display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:0.25rem; }
.bt-form input[type="text"], .bt-form input[type="number"], .bt-form select, .bt-form textarea {
    width:100%; padding:0.45rem 0.6rem; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text); font-size:0.85rem;
}
.bt-form textarea { font-family:var(--font-mono, monospace); min-height:80px; }
.bt-form textarea.code { min-height:240px; }
.bt-form .full { grid-column:1 / -1; }
.bt-form .actions { margin-top:0.85rem; display:flex; gap:0.6rem; flex-wrap:wrap; }

.bt-runs { width:100%; border-collapse:collapse; font-size:0.82rem; margin-top:1rem; }
.bt-runs th { text-align:left; padding:0.45rem 0.65rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.bt-runs td { padding:0.4rem 0.65rem; border-bottom:1px solid var(--border); vertical-align:top; }
.bt-runs .mono { font-family:var(--font-mono, monospace); }
.bt-badge { display:inline-block; padding:0.1rem 0.5rem; border-radius:999px; font-size:0.7rem;
             font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.bt-badge.pass { background:rgba(39,174,96,0.15); color:#27ae60; }
.bt-badge.fail, .bt-badge.error { background:rgba(231,76,60,0.15); color:#e74c3c; }
.bt-badge.running { background:rgba(52,152,219,0.15); color:#2980b9; }

.bt-thumb { width:120px; height:auto; border:1px solid var(--border); border-radius:4px; }
.bt-analysis { font-size:0.8rem; color:var(--text-muted); white-space:pre-wrap; max-width:480px; }
.bt-error { font-size:0.78rem; color:#e74c3c; white-space:pre-wrap; max-width:480px;
            font-family:var(--font-mono, monospace); }

/* 7.08.61: stack the qty/amount/year row on phones so each field gets
   a full-width touch target instead of being squished to ~90px. */
@media (max-width: 520px) {
  .bp-three-col { grid-template-columns: 1fr !important; }
}

/* 7.08.62: mobile pass — Category / Qty hide below 640px so Date /
   Vendor / Amount / Actions fit a phone screen. Receipt icon stays
   so receivers can confirm-at-a-glance which rows have backup docs. */
@media (max-width: 640px) {
  .bpl-hide-mobile { display: none; }
}

/* ── P3-7: token-driven calendar styling ─────────────────────────── */
.cal-w { font-family: var(--font-sans); }
.cal-w h1, .cal-w h2, .cal-w h3 { font-family: var(--font-mono); letter-spacing: -0.005em; }

.cal-w .cal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem 1rem 1rem;
}

.cal-w .cal-toolbar {
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.6rem;
}
.cal-w .cal-nav { display: flex; gap: 0.4rem; align-items: center; }
.cal-w .cal-title {
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.01em; margin-left: 0.5rem; color: var(--text);
}
.cal-w .cal-views { display: flex; gap: 0.25rem; }
.cal-w .cal-view-btn.active {
  background: var(--accent); color: var(--accent-on, #fff);
  border-color: var(--accent);
}

.cal-w .cal-filters {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  padding: 0.5rem 0; margin-bottom: 0.6rem; font-size: 0.85rem;
}
.cal-w .cal-flag { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-muted); }
.cal-w .cal-select {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.25rem 0.5rem; font-size: 0.8rem;
}
.cal-w .cal-source-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* v6.87.406: make filterable-select fit the calendar filter bar */
.cal-w .cal-filters > .sk-filter-select { min-width: 200px; font-size: 0.85rem; }
.cal-w .cal-filters > .sk-filter-select > .sk-filter-select-button {
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.25rem 0.5rem; font-size: 0.8rem;
}
.cal-w .cal-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; user-select: none; font-size: 0.75rem;
  color: var(--text-muted);
}
.cal-w .cal-chip-dot {
  display: inline-block; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; background: var(--chip, #888);
}

.cal-w .cal-canvas {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-height: 65vh;
  overflow: hidden;
}

/* Month grid */
.cal-w .cal-month { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-w .cal-month-head {
  font-family: var(--font-mono);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.45rem 0.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  text-align: right; color: var(--text-muted);
}
.cal-w .cal-month-cell {
  min-height: 96px; padding: 0.3rem 0.4rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  background: var(--bg-card);
}
.cal-w .cal-month-cell:nth-child(7n) { border-right: none; }
.cal-w .cal-month-cell.other-month { background: var(--surface); color: var(--text-muted); }
.cal-w .cal-month-cell.is-today { background: rgba(56,132,255,0.08); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-w .cal-day-num {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--text-muted); float: right;
}
.cal-w .cal-evt {
  display: block; font-size: 0.7rem; padding: 0.12rem 0.36rem;
  margin: 0.12rem 0; border-radius: 4px; color: #fff;
  cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-decoration: none;
}
.cal-w .cal-evt[draggable="true"] { cursor: grab; }
.cal-w .cal-evt[draggable="false"] { opacity: 0.92; cursor: pointer; }
.cal-w .cal-evt[draggable="false"]:hover::after { content: " 🔒"; }
.cal-w .cal-overflow {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--text-muted); letter-spacing: 0.04em;
}

/* Week / Day timeline */
.cal-w .cal-time-grid { display: grid; grid-template-columns: 60px repeat(var(--cols,7), 1fr); }
.cal-w .cal-time-grid .cal-time-head {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4rem; border-bottom: 1px solid var(--border);
  background: var(--surface); text-align: center;
  color: var(--text-muted);
}
.cal-w .cal-time-grid .cal-hour-label {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--text-muted); padding: 2px 4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border); height: 28px;
}
.cal-w .cal-time-grid .cal-hour-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  height: 28px; position: relative;
  background: var(--bg-card);
}
.cal-w .cal-time-grid .cal-hour-cell:nth-last-child(1) { border-right: none; }
.cal-w .cal-time-evt {
  position: absolute; left: 2px; right: 2px;
  padding: 1px 4px; font-size: 0.7rem; color: #fff;
  border-radius: 4px; cursor: pointer; overflow: hidden;
  text-decoration: none;
}

/* Agenda */
.cal-w .cal-agenda { padding: 0.6rem 1rem; }
.cal-w .cal-agenda-row {
  display: grid; grid-template-columns: 180px 1fr; gap: 0.75rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border);
  align-items: center;
}
.cal-w .cal-agenda-when {
  font-family: var(--font-mono); color: var(--text-muted);
  font-size: 0.78rem;
}
.cal-w .cal-agenda-evt a { color: var(--text); text-decoration: none; }
.cal-w .cal-agenda-evt a:hover { color: var(--accent); }
.cal-w .cal-agenda-dot {
  display: inline-block; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; margin-right: 0.4rem; vertical-align: middle;
}

/* Dialog */
.cal-dlg {
  padding: 1rem 1.25rem;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  min-width: 360px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.cal-dlg::backdrop { background: rgba(0,0,0,0.45); }
.cal-dlg label { display: block; margin: 0.55rem 0; font-size: 0.85rem; color: var(--text-muted); }
.cal-dlg label input, .cal-dlg label select, .cal-dlg label textarea {
  width: 100%; box-sizing: border-box; padding: 0.4rem 0.5rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 0.85rem;
}
.cal-dlg menu { display: flex; gap: 0.5rem; justify-content: flex-end; padding: 0; margin: 0.85rem 0 0; }

.cam-w {
  --cam-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --cam-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --cam-bg-primary: oklch(0.15 0 0);
  --cam-bg-secondary: oklch(0.18 0.005 240);
  --cam-bg-tertiary: oklch(0.22 0.008 250);
  --cam-text-primary: oklch(0.95 0.005 240);
  --cam-text-secondary: oklch(0.70 0.01 240);
  --cam-border: oklch(0.30 0.01 240);
  --cam-success: oklch(0.65 0.15 145);
  --cam-danger: oklch(0.60 0.18 25);
  --cam-warning: oklch(0.75 0.12 85);
  --cam-info: oklch(0.65 0.15 240);
  --cam-accent: oklch(0.70 0.18 280);
  --cam-radius: 8px;
  --cam-transition: 0.2s ease;
}
.cam-w * { font-family: var(--cam-font-sans); }
.cam-w code,
.cam-w .mono { font-family: var(--cam-font-mono); }
.cam-w {
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cam-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.cam-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cam-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
.cam-actions {
  display: flex;
  gap: 0.5rem;
}
.cam-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--cam-bg-secondary);
  border: 1px solid var(--cam-border);
  border-radius: var(--cam-radius);
  color: var(--cam-text-primary);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--cam-transition);
  cursor: pointer;
}
.cam-btn:hover {
  background: var(--cam-bg-tertiary);
  border-color: var(--cam-accent);
}
.cam-btn.primary {
  background: var(--cam-accent);
  border-color: var(--cam-accent);
  color: oklch(0.15 0 0);
}
.cam-btn.primary:hover {
  filter: brightness(1.1);
}
.cam-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cam-text-primary);
  margin-bottom: 0.75rem;
}
.cam-controller-card {
  background: var(--cam-bg-secondary);
  border: 1px solid var(--cam-border);
  border-radius: var(--cam-radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.cam-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.cam-table thead {
  background: var(--cam-bg-tertiary);
}
.cam-table th {
  padding: 0.75rem 0.6rem;
  text-align: left;
  font-weight: 600;
  color: var(--cam-text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cam-table td {
  padding: 0.75rem 0.6rem;
  border-top: 1px solid var(--cam-border);
  color: var(--cam-text-primary);
}
.cam-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
.cam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.cam-card {
  background: var(--cam-bg-secondary);
  border: 1px solid var(--cam-border);
  border-radius: var(--cam-radius);
  overflow: hidden;
  transition: all var(--cam-transition);
  animation: fadeStaggerIn 0.4s ease;
}
.cam-card:hover {
  border-color: var(--cam-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.cam-image-wrapper {
  position: relative;
  background: oklch(0.10 0 0);
  min-height: 180px;
}
.cam-image {
  width: 100%;
  display: block;
  min-height: 180px;
  object-fit: cover;
}
.cam-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--cam-text-secondary);
  font-size: 0.9rem;
}
.cam-content {
  padding: 0.75rem 1rem;
}
.cam-name {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cam-text-primary);
  margin-bottom: 0.4rem;
}
.cam-meta {
  font-size: 0.8rem;
  color: var(--cam-text-secondary);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.cam-meta a {
  color: var(--cam-accent);
  text-decoration: none;
}
.cam-meta a:hover {
  text-decoration: underline;
}
.cam-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--cam-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.3rem;
}
.cam-badge.connected {
  background: rgba(110, 204, 113, 0.15);
  color: var(--cam-success);
  border: 1px solid rgba(110, 204, 113, 0.3);
}
.cam-badge.disconnected {
  background: rgba(231, 76, 60, 0.15);
  color: var(--cam-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}
.cam-actions-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.cam-btn-small {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--cam-accent);
  border: none;
  border-radius: 4px;
  color: oklch(0.15 0 0);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all var(--cam-transition);
  cursor: pointer;
}
.cam-btn-small:hover {
  filter: brightness(1.1);
}
.cam-alert {
  padding: 0.75rem 1rem;
  border-radius: var(--cam-radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.cam-alert.error {
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.4);
  color: var(--cam-danger);
}
.cam-alert.info {
  background: rgba(74, 158, 255, 0.1);
  border: 1px solid rgba(74, 158, 255, 0.3);
  color: var(--cam-info);
}
.cam-empty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: var(--cam-text-secondary);
  font-size: 0.9rem;
  background: var(--cam-bg-secondary);
  border: 1px dashed var(--cam-border);
  border-radius: var(--cam-radius);
}

.detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.detail-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; }
.detail-card h3 { font-size:0.95rem; margin-bottom:0.75rem; color:var(--primary); }
.field-group { margin-bottom:0.75rem; }
.field-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.field-value { font-size:0.9rem; margin-top:0.15rem; white-space:pre-wrap; }
.badge-draft { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.badge-submitted { background:rgba(52,152,219,0.15); color:#3498db; }
.badge-approved { background:rgba(46,204,113,0.15); color:#2ecc71; }
.badge-scheduled { background:rgba(155,89,182,0.15); color:#9b59b6; }
.badge-implementing { background:rgba(241,196,15,0.15); color:#f1c40f; }
.badge-implemented { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-failed { background:rgba(231,76,60,0.15); color:#e74c3c; }
.badge-rolled_back { background:rgba(230,126,34,0.15); color:#e67e22; }
.badge-closed { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.risk-low { color:#46a758; }
.risk-medium { color:#f1c40f; }
.risk-high { color:#e67e22; }
.risk-critical { color:#e74c3c; }
.action-bar { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; }

.stat-cards { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.8rem 1.2rem; text-align:center; min-width:120px; }
.stat-card .num { font-size:1.4rem; font-weight:700; }
.stat-card .label { font-size:0.75rem; color:var(--text-muted); }
.filter-bar { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.filter-bar select { max-width:180px; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:650px; width:90%; max-height:85vh; overflow-y:auto; }
.badge-draft { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.badge-submitted { background:rgba(52,152,219,0.15); color:#3498db; }
.badge-approved { background:rgba(46,204,113,0.15); color:#2ecc71; }
.badge-scheduled { background:rgba(155,89,182,0.15); color:#9b59b6; }
.badge-implementing { background:rgba(241,196,15,0.15); color:#f1c40f; }
.badge-implemented { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-failed { background:rgba(231,76,60,0.15); color:#e74c3c; }
.badge-rolled_back { background:rgba(230,126,34,0.15); color:#e67e22; }
.badge-closed { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.risk-low { color:#46a758; }
.risk-medium { color:#f1c40f; }
.risk-high { color:#e67e22; }
.risk-critical { color:#e74c3c; }

        .chat-container { width: 100%; max-width: 420px; height: 600px; background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.12); display: flex; flex-direction: column; overflow: hidden; }
        .chat-header { background: linear-gradient(135deg, #0071e3, #0077ED); color: #fff; padding: 1.25rem; text-align: center; }
        .chat-header h2 { font-size: 1.1rem; font-weight: 600; }
        .chat-header p { font-size: 0.8rem; opacity: 0.85; margin-top: 0.25rem; }
        .chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
        .msg { max-width: 80%; padding: 0.6rem 0.9rem; border-radius: 16px; font-size: 0.9rem; line-height: 1.4; word-wrap: break-word; }
        .msg.visitor { align-self: flex-end; background: #0071e3; color: #fff; border-bottom-right-radius: 4px; }
        .msg.tech { align-self: flex-start; background: #e9ecef; color: #1d1d1f; border-bottom-left-radius: 4px; }
        .msg.system { align-self: center; background: none; color: #86868b; font-size: 0.8rem; font-style: italic; }
        .msg .sender { font-size: 0.7rem; opacity: 0.7; margin-bottom: 2px; }
        .chat-input { padding: 0.75rem; border-top: 1px solid #e5e5ea; display: flex; gap: 0.5rem; }
        .chat-input input { flex: 1; border: 1px solid #d2d2d7; border-radius: 20px; padding: 0.5rem 1rem; font-size: 0.9rem; outline: none; }
        .chat-input input:focus { border-color: #0071e3; }
        .chat-input button { background: #0071e3; color: #fff; border: none; border-radius: 20px; padding: 0.5rem 1.2rem; font-size: 0.9rem; cursor: pointer; font-weight: 500; }
        .chat-input button:hover { background: #0077ED; }
        .chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }
        .start-form { padding: 2rem; text-align: center; }
        .start-form input { width: 100%; padding: 0.6rem 1rem; border: 1px solid #d2d2d7; border-radius: 10px; font-size: 0.9rem; margin-bottom: 0.75rem; }
        .start-form button { width: 100%; padding: 0.6rem; background: #0071e3; color: #fff; border: none; border-radius: 10px; font-size: 1rem; cursor: pointer; font-weight: 500; }
        .closed-banner { text-align: center; padding: 1rem; background: #f5f5f7; color: #86868b; font-size: 0.9rem; }

@media print { .no-print { display:none !important; } body { font-size:11pt; } }
.header { display:flex; justify-content:space-between; align-items:center; border-bottom:3px solid #1a73e8; padding-bottom:1rem; margin-bottom:2rem; }
.header h1 { font-size:1.5rem; color:#1a1a2e; }
.header .date { color:#666; font-size:0.85rem; }
.section { margin-bottom:2rem; }
.section h2 { font-size:1.1rem; color:#1a73e8; border-bottom:1px solid #e0e0e0; padding-bottom:0.3rem; margin-bottom:1rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:1rem; }
.card .number { font-size:2rem; font-weight:700; }
.card .label { font-size:0.8rem; color:#666; margin-top:0.25rem; }
.card.green .number { color:#2ecc71; }
.card.yellow .number { color:#f0ad4e; }
.card.red .number { color:#e74c3c; }
.bar { height:8px; background:#e0e0e0; border-radius:4px; overflow:hidden; margin-top:0.5rem; }
.bar-fill { height:100%; border-radius:4px; }
.footer { margin-top:3rem; padding-top:1rem; border-top:1px solid #e0e0e0; font-size:0.8rem; color:#999; display:flex; justify-content:space-between; }
.btn-print { padding:0.5rem 1.5rem; background:#1a73e8; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:0.9rem; }

.cmd-lib-w {
  --cl-bg: var(--bg-card);
  --cl-bg-subtle: var(--bg-subtle);
  --cl-border: var(--border);
  --cl-text: var(--text);
  --cl-text-muted: var(--text-muted);
  --cl-primary: var(--primary);
  --cl-green: #3fb950;
  --cl-red: #f85149;
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  animation: clFadeIn 0.4s ease-out;
}
@keyframes clFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.cl-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.cl-hdr h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cl-hdr p {
  margin: 0.25rem 0 0;
  color: var(--cl-text-muted);
  font-size: 0.85rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.cl-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  border-radius: 10px;
  overflow: hidden;
}
.cl-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cl-text-muted);
  background: var(--cl-bg-subtle);
  font-weight: 600;
}
.cl-table td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--cl-border);
  font-size: 0.85rem;
}
.cl-table tr:hover td {
  background: var(--cl-bg-subtle);
}
.cl-table strong {
  font-weight: 600;
  color: var(--cl-text);
}
.cl-table .cl-muted {
  color: var(--cl-text-muted);
  font-size: 0.78rem;
}
.cl-badge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  background: var(--cl-bg-subtle);
  border: 1px solid var(--cl-border);
  color: var(--cl-text);
}
.cl-badge.global {
  background: rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.3);
  color: var(--cl-green);
}
.cl-badge.destructive {
  background: rgba(248, 81, 73, 0.15);
  border-color: rgba(248, 81, 73, 0.3);
  color: var(--cl-red);
}
.cl-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.cl-modal {
  background: var(--cl-bg);
  border: 1px solid var(--cl-border);
  border-radius: 10px;
  width: min(640px, 95vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cl-modal-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cl-border);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cl-modal-header > div:first-child {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
}
.cl-modal-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.cl-modal-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--cl-text);
}
.cl-modal-input {
  padding: 0.5rem;
  background: var(--cl-bg-subtle);
  border: 1px solid var(--cl-border);
  border-radius: 4px;
  color: var(--cl-text);
  font-size: 0.85rem;
}
.cl-modal-textarea {
  padding: 0.5rem;
  background: var(--cl-bg-subtle);
  border: 1px solid var(--cl-border);
  border-radius: 4px;
  color: var(--cl-text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.82rem;
}
.cl-modal-footer {
  padding: 0.8rem 1.25rem;
  border-top: 1px solid var(--cl-border);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.cl-empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--cl-text-muted);
  font-size: 0.9rem;
}

.log-line { padding: 2px 0; }
.log-ts { color: var(--text-muted, #666); margin-right: 0.5rem; }
.log-lvl { font-weight: 600; margin-right: 0.5rem; min-width: 3.5em; display: inline-block; }
.log-info .log-lvl { color: #4a9eff; }
.log-warn .log-lvl, .log-warning .log-lvl { color: #f0ad4e; }
.log-error .log-lvl { color: #e74c3c; }
.log-success .log-lvl { color: #2ecc71; }
.log-debug .log-lvl { color: #888; }
.badge-yellow { background: #f0ad4e; color: #000; }
.badge-green { background: #2ecc71; color: #000; }
.badge-red { background: #e74c3c; color: #fff; }

.cmp-dsh-w { --cmp-green: #46a758; --cmp-yellow: #f5a623; --cmp-red: #e74c3c; --cmp-bg-subtle: #f8f9fa; --cmp-border-subtle: #e9ecef; }
    .cmp-dsh-w .framework-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1rem; margin-bottom:2rem; }
    .cmp-dsh-w .framework-card {
        background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
        padding:1.25rem; cursor:pointer; transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s;
        opacity:0; animation:cardFadeIn 0.4s ease forwards;
    }
    .cmp-dsh-w .framework-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
    @keyframes cardFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
    .cmp-dsh-w .framework-card h3 { font-family:'Inter Tight', sans-serif; font-size:1rem; font-weight:600; margin-bottom:0.3rem; }
    .cmp-dsh-w .framework-card .fw-desc { font-size:0.8rem; color:var(--text-muted); margin-bottom:0.75rem; line-height:1.4; }
    .cmp-dsh-w .framework-card .fw-stats { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.6rem; }
    .cmp-dsh-w .framework-card .fw-stats span { font-size:0.78rem; color:var(--text-muted); font-family:'JetBrains Mono', monospace; }
    .cmp-dsh-w .framework-card .fw-pct { font-family:'JetBrains Mono', monospace; font-size:1.8rem; font-weight:700; letter-spacing:-0.02em; }
    .cmp-dsh-w .pct-green { color:var(--cmp-green); }
    .cmp-dsh-w .pct-yellow { color:var(--cmp-yellow); }
    .cmp-dsh-w .pct-red { color:var(--cmp-red); }
    .cmp-dsh-w .progress-bar { height:8px; background:var(--cmp-bg-subtle); border-radius:4px; overflow:hidden; }
    .cmp-dsh-w .progress-fill { height:100%; border-radius:4px; transition:width 0.6s ease; }
    .cmp-dsh-w .fill-green { background:var(--cmp-green); }
    .cmp-dsh-w .fill-yellow { background:var(--cmp-yellow); }
    .cmp-dsh-w .fill-red { background:var(--cmp-red); }
    .cmp-dsh-w .controls-section { display:none; margin-bottom:2rem; }
    .cmp-dsh-w .controls-section.active { display:block; }
    .cmp-dsh-w .controls-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
    .cmp-dsh-w .controls-header h3 { font-family:'Inter Tight', sans-serif; font-size:1.1rem; font-weight:600; margin:0; }
    .cmp-dsh-w .controls-header .btn { font-size:0.78rem; }
    .cmp-dsh-w .ctrl-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.72rem; font-weight:600; font-family:'JetBrains Mono', monospace; }
    .cmp-dsh-w .ctrl-pass { background:rgba(70,167,88,0.12); color:var(--cmp-green); }
    .cmp-dsh-w .ctrl-fail { background:rgba(231,76,60,0.12); color:var(--cmp-red); }
    .cmp-dsh-w .ctrl-unknown { background:rgba(139,143,163,0.12); color:#8b8fa3; }
    .cmp-dsh-w .machine-status { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:0.3rem; vertical-align:middle; }
    .cmp-dsh-w .machine-pass { background:var(--cmp-green); }
    .cmp-dsh-w .machine-fail { background:var(--cmp-red); }
    .cmp-dsh-w .machine-unknown { background:#666; }
    @media (prefers-color-scheme: dark) {
        .cmp-dsh-w { --cmp-bg-subtle: #1a1a1a; --cmp-border-subtle: #2d2d2d; }
    }

.cmp-mac-w { --cmp-green: #46a758; --cmp-yellow: #f5a623; --cmp-red: #e74c3c; }
    .cmp-mac-w .score-cell { font-family:'JetBrains Mono', monospace; font-weight:700; letter-spacing:-0.02em; }
    .cmp-mac-w .cat-cell { font-family:'JetBrains Mono', monospace; font-size:0.8rem; }

.cmp-scr-w { --cmp-green: #46a758; --cmp-yellow: #f5a623; --cmp-red: #e74c3c; --cmp-bg-subtle: #f8f9fa; --cmp-blue: #4a9eff; }
    .cmp-scr-w .score-gauge {
        width:160px; height:160px; border-radius:50%; position:relative;
        display:flex; align-items:center; justify-content:center; margin:0 auto 1.5rem;
    }
    .cmp-scr-w .score-gauge .score-value {
        font-family:'JetBrains Mono', monospace; font-size:2.5rem; font-weight:800; z-index:1; letter-spacing:-0.02em;
    }
    .cmp-scr-w .score-gauge svg { position:absolute; top:0; left:0; width:100%; height:100%; transform:rotate(-90deg); }
    .cmp-scr-w .score-gauge circle { fill:none; stroke-width:10; stroke-linecap:round; }
    .cmp-scr-w .score-gauge .bg { stroke:var(--cmp-bg-subtle); }
    .cmp-scr-w .cat-bar { display:flex; align-items:center; gap:1rem; margin-bottom:0.75rem; }
    .cmp-scr-w .cat-bar .cat-label {
        width:100px; font-size:0.85rem; font-weight:600; text-align:right; font-family:'Inter Tight', sans-serif;
    }
    .cmp-scr-w .cat-bar .cat-weight {
        width:40px; font-size:0.75rem; color:var(--text-muted); text-align:right; font-family:'JetBrains Mono', monospace;
    }
    .cmp-scr-w .cat-bar .bar-container {
        flex:1; height:24px; background:var(--cmp-bg-subtle); border-radius:4px; overflow:hidden; position:relative;
    }
    .cmp-scr-w .cat-bar .bar-fill { height:100%; border-radius:4px; transition:width 0.8s ease; }
    .cmp-scr-w .cat-bar .bar-value {
        position:absolute; right:8px; top:50%; transform:translateY(-50%); font-size:0.75rem;
        font-weight:700; font-family:'JetBrains Mono', monospace;
    }
    .cmp-scr-w .trend-section { margin-top:2rem; }
    .cmp-scr-w .compliance-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
    .cmp-scr-w .compliance-grid > div {
        background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem;
        opacity:0; animation:fadeSlideIn 0.5s ease forwards;
    }
    .cmp-scr-w .compliance-grid > div:nth-child(1) { animation-delay:0.05s; }
    .cmp-scr-w .compliance-grid > div:nth-child(2) { animation-delay:0.12s; }
    .cmp-scr-w h3 { font-family:'Inter Tight', sans-serif; font-size:1.1rem; font-weight:600; margin-bottom:1rem; }
    @keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    @media (max-width:768px) { .cmp-scr-w .compliance-grid { grid-template-columns:1fr; } }
    @media (prefers-color-scheme: dark) {
        .cmp-scr-w { --cmp-bg-subtle: #1a1a1a; }
    }

/* Floating help trigger (Bundle 29).
   Pinned to the viewport's bottom-right so the host page's content
   layout is unaffected — pages keep emitting the help.drawer macro
   anywhere on the page and the visual position is fixed. The previous
   inline wrapper divs are no-ops once the trigger goes position:fixed;
   that's intentional so we don't have to edit every page template. */
.sk-help-drawer-trigger {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.sk-help-drawer-trigger:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.55);
    transform: translateY(-1px);
}
/* Hide the inline label — the floating circle is icon-only. */
.sk-help-drawer-trigger__label { display: none; }
/* Step left of the SK Copilot dock when it's open so the two don't collide.
   The Copilot panel toggles `body.sk-copilot-open` (no-op rule when absent). */
body.sk-copilot-open .sk-help-drawer-trigger {
    right: calc(1.25rem + 380px);
}
@media (max-width: 600px) {
    body.sk-copilot-open .sk-help-drawer-trigger { right: 1.25rem; opacity: 0; pointer-events: none; }
}
.sk-help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 92vw);
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    z-index: 10050;
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    color: var(--text);
}
.sk-help-drawer.open { transform: translateX(0); }

.sk-help-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease-out;
}
.sk-help-drawer-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.sk-help-drawer__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--border);
}
.sk-help-drawer__head-text { flex: 1; min-width: 0; }
.sk-help-drawer__cat {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.sk-help-drawer__title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--text);
}
.sk-help-drawer__meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}
.sk-help-drawer__head-actions {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}
.sk-help-drawer__fullpage {
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.sk-help-drawer__fullpage:hover {
    color: var(--text);
    border-color: var(--text-muted);
}
.sk-help-drawer__close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.3rem;
}
.sk-help-drawer__close:hover { color: var(--text); }

.sk-help-drawer__body {
    flex: 1;
    overflow: auto;
    padding: 1rem 1.2rem;
    font-size: 0.88rem;
    line-height: 1.55;
}
.sk-help-drawer__body h1,
.sk-help-drawer__body h2,
.sk-help-drawer__body h3 {
    margin: 1rem 0 0.4rem;
    color: var(--text);
}
.sk-help-drawer__body h1 { font-size: 1.05rem; }
.sk-help-drawer__body h2 {
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.2rem;
}
.sk-help-drawer__body h3 { font-size: 0.85rem; color: #93c5fd; }
.sk-help-drawer__body p { margin: 0 0 0.65rem; }
.sk-help-drawer__body ul,
.sk-help-drawer__body ol { margin: 0 0 0.7rem 1.2rem; }
.sk-help-drawer__body code {
    background: rgba(148, 163, 184, 0.12);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.82em;
}
.sk-help-drawer__body pre {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    overflow: auto;
    margin: 0 0 0.75rem;
}
.sk-help-drawer__body pre code { background: none; padding: 0; }
.sk-help-drawer__body a { color: #60a5fa; }
.sk-help-drawer__loading { color: var(--text-muted); }

.sk-help-drawer__related {
    padding: 0.6rem 1.2rem;
    border-top: 1px solid var(--border);
    font-size: 0.74rem;
    color: var(--text-muted);
}
.sk-help-drawer__related a {
    color: #60a5fa;
    text-decoration: none;
    margin-right: 0.4rem;
}
.sk-help-drawer__related a:hover { text-decoration: underline; }

.contact-form-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr auto; gap:0.75rem; align-items:end; }
  @media (max-width: 1024px) { .contact-form-grid { grid-template-columns:1fr 1fr auto; } }
  @media (max-width: 640px)  { .contact-form-grid { grid-template-columns:1fr; } .contact-form-grid > button { width:100%; } }

@media (max-width: 640px) {
    .contracts-hide-mobile { display: none; }
}

.assist-settings-grid {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(18rem,0.9fr);
    gap:1rem;
    align-items:start;
  }
  .assist-panel {
    border:1px solid var(--border,#2d3140);
    border-radius:8px;
    background:var(--surface,var(--bg-card,#1a1d27));
    padding:1rem;
  }
  .assist-panel h3 {
    margin:0 0 0.75rem;
    font-size:0.98rem;
    font-weight:600;
    color:var(--text,#e1e4ed);
  }
  .copilot-form-grid {
    display:grid;
    gap:0.8rem;
  }
  .copilot-field {
    display:flex;
    flex-direction:column;
    gap:0.3rem;
  }
  .copilot-field label {
    color:var(--text-muted,#8b8fa3);
    font-size:0.75rem;
    font-weight:600;
    text-transform:uppercase;
  }
  .copilot-field input,
  .copilot-field select {
    width:100%;
    min-height:2.3rem;
    border:1px solid var(--border,#2d3140);
    border-radius:8px;
    background:var(--input-bg,var(--surface,#1a1d27));
    color:var(--text,#e1e4ed);
    padding:0.45rem 0.6rem;
  }
  .copilot-help {
    color:var(--text-muted,#8b8fa3);
    font-size:0.78rem;
    line-height:1.45;
  }
  .copilot-actions {
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
    align-items:center;
    margin-top:0.9rem;
  }
  .assist-status-line {
    min-height:1.25rem;
    color:var(--text-muted,#8b8fa3);
    font-size:0.82rem;
  }
  .assist-status-line[data-state="good"] { color:var(--success,#3fb950); }
  .assist-status-line[data-state="bad"] { color:var(--danger,#e5484d); }
  .copilot-links {
    display:grid;
    gap:0.55rem;
  }
  .copilot-link-row {
    display:flex;
    justify-content:space-between;
    gap:0.75rem;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding:0 0 0.55rem;
  }
  .copilot-link-row:last-child { border-bottom:0; padding-bottom:0; }
  @media (max-width: 900px) {
    .assist-settings-grid { grid-template-columns:1fr; }
  }

.cf-row { border-left: 4px solid var(--border); margin-bottom: 0.6rem; padding: 0.7rem 0.9rem; background: var(--bg-card); border-radius: 4px; transition: border-color 0.12s; }
.cf-row[data-sev=critical] { border-left-color: #b91c1c; }
.cf-row[data-sev=high]     { border-left-color: #ef4444; }
.cf-row[data-sev=medium]   { border-left-color: #f59e0b; }
.cf-row[data-sev=low]      { border-left-color: #6b7280; }
.cf-row[data-sev=info]     { border-left-color: #4a9eff; }
.cf-sev-pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: 0.4rem; }
.cf-sev-pill.critical { background: rgba(185, 28, 28, 0.12); color: #b91c1c; border: 1px solid rgba(185, 28, 28, 0.4); }
.cf-sev-pill.high     { background: rgba(239, 68, 68, 0.10); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.4); }
.cf-sev-pill.medium   { background: rgba(245, 158, 11, 0.10); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.4); }
.cf-sev-pill.low      { background: rgba(107, 114, 128, 0.10); color: var(--text-muted); border: 1px solid rgba(107, 114, 128, 0.3); }
.cf-sev-pill.info     { background: rgba(74, 158, 255, 0.10); color: #1d4ed8; border: 1px solid rgba(74, 158, 255, 0.4); }
.cf-meta { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.18rem; font-family: var(--font-mono, ui-monospace, monospace); }
.cf-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
.cf-rem { margin-top: 0.5rem; padding: 0.6rem 0.8rem; background: var(--bg); border-radius: 4px; font-size: 0.82rem; white-space: pre-wrap; line-height: 1.4; border: 1px solid var(--border); display: none; }
.cf-rem.shown { display: block; }
.cf-rem.err { color: #b91c1c; }
.cf-empty { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.cf-tabs { display: flex; gap: 0.4rem; margin-bottom: 1rem; }
.cf-tab { padding: 0.35rem 0.85rem; border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); border-radius: 4px; font-size: 0.78rem; text-decoration: none; }
.cf-tab.active { background: var(--primary, #4a9eff); border-color: var(--primary, #4a9eff); color: #fff; }
.cf-auto-badge { display: inline-block; margin-left: 0.4rem; padding: 1px 7px; border-radius: 999px; font-size: 0.62rem; font-weight: 600; letter-spacing: .03em; background: rgba(168, 85, 247, 0.10); color: #7c3aed; border: 1px solid rgba(168, 85, 247, 0.4); }
.cf-auto-badge[data-outcome=resolved] { background: rgba(34, 197, 94, 0.10); color: #15803d; border-color: rgba(34, 197, 94, 0.4); }
.cf-auto-badge[data-outcome=failed] { background: rgba(239, 68, 68, 0.10); color: #b91c1c; border-color: rgba(239, 68, 68, 0.4); }
.cf-auto-badge[data-outcome=skipped_dangerous] { background: rgba(245, 158, 11, 0.10); color: #92400e; border-color: rgba(245, 158, 11, 0.4); }
.cf-auto-log { margin-top: 0.5rem; font-size: 0.78rem; }
.cf-auto-log summary { cursor: pointer; color: var(--text-muted); padding: 0.2rem 0; user-select: none; }
.cf-auto-log summary:hover { color: var(--text); }
.cf-auto-log pre { margin: 0.4rem 0 0 0; padding: 0.6rem 0.8rem; background: var(--bg); border-radius: 4px; border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; font-size: 0.76rem; line-height: 1.4; max-height: 28rem; overflow-y: auto; }

.cdg-table { width:100%; border-collapse:collapse; font-size:0.8rem; font-family: ui-monospace, monospace; }
  .cdg-table th, .cdg-table td { text-align:left; padding:4px 6px; border-bottom:1px solid rgba(255,255,255,0.05); }
  .cdg-table th { color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; }
  .cdg-table td.num { text-align: right; }
  .cdg-tri-no { color: #ef4444; font-weight: 600; }
  .cdg-tri-yes { color: #10b981; }

.cd-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 1rem; }
  .cd-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; }
  .cd-card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .cd-card table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .cd-card th, .cd-card td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .cd-card th { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }
  .cd-card td.num { text-align: right; }
  .cd-tri-no { color: #ef4444; font-weight: 600; }
  .cd-tri-yes { color: #10b981; }
  .cd-sha { color: var(--text-muted); font-size: 0.7rem; }

.ca-filters { display:flex; gap:.4rem; flex-wrap:wrap; margin:0 0 1rem; }
.ca-pill { font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; padding:.35rem .8rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); text-decoration:none; }
.ca-pill.active { background: var(--accent, #4a9eff); color:#fff; border-color: var(--accent, #4a9eff); }
.ca-table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md,8px); overflow:hidden; }
.ca-table thead th { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:600; padding:.7rem .85rem; text-align:left; border-bottom:1px solid var(--border); }
.ca-table tbody td { padding:.65rem .85rem; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.04); }
.ca-table a { color:var(--accent,#4a9eff); text-decoration:none; }
.ca-table a:hover { text-decoration:underline; }
.ca-chip { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:.62rem; font-weight:600; padding:2px 8px; border-radius:999px; display:inline-block; border:1px solid var(--border); color:var(--text-muted); background:rgba(255,255,255,.03); }
.ca-chip.new { color:#f59e0b; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.10); }
.ca-chip.confirmed { color:#ef4444; border-color:rgba(239,68,68,.35); background:rgba(239,68,68,.10); }
.ca-chip.false_positive { color:#22c55e; border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10); }
.ca-chip.reported_le { color:#38bdf8; border-color:rgba(56,189,248,.35); background:rgba(56,189,248,.10); }
.ca-chip.retracted { color:#94a3b8; }
.ca-mono { font-family:var(--font-mono); font-size:.78rem; }
.ca-mute { color:var(--text-muted); }

.ce-grid { display:grid; grid-template-columns: 220px 1fr; gap:.4rem .85rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md,8px); padding:1rem 1.2rem; font-size:.84rem; }
.ce-grid dt { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); align-self:center; }
.ce-grid dd { margin:0; font-family:var(--font-mono); font-size:.82rem; word-break:break-all; }
.ce-grid dd code { font-size:.78rem; }
.ce-section { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); font-weight:600; margin:1.5rem 0 .6rem; }
.ce-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.ce-actions form { display:inline-flex; flex-direction:column; gap:.3rem; }
.ce-audit { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md,8px); }
.ce-audit table { width:100%; border-collapse:collapse; }
.ce-audit th, .ce-audit td { padding:.55rem .85rem; font-size:.78rem; font-family:var(--font-mono); text-align:left; border-bottom:1px solid rgba(255,255,255,.04); }
.ce-audit thead th { color:var(--text-muted); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; }

.lr-meta { display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem; }
.lr-chip { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); }
.lr-chip.active { color:#22c55e; border-color:rgba(34,197,94,.45); background:rgba(34,197,94,.10); }
.lr-chip.warn   { color:#f59e0b; border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.10); }
.lr-chip.bad    { color:#ef4444; border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.10); }
.lr-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md,8px); padding:1rem 1.1rem; margin-bottom:1rem; }
.lr-card h3 { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); font-weight:600; margin:0 0 .6rem; }
.lr-ack pre { white-space:pre-wrap; font-family:var(--font-sans); font-size:.85rem; line-height:1.45; color:var(--text); background:transparent; padding:0; margin:0; }
.lr-form-row { display:flex;gap:.55rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:.7rem; }
.lr-form-row label { display:flex;flex-direction:column;flex:1;min-width:200px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted); }
.lr-form-row input[type=text], .lr-form-row input[type=email], .lr-form-row input[type=date], .lr-form-row textarea { margin-top:.25rem;background:var(--surface-2,var(--bg));border:1px solid var(--border);color:var(--text);padding:.4rem .55rem;border-radius:6px;font-size:.82rem;font-family:var(--font-sans); }
.lr-form-row textarea { min-height:60px; }
.lr-attest { display:flex;gap:.4rem;align-items:center;margin:.5rem 0;font-size:.82rem;color:var(--text); }
.lr-table { width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md,8px);overflow:hidden; }
.lr-table thead th { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:600; padding:.6rem .8rem; text-align:left; border-bottom:1px solid var(--border); }
.lr-table tbody td { padding:.55rem .8rem; vertical-align:middle; border-bottom:1px solid rgba(255,255,255,.04); font-size:.8rem; }
.lr-mono { font-family:var(--font-mono); font-size:.78rem; }
.lr-mute { color:var(--text-muted); }

.ch {
    --ch-fg: var(--text);
    --ch-mute: var(--text-muted);
    --ch-bg: var(--bg);
    --ch-card: var(--bg-card);
    --ch-bd: var(--border);
    --ch-good: #22c55e;
    --ch-warn: #f59e0b;
    --ch-bad:  #ef4444;
    --ch-accent: var(--primary, #4a9eff);
    --ch-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ch-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--ch-sans);
    color: var(--ch-fg);
    margin: -1rem -1rem 0 -1rem;
    padding: 0.5rem 1rem 2rem;
    letter-spacing: -0.005em;
}

/* ── Header strip ───────────────────────────────────────────────── */
.ch-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--ch-bd);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.ch-h1 { font-family: var(--ch-mono); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.ch-stat-pills { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.ch-pill {
    font-family: var(--ch-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--ch-bd);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.ch-pill b { font-weight: 700; }
.ch-pill .lbl { color: var(--ch-mute); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem; }
.ch-pill.good { color: var(--ch-good); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.07); }
.ch-pill.warn { color: var(--ch-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.ch-pill.bad  { color: var(--ch-bad); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.07); }
.ch-pill.acc  { color: var(--ch-accent); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.07); }

.ch-actions { display: inline-flex; gap: 0.4rem; }

/* ── Toolbar ────────────────────────────────────────────────────── */
.ch-tb {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    padding: 0.5rem 0; margin-bottom: 0.4rem;
}
.ch-search { flex: 1 1 260px; position: relative; min-width: 0; max-width: 320px; }
.ch-search input {
    width: 100%; background: var(--ch-card); border: 1px solid var(--ch-bd);
    border-radius: 4px; padding: 0.4rem 0.6rem 0.4rem 1.85rem;
    font-family: var(--ch-mono); font-size: 0.78rem; color: var(--ch-fg);
}
.ch-search input::placeholder { color: var(--ch-mute); }
.ch-search input:focus { outline: none; border-color: var(--ch-accent); }
.ch-search svg { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--ch-mute); }
.ch-tb-meta { font-family: var(--ch-mono); font-size: 0.7rem; color: var(--ch-mute); }
.ch-tb-meta b { color: var(--ch-fg); }

/* ── Table ──────────────────────────────────────────────────────── */
.ch-tbl-wrap {
    background: var(--ch-card); border: 1px solid var(--ch-bd);
    border-radius: 6px; overflow-x: auto;
}
.ch-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ch-tbl thead th {
    background: var(--ch-card);
    text-align: left; padding: 7px 10px;
    border-bottom: 1px solid var(--ch-bd);
    font-family: var(--ch-mono); font-size: 0.66rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ch-mute);
    font-weight: 600; white-space: nowrap; user-select: none;
}
.ch-tbl thead th.ch-sort { cursor: pointer; }
.ch-tbl thead th.ch-sort:hover { color: var(--ch-fg); }
.ch-tbl thead th.ch-sort .ch-arrow::after { content: ' ⇅'; color: var(--ch-bd); font-size: 0.75em; opacity: 0.7; }
.ch-tbl thead th.ch-sort:hover .ch-arrow::after { color: var(--ch-mute); opacity: 1; }
.ch-tbl thead th.ch-asc  .ch-arrow::after { content: ' ▲'; color: var(--ch-accent); font-size: 0.7em; opacity: 1; }
.ch-tbl thead th.ch-desc .ch-arrow::after { content: ' ▼'; color: var(--ch-accent); font-size: 0.7em; opacity: 1; }

.ch-tbl tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.ch-tbl tbody tr:hover { background: rgba(74,158,255,0.06); }
.ch-tbl tbody td { padding: 9px 10px; vertical-align: middle; white-space: nowrap; line-height: 1.25; }

.ch-cust { font-family: var(--ch-mono); font-weight: 500; color: var(--ch-fg); }
.ch-mono { font-family: var(--ch-mono); font-size: 0.74rem; color: var(--ch-mute); }

/* Score chip */
.ch-score {
    display: inline-block; padding: 2px 9px; border-radius: 4px;
    font-family: var(--ch-mono); font-weight: 700; font-size: 0.78rem;
    min-width: 38px; text-align: center;
}
.ch-score.good { color: var(--ch-good); background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.3); }
.ch-score.warn { color: var(--ch-warn); background: rgba(245,158,11,0.10); border: 1px solid rgba(245,158,11,0.3); }
.ch-score.bad  { color: var(--ch-bad); background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.3); }
.ch-score.none { color: var(--ch-mute); background: rgba(255,255,255,0.03); border: 1px solid var(--ch-bd); }

/* Per-row health gradient bar — wider, taller, neutral background so the
   filled portion is clearly distinguishable from the empty portion at
   any score level. (Old bar background was a faint red tint that
   blended with the warn/bad fills, making the differences hard to read.) */
.ch-bar-wrap {
    display: inline-block; vertical-align: middle;
    width: 160px; height: 12px; border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--ch-bd, rgba(255,255,255,0.08));
    overflow: hidden; margin-left: 0.5rem;
}
.ch-bar-wrap .seg {
    height: 100%; transform-origin: left;
    animation: ch-grow 0.7s 0.05s cubic-bezier(0.2,0.7,0.2,1) backwards;
    border-radius: 6px 0 0 6px;
}
.ch-bar-wrap .seg.good { background: linear-gradient(90deg, #16a34a, #22c55e); }
.ch-bar-wrap .seg.warn { background: linear-gradient(90deg, #d97706, #f59e0b); }
.ch-bar-wrap .seg.bad  { background: linear-gradient(90deg, #b91c1c, #ef4444); }
@keyframes ch-grow { from { transform: scaleX(0); } }

/* Critical pulsing dot */
.ch-crit-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ch-bad); margin-right: 0.4rem; vertical-align: middle;
    box-shadow: 0 0 5px rgba(239,68,68,0.7);
    animation: ch-pulse 1.6s ease-out infinite;
}
@keyframes ch-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
    70%  { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Staggered row fade-in */
.ch-row { animation: ch-fade 0.45s ease-out backwards; }
@keyframes ch-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Buttons (light reskin, keep base button classes intact) */
.ch .btn-small { font-family: var(--ch-mono); font-size: 0.7rem; letter-spacing: 0.04em; }

/* Detail-view headings get the mono treatment */
.ch-section-label {
    font-family: var(--ch-mono); font-size: 0.66rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ch-mute);
    margin-bottom: 0.5rem;
}

.ch-empty { text-align: center; padding: 2.5rem 1rem; color: var(--ch-mute); font-size: 0.85rem; }

@media (max-width: 768px) {
    .ch { margin: -1rem -0.5rem 0; padding: 0.4rem 0.5rem 2rem; }
    .ch-tbl thead th { font-size: 0.6rem; padding: 5px 6px; }
    .ch-tbl tbody td { padding: 7px 6px; }
    .ch-bar-wrap { width: 70px; }
    .ch-detail-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
    .ch-hide-mobile { display: none; }
    .ch-bar-wrap { display: none; }
}

.health-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.health-card { border:1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 1rem; display:flex; flex-direction:column; gap: 0.5rem; }
.health-card .head { display:flex; justify-content:space-between; align-items:center; gap: 0.5rem; }
.health-card .title { font-size:0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.health-card .value { font-size:1.6rem; font-weight: 700; color: var(--text); }
.health-card .explain { font-size:0.85rem; color: var(--text-muted); }
.health-card .pill { display:inline-block; padding:2px 10px; border-radius:999px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.health-card .pill-ok   { background: rgba(34,197,94,0.15);  color:#22c55e; }
.health-card .pill-warn { background: rgba(245,158,11,0.15); color:#f59e0b; }
.health-card .pill-err  { background: rgba(239,68,68,0.15);  color:#ef4444; }
.health-card.sev-ok   { border-left: 3px solid #22c55e; }
.health-card.sev-warn { border-left: 3px solid #f59e0b; }
.health-card.sev-err  { border-left: 3px solid #ef4444; }
.health-card .actions { margin-top: auto; }
.health-card .actions a { font-size:0.82rem; }

@page { size: Letter; margin: 0.6in 0.55in; }
.head { display: flex; justify-content: space-between; align-items: flex-start; }
.head .right { text-align: right; }
.head .title { font-size: 22pt; font-weight: 700; letter-spacing: 2px; color: #111827; }
.head .as-of { font-size: 9pt; color: #6b7280; }
.brand-name { font-size: 13pt; font-weight: 700; }
.brand-line { font-size: 9pt; color: #6b7280; }
.bill-to { display: flex; justify-content: space-between; }
.bill-to .right { text-align: right; }
.label { font-size: 8pt; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
.balance { font-size: 18pt; font-weight: 700; color: #dc2626; }
.right-col { text-align: right; }
tfoot td { font-weight: 700; border-top: 2px solid #d1d5db; }
.balance-row { color: #dc2626; }
.estimate-pill { display: inline-block; padding: 1px 6px; border-radius: 8px; background: #ede9fe; color: #7c3aed; font-size: 7pt; font-weight: 700; text-transform: uppercase; }
.section-title { margin: 0 0 8px; font-size: 11pt; font-weight: 700; }
.section-sub { font-size: 8pt; color: #6b7280; font-weight: 400; }
.footer { margin-top: 16px; font-size: 8pt; color: #6b7280; text-align: center; }

/* ── Database Admin scoped wrapper ── */
.dba-w {
  --dba-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --dba-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --dba-bg-primary: oklch(0.15 0 0);
  --dba-bg-secondary: oklch(0.18 0.005 240);
  --dba-bg-tertiary: oklch(0.22 0.008 250);
  --dba-text-primary: oklch(0.95 0.005 240);
  --dba-text-secondary: oklch(0.70 0.01 240);
  --dba-border: oklch(0.30 0.01 240);
  --dba-success: oklch(0.65 0.15 145);
  --dba-danger: oklch(0.60 0.18 25);
  --dba-warning: oklch(0.75 0.12 85);
  --dba-info: oklch(0.65 0.15 240);
  --dba-accent: oklch(0.70 0.18 280);
  --dba-radius: 6px;
  --dba-transition: 0.2s ease;
}
.dba-w * { font-family: var(--dba-font-sans); }
.dba-w code,
.dba-w .mono,
.dba-w .num { font-family: var(--dba-font-mono); }
.dba-w {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem;
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── metrics row ── */
.dba-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0.75rem; margin-bottom:1.25rem; }
.dba-metric { background:var(--dba-bg-secondary); border:1px solid var(--dba-border); border-radius:6px; padding:0.85rem; text-align:center; }
.dba-metric .val { font-size:1.5rem; font-weight:700; font-family: var(--dba-font-mono); color: var(--dba-text-primary); }
.dba-metric .lbl { font-size:0.72rem; color:var(--dba-text-secondary); text-transform:uppercase; letter-spacing:0.03em; margin-top:0.2rem; font-family: var(--dba-font-mono); }

/* ── sections ── */
.dba-section { margin-bottom:1.5rem; }
.dba-section > h3 {
    font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--dba-text-secondary); margin:0 0 0.3rem;
    display:flex; align-items:center; gap:0.4rem;
}
.dba-section > .dba-section-desc {
    font-size:0.78rem; color:var(--dba-text-secondary); margin:0 0 0.65rem;
    line-height:1.5;
}

/* ── cards ── */
.dba-card { background:var(--dba-bg-secondary); border:1px solid var(--dba-border); border-radius:8px; padding:1rem; }
.dba-card-note { font-size:0.74rem; color:var(--dba-text-secondary); margin:0.5rem 0 0; line-height:1.5; }

/* ── tables ── */
.dba-table { width:100%; border-collapse:collapse; font-size:0.81rem; }
.dba-table th {
    text-align:left; padding:0.35rem 0.6rem;
    border-bottom:2px solid var(--dba-border);
    font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--dba-text-secondary); font-weight:600;
    background: var(--dba-bg-tertiary);
}
.dba-table td { padding:0.38rem 0.6rem; border-bottom:1px solid var(--dba-border); vertical-align:middle; color: var(--dba-text-primary); }
.dba-table tr:last-child td { border-bottom:none; }
.dba-table .num { text-align:right; }
.dba-table .muted { color:var(--dba-text-secondary); font-size:0.75rem; }
.dba-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ── recommendations ── */
.dba-recs { margin-bottom:1.4rem; }
.dba-rec {
    display:flex; align-items:flex-start; gap:0.75rem;
    padding:0.65rem 0.85rem; border-radius:7px;
    border-left:4px solid transparent;
    background:var(--dba-bg-secondary); border:1px solid var(--dba-border);
    margin-bottom:0.45rem;
}
.dba-rec.critical { border-left-color:#e74c3c; border-color:rgba(231,76,60,0.25); background:rgba(231,76,60,0.04); }
.dba-rec.warn     { border-left-color:#f0ad4e; border-color:rgba(240,173,78,0.25); background:rgba(240,173,78,0.04); }
.dba-rec.info     { border-left-color:#3498db; border-color:rgba(52,152,219,0.25); background:rgba(52,152,219,0.04); }
.dba-rec.good     { border-left-color:#27ae60; border-color:rgba(39,174,96,0.2);   background:rgba(39,174,96,0.04); }
.dba-rec .rec-icon { font-size:1.1rem; line-height:1; padding-top:1px; }
.dba-rec .rec-body { flex:1; }
.dba-rec .rec-title { font-size:0.85rem; font-weight:600; color: var(--dba-text-primary); }
.dba-rec .rec-detail { font-size:0.76rem; color:var(--dba-text-secondary); margin-top:0.15rem; line-height:1.5; }
.dba-rec .rec-btn { margin-top:0.35rem; }

/* ── cleanup items ── */
.dba-suggest {
    display:flex; align-items:center; justify-content:space-between;
    gap:0.75rem; padding:0.6rem 0.75rem; border-radius:6px;
    background:var(--dba-bg-secondary); border:1px solid var(--dba-border);
    margin-bottom:0.4rem; flex-wrap:wrap;
}
.dba-suggest .info { flex:1; min-width:180px; }
.dba-suggest .info strong { display:block; font-size:0.84rem; color: var(--dba-text-primary); }
.dba-suggest .info .desc { font-size:0.74rem; color:var(--dba-text-secondary); margin-top:0.15rem; line-height:1.45; }
.dba-suggest .count { font-family:var(--dba-font-mono); font-weight:700; font-size:1.05rem; min-width:3.5rem; text-align:right; }
.dba-suggest .count.critical { color:#e74c3c; }
.dba-suggest .count.warn     { color:#f0ad4e; }
.dba-suggest .count.ok       { color:#27ae60; }

/* ── two-column layout ── */
.dba-row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:960px) { .dba-row2 { grid-template-columns:1fr; } }

/* ── optimize ── */
.dba-opt-row { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin-bottom:0.5rem; }
.dba-opt-row select { flex:1; min-width:160px; max-width:260px; }

/* ── size bar ── */
.sz-bar { display:flex; height:6px; border-radius:3px; overflow:hidden; min-width:60px; max-width:90px; background:var(--dba-border); }
.sz-bar .sz-data  { background:#3b82f6; }
.sz-bar .sz-index { background:#f59e0b; }

/* ── bloat badge ── */
.bloat-ok   { color:#27ae60; font-size:0.75rem; font-weight:600; }
.bloat-warn { color:#f0ad4e; font-size:0.75rem; font-weight:600; }
.bloat-crit { color:#e74c3c; font-size:0.75rem; font-weight:700; }

/* ── vacuum full warning ── */
.vf-warn { font-size:0.74rem; color:#e74c3c; margin-top:0.25rem; display:none; line-height:1.4; }
.vf-warn.show { display:block; }

/* ── pills ── */
.dba-pill { display:inline-block; padding:1px 7px; border-radius:10px; font-size:0.68rem; font-weight:700; }
.dba-pill.unused  { background:rgba(240,173,78,0.15);  color:#f0ad4e; }
.dba-pill.never   { background:rgba(231,76,60,0.12);   color:#e74c3c; }
.dba-pill.active  { background:rgba(39,174,96,0.12);   color:#27ae60; }

/* ── restore box ── */
.dba-restore-box { background:var(--dba-bg-secondary); border:1px solid var(--dba-border); border-radius:8px; padding:1rem; margin-top:0.75rem; display:none; }
.dba-restore-box pre { font-size:0.78rem; white-space:pre-wrap; word-break:break-word; color:var(--dba-text-secondary); margin:0; font-family: var(--dba-font-mono); }

/* ── auto-refresh countdown ── */
.dba-countdown { font-size:0.73rem; color:var(--dba-text-secondary); font-family: var(--dba-font-mono); }

/* ── toast ── */
#da-toast {
    position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
    background:#27ae60; color:#fff; padding:0.65rem 1.1rem;
    border-radius:6px; font-size:0.85rem; display:none;
    box-shadow:0 4px 16px rgba(0,0,0,0.35); max-width:340px;
}
#da-toast.err { background:#e74c3c; }

/* ── buttons ── */
.dba-btn {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--dba-bg-tertiary);
  border: 1px solid var(--dba-border);
  border-radius: 4px;
  color: var(--dba-text-primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all var(--dba-transition);
  cursor: pointer;
}
.dba-btn:hover {
  background: var(--dba-bg-primary);
  border-color: var(--dba-text-secondary);
}

.bk-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
  .bk-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; }
  .bk-card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .bk-card table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .bk-card th, .bk-card td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .bk-card th { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }
  .bk-card td.num { text-align: right; }
  .bk-status-ok { color: #10b981; }
  .bk-status-stale { color: #f59e0b; font-weight: 600; }
  .bk-status-error { color: #ef4444; font-weight: 600; }
  .bk-status-no-runs, .bk-status-running { color: var(--text-muted); }
  .bk-cfg dt { font-size: 0.7rem; text-transform: uppercase; color: var(--text-muted); margin-top: 0.5rem; }
  .bk-cfg dd { margin: 0; font-family: ui-monospace, monospace; font-size: 0.85rem; }

.policy-form {
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    padding:1.25rem; margin-bottom:1.5rem; opacity:0; animation:cardFadeIn 0.3s ease forwards;
}
@keyframes cardFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.policy-form .form-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0.75rem;
}
.policy-form label { display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:0.25rem; }
.policy-form input, .policy-form select, .policy-form textarea { width:100%; }
.policy-form textarea { min-height:80px; font-family:monospace; font-size:0.8rem; }
.policy-form .form-actions { grid-column:1 / -1; display:flex; gap:0.5rem; margin-top:0.5rem; }
.badge-on { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-off { background:rgba(231,76,60,0.15); color:#e74c3c; }
.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-switch .slider { position:absolute; cursor:pointer; inset:0; background:#444; border-radius:20px; transition:0.3s; }
.toggle-switch .slider::before { content:''; position:absolute; height:14px; width:14px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + .slider { background:var(--green); }
.toggle-switch input:checked + .slider::before { transform:translateX(16px); }

/* ── SiteKings dark theme for Swagger UI ─────────────────────────
       Overrides the jsdelivr CSS to match the rest of the admin panel.
    */
    .swagger-ui-wrapper {
        background: var(--bg-card, #0f1117);
        border: 1px solid var(--border, #30363d);
        border-radius: 12px;
        padding: 1.25rem 1.5rem 2rem;
        margin-top: 1rem;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
    }
    #swagger-ui .topbar { display: none !important; }
    #swagger-ui .scheme-container,
    #swagger-ui .info hgroup.main a,
    #swagger-ui .info { background: transparent !important; }

    #swagger-ui, #swagger-ui * {
        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
    }
    #swagger-ui .info .title, #swagger-ui h1, #swagger-ui h2, #swagger-ui h3,
    #swagger-ui h4, #swagger-ui h5, #swagger-ui .opblock-tag,
    #swagger-ui .opblock-summary-description, #swagger-ui .opblock-description-wrapper p,
    #swagger-ui .opblock-external-docs-wrapper p, #swagger-ui .opblock-title_normal p,
    #swagger-ui table thead tr td, #swagger-ui table thead tr th,
    #swagger-ui .parameters-col_description p, #swagger-ui .parameter__name,
    #swagger-ui .parameter__type, #swagger-ui .parameter__in,
    #swagger-ui .response-col_status, #swagger-ui .response-col_description,
    #swagger-ui .tab li, #swagger-ui label, #swagger-ui .model-title,
    #swagger-ui .model, #swagger-ui .model-toggle::after {
        color: var(--text, #e6edf3) !important;
    }
    #swagger-ui .info .title small { background: var(--primary, #58a6ff) !important; color: #fff !important; }
    #swagger-ui .info .title small pre { color: #fff !important; background: transparent !important; }
    #swagger-ui svg { fill: var(--text, #e6edf3); }

    #swagger-ui .opblock-tag {
        border-bottom: 1px solid var(--border, #30363d) !important;
        padding-bottom: 0.5rem; margin-bottom: 0.5rem;
    }
    #swagger-ui .opblock-tag:hover { background: var(--bg-hover, rgba(88,166,255,0.05)) !important; }

    #swagger-ui .opblock {
        background: var(--bg-input, #161b22) !important;
        border: 1px solid var(--border, #30363d) !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
        margin: 0.5rem 0 !important;
    }
    #swagger-ui .opblock .opblock-summary { border-bottom-color: var(--border, #30363d) !important; }
    #swagger-ui .opblock .opblock-summary-path,
    #swagger-ui .opblock .opblock-summary-path__deprecated,
    #swagger-ui .opblock .opblock-summary-description { color: var(--text, #e6edf3) !important; }
    #swagger-ui .opblock .opblock-summary-path a { color: var(--text, #e6edf3) !important; }

    #swagger-ui .opblock.opblock-get { border-left: 4px solid #61affe !important; }
    #swagger-ui .opblock.opblock-post { border-left: 4px solid #49cc90 !important; }
    #swagger-ui .opblock.opblock-put { border-left: 4px solid #fca130 !important; }
    #swagger-ui .opblock.opblock-delete { border-left: 4px solid #f93e3e !important; }
    #swagger-ui .opblock.opblock-patch { border-left: 4px solid #50e3c2 !important; }
    #swagger-ui .opblock-summary-method {
        font-weight: 700 !important;
        min-width: 72px !important;
        text-align: center !important;
        border-radius: 6px !important;
    }

    #swagger-ui table { background: transparent !important; }
    #swagger-ui table thead tr { background: var(--bg-hover, rgba(255,255,255,0.03)) !important; }
    #swagger-ui table tbody tr td,
    #swagger-ui table thead tr th,
    #swagger-ui .parameters-col_description p { color: var(--text, #e6edf3) !important; }
    #swagger-ui .parameters-col_name .parameter__type,
    #swagger-ui .parameter__deprecated,
    #swagger-ui .parameter__in { color: var(--text-muted, #8b949e) !important; }

    #swagger-ui input[type=text],
    #swagger-ui input[type=password],
    #swagger-ui input[type=search],
    #swagger-ui input[type=email],
    #swagger-ui input[type=file],
    #swagger-ui textarea,
    #swagger-ui select {
        background: var(--bg, #0d1117) !important;
        color: var(--text, #e6edf3) !important;
        border: 1px solid var(--border, #30363d) !important;
        border-radius: 6px !important;
        padding: 0.4rem 0.6rem !important;
    }
    #swagger-ui input[type=text]:focus,
    #swagger-ui textarea:focus,
    #swagger-ui select:focus {
        border-color: var(--primary, #58a6ff) !important;
        outline: none !important;
    }

    #swagger-ui .btn {
        background: var(--bg-input, #161b22) !important;
        color: var(--text, #e6edf3) !important;
        border: 1px solid var(--border, #30363d) !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        transition: background 0.15s ease, border-color 0.15s ease;
    }
    #swagger-ui .btn:hover { background: var(--bg-hover, #21262d) !important; }
    #swagger-ui .btn.authorize,
    #swagger-ui .btn.try-out__btn,
    #swagger-ui .btn.execute {
        background: var(--primary, #58a6ff) !important;
        color: #fff !important;
        border-color: var(--primary, #58a6ff) !important;
    }
    #swagger-ui .btn.authorize:hover,
    #swagger-ui .btn.execute:hover { filter: brightness(1.1); }
    #swagger-ui .btn.cancel { background: transparent !important; }
    #swagger-ui .authorization__btn { color: var(--primary, #58a6ff) !important; }

    #swagger-ui .microlight,
    #swagger-ui .highlight-code,
    #swagger-ui pre.microlight,
    #swagger-ui .responses-inner pre {
        background: #0b0f14 !important;
        color: #d4e5ff !important;
        border: 1px solid var(--border, #30363d) !important;
        border-radius: 8px !important;
        font-family: "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace !important;
    }
    #swagger-ui .microlight .token,
    #swagger-ui .highlight-code .token { color: #d4e5ff !important; }
    #swagger-ui .microlight .string { color: #98c379 !important; }
    #swagger-ui .microlight .number { color: #d19a66 !important; }
    #swagger-ui .microlight .boolean { color: #c678dd !important; }
    #swagger-ui .microlight .null { color: #e06c75 !important; }
    #swagger-ui .microlight .property { color: #61afef !important; }

    #swagger-ui .model-box {
        background: var(--bg-input, #161b22) !important;
        border-radius: 8px;
        padding: 0.75rem;
        border: 1px solid var(--border, #30363d);
    }
    #swagger-ui section.models {
        background: transparent !important;
        border: 1px solid var(--border, #30363d) !important;
        border-radius: 10px !important;
    }
    #swagger-ui section.models.is-open h4 { border-bottom-color: var(--border, #30363d) !important; }
    #swagger-ui .model .property { color: var(--text, #e6edf3) !important; }
    #swagger-ui .model .property.primitive { color: var(--text-muted, #8b949e) !important; }

    #swagger-ui .tab li.active,
    #swagger-ui .tab li:hover { color: var(--primary, #58a6ff) !important; }
    #swagger-ui .tab li::before { background: var(--text-muted, #8b949e); }

    #swagger-ui .dialog-ux .modal-ux {
        background: var(--bg-card, #0f1117) !important;
        border: 1px solid var(--border, #30363d) !important;
        border-radius: 12px !important;
    }
    #swagger-ui .dialog-ux .modal-ux-header h3 { color: var(--text, #e6edf3) !important; }
    #swagger-ui .dialog-ux .modal-ux-content h4,
    #swagger-ui .dialog-ux .modal-ux-content p,
    #swagger-ui .dialog-ux .modal-ux-content .auth-container label,
    #swagger-ui .dialog-ux .modal-ux-content code { color: var(--text, #e6edf3) !important; }
    #swagger-ui .dialog-ux .modal-ux-inner { background: var(--bg-card, #0f1117) !important; }

    #swagger-ui .response .response-col_status { font-weight: 600; }
    #swagger-ui .responses-wrapper .opblock-section-header {
        background: transparent !important;
        border-bottom: 1px solid var(--border, #30363d) !important;
    }
    #swagger-ui .responses-wrapper .opblock-section-header h4 { color: var(--text, #e6edf3) !important; }

    #swagger-ui .request-url {
        background: #0b0f14 !important;
        color: #d4e5ff !important;
        border-radius: 6px;
        padding: 0.5rem 0.75rem;
    }

    #swagger-ui .info { margin: 1rem 0 1.5rem !important; }
    #swagger-ui .info .title { font-size: 1.5rem !important; font-weight: 700 !important; }
    #swagger-ui .info .base-url,
    #swagger-ui .info a { color: var(--primary, #58a6ff) !important; }
    #swagger-ui .info .description p { color: var(--text-muted, #8b949e) !important; }

    #swagger-ui .filter-container input { width: 100% !important; }
    #swagger-ui .filter .operation-filter-input {
        background: var(--bg-input, #161b22) !important;
        color: var(--text, #e6edf3) !important;
        border: 1px solid var(--border, #30363d) !important;
    }

    #swagger-ui .opblock .opblock-body .opblock-description-wrapper,
    #swagger-ui .opblock .opblock-body .opblock-external-docs-wrapper {
        background: transparent !important;
    }

    #swagger-ui .arrow { filter: invert(1) brightness(1.6); }

    #swagger-ui .opblock-section-header {
        background: var(--bg-hover, rgba(255,255,255,0.02)) !important;
    }
    #swagger-ui .opblock-section-header h4,
    #swagger-ui .opblock-section-header label { color: var(--text, #e6edf3) !important; }

    #swagger-ui .servers > label { color: var(--text, #e6edf3) !important; }
    #swagger-ui .servers select {
        background: var(--bg-input, #161b22) !important;
        color: var(--text, #e6edf3) !important;
        border: 1px solid var(--border, #30363d) !important;
    }

    #swagger-ui ::-webkit-scrollbar { width: 10px; height: 10px; }
    #swagger-ui ::-webkit-scrollbar-track { background: transparent; }
    #swagger-ui ::-webkit-scrollbar-thumb { background: var(--border, #30363d); border-radius: 5px; }
    #swagger-ui ::-webkit-scrollbar-thumb:hover { background: var(--text-muted, #8b949e); }

.dev-subnav { display:flex; gap:0.4rem; flex-wrap:wrap; margin:0 0 var(--space-4,1.25rem); padding-bottom:var(--space-3,0.75rem); border-bottom:1px solid var(--border,#2d3140); }
  .dev-subnav-link { padding:0.4rem 0.85rem; border-radius:var(--radius-md,8px); font-size:0.82rem; font-weight:500; text-decoration:none; border:1px solid var(--border,#2d3140); color:var(--text-muted,#8b8fa3); background:transparent; transition:all 0.12s; }
  .dev-subnav-link:hover { border-color:var(--accent,#4a9eff); color:var(--text,#e1e4ed); }
  .dev-subnav-link.is-active { background:var(--accent,#4a9eff); border-color:var(--accent,#4a9eff); color:#fff; }
  .dev-card-pad { padding:var(--space-4,1.25rem); border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--surface,var(--bg-card,#1a1d27)); }

.dev-subnav { display:flex; gap:0.4rem; flex-wrap:wrap; margin:0 0 var(--space-4,1.25rem); padding-bottom:var(--space-3,0.75rem); border-bottom:1px solid var(--border,#2d3140); }
  .dev-subnav-link { padding:0.4rem 0.85rem; border-radius:var(--radius-md,8px); font-size:0.82rem; font-weight:500; text-decoration:none; border:1px solid var(--border,#2d3140); color:var(--text-muted,#8b8fa3); background:transparent; transition:all 0.12s; }
  .dev-subnav-link:hover { border-color:var(--accent,#4a9eff); color:var(--text,#e1e4ed); }
  .dev-subnav-link.is-active { background:var(--accent,#4a9eff); border-color:var(--accent,#4a9eff); color:#fff; }
  .dev-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--space-3,0.85rem); margin:0 0 var(--space-4,1.25rem); }
  .dev-section { margin:var(--space-4,1.25rem) 0; }
  .dev-section h3 { font-size:1.05rem; font-weight:600; margin:0 0 var(--space-3,0.75rem); color:var(--text,#e1e4ed); }
  .dev-mono { font-family:var(--font-mono,ui-monospace,Menlo,Consolas,monospace); }
  .dev-tag-method { display:inline-block; min-width:3.2rem; text-align:center; padding:0.12rem 0.45rem; border-radius:var(--radius-sm,4px); font-size:0.7rem; font-weight:700; letter-spacing:0.04em; border:1px solid currentColor; }
  .dev-tag-method[data-m="GET"]    { color:var(--info,#4a9eff); }
  .dev-tag-method[data-m="POST"]   { color:var(--success,#3fb950); }
  .dev-tag-method[data-m="PUT"],
  .dev-tag-method[data-m="PATCH"]  { color:var(--warning,#d29922); }
  .dev-tag-method[data-m="DELETE"] { color:var(--danger,#e5484d); }
  .dev-status { font-weight:600; }
  .dev-status[data-class="2"] { color:var(--success,#3fb950); }
  .dev-status[data-class="3"] { color:var(--info,#4a9eff); }
  .dev-status[data-class="4"] { color:var(--warning,#d29922); }
  .dev-status[data-class="5"] { color:var(--danger,#e5484d); }
  .dev-snippet { background:var(--bg,#0f1117); border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); padding:var(--space-3,0.85rem); font-size:0.78rem; overflow-x:auto; margin:0; }
  .dev-card-pad { padding:var(--space-4,1.25rem); border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--surface,var(--bg-card,#1a1d27)); }
  details.dev-recipe { border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--surface,var(--bg-card,#1a1d27)); margin-bottom:var(--space-3,0.75rem); padding:var(--space-3,0.85rem) var(--space-4,1.25rem); }
  details.dev-recipe[open] { border-color:var(--accent,#4a9eff); }
  details.dev-recipe > summary { cursor:pointer; font-weight:600; font-size:0.95rem; color:var(--text,#e1e4ed); list-style:none; display:flex; align-items:center; justify-content:space-between; gap:0.6rem; }
  details.dev-recipe > summary::after { content:"▾"; color:var(--text-muted,#8b8fa3); transition:transform 0.15s; }
  details.dev-recipe[open] > summary::after { transform:rotate(180deg); }
  details.dev-recipe > .dev-recipe-body { margin-top:var(--space-3,0.75rem); display:flex; flex-direction:column; gap:var(--space-3,0.75rem); }
  details.dev-recipe p { margin:0; font-size:0.85rem; color:var(--text-muted,#8b8fa3); line-height:1.5; }

.lang-tabs { display:flex;gap:0.25rem;margin-bottom:0.5rem; }
    .lang-tabs button {
        background: var(--card-bg); color: var(--text-muted);
        border: 1px solid var(--border); padding: 0.35rem 0.9rem;
        font-size: 0.8rem; border-radius: 6px 6px 0 0; cursor: pointer;
    }
    .lang-tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .sample-group { margin-bottom: 2rem; }
    .sample-group pre[class*="language-"] {
        margin: 0; border-radius: 0 6px 6px 6px; max-height: 420px;
    }
    .sample-group h3 { margin-bottom: 0.5rem; }

.dev-chip-row { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.5rem 0; align-items:center; }
.dev-chip { cursor:pointer; user-select:none; padding:0.25rem 0.65rem;
            font-size:0.75rem; border:1px solid var(--border);
            border-radius:99px; color:var(--text-muted); background:transparent;
            transition:all 0.15s; }
.dev-chip:hover { color:var(--text); border-color:var(--text-muted); }
.dev-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.dev-chip.active.unifi    { background:#5b8af5; border-color:#5b8af5; }
.dev-chip.active.deployable{ background:#46a758; border-color:#46a758; }
.dev-chip.active.not-deployable{ background:#666; border-color:#666; }
.dev-chip.active.managed  { background:#46a758; border-color:#46a758; }
.dev-chip.active.windows  { background:#0078d4; border-color:#0078d4; }
.dev-chip.active.printer  { background:#e67e22; border-color:#e67e22; }
.dev-chip-clear { color:var(--text-muted); font-size:0.72rem; cursor:pointer;
                  text-decoration:underline; background:none; border:none;
                  padding:0.2rem 0.4rem; }

.dispatch-card:hover { border-color: var(--primary) !important; }
.dispatch-card[draggable]:active { opacity: 0.5; cursor: grabbing; }
.tech-card:hover { background: var(--bg); }

.docl-w {
    --docl-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --docl-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --docl-accent: var(--primary, #4a9eff);
    --docl-mute: var(--text-muted);
    font-family: var(--docl-sans);
    letter-spacing: -0.005em;
}

/* Header bar */
.docl-w .docl-bar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.8rem;
}
.docl-w .docl-h2 { font-size: 1.3rem; font-weight: 700; margin: 0; }
.docl-w .docl-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }

/* Search + buttons */
.docl-w .docl-search-wrap { display: flex; gap: 0.3rem; }
.docl-w .docl-search {
    padding: 0.35rem 0.6rem; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text); font-size: 0.8rem; min-width: 200px;
}

/* Template dropdown */
.docl-w .docl-dropdown { position: relative; }
.docl-w .docl-tpl-menu {
    display: none; position: absolute; right: 0; top: 100%;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); min-width: 200px; z-index: 100;
    margin-top: 0.3rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.docl-w .docl-tpl-menu.open { display: block; }
.docl-w .docl-tpl-menu a {
    display: block; padding: 0.5rem 0.75rem;
    color: var(--text); text-decoration: none;
    border-bottom: 1px solid var(--border); font-size: 0.85rem;
}
.docl-w .docl-tpl-menu a:last-child { border-bottom: none; }
.docl-w .docl-tpl-menu a:hover { background: var(--bg-input); }

/* Main layout */
.docl-w .docl-layout { display: grid; grid-template-columns: 240px 1fr; gap: 0.85rem; }

/* Folder sidebar */
.docl-w .docl-sidebar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem; }
.docl-w .docl-sidebar h3 { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--docl-mute); text-transform: uppercase; letter-spacing: 0.08em; }
.docl-w .docl-folder-list { display: flex; flex-direction: column; gap: 0.2rem; }
.docl-w .docl-folder-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.5rem; border-radius: 4px;
    color: var(--text); text-decoration: none; font-size: 0.85rem;
}
.docl-w .docl-folder-link:hover { background: var(--bg-input); }
.docl-w .docl-folder-link.active { background: var(--docl-accent); color: #fff; }
.docl-w .docl-folder-link span { flex: 1; }
.docl-w .docl-folder-del {
    opacity: 0.5; font-size: 0.9rem; padding: 0 0.3rem;
    transition: opacity 0.15s;
}
.docl-w .docl-folder-link:hover .docl-folder-del { opacity: 1; }
.docl-w .docl-folder-new { display: flex; gap: 0.25rem; margin-top: 0.6rem; }
.docl-w .docl-folder-new input {
    flex: 1; padding: 0.3rem 0.5rem; border-radius: 4px;
    border: 1px solid var(--border); background: var(--bg-input);
    color: var(--text); font-size: 0.8rem;
}

/* Doc grid */
@keyframes docCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.docl-w .docl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.65rem; }
.docl-w .docl-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.8rem;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    transition: border-color 0.15s, transform 0.15s;
    animation: docCardIn 0.35s ease-out both;
}
.docl-w .docl-card:hover { border-color: var(--docl-accent); transform: translateY(-2px); }
.docl-w .docl-card.pinned { border-left: 3px solid var(--docl-accent); }

.docl-w .docl-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; }
.docl-w .docl-card-title { font-weight: 600; font-size: 0.92rem; line-height: 1.3; flex: 1; }
.docl-w .docl-card-badge {
    font-family: var(--docl-mono); font-size: 0.65rem; padding: 2px 7px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border); color: var(--docl-mute);
    margin-left: 0.5rem; white-space: nowrap;
}

.docl-w .docl-card-excerpt { font-size: 0.8rem; color: var(--docl-mute); line-height: 1.4; margin-bottom: 0.6rem; }
.docl-w .docl-card-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--docl-mono); font-size: 0.68rem; color: var(--docl-mute);
    margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border);
}
.docl-w .docl-card-tags { margin-top: 0.3rem; font-size: 0.68rem; color: var(--docl-accent); }

/* Section headers */
.docl-w .docl-sec-h {
    font-size: 0.85rem; color: var(--docl-mute);
    margin: 0 0 0.6rem; font-weight: 500;
}
.docl-w .docl-sec-h span { float: right; font-weight: 400; }

/* Empty state */
.docl-w .docl-empty {
    text-align: center; padding: 3rem 1rem;
    background: var(--bg-card); border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.docl-w .docl-empty p { color: var(--docl-mute); margin-bottom: 0.75rem; }

.doc-w {
    --doc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --doc-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --doc-accent: var(--primary, #4a9eff);
    --doc-mute: var(--text-muted);
    font-family: var(--doc-sans);
    letter-spacing: -0.005em;
}
.doc-w h2, .doc-w h3, .doc-w .advanced-card { font-family: var(--doc-sans); }
.doc-w .badge, .doc-w .md-content code { font-family: var(--doc-mono); }

.md-content h1,.md-content h2,.md-content h3 { margin-top:1.25rem; }
.md-content pre { background:var(--bg-tertiary,#1a1a1a); padding:0.75rem; border-radius:4px; overflow-x:auto; }
.md-content code { background:var(--bg-tertiary,#1a1a1a); padding:0.1rem 0.3rem; border-radius:3px; }
.md-content table { border-collapse:collapse; width:100%; }
.md-content th,.md-content td { border:1px solid var(--border); padding:0.4rem 0.6rem; }
.md-content blockquote { border-left:3px solid var(--primary,#4a9eff); padding-left:0.75rem; color:var(--text-muted); }
.md-content ul,.md-content ol { padding-left:1.5rem; }

.ft-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    background: var(--bg-input);
    color: var(--text-muted);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.ft-chip:hover { color: var(--text); border-color: rgba(128,128,128,0.6); }
.ft-chip__count {
    font-size: 0.7rem;
    padding: 0 0.4rem;
    border-radius: 8px;
    background: rgba(128,128,128,0.18);
}
.ft-chip--active { background: var(--primary); color: #fff; border-color: var(--primary); }
.ft-chip--active .ft-chip__count { background: rgba(255,255,255,0.18); color: #fff; }

.ft-cat-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 1.25rem 0 0.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
}
.ft-cat-count {
    font-size: 0.7rem;
    background: var(--bg-input);
    border-radius: 8px;
    padding: 0 0.5rem;
    margin-left: 0.4rem;
    color: var(--text-muted);
}

.ft-status-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: capitalize;
    border: 1px solid transparent;
    white-space: nowrap;
}
.ft-status-complete        { background: rgba(34,197,94,0.12);  color: #22c55e; border-color: rgba(34,197,94,0.35); }
.ft-status-beta            { background: rgba(74,158,255,0.12); color: #4a9eff; border-color: rgba(74,158,255,0.35); }
.ft-status-stubbed         { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.35); }
.ft-status-coming-soon     { background: rgba(167,139,250,0.12); color: #a78bfa; border-color: rgba(167,139,250,0.35); }
.ft-status-needs-docs      { background: rgba(248,81,73,0.10);  color: #f85149; border-color: rgba(248,81,73,0.35); }
.ft-status-needs-tests     { background: rgba(248,81,73,0.10);  color: #f85149; border-color: rgba(248,81,73,0.35); }
.ft-status-needs-ui-polish { background: rgba(245,158,11,0.10); color: #f59e0b; border-color: rgba(245,158,11,0.35); }
.ft-status-unknown         { background: var(--bg-input); color: var(--text-muted); border-color: var(--border); }

.flag-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:1rem; margin:1rem 0; }
.flag-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem; }
.flag-card h4 { margin:0 0 0.25rem 0; font-size:0.95rem; display:flex; align-items:center; gap:0.5rem; }
.flag-card p { margin:0; font-size:0.8rem; color:var(--text-muted); }
.flag-toggle { position:relative; display:inline-block; width:40px; height:22px; }
.flag-toggle input { opacity:0; width:0; height:0; }
.flag-toggle .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:22px; transition:.2s; }
.flag-toggle .slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.2s; }
.flag-toggle input:checked + .slider { background:var(--accent, #198754); }
.flag-toggle input:checked + .slider:before { transform:translateX(18px); }
.flag-meta { font-size:0.75rem; color:var(--text-muted); margin-top:0.5rem; }
.org-section { margin-top:2rem; border-top:1px solid var(--border); padding-top:1rem; }
.custom-flag-form { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem; margin-top:1rem; }
.custom-flag-form input[type="text"] { padding:0.4rem 0.6rem; border:1px solid var(--border); border-radius:4px; background:var(--bg-input); color:var(--text); width:200px; }

.hlp-w {
    --hlp-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --hlp-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --hlp-accent: var(--primary, #4a9eff);
    --hlp-mute: var(--text-muted);
    font-family: var(--hlp-sans);
    letter-spacing: -0.005em;
}
.hlp-w .help-hero h2, .hlp-w .help-cat-title, .hlp-w .help-tile .help-title { font-family: var(--hlp-sans); }
.hlp-w .help-tile .help-meta, .hlp-w .help-hero-meta .num { font-family: var(--hlp-mono); }
.hlp-w .help-tile .help-meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.15rem; font-family: ui-monospace, Menlo, monospace; }

.help-hero {
    background: linear-gradient(180deg, rgba(88,166,255,0.06) 0%, transparent 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
}
.help-hero h2 { margin: 0 0 0.3rem 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.help-hero p { margin: 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; max-width: 720px; }
.help-hero-meta { display: flex; gap: 1.5rem; margin-top: 1rem; font-size: 0.78rem; color: var(--text-muted); }
.help-hero-meta .num { font-size: 1.3rem; font-weight: 700; color: var(--text); display: block; line-height: 1.1; }
.help-hero-search {
    width: 100%;
    padding: 0.7rem 0.95rem 0.7rem 2.4rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.9rem;
    margin-top: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b949e' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.85rem 50%;
}
.help-cat { margin-bottom: 1.5rem; }
.help-cat-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 0.6rem 0.2rem;
}
.help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.7rem; }
/* H:card_macro — bespoke .help-tile replaced with ui.help_article_card.
   Quick-view modal button is hosted as a sibling action chip layered on
   top of the card; preserves the openFeatureHelp() handler. */
.help-card-wrap { position: relative; }
.help-card-wrap .help-modal-btn {
    position: absolute; top: 0.6rem; right: 0.6rem;
    opacity: 0; transition: opacity 0.15s ease;
    background: var(--surface, var(--bg-card));
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 2px 7px; border-radius: 6px;
    font-size: 0.7rem; cursor: pointer;
    z-index: 1;
}
.help-card-wrap:hover .help-modal-btn { opacity: 1; }
.help-card-wrap .help-modal-btn:hover { background: var(--bg-input); color: var(--text); }
.help-empty {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.hlp-w {
    --hlp-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --hlp-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --hlp-accent: var(--primary, #4a9eff);
    --hlp-mute: var(--text-muted);
    font-family: var(--hlp-sans);
    letter-spacing: -0.005em;
}
.hlp-w .fh-page-back, .hlp-w .fh-sidebar, .hlp-w .fh-article, .hlp-w .fh-related { font-family: var(--hlp-sans); }
.hlp-w .fh-article-meta code, .hlp-w .fh-body code { font-family: var(--hlp-mono); }

.fh-page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    margin-bottom: 1rem;
}
.fh-page-back:hover {
    border-color: var(--primary);
    background: rgba(88,166,255,0.06);
    transform: translateX(-1px);
}
.fh-page-back svg { width: 14px; height: 14px; }

.fh-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .fh-layout { grid-template-columns: 1fr; } }

.fh-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.9rem 0.7rem;
}
.fh-sidebar-title {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    padding: 0 0.5rem 0.4rem;
}
.fh-sidebar-search {
    width: calc(100% - 0.8rem);
    margin: 0 0.4rem 0.6rem;
    padding: 0.45rem 0.65rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-size: 0.78rem;
    box-sizing: border-box;
}
.fh-cat-label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 0.6rem 0.5rem 0.2rem;
    font-weight: 700;
}
.fh-nav-link {
    display: block;
    padding: 0.38rem 0.7rem 0.38rem 0.9rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--text);
    border-left: 2px solid transparent;
    border-radius: 0 6px 6px 0;
    margin: 1px 0;
    transition: background 0.12s ease, color 0.12s ease;
}
.fh-nav-link:hover { background: var(--bg-input); }
.fh-nav-link.active {
    background: rgba(88,166,255,0.08);
    color: #79c0ff;
    border-left-color: #58a6ff;
    font-weight: 600;
}

.fh-article {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 2rem 2.25rem;
}
.fh-article-head {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.fh-article-category {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    background: rgba(88,166,255,0.12);
    color: #79c0ff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}
.fh-article h1 {
    margin: 0 0 0.4rem;
    font-size: 1.75rem;
    letter-spacing: -0.02em;
    font-weight: 700;
    color: var(--text);
}
.fh-article-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
}
.fh-article-meta code {
    font-size: 0.72rem;
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: 4px;
}

.fh-body {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text);
}
.fh-body h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 1.8rem 0 0.7rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}
.fh-body h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.3rem 0 0.5rem;
}
.fh-body h4 { font-size: 0.92rem; font-weight: 600; margin: 1rem 0 0.4rem; }
.fh-body p { margin: 0 0 0.8rem; }
.fh-body ul, .fh-body ol { margin: 0 0 0.9rem 1.2rem; padding: 0; }
.fh-body li { margin-bottom: 0.35rem; }
.fh-body code {
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
    font-family: ui-monospace, Menlo, monospace;
}
.fh-body pre {
    background: #0d1117;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    overflow-x: auto;
    font-size: 0.78rem;
    line-height: 1.55;
}
.fh-body pre code { background: transparent; padding: 0; font-size: inherit; }
.fh-body blockquote {
    border-left: 3px solid var(--primary);
    padding: 0.35rem 0.9rem;
    margin: 0.9rem 0;
    background: rgba(88,166,255,0.05);
    border-radius: 0 8px 8px 0;
    color: var(--text-muted);
}
.fh-body a { color: #79c0ff; }

.fh-related {
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
}
.fh-related-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.fh-related-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.fh-related-chips a {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text);
    font-size: 0.75rem;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.fh-related-chips a:hover {
    border-color: var(--primary);
    background: rgba(88,166,255,0.08);
    color: #79c0ff;
}

.skfx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
  .skfx-card { border: 1px solid var(--border, #ddd); border-radius: 8px; padding: 0.85rem 1rem; background: var(--card-bg, #fff);
               box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 0.45rem; }
  .skfx-card__head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
  .skfx-card__title { font-weight: 600; font-size: 0.95rem; margin:0; }
  .skfx-card__route { font-family: monospace; font-size: 0.78rem; color: var(--text-muted, #666); word-break: break-all; }
  .skfx-card__files { font-family: monospace; font-size: 0.75rem; color: var(--text-muted, #666); white-space: pre-line;
                      max-height: 3.6em; overflow: hidden; }
  .skfx-bar { height: 6px; border-radius: 3px; background: var(--border, #e5e5e5); overflow: hidden; }
  .skfx-bar__fill { height: 100%; background: #2e7d32; transition: width 0.4s ease; }
  .skfx-card__meta { display:flex; gap:0.6rem; font-size: 0.78rem; color: var(--text-muted, #666); flex-wrap: wrap; }
  .skfx-pill { display:inline-block; padding: 1px 7px; border-radius: 999px; font-size: 0.72rem; font-weight: 600;
               border: 1px solid currentColor; }
  .skfx-pill--scan-pending { color: #b8860b; }
  .skfx-pill--scan-clean   { color: #2e7d32; }
  .skfx-pill--scan-fail    { color: #b71c1c; }

  /* Wizard modal — uses .modal pattern from base.html for visual harmony. */
  .skfx-wizard__shell { background: var(--card-bg, #fff); padding: 1.4rem 1.6rem; border-radius: 10px; max-width: 640px;
                        width: 92%; max-height: 88vh; overflow-y: auto; box-shadow: 0 14px 40px rgba(0,0,0,0.25); }
  .skfx-wizard__title { margin:0 0 0.2rem; font-size: 1.2rem; }
  .skfx-wizard__steps { display:flex; gap:0.3rem; margin: 0.5rem 0 1rem; flex-wrap: wrap; }
  .skfx-wizard__step-pill { font-size: 0.72rem; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border, #ccc);
                            color: var(--text-muted, #666); }
  .skfx-wizard__step-pill.is-active { background: #0d47a1; color: #fff; border-color: #0d47a1; }
  .skfx-wizard__step-pill.is-done   { background: #2e7d32; color: #fff; border-color: #2e7d32; }
  .skfx-wizard__pane { display: none; }
  .skfx-wizard__pane.is-active { display: block; }
  .skfx-wizard__field { margin-bottom: 0.85rem; }
  .skfx-wizard__field label { display:block; font-weight:600; margin-bottom: 0.25rem; font-size:0.88rem; }
  .skfx-wizard__field input[type=text],
  .skfx-wizard__field select,
  .skfx-wizard__field textarea { width: 100%; padding: 6px 8px; font-size: 0.9rem; border: 1px solid var(--border, #ccc);
                                  border-radius: 4px; box-sizing: border-box; }
  .skfx-wizard__field textarea { font-family: monospace; min-height: 110px; }
  .skfx-wizard__radios { display:flex; gap: 0.4rem; flex-wrap: wrap; }
  .skfx-wizard__radios label { display: inline-flex; align-items:center; gap:0.3rem; padding: 5px 10px; border:1px solid var(--border,#ccc);
                               border-radius: 999px; cursor: pointer; font-weight: 500; font-size: 0.85rem; }
  .skfx-wizard__radios input[type=radio] { margin: 0; }
  .skfx-wizard__nav { display:flex; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; padding-top: 0.85rem;
                      border-top: 1px solid var(--border, #eee); }
  .skfx-wizard__synopsis { background: #f7f8fa; border:1px solid var(--border,#ddd); border-radius: 6px; padding: 0.7rem 0.85rem;
                            font-size: 0.85rem; }
  .skfx-wizard__synopsis dt { font-weight: 600; color: var(--text-muted,#666); font-size:0.78rem; text-transform:uppercase;
                              letter-spacing: 0.04em; margin-top: 0.4rem; }
  .skfx-wizard__synopsis dd { margin: 0; font-family: monospace; font-size: 0.85rem; word-break: break-all; }
  .skfx-wizard__error { color: #b71c1c; font-size: 0.85rem; margin-top: 0.5rem; min-height: 1em; }
  .skfx-wizard__ack { display:flex; align-items:flex-start; gap:0.5rem; margin-top: 0.7rem; font-size: 0.85rem; }

  .sub { color: #555; font-size: 10pt; margin-bottom: 1.2rem; }
  td.mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 9.5pt; word-break: break-all; }
  .pill { display: inline-block; padding: 1pt 7pt; border-radius: 999px; font-size: 8pt; font-weight: 700;
          border: 1px solid currentColor; }
  .pill-good   { color: #2e7d32; }
  .pill-warn   { color: #b8860b; }
  .pill-bad    { color: #b71c1c; }
  .pill-info   { color: #0d47a1; }
  .pill-mute   { color: #555; }
  .actions { margin-bottom: 1rem; }
  .actions button, .actions a {
    padding: 6pt 14pt; font-size: 11pt; cursor: pointer; text-decoration: none;
    border: 1px solid #888; background: #f6f6f8; color: #111; border-radius: 4px; margin-right: 0.4rem;
  }
  @media print {
    .actions { display: none; }
  }
  pre.detail { margin: 0; font-size: 9pt; white-space: pre-wrap; color: #444; }

.fi-banner { display:flex; align-items:center; gap:0.9rem; padding:1rem 1.25rem;
             border-radius:8px; margin:0 0 1.5rem 0; border:1px solid var(--border);
             flex-wrap:wrap; }
.fi-banner .dot { width:14px; height:14px; border-radius:50%; background:currentColor; flex-shrink:0; }
.fi-banner .label { font-weight:700; text-transform:uppercase; letter-spacing:0.06em; font-size:0.82rem; }
.fi-banner .msg { color:var(--text); font-size:0.9rem; flex:1 1 320px; }
.fi-banner.green  { background:rgba(39,174,96,0.08); border-color:rgba(39,174,96,0.35); color:#27ae60; }
.fi-banner.yellow { background:rgba(243,156,18,0.08); border-color:rgba(243,156,18,0.4); color:#f39c12; }
.fi-banner.red    { background:rgba(231,76,60,0.08); border-color:rgba(231,76,60,0.4); color:#e74c3c; }
.fi-banner.blue   { background:rgba(52,152,219,0.08); border-color:rgba(52,152,219,0.4); color:#3498db; }
.fi-banner button { font-size:0.85rem; }

.fi-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
            gap:0.75rem; margin-bottom:1.5rem; }
.dash-overview-card { background:var(--card); border:1px solid var(--border);
                      border-radius:8px; padding:1rem; text-align:left; }
.dash-overview-card .val { font-size:1.9rem; font-weight:700; line-height:1.1; }
.dash-overview-card .lbl { font-size:0.74rem; color:var(--text-muted);
                           text-transform:uppercase; letter-spacing:0.06em;
                           margin-top:0.35rem; }
.dash-overview-card .val.green  { color:#27ae60; }
.dash-overview-card .val.yellow { color:#f39c12; }
.dash-overview-card .val.red    { color:#e74c3c; }
.dash-overview-card .val.blue   { color:#3498db; }

.fi-panel { background:var(--card); border:1px solid var(--border); border-radius:8px;
            padding:1.25rem; margin-bottom:1.5rem; }
.fi-panel h3 { margin:0 0 0.75rem; font-size:0.95rem; }

.fi-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.fi-table th { text-align:left; padding:0.55rem 0.75rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted); text-transform:uppercase;
               letter-spacing:0.05em; }
.fi-table td { padding:0.55rem 0.75rem; border-bottom:1px solid var(--border);
               vertical-align:top; }
.fi-table .mono { font-family:var(--font-mono, monospace); font-size:0.8rem; }
.fi-table tr:hover td { background:rgba(127,127,127,0.04); }
.fi-table td.num { text-align:right; font-variant-numeric:tabular-nums; }

.status-chip { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px;
               font-size:0.72rem; font-weight:600; text-transform:uppercase;
               letter-spacing:0.05em; }
.status-chip.ready        { background:rgba(39,174,96,0.12); color:#27ae60; }
.status-chip.below_cutoff { background:rgba(231,76,60,0.1);  color:#e74c3c; }
.status-chip.legacy_only  { background:rgba(243,156,18,0.1); color:#f39c12; }
.status-chip.stale        { background:rgba(127,127,127,0.12); color:#888; }

.fi-filters { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:0.75rem; }
.fi-filters a { padding:0.3rem 0.7rem; border:1px solid var(--border); border-radius:999px;
                font-size:0.78rem; color:var(--text-muted); text-decoration:none; }
.fi-filters a.active { background:var(--accent, #3498db); color:#fff; border-color:transparent; }

.fi-pagination { display:flex; gap:0.4rem; align-items:center; justify-content:flex-end;
                 margin-top:0.75rem; font-size:0.82rem; }
.fi-pagination a, .fi-pagination span { padding:0.3rem 0.7rem; border:1px solid var(--border);
                                         border-radius:4px; text-decoration:none; color:var(--text); }
.fi-pagination .current { background:var(--accent, #3498db); color:#fff; border-color:transparent; }
.fi-pagination .disabled { color:var(--text-muted); opacity:0.5; pointer-events:none; }

.toggle-modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55);
                   z-index:1000; align-items:center; justify-content:center; }
.toggle-modal-bg.open { display:flex; }
.toggle-modal { background:var(--card); border:1px solid var(--border); border-radius:10px;
                padding:1.5rem; max-width:520px; width:90%; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.toggle-modal h3 { margin:0 0 0.5rem; }
.toggle-modal .warn { padding:0.75rem 1rem; border-radius:6px; margin:0.75rem 0;
                      background:rgba(231,76,60,0.08); border:1px solid rgba(231,76,60,0.3); font-size:0.85rem; }
.toggle-modal label { display:block; font-size:0.82rem; margin:0.75rem 0 0.3rem; }
.toggle-modal input[type=text] { width:100%; padding:0.5rem 0.7rem; border:1px solid var(--border);
                                  border-radius:4px; font-size:0.9rem; background:var(--bg); color:var(--text); }
.toggle-modal .actions { display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem; }

/* B3c — Recent Identity Rejections panel. */
.fi-rej-pill { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px;
               font-size:0.72rem; font-weight:600; margin-left:0.5rem; }
.fi-rej-pill.zero  { background:rgba(127,127,127,0.12); color:#888; }
.fi-rej-pill.warn  { background:rgba(243,156,18,0.12); color:#f39c12; }
.fi-rej-pill.crit  { background:rgba(231,76,60,0.12);  color:#e74c3c; }

.fi-rej-table { width:100%; border-collapse:collapse; font-size:0.83rem; }
.fi-rej-table th { text-align:left; padding:0.5rem 0.7rem; border-bottom:1px solid var(--border);
                   font-size:0.72rem; color:var(--text-muted); text-transform:uppercase;
                   letter-spacing:0.05em; }
.fi-rej-table td { padding:0.5rem 0.7rem; border-bottom:1px solid var(--border); vertical-align:top; }
.fi-rej-table tr:hover td { background:rgba(127,127,127,0.04); }
.fi-rej-table .mono { font-family:var(--font-mono, monospace); font-size:0.78rem; }
.fi-rej-table .reason { max-width:340px; }

.fi-rej-empty { padding:1.25rem; text-align:center; color:var(--text-muted);
                font-size:0.88rem; }
.fi-rej-empty .hint { font-size:0.78rem; margin-top:0.4rem; }
.fi-rej-transport-grpc { background:rgba(52,152,219,0.12); color:#3498db; }
.fi-rej-transport-ws   { background:rgba(155,89,182,0.14); color:#9b59b6; }

.flt-trm-w {
  --flt-trm-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --flt-trm-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --flt-trm-bg-primary: oklch(0.15 0 0);
  --flt-trm-bg-secondary: oklch(0.18 0.005 240);
  --flt-trm-bg-tertiary: oklch(0.22 0.008 250);
  --flt-trm-text-primary: oklch(0.95 0.005 240);
  --flt-trm-text-secondary: oklch(0.70 0.01 240);
  --flt-trm-border: oklch(0.30 0.01 240);
  --flt-trm-success: oklch(0.65 0.15 145);
  --flt-trm-danger: oklch(0.60 0.18 25);
  --flt-trm-warning: oklch(0.75 0.12 85);
  --flt-trm-info: oklch(0.65 0.15 240);
  --flt-trm-accent: oklch(0.70 0.18 280);
  --flt-trm-radius: 6px;
  --flt-trm-transition: 0.2s ease;
}
.flt-trm-w * { font-family: var(--flt-trm-font-sans); }
.flt-trm-w code,
.flt-trm-w .mono { font-family: var(--flt-trm-font-mono); }
.flt-trm-w {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem;
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.flt-trm-header {
  margin-bottom: 1.5rem;
}
.flt-trm-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--flt-trm-text-primary);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
}
.flt-trm-subtitle {
  font-size: 0.85rem;
  color: var(--flt-trm-text-secondary);
  line-height: 1.5;
}
.flt-trm-grid {
  display: grid;
  grid-template-columns: minmax(340px, 420px) 1fr;
  gap: 1rem;
}
@media (max-width: 960px) {
  .flt-trm-grid { grid-template-columns: 1fr; }
}
.flt-trm-card {
  background: var(--flt-trm-bg-secondary);
  border: 1px solid var(--flt-trm-border);
  border-radius: var(--flt-trm-radius);
  padding: 1rem;
}
.flt-trm-card h3 {
  margin-top: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--flt-trm-text-primary);
}
.flt-trm-target-row { cursor: pointer; }
.flt-trm-target-row:hover { background: rgba(255,255,255,0.03); }
.flt-trm-stat-card {
  background: var(--flt-trm-bg-secondary);
  border: 1px solid var(--flt-trm-border);
  border-radius: var(--flt-trm-radius);
  padding: 0.55rem 0.9rem;
  min-width: 92px;
}
.flt-trm-stat-label {
  font-size: 0.62rem;
  color: var(--flt-trm-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-family: var(--flt-trm-font-mono);
}
.flt-trm-stat-val {
  font-size: 1.2rem;
  font-weight: 700;
  font-family: var(--flt-trm-font-mono);
  color: var(--flt-trm-text-primary);
}
.flt-trm-filter-row {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.5rem;
}
.flt-trm-filter-row select, .flt-trm-filter-row input[type=text] {
  background: var(--flt-trm-bg-primary); color: var(--flt-trm-text-primary);
  border: 1px solid var(--flt-trm-border); border-radius: 4px;
  padding: 0.25rem 0.4rem; font-size: 0.85rem;
}
.flt-trm-machine-list {
  max-height: 52vh; overflow-y: auto;
  border: 1px solid var(--flt-trm-border); border-radius: 4px;
  background: var(--flt-trm-bg-primary);
}
.flt-trm-machine-list table { width: 100%; border-collapse: collapse; }
.flt-trm-machine-list th, .flt-trm-machine-list td {
  padding: 0.25rem 0.5rem; font-size: 0.8rem;
  border-bottom: 1px solid var(--flt-trm-border);
  text-align: left;
}
.flt-trm-machine-list th {
  position: sticky; top: 0; background: var(--flt-trm-bg-secondary);
  cursor: pointer; user-select: none;
  color: var(--flt-trm-text-primary);
  font-weight: 600;
}
.flt-trm-badge {
  display: inline-block; padding: 0.1rem 0.45rem;
  border-radius: 3px; font-size: 0.7rem; font-weight: 600;
  font-family: var(--flt-trm-font-mono);
}
.flt-trm-results { display: none; margin-top: 1rem; }
.flt-trm-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(640px, 95vw);
  background: var(--flt-trm-bg-secondary); border-left: 1px solid var(--flt-trm-border);
  padding: 1rem; overflow-y: auto; z-index: 1000;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
  display: none;
}
.flt-trm-drawer h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--flt-trm-text-primary);
}
.flt-trm-drawer pre {
  background: var(--flt-trm-bg-primary); border: 1px solid var(--flt-trm-border);
  border-radius: 4px; padding: 0.6rem; font-size: 0.75rem;
  white-space: pre-wrap; word-break: break-word; max-height: 60vh;
  overflow-y: auto;
  font-family: var(--flt-trm-font-mono);
  color: var(--flt-trm-text-primary);
}
.flt-trm-catalog-modal {
  display: none;
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 999;
  align-items: center; justify-content: center;
}
.flt-trm-catalog-inner {
  background: var(--flt-trm-bg-secondary); border: 1px solid var(--flt-trm-border);
  border-radius: var(--flt-trm-radius); padding: 1rem;
  width: min(720px, 95vw); max-height: 80vh; overflow-y: auto;
}
.flt-trm-cat-item {
  padding: 0.5rem; border: 1px solid var(--flt-trm-border);
  border-radius: 4px; margin-bottom: 0.3rem; cursor: pointer;
  transition: background var(--flt-trm-transition);
}
.flt-trm-cat-item:hover { background: var(--flt-trm-bg-primary); }
.flt-trm-cat-item code {
  background: var(--flt-trm-bg-primary); padding: 0.05rem 0.3rem; border-radius: 3px;
  font-size: 0.75rem;
  font-family: var(--flt-trm-font-mono);
  color: var(--flt-trm-accent);
}
.flt-trm-btn {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--flt-trm-bg-tertiary);
  border: 1px solid var(--flt-trm-border);
  border-radius: 4px;
  color: var(--flt-trm-text-primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all var(--flt-trm-transition);
  cursor: pointer;
}
.flt-trm-btn:hover {
  background: var(--flt-trm-bg-primary);
  border-color: var(--flt-trm-text-secondary);
}

.ft-audit-cmd {
        font-family: ui-monospace, Menlo, Consolas, monospace;
        font-size: 0.78rem;
        white-space: pre-wrap;
        word-break: break-word;
        max-width: 480px;
    }
    .ft-audit-flag {
        display: inline-block;
        padding: 0.05rem 0.35rem;
        border-radius: 3px;
        font-size: 0.7rem;
        font-weight: 600;
    }
    .ft-audit-flag-dry { background: #58a6ff20; color: #58a6ff; }
    .ft-audit-flag-destr { background: #f8514920; color: #f85149; }

.gl-set-w {
    --gsw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --gsw-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --gsw-on: #22c55e;
    --gsw-off: #ef4444;
    --gsw-warn: #f59e0b;
    --gsw-info: #38bdf8;
    --gsw-accent: var(--primary, #4a9eff);
    --gsw-mute: var(--text-muted);
    font-family: var(--gsw-sans);
    letter-spacing: -0.005em;
}

/* ── Compact header bar ────────────────────────────────────────── */
.gl-set-w .gsw-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.gl-set-w .gsw-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.gl-set-w .gsw-hint {
    font-family: var(--gsw-mono); font-size: 0.66rem;
    color: var(--gsw-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1rem; padding: 0;
}

/* ── Form sections ─────────────────────────────────────────────── */
.gl-set-w .gsw-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1rem 1.2rem; margin-bottom: 2rem;
}
.gl-set-w .gsw-section h3 {
    font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem;
    color: var(--text);
}
.gl-set-w .gsw-section h4 {
    font-size: 0.8rem; font-weight: 600; margin: 1.2rem 0 0.5rem;
    color: var(--gsw-mute); text-transform: uppercase; letter-spacing: 0.08em;
}
.gl-set-w .gsw-section p {
    font-size: 0.82rem; color: var(--gsw-mute); margin-bottom: 1rem; line-height: 1.4;
}
.gl-set-w .gsw-section small {
    font-size: 0.75rem; color: var(--gsw-mute);
}
.gl-set-w .gsw-section code {
    font-family: var(--gsw-mono); font-size: 0.75rem;
    background: rgba(255,255,255,0.05); padding: 1px 4px; border-radius: 3px;
}
.gl-set-w .gsw-section a {
    color: var(--gsw-accent);
}

.gl-set-w .gsw-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem; margin-bottom: 1rem;
}
.gl-set-w .gsw-field {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.gl-set-w .gsw-field label {
    font-size: 0.8rem; font-weight: 500; color: var(--text);
}
.gl-set-w .gsw-input {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--gsw-mono); font-size: 0.74rem;
}
.gl-set-w .gsw-input:focus { outline: none; border-color: var(--gsw-accent); }
.gl-set-w .gsw-select {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--gsw-sans); font-size: 0.82rem;
}
.gl-set-w .gsw-select:focus { outline: none; border-color: var(--gsw-accent); }

.gl-set-w .gsw-pwd-field {
    display: flex; gap: 0.35rem;
}
.gl-set-w .gsw-pwd-field input {
    flex: 1;
}

/* ── Feature/plugin cards ──────────────────────────────────────── */
.gl-set-w .gsw-card {
    background: rgba(255,255,255,0.02); padding: 0.6rem 0.8rem;
    border-radius: 4px; border: 1px solid var(--border);
    display: flex; align-items: center; gap: 0.6rem;
}
.gl-set-w .gsw-card-title {
    font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.gl-set-w .gsw-card-desc {
    font-size: 0.75rem; color: var(--gsw-mute);
}

/* ── Toggle switch ─────────────────────────────────────────────── */
.gl-set-w .toggle-switch { position:relative; display:inline-block; width:40px; height:22px; flex-shrink: 0; }
.gl-set-w .toggle-switch input { opacity:0; width:0; height:0; }
.gl-set-w .toggle-slider {
    position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
    background:#555; border-radius:22px; transition:0.2s;
}
.gl-set-w .toggle-slider:before {
    content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
    background:#fff; border-radius:50%; transition:0.2s;
}
.gl-set-w .toggle-switch input:checked + .toggle-slider { background:var(--gsw-accent); }
.gl-set-w .toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); }

/* ── Email intake log table ────────────────────────────────────── */
.gl-set-w .gsw-tbl { width: 100%; border-collapse: collapse; font-size: 0.80rem; }
.gl-set-w .gsw-tbl thead th {
    text-align: left; padding: 8px 9px;
    border-bottom: 1px solid var(--border);
    font-family: var(--gsw-mono);
    font-size: 0.62rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--gsw-mute);
    font-weight: 600; white-space: nowrap;
}
.gl-set-w .gsw-tbl tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.gl-set-w .gsw-tbl tbody tr:hover { background: rgba(74,158,255,0.06); }
.gl-set-w .gsw-tbl tbody td {
    padding: 8px 9px; vertical-align: middle; line-height: 1.3;
}
.gl-set-w .gsw-tbl code { font-family: var(--gsw-mono); font-size: 0.72rem; }
.gl-set-w .gsw-status { font-family: var(--gsw-mono); font-size: 0.70rem; }
.gl-set-w .gsw-status.on { color: var(--gsw-on); }
.gl-set-w .gsw-status.info { color: var(--gsw-info); }
.gl-set-w .gsw-status.warn { color: var(--gsw-warn); }

/* ── Test result ───────────────────────────────────────────────── */
.gl-set-w .gsw-test {
    font-size: 0.82rem; font-family: var(--gsw-mono);
}
.gl-set-w .gsw-test.ok { color: var(--gsw-on); }
.gl-set-w .gsw-test.err { color: var(--gsw-off); }

/* Two-column layout — content on the left, sticky ToC on the right.
   Same pattern as /org/<slug>/settings (v6.87.306). */
.gl-set-w .gs-layout { display:grid; grid-template-columns:minmax(0, 1fr) 220px; gap:1.5rem; align-items:start; }
@media (max-width: 960px) { .gl-set-w .gs-layout { grid-template-columns:1fr; } .gl-set-w .gs-toc { display:none; } }
.gl-set-w .gs-toc { position:sticky; top:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:0.7rem 0.8rem; max-height:calc(100vh - 2rem); overflow:auto; }
.gl-set-w .gs-toc-title { font-size:0.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; margin-bottom:0.5rem; }
.gl-set-w .gs-toc a { display:block; padding:0.3rem 0.5rem; border-radius:4px; color:var(--text); text-decoration:none; font-size:0.78rem; line-height:1.3; }
.gl-set-w .gs-toc a:hover { background:rgba(255,255,255,0.04); color:var(--gsw-accent); }
.gl-set-w h3[id] { scroll-margin-top:1rem; }

  .meta { color:#666; font-size:0.85em; margin-bottom:1rem; }
  .sig { margin-top:2rem; font-family:monospace; font-size:0.8em; color:#444; border-top:1px solid #999; padding-top:0.5rem; }
  @media print { body { margin:1cm; } }

  .summary { display:flex; gap:1rem; margin:1rem 0; }
  .summary div { padding:0.5rem 1rem; border-radius:6px; border:1px solid #ccc; }
  .pass { background:#e6ffe6; }
  .fail { background:#ffe6e6; }
  .na { background:#eee; }
  .r-PASS { color:#080; font-weight:bold; }
  .r-FAIL { color:#c00; font-weight:bold; }
  .r-NA { color:#666; }
  .footer { margin-top:2rem; font-family:monospace; font-size:0.75em; color:#555; border-top:1px solid #999; padding-top:0.5rem; }
  @media print { body { margin:1cm; } }

/* ── Governance reports visual harmony (scoped under .gvrt-w) ─────── */
.gvrt-w {
    --gvrt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --gvrt-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --gvrt-mute: var(--text-muted);
    --gvrt-fg: var(--text);
    --gvrt-bd: var(--border);
    --gvrt-card: var(--bg-card);
    --gvrt-accent: var(--primary, #4a9eff);
    font-family: var(--gvrt-sans);
    color: var(--gvrt-fg);
    letter-spacing: -0.005em;
}

.gvrt-w .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.gvrt-w h2 {
    font-family: var(--gvrt-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.gvrt-w .text-muted {
    color: var(--gvrt-mute);
    font-size: 0.85rem;
}

/* Generator buttons */
.gvrt-w .generators-grid {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.gvrt-w .generators-grid form {
    margin: 0;
}

.gvrt-w .generators-grid .btn {
    font-family: var(--gvrt-sans);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
}

/* Reports table */
.gvrt-w .reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.gvrt-w .reports-table thead th {
    font-family: var(--gvrt-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gvrt-mute);
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--gvrt-bd);
}

.gvrt-w .reports-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--gvrt-bd);
}

.gvrt-w .reports-table tbody tr:last-child td {
    border-bottom: none;
}

.gvrt-w .reports-table .mono {
    font-family: var(--gvrt-mono);
    font-size: 0.7rem;
}

.gvrt-w .reports-table .pass {
    color: #2ecc71;
    font-weight: 600;
}

.gvrt-w .reports-table .fail {
    color: #e74c3c;
    font-weight: 600;
}

.gvrt-w .reports-table .btn-small {
    font-family: var(--gvrt-sans);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

/* Card wrapper */
.gvrt-w .card {
    background: var(--gvrt-card);
    border: 1px solid var(--gvrt-bd);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.gvrt-w .card h3 {
    font-family: var(--gvrt-sans);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

.inbox-w {
    --ix-fg: var(--text);
    --ix-mute: var(--text-muted);
    --ix-bg: var(--bg);
    --ix-card: var(--bg-card);
    --ix-bd: var(--border);
    --ix-crit: #ef4444;
    --ix-warn: #f59e0b;
    --ix-info: #38bdf8;
    --ix-ok:   #22c55e;
    --ix-accent: var(--primary, #4a9eff);
    --ix-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ix-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--ix-sans);
    color: var(--ix-fg);
    letter-spacing: -0.005em;
}

/* Top stat-pill row */
.inbox-w .ix-stat-pills {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin: 0.25rem 0 0.85rem;
}
.inbox-w .ix-pill {
    font-family: var(--ix-mono); font-size: 0.72rem; padding: 4px 10px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--ix-bd);
    display: inline-flex; gap: 0.45rem; align-items: center; line-height: 1.1;
}
.inbox-w .ix-pill b { font-weight: 700; }
.inbox-w .ix-pill .lbl {
    color: var(--ix-mute); text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 0.62rem;
}
.inbox-w .ix-pill.crit { color: var(--ix-crit); border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.07); }
.inbox-w .ix-pill.warn { color: var(--ix-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.inbox-w .ix-pill.info { color: var(--ix-info); border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.07); }
.inbox-w .ix-pill.tot  { color: var(--ix-fg);  border-color: var(--ix-bd); }

/* Section labels (mono uppercase) */
.inbox-w .ix-section-label {
    font-family: var(--ix-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ix-mute);
    margin: 1.1rem 0 0.45rem;
    font-weight: 600;
    display: flex; align-items: baseline; gap: 0.5rem;
}
.inbox-w .ix-section-label .count {
    color: var(--ix-fg);
    font-weight: 700;
}

/* Inbox table */
.inbox-w .ix-tbl-wrap {
    background: var(--ix-card); border: 1px solid var(--ix-bd);
    border-radius: 6px; overflow-x: auto;
}
.inbox-w table.ix-tbl { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.inbox-w table.ix-tbl thead th {
    text-align: left; padding: 7px 10px;
    border-bottom: 1px solid var(--ix-bd);
    font-family: var(--ix-mono); font-size: 0.66rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--ix-mute);
    font-weight: 600; white-space: nowrap; background: var(--ix-card);
}
.inbox-w table.ix-tbl tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
    border-left: 4px solid transparent;
}
.inbox-w table.ix-tbl tbody tr:hover { background: rgba(74,158,255,0.06); }
.inbox-w table.ix-tbl tbody td { padding: 9px 10px; vertical-align: middle; line-height: 1.25; }
.inbox-w table.ix-tbl tbody tr.sev-err  { border-left-color: var(--ix-crit); }
.inbox-w table.ix-tbl tbody tr.sev-warn { border-left-color: var(--ix-warn); }
.inbox-w table.ix-tbl tbody tr.sev-ok   { border-left-color: var(--ix-info); }

/* Severity compact mono pill — also styled as a link to filter the inbox
   to that severity. text-decoration:none keeps the underline off so it
   still reads as a chip. cursor:pointer signals interactivity. */
.inbox-w .ix-sev {
    display: inline-block;
    font-family: var(--ix-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid currentColor;
    line-height: 1.1;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.inbox-w a.ix-sev:hover { filter: brightness(1.15); }
.inbox-w .ix-sev.crit { color: var(--ix-crit); background: rgba(239,68,68,0.08); }
.inbox-w .ix-sev.warn { color: var(--ix-warn); background: rgba(245,158,11,0.08); }
.inbox-w .ix-sev.info { color: var(--ix-info); background: rgba(56,189,248,0.08); }
.inbox-w .ix-sev.ok   { color: var(--ix-ok);   background: rgba(34,197,94,0.08); }

.inbox-w table.ix-tbl td.ix-age {
    font-family: var(--ix-mono); font-size: 0.72rem; color: var(--ix-mute);
    white-space: nowrap;
}
.inbox-w table.ix-tbl td.ix-cust { color: var(--ix-mute); }
.inbox-w table.ix-tbl td.ix-target { font-family: var(--ix-mono); font-size: 0.74rem; color: var(--ix-mute); }

/* Action cluster (Open / Snooze / Dismiss) */
.inbox-w .ix-actions { display: inline-flex; gap: 0.3rem; align-items: center; }
.inbox-w .ix-iconbtn {
    background: transparent;
    border: 1px solid var(--ix-bd);
    color: var(--ix-mute);
    border-radius: 3px;
    padding: 2px 7px;
    font-family: var(--ix-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1.3;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.inbox-w .ix-iconbtn:hover { color: var(--ix-fg); border-color: var(--ix-accent); }
.inbox-w .ix-iconbtn.ix-del:hover { color: var(--ix-crit); border-color: var(--ix-crit); }

@media (max-width: 768px) {
    .inbox-w table.ix-tbl thead th { font-size: 0.6rem; padding: 5px 6px; }
    .inbox-w table.ix-tbl tbody td { padding: 7px 6px; }
}

.detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.detail-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1rem; }
.detail-card h3 { font-size:0.95rem; margin-bottom:0.75rem; color:var(--primary); }
.field-group { margin-bottom:0.75rem; }
.field-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.field-value { font-size:0.9rem; margin-top:0.15rem; white-space:pre-wrap; }
.sev-low { color:#46a758; }
.sev-medium { color:#f1c40f; }
.sev-high { color:#e67e22; }
.sev-critical { color:#e74c3c; font-weight:700; }
.badge-open { background:rgba(231,76,60,0.15); color:#e74c3c; }
.badge-investigating { background:rgba(241,196,15,0.15); color:#f1c40f; }
.badge-identified { background:rgba(52,152,219,0.15); color:#3498db; }
.badge-monitoring { background:rgba(155,89,182,0.15); color:#9b59b6; }
.badge-resolved { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-closed { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.timeline-list { list-style:none; padding:0; margin:0; position:relative; padding-left:1.5rem; }
.timeline-list::before { content:''; position:absolute; left:0.45rem; top:0; bottom:0; width:2px; background:var(--border); }
.timeline-item { position:relative; margin-bottom:1rem; padding-left:1rem; }
.timeline-item::before { content:''; position:absolute; left:-1.1rem; top:0.4rem; width:10px; height:10px; border-radius:50%; background:var(--primary); border:2px solid var(--bg-card); }
.timeline-item .tl-time { font-size:0.72rem; color:var(--text-muted); }
.timeline-item .tl-action { font-weight:600; font-size:0.85rem; }
.timeline-item .tl-by { font-size:0.78rem; color:var(--text-muted); }
.timeline-item .tl-notes { font-size:0.82rem; margin-top:0.2rem; color:var(--text); }
.action-bar { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; }
.linked-item { display:inline-block; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:0.3rem 0.6rem; font-size:0.8rem; margin:0.2rem; }

.inc-lst-w {
    --il-fg: var(--text);
    --il-mute: var(--text-muted);
    --il-bg: var(--bg);
    --il-card: var(--bg-card, var(--card-bg));
    --il-bd: var(--border, var(--border-color));
    --il-crit: #ef4444;
    --il-warn: #f59e0b;
    --il-info: #38bdf8;
    --il-ok: #22c55e;
    --il-accent: var(--primary, #4a9eff);
    --il-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --il-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--il-sans);
    color: var(--il-fg);
    letter-spacing: -0.005em;
}

.inc-lst-w h2 {
    font-family: var(--il-sans);
    letter-spacing: -0.01em;
}

/* ── Stat pill row ──────────────────────────────────────────────── */
.inc-lst-w .il-stats {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin: 0.2rem 0 1rem;
}
.inc-lst-w .il-pill {
    font-family: var(--il-mono); font-size: 0.75rem;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--il-bd);
    display: inline-flex; gap: 0.45rem; align-items: center; line-height: 1.1;
}
.inc-lst-w .il-pill b { font-weight: 700; }
.inc-lst-w .il-pill .lbl {
    color: var(--il-mute); text-transform: uppercase;
    letter-spacing: 0.18em; font-size: 0.62rem; font-weight: 500;
}
.inc-lst-w .il-pill.crit { color: var(--il-crit); border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.07); }
.inc-lst-w .il-pill.warn { color: var(--il-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.inc-lst-w .il-pill.info { color: var(--il-info); border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.07); }
.inc-lst-w .il-pill.ok   { color: var(--il-ok);   border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.07); }
.inc-lst-w .il-pill.acc  { color: var(--il-accent); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.07); }

/* ── Toolbar / filter bar ───────────────────────────────────────── */
.inc-lst-w .il-tb {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;
    padding: 0.4rem 0; margin-bottom: 0.6rem;
}
.inc-lst-w .il-tb select {
    background: var(--il-card); border: 1px solid var(--il-bd);
    border-radius: 4px; padding: 0.4rem 0.7rem;
    font-family: var(--il-mono); font-size: 0.72rem; color: var(--il-fg);
    cursor: pointer;
}
.inc-lst-w .il-tb select:hover { border-color: var(--il-accent); }

/* ── Table ──────────────────────────────────────────────────────── */
.inc-lst-w .il-table-wrap {
    background: var(--il-card); border: 1px solid var(--il-bd);
    border-radius: 6px; overflow-x: auto;
}
.inc-lst-w .il-table-wrap table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.inc-lst-w .il-table-wrap thead th {
    text-align: left; padding: 8px 10px;
    background: var(--il-card);
    border-bottom: 1px solid var(--il-bd);
    font-family: var(--il-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--il-mute);
    font-weight: 600; white-space: nowrap;
}
.inc-lst-w .il-table-wrap tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.3;
}
.inc-lst-w .il-table-wrap tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s; cursor: pointer;
}
.inc-lst-w .il-table-wrap tbody tr:hover { background: rgba(74,158,255,0.06); }

/* ── Severity pills ─────────────────────────────────────────────── */
.inc-lst-w .il-sev {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--il-mono); font-size: 0.66rem;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid var(--il-bd); line-height: 1.1;
    background: rgba(255,255,255,0.04);
}
.inc-lst-w .il-sev.low { color: var(--il-ok); border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.10); }
.inc-lst-w .il-sev.medium { color: var(--il-warn); border-color: rgba(245,158,11,0.45); background: rgba(245,158,11,0.10); }
.inc-lst-w .il-sev.high { color: #e67e22; border-color: rgba(230,126,34,0.45); background: rgba(230,126,34,0.10); }
.inc-lst-w .il-sev.critical { color: var(--il-crit); border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.10); }

/* ── Status badges ──────────────────────────────────────────────── */
.inc-lst-w .il-badge {
    display: inline-block; font-family: var(--il-mono); font-size: 0.66rem;
    padding: 3px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.inc-lst-w .il-badge.open { background: rgba(231,76,60,0.15); color: #e74c3c; }
.inc-lst-w .il-badge.investigating { background: rgba(241,196,15,0.15); color: #f1c40f; }
.inc-lst-w .il-badge.identified { background: rgba(52,152,219,0.15); color: #3498db; }
.inc-lst-w .il-badge.monitoring { background: rgba(155,89,182,0.15); color: #9b59b6; }
.inc-lst-w .il-badge.resolved { background: rgba(70,167,88,0.15); color: #46a758; }
.inc-lst-w .il-badge.closed { background: rgba(139,143,163,0.15); color: #8b8fa3; }

/* ── Modal ──────────────────────────────────────────────────────── */
.inc-lst-w .modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); z-index: 1000;
    align-items: center; justify-content: center;
}
.inc-lst-w .modal-box {
    background: var(--il-card); border: 1px solid var(--il-bd);
    border-radius: 8px; padding: 1.5rem;
    max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto;
}
.inc-lst-w .modal-box label {
    font-family: var(--il-sans); font-size: 0.8rem; font-weight: 500;
}
.inc-lst-w .modal-box input,
.inc-lst-w .modal-box select,
.inc-lst-w .modal-box textarea {
    background: var(--il-bg); border: 1px solid var(--il-bd);
    border-radius: 4px; padding: 0.5rem;
    font-family: var(--il-sans); font-size: 0.85rem; color: var(--il-fg);
}

/* Staggered row fade-in */
@keyframes il-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.inc-lst-w .il-table-wrap tbody tr {
    animation: il-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.inc-lst-w .il-table-wrap tbody tr:nth-child(1) { animation-delay: 0ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(2) { animation-delay: 50ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(3) { animation-delay: 100ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(4) { animation-delay: 150ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(5) { animation-delay: 200ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(6) { animation-delay: 250ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(7) { animation-delay: 300ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(8) { animation-delay: 350ms; }
.inc-lst-w .il-table-wrap tbody tr:nth-child(n+9) { animation: none; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.filter-btn:hover {
    background:#f5f5f5;
}

.filter-btn.active {
    background:#111;
    color:#fff;
    border-color:#111;
}

.integration-card {
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:1.5rem;
    background:#fff;
    transition:box-shadow 0.2s,transform 0.2s;
    cursor:pointer;
    position:relative;
}

.integration-card:hover {
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    transform:translateY(-2px);
}

.integration-card.installed {
    border-color:#4CAF50;
    background:#f9fff9;
}

.integration-logo {
    width:48px;
    height:48px;
    border-radius:8px;
    background:#f5f5f5;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1rem;
    font-size:1.5rem;
}

.integration-logo img {
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:8px;
}

.integration-name {
    font-size:1.1rem;
    font-weight:600;
    color:#111;
    margin-bottom:0.5rem;
}

.integration-description {
    font-size:0.9rem;
    color:#666;
    line-height:1.5;
    margin-bottom:1rem;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.integration-meta {
    display:flex;
    align-items:center;
    gap:0.75rem;
    margin-bottom:1rem;
    flex-wrap:wrap;
}

.category-badge {
    display:inline-block;
    padding:0.25rem 0.75rem;
    background:#f5f5f5;
    color:#666;
    border-radius:4px;
    font-size:0.8rem;
    font-weight:500;
    text-transform:capitalize;
}

.status-badge {
    display:inline-block;
    padding:0.25rem 0.75rem;
    border-radius:4px;
    font-size:0.8rem;
    font-weight:500;
}

.status-badge.installed {
    background:#e8f5e9;
    color:#2e7d32;
}

.status-badge.not-installed {
    background:#f5f5f5;
    color:#666;
}

.integration-actions {
    display:flex;
    gap:0.5rem;
}






.int-w {
    --int-font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --int-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --int-bg-card: #0d1117;
    --int-bg-elevated: #161b22;
    --int-bg-input: #010409;
    --int-border: #30363d;
    --int-text: #c9d1d9;
    --int-text-muted: #8b949e;
    --int-text-dim: #6e7681;
    --int-primary: #58a6ff;
    --int-primary-bg: rgba(88, 166, 255, 0.15);
    --int-success: #3fb950;
    --int-success-bg: rgba(63, 185, 80, 0.15);
    --int-warn: #d29922;
    --int-warn-bg: rgba(210, 153, 34, 0.15);
    --int-danger: #f85149;
    --int-danger-bg: rgba(248, 81, 73, 0.15);
    --int-radius-sm: 6px;
    --int-radius-md: 12px;
    --int-radius-lg: 16px;
    --int-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --int-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --int-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    font-family: var(--int-font-sans);
    color: var(--int-text);
    animation: int-fade-in 0.4s ease-out;
}

@keyframes int-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.int-w * {
    box-sizing: border-box;
}

.int-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.int-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--int-text);
}

.int-hint {
    font-size: 0.9rem;
    color: var(--int-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.int-card {
    background: var(--int-bg-card);
    border: 1px solid var(--int-border);
    border-radius: var(--int-radius-md);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--int-shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
    animation: int-fade-in 0.5s ease-out backwards;
}

.int-card:hover {
    border-color: var(--int-text-dim);
    box-shadow: var(--int-shadow-md);
}

.int-card:nth-child(2) { animation-delay: 0.1s; }
.int-card:nth-child(3) { animation-delay: 0.2s; }

.int-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.int-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.int-badge {
    font-family: var(--int-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.int-badge.connected {
    background: var(--int-success-bg);
    color: var(--int-success);
    border: 1px solid var(--int-success);
}

.int-badge.paused {
    background: var(--int-warn-bg);
    color: var(--int-warn);
    border: 1px solid var(--int-warn);
}

.int-badge.not-configured {
    background: rgba(110, 118, 129, 0.15);
    color: var(--int-text-dim);
    border: 1px solid var(--int-text-dim);
}

.int-card-desc {
    font-size: 0.9rem;
    color: var(--int-text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.int-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.int-stat {
    background: var(--int-bg-elevated);
    border: 1px solid var(--int-border);
    border-radius: var(--int-radius-sm);
    padding: 0.75rem;
    text-align: center;
}

.int-stat-label {
    font-family: var(--int-font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--int-text-dim);
    margin-bottom: 0.35rem;
}

.int-stat-value {
    font-family: var(--int-font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--int-text);
    word-break: break-all;
}

.int-card-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.int-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--int-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--int-radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}

.int-btn-primary {
    background: var(--int-primary);
    color: #000;
}

.int-btn-primary:hover {
    background: #4c9aed;
    transform: translateY(-1px);
    box-shadow: var(--int-shadow-md);
}

.int-action-hint {
    font-size: 0.8rem;
    color: var(--int-text-muted);
}

.int-card.coming-soon {
    opacity: 0.5;
    pointer-events: none;
}

.int-card-title-small {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.inv-dtl-w {
    --idw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --idw-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --idw-on: #22c55e;
    --idw-off: #ef4444;
    --idw-warn: #f59e0b;
    --idw-accent: var(--primary, #4a9eff);
    --idw-mute: var(--text-muted);
    font-family: var(--idw-sans);
    letter-spacing: -0.005em;
    max-width: 920px;
}

/* ── Compact mono header bar ────────────────────────────────── */
.inv-dtl-w .idw-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.inv-dtl-w .idw-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.inv-dtl-w .idw-meta {
    font-size: 0.75rem; color: var(--idw-mute);
    font-family: var(--idw-mono);
}
.inv-dtl-w .idw-actions {
    display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center;
}

/* ── Status badges ───────────────────────────────────────────── */
.inv-dtl-w .idw-status {
    font-family: var(--idw-mono); font-size: 0.7rem;
    padding: 3px 9px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.inv-dtl-w .idw-status.type-invoice { background: rgba(91,138,245,0.12); color: var(--idw-accent); }
.inv-dtl-w .idw-status.type-estimate { background: rgba(168,85,247,0.12); color: #a855f7; }
.inv-dtl-w .idw-status.type-credit_note { background: rgba(239,68,68,0.12); color: var(--idw-off); }
.inv-dtl-w .idw-status.status-draft { background: rgba(107,114,128,0.1); color: var(--idw-mute); }
.inv-dtl-w .idw-status.status-sent { background: rgba(59,130,246,0.12); color: #3b82f6; }
.inv-dtl-w .idw-status.status-paid { background: rgba(34,197,94,0.12); color: var(--idw-on); }
.inv-dtl-w .idw-status.status-overdue { background: rgba(239,68,68,0.12); color: var(--idw-off); }
.inv-dtl-w .idw-status.status-cancelled { background: rgba(107,114,128,0.12); color: #6b7280; }
.inv-dtl-w .idw-status.status-accepted { background: rgba(34,197,94,0.12); color: var(--idw-on); }
.inv-dtl-w .idw-status.status-declined { background: rgba(239,68,68,0.12); color: var(--idw-off); }

/* ── Cards & sections ─────────────────────────────────────────── */
.inv-dtl-w .idw-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1rem;
    margin-bottom: 0.75rem;
}
.inv-dtl-w .idw-card h3 {
    margin: 0 0 0.65rem 0; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--idw-mute); font-weight: 600;
}

/* ── Field grids ──────────────────────────────────────────────── */
.inv-dtl-w .idw-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
@media (max-width: 640px) { .inv-dtl-w .idw-grid { grid-template-columns: 1fr; } }
.inv-dtl-w .idw-field { margin-bottom: 0.35rem; }
.inv-dtl-w .idw-field-label {
    font-size: 0.7rem; color: var(--idw-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.1rem;
}
.inv-dtl-w .idw-field-value {
    font-size: 0.85rem; font-family: var(--idw-mono);
}

/* ── Line items table ─────────────────────────────────────────── */
.inv-dtl-w .idw-items {
    width: 100%; border-collapse: collapse;
}
.inv-dtl-w .idw-items th {
    text-align: left; font-size: 0.7rem; color: var(--idw-mute);
    padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.inv-dtl-w .idw-items td {
    padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.inv-dtl-w .idw-items .mono { font-family: var(--idw-mono); }
.inv-dtl-w .idw-items .text-right { text-align: right; }
.inv-dtl-w .idw-items .line-actions { text-align:right; white-space:nowrap; }

/* ── Totals box ───────────────────────────────────────────────── */
.inv-dtl-w .idw-totals {
    display: flex; justify-content: flex-end; margin-top: 0.5rem;
}
.inv-dtl-w .idw-totals-box {
    min-width: 240px;
}
.inv-dtl-w .idw-total-row {
    display: flex; justify-content: space-between;
    padding: 0.3rem 0; font-size: 0.85rem;
}
.inv-dtl-w .idw-total-row.grand {
    font-weight: 700; font-size: 1rem;
    border-top: 2px solid var(--border);
    padding-top: 0.5rem; margin-top: 0.3rem;
}
.inv-dtl-w .idw-total-row .mono { font-family: var(--idw-mono); }

/* ── Modals ───────────────────────────────────────────────────── */
.inv-dtl-w .idw-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: none;
    align-items: center; justify-content: center; z-index: 1000;
}
.inv-dtl-w .idw-modal-content {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.2rem;
    min-width: 320px; max-width: 420px;
}
.inv-dtl-w .idw-modal-content.wide { max-width: 620px; width: min(620px, 92vw); }
.inv-dtl-w .idw-modal-content h3 { margin: 0 0 0.75rem 0; font-size: 0.95rem; }
.inv-dtl-w .idw-modal-content label {
    display: block; font-size: 0.75rem; color: var(--idw-mute);
    margin-bottom: 0.2rem;
}
.inv-dtl-w .idw-modal-content select,
.inv-dtl-w .idw-modal-content input,
.inv-dtl-w .idw-modal-content textarea {
    width: 100%; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); padding: 0.4rem 0.6rem;
    border-radius: var(--radius); font-size: 0.85rem;
    box-sizing: border-box; margin-bottom: 0.7rem;
}
.inv-dtl-w .idw-modal-content textarea { min-height: 76px; resize: vertical; }
.inv-dtl-w .idw-modal-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.6rem; }
.inv-dtl-w .idw-modal-grid .wide { grid-column:1 / -1; }
@media (max-width:640px){ .inv-dtl-w .idw-modal-grid { grid-template-columns:1fr 1fr; } }
.inv-dtl-w .idw-modal-actions {
    display: flex; gap: 0.5rem; justify-content: flex-end;
}

.inv-crt-w {
    --icr-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --icr-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --icr-on: #22c55e;
    --icr-off: #ef4444;
    --icr-warn: #f59e0b;
    --icr-accent: var(--primary, #4a9eff);
    --icr-mute: var(--text-muted);
    font-family: var(--icr-sans);
    letter-spacing: -0.005em;
    max-width: 940px;
}

/* ── Compact mono header bar ────────────────────────────────── */
.inv-crt-w .icr-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.inv-crt-w .icr-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.inv-crt-w .icr-meta {
    font-size: 0.75rem; color: var(--icr-mute);
    font-family: var(--icr-mono);
}

/* ── Cards ───────────────────────────────────────────────────── */
.inv-crt-w .icr-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.1rem;
    margin-bottom: 0.75rem;
}
.inv-crt-w .icr-card h3 {
    margin: 0 0 0.65rem 0; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--icr-mute); font-weight: 600;
}

/* ── Form rows ────────────────────────────────────────────────── */
.inv-crt-w .icr-form-row {
    display: flex; gap: 0.6rem; margin-bottom: 0.65rem;
}
.inv-crt-w .icr-form-row > div { flex: 1; }
.inv-crt-w label {
    display: block; font-size: 0.7rem; color: var(--icr-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}
.inv-crt-w input,
.inv-crt-w select,
.inv-crt-w textarea {
    width: 100%; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); padding: 0.4rem 0.6rem;
    border-radius: var(--radius); font-size: 0.85rem;
    box-sizing: border-box;
}
.inv-crt-w textarea { min-height: 60px; resize: vertical; }

/* ── Line items table ─────────────────────────────────────────── */
.inv-crt-w .line-items-table {
    width: 100%; border-collapse: collapse; margin-bottom: 0.5rem;
}
.inv-crt-w .line-items-table th {
    text-align: left; font-size: 0.7rem; color: var(--icr-mute);
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.inv-crt-w .line-items-table td {
    padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border);
}
.inv-crt-w .line-items-table .col-desc { width: 34%; }
.inv-crt-w .line-items-table .col-qty { width: 8%; }
.inv-crt-w .line-items-table .col-price { width: 12%; }
.inv-crt-w .line-items-table .col-disc { width: 9%; }
.inv-crt-w .line-items-table .col-amount { width: 13%; text-align: right; }
.inv-crt-w .line-items-table .col-tax { width: 11%; }
.inv-crt-w .line-items-table .col-ticket { width: 14%; }
.inv-crt-w .line-items-table .col-action { width: 5%; text-align: center; }
.inv-crt-w .line-items-table input,
.inv-crt-w .line-items-table select {
    width: 100%; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); padding: 0.35rem 0.5rem;
    border-radius: var(--radius); font-size: 0.85rem; box-sizing: border-box;
}
.inv-crt-w .btn-remove-row {
    background: none; border: none; color: var(--icr-off);
    cursor: pointer; font-size: 1.1rem; padding: 0.2rem 0.4rem;
}
.inv-crt-w .btn-remove-row:hover { color: #dc2626; }
.inv-crt-w .btn-add-row {
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text); cursor: pointer; padding: 0.4rem 0.8rem;
    border-radius: var(--radius); font-size: 0.8rem;
}
.inv-crt-w .btn-add-row:hover { border-color: var(--icr-accent); }

/* ── Totals box ───────────────────────────────────────────────── */
.inv-crt-w .totals-section { display: flex; justify-content: flex-end; margin-top: 1rem; }
.inv-crt-w .totals-box { min-width: 250px; }
.inv-crt-w .total-row {
    display: flex; justify-content: space-between;
    padding: 0.3rem 0; font-size: 0.9rem;
}
.inv-crt-w .total-row.grand {
    font-weight: 700; font-size: 1.1rem;
    border-top: 2px solid var(--border);
    padding-top: 0.5rem; margin-top: 0.3rem;
}
.inv-crt-w .total-row .mono { font-family: var(--icr-mono); }

/* ── Auto-save indicator ──────────────────────────────────────── */
.inv-crt-w .autosave-indicator {
    font-size: 0.75rem; color: var(--icr-mute);
    display: inline-flex; align-items: center; gap: 0.3rem;
}
.inv-crt-w .autosave-indicator.saving { color: var(--icr-accent); }
.inv-crt-w .autosave-indicator.saved { color: var(--icr-on); }
.inv-crt-w .autosave-indicator.error { color: var(--icr-off); }

/* ── Custom fields ───────────────────────────────────────────── */
.inv-crt-w .cf-table { width: 100%; border-collapse: collapse; }
.inv-crt-w .cf-table th {
    text-align: left; font-size: 0.7rem; color: var(--icr-mute);
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.inv-crt-w .cf-table td { padding: 0.3rem 0.5rem; }

/* ── Bundle / stock badges ──────────────────────────────────── */
.inv-crt-w .part-badge {
    font-size: 0.7rem; color: var(--icr-accent); margin-top: 2px;
}
.inv-crt-w .bundle-includes {
    font-size: 0.7rem; color: var(--icr-mute); margin-top: 2px;
    background: rgba(139,92,246,0.08);
    border-left: 2px solid #8b5cf6; padding: 2px 6px; border-radius: 2px;
}
.inv-crt-w .stock-hint { font-size: 0.7rem; color: var(--icr-mute); margin-top: 2px; }
.inv-crt-w .no-stock-toggle {
    font-size: 0.7rem; color: var(--icr-mute); margin-top: 2px;
    display: inline-flex; align-items: center; gap: 0.25rem;
}

/* ── Address quick-fill ─────────────────────────────────────── */
.inv-crt-w .quick-fill-group {
    margin-top: 0.5rem;
}
.inv-crt-w .quick-fill-group label {
    font-size: 0.75rem; color: var(--icr-mute); margin-bottom: 0.25rem;
}
.inv-crt-w .quick-fill-btns {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem;
}

/* ── Modal base ───────────────────────────────────────────────── */
.inv-crt-w .modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); display: none;
    justify-content: center; align-items: flex-start; z-index: 2000;
    padding-top: 8vh;
}
.inv-crt-w .modal-box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.2rem;
    max-width: 780px; width: 92%; max-height: 76vh; display: flex;
    flex-direction: column;
}
.inv-crt-w .modal-title {
    font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem 0;
}
.inv-crt-w .modal-search {
    width: 100%; padding: 0.5rem 0.7rem; background: var(--bg-input);
    color: var(--text); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 0.9rem;
    margin-bottom: 0.75rem; box-sizing: border-box;
}
.inv-crt-w .modal-results {
    flex: 1; overflow-y: auto; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg-input);
}
.inv-crt-w .modal-tip { font-size: 0.7rem; color: var(--icr-mute); margin-top: 0.5rem; }
.inv-crt-w .modal-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}

/* ── Parts auto-dropdown ──────────────────────────────────────── */
.inv-crt-w #parts-auto-dropdown {
    position: absolute; z-index: 1500; display: none;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    max-height: 320px; overflow-y: auto; font-size: 0.82rem; min-width: 320px;
}
.inv-crt-w .parts-auto-item {
    padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border);
    cursor: pointer; display: flex; justify-content: space-between; gap: 0.5rem;
}
.inv-crt-w .parts-auto-item:hover { background: rgba(255,255,255,0.04); }
.inv-crt-w .parts-auto-addnew {
    padding: 0.5rem 0.7rem; border-top: 1px solid var(--border);
    cursor: pointer; color: var(--icr-accent); font-weight: 600;
    background: var(--bg-input);
}
.inv-crt-w .inventory-price-apply {
    display:inline-flex; align-items:center; gap:0.25rem;
    margin-top:0.25rem; font-size:0.7rem; color:var(--text-muted);
}
.inv-crt-w .inventory-price-apply input { width:auto; margin:0; }

/* ── Quick-add part modal ─────────────────────────────────────── */
.inv-crt-w #quick-add-part-modal {
    justify-content: center; align-items: center;
}
.inv-crt-w .qap-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.inv-crt-w .qap-row { display: flex; gap: 0.5rem; }
.inv-crt-w .qap-error {
    font-size: 0.75rem; color: #f85149; display: none;
}
.inv-crt-w .qap-markup {
    font-size: 0.75rem; color: var(--icr-mute); padding: 0.4rem 0.6rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-input);
}
.inv-crt-w .item-desc-input { min-height: 48px; resize: vertical; line-height: 1.35; }
.inv-crt-w .item-internal-note { min-height: 34px; resize: vertical; font-size: 0.75rem; margin-top: 0.25rem; }

/* ── Mobile: line-items / custom-fields → stacked cards ───────────
 * 7-column fixed-percent table clips on phones. Below 640px, each
 * <tr> renders as a card: description spans full width, every other
 * cell stacks as a label/value pair pulled from data-label. The form
 * submits unchanged — input name attributes are untouched.
 */
@media (max-width: 640px) {
    .inv-crt-w .line-items-table,
    .inv-crt-w .line-items-table thead,
    .inv-crt-w .line-items-table tbody,
    .inv-crt-w .line-items-table tr,
    .inv-crt-w .line-items-table td,
    .inv-crt-w #custom-fields-table,
    .inv-crt-w #custom-fields-table thead,
    .inv-crt-w #custom-fields-table tbody,
    .inv-crt-w #custom-fields-table tr,
    .inv-crt-w #custom-fields-table td {
        display: block;
        width: 100% !important;
    }
    .inv-crt-w .line-items-table thead,
    .inv-crt-w #custom-fields-table thead { display: none; }
    .inv-crt-w .line-items-table tr,
    .inv-crt-w #custom-fields-table tr {
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.55rem 0.65rem;
        margin-bottom: 0.55rem;
        background: var(--bg-input, var(--bg-card));
    }
    .inv-crt-w .line-items-table td,
    .inv-crt-w #custom-fields-table td {
        padding: 0.25rem 0 !important;
        border: none !important;
        text-align: left !important;
    }
    /* Description spans full width with no inline label */
    .inv-crt-w .line-items-table td.col-desc {
        padding-bottom: 0.4rem !important;
        border-bottom: 1px dashed var(--border) !important;
        margin-bottom: 0.35rem;
    }
    /* Everything else: label : value flex layout */
    .inv-crt-w .line-items-table td:not(.col-desc):not(.col-action),
    .inv-crt-w #custom-fields-table td:not(:last-child) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
    }
    .inv-crt-w .line-items-table td:not(.col-desc):not(.col-action)[data-label]::before,
    .inv-crt-w #custom-fields-table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.66rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--icr-mute);
        flex-shrink: 0;
    }
    /* Inputs / selects shrink to fill remaining row width, never overflow */
    .inv-crt-w .line-items-table td:not(.col-desc):not(.col-action) input,
    .inv-crt-w .line-items-table td:not(.col-desc):not(.col-action) select,
    .inv-crt-w #custom-fields-table td input,
    .inv-crt-w #custom-fields-table td select {
        flex: 1;
        max-width: 60%;
    }
    .inv-crt-w .line-items-table td.col-amount {
        font-weight: 700;
        font-size: 0.95rem;
    }
    .inv-crt-w .line-items-table td.col-action {
        text-align: right !important;
        padding-top: 0.35rem !important;
        border-top: 1px dashed var(--border) !important;
        margin-top: 0.35rem;
    }
    /* Custom-fields delete button cell */
    .inv-crt-w #custom-fields-table td:last-child {
        text-align: right !important;
    }
    /* Totals box: full width, no right-justify */
    .inv-crt-w .totals-section { justify-content: stretch; }
    .inv-crt-w .totals-box { min-width: 0; width: 100%; }
}

.line-item-row.price-pending td { background: rgba(239,68,68,0.07); }
    .line-item-row.price-pending [name="item_price[]"] { border: 1px solid #ef4444; }

        .print-container { max-width:800px; margin:0 auto; }

        /* Header */
        .print-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:40px; padding-bottom:20px; border-bottom:3px solid #2563eb; }
        .company-info h1 { font-size:24px; color:#2563eb; margin-bottom:4px; }
        .company-info p { font-size:12px; color:#666; }
        .doc-info { text-align:right; }
        .doc-info h2 { font-size:28px; color:#333; text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
        .doc-info .doc-number { font-size:16px; font-weight:600; color:#2563eb; }
        .doc-info .doc-meta { font-size:12px; color:#666; margin-top:4px; }

        /* Status badge */
        .print-status { display:inline-block; padding:3px 12px; border-radius:12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
        .print-status-draft { background:#f3f4f6; color:#6b7280; }
        .print-status-sent { background:#dbeafe; color:#2563eb; }
        .print-status-paid { background:#dcfce7; color:#16a34a; }
        .print-status-overdue { background:#fee2e2; color:#dc2626; }

        /* Addresses */
        .addresses { display:flex; justify-content:space-between; margin-bottom:30px; }
        .address-block { flex:1; }
        .address-block h3 { font-size:11px; text-transform:uppercase; color:#999; letter-spacing:1px; margin-bottom:8px; }
        .address-block p { font-size:13px; }

        /* Details */
        .details-row { display:flex; justify-content:flex-end; gap:30px; margin-bottom:30px; }
        .detail-item { text-align:right; }
        .detail-item .label { font-size:11px; text-transform:uppercase; color:#999; letter-spacing:0.5px; }
        .detail-item .value { font-size:14px; font-weight:600; }

        /* Items table */
        .items-table { width:100%; border-collapse:collapse; margin-bottom:20px; }
        .items-table thead th { background:#f8fafc; padding:10px 12px; text-align:left; font-size:11px; text-transform:uppercase; color:#666; letter-spacing:0.5px; border-bottom:2px solid #e2e8f0; }
        .items-table thead th.text-right { text-align:right; }
        .items-table tbody td { padding:10px 12px; border-bottom:1px solid #f1f5f9; font-size:13px; }
        .items-table tbody td.text-right { text-align:right; }
        .items-table tbody tr:last-child td { border-bottom:2px solid #e2e8f0; }

        /* Totals */
        .totals { display:flex; justify-content:flex-end; margin-bottom:30px; }
        .totals-table { min-width:260px; }
        .totals-table .total-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; }
        .totals-table .total-row.grand { font-size:18px; font-weight:700; border-top:2px solid #1a1a1a; padding-top:10px; margin-top:6px; color:#2563eb; }

        /* Notes / Terms */
        .notes-section { margin-top:30px; padding-top:20px; border-top:1px solid #e2e8f0; }
        .notes-section h3 { font-size:11px; text-transform:uppercase; color:#999; letter-spacing:1px; margin-bottom:8px; }
        .notes-section p { font-size:12px; color:#555; white-space:pre-line; }

        /* Footer */
        .print-footer { margin-top:40px; padding-top:20px; border-top:1px solid #e2e8f0; text-align:center; font-size:11px; color:#999; }

        /* No-print controls */
        .no-print { margin-bottom:20px; text-align:center; }
        .no-print button { padding:8px 20px; background:#2563eb; color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:14px; margin:0 4px; }
        .no-print button.secondary { background:#6b7280; }
        .no-print button:hover { opacity:0.9; }

        @media print {
            .no-print { display:none !important; }
            .print-container { max-width:100%; }
        }

.editor-layout { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; height:calc(100vh - 220px); min-height:500px; }
.editor-col { display:flex; flex-direction:column; overflow:hidden; }
.editor-col h3 { font-size:0.9rem; margin-bottom:0.5rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.editor-col textarea { flex:1; width:100%; font-family:'Fira Code', 'Consolas', monospace; font-size:0.82rem; line-height:1.5; background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:0.8rem; resize:none; tab-size:2; }
.preview-frame { flex:1; border:1px solid var(--border); border-radius:var(--radius); background:#fff; }
.var-panel { margin-top:0.8rem; }
.var-panel summary { font-size:0.82rem; font-weight:600; cursor:pointer; color:var(--text-muted); }
.var-grid { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.5rem; }
.var-btn { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); padding:3px 8px; font-size:0.75rem; cursor:pointer; color:var(--text); font-family:monospace; transition:background 0.15s; }
.var-btn:hover { background:var(--primary-color); color:#fff; border-color:var(--primary-color); }
.var-desc { display:none; position:absolute; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:4px 8px; font-size:0.72rem; color:var(--text-muted); z-index:10; white-space:nowrap; }
.top-bar { display:flex; gap:0.8rem; align-items:center; flex-wrap:wrap; margin-bottom:0.5rem; }
.top-bar .form-group { margin-bottom:0; }
.top-bar input[type="text"] { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:0.35rem 0.6rem; border-radius:var(--radius); font-size:0.85rem; min-width:250px; }
@media (max-width: 900px) {
    .editor-layout { grid-template-columns:1fr; height:auto; }
    .editor-col textarea { min-height:300px; }
    .preview-frame { min-height:400px; }
}

.bar{height:6px;background:linear-gradient(90deg,#2563eb,#7c3aed);margin:-48px -48px 32px;}
.head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:36px;}
.from h1{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-0.01em;}
.from p{margin:2px 0;color:#555;font-size:13px;}
.doc{text-align:right;}
.doc h2{margin:0 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:0.12em;color:#888;font-weight:600;}
.doc .num{font-size:24px;font-weight:700;color:#111;}
.bill{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:32px;padding:20px;background:#f9fafb;border-radius:8px;}
.bill h3{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:#888;font-weight:600;}
.bill p{margin:2px 0;}
.items-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13px;}
.items-table th{text-align:left;padding:10px 12px;background:#f3f4f6;border-bottom:2px solid #e5e7eb;font-size:11px;text-transform:uppercase;letter-spacing:0.06em;color:#555;}
.items-table td{padding:12px;border-bottom:1px solid #eee;}
.text-right{text-align:right;}
.totals{margin-left:auto;width:300px;margin-top:16px;}
.totals .row{display:flex;justify-content:space-between;padding:6px 0;}
.totals .grand{border-top:2px solid #222;padding-top:10px;margin-top:8px;font-size:16px;font-weight:700;}
.foot{margin-top:48px;padding-top:20px;border-top:1px solid #eee;color:#666;font-size:12px;}

.head{border-bottom:3px double #000;padding-bottom:20px;margin-bottom:24px;display:flex;justify-content:space-between;}
.from h1{margin:0;font-size:26px;font-weight:normal;font-variant:small-caps;letter-spacing:0.04em;}
.from p{margin:2px 0;}
.doc{text-align:right;}
.doc h2{margin:0;font-size:30px;font-variant:small-caps;font-weight:normal;letter-spacing:0.1em;}
.bill{margin:20px 0 24px;}
.bill strong{display:block;margin-bottom:4px;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;}
.meta{display:flex;gap:30px;margin-bottom:24px;border-top:1px solid #999;border-bottom:1px solid #999;padding:12px 0;}
.meta .col strong{display:block;font-size:10px;text-transform:uppercase;letter-spacing:0.1em;color:#555;}
.items-table{width:100%;border-collapse:collapse;font-size:13px;}
.items-table th{text-align:left;padding:8px 10px;border-bottom:1px solid #000;font-variant:small-caps;letter-spacing:0.06em;}
.items-table td{padding:10px;border-bottom:1px solid #ddd;}
.text-right{text-align:right;}
.totals{margin:18px 0 0 auto;width:280px;}
.totals .row{display:flex;justify-content:space-between;padding:5px 0;}
.totals .grand{border-top:2px solid #000;border-bottom:3px double #000;padding:10px 0;font-weight:bold;font-size:15px;}
.foot{margin-top:48px;font-style:italic;color:#444;text-align:center;}

.row1{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;border-bottom:1px solid #ddd;padding-bottom:18px;margin-bottom:18px;}
.row1 h1{margin:0 0 4px;font-size:18px;}
.row1 .doc{text-align:right;}
.row1 .doc .num{font-size:20px;font-weight:700;}
.row1 .doc .meta{font-size:12px;color:#666;margin-top:4px;}
.row2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-bottom:20px;font-size:12px;}
.row2 .lbl{font-size:10px;text-transform:uppercase;letter-spacing:0.08em;color:#888;margin-bottom:3px;}
.items-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:12px;}
.items-table th{padding:6px 8px;background:#f5f5f5;border:1px solid #e0e0e0;font-size:10px;text-transform:uppercase;letter-spacing:0.06em;text-align:left;}
.items-table td{padding:7px 8px;border:1px solid #eee;}
.text-right{text-align:right;}
.summary{display:flex;justify-content:space-between;align-items:center;background:#f9f9f9;padding:14px 18px;border-radius:4px;margin-top:8px;}
.summary .totals{font-size:11px;color:#555;}
.summary .grand{font-size:18px;font-weight:700;}
.foot{margin-top:18px;font-size:11px;color:#666;}

.tmpl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:1rem; margin-top:1rem; }
.tmpl-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; position:relative; }
.tmpl-card h3 { font-size:1rem; margin-bottom:0.3rem; }
.tmpl-card .meta { font-size:0.78rem; color:var(--text-muted); margin-bottom:0.8rem; }
.tmpl-card .badge-default { background:rgba(59,130,246,0.15); color:#3b82f6; padding:2px 8px; border-radius:10px; font-size:0.72rem; font-weight:600; }
.tmpl-card .actions { display:flex; gap:0.4rem; flex-wrap:wrap; }

.inv-w {
    --inv-fg: var(--text);
    --inv-mute: var(--text-muted);
    --inv-bg: var(--bg);
    --inv-card: var(--bg-card);
    --inv-bd: var(--border);
    --inv-accent: var(--primary, #4a9eff);
    --inv-green: #22c55e;
    --inv-red: #ef4444;
    --inv-amber: #f59e0b;
    --inv-blue: #3b82f6;
    --inv-purple: #a855f7;
    --inv-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --inv-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--inv-sans);
    color: var(--inv-fg);
    letter-spacing: -0.005em;
}
.inv-w h2 { font-family: var(--inv-mono); font-weight: 700; letter-spacing: -0.005em; }

/* Stat pill bar */
.inv-w .inv-stats {
    display: flex; gap: 0.4rem; margin: 0.4rem 0 0.9rem; flex-wrap: wrap;
}
.inv-w .inv-pill {
    font-family: var(--inv-mono); font-size: 0.72rem;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--inv-bd);
    display: inline-flex; gap: 0.45rem; align-items: center; line-height: 1.1;
}
.inv-w .inv-pill .lbl {
    color: var(--inv-mute); text-transform: uppercase;
    letter-spacing: 0.18em; font-size: 0.62rem;
}
.inv-w .inv-pill b { font-weight: 700; }
.inv-w .inv-pill.open  { color: var(--inv-blue);  border-color: rgba(59,130,246,0.4);  background: rgba(59,130,246,0.07); }
.inv-w .inv-pill.paid  { color: var(--inv-green); border-color: rgba(34,197,94,0.4);   background: rgba(34,197,94,0.07); }
.inv-w .inv-pill.over  { color: var(--inv-red);   border-color: rgba(239,68,68,0.4);   background: rgba(239,68,68,0.07); }
.inv-w .inv-pill.tot   { color: var(--inv-accent);border-color: rgba(74,158,255,0.4);  background: rgba(74,158,255,0.07); }

/* Filters */
.inv-w .inv-filters { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.7rem; align-items:center; }
.inv-w .inv-filters select,
.inv-w .inv-filters input {
    background: var(--inv-card); color: var(--inv-fg);
    border: 1px solid var(--inv-bd);
    padding: 0.35rem 0.6rem; border-radius: 4px;
    font-family: var(--inv-mono); font-size: 0.74rem;
}
.inv-w .inv-filters input:focus,
.inv-w .inv-filters select:focus { outline: none; border-color: var(--inv-accent); }

/* Table */
.inv-w table.data-table {
    width: 100%; border-collapse: collapse;
    background: var(--inv-card); border: 1px solid var(--inv-bd);
    border-radius: 6px; overflow: hidden;
    font-size: 0.8rem;
}
.inv-w table.data-table thead th {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid var(--inv-bd);
    font-family: var(--inv-mono); font-size: 0.66rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--inv-mute); font-weight: 600;
    background: var(--inv-card);
    white-space: nowrap;
}
.inv-w table.data-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.inv-w table.data-table tbody tr:hover { background: rgba(74,158,255,0.06); }
.inv-w table.data-table tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.3;
}
.inv-w table.data-table tbody td code {
    font-family: var(--inv-mono); font-size: 0.78rem;
    background: transparent; padding: 0;
}
.inv-w td.amount {
    font-family: var(--inv-mono);
    text-align: right;
    font-weight: 600;
    border-left: 1px solid rgba(255,255,255,0.04);
}
.inv-w td.date-cell {
    font-family: var(--inv-mono);
    font-size: 0.74rem;
    color: var(--inv-mute);
}
.inv-w td.empty {
    text-align: center; color: var(--inv-mute);
    padding: 1.5rem; font-family: var(--inv-mono);
    font-size: 0.78rem; letter-spacing: 0.05em;
}

/* Status pills — mono compact, color-coded */
.inv-w .status-draft,
.inv-w .status-sent,
.inv-w .status-paid,
.inv-w .status-overdue,
.inv-w .status-cancelled,
.inv-w .status-accepted,
.inv-w .status-declined,
.inv-w .status-partial {
    display: inline-block;
    font-family: var(--inv-mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 600;
    line-height: 1.4;
}
.inv-w .status-draft     { color: #9ca3af; background: rgba(156,163,175,0.10); border-color: rgba(156,163,175,0.30); }
.inv-w .status-sent      { color: var(--inv-blue);  background: rgba(59,130,246,0.10); border-color: rgba(59,130,246,0.35); }
.inv-w .status-paid      { color: var(--inv-green); background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.35); }
.inv-w .status-accepted  { color: var(--inv-green); background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.35); }
.inv-w .status-overdue   { color: var(--inv-red);   background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.35); }
.inv-w .status-declined  { color: var(--inv-red);   background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.35); }
.inv-w .status-cancelled { color: #6b7280; background: rgba(107,114,128,0.10); border-color: rgba(107,114,128,0.30); }
.inv-w .status-partial   { color: var(--inv-amber); background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }

/* Type badges */
.inv-w .type-badge {
    font-family: var(--inv-mono);
    font-size: 0.62rem; letter-spacing: 0.14em;
    padding: 2px 7px; border-radius: 4px;
    text-transform: uppercase; font-weight: 600;
    border: 1px solid transparent;
}
.inv-w .type-invoice     { background: rgba(91,138,245,0.10); color: var(--inv-accent); border-color: rgba(91,138,245,0.30); }
.inv-w .type-estimate    { background: rgba(168,85,247,0.10); color: var(--inv-purple); border-color: rgba(168,85,247,0.30); }
.inv-w .type-credit_note { background: rgba(239,68,68,0.10);  color: var(--inv-red);    border-color: rgba(239,68,68,0.30); }

.inv-w .recurring-icon { display: inline-block; margin-left: 4px; font-size: 0.75rem; color: var(--inv-accent); vertical-align: middle; }

/* Action cell */
.inv-w .inv-actions-cell { display:flex; gap:0.3rem; align-items:center; }
.inv-w .btn-icon {
    background: none; border: 1px solid var(--inv-bd);
    color: var(--inv-mute); cursor: pointer;
    padding: 0.2rem 0.4rem; border-radius: 4px;
    font-size: 0.85rem; line-height: 1;
}
.inv-w .btn-icon:hover { border-color: var(--inv-accent); color: var(--inv-accent); }
.inv-w .btn-icon.btn-danger:hover { border-color: var(--inv-red); color: var(--inv-red); }

/* Tooltip — must NOT be scoped to .inv-w because the JS appends it
   to <body> (outside the .inv-w wrapper). Without the selector match
   pointer-events defaults to auto and the tooltip sits under the
   cursor, causing rapid mouseenter/mouseleave on the link → screen
   shakes as the tooltip flicker creates layout reflow. */
.synopsis-tooltip {
    position: absolute; background: var(--inv-card, #1a1d27);
    border: 1px solid var(--inv-bd, var(--border)); border-radius: 4px;
    padding: 0.5rem 0.75rem; font-size: 0.78rem;
    max-width: 320px; z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    pointer-events: none; white-space: normal; line-height: 1.4;
    color: var(--text);
}

/* Preview & Delete modals */
.inv-w .preview-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    display: none; align-items: center; justify-content: center; z-index: 1000;
}
.inv-w .preview-card {
    background: var(--inv-card); border: 1px solid var(--inv-bd);
    border-radius: 8px; padding: 0;
    width: 720px; max-width: 92vw; max-height: 88vh; overflow-y: auto;
    font-family: var(--inv-sans);
}
.inv-w .preview-card .pv-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1.5rem; padding: 1.4rem 1.6rem 1rem; border-bottom: 1px solid var(--inv-bd);
}
.inv-w .preview-card .pv-head img { max-height: 56px; max-width: 220px; object-fit: contain; }
.inv-w .preview-card .pv-head .pv-org { font-size: 1.1rem; font-weight: 700; color: var(--inv-fg, var(--text)); }
.inv-w .preview-card .pv-head .pv-meta { text-align: right; font-size: 0.85rem; }
.inv-w .preview-card .pv-head .pv-meta .pv-num {
    font-family: var(--inv-mono); font-size: 1.1rem; font-weight: 700;
    color: var(--inv-fg, var(--text)); margin-bottom: .15rem;
}
.inv-w .preview-card .pv-head .pv-meta .pv-row { color: var(--inv-mute); margin-top: .1rem; }
.inv-w .preview-card .pv-head .pv-meta .pv-status {
    display: inline-block; padding: .15rem .55rem; border-radius: 999px;
    font-size: .7rem; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; margin-top: .35rem;
}
.inv-w .pv-status.s-paid     { background: rgba(39,174,96,0.15);  color: #27ae60; }
.inv-w .pv-status.s-sent     { background: rgba(74,158,255,0.15); color: #4a9eff; }
.inv-w .pv-status.s-overdue  { background: rgba(220,38,38,0.15);  color: #dc2626; }
.inv-w .pv-status.s-draft    { background: rgba(140,140,140,0.18); color: var(--inv-mute); }
.inv-w .pv-status.s-partial  { background: rgba(240,173,78,0.15); color: #f0ad4e; }
.inv-w .preview-card .pv-addr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    padding: 1rem 1.6rem; border-bottom: 1px solid var(--inv-bd);
}
.inv-w .preview-card .pv-addr .lbl {
    font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--inv-mute); margin-bottom: .25rem; font-family: var(--inv-mono);
}
.inv-w .preview-card .pv-addr .val { font-size: .88rem; color: var(--text); white-space: pre-line; }
.inv-w .preview-card .preview-items {
    width: 100%; border-collapse: collapse; font-size: 0.86rem;
}
.inv-w .preview-card .preview-items th {
    text-align: left; font-family: var(--inv-mono);
    font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--inv-mute); padding: .55rem .9rem;
    border-bottom: 1px solid var(--inv-bd);
    background: rgba(0,0,0,0.04);
}
.inv-w .preview-card .preview-items td {
    padding: .55rem .9rem; border-bottom: 1px solid var(--inv-bd); vertical-align: top;
}
.inv-w .preview-card .pv-totals {
    display: flex; justify-content: flex-end;
    padding: .9rem 1.6rem; border-bottom: 1px solid var(--inv-bd);
}
.inv-w .preview-card .pv-totals table { font-size: .9rem; min-width: 280px; }
.inv-w .preview-card .pv-totals td { padding: .2rem .5rem; }
.inv-w .preview-card .pv-totals tr.pv-grand td {
    font-weight: 700; font-size: 1.05rem; border-top: 1px solid var(--inv-bd);
    padding-top: .45rem;
}
.inv-w .preview-card .pv-totals tr.pv-balance td {
    font-weight: 700; color: #dc2626; padding-top: .35rem;
}
.inv-w .preview-card .pv-payments {
    padding: .85rem 1.6rem; border-bottom: 1px solid var(--inv-bd);
}
.inv-w .preview-card .pv-payments h4 {
    font-family: var(--inv-mono); font-size: .68rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--inv-mute); margin: 0 0 .45rem;
}
.inv-w .preview-card .pv-payments table { width: 100%; font-size: .82rem; border-collapse: collapse; }
.inv-w .preview-card .pv-payments td { padding: .25rem .5rem; }
.inv-w .preview-card .pv-payments td.amt { text-align: right; font-weight: 600; color: #27ae60; font-family: var(--inv-mono); }
.inv-w .preview-card .pv-foot {
    padding: .85rem 1.6rem; border-bottom: 1px solid var(--inv-bd);
    font-size: .82rem; color: var(--inv-mute);
}
.inv-w .preview-card .pv-foot .pv-section { margin-bottom: .55rem; }
.inv-w .preview-card .pv-foot .pv-section:last-child { margin-bottom: 0; }
.inv-w .preview-card .pv-foot .pv-section .pv-h {
    font-family: var(--inv-mono); font-size: .65rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--inv-mute); margin-bottom: .15rem;
}
.inv-w .preview-card .preview-actions {
    display: flex; gap: 0.5rem; padding: .85rem 1.6rem; flex-wrap: wrap;
}

.inv-w .deleted-badge {
    background: rgba(239,68,68,0.10); color: var(--inv-red);
    padding: 3px 9px; border-radius: 999px;
    font-family: var(--inv-mono); font-size: 0.66rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    text-decoration: none; border: 1px solid rgba(239,68,68,0.30);
}
.inv-w .deleted-badge:hover { background: rgba(239,68,68,0.20); }

/* ── Mobile (≤640px): invoice list table → cards ──────────────────
 * 9-column data-table never fits a phone. Each <tr> renders as a
 * card; each <td> stacks as a label/value flex row pulled from
 * data-label. The row-click navigation handler still fires.
 */
@media (max-width: 640px) {
    .inv-w table.data-table,
    .inv-w table.data-table thead,
    .inv-w table.data-table tbody,
    .inv-w table.data-table tr,
    .inv-w table.data-table td {
        display: block;
        width: 100%;
    }
    .inv-w table.data-table { border: none; background: transparent; }
    .inv-w table.data-table thead { display: none; }
    .inv-w table.data-table tbody tr {
        border: 1px solid var(--inv-bd);
        border-radius: 8px;
        background: var(--inv-card);
        padding: 0.55rem 0.75rem;
        margin-bottom: 0.55rem;
    }
    .inv-w table.data-table tbody td {
        padding: 0.3rem 0 !important;
        border: none !important;
        text-align: left !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        white-space: normal !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    .inv-w table.data-table tbody td[data-label]::before {
        content: attr(data-label);
        font-family: var(--inv-mono);
        font-size: 0.62rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--inv-mute);
        flex-shrink: 0;
    }
    .inv-w table.data-table tbody td.amount {
        border-left: none !important;
        font-size: 1rem;
        font-weight: 700;
    }
    .inv-w table.data-table tbody td.empty {
        display: block;
        text-align: center !important;
        padding: 1.2rem 0 !important;
    }
    .inv-w table.data-table tbody td.actions-cell {
        border-top: 1px dashed var(--inv-bd) !important;
        padding-top: 0.5rem !important;
        margin-top: 0.4rem;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .inv-w table.data-table tbody td.actions-cell::before { display: none; }
    .inv-w .inv-actions-cell { flex-wrap: wrap; }
    .inv-w .preview-card .pv-addr { grid-template-columns: 1fr !important; }
    .inv-w .preview-card .pv-head { flex-direction: column; gap: 0.75rem; }
    .inv-w .preview-card .pv-head .pv-meta { text-align: left; }
}

.inv-w .gear-menu { position: relative; display: inline-block; }
.inv-w .gear-btn {
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text); border-radius: 4px; cursor: pointer;
    padding: .35rem .55rem; font-size: .85rem;
}
.inv-w .gear-btn:hover { border-color: var(--text-muted); }
.inv-w .gear-pop {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 240px; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 6px;
    padding: .35rem; z-index: 50; box-shadow: 0 4px 12px rgba(0,0,0,.3);
    display: none;
}
.inv-w .gear-menu[open] .gear-pop { display: block; }
.inv-w .gear-pop a, .inv-w .gear-pop button {
    display: block; width: 100%; text-align: left;
    padding: .4rem .6rem; font-size: .82rem; color: var(--text);
    text-decoration: none; background: transparent; border: 0;
    border-radius: 4px; cursor: pointer;
}
.inv-w .gear-pop a:hover, .inv-w .gear-pop button:hover {
    background: var(--bg);
}
.inv-w .gear-pop hr { border: 0; border-top: 1px solid var(--border); margin: .25rem 0; }

.inv-w .typetag {
  display:inline-flex; align-items:center; padding:.25rem .65rem;
  border-radius:999px; border:1px solid var(--border); background:var(--bg-card);
  color:var(--text-muted); font-size:.78rem; text-decoration:none;
  font-family:var(--inv-mono, ui-monospace, monospace); transition:all .12s ease;
}
.inv-w .typetag:hover { border-color:var(--accent, #4a9eff); color:var(--text); }
.inv-w .typetag.active {
  background:rgba(74,158,255,0.18); border-color:var(--accent, #4a9eff);
  color:var(--accent, #4a9eff); font-weight:600;
}

#org-out-pop{display:none;}#org-out-pop.show{display:block;}

.inv-fab-stack {
    position: fixed; right: 14px; bottom: 18px;
    display: none; flex-direction: column; gap: 0.5rem;
    z-index: 950;
  }
  .inv-fab {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    font-size: 1.5rem; line-height: 1;
    color: #fff; text-decoration: none;
    transition: transform 0.12s;
  }
  .inv-fab:active { transform: scale(0.94); }
  .inv-fab.primary { background: #2563eb; }
  @media (max-width: 768px) {
    .inv-fab-stack { display: flex; }
    .inv-w { padding-bottom: 90px; }
  }

.stat-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; text-align:center;
             text-decoration:none; color:inherit; display:flex; flex-direction:column; justify-content:center;
             transition: border-color .12s ease; min-height:88px; }
a.stat-card:hover { border-color:var(--accent, #4a9eff); }
.stat-card .value { font-size:1.5rem; font-weight:700; line-height:1.1; word-break:break-all; }
.stat-card .label { font-size:0.72rem; color:var(--text-muted); margin-top:0.45rem;
                    text-transform:uppercase; letter-spacing:.05em; }
.stat-card .value.text-red { color:#ef4444; }
.stat-card .value.text-green { color:#22c55e; }
.invoice-filters { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem; align-items:center; }
.invoice-filters select { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:0.3rem 0.6rem; border-radius:var(--radius); font-size:0.8rem; }
.org-group-header { display:flex; align-items:center; gap:0.75rem; margin-top:1.5rem; margin-bottom:0.5rem; }
.org-group-header h3 { margin:0; font-size:1rem; }
.org-group-header .org-total { font-size:0.8rem; color:var(--text-muted); }

#osu-out-pop{display:none;}#osu-out-pop.show{display:block;}

#osu-cols-pop.show{display:block!important;}

/* Number wide enough for "INV-12345678" / "EST-12345678" without wrap. */
#osu-flat-table th[data-col="number"], #osu-flat-table td[data-col="number"] {
    min-width: 130px; white-space: nowrap;
}
/* Date columns wide enough for the ISO format ('2026-05-02') without
   wrapping. Was wrapping into 2 lines on overdue/sent rows. */
#osu-flat-table th[data-col="due"], #osu-flat-table td[data-col="due"],
#osu-flat-table th[data-col="created"], #osu-flat-table td[data-col="created"] {
    min-width: 100px; white-space: nowrap;
}
/* Type column wide enough to fit "Invoice" + recurring letter pill on
   one line. Was wrapping the pill onto a second row. */
#osu-flat-table th[data-col="type"], #osu-flat-table td[data-col="type"] {
    min-width: 110px; white-space: nowrap;
}
/* Stronger status badges (Overdue red, Cancelled white). Override the
   global .badge-CRITICAL / .badge-fix tones used by the chronological
   flat view so they match operator expectations. */
#osu-flat-table .badge-CRITICAL { background:#dc2626; color:#fff; }
#osu-flat-table .badge-fix      { background:#fff; color:#1a1a1a; border:1px solid #ccc; }

.deleted-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.deleted-warning { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); border-radius:var(--radius); padding:0.75rem 1rem; font-size:0.85rem; color:#ef4444; margin-bottom:1rem; }
.status-draft { background:var(--bg-input); color:var(--text-muted); padding:2px 8px; border-radius:10px; font-size:0.75rem; }
.status-sent { background:rgba(59,130,246,0.15); color:#3b82f6; padding:2px 8px; border-radius:10px; font-size:0.75rem; }
.status-paid { background:rgba(70,167,88,0.15); color:var(--green); padding:2px 8px; border-radius:10px; font-size:0.75rem; }
.status-overdue { background:rgba(239,68,68,0.15); color:#ef4444; padding:2px 8px; border-radius:10px; font-size:0.75rem; }
.status-cancelled { background:rgba(107,114,128,0.15); color:#6b7280; padding:2px 8px; border-radius:10px; font-size:0.75rem; }
.status-accepted { background:rgba(70,167,88,0.15); color:var(--green); padding:2px 8px; border-radius:10px; font-size:0.75rem; }
.status-declined { background:rgba(239,68,68,0.15); color:#ef4444; padding:2px 8px; border-radius:10px; font-size:0.75rem; }
.type-badge { font-size:0.7rem; padding:2px 6px; border-radius:8px; text-transform:uppercase; font-weight:600; }
.type-invoice { background:rgba(91,138,245,0.15); color:var(--primary); }
.type-estimate { background:rgba(168,85,247,0.15); color:#a855f7; }
.type-credit_note { background:rgba(239,68,68,0.15); color:#ef4444; }

.rcg-w { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: -0.005em; }
.rcg-w .filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; align-items: center; }
.rcg-w .filters input { padding: .35rem .5rem; font-size: .82rem; min-width: 220px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); }
.rcg-w .summary { font-size: .78rem; color: var(--text-muted); margin-bottom: .8rem; }
.rcg-w table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rcg-w th { font-weight: 600; color: var(--text-muted); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .04em; padding: .4rem .5rem;
    text-align: left; border-bottom: 1px solid var(--border); }
.rcg-w td { padding: .45rem .5rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rcg-w .id { font-family: ui-monospace, monospace; font-size: .7rem; color: var(--text-muted); }
.rcg-w .amt { font-family: ui-monospace, monospace; text-align: right; }
.rcg-w .pill { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: .68rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rcg-w .pill.on  { background: rgba(34,197,94,0.12);  color: #22c55e; }
.rcg-w .pill.off { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.rcg-w .pill.M { background: rgba(34,197,94,0.12); color: #22c55e; }
.rcg-w .pill.Y { background: rgba(99,91,255,0.12); color: #635bff; }
.rcg-w .pill.W { background: rgba(59,130,246,0.12); color: #3b82f6; }
.rcg-w .pill.Q { background: rgba(245,158,11,0.12); color: #f59e0b; }
.rcg-w .pill.D { background: rgba(168,85,247,0.12); color: #a855f7; }
.rcg-w .pill.R { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.rcg-w .empty { color: var(--text-muted); font-style: italic; padding: 1rem 0; font-size: .85rem; }

.rcg-w .status-tags { display: inline-flex; gap: .25rem; }
.rcg-w .status-tag {
    padding: .25rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
    cursor: pointer; transition: background .15s, border-color .15s;
}
.rcg-w .status-tag:hover { border-color: var(--text-muted); }
.rcg-w .status-tag.active {
    background: rgba(99,91,255,0.12); border-color: #635bff; color: #635bff;
}

.summary-stats { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.summary-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.5rem; text-align:center; min-width:160px; flex:1; }
.summary-stat .value { font-size:1.8rem; font-weight:700; }
.summary-stat .value.green { color:var(--green); }
.summary-stat .value.red { color:#ef4444; }
.summary-stat .value.blue { color:var(--primary); }
.summary-stat .label { font-size:0.75rem; color:var(--text-muted); margin-top:0.25rem; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
@media (max-width:768px) { .summary-grid { grid-template-columns:1fr; } }
.summary-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem; }
.summary-card h3 { margin:0 0 0.75rem 0; font-size:0.95rem; }
.summary-table { width:100%; border-collapse:collapse; }
.summary-table th { text-align:left; font-size:0.75rem; color:var(--text-muted); padding:0.4rem 0.5rem; border-bottom:1px solid var(--border); }
.summary-table td { padding:0.4rem 0.5rem; font-size:0.85rem; border-bottom:1px solid var(--border); }
.summary-table .text-right { text-align:right; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:0.3rem; }
.status-dot-sent { background:#3b82f6; }
.status-dot-overdue { background:#ef4444; }
.status-dot-paid { background:var(--green); }
.status-dot-draft { background:#6b7280; }

.lbl-tpl-w { --font-mono:'JetBrains Mono',monospace; --font-head:'Inter Tight',sans-serif; }
.lbl-tpl-w .detail-table { width:100%; border-collapse:collapse; animation:fadeIn 0.4s ease 0.05s backwards; }
.lbl-tpl-w .detail-table th { text-align:left; padding:0.65rem 0.85rem; border-bottom:2px solid var(--border);
                              color:var(--text-muted); font-size:0.73rem; text-transform:uppercase; letter-spacing:.04em;
                              font-weight:600; font-family:var(--font-head); white-space:nowrap; }
.lbl-tpl-w .detail-table td { padding:0.55rem 0.85rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.lbl-tpl-w .detail-table tr:hover td { background:var(--hover); transition:background 0.1s ease; }
.lbl-tpl-w .stat-mono { font-family:var(--font-mono); font-size:0.85rem; }
.lbl-tpl-w .empty-state { text-align:center; padding:5rem 2rem; color:var(--text-muted); animation:fadeIn 0.4s ease; }
.lbl-tpl-w .empty-state p { font-size:1.05rem; margin:0 0 0.5rem; font-family:var(--font-head); font-weight:500; color:var(--text); }
.lbl-tpl-w .empty-state .hint { font-size:0.9rem; }
.lbl-tpl-w .filter-bar { display:flex; gap:0.5rem; align-items:end; margin-bottom:1rem; }
.lbl-tpl-w .filter-bar label { display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:0.2rem;
                                text-transform:uppercase; letter-spacing:.04em; font-family:var(--font-head); font-weight:600; }
.lbl-tpl-w .badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:4px; font-size:0.72rem;
                    background:var(--hover); color:var(--text); font-family:var(--font-mono); letter-spacing:.02em; }
.lbl-tpl-w .badge-yes { color:#3fb950; font-weight:600; font-family:var(--font-head); font-size:0.85rem; }
.lbl-tpl-w .scope-global { color:var(--text-muted); font-style:italic; }
.lbl-tpl-w .row-actions { display:flex; gap:0.4rem; justify-content:flex-end; }
.lbl-tpl-w .row-actions form.inline { display:inline; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.lab-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; margin-bottom:1rem; }
  .lab-card h3 { margin:0; padding:0.7rem 1rem; border-bottom:1px solid var(--border); font-size:0.95rem; display:flex; justify-content:space-between; align-items:center; }
  .lab-card .archived { opacity:0.5; }
  .lab-rates { width:100%; border-collapse:collapse; font-size:0.85rem; }
  .lab-rates th, .lab-rates td { padding:0.5rem 0.8rem; border-bottom:1px solid rgba(255,255,255,0.04); text-align:left; }
  .lab-rates th { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
  .lab-rates td.num { text-align:right; font-family:ui-monospace, monospace; }
  .lab-rates .sub-pill { font-size:0.65rem; padding:1px 8px; border-radius:999px; background:rgba(99,102,241,0.12); color:#a78bfa; border:1px solid rgba(99,102,241,0.35); }
  .lab-add { padding:0.7rem 1rem; background:rgba(255,255,255,0.02); border-top:1px solid var(--border); }
  .lab-add input, .lab-add select, .lab-add textarea { padding:0.3rem 0.5rem; background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:4px; font-size:0.82rem; }
  .lab-add input[type="number"] { width:90px; }
  .lab-add label { font-size:0.7rem; color:var(--text-muted); }

/* The dashboard.html template declares these classes in an inline
 block, so they're invisible to other templates. Mirror
     the rules here so this page renders identically. Long-term these
     should move to style.css; doing it inline for now to avoid an
     unrelated refactor. */
  :root {
    --dash-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --dash-on:  #22c55e;
    --dash-off: #ef4444;
    --dash-warn: #f59e0b;
    --dash-accent: var(--primary, #4a9eff);
  }
  .dash-org-logo { height:24px; width:24px; object-fit:contain; border-radius:var(--radius-sm); vertical-align:middle; margin-right:0.4rem; }
  .dash-pillbar { display:flex; gap:0.45rem; flex-wrap:wrap; margin:0.4rem 0 0.9rem; }
  .dash-pill { font-family:var(--dash-mono); font-size:0.72rem; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid var(--border); display:inline-flex; gap:0.45rem; align-items:center; line-height:1.1; color:var(--text); text-decoration:none; transition:filter 0.12s, transform 0.08s; }
  a.dash-pill:hover { filter:brightness(1.2); transform:translateY(-1px); }
  .dash-pill b { font-weight:700; }
  .dash-pill .lbl { color:var(--text-muted); text-transform:uppercase; letter-spacing:0.18em; font-size:0.62rem; }
  .dash-pill.on  { color:var(--dash-on);  border-color:rgba(34,197,94,0.4);  background:rgba(34,197,94,0.07); }
  .dash-pill.off { color:var(--dash-off); border-color:rgba(239,68,68,0.4);  background:rgba(239,68,68,0.07); }
  .dash-pill.warn{ color:var(--dash-warn);border-color:rgba(245,158,11,0.4); background:rgba(245,158,11,0.07); }
  .dash-pill.acc { color:var(--dash-accent); border-color:rgba(74,158,255,0.4); background:rgba(74,158,255,0.07); }
  /* Customer/Location Overview card surround */
  .dash-overview-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.25rem; margin-bottom:1.5rem; }
  .dash-overview-h3 { margin:0 0 0.75rem 0; }
  .dash-overview-grid { margin-bottom:0; }
  /* Per-card transport pills (gRPC / WS / HTTP under Machines tile) */
  .dash-stat-trans-row { display:flex; gap:0.35rem; margin-top:3px; }
  .dash-trans-pill { padding:1px 5px; border-radius:var(--radius-sm); font-weight:600; font-size:0.7rem; }
  .dash-trans-pill--grpc { background:color-mix(in srgb, var(--info) 22%, #000); color:var(--info); }
  .dash-trans-pill--ws { background:color-mix(in srgb, var(--warning) 22%, #000); color:var(--warning); }
  .dash-trans-pill--http { background:#21262d; color:var(--text-muted); }
  .stat-card--with-trans { display:flex; flex-direction:column; }
  .dash-stat-num--bad { color:var(--danger); }
  /* AI summary card surround */
  .dash-ai-card { background:var(--accent-soft); border:1px solid var(--border); border-left:3px solid var(--info); border-radius:var(--radius-md); padding:0.85rem 1.1rem; margin-bottom:1rem; }
  .dash-ai-head { display:flex; justify-content:space-between; align-items:center; }
  .dash-ai-head-label { font-weight:600; font-size:0.95rem; }
  .dash-ai-text { margin-top:0.4rem; font-size:0.88rem; line-height:1.5; }
  .dash-ai-loading { color:var(--text-muted); }
  /* Tag/pill helpers (re-used by Machines table OS column + invoice type) */
  .ov-tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:0.7rem; font-weight:500; background:rgba(99,102,241,0.12); border:1px solid rgba(99,102,241,0.35); color:#a78bfa; }
  .ov-tag.invoice { background:rgba(34,197,94,0.10); border-color:rgba(34,197,94,0.35); color:#22c55e; }
  .ov-tag.estimate { background:rgba(99,102,241,0.10); border-color:rgba(99,102,241,0.35); color:#818cf8; }
  .ov-tag.credit_note { background:rgba(245,158,11,0.10); border-color:rgba(245,158,11,0.35); color:#f59e0b; }
  .ov-tag.os-windows { background:rgba(34,158,255,0.12); border-color:rgba(34,158,255,0.35); color:#4a9eff; }
  .ov-tag.os-mac { background:rgba(148,163,184,0.12); border-color:rgba(148,163,184,0.35); color:#94a3b8; }
  .ov-tag.os-linux { background:rgba(245,158,11,0.10); border-color:rgba(245,158,11,0.35); color:#f59e0b; }
  .ov-tag.os-server { background:rgba(139,92,246,0.10); border-color:rgba(139,92,246,0.35); color:#a78bfa; }
  /* Filter input above the Machines table */
  .ov-filter-row { display:flex; gap:0.6rem; align-items:center; margin:0.6rem 0; }
  .ov-filter-input { flex:1; max-width:320px; padding:0.35rem 0.7rem; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-size:0.85rem; }
  /* Status dot in front of hostname (replaces the 'Last seen' column).
     Hover shows "Offline since <ts>" via the cell-level title attribute. */
  .ov-status-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:0.45rem; vertical-align:middle; box-shadow:0 0 0 2px rgba(0,0,0,0.25) inset; }
  .ov-status-dot.on { background:#22c55e; box-shadow:0 0 6px rgba(34,197,94,0.55), 0 0 0 2px rgba(0,0,0,0.25) inset; }
  .ov-status-dot.off { background:#ef4444; box-shadow:0 0 0 2px rgba(0,0,0,0.25) inset; }

.ov-site-card { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:0.4rem 0 1rem; padding:0.85rem 1.1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
  @media (max-width: 720px) { .ov-site-card { grid-template-columns:1fr; } }
  .ov-site-block { display:flex; flex-direction:column; min-width:0; }
  .ov-site-h { font-size:0.7rem; color:var(--text-muted); font-weight:600; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.35rem; }
  .ov-site-body { font-size:0.88rem; line-height:1.5; }
  .ov-poc-name { font-weight:600; font-size:0.95rem; }
  .ov-poc-link { color:var(--primary); text-decoration:none; }
  .ov-poc-link:hover { text-decoration:underline; }

@media (max-width: 640px) {
    .loc-hide-mobile { display: none; }
}

.li-stats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.9rem; margin:1rem 0; }
.li-stat { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.li-stat .label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.li-stat .value { font-size:1.5rem; font-weight:700; margin-top:0.25rem; }
.li-stat.fail .value { color:#e74c3c; }

.li-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.li-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.li-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); vertical-align:top; }
.li-table .mono { font-family:var(--font-mono, monospace); font-size:0.78rem; color:var(--text-muted); }
.li-sig { font-family:var(--font-mono, monospace); font-size:0.78rem; max-width:64ch;
          overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.li-badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-size:0.72rem;
            font-weight:600; }
.li-badge.hot { background:rgba(231,76,60,0.15); color:#e74c3c; }
.li-badge.warm { background:rgba(241,196,15,0.15); color:#d68910; }
.li-badge.cold { background:rgba(127,127,127,0.15); color:var(--text-muted); }
.li-badge.ack { background:rgba(39,174,96,0.15); color:#27ae60; }
.li-actions { display:flex; gap:0.4rem; flex-wrap:wrap; }

details.li-tb summary { cursor:pointer; font-size:0.78rem; color:var(--text-muted); }
details.li-tb pre { white-space:pre-wrap; word-break:break-word; font-size:0.74rem;
                    background:var(--bg-2, var(--bg)); padding:0.6rem; border-radius:6px;
                    margin:0.4rem 0; }

.lv-toolbar { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin-bottom:0.75rem; }
.lv-toolbar select, .lv-toolbar input { background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); border-radius:4px; padding:0.25rem 0.5rem; font-size:0.85rem; }
.lv-toolbar input[type=text] { min-width:18rem; }
.lv-stats { font-size:0.75rem; color:var(--text-muted); margin-left:auto; }
.lv-output { background:#0d1117; color:#c9d1d9; padding:0.75rem; border-radius:6px; font-family:ui-monospace,monospace; font-size:0.78rem; line-height:1.4; max-height:65vh; overflow:auto; white-space:pre-wrap; word-break:break-all; }
.lv-line { padding:1px 0; }
.lv-line.DEBUG    { color:#8b949e; }
.lv-line.INFO     { color:#c9d1d9; }
.lv-line.WARNING  { color:#d29922; }
.lv-line.ERROR    { color:#f85149; }
.lv-line.CRITICAL { color:#ff6e6e; font-weight:bold; }
.lv-line.empty    { color:var(--text-muted); font-style:italic; }
.lv-files { display:grid; grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:0.4rem; margin-bottom:1rem; }
.lv-file-card { background:var(--bg-elevated); border:1px solid var(--border); border-radius:6px; padding:0.5rem; font-size:0.8rem; cursor:pointer; }
.lv-file-card:hover { border-color:#3fb950; }
.lv-file-card.active { border-color:#58a6ff; background:#0d2436; }
.lv-file-card .name { font-family:ui-monospace,monospace; font-weight:600; }
.lv-file-card .meta { color:var(--text-muted); font-size:0.7rem; margin-top:0.15rem; }
.lv-file-card.missing .name { color:var(--text-muted); text-decoration:line-through; }

#logger-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
#logger-table th, #logger-table td { padding:0.3rem 0.5rem; border-bottom:1px solid var(--border-muted); text-align:left; }
#logger-table tbody tr:hover { background:var(--bg-elevated); }
#logger-table select { background:var(--bg-elevated); color:var(--text); border:1px solid var(--border); border-radius:3px; padding:0.1rem 0.25rem; font-size:0.75rem; }
.tab { display:inline-block; padding:0.4rem 0.9rem; cursor:pointer; border-bottom:2px solid transparent; color:var(--text-muted); }
.tab.active { color:var(--text); border-bottom-color:#58a6ff; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

.mac-card { background:var(--bg-card); border:1px solid var(--border);
            border-radius:8px; padding:1.25rem; max-width:720px;
            margin-bottom:1rem; }
.mac-card label { display:block; margin-top:0.85rem; font-weight:600; }
.mac-card input[type=number] { width:6rem; padding:0.4rem;
            border:1px solid var(--border); border-radius:4px; }
.mac-card .help { font-size:0.78rem; color:var(--text-muted);
            margin-top:0.25rem; }
.mac-card .toggle { display:flex; align-items:center; gap:0.5rem;
            margin-top:0.85rem; }
.mac-actions { margin-top:1.25rem; display:flex; gap:0.5rem; flex-wrap:wrap; }
.mac-meta { font-size:0.78rem; color:var(--text-muted); margin-top:0.5rem; }
@media (max-width:720px){ .mac-card { padding:0.85rem; } }

.compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.compare-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    min-width: 0;
}
.compare-card h3 {
    margin-bottom: 0.75rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    word-break: break-all;
}
.compare-section {
    margin-bottom: 1rem;
}
.compare-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.25rem;
}
.compare-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
    font-size: 0.85rem;
}
.compare-row .label { color: var(--text-muted); }
.compare-row .value { font-weight: 500; text-align: right; word-break: break-all; }
.compare-cmd {
    font-size: 0.75rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border);
}
.compare-cmd:last-child { border-bottom: none; }
.compare-cmd .cmd-text {
    font-family: monospace;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}
.compare-cmd .cmd-hr-name {
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.compare-cmd .cmd-hr-name .expand-icon {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.compare-cmd .cmd-hr-name .expand-icon.open {
    transform: rotate(90deg);
}
.compare-cmd .cmd-raw {
    display: none;
    margin-top: 0.3rem;
}
.compare-cmd .cmd-raw code {
    display: block;
    background: var(--bg-input);
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 120px;
    overflow-y: auto;
}
.compare-cmd .cmd-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.usage-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.2rem;
}
.usage-fill {
    height: 100%;
    border-radius: 3px;
}
@media (max-width: 900px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
}

.md-legacy-wrap{--md-fg:var(--text,#e5e7eb);--md-mute:var(--text-muted,#94a3b8);--md-bg:var(--bg,#0f172a);--md-card:var(--bg-card,#1a1d27);--md-bd:var(--border,#334155);--md-accent:var(--primary,#4a9eff);--md-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;--md-sans:var(--font-sans,'Inter',-apple-system,system-ui,sans-serif)}
.md-legacy-wrap .tab-content{display:none}
.md-legacy-wrap .tab-content.active{display:block}
.md-legacy-wrap .tab-bar{display:flex;flex-wrap:wrap;gap:.35rem;margin:.75rem 0}
.md-legacy-wrap .tab{border:1px solid var(--border,#334155);background:var(--bg-card,#111827);color:var(--text,#e5e7eb);border-radius:6px;padding:.45rem .7rem;cursor:pointer}
.md-legacy-wrap .tab.active{background:var(--accent,#3b82f6);border-color:var(--accent,#3b82f6);color:#fff}
.md-legacy-wrap .sub-section{background:var(--bg-card,#1a1d27);border:1px solid var(--border,#334155);color:var(--text,#e5e7eb)}
.md-legacy-wrap .detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0 0 1rem;align-items:stretch}
.md-legacy-wrap .detail-section{background:var(--bg-card,#1a1d27);border:1px solid var(--border,#334155);border-radius:8px;padding:1rem;color:var(--text,#e5e7eb)}
.md-legacy-wrap .detail-section,.md-legacy-wrap .sub-section,.md-legacy-wrap .card{box-sizing:border-box}
.md-legacy-wrap .detail-section{height:100%}
.md-legacy-wrap .detail-table{width:100%;border-collapse:collapse;background:transparent;border:0;font-size:.85rem}
.md-legacy-wrap .detail-table td,.md-legacy-wrap .detail-table th{padding:.35rem .5rem;border:0;border-top:1px solid rgba(255,255,255,.05);vertical-align:top}
.md-legacy-wrap .detail-table tr:first-child td,.md-legacy-wrap .detail-table tr:first-child th{border-top:0}
.md-legacy-wrap .detail-table td:first-child{width:120px;color:var(--text-muted,#94a3b8);font-weight:500}
.md-legacy-wrap #tab-overview .detail-section .table-responsive{overflow:visible;margin-bottom:0}
.md-legacy-wrap #tab-overview .detail-section .table-responsive table.detail-table{min-width:0!important;width:100%}
.md-legacy-wrap .sk-md-hidden,.md-legacy-wrap .md-hidden{display:none!important}
.md-legacy-wrap #tab-overview{container-type:inline-size}
.md-legacy-wrap #tab-overview > .detail-grid{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.md-legacy-wrap #tab-overview .detail-grid > .sk-md-overview-card{height:100%;min-width:0;align-self:stretch}
.md-legacy-wrap #tab-overview #hostname-edit-row.sk-md-hidden{display:none!important}
.md-legacy-wrap #tab-overview .sk-md-icon-inline{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:.35rem;padding:0;border:1px solid transparent;border-radius:4px;background:transparent;color:var(--text-muted,#94a3b8);cursor:pointer;vertical-align:middle}
.md-legacy-wrap #tab-overview .sk-md-icon-inline:hover{border-color:var(--border,#334155);background:rgba(255,255,255,.05);color:var(--text,#e5e7eb)}
.md-legacy-wrap #tab-overview .sk-md-inline-form{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin:0}
.md-legacy-wrap #tab-overview .sk-md-hostname-input,.md-legacy-wrap #tab-overview .sk-md-form-control{background:var(--bg,#0f172a);border:1px solid var(--border,#334155);border-radius:6px;color:var(--text,#e5e7eb);padding:.32rem .45rem;max-width:100%}
.md-legacy-wrap #tab-overview .sk-md-hostname-input{width:11rem}
.md-legacy-wrap .sk-md-isp-logo{height:18px!important;max-height:18px!important;width:auto!important;max-width:90px!important;object-fit:contain;vertical-align:middle;margin-left:8px;border-radius:2px}
.md-legacy-wrap .sk-md-dns-list{display:flex;flex-direction:column;gap:4px}
.md-legacy-wrap .sk-md-dns-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.md-legacy-wrap .sk-md-dns-icon{width:14px!important;height:14px!important;max-width:14px!important;max-height:14px!important;object-fit:contain;display:inline-block;flex:0 0 14px;vertical-align:middle}
.md-legacy-wrap .sk-md-warning-note{margin:.45rem 0 0;padding:.45rem .55rem;border:1px solid rgba(245,158,11,.35);border-radius:6px;background:rgba(245,158,11,.08);color:#fbbf24;font-size:.74rem;line-height:1.35}
.md-legacy-wrap .detail-table tr.sk-md-primary-user-actions-row td:first-child{width:auto;color:var(--text,#e5e7eb);font-weight:400}
.md-legacy-wrap .sk-md-primary-user-cell{display:flex;flex-direction:column;gap:.5rem;min-width:0;width:100%}
.md-legacy-wrap .sk-md-primary-user-cell > .sk-md-form-control{width:100%;max-width:100%}
.md-legacy-wrap .sk-md-user-access{margin-top:.55rem;padding:.55rem .65rem;border:1px solid var(--border,#334155);border-radius:6px;background:rgba(255,255,255,.035);max-width:none}
.md-legacy-wrap .sk-md-user-access summary{cursor:pointer;color:var(--text-muted,#94a3b8);font-size:.78rem;line-height:1.35}
.md-legacy-wrap .sk-md-user-access[open] summary{margin-bottom:.5rem;color:var(--primary,#4a9eff)}
.md-legacy-wrap .sk-md-user-access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.35rem;max-height:180px;overflow:auto;margin-top:.4rem}
.md-legacy-wrap .sk-md-user-option{display:flex;align-items:flex-start;gap:.4rem;padding:.35rem .45rem;border:1px solid var(--border,#334155);border-radius:6px;background:var(--bg,#0f172a);font-size:.78rem}
.md-legacy-wrap .sk-md-user-option-text{min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.3}
.md-legacy-wrap .sk-md-user-access-actions,.md-legacy-wrap .sk-md-user-tools{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.55rem}
.md-legacy-wrap .sk-md-primary-user-cell .sk-md-user-tools{margin-top:0}
.md-legacy-wrap .sk-md-primary-user-cell .sk-md-warning-note,.md-legacy-wrap .sk-md-primary-user-cell summary,.md-legacy-wrap .sk-md-primary-user-cell .btn{white-space:normal;overflow-wrap:anywhere}
.md-legacy-wrap .sk-md-primary-user-cell .sk-md-inline-form{max-width:100%}
.md-legacy-wrap #tab-overview .sk-md-user-client-card .detail-table{table-layout:fixed}
.md-legacy-wrap #tab-overview .sk-md-user-client-card .detail-table td{overflow-wrap:anywhere;word-break:break-word}
.md-legacy-wrap #tab-overview .sk-md-user-client-card .detail-table td:first-child{width:110px}
.md-legacy-wrap #tab-overview .sk-md-user-client-card .sk-md-warning-note,.md-legacy-wrap #tab-overview .sk-md-user-client-card .sk-md-user-access{max-width:100%;box-sizing:border-box}
.md-legacy-wrap .sk-md-user-hint{color:var(--text-muted,#94a3b8);font-size:.72rem;line-height:1.35}
.md-legacy-wrap .sk-md-user-empty{color:var(--text-muted,#94a3b8);font-size:.75rem}
.md-legacy-wrap .sk-md-mesh-card{display:flex;flex-direction:column}
.md-legacy-wrap .sk-md-mesh-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.18rem .5rem;align-items:start;font-size:.88rem;line-height:1.35}
.md-legacy-wrap .sk-md-mesh-dot{grid-row:1/span 3;width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 10px;margin-top:.24rem;background:var(--text-muted,#94a3b8)}
.md-legacy-wrap .sk-md-mesh-dot.is-good,.md-legacy-wrap .sk-md-mesh-peer-dot.is-good{background:var(--success,#22c55e)}
.md-legacy-wrap .sk-md-mesh-dot.is-warn{background:var(--warning,#f59e0b)}
.md-legacy-wrap .sk-md-mesh-dot.is-danger,.md-legacy-wrap .sk-md-mesh-peer-dot.is-danger{background:var(--danger,#ef4444)}
.md-legacy-wrap .sk-md-mesh-title{font-weight:600;white-space:normal}
.md-legacy-wrap .sk-md-mesh-muted{grid-column:2;color:var(--text-muted,#94a3b8)}
.md-legacy-wrap .sk-md-mesh-time{grid-column:2;font-size:.75rem;color:var(--text-muted,#94a3b8);margin-left:0;white-space:normal}
.md-legacy-wrap .sk-md-mesh-details{margin-top:.5rem}
.md-legacy-wrap .sk-md-mesh-summary{cursor:pointer;font-size:.8rem;color:var(--text-muted,#94a3b8)}
.md-legacy-wrap .sk-md-mesh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.3rem 1rem;margin-top:.5rem;font-size:.82rem}
.md-legacy-wrap .sk-md-mesh-peer{display:flex;align-items:center;gap:.4rem;padding:.25rem 0}
.md-legacy-wrap .sk-md-mesh-peer-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 8px;background:var(--warning,#f59e0b)}
.md-legacy-wrap .sk-md-mesh-name{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis}
.md-legacy-wrap .sk-md-mesh-latency{color:var(--text-muted,#94a3b8);font-size:.75rem;margin-left:auto}
.md-legacy-wrap #tab-security.active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:stretch}
.md-legacy-wrap #tab-security > .detail-grid{display:contents}
.md-legacy-wrap #tab-security > .detail-grid > .detail-section{min-width:0}
.md-legacy-wrap #tab-security > .detail-section,.md-legacy-wrap #tab-security > .sub-section{margin:0}
.md-legacy-wrap #tab-security > .sk-md-local-accounts-card,.md-legacy-wrap #tab-security > .sub-section,.md-legacy-wrap #tab-security > .hint{grid-column:1/-1}
.md-legacy-wrap #entity-links-panel{background:var(--bg-card,#1a1d27);border:1px solid var(--border,#334155);border-radius:8px;padding:1rem;margin-top:1rem;color:var(--text,#e5e7eb)}
.md-legacy-wrap #entity-links-panel .el-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.4rem}
.md-legacy-wrap #entity-links-panel .el-title{margin:0;font-size:1rem;color:var(--text,#e5e7eb)}
.md-legacy-wrap #entity-links-panel .el-help{margin:0 0 .7rem;font-size:.78rem;color:var(--text-muted,#94a3b8)}
.md-legacy-wrap #entity-links-panel .el-list{list-style:none;padding:0;margin:0;font-size:.875rem}
.md-legacy-wrap #entity-links-panel .el-empty{font-size:.8rem;color:var(--text-muted,#94a3b8);display:none}
.md-legacy-wrap #entity-links-panel .el-empty.is-visible{display:block}
.md-legacy-wrap #entity-links-panel .el-add-form{display:none;margin-top:.75rem;padding:.75rem;background:var(--bg,#0f172a);border:1px solid var(--border,#334155);border-radius:6px}
.md-legacy-wrap #entity-links-panel .el-add-form.is-open{display:block}
.md-legacy-wrap #entity-links-panel .el-form-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}
.md-legacy-wrap #entity-links-panel .el-label{display:block;font-size:.75rem;color:var(--text-muted,#94a3b8);margin-bottom:.2rem}
.md-legacy-wrap #entity-links-panel .el-field{padding:.3rem .5rem;border-radius:4px;border:1px solid var(--border,#334155);background:var(--bg,#0f172a);color:var(--text,#e5e7eb);font-size:.85rem}
.md-legacy-wrap #entity-links-panel .el-search-wrap{position:relative}
.md-legacy-wrap #entity-links-panel .el-search-list{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-card,#1a1d27);border:1px solid var(--border,#334155);border-radius:4px;list-style:none;padding:0;margin:0;max-height:160px;overflow-y:auto;z-index:200;font-size:.82rem}
.md-legacy-wrap #entity-links-panel .el-search-list.is-open{display:block}
.md-legacy-wrap #entity-links-panel .el-actions{display:flex;gap:.35rem}
.md-legacy-wrap #entity-links-panel .el-form-error{color:var(--danger,#f87171);font-size:.78rem;margin-top:.4rem;display:none}
.md-legacy-wrap #entity-links-panel .el-form-error.is-visible{display:block}
.md-legacy-wrap #entity-links-panel .el-link-row{display:flex;align-items:center;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid var(--border,#334155)}
.md-legacy-wrap #entity-links-panel .el-link-type{font-size:.72rem;background:rgba(255,255,255,.05);border:1px solid var(--border,#334155);border-radius:3px;padding:.1rem .3rem;margin-right:.4rem}
.md-legacy-wrap #entity-links-panel .el-link-note{color:var(--text-muted,#94a3b8);font-size:.75rem;margin-left:.5rem}
.md-legacy-wrap #entity-links-panel .el-delete{background:none;border:0;cursor:pointer;color:var(--danger,#f87171);font-size:1rem;line-height:1;padding:0 .25rem}
.md-legacy-wrap > .page-header,
.md-legacy-wrap > .sk-md-command-pane{display:none}
.md-legacy-wrap #sk-netbird-widget,
.md-legacy-wrap #sk-netbird-install-widget,
.md-legacy-wrap #sk-os-updates-widget,
.md-legacy-wrap #hardware-photos{display:none!important}
.md-legacy-wrap .activity-panel{position:fixed;top:0;right:0;width:400px;max-width:100vw;height:100%;background:var(--bg,#0f172a);border-left:1px solid var(--border,#334155);z-index:1001;transform:translateX(100%);transition:transform .2s;overflow-y:auto;padding:1rem}
.md-legacy-wrap .activity-panel:not(.open){display:none!important}
.md-legacy-wrap .activity-panel.open{display:block;transform:translateX(0)}
.md-legacy-wrap .activity-panel-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:1000;display:none}
.md-legacy-wrap .activity-panel-backdrop.open{display:block}
.md-legacy-wrap .sk-md-modal{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;background:rgba(0,0,0,.55);padding:1rem}
.md-legacy-wrap .sk-md-modal.is-open{display:flex}
.md-legacy-wrap .sk-md-image-modal{display:none;position:fixed;inset:0;z-index:2000;align-items:center;justify-content:center;background:rgba(0,0,0,.85)}
.md-legacy-wrap .sk-md-image-modal.is-open{display:flex}
.md-legacy-wrap .sk-md-caption-form{display:none!important}
.md-legacy-wrap .sk-cmd-drawer{position:fixed;top:0;right:0;width:480px;max-width:100vw;height:100%;z-index:1002;background:var(--bg-card,#1a1d27);border-left:1px solid var(--border,#334155);transform:translateX(100%);transition:transform .2s;overflow-y:auto;padding:1rem;color:var(--text,#e5e7eb)}
.md-legacy-wrap .sk-cmd-drawer:not(.open){display:none!important}
.md-legacy-wrap .sk-cmd-drawer.open{display:block;transform:translateX(0)}
.md-legacy-wrap .sk-cmd-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1001}
.md-legacy-wrap .sk-cmd-drawer-backdrop.open{display:block}
.md-legacy-wrap .fh-modal{display:none;position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.45)}
.md-legacy-wrap .fh-modal.is-open{display:flex}
.md-legacy-wrap .runcmd-modal-overlay{display:none;position:fixed;inset:0;z-index:10000;align-items:center;justify-content:center;background:rgba(0,0,0,.6)}
@container (max-width:1040px){.md-legacy-wrap #tab-overview > .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.md-legacy-wrap #tab-overview .sk-md-mesh-card{order:6}.md-legacy-wrap #tab-overview .sk-md-datetime-card{order:7}}
@container (max-width:620px){.md-legacy-wrap #tab-overview > .detail-grid{grid-template-columns:1fr}}
@media (max-width:1200px){.md-legacy-wrap .detail-grid,.md-legacy-wrap #tab-security.active{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.md-legacy-wrap .detail-grid,.md-legacy-wrap #tab-security.active{grid-template-columns:1fr}.md-legacy-wrap #tab-security > .detail-grid{display:grid;grid-template-columns:1fr}}

.sat-wrap { max-width: 480px; margin: 0 auto; padding: 1rem; }
  .sat-camera { width: 100%; aspect-ratio: 3/4; background: #000; border-radius: 8px; overflow: hidden; position: relative; }
  .sat-camera video { width: 100%; height: 100%; object-fit: cover; }
  .sat-reticle { position: absolute; inset: 18% 12%; border: 2px dashed rgba(255,255,255,0.6); border-radius: 8px; pointer-events: none; }
  .sat-result { margin-top: 0.75rem; font-family: ui-monospace, Menlo, monospace; font-size: 0.95rem; word-break: break-all; }
  .sat-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
  .sat-row { margin: 0.5rem 0; font-size: 0.9rem; }
  .sat-row label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.2rem; }
  .sat-row input { width: 100%; font-family: ui-monospace, Menlo, monospace; padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text); font-size: 1rem; }
  .sat-flash { margin-top: 0.5rem; font-size: 0.85rem; min-height: 1.2em; }

/* Force the terminal page to fill the iframe viewport exactly.
     The base_minimal template uses min-height:100vh on .minimal-main,
     which worked for single-tab v6.5.9 but is unreliable when the
     body has flex children that don't have their own height. The
     v6.5.13 screenshot shows the terminal rendering at ~16 rows in
     a modal that should be ~40+ rows — iframe content is collapsing
     vertically. Fix: pin html/body/.minimal-main to a hard height:
     100%/100vh so the flex chain has a concrete viewport to fill. */
  .minimal-main { height: 100vh; min-height: 0; padding: 0.25rem 0.5rem 0.5rem; display: flex; flex-direction: column; overflow: hidden; }

  .tab-bar { display: flex; align-items: center; gap: 2px; padding: 0.25rem 0 0.35rem; border-bottom: 1px solid var(--border); }
  .tab-bar .tab { display: inline-flex; align-items: center; gap: 0.35rem; background: #1a2433; border: 1px solid #1f2937; color: #e6e6e6; padding: 0.25rem 0.55rem; border-radius: 4px 4px 0 0; font-size: 0.75rem; cursor: pointer; max-width: 220px; }
  .tab-bar .tab.active { background: #000; border-color: #3b82f6; color: #fff; }
  .tab-bar .tab .tab-close { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.85rem; padding: 0 2px; opacity: 0.6; }
  .tab-bar .tab .tab-close:hover { opacity: 1; color: #f85149; }
  .tab-bar .tab-add { background: #0b0f17; border: 1px dashed #3b82f6; color: #58a6ff; padding: 0.25rem 0.6rem; border-radius: 4px; font-size: 0.75rem; cursor: pointer; }
  .tab-bar .tab-add[disabled] { opacity: 0.4; cursor: not-allowed; }
  .tab-bar .spacer { flex: 1; }
  .tab-bar .status-group { display: flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; color: var(--text-muted); }
  .tab-bar .status-group .btn { font-size: 0.7rem; padding: 2px 8px; }

  .term-layout { display: flex; gap: 0.5rem; flex: 1; min-height: 0; min-width: 0; }
  .term-main   { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
  .term-host   { flex: 1; width: 100%; background: #000; border: 1px solid var(--border); border-radius: 4px; padding: 4px; min-height: 300px; display: none; }
  .term-host.active { display: block; }

  .qc-panel { width: 280px; flex-shrink: 0; background: var(--card-bg, #111827); border: 1px solid var(--border); border-radius: 4px; overflow-y: auto; display: flex; flex-direction: column; font-size: 0.78rem; }
  .qc-panel.collapsed { width: 36px; }
  .qc-panel.collapsed .qc-body, .qc-panel.collapsed .qc-search { display: none; }
  .qc-panel.collapsed .qc-toggle { transform: rotate(180deg); }

  .qc-header { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card-bg, #111827); z-index: 1; }
  .qc-header strong { font-size: 0.8rem; }
  .qc-toggle { background: none; border: 1px solid var(--border); color: var(--text); cursor: pointer; border-radius: 3px; padding: 2px 6px; font-size: 0.85rem; }

  .qc-search { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); }
  .qc-search input { width: 100%; background: #0b0f17; border: 1px solid var(--border); color: var(--text); padding: 0.3rem 0.4rem; border-radius: 3px; font-size: 0.75rem; }

  .qc-body { flex: 1; padding: 0.25rem 0.4rem 0.75rem; }
  .qc-section { margin-top: 0.6rem; }
  .qc-section h4 { margin: 0 0 0.25rem; font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
  .qc-btn { display: block; width: 100%; text-align: left; background: #1a2433; border: 1px solid #1f2937; color: #e6e6e6; padding: 0.3rem 0.45rem; margin-bottom: 0.2rem; border-radius: 3px; cursor: pointer; font-size: 0.74rem; font-family: inherit; line-height: 1.2; }
  .qc-btn:hover { background: #243244; border-color: #3b82f6; }
  .qc-btn.danger { border-color: #7f1d1d; }
  .qc-btn.danger:hover { background: #3a1818; border-color: #ef4444; }
  .qc-btn .qc-cmd { display: block; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.68rem; color: #94a3b8; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qc-btn.danger .qc-cmd { color: #fca5a5; }
  .qc-empty { color: var(--text-muted); font-size: 0.75rem; padding: 0.5rem; text-align: center; }

  /* Mobile — collapse Quick Commands so the terminal stays usable. */
  @media (max-width: 768px) {
    .qc-panel { width: 36px; }
    .qc-panel .qc-body, .qc-panel .qc-search { display: none; }
    .qc-panel.open { width: 240px; }
    .qc-panel.open .qc-body, .qc-panel.open .qc-search { display: block; }
  }
  @media (max-width: 480px) {
    .qc-panel { display: none; }
  }

  .minimal-main { height: 100vh; min-height: 0; padding: 0.25rem 0.5rem 0.5rem; display: flex; flex-direction: column; overflow: hidden; }

  .vnc-header { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0; border-bottom: 1px solid var(--border); font-size: 0.8rem; flex-wrap: wrap; }
  .vnc-header h2 { margin: 0; font-size: 0.95rem; font-weight: 600; }
  .vnc-header .spacer { flex: 1 1 auto; }
  .vnc-header .state { font-weight: 600; }
  .vnc-header .btn { font-size: 0.75rem; padding: 2px 8px; }

  .vnc-body { flex: 1 1 auto; min-height: 0; position: relative; background: #000; margin-top: 0.35rem; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  #vncScreen { width: 100%; height: 100%; outline: none; display:flex; align-items:center; justify-content:center; }
  /* Let noVNC own canvas scaling. Forcing width/height here stretches
     the rendered bitmap after noVNC has mapped pointer coordinates,
     which causes the remote cursor to land away from the local cursor. */
  #vncScreen canvas { max-width:100%; max-height:100%; }
  .vnc-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #94a3b8; font-size: 0.9rem; text-align: center; padding: 2rem; }
  .vnc-status .err { color: #f85149; max-width: 720px; }
  .vnc-files-panel { position: absolute; top: 0.65rem; right: 0.65rem; bottom: 0.65rem; width: min(920px, calc(100% - 1.3rem)); z-index: 20; display: none; flex-direction: column; background: var(--bg-card, #0d1117); border: 1px solid var(--border); box-shadow: 0 14px 36px rgba(0,0,0,0.45); border-radius: 6px; color: var(--text); }
  .vnc-files-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); }
  .vnc-files-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 0.75rem; }
  .vnc-files-pane { min-height: 0; display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--border); border-radius: 6px; padding: 0.65rem; background: rgba(255,255,255,0.02); }
  .vnc-files-pane-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; min-height:28px; }
  .vnc-files-pane-title { font-weight:700; font-size:0.86rem; }
  .vnc-files-pane-sub { color:var(--text-muted); font-size:0.7rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .vnc-files-actions { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; }
  .vnc-files-drop { flex: 0 0 auto; min-height: 92px; border: 1px dashed var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--text-muted); padding: 0.85rem; }
  .vnc-files-drop.drag { border-color:#58a6ff; background:rgba(88,166,255,0.08); }
  .vnc-files-log { flex: 1; min-height: 0; overflow: auto; font-size: 0.78rem; }
  .vnc-file-row { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0.35rem 0; }
  .vnc-file-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vnc-file-row .file-meta { flex:0 0 auto; color:var(--text-muted); font-size:0.72rem; }
  .vnc-file-row .file-status { flex:0 0 auto; font-size:0.7rem; color:var(--text-muted); }
  .vnc-file-empty { color:var(--text-muted); text-align:center; padding:1.1rem 0.5rem; border:1px dashed rgba(255,255,255,0.08); border-radius:6px; }
  .vnc-files-foot { padding:0 0.75rem 0.75rem; color:var(--text-muted); font-size:0.72rem; }
  @media (max-width: 760px) { .vnc-files-grid { grid-template-columns: 1fr; } }

/* Bundle I (6.76.23): page-local --ml-* now alias canonical tokens. Inline-style
   reduction: utility classes added below for transport pills, disk pills,
   status pills, health pills, modals, and column picker. */
.mlist {
    --ml-mono: var(--font-mono);
    --ml-sans: var(--font-sans);
    --ml-on: var(--success);
    --ml-off: var(--danger);
    --ml-warn: var(--warning);
    --ml-accent: var(--accent);
    --ml-mute: var(--text-muted);
    font-family: var(--ml-sans);
    letter-spacing: -0.005em;
}
.mlist .status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.mlist .status-online { background:var(--ml-on); box-shadow:0 0 5px color-mix(in srgb, var(--success) 70%, transparent); animation: ml-pulse 2.4s ease-out infinite; }
.mlist .status-offline { background:var(--ml-off); }
.mlist .status-dot--sleep { background:var(--warning); }
.mlist .status-dot--shut { background:#8e44ad; }
.mlist .status-dot--reboot { background:var(--info); }
.mlist .status-dot--unknown { background:var(--text-faint); }
@keyframes ml-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); }
    70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--success) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 0%, transparent); }
}
.mlist .inline-edit-row { background:var(--surface); }
.mlist .inline-edit-row td { padding:0.5rem !important; }
.mlist .inline-edit-form { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:flex-end; }
.mlist .inline-edit-form .form-group { margin:0; min-width:120px; }
.mlist .inline-edit-form label { display:block; font-size:var(--text-xs); color:var(--ml-mute); text-transform:uppercase; margin-bottom:0.15rem; }
.mlist .inline-edit-form input, .mlist .inline-edit-form select { width:100%; padding:0.3rem 0.4rem; background:var(--surface-input); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); font-size:var(--text-sm); }
.mlist .filter-btn.active { background:var(--ml-accent); color:#fff; }

/* New utilities: replace inline styles. */
.mlist .ml-pin { cursor:pointer; font-size:0.7rem; color:var(--text-muted); opacity:0.3; }
.mlist .ml-pin.is-pinned { color:var(--warning); opacity:1; }
.mlist .ml-copy { cursor:pointer; font-size:0.6rem; color:var(--text-muted); margin-left:3px; opacity:0.4; }
.mlist .ml-upgrade { color:#e67e22; cursor:pointer; font-size:0.9rem; margin-left:0.2rem; }
.mlist .ml-vm-badge { background:#8e44ad; color:#fff; font-size:0.65rem; padding:0.1rem 0.35rem; }
.mlist .ml-trans { font-size:0.55rem; padding:1px 4px; border-radius:var(--radius-sm); margin-left:3px; font-weight:var(--weight-semibold); }
.mlist .ml-trans--grpc { background:color-mix(in srgb, var(--info) 22%, #000); color:var(--info); }
.mlist .ml-trans--ws { background:color-mix(in srgb, var(--warning) 22%, #000); color:var(--warning); }
.mlist .ml-trans--http { background:#21262d; color:var(--text-muted); }
.mlist .ml-disk-pill { font-size:0.55rem; padding:1px 4px; border-radius:var(--radius-sm); margin-left:2px; font-weight:var(--weight-bold); }
.mlist .ml-disk-pill--critical { background:color-mix(in srgb, var(--danger) 25%, #000); color:var(--danger); }
.mlist .ml-disk-pill--warn { background:color-mix(in srgb, var(--warning) 25%, #000); color:var(--warning); }
.mlist .ml-friendly { color:var(--text-muted); }
.mlist .ml-tag { display:inline-block; font-size:0.6rem; padding:0 4px; border-radius:var(--radius-sm); background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); margin-right:2px; }
.mlist .ml-asset { color:var(--accent); }
.mlist .ml-files { font-size:0.6rem; color:#7aa7d9; }
.mlist .ml-loc-edit { cursor:pointer; }
.mlist .ml-loc-pencil { font-size:0.6rem; color:var(--text-muted); margin-left:3px; opacity:0.6; }
.mlist .ml-os-cell { white-space:nowrap; }
.mlist .ml-eol { font-size:0.6rem; padding:1px 4px; margin-left:4px; }
.mlist .ml-ram { font-size:0.55rem; color:var(--text-muted); margin-left:3px; }
.mlist .ml-cmd-dot { font-size:0.55rem; margin-left:2px; color:var(--text-muted); }
.mlist .ml-cmd-dot--ok { color:var(--success); }
.mlist .ml-cmd-dot--pending { color:var(--warning); }
.mlist .ml-cmd-dot--running { color:var(--accent); }
.mlist .ml-status-pill { /* row-status badges */ }
.mlist .ml-status-pill--online { background:color-mix(in srgb, var(--success) 25%, #000); color:var(--success); }
.mlist .ml-status-pill--sleep { background:color-mix(in srgb, var(--warning) 25%, #000); color:var(--warning); }
.mlist .ml-status-pill--shut { background:#2a1f3d; color:#a78bfa; }
.mlist .ml-status-pill--reboot { background:color-mix(in srgb, var(--info) 25%, #000); color:var(--info); }
.mlist .ml-status-pill--off { background:color-mix(in srgb, var(--danger) 25%, #000); color:var(--danger); }
.mlist .ml-status-pill--unknown { background:#2a2a2a; color:#9ca3af; }
.mlist .ml-reboot-icon { color:var(--danger); }
.mlist .ml-health-pill { font-size:0.72rem; padding:2px 7px; border-radius:5px; font-weight:var(--weight-bold); }
.mlist .ml-health-pill--good { background:color-mix(in srgb, var(--success) 25%, #000); color:var(--success); }
.mlist .ml-health-pill--mid { background:color-mix(in srgb, var(--warning) 25%, #000); color:var(--warning); }
.mlist .ml-health-pill--bad { background:color-mix(in srgb, var(--danger) 25%, #000); color:var(--danger); }
.mlist .ml-health-na { color:var(--text-muted); font-size:0.72rem; }
.mlist .ml-row { cursor:pointer; }
.mlist .ml-col-version { white-space:nowrap; font-family:var(--font-mono); font-size:0.75rem; }
.mlist .ml-col-mini { font-size:0.82rem; }
.mlist .ml-col-asset { font-size:0.82rem; color:var(--accent); }
.mlist .ml-col-disk-text--critical { color:var(--danger); font-weight:var(--weight-bold); }
.mlist .ml-col-disk-text--warn { color:var(--warning); font-weight:var(--weight-bold); }
.mlist .ml-actions-cell { white-space:nowrap; }
.mlist .ml-bulk-bar { margin-bottom:1rem; padding:0.75rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); align-items:center; gap:0.75rem; flex-wrap:wrap; }
.mlist .ml-bulk-count { font-weight:var(--weight-semibold); }
.mlist .ml-bulk-script-sel { min-width:200px; }
.mlist .ml-bulk-adv { flex-basis:100%; }
.mlist .ml-bulk-adv summary { font-size:var(--text-sm); cursor:pointer; color:var(--text-muted); margin-top:0.3rem; }

/* Bulk-action "More" group: desktop = inline-flatten via display:contents
   so the secondary buttons sit in the bar like always; mobile = collapse
   into a tappable summary + dropdown panel so 15 buttons don't blow past
   the viewport. */
.mlist .ml-bulk-more { position:relative; display:contents; }
.mlist .ml-bulk-more > .ml-bulk-more-summary { display:none; }
.mlist .ml-bulk-more > .ml-bulk-more-row { display:contents; }
@media (max-width: 768px) {
    .mlist .ml-bulk-more { display:inline-block; }
    .mlist .ml-bulk-more > .ml-bulk-more-summary { display:inline-flex; align-items:center; gap:4px; cursor:pointer; list-style:none; }
    .mlist .ml-bulk-more > .ml-bulk-more-summary::-webkit-details-marker { display:none; }
    .mlist .ml-bulk-more[open] > .ml-bulk-more-row {
        display:flex; flex-wrap:wrap; gap:0.4rem;
        position:absolute; right:0; top:calc(100% + 4px); z-index:200;
        background:var(--surface); border:1px solid var(--border);
        border-radius:var(--radius-md); padding:0.55rem;
        box-shadow:var(--shadow-md); min-width:220px; max-width:90vw;
    }
    .mlist .ml-bulk-more[open] > .ml-bulk-more-row .btn {
        flex:1 1 calc(50% - 0.4rem); justify-content:center;
    }
}
.mlist .ml-bulk-adv-row { display:flex; gap:0.5rem; margin-top:0.4rem; }
.mlist .ml-bulk-adv-input { flex:1; min-width:200px; }
.mlist .ml-modal-w500 { max-width:500px; }
.mlist .ml-modal-w450 { max-width:450px; }
.mlist .ml-modal-w420 { max-width:420px; }
.mlist .ml-modal-count { color:var(--text-muted); font-weight:var(--weight-normal); }
.mlist .ml-modal-help { font-size:var(--text-sm); color:var(--text-muted); margin-top:0; }
.mlist .ml-form-full { width:100%; }
.mlist .ml-form-actions-row { display:flex; gap:0.5rem; }
.mlist .ml-saved-views-bar { margin-bottom:0.5rem; }
.mlist .ml-toolbar { display:flex; gap:0.5rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.mlist .ml-search-input { max-width:400px; width:100%; }
.mlist .ml-csv-btn { margin-left:auto; }
.mlist .ml-col-picker-wrap { position:relative; }
.mlist .ml-col-picker { display:none; position:absolute; z-index:999; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:0.75rem; min-width:180px; box-shadow:var(--shadow-md); }
.mlist .ml-col-picker-title { font-weight:var(--weight-semibold); font-size:var(--text-sm); margin-bottom:0.4rem; }
.mlist .ml-col-picker-row { display:flex; gap:0.4rem; align-items:center; cursor:pointer; font-size:var(--text-sm); margin-bottom:0.25rem; }
.mlist .ml-col-picker-divider { border-top:1px solid var(--border); margin:0.4rem 0; padding-top:0.4rem; font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; }
.mlist .ml-bulk-bar-textarea { width:100%; }
.mlist th.ml-th-checkbox { width:30px; }
.mlist th.sortable { cursor:pointer; }
/* mach-col-opt initial hidden state is set inline; JS toggles it. Keeping
   inline 'display:none' so the JS line `cells[idx].style.display = ''` can
   reveal them via the cascade falling back to the natural display. */
.mlist .ml-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:4rem 2rem; text-align:center; }
.mlist .ml-empty-icon { width:80px; height:80px; border-radius:50%; background:var(--surface); border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; }
.mlist .ml-empty-title { margin:0 0 0.5rem 0; font-size:1.5rem; }
.mlist .ml-empty-body { color:var(--text-muted); margin:0 0 1.5rem 0; max-width:400px; }
.mlist .ml-empty-btn { font-size:1rem; padding:0.75rem 2rem; }
.mlist .ml-help-btn { margin-left:0.25rem; vertical-align:middle; }
.mlist .ml-context-menu { display:none; position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px 0; z-index:2000; min-width:180px; box-shadow:var(--shadow-md); }
.mlist .ml-context-item { display:block; padding:6px 14px; color:var(--text); text-decoration:none; font-size:var(--text-sm); cursor:pointer; }
.mlist .ml-context-item:hover { background:var(--surface-hover); }
.mlist .sortable .sort-icon::after { content:''; font-size:0.7rem; margin-left:0.2rem; }
.mlist .sortable.sort-asc .sort-icon::after { content:' \25B2'; }
.mlist .sortable.sort-desc .sort-icon::after { content:' \25BC'; }
.mlist .upgrade-arrow { display:inline-block; }
.mlist .upgrade-spinner { display:inline-block; width:12px; height:12px; border:2px solid #e67e22; border-top-color:transparent; border-radius:50%; animation:ml-spin 0.6s linear infinite; }
@keyframes ml-spin { to { transform:rotate(360deg); } }

/* ── Compact header bar with mono stat pills ─────────────────── */
.mlist .ml-bar {
    display:flex; align-items:center; gap:0.6rem;
    padding:0.4rem 0 0.7rem;
    border-bottom:1px solid var(--border);
    margin-bottom:0.8rem;
    flex-wrap:wrap;
}
.mlist .ml-h1 {
    font-size:0.95rem; font-weight:700; letter-spacing:-0.01em; margin:0;
    display:inline-flex; align-items:center; gap:0.35rem;
}
.mlist .ml-stat-pills { display:flex; gap:0.4rem; margin-left:auto; flex-wrap:wrap; }
.mlist .ml-pill {
    font-family: var(--ml-mono); font-size:0.72rem; padding:4px 9px;
    border-radius:999px; background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    display:inline-flex; gap:0.4rem; align-items:center; line-height:1.1;
}
.mlist .ml-pill b { font-weight:700; }
.mlist .ml-pill .lbl { color:var(--ml-mute); text-transform:uppercase; letter-spacing:0.08em; font-size:0.62rem; }
.mlist .ml-pill.on  { color:var(--ml-on);  border-color:rgba(34,197,94,0.4);  background:rgba(34,197,94,0.07); }
.mlist .ml-pill.off { color:var(--ml-off); border-color:rgba(239,68,68,0.4);  background:rgba(239,68,68,0.07); }
.mlist .ml-hint {
    font-family: var(--ml-mono); font-size:0.66rem;
    color:var(--ml-mute); text-transform:uppercase; letter-spacing:0.16em;
    margin:0 0 0.7rem; padding:0;
}

/* ── Table rows: 9px vertical padding, hairline dividers, accent stripe for online ─ */
.mlist #machines-table thead th {
    font-family: var(--ml-mono);
    font-size:0.66rem; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--ml-mute);
    font-weight:600;
}
.mlist #machines-table tbody td { padding-top:9px; padding-bottom:9px; vertical-align:middle; }
.mlist #machines-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
.mlist #machines-table tbody tr[data-online="1"] { box-shadow: inset 2px 0 0 0 var(--ml-on); }

/* OS column: brand glyph + version label, no family word. */
.mlist .ml-os {
    display:inline-flex; align-items:center; gap:0.45rem;
    font-family: var(--ml-mono); font-size:0.74rem; line-height:1;
}
.mlist .ml-os svg { width:14px; height:14px; flex-shrink:0; }
.mlist .ml-os.win { color:#79c0ff; }
.mlist .ml-os.svr { color:#fb923c; }
.mlist .ml-os.mac { color:#e2e8f0; }
.mlist .ml-os.lnx { color:#34d399; }
.mlist .ml-os.unk { color:var(--ml-mute); }
.mlist .ml-os-ver { color:var(--text); }

/* Staggered row fade-in (capped at 8 rows via :nth-child rules) */
@keyframes ml-rowin { from { opacity:0; transform: translateY(2px); } to { opacity:1; transform:none; } }
.mlist #machines-table tbody tr { animation: ml-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards; }
.mlist #machines-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.mlist #machines-table tbody tr:nth-child(2) { animation-delay: 50ms; }
.mlist #machines-table tbody tr:nth-child(3) { animation-delay: 100ms; }
.mlist #machines-table tbody tr:nth-child(4) { animation-delay: 150ms; }
.mlist #machines-table tbody tr:nth-child(5) { animation-delay: 200ms; }
	.mlist #machines-table tbody tr:nth-child(6) { animation-delay: 250ms; }
	.mlist #machines-table tbody tr:nth-child(7) { animation-delay: 300ms; }
	.mlist #machines-table tbody tr:nth-child(8) { animation-delay: 350ms; }
	.mlist #machines-table tbody tr:nth-child(n+9) { animation: none; }

	/* Mobile card table: same markup and JS hooks, phone-native layout. */
	@media (max-width: 640px) {
	    .mlist .ml-bar { gap:0.45rem; padding-top:0.2rem; }
	    .mlist .ml-h1 { width:100%; }
	    .mlist .ml-stat-pills { width:100%; margin-left:0; }
	    .mlist .ml-pill { flex:1 1 calc(50% - 0.4rem); justify-content:space-between; }
	    .mlist .ml-toolbar { align-items:stretch; gap:0.4rem; }
	    .mlist .ml-search-input { max-width:none; flex-basis:100%; }
	    .mlist .ml-toolbar .btn { flex:1 1 auto; justify-content:center; }
	    .mlist .ml-csv-btn { margin-left:0; flex-basis:100%; }
	    .mlist .ml-col-picker-wrap { flex:1 1 auto; }
	    .mlist .ml-col-picker-wrap > .btn { width:100%; }
	    .mlist .ml-col-picker { position:fixed; left:12px; right:12px; top:96px; min-width:0; max-height:calc(100dvh - 132px); overflow:auto; }

	    .mlist #machines-table.resp-card-table,
	    .mlist #machines-table.resp-card-table tbody,
	    .mlist #machines-table.resp-card-table tr,
	    .mlist #machines-table.resp-card-table td {
	        display:block;
	        width:100%;
	        box-sizing:border-box;
	    }
	    .mlist #machines-table.resp-card-table thead { display:none; }
	    .mlist #machines-table.resp-card-table tbody {
	        display:grid;
	        gap:0.75rem;
	        overflow:visible;
	    }
	    .mlist #machines-table.resp-card-table tbody tr {
	        position:relative;
	        padding:0.72rem 0.78rem 0.82rem;
	        border:1px solid var(--border);
	        border-radius:8px;
	        background:var(--surface);
	        box-shadow:0 8px 24px rgba(0,0,0,0.16);
	    }
	    .mlist #machines-table.resp-card-table tbody tr[data-online="1"] {
	        box-shadow:inset 3px 0 0 0 var(--ml-on), 0 8px 24px rgba(0,0,0,0.16);
	    }
	    .mlist #machines-table.resp-card-table tbody td {
	        padding:0.32rem 0 !important;
	        min-height:0;
	        border:0;
	    }
	    .mlist #machines-table.resp-card-table tbody td:first-child {
	        position:absolute;
	        right:0.65rem;
	        top:0.6rem;
	        width:auto;
	        padding:0 !important;
	        display:flex;
	        align-items:center;
	        gap:0.45rem;
	    }
	    .mlist #machines-table.resp-card-table tbody td:first-child .machine-checkbox {
	        width:22px;
	        height:22px;
	    }
	    .mlist #machines-table.resp-card-table tbody td[data-label]:not([data-label=""]):not(:first-child):not(.actions) {
	        display:grid !important;
	        grid-template-columns:minmax(82px, 34%) minmax(0, 1fr);
	        column-gap:0.65rem;
	        align-items:center;
	    }
	    .mlist #machines-table.resp-card-table tbody td[data-label]:not([data-label=""]):not(:first-child):not(.actions)::before {
	        content:attr(data-label);
	        color:var(--text-muted);
	        font-size:0.67rem;
	        font-weight:700;
	        text-transform:uppercase;
	        letter-spacing:0.08em;
	    }
	    .mlist #machines-table.resp-card-table tbody td[data-label="Hostname"] {
	        display:block !important;
	        padding-right:3.6rem !important;
	        margin-bottom:0.2rem;
	    }
	    .mlist #machines-table.resp-card-table tbody td[data-label="Hostname"]::before { display:none; }
	    .mlist #machines-table.resp-card-table td.machines-hide-mobile { display:grid !important; }
	    .mlist #machines-table.resp-card-table .actions {
	        display:flex;
	        gap:0.45rem;
	        flex-wrap:wrap;
	        padding-top:0.6rem !important;
	        margin-top:0.35rem;
	        border-top:1px solid var(--border);
	    }
	    .mlist #machines-table.resp-card-table .actions::before { display:none; }
	    .mlist #machines-table.resp-card-table .actions .btn,
	    .mlist #machines-table.resp-card-table .actions form {
	        flex:1 1 calc(33.333% - 0.45rem);
	    }
	    .mlist #machines-table.resp-card-table .actions form .btn { width:100%; }
	    .mlist .inline-edit-row { position:relative; }
	    .mlist .inline-edit-row td { display:block !important; }
	}

.decom-wrap { max-width: 100%; }
.decom-wrap h2 { margin-bottom: 0.25rem; }
.decom-wrap p.help { color: var(--text-muted); margin-top: 0; }
.decom-table { width: 100%; border-collapse: collapse; margin-top: 1rem;
               background: var(--bg-card); border: 1px solid var(--border);
               border-radius: 6px; overflow: hidden; }
.decom-table th, .decom-table td { padding: 0.55rem 0.65rem; text-align: left;
               border-bottom: 1px solid var(--border); font-size: 0.88rem;
               vertical-align: middle; }
.decom-table th { background: var(--bg-table-head, var(--bg-card));
               font-weight: 600; }
.decom-table tr:last-child td { border-bottom: 0; }
.decom-table .reason { color: var(--text-muted); font-style: italic; }
.decom-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.decom-actions button { font-size: 0.78rem; padding: 0.3rem 0.55rem;
               border-radius: 4px; cursor: pointer; border: 1px solid var(--border); }
.decom-actions .restore { background: #e8f5e9; color: #1b5e20; }
.decom-actions .delete  { background: #ffebee; color: #b71c1c; }
.decom-empty { padding: 2rem; text-align: center; color: var(--text-muted); }
@media (max-width: 720px) {
  .decom-table thead { display: none; }
  .decom-table, .decom-table tbody, .decom-table tr, .decom-table td {
      display: block; width: 100%; }
  .decom-table tr { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
  .decom-table td { border: 0; padding: 0.2rem 0.65rem; }
  .decom-table td::before { content: attr(data-label) ": ";
      font-weight: 600; color: var(--text-muted); }
  .decom-actions { padding-top: 0.4rem; }
}

.mnt-orch-w {
    --mo-fg: var(--text);
    --mo-mute: var(--text-muted);
    --mo-bg: var(--bg);
    --mo-card: var(--bg-card, var(--card-bg));
    --mo-bd: var(--border, var(--border-color));
    --mo-ok: #22c55e;
    --mo-warn: #f59e0b;
    --mo-err: #ef4444;
    --mo-accent: var(--primary, #4a9eff);
    --mo-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --mo-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--mo-sans);
    color: var(--mo-fg);
    letter-spacing: -0.005em;
}

.mnt-orch-w h2 {
    font-family: var(--mo-sans);
    letter-spacing: -0.01em;
}

/* ── Form card ──────────────────────────────────────────────────── */
.mnt-orch-w .mo-form-card {
    background: var(--mo-card); border: 1px solid var(--mo-bd);
    border-radius: 8px; padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.mnt-orch-w .mo-form-card label {
    font-family: var(--mo-sans); font-size: 0.8rem; font-weight: 500;
}
.mnt-orch-w .mo-form-card input[type="text"],
.mnt-orch-w .mo-form-card input[type="time"],
.mnt-orch-w .mo-form-card input[type="number"],
.mnt-orch-w .mo-form-card input[type="date"],
.mnt-orch-w .mo-form-card select {
    background: var(--mo-bg); border: 1px solid var(--mo-bd);
    border-radius: 4px; padding: 0.5rem;
    font-family: var(--mo-mono); font-size: 0.8rem; color: var(--mo-fg);
}
.mnt-orch-w .mo-form-card input:focus,
.mnt-orch-w .mo-form-card select:focus {
    outline: none; border-color: var(--mo-accent);
}
.mnt-orch-w .mo-form-checkbox {
    font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem;
    cursor: pointer; user-select: none;
}
.mnt-orch-w .mo-form-checkbox input[type="checkbox"] {
    cursor: pointer;
}

/* ── Table ──────────────────────────────────────────────────────── */
.mnt-orch-w .mo-table-wrap {
    background: var(--mo-card); border: 1px solid var(--mo-bd);
    border-radius: 6px; overflow-x: auto;
}
.mnt-orch-w .mo-table-wrap table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.mnt-orch-w .mo-table-wrap thead th {
    text-align: left; padding: 8px 10px;
    background: var(--mo-card);
    border-bottom: 1px solid var(--mo-bd);
    font-family: var(--mo-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--mo-mute);
    font-weight: 600; white-space: nowrap;
}
.mnt-orch-w .mo-table-wrap tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.3;
}
.mnt-orch-w .mo-table-wrap tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.mnt-orch-w .mo-table-wrap tbody tr:hover { background: rgba(74,158,255,0.06); }

/* ── Status badges ──────────────────────────────────────────────── */
.mnt-orch-w .mo-status-active {
    color: var(--mo-ok); font-family: var(--mo-mono);
    font-size: 0.75rem; font-weight: 600;
}
.mnt-orch-w .mo-status-disabled {
    color: var(--mo-mute); font-family: var(--mo-mono);
    font-size: 0.75rem;
}
.mnt-orch-w .mo-run-status {
    font-family: var(--mo-mono); font-size: 0.7rem;
}
.mnt-orch-w .mo-run-status.completed { color: var(--mo-ok); }
.mnt-orch-w .mo-run-status.partial { color: var(--mo-warn); }
.mnt-orch-w .mo-run-status.failed { color: var(--mo-err); }

.mnt-orch-w .mo-table-wrap td a {
    color: var(--mo-accent); text-decoration: none; font-weight: 600;
}
.mnt-orch-w .mo-table-wrap td a:hover { text-decoration: underline; }
.mnt-orch-w .mo-table-wrap td small {
    font-family: var(--mo-mono); font-size: 0.7rem; color: var(--mo-mute);
}

/* Staggered row fade-in */
@keyframes mo-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.mnt-orch-w .mo-table-wrap tbody tr {
    animation: mo-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(1) { animation-delay: 0ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(2) { animation-delay: 50ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(3) { animation-delay: 100ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(4) { animation-delay: 150ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(5) { animation-delay: 200ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(6) { animation-delay: 250ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(7) { animation-delay: 300ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(8) { animation-delay: 350ms; }
.mnt-orch-w .mo-table-wrap tbody tr:nth-child(n+9) { animation: none; }

.dup-group { padding: 0.85rem 1rem; background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.7rem; }
.dup-group h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.dup-group .meta { font-size: 0.78em; color: var(--text-muted); margin-bottom: 0.5rem; }
.dup-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.dup-file { padding: 0.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; font-size: 0.78em; }
.dup-file img { width: 100%; height: 90px; object-fit: cover; border-radius: 3px; margin-bottom: 0.3rem; }
.dup-file .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.dup-file .ts { color: var(--text-muted); font-size: 0.92em; }
.dup-file .actions { margin-top: 0.3rem; display: flex; gap: 0.3rem; }
.dup-pill { display: inline-block; padding: 2px 8px; background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.4); border-radius: 10px; font-size: 0.7em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

.skmp-root { font-family: inherit; color: inherit; }
  .skmp-toolbar { display:flex; gap:.5rem; align-items:center;
                  padding:.5rem .75rem; border-bottom:1px solid var(--border, #ddd); }
  .skmp-filter { flex:1; padding:.4rem .6rem; font-size:.9rem;
                 border:1px solid var(--border, #ccc); border-radius:4px;
                 background:var(--bg-input, #fff); color:inherit; }
  .skmp-status { font-size:.8rem; color:var(--text-muted, #888); min-width:5rem;
                 text-align:right; }
  .skmp-grid { display:grid; gap:.6rem; padding:.75rem;
               grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
               overflow:auto; }
  .skmp-tile { display:flex; flex-direction:column; align-items:stretch;
               gap:.3rem; padding:.35rem; border:1px solid var(--border, #ddd);
               border-radius:6px; background:var(--card-bg, #fff);
               color:inherit; cursor:pointer; text-align:left; }
  .skmp-tile:hover, .skmp-tile:focus { border-color:var(--primary, #3b82f6);
                                        outline:none; }
  .skmp-tile img { width:100%; height:110px; object-fit:cover; border-radius:4px;
                   display:block; background:#0002; }
  .skmp-name { font-size:.75rem; white-space:nowrap; overflow:hidden;
               text-overflow:ellipsis; }
  .skmp-more { text-align:center; padding:.5rem; }
  .skmp-loadmore { padding:.4rem .8rem; border:1px solid var(--border, #ccc);
                   background:var(--card-bg, #fff); color:inherit; cursor:pointer;
                   border-radius:4px; }
  .skmp-empty { grid-column:1/-1; text-align:center; padding:2rem;
                color:var(--text-muted, #888); font-size:.9rem; }
  .skmp-tile.skmp-hidden { display:none; }

.ms-grid { display: grid; gap: 1rem; }
.ms-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.ms-stat { padding: 0.7rem 0.85rem; background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border); border-radius: 6px; }
.ms-stat .label { font-size: 0.72em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ms-stat .value { font-size: 1.4em; font-weight: 700; margin-top: 2px; }
table.ms-table { width: 100%; border-collapse: collapse; font-size: 0.88em; }
table.ms-table th, table.ms-table td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); }
table.ms-table th { background: var(--bg-elevated, var(--bg-card)); }
table.ms-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-bar { display: inline-block; height: 6px; background: rgba(74,158,255,0.15); border-radius: 3px; vertical-align: middle; min-width: 50px; }
.ms-bar > span { display: block; height: 100%; background: #4a9eff; border-radius: 3px; }

.trash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }
.trash-tile { padding: 0.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; font-size: 0.78em; }
.trash-tile .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; margin-bottom: 0.2rem; }
.trash-tile .meta { color: var(--text-muted); font-size: 0.92em; margin-bottom: 0.4rem; }
.trash-tile .actions { display: flex; gap: 0.4rem; }

.mesh-w { --font-mono:'JetBrains Mono','SF Mono',Monaco,monospace; --font-head:'Inter Tight','Inter',sans-serif; }
.mesh-w * { font-family:var(--font-head); }
.mesh-w .mono, .mesh-w code { font-family:var(--font-mono); }

/* ── Summary metric cards ──────────────────────────────────────────── */
.mesh-summary-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
                      gap:0.75rem; margin-bottom:1.5rem;
                      animation:fadeIn 0.4s ease 0.05s backwards; }
.mesh-summary-card { background:var(--surface,var(--bg-card,#1a1d27)); padding:0.85rem 1rem;
                     border-radius:var(--radius-md,8px); border:1px solid var(--border,#2d3140);
                     display:flex; flex-direction:column; gap:0.25rem;
                     transition:border-color 0.12s ease; }
.mesh-summary-card:hover { border-color:var(--accent,#4a9eff); }
.mesh-summary-card .num { font-size:1.65rem; font-weight:600; line-height:1.1;
                          color:var(--text,#e1e4ed); font-family:var(--font-head); }
.mesh-summary-card .num.success { color:var(--success,#3fb950); }
.mesh-summary-card .num.danger  { color:var(--danger,#e5484d); }
.mesh-summary-card .num.warning { color:var(--warning,#d29922); }
.mesh-summary-card .label { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em;
                            color:var(--text-muted,#8b8fa3); font-weight:500; }

/* ── Chart cards ──────────────────────────────────────────────────── */
.mesh-graph-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
                   gap:0.75rem; margin-bottom:1.5rem;
                   animation:fadeIn 0.4s ease 0.1s backwards; }
.mesh-graph-card { background:var(--surface,var(--bg-card,#1a1d27));
                   border:1px solid var(--border,#2d3140);
                   border-radius:var(--radius-md,8px); padding:0.85rem 1rem;
                   transition:border-color 0.12s ease; }
.mesh-graph-card:hover { border-color:var(--accent,#4a9eff); }
.mesh-graph-card h3 { margin:0 0 0.2rem; font-size:0.88rem; font-weight:600;
                      color:var(--text,#e1e4ed); font-family:var(--font-head); }
.mesh-graph-card .sub { font-size:0.72rem; color:var(--text-muted,#8b8fa3); margin-bottom:0.6rem; }
.mesh-graph-card .chart-wrap { position:relative; height:180px; }

/* ── Per-site accordions ──────────────────────────────────────────── */
.mesh-sites-wrap { animation:fadeIn 0.4s ease 0.15s backwards; }
.mesh-site-accordion { background:var(--surface,var(--bg-card,#1a1d27));
                       border:1px solid var(--border,#2d3140);
                       border-radius:var(--radius-md,8px);
                       margin-bottom:0.75rem;
                       transition:border-color 0.12s ease; }
.mesh-site-accordion:hover { border-color:color-mix(in srgb, var(--accent,#4a9eff) 35%, var(--border,#2d3140)); }
.mesh-site-accordion[open] { border-color:var(--accent,#4a9eff); }
.mesh-site-header { display:flex; align-items:center; gap:0.75rem;
                    padding:0.85rem 1rem; cursor:pointer; user-select:none;
                    list-style:none; }
.mesh-site-header::-webkit-details-marker { display:none; }
.mesh-site-header:hover { background:color-mix(in srgb, var(--accent,#4a9eff) 4%, transparent); }
.mesh-site-header h3 { margin:0; font-size:0.95rem; font-weight:600; flex:1;
                       color:var(--text,#e1e4ed); font-family:var(--font-head); }
.mesh-site-header .site-stats { font-size:0.78rem; color:var(--text-muted,#8b8fa3);
                                display:flex; gap:0.85rem; align-items:center; }
.mesh-site-header .site-stats .ok { color:var(--success,#3fb950); }
.mesh-site-header .site-stats .bad { color:var(--danger,#e5484d); }
.mesh-site-header .toggle-arrow { color:var(--text-muted,#8b8fa3); font-size:0.7rem;
                                  transition:transform 0.2s; flex-shrink:0; }
.mesh-site-accordion[open] .toggle-arrow { transform:rotate(90deg); }
.mesh-site-body { padding:0.6rem 1rem 1rem;
                  border-top:1px solid var(--border,#2d3140); }

/* ── Endpoint grid + peer detail ──────────────────────────────────── */
.mesh-endpoint-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
                      gap:0.4rem; }
.mesh-ep { display:flex; align-items:center; gap:0.45rem;
           padding:0.4rem 0.6rem;
           border-radius:var(--radius-sm,6px);
           border:1px solid transparent;
           font-size:0.82rem; cursor:pointer;
           transition:background 0.12s ease, border-color 0.12s ease; }
.mesh-ep:hover { background:color-mix(in srgb, var(--accent,#4a9eff) 6%, transparent);
                 border-color:color-mix(in srgb, var(--accent,#4a9eff) 25%, var(--border,#2d3140)); }
.mesh-ep .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mesh-ep .dot.green  { background:var(--success,#3fb950); box-shadow:0 0 5px color-mix(in srgb, var(--success,#3fb950) 50%, transparent); }
.mesh-ep .dot.yellow { background:var(--warning,#d29922); }
.mesh-ep .dot.red    { background:var(--danger,#e5484d); }
.mesh-ep .dot.gray   { background:var(--text-muted,#8b8fa3); }
.mesh-ep .ep-name { font-weight:500; white-space:nowrap; overflow:hidden;
                    text-overflow:ellipsis; color:var(--text,#e1e4ed); }
.mesh-ep .ep-name a { color:inherit; text-decoration:none; }
.mesh-ep .ep-name a:hover { text-decoration:underline; }
.mesh-ep .ep-count { font-size:0.7rem; color:var(--text-muted,#8b8fa3);
                     margin-left:auto; white-space:nowrap;
                     font-family:var(--font-mono); }

.mesh-peer-detail { display:none; margin-top:0.5rem;
                    padding:0.6rem 0.85rem;
                    background:color-mix(in srgb, var(--accent,#4a9eff) 4%, transparent);
                    border:1px solid color-mix(in srgb, var(--accent,#4a9eff) 20%, var(--border,#2d3140));
                    border-radius:var(--radius-sm,6px);
                    font-size:0.82rem; }
.mesh-peer-detail.active { display:block; }
.mesh-peer-detail strong { color:var(--text,#e1e4ed); }
.mesh-peer-detail strong a { color:inherit; text-decoration:none; }
.mesh-peer-detail strong a:hover { text-decoration:underline; }
.mesh-peer-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
                  gap:0.2rem 1rem; margin-top:0.4rem; }
.mesh-peer-item { display:flex; align-items:center; gap:0.4rem;
                  padding:0.18rem 0; font-size:0.8rem;
                  color:var(--text,#e1e4ed); }
.mesh-peer-item .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.mesh-peer-item a { color:inherit; text-decoration:none; }
.mesh-peer-item a:hover { text-decoration:underline; }
.mesh-peer-item .latency { color:var(--text-muted,#8b8fa3); font-size:0.72rem;
                           margin-left:auto; font-family:var(--font-mono); }
.mesh-peer-item .remediated { color:var(--warning,#d29922); font-size:0.72rem;
                              margin-left:0.25rem; }

.mesh-site-hint { margin:0; padding:0.5rem 0.25rem;
                  font-size:0.82rem; color:var(--text-muted,#8b8fa3); }

@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

@keyframes cardFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.mod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:1rem; margin:1rem 0; }
.mod-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem; display:flex; flex-direction:column; gap:0.4rem; }
.mod-card h4 { margin:0; font-size:0.95rem; display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; justify-content:space-between; }
.mod-card p { margin:0; font-size:0.82rem; color:var(--text-muted); line-height:1.4; }
.mod-card .mod-state { font-size:0.7rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; padding:2px 8px; border-radius:10px; }
.mod-card .mod-state[data-on="1"] { background:rgba(34,197,94,0.15); color:#22c55e; border:1px solid rgba(34,197,94,0.4); }
.mod-card .mod-state[data-on="0"] { background:rgba(148,163,184,0.15); color:var(--text-muted); border:1px solid rgba(148,163,184,0.35); }
.mod-toggle { position:relative; display:inline-block; width:40px; height:22px; flex-shrink:0; }
.mod-toggle input { opacity:0; width:0; height:0; }
.mod-toggle .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ccc; border-radius:22px; transition:.2s; }
.mod-toggle .slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background:white; border-radius:50%; transition:.2s; }
.mod-toggle input:checked + .slider { background:var(--accent, #198754); }
.mod-toggle input:checked + .slider:before { transform:translateX(18px); }
.mod-row { display:flex; align-items:center; gap:0.6rem; justify-content:space-between; }

.mon-dsh-w {
    --md-fg: var(--text);
    --md-mute: var(--text-muted);
    --md-bg: var(--bg);
    --md-card: var(--bg-card, var(--card-bg));
    --md-bd: var(--border, var(--border-color));
    --md-ok: #22c55e;
    --md-err: #ef4444;
    --md-accent: var(--primary, #4a9eff);
    --md-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --md-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--md-sans);
    color: var(--md-fg);
    letter-spacing: -0.005em;
}

.mon-dsh-w h2 {
    font-family: var(--md-sans);
    letter-spacing: -0.01em;
}

/* ── Stat pill row ──────────────────────────────────────────────── */
.mon-dsh-w .md-stats {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin: 0.2rem 0 1rem;
}
.mon-dsh-w .md-pill {
    font-family: var(--md-mono); font-size: 0.75rem;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--md-bd);
    display: inline-flex; gap: 0.45rem; align-items: center; line-height: 1.1;
}
.mon-dsh-w .md-pill b { font-weight: 700; }
.mon-dsh-w .md-pill .lbl {
    color: var(--md-mute); text-transform: uppercase;
    letter-spacing: 0.18em; font-size: 0.62rem; font-weight: 500;
}
.mon-dsh-w .md-pill.ok { color: var(--md-ok); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.07); }
.mon-dsh-w .md-pill.err { color: var(--md-err); border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.07); }
.mon-dsh-w .md-pill.acc { color: var(--md-accent); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.07); }

/* ── Table ──────────────────────────────────────────────────────── */
.mon-dsh-w .md-table-wrap {
    background: var(--md-card); border: 1px solid var(--md-bd);
    border-radius: 6px; overflow-x: auto;
}
.mon-dsh-w .md-table-wrap table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.mon-dsh-w .md-table-wrap thead th {
    text-align: left; padding: 8px 10px;
    background: var(--md-card);
    border-bottom: 1px solid var(--md-bd);
    font-family: var(--md-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--md-mute);
    font-weight: 600; white-space: nowrap;
}
.mon-dsh-w .md-table-wrap tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.3;
}
.mon-dsh-w .md-table-wrap tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.mon-dsh-w .md-table-wrap tbody tr:hover { background: rgba(74,158,255,0.06); }
.mon-dsh-w .md-table-wrap tbody tr.offline-row { opacity: 0.6; }

/* ── Status dot + label ─────────────────────────────────────────── */
.mon-dsh-w .md-status {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--md-mono); font-size: 0.7rem;
}
.mon-dsh-w .md-status .dot {
    width: 7px; height: 7px; border-radius: 50%;
}
.mon-dsh-w .md-status.online .dot { background: var(--md-ok); }
.mon-dsh-w .md-status.online { color: var(--md-ok); }
.mon-dsh-w .md-status.offline .dot { background: var(--md-err); }
.mon-dsh-w .md-status.offline { color: var(--md-err); }

/* ── Type badge ─────────────────────────────────────────────────── */
.mon-dsh-w .md-type-badge {
    display: inline-block;
    font-family: var(--md-mono); font-size: 0.68rem;
    padding: 2px 7px; border-radius: 3px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--md-bd);
    color: var(--md-fg); white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.06em;
}

.mon-dsh-w .md-table-wrap td code {
    font-family: var(--md-mono); font-size: 0.75rem;
    background: rgba(255,255,255,0.04);
    padding: 2px 5px; border-radius: 3px;
}
.mon-dsh-w .md-table-wrap td a {
    color: var(--md-accent); text-decoration: none;
}
.mon-dsh-w .md-table-wrap td a:hover { text-decoration: underline; }

/* Staggered row fade-in */
@keyframes md-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.mon-dsh-w .md-table-wrap tbody tr {
    animation: md-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.mon-dsh-w .md-table-wrap tbody tr:nth-child(1) { animation-delay: 0ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(2) { animation-delay: 50ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(3) { animation-delay: 100ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(4) { animation-delay: 150ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(5) { animation-delay: 200ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(6) { animation-delay: 250ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(7) { animation-delay: 300ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(8) { animation-delay: 350ms; }
.mon-dsh-w .md-table-wrap tbody tr:nth-child(n+9) { animation: none; }

.msp-tabs { display:flex; gap:0.5rem; margin-bottom:1rem; border-bottom:1px solid var(--border); padding-bottom:0.5rem; flex-wrap:wrap; }
.msp-tabs a { padding:0.5rem 0.9rem; border-radius:6px; text-decoration:none; color:var(--text-muted); font-size:0.9rem; }
.msp-tabs a.active { background:var(--bg-subtle); color:var(--text); border:1px solid var(--border); }
.msp-stat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:0.75rem; margin-bottom:1.25rem; }
.msp-stat-card { background:var(--bg-card, #161b22); border:1px solid var(--border); border-radius:8px; padding:1rem; }
.msp-stat-value { font-size:1.8rem; font-weight:700; color:var(--text); line-height:1.1; }
.msp-stat-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:0.25rem; }
.msp-customer-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0.9rem; }
.msp-customer-card { background:var(--bg-card, #161b22); border:1px solid var(--border); border-radius:10px; padding:1rem; display:flex; flex-direction:column; gap:0.5rem; position:relative; }
.msp-customer-card h4 { margin:0; font-size:1rem; }
.msp-customer-metrics { display:flex; gap:0.75rem; font-size:0.8rem; color:var(--text-muted); flex-wrap:wrap; }
.msp-customer-metrics span b { color:var(--text); font-weight:600; }
.msp-health-pill { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.72rem; font-weight:600; }
.msp-health-good { background:rgba(63,185,80,0.15); color:#3fb950; }
.msp-health-warn { background:rgba(210,153,34,0.18); color:#d29922; }
.msp-health-bad  { background:rgba(248,81,73,0.18); color:#f85149; }
.msp-customer-actions { display:flex; gap:0.35rem; margin-top:0.25rem; }
.msp-customer-actions .btn { padding:0.3rem 0.6rem; font-size:0.75rem; }
table.msp-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.msp-table th, .msp-table td { padding:0.55rem 0.6rem; border-bottom:1px solid var(--border); text-align:left; }
.msp-table th { color:var(--text-muted); text-transform:uppercase; font-size:0.7rem; letter-spacing:0.04em; }
.msp-table tr:hover td { background:rgba(88,166,255,0.05); }
.msp-bulk-bar { background:var(--bg-subtle); border:1px solid var(--border); border-radius:8px; padding:0.75rem; margin-bottom:1rem; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }

.net-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1rem; }
.net-tab { padding:0.6rem 1.2rem; font-size:0.9rem; cursor:pointer; border:none; background:none; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px; transition:all 0.15s; }
.net-tab:hover { color:var(--text); }
.net-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.net-panel { display:none; }
.net-panel.active { display:block; }
#network-container { width:100%; height:calc(100vh - 300px); min-height:500px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); position:relative; }
.map-toolbar { display:flex; gap:0.75rem; align-items:center; flex-wrap:wrap; margin-bottom:0.75rem; }
.map-toolbar select, .map-toolbar button { font-size:0.85rem; }
.map-legend { display:flex; gap:1rem; flex-wrap:wrap; padding:0.5rem 0; font-size:0.8rem; color:var(--text-muted); }
.legend-item { display:flex; align-items:center; gap:0.3rem; }
.legend-dot { width:12px; height:12px; border-radius:2px; display:inline-block; }
.map-stats { position:absolute; bottom:0.5rem; left:0.5rem; background:rgba(0,0,0,0.7); color:#fff; padding:0.4rem 0.8rem; border-radius:var(--radius); font-size:0.75rem; z-index:5; }
.node-popup { position:absolute; z-index:10; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.75rem 1rem; box-shadow:0 4px 12px rgba(0,0,0,0.4); font-size:0.82rem; max-width:300px; pointer-events:auto; display:none; }
.node-popup .popup-title { font-weight:600; margin-bottom:0.4rem; font-size:0.9rem; }
.node-popup .popup-detail { color:var(--text-muted); line-height:1.5; white-space:pre-line; margin-bottom:0.5rem; }
.node-popup .popup-actions { display:flex; gap:0.5rem; }
.node-popup .popup-close { position:absolute; top:0.3rem; right:0.5rem; cursor:pointer; color:var(--text-muted); background:none; border:none; font-size:1rem; }
/* Make vis.js navigation buttons visible on dark backgrounds */
.vis-navigation .vis-button { filter: invert(1) brightness(1.5); }
.vis-navigation .vis-button:hover { filter: invert(1) brightness(2); }
/* Context menu */
.ctx-menu { position:absolute; z-index:20; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 16px rgba(0,0,0,0.5); min-width:160px; display:none; font-size:0.82rem; overflow:hidden; }
.ctx-menu-item { padding:0.5rem 0.8rem; cursor:pointer; display:flex; align-items:center; gap:0.5rem; color:var(--text); transition:background 0.1s; }
.ctx-menu-item:hover { background:var(--primary); color:#fff; }
.ctx-menu-sep { border-top:1px solid var(--border); margin:0.2rem 0; }
/* Node search */
.map-search { position:relative; display:inline-flex; align-items:center; }
.map-search input { font-size:0.82rem; padding:0.35rem 0.6rem; width:180px; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); }
.map-search-results { position:absolute; top:100%; left:0; right:0; max-height:200px; overflow-y:auto; background:var(--bg-card); border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); display:none; z-index:15; }
.map-search-results div { padding:0.35rem 0.6rem; cursor:pointer; font-size:0.8rem; }
.map-search-results div:hover { background:var(--primary); color:#fff; }

.ndd-w {
  --ndd-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --ndd-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --ndd-bg-primary: oklch(0.15 0 0);
  --ndd-bg-secondary: oklch(0.18 0.005 240);
  --ndd-bg-tertiary: oklch(0.22 0.008 250);
  --ndd-text-primary: oklch(0.95 0.005 240);
  --ndd-text-secondary: oklch(0.70 0.01 240);
  --ndd-border: oklch(0.30 0.01 240);
  --ndd-success: oklch(0.65 0.15 145);
  --ndd-danger: oklch(0.60 0.18 25);
  --ndd-warning: oklch(0.75 0.12 85);
  --ndd-info: oklch(0.65 0.15 240);
  --ndd-accent: oklch(0.70 0.18 280);
  --ndd-radius: 6px;
  --ndd-transition: 0.2s ease;
}
.ndd-w * { font-family: var(--ndd-font-sans); }
.ndd-w code,
.ndd-w .mono { font-family: var(--ndd-font-mono); }
.ndd-w {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ndd-back-link {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--ndd-text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color var(--ndd-transition);
}
.ndd-back-link:hover {
  color: var(--ndd-accent);
}
.ndd-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ndd-text-primary);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
}
.ndd-subtitle {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ndd-text-secondary);
}
.ndd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ndd-card {
  background: var(--ndd-bg-secondary);
  border: 1px solid var(--ndd-border);
  border-radius: var(--ndd-radius);
  padding: 1rem;
}
.ndd-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ndd-text-primary);
  margin: 0 0 1rem 0;
}
.ndd-form-group {
  margin-bottom: 0.75rem;
}
.ndd-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.ndd-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.ndd-help-text {
  margin: 0.25rem 0 0 1.6rem;
  font-size: 0.75rem;
  color: var(--ndd-text-secondary);
}
.ndd-help-text code {
  background: var(--ndd-bg-tertiary);
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
  font-family: var(--ndd-font-mono);
  font-size: 0.85em;
  color: var(--ndd-accent);
}
.ndd-form-grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.ndd-label {
  font-size: 0.85rem;
  color: var(--ndd-text-secondary);
  font-weight: 500;
}
.ndd-input,
.ndd-select {
  background: var(--ndd-bg-tertiary);
  color: var(--ndd-text-primary);
  border: 1px solid var(--ndd-border);
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: var(--ndd-font-sans);
}
.ndd-input:focus,
.ndd-select:focus {
  outline: none;
  border-color: var(--ndd-accent);
}
.ndd-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--ndd-accent);
  border: 1px solid var(--ndd-accent);
  border-radius: var(--ndd-radius);
  color: oklch(0.15 0 0);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--ndd-transition);
  cursor: pointer;
}
.ndd-btn:hover {
  filter: brightness(1.1);
}
.ndd-btn.secondary {
  background: var(--ndd-bg-tertiary);
  border-color: var(--ndd-border);
  color: var(--ndd-text-primary);
}
.ndd-btn.secondary:hover {
  background: var(--ndd-bg-primary);
}
.ndd-form-secondary {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ndd-border);
}
.ndd-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.85rem;
}
.ndd-dt {
  color: var(--ndd-text-secondary);
}
.ndd-dd {
  margin: 0;
  color: var(--ndd-text-primary);
}
.ndd-dd.error {
  color: var(--ndd-danger);
}
.ndd-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ndd-text-primary);
  margin: 1.5rem 0 0.75rem 0;
}
.ndd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.ndd-table thead {
  background: var(--ndd-bg-tertiary);
}
.ndd-table th {
  padding: 0.6rem 0.5rem;
  text-align: left;
  font-weight: 600;
  color: var(--ndd-text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ndd-table td {
  padding: 0.6rem 0.5rem;
  border-top: 1px solid var(--ndd-border);
  color: var(--ndd-text-primary);
}
.ndd-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
.ndd-mono {
  font-family: var(--ndd-font-mono);
  font-size: 0.9em;
}
.ndd-empty {
  padding: 1rem;
  text-align: center;
  color: var(--ndd-text-secondary);
  font-size: 0.85rem;
}

.net-dev-w {
  --net-dev-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --net-dev-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --net-dev-bg-primary: oklch(0.15 0 0);
  --net-dev-bg-secondary: oklch(0.18 0.005 240);
  --net-dev-bg-tertiary: oklch(0.22 0.008 250);
  --net-dev-text-primary: oklch(0.95 0.005 240);
  --net-dev-text-secondary: oklch(0.70 0.01 240);
  --net-dev-border: oklch(0.30 0.01 240);
  --net-dev-success: oklch(0.65 0.15 145);
  --net-dev-danger: oklch(0.60 0.18 25);
  --net-dev-warning: oklch(0.75 0.12 85);
  --net-dev-info: oklch(0.65 0.15 240);
  --net-dev-accent: oklch(0.70 0.18 280);
  --net-dev-radius: 6px;
  --net-dev-transition: 0.2s ease;
}
.net-dev-w * { font-family: var(--net-dev-font-sans); }
.net-dev-w code,
.net-dev-w .mono { font-family: var(--net-dev-font-mono); }
.net-dev-w {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.net-dev-header {
  margin-bottom: 1.5rem;
}
.net-dev-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--net-dev-text-primary);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
}
.net-dev-subtitle {
  font-size: 0.85rem;
  color: var(--net-dev-text-secondary);
  line-height: 1.5;
}
.net-dev-subtitle code {
  background: var(--net-dev-bg-tertiary);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.8rem;
  color: var(--net-dev-accent);
}
.net-dev-card {
  background: var(--net-dev-bg-secondary);
  border: 1px solid var(--net-dev-border);
  border-radius: var(--net-dev-radius);
  overflow: hidden;
}
.net-dev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.net-dev-table thead {
  background: var(--net-dev-bg-tertiary);
}
.net-dev-table th {
  padding: 0.75rem 0.6rem;
  text-align: left;
  font-weight: 600;
  color: var(--net-dev-text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.net-dev-table td {
  padding: 0.75rem 0.6rem;
  border-top: 1px solid var(--net-dev-border);
  color: var(--net-dev-text-primary);
}
.net-dev-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
.net-dev-mono {
  font-family: var(--net-dev-font-mono);
  font-size: 0.9em;
  color: var(--net-dev-accent);
}
.net-dev-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--net-dev-font-mono);
}
.net-dev-stat.on {
  background: rgba(110, 204, 113, 0.15);
  color: var(--net-dev-success);
  border: 1px solid rgba(110, 204, 113, 0.3);
}
.net-dev-stat.off {
  background: rgba(150, 150, 150, 0.1);
  color: var(--net-dev-text-secondary);
  border: 1px solid var(--net-dev-border);
}
.net-dev-stat.version {
  font-size: 0.7rem;
  opacity: 0.8;
}
.net-dev-btn {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--net-dev-bg-tertiary);
  border: 1px solid var(--net-dev-border);
  border-radius: 4px;
  color: var(--net-dev-text-primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all var(--net-dev-transition);
  cursor: pointer;
}
.net-dev-btn:hover {
  background: var(--net-dev-bg-primary);
  border-color: var(--net-dev-text-secondary);
}
.net-dev-empty {
  padding: 2rem;
  text-align: center;
  color: var(--net-dev-text-secondary);
  font-size: 0.9rem;
}

.nd-w {
  --nd-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --nd-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --nd-bg-primary: oklch(0.15 0 0);
  --nd-bg-secondary: oklch(0.18 0.005 240);
  --nd-bg-tertiary: oklch(0.22 0.008 250);
  --nd-text-primary: oklch(0.95 0.005 240);
  --nd-text-secondary: oklch(0.70 0.01 240);
  --nd-border: oklch(0.30 0.01 240);
  --nd-success: oklch(0.65 0.15 145);
  --nd-danger: oklch(0.60 0.18 25);
  --nd-warning: oklch(0.75 0.12 85);
  --nd-info: oklch(0.65 0.15 240);
  --nd-accent: oklch(0.70 0.18 280);
  --nd-radius: 6px;
  --nd-transition: 0.2s ease;
}
.nd-w * { font-family: var(--nd-font-sans); }
.nd-w code,
.nd-w .mono { font-family: var(--nd-font-mono); }
.nd-w {
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.nd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.nd-header-content {
  flex: 1;
}
.nd-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--nd-text-primary);
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.02em;
}
.nd-subtitle {
  color: var(--nd-text-secondary);
  font-size: 0.85rem;
  margin: 0;
}
.nd-header-links {
  display: flex;
  gap: 0.5rem;
}
.nd-link {
  color: var(--nd-text-secondary);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--nd-transition);
}
.nd-link:hover {
  color: var(--nd-accent);
  border-color: var(--nd-accent);
}
.nd-filter {
  margin-bottom: 1rem;
}
.nd-filter select {
  background: var(--nd-bg-secondary);
  color: var(--nd-text-primary);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  font-family: var(--nd-font-sans);
}
.nd-card {
  background: var(--nd-bg-secondary);
  border: 1px solid var(--nd-border);
  border-radius: var(--nd-radius);
  overflow: hidden;
}
.nd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.nd-table thead {
  background: var(--nd-bg-tertiary);
}
.nd-table th {
  padding: 0.75rem 0.6rem;
  text-align: left;
  font-weight: 600;
  color: var(--nd-text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nd-table td {
  padding: 0.75rem 0.6rem;
  border-top: 1px solid var(--nd-border);
  color: var(--nd-text-primary);
  vertical-align: top;
}
.nd-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
.nd-sev {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-family: var(--nd-font-mono);
}
.nd-sev.info {
  background: rgba(74, 158, 255, 0.15);
  color: var(--nd-info);
  border: 1px solid rgba(74, 158, 255, 0.3);
}
.nd-sev.warn {
  background: rgba(245, 166, 35, 0.15);
  color: var(--nd-warning);
  border: 1px solid rgba(245, 166, 35, 0.3);
}
.nd-sev.critical {
  background: rgba(231, 76, 60, 0.15);
  color: var(--nd-danger);
  border: 1px solid rgba(231, 76, 60, 0.3);
}
.nd-kind {
  font-family: var(--nd-font-mono);
  color: var(--nd-text-secondary);
  font-size: 0.78rem;
}
.nd-json {
  background: var(--nd-bg-primary);
  border: 1px solid var(--nd-border);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
  font-family: var(--nd-font-mono);
  font-size: 0.72rem;
  white-space: pre-wrap;
  max-width: 260px;
  max-height: 7em;
  overflow: auto;
  margin: 0;
  color: var(--nd-accent);
}
.nd-btn-dismiss {
  background: transparent;
  color: var(--nd-text-secondary);
  border: 1px solid var(--nd-border);
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  transition: all var(--nd-transition);
}
.nd-btn-dismiss:hover {
  color: var(--nd-danger);
  border-color: var(--nd-danger);
}
.nd-empty {
  padding: 2rem;
  text-align: center;
  color: var(--nd-text-secondary);
  font-style: italic;
}

.ni-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(460px,1fr)); gap:1rem; }
.ni-card-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:0.75rem; }
.ni-card-head h3 { margin:0; font-size:1rem; }
.ni-meta { font-size:0.72rem; color:var(--text-muted); }
.ni-section { margin-top:0.9rem; }
.ni-section h5 { margin:0 0 0.35rem; font-size:0.78rem; text-transform:uppercase;
                 letter-spacing:0.05em; color:var(--text-muted); }
.ni-row { display:grid; gap:0.35rem; margin-bottom:0.3rem; align-items:center; }
.ni-row.vlan   { grid-template-columns: 80px 1fr 110px 30px; }
.ni-row.ssid   { grid-template-columns: 1fr 70px 90px 70px 30px; }
.ni-row.dhcp   { grid-template-columns: 70px 1fr 110px 1fr 30px; }
.ni-row.fw     { grid-template-columns: 1fr 1fr 90px 30px; }
.ni-row input, .ni-row select {
    width:100%; padding:0.3rem 0.4rem; background:var(--bg); color:var(--text);
    border:1px solid var(--border); border-radius:4px; font-size:0.82rem;
}
.ni-row .rm-btn {
    background:transparent; color:var(--text-muted); border:1px solid var(--border);
    border-radius:4px; padding:0.15rem 0.4rem; cursor:pointer; font-size:0.8rem;
}
.ni-row .rm-btn:hover { color:var(--red); border-color:var(--red); }
.ni-add {
    background:transparent; color:var(--primary); border:1px dashed var(--border);
    border-radius:4px; padding:0.25rem 0.6rem; cursor:pointer; font-size:0.78rem;
    margin-top:0.2rem;
}
.ni-add:hover { border-color:var(--primary); }
.ni-save {
    background:var(--primary); color:#fff; border:none;
    padding:0.45rem 1rem; border-radius:4px; cursor:pointer;
    margin-top:0.8rem; font-size:0.88rem;
}
.ni-empty { color:var(--text-muted); font-size:0.82rem; font-style:italic; }
.ni-footer-grid { display:grid; grid-template-columns:1fr 2fr; gap:0.5rem; margin-top:0.8rem; }
.ni-footer-grid input, .ni-footer-grid textarea {
    background:var(--bg); color:var(--text); border:1px solid var(--border);
    border-radius:4px; padding:0.3rem 0.4rem; font-size:0.82rem;
}
.ni-footer-grid textarea { resize:vertical; min-height:3em; }
.ni-head-links { display:flex; gap:1rem; margin-bottom:1rem; font-size:0.88rem; }
.ni-head-links a { color:var(--text-muted); text-decoration:none; padding:0.4rem 0.8rem;
                   border:1px solid var(--border); border-radius:4px; }
.ni-head-links a:hover { color:var(--primary); border-color:var(--primary); }
.ni-toolbar { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center;
              padding:0.75rem; background:var(--bg-card); border:1px solid var(--border);
              border-radius:6px; margin-bottom:1rem; }
.ni-toolbar input, .ni-toolbar select {
    background:var(--bg); color:var(--text); border:1px solid var(--border);
    border-radius:4px; padding:0.35rem 0.55rem; font-size:0.85rem;
}
.ni-toolbar input[type=text] { min-width:240px; }
.ni-chip {
    cursor:pointer; user-select:none; padding:0.25rem 0.65rem;
    font-size:0.75rem; border:1px solid var(--border); border-radius:99px;
    color:var(--text-muted); background:transparent; text-decoration:none;
}
.ni-chip:hover { color:var(--text); border-color:var(--text-muted); }
.ni-chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.ni-tag-unifi   { background:rgba(91,138,245,0.12); color:#5b8af5; border:1px solid rgba(91,138,245,0.4);
                  padding:0.1rem 0.45rem; border-radius:99px; font-size:0.68rem; font-family:ui-monospace,monospace; }
.ni-tag-issues  { background:rgba(229,72,77,0.12); color:#e5484d; border:1px solid rgba(229,72,77,0.4);
                  padding:0.1rem 0.45rem; border-radius:99px; font-size:0.68rem; font-weight:600; }
.ni-unifi-card {
    margin-top:1rem; border:1px solid rgba(91,138,245,0.3); border-radius:6px;
    background:rgba(91,138,245,0.04);
}
.ni-unifi-card summary {
    cursor:pointer; padding:0.55rem 0.75rem; font-size:0.85rem; font-weight:600;
    color:#5b8af5; user-select:none;
}
.ni-unifi-card summary:hover { background:rgba(91,138,245,0.08); }
.ni-unifi-card[open] summary { border-bottom:1px solid rgba(91,138,245,0.2); }
.ni-unifi-body { padding:0.5rem 0.75rem 0.75rem; font-size:0.78rem; }
.ni-unifi-body table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.ni-unifi-body th, .ni-unifi-body td {
    text-align:left; padding:0.25rem 0.5rem; border-bottom:1px solid var(--border);
}
.ni-unifi-body th { font-size:0.68rem; text-transform:uppercase;
                    color:var(--text-muted); letter-spacing:0.04em; font-weight:600; }
.ni-unifi-meta { font-size:0.7rem; color:var(--text-muted);
                 margin-bottom:0.4rem; font-family:ui-monospace,monospace; }
.ni-refresh {
    background:transparent; color:#5b8af5; border:1px solid rgba(91,138,245,0.4);
    border-radius:4px; padding:0.2rem 0.6rem; cursor:pointer; font-size:0.72rem;
    margin-left:0.5rem;
}
.ni-refresh:hover { background:rgba(91,138,245,0.08); }

.net-map-w {
  --net-map-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --net-map-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --net-map-bg-primary: oklch(0.15 0 0);
  --net-map-bg-secondary: oklch(0.18 0.005 240);
  --net-map-bg-tertiary: oklch(0.22 0.008 250);
  --net-map-text-primary: oklch(0.95 0.005 240);
  --net-map-text-secondary: oklch(0.70 0.01 240);
  --net-map-border: oklch(0.30 0.01 240);
  --net-map-success: oklch(0.65 0.15 145);
  --net-map-danger: oklch(0.60 0.18 25);
  --net-map-warning: oklch(0.75 0.12 85);
  --net-map-info: oklch(0.65 0.15 240);
  --net-map-accent: oklch(0.70 0.18 280);
  --net-map-radius: 6px;
  --net-map-transition: 0.2s ease;
}
.net-map-w * { font-family: var(--net-map-font-sans); }
.net-map-w code,
.net-map-w .mono { font-family: var(--net-map-font-mono); }
.net-map-w {
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.net-map-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.net-map-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--net-map-text-primary);
  margin: 0;
  letter-spacing: -0.02em;
}
.net-map-btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--net-map-accent);
  border: 1px solid var(--net-map-accent);
  border-radius: var(--net-map-radius);
  color: oklch(0.15 0 0);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all var(--net-map-transition);
  cursor: pointer;
}
.net-map-btn:hover {
  filter: brightness(1.1);
}
.net-map-btn.secondary {
  background: var(--net-map-bg-secondary);
  border-color: var(--net-map-border);
  color: var(--net-map-text-primary);
}
.net-map-btn.secondary:hover {
  border-color: var(--net-map-accent);
}
.net-map-toolbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.net-map-toolbar label {
  font-size: 0.85rem;
  color: var(--net-map-text-secondary);
  font-weight: 500;
}
.net-map-toolbar select {
  background: var(--net-map-bg-secondary);
  color: var(--net-map-text-primary);
  border: 1px solid var(--net-map-border);
  border-radius: var(--net-map-radius);
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}
.net-map-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  border: 1px solid var(--net-map-border);
  color: var(--net-map-text-secondary);
  margin-left: 0.4rem;
  font-family: var(--net-map-font-mono);
}
.net-map-alert {
  margin: 0 0 0.75rem 0;
  padding: 0.6rem 0.85rem;
  background: rgba(224, 161, 58, 0.08);
  border: 1px solid rgba(224, 161, 58, 0.4);
  border-radius: var(--net-map-radius);
  font-size: 0.78rem;
  color: var(--net-map-text-secondary);
}
.net-map-alert strong {
  color: var(--net-map-warning);
}
.net-map-alert a {
  color: var(--net-map-accent);
  text-decoration: none;
}
.net-map-alert a:hover {
  text-decoration: underline;
}
.net-map-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  font-size: 0.8rem;
  color: var(--net-map-text-secondary);
}
.net-map-legend-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.net-map-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}
.net-map-container {
  width: 100%;
  height: calc(100vh - 250px);
  min-height: 500px;
  background: var(--net-map-bg-secondary);
  border: 1px solid var(--net-map-border);
  border-radius: var(--net-map-radius);
  position: relative;
}
.net-map-stats {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.4rem 0.8rem;
  border-radius: var(--net-map-radius);
  font-size: 0.75rem;
  z-index: 5;
  font-family: var(--net-map-font-mono);
}

.ph-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; gap:1rem; flex-wrap:wrap; }
.ph-head-links { display:flex; gap:1rem; font-size:0.88rem; }
.ph-head-links a { color:var(--text-muted); text-decoration:none; padding:0.4rem 0.8rem;
                   border:1px solid var(--border); border-radius:4px; }
.ph-head-links a:hover { color:var(--primary); border-color:var(--primary); }
.ph-picker {
    background:var(--bg); color:var(--text); border:1px solid var(--border);
    border-radius:4px; padding:0.4rem 0.55rem; font-size:0.88rem; min-width:280px;
}
.ph-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.ph-table th, .ph-table td { padding:0.5rem 0.65rem; border-bottom:1px solid var(--border); text-align:left; }
.ph-table th { font-size:0.72rem; text-transform:uppercase; color:var(--text-muted);
               letter-spacing:0.04em; background:var(--bg-card); position:sticky; top:0; }
.ph-mono { font-family:ui-monospace,monospace; font-size:0.78rem; }
.ph-up   { color:var(--green, #46a758); }
.ph-down { color:var(--text-muted); }
.ph-empty { padding:2rem; text-align:center; color:var(--text-muted); font-style:italic; }
.ph-port-group td { background:var(--bg-card); font-weight:600; font-size:0.82rem; }
.ph-source { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.72rem;
             padding:0.2rem 0.55rem; border-radius:99px; border:1px solid var(--border);
             color:var(--text-muted); margin-left:0.4rem; font-family:ui-monospace,monospace; }
.ph-source.unifi-cloud { color:#5b8af5; border-color:rgba(91,138,245,0.4); }
.ph-source.unifi-local { color:#46a758; border-color:rgba(70,167,88,0.4); }
.ph-source.stale       { color:#e0a13a; border-color:rgba(224,161,58,0.5); }
.ph-source.none        { color:var(--text-muted); }
.ph-section-title { display:flex; align-items:center; gap:0.5rem; margin:1.5rem 0 0.5rem;
                    font-size:0.92rem; color:var(--text); font-weight:600; }
.ph-live-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.ph-live-table th, .ph-live-table td { padding:0.4rem 0.55rem; border-bottom:1px solid var(--border); text-align:left; }
.ph-live-table th { font-size:0.7rem; text-transform:uppercase; color:var(--text-muted);
                    letter-spacing:0.04em; background:var(--bg-card); }

.not-w {
    --not-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --not-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --not-accent: var(--primary, #4a9eff);
    --not-mute: var(--text-muted);
    --not-sev-critical: #ef4444;
    --not-sev-warning: #f59e0b;
    --not-sev-info: #38bdf8;
    font-family: var(--not-sans);
    letter-spacing: -0.005em;
    animation: not-fade-in 0.4s ease-out;
}

@keyframes not-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.not-w * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────── */
.not-w .not-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.not-w .not-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.not-w .not-hint {
    font-family: var(--not-mono); font-size: 0.66rem;
    color: var(--not-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1.5rem;
}

/* ── Section ────────────────────────────────────────────────────── */
.not-w .not-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
}
.not-w .not-section h3 {
    font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem;
}
.not-w .not-section p {
    font-size: 0.82rem; color: var(--not-mute); margin-bottom: 1rem; line-height: 1.4;
}

/* ── Notification cards ──────────────────────────────────────────── */
.not-w .not-list {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.not-w .not-card {
    border: 1px solid var(--border); border-radius: 8px;
    padding: 0.75rem 1rem; background: var(--bg-input);
    transition: border-color 0.15s;
}
.not-w .not-card:hover {
    border-color: rgba(74,158,255,0.3);
}

.not-w .not-card-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}

.not-w .not-card-main {
    flex: 1; min-width: 240px;
}

.not-w .not-label {
    display: flex; align-items: center; gap: 0.5rem;
    cursor: pointer;
}
.not-w .not-label input[type="checkbox"] {
    flex-shrink: 0;
}
.not-w .not-title {
    font-weight: 600; font-size: 0.9rem;
}
.not-w .not-sev {
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
    padding: 2px 6px; border-radius: 4px; font-family: var(--not-mono);
    letter-spacing: 0.08em;
}
.not-w .not-sev.critical {
    background: rgba(239,68,68,0.15); color: var(--not-sev-critical);
}
.not-w .not-sev.warning {
    background: rgba(245,158,11,0.15); color: var(--not-sev-warning);
}
.not-w .not-sev.info {
    background: rgba(56,189,248,0.15); color: var(--not-sev-info);
}

.not-w .not-desc {
    font-size: 0.78rem; color: var(--not-mute);
    margin-top: 0.25rem; margin-left: 1.5rem;
}
.not-w .not-default {
    color: var(--not-accent); font-style: italic;
}

/* ── Channel toggles ────────────────────────────────────────────── */
.not-w .not-channels {
    display: flex; gap: 0.75rem; font-size: 0.8rem;
    color: var(--not-mute); align-items: center;
}
.not-w .not-chan {
    display: flex; align-items: center; gap: 0.25rem;
    cursor: pointer;
}
.not-w .not-chan.disabled {
    opacity: 0.5; cursor: not-allowed;
}

/* ── Empty state ────────────────────────────────────────────────── */
.not-w .not-empty {
    padding: 2rem; text-align: center;
    color: var(--not-mute); font-size: 0.85rem;
}
.not-w .not-empty h4 {
    margin: 0 0 0.5rem; font-size: 0.9rem;
}

.ng-w { font-family: var(--font-sans); }
.ng-w h3 { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: 1.5rem 0 0.6rem; }

/* Stat strip */
.ng-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.ng-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); padding: 0.85rem 1rem; }
.ng-stat-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.ng-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); margin-top: 0.25rem; line-height: 1.1; }
.ng-stat-value.warn { color: var(--warning, #f59e0b); }
.ng-stat-value.bad  { color: var(--danger, #ef4444); }
.ng-stat-value.good { color: var(--success, #22c55e); }

/* Tables */
.ng-w table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); overflow: hidden; }
.ng-w thead th { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 0.7rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); }
.ng-w tbody td { padding: 0.65rem 0.85rem; vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ng-w tbody tr:last-child td { border-bottom: none; }
.ng-w a { color: var(--accent, #4a9eff); text-decoration: none; }
.ng-w a:hover { text-decoration: underline; }

/* Status dots */
.ng-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; }
.ng-dot.green { background: var(--success, #22c55e); }
.ng-dot.amber { background: var(--warning, #f59e0b); }
.ng-dot.red   { background: var(--danger,  #ef4444); box-shadow: 0 0 0 0 rgba(239,68,68,0.55); animation: ng-pulse 2.4s ease-out infinite; }
@keyframes ng-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.55); } 70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

/* Severity badge */
.ng-sev { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; display: inline-block; }
.ng-sev.high   { background: rgba(239,68,68,0.10);  color: var(--danger,  #ef4444); border: 1px solid rgba(239,68,68,0.35); }
.ng-sev.medium { background: rgba(245,158,11,0.10); color: var(--warning, #f59e0b); border: 1px solid rgba(245,158,11,0.35); }
.ng-sev.low    { background: rgba(56,189,248,0.10); color: #38bdf8;                  border: 1px solid rgba(56,189,248,0.35); }
.ng-sev.info   { background: rgba(255,255,255,0.04);color: var(--text-muted);        border: 1px solid var(--border); }

.ng-mute { color: var(--text-muted); font-size: 0.85rem; }
.ng-mono { font-family: var(--font-mono); font-size: 0.78rem; }
.ng-trunc { max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.onboard-stats { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.onboard-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.5rem; min-width:140px; text-align:center; }
.onboard-stat .stat-value { font-size:1.8rem; font-weight:700; color:var(--primary); }
.onboard-stat .stat-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; margin-top:0.25rem; }
.onboard-stat.stat-green .stat-value { color:var(--green); }
.onboard-stat.stat-yellow .stat-value { color:#f5a623; }
.onboard-stat.stat-red .stat-value { color:var(--red); }

.onboard-section { margin-bottom:2rem; }
.onboard-section h3 { margin-bottom:0.75rem; display:flex; align-items:center; gap:0.5rem; }
.onboard-section h3 .badge { font-size:0.7rem; }

.onboard-table { width:100%; border-collapse:collapse; }
.onboard-table th, .onboard-table td { padding:0.5rem 0.75rem; text-align:left; border-bottom:1px solid var(--border); font-size:0.85rem; }
.onboard-table th { color:var(--text-muted); font-size:0.75rem; text-transform:uppercase; font-weight:600; }
.onboard-table tr:hover { background:var(--bg-card); }

.status-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:10px; font-size:0.7rem; font-weight:600; }
.status-online { background:rgba(70,167,88,0.15); color:var(--green); }
.status-offline { background:rgba(229,72,77,0.12); color:var(--red); }
.status-pending { background:rgba(245,166,35,0.15); color:#f5a623; }
.status-running { background:rgba(91,138,245,0.12); color:var(--primary); }
.status-completed { background:rgba(70,167,88,0.15); color:var(--green); }
.status-failed { background:rgba(229,72,77,0.12); color:var(--red); }

.deploy-log-output { font-family:monospace; font-size:0.75rem; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); }
.deploy-log-output:hover { white-space:normal; overflow:visible; }

.onboard-empty { color:var(--text-muted); font-style:italic; padding:1rem 0; }

.onb-w {
  --onb-bg: var(--bg-card);
  --onb-bg-subtle: var(--bg-subtle);
  --onb-border: var(--border);
  --onb-text: var(--text);
  --onb-text-muted: var(--text-muted);
  --onb-green: #3fb950;
  --onb-orange: #d29922;
  --onb-primary: var(--primary);
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  animation: onbFadeIn 0.4s ease-out;
}
@keyframes onbFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.onb-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.onb-hdr h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.onb-hint {
  color: var(--onb-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}
.onb-card {
  background: var(--onb-bg);
  border: 1px solid var(--onb-border);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.onb-card h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.onb-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--onb-bg);
  border: 1px solid var(--onb-border);
  border-radius: 10px;
  overflow: hidden;
}
.onb-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--onb-text-muted);
  background: var(--onb-bg-subtle);
  font-weight: 600;
}
.onb-table td {
  padding: 0.6rem 0.8rem;
  border-top: 1px solid var(--onb-border);
  font-size: 0.85rem;
}
.onb-table tr:hover td {
  background: var(--onb-bg-subtle);
}
.onb-table strong {
  font-weight: 600;
}
.onb-badge {
  display: inline-block;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  background: var(--onb-bg-subtle);
  border: 1px solid var(--onb-border);
  color: var(--onb-text);
}
.onb-badge.active {
  background: rgba(63, 185, 80, 0.15);
  border-color: rgba(63, 185, 80, 0.3);
  color: var(--onb-green);
}
.onb-badge.inactive {
  background: rgba(110, 118, 129, 0.15);
  border-color: rgba(110, 118, 129, 0.3);
  color: var(--onb-text-muted);
}
.onb-progress-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.onb-progress-track {
  flex: 1;
  background: var(--onb-bg-subtle);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
}
.onb-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.onb-progress-fill.high { background: var(--onb-green); }
.onb-progress-fill.medium { background: var(--onb-primary); }
.onb-progress-fill.low { background: #f5a623; }
.onb-progress-text {
  font-size: 0.8rem;
  min-width: 35px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.onb-status {
  font-size: 0.82rem;
}
.onb-status.completed { color: var(--onb-green); }
.onb-status.in-progress { color: var(--onb-primary); }
.onb-status.stalled { color: #f5a623; }
.onb-empty {
  text-align: center;
  padding: 2rem;
  color: var(--onb-text-muted);
  font-style: italic;
  font-size: 0.9rem;
}

.oca-wrap   { max-width:1280px; margin:0 auto; padding:1.25rem 1rem; color:var(--text); }
.oca-section { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
               margin-bottom:1rem; overflow:hidden; }
.oca-section-head { padding:.55rem .9rem; border-bottom:1px solid var(--border);
                    display:flex; justify-content:space-between; align-items:center; }
.oca-section-head h3 { margin:0; font-size:.95rem; font-weight:600; color:var(--text); }
.oca-table  { width:100%; border-collapse:collapse; font-size:.85rem; }
.oca-table th { text-align:left; padding:.45rem .9rem; border-bottom:1px solid var(--border);
                font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
                background:var(--bg-input, var(--bg)); }
.oca-table td { padding:.5rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
.oca-mono   { font-family:var(--font-mono, ui-monospace, monospace); }
.oca-dim    { color:var(--text-muted); font-size:.75rem; }
.oca-empty  { border:1px dashed var(--border); border-radius:8px; padding:1.6rem;
              text-align:center; color:var(--text-muted); background:var(--bg-card); }

.org-dupe-stack { display:grid; gap:1rem; }
  .org-dupe-score { font-family:var(--font-mono,monospace); font-weight:700; }
  .org-dupe-id { color:var(--text-muted); font-size:0.78rem; margin-top:0.15rem; }
  .org-dupe-actions { display:flex; gap:0.4rem; justify-content:flex-end; flex-wrap:wrap; }
  .org-dupe-ai { margin-top:0.35rem; color:var(--text-muted); font-size:0.82rem; max-width:44rem; }
  .org-dupe-empty { padding:1.25rem; color:var(--text-muted); text-align:center; }
  .org-dupe-convert { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; align-items:end; }
  .org-dupe-convert label { display:grid; gap:.2rem; font-size:.75rem; color:var(--text-muted); }
  .org-dupe-convert select { width:100%; padding:.4rem .5rem; border:1px solid var(--border); border-radius:6px; background:var(--bg-input,var(--bg)); color:var(--text); }
  @media (max-width:900px) { .org-dupe-convert { grid-template-columns:1fr; } }
  .org-dupe-dismissed-summary { cursor:pointer; padding:.5rem .75rem; font-size:.85rem; color:var(--text-muted); }
  .org-dupe-dismissed-summary:hover { color:var(--text); }
  .org-dupe-dismissed-meta { color:var(--text-muted); font-size:.75rem; }

.eal-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:.6rem; margin-bottom:1rem; }
.eal-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.7rem .9rem; }
.eal-stat .v { font-size:1.4rem; font-weight:700; }
.eal-stat .l { font-size:.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; }
.eal-filters { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:.6rem .8rem; margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.eal-filters select, .eal-filters input { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:.35rem .55rem; border-radius:6px; font-size:.85rem; }
.eal-table { width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.eal-table th, .eal-table td { padding:.5rem .65rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:top; }
.eal-table th { background:var(--bg); color:var(--text-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
.eal-table tr:last-child td { border-bottom:none; }
.eal-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.68rem; font-weight:600; }
.eal-pill.sent { background:#16a34a22; color:#16a34a; }
.eal-pill.failed { background:#ef444422; color:#ef4444; }
.eal-pill.src { background:#3b82f622; color:#3b82f6; }
.eal-detail { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:.5rem; margin-top:.4rem; font-family:ui-monospace, monospace; font-size:.72rem; max-height:160px; overflow:auto; }
.eal-bulk-bar { display:none; background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
  padding:.5rem .8rem; margin-bottom:.6rem; align-items:center; gap:.6rem; flex-wrap:wrap; }
.eal-bulk-bar.active { display:flex; }
.bulk-cb-wrap { width:28px; text-align:center; }

.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; }
  .toggle-switch input { opacity:0; width:0; height:0; }
  .toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
                   background:#555; border-radius:22px; transition:0.2s; }
  .toggle-slider:before { content:""; position:absolute; height:16px; width:16px;
                          left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; }
  .toggle-switch input:checked + .toggle-slider { background:var(--primary-color, #3b82f6); }
  .toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); }

.ola-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.ola-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.ola-table { width:100%; border-collapse:collapse; }
.ola-table th, .ola-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.ola-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.ola-table tr:last-child td { border-bottom:none; }
.ola-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.ola-enabled  { background:#16a34a22; color:#16a34a; }
.ola-disabled { background:#ef444422; color:#ef4444; }

.olr-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.olr-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); display:flex; align-items:center; justify-content:space-between; }
.olr-table { width:100%; border-collapse:collapse; }
.olr-table th, .olr-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.olr-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.olr-table tr:last-child td { border-bottom:none; }
.olr-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.olr-ok   { background:#16a34a22; color:#16a34a; }
.olr-warn { background:#f59e0b22; color:#f59e0b; }
.olr-bad  { background:#ef444422; color:#ef4444; }
.olr-num  { text-align:right; }
.olr-form { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.1rem; }
.olr-form-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:.6rem; }
.olr-form-group label { font-size:.72rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:.2rem; }
.olr-form-group input, .olr-form-group select, .olr-form-group textarea {
  width:100%; padding:.35rem .5rem; border:1px solid var(--border); border-radius:5px;
  background:var(--bg); color:var(--text); font-size:.85rem; box-sizing:border-box;
}
details.olr-edit-details summary { cursor:pointer; font-size:.75rem; color:var(--text-muted); list-style:none; }
details.olr-edit-details summary::-webkit-details-marker { display:none; }

.olc-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:1.25rem; }
.olc-card-header { padding:.5rem .85rem; border-bottom:1px solid var(--border); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); background:var(--bg); }
.olc-table { width:100%; border-collapse:collapse; }
.olc-table th, .olc-table td { padding:.45rem .75rem; text-align:left; border-bottom:1px solid var(--border); font-size:.82rem; vertical-align:middle; }
.olc-table th { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.olc-table tr:last-child td { border-bottom:none; }
.olc-table tbody tr:hover { background:var(--bg); cursor:pointer; }
.olc-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.7rem; font-weight:700; }
.olc-ok   { background:#16a34a22; color:#16a34a; }
.olc-warn { background:#f59e0b22; color:#f59e0b; }
.olc-bad  { background:#ef444422; color:#ef4444; }
.olc-num  { text-align:right; }

.o365-w {
    --o365-font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --o365-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --o365-bg-card: #0d1117;
    --o365-bg-elevated: #161b22;
    --o365-bg-input: #010409;
    --o365-border: #30363d;
    --o365-text: #c9d1d9;
    --o365-text-muted: #8b949e;
    --o365-text-dim: #6e7681;
    --o365-primary: #58a6ff;
    --o365-primary-bg: rgba(88, 166, 255, 0.15);
    --o365-success: #3fb950;
    --o365-success-bg: rgba(63, 185, 80, 0.15);
    --o365-warn: #d29922;
    --o365-warn-bg: rgba(210, 153, 34, 0.15);
    --o365-danger: #f85149;
    --o365-danger-bg: rgba(248, 81, 73, 0.15);
    --o365-radius-sm: 6px;
    --o365-radius-md: 12px;
    --o365-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --o365-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-family: var(--o365-font-sans);
    color: var(--o365-text);
    animation: o365-fade-in 0.4s ease-out;
}

@keyframes o365-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.o365-w * {
    box-sizing: border-box;
}

.o365-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.o365-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--o365-text);
}

.o365-hint {
    font-size: 0.9rem;
    color: var(--o365-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.o365-card {
    background: var(--o365-bg-card);
    border: 1px solid var(--o365-border);
    border-radius: var(--o365-radius-md);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--o365-shadow-sm);
    transition: border-color 0.2s, box-shadow 0.2s;
    animation: o365-fade-in 0.5s ease-out backwards;
}

.o365-card:hover {
    border-color: var(--o365-text-dim);
    box-shadow: var(--o365-shadow-md);
}

.o365-card:nth-child(2) { animation-delay: 0.1s; }
.o365-card:nth-child(3) { animation-delay: 0.2s; }

.o365-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.o365-stat {
    text-align: center;
    padding: 1rem;
    background: var(--o365-bg-elevated);
    border: 1px solid var(--o365-border);
    border-radius: var(--o365-radius-sm);
}

.o365-stat-value {
    font-family: var(--o365-font-mono);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.35rem;
}

.o365-stat-value.connected { color: var(--o365-success); }
.o365-stat-value.paused { color: var(--o365-danger); }
.o365-stat-value.users { color: var(--o365-primary); }
.o365-stat-value.groups { color: #b87aff; }
.o365-stat-value.sync { font-size: 1.1rem; }

.o365-stat-label {
    font-family: var(--o365-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--o365-text-dim);
}

.o365-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 0;
    color: var(--o365-text);
    user-select: none;
}

.o365-details summary:hover {
    color: var(--o365-primary);
}

.o365-details-content {
    margin-top: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.o365-details-content h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.35rem;
    color: var(--o365-text);
}

.o365-details-content a {
    color: var(--o365-primary);
    text-decoration: none;
}

.o365-details-content a:hover {
    text-decoration: underline;
}

.o365-details-content code {
    font-family: var(--o365-font-mono);
    font-size: 0.85rem;
    background: var(--o365-bg-elevated);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.o365-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--o365-text-muted);
    margin-bottom: 0.35rem;
}

.o365-form input[type="text"],
.o365-form input[type="password"],
.o365-form select {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--o365-bg-input);
    border: 1px solid var(--o365-border);
    border-radius: var(--o365-radius-sm);
    color: var(--o365-text);
    font-family: var(--o365-font-mono);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.o365-form input:focus,
.o365-form select:focus {
    outline: none;
    border-color: var(--o365-primary);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.o365-form h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--o365-text);
}

.o365-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.o365-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--o365-text);
    cursor: pointer;
}

.o365-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.o365-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--o365-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--o365-radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.o365-btn-primary {
    background: var(--o365-primary);
    color: #000;
}

.o365-btn-primary:hover {
    background: #4c9aed;
    transform: translateY(-1px);
    box-shadow: var(--o365-shadow-md);
}

.o365-btn-default {
    background: var(--o365-bg-elevated);
    border: 1px solid var(--o365-border);
    color: var(--o365-text);
}

.o365-btn-default:hover {
    background: var(--o365-border);
}

.o365-btn-danger {
    background: var(--o365-danger-bg);
    border: 1px solid var(--o365-danger);
    color: var(--o365-danger);
}

.o365-btn-danger:hover {
    background: var(--o365-danger);
    color: #fff;
}

.o365-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.o365-table thead {
    border-bottom: 1px solid var(--o365-border);
}

.o365-table th {
    text-align: left;
    padding: 0.75rem;
    font-weight: 600;
    color: var(--o365-text-muted);
    font-size: 0.8rem;
}

.o365-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--o365-border);
}

.o365-table tr:last-child td {
    border-bottom: none;
}

.o365-table td[style*="text-align:right"] {
    font-family: var(--o365-font-mono);
}

.o365-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.o365-badge-success {
    background: var(--o365-success-bg);
    color: var(--o365-success);
}

.o365-badge-unknown {
    background: rgba(110, 118, 129, 0.15);
    color: var(--o365-text-dim);
}

.o365-badge-security {
    background: var(--o365-danger-bg);
    color: var(--o365-danger);
}

.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; }
  .toggle-switch input { opacity:0; width:0; height:0; }
  .toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
                   background:#555; border-radius:22px; transition:0.2s; }
  .toggle-slider:before { content:""; position:absolute; height:16px; width:16px;
                          left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; }
  .toggle-switch input:checked + .toggle-slider { background:var(--primary-color, #3b82f6); }
  .toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); }

/* Bundle R — kebab action menu replaces Install / Edit duplicates. */
  .ow-actmenu { position:relative; display:inline-block; }
  .ow-actmenu > summary {
    list-style:none; cursor:pointer;
    width:28px; height:28px; line-height:1;
    border:1px solid var(--border,#2d3140); border-radius:6px;
    background:var(--bg-card,#1a1d27); color:var(--text,#d8dbe5);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.1rem; font-weight:700; user-select:none;
  }
  .ow-actmenu > summary::-webkit-details-marker,
  .ow-actmenu > summary::marker { display:none; }
  .ow-actmenu > summary:hover { background:var(--bg-input,#0f1117); border-color:var(--accent,#4a9eff); }
  .ow-actmenu[open] > summary { border-color:var(--accent,#4a9eff); }
  .ow-actmenu .ow-actmenu-pop {
    position:absolute; right:0; top:calc(100% + 4px); z-index:40;
    min-width:180px;
    background:var(--bg-card,#1a1d27); border:1px solid var(--border,#2d3140);
    border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,0.35);
    padding:0.3rem; display:flex; flex-direction:column; gap:1px;
  }
  .ow-actmenu .ow-actmenu-pop a,
  .ow-actmenu .ow-actmenu-pop button {
    display:flex; align-items:center; gap:0.5rem;
    padding:0.45rem 0.7rem; font-size:0.82rem;
    border:0; background:transparent; color:var(--text,#d8dbe5);
    text-decoration:none; border-radius:5px; cursor:pointer; text-align:left;
    width:100%;
  }
  .ow-actmenu .ow-actmenu-pop a:hover,
  .ow-actmenu .ow-actmenu-pop button:hover {
    background:var(--bg-input,#0f1117);
  }
  .ow-actmenu .ow-actmenu-pop hr {
    border:0; border-top:1px solid var(--border,#2d3140); margin:0.25rem 0;
  }
  .ow-actmenu .ow-actmenu-pop .danger { color:#ef4444; }
  .ow-actmenu .ow-actmenu-pop .danger:hover { background:rgba(239,68,68,0.1); }
  /* Row entrance animation — staggered fade-in for customer rows/cards */
  @keyframes orgRowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  #orgs-table tbody tr, .org-card { animation: orgRowIn 0.35s ease-out both; }
  #orgs-table tbody tr:nth-child(1), .org-card:nth-child(1) { animation-delay: 0.00s; }
  #orgs-table tbody tr:nth-child(2), .org-card:nth-child(2) { animation-delay: 0.03s; }
  #orgs-table tbody tr:nth-child(3), .org-card:nth-child(3) { animation-delay: 0.06s; }
  #orgs-table tbody tr:nth-child(4), .org-card:nth-child(4) { animation-delay: 0.09s; }
  #orgs-table tbody tr:nth-child(5), .org-card:nth-child(5) { animation-delay: 0.12s; }
  #orgs-table tbody tr:nth-child(6), .org-card:nth-child(6) { animation-delay: 0.15s; }
  #orgs-table tbody tr:nth-child(7), .org-card:nth-child(7) { animation-delay: 0.18s; }
  #orgs-table tbody tr:nth-child(8), .org-card:nth-child(8) { animation-delay: 0.21s; }
  #orgs-table tbody tr:nth-child(n+9), .org-card:nth-child(n+9) { animation-delay: 0.24s; }

  /* Drag-handles on column headers */
  #orgs-table thead th { position: relative; user-select: none; }
  #orgs-table thead th.draggable { cursor: grab; }
  #orgs-table thead th.dragging { opacity: 0.4; }
  #orgs-table thead th.sortable-ghost { background: rgba(88,166,255,0.15); }
  #orgs-table thead th .col-grip { display:inline-block; opacity:0.3; margin-right:4px; font-size:0.7em; cursor:grab; }
  #orgs-table thead th .col-grip:hover { opacity:0.7; }

  /* Card grid view */
  .org-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; }
  .org-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem; transition: border-color 0.15s, transform 0.15s; cursor: pointer; }
  .org-card:hover { border-color: var(--primary); transform: translateY(-1px); }
  .org-card-name { font-weight: 700; font-size: 1rem; margin-bottom: 0.15rem; }
.org-card-subtitle { font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.5rem; }
  .org-card-tags { margin-bottom: 0.5rem; min-height: 18px; }
  .org-card-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; font-size: 0.8rem; margin-top: 0.5rem; }
  .org-card-stat-label { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .org-card-stat-value { font-weight: 600; }
  .org-card-actions { display: flex; gap: 0.3rem; margin-top: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }

  /* Column visibility toolbar */
  .col-toolbar { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
  .col-toolbar .view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
  .col-toolbar .view-toggle button { background: var(--bg-card); border: none; color: var(--text); padding: 0.3rem 0.7rem; cursor: pointer; font-size: 0.8rem; }
  .col-toolbar .view-toggle button.active { background: var(--primary); color: #fff; }
  .col-toolbar details summary { cursor: pointer; padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.8rem; background: var(--bg-card); list-style: none; }
  .col-toolbar details summary::-webkit-details-marker { display: none; }
  .col-toolbar details[open] summary { background: var(--primary); color: #fff; border-color: var(--primary); }
  .col-toolbar .col-menu { position: absolute; margin-top: 0.3rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem 0.75rem; box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 10; min-width: 180px; }
  .col-toolbar .col-menu label { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0; font-size: 0.8rem; cursor: pointer; }
  .col-toolbar .reset-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.75rem; cursor: pointer; }
  .col-toolbar .reset-btn:hover { color: var(--text); }

/* Bundle I (6.76.23): page-local --ow-* now alias canonical tokens. */
.orgs-w {
    --ow-mono: var(--font-mono);
    --ow-sans: var(--font-sans);
    --ow-on: var(--success);
    --ow-off: var(--danger);
    --ow-warn: var(--warning);
    --ow-accent: var(--accent);
    --ow-mute: var(--text-muted);
    font-family: var(--ow-sans);
    letter-spacing: -0.005em;
}

/* ── Compact mono header bar ────────────────────────────────── */
.orgs-w .ow-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.orgs-w .ow-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.orgs-w .ow-add {
    color: var(--ow-accent); text-decoration: none;
    font-family: var(--ow-mono); font-size: 1.05rem; font-weight: 700;
    line-height: 1; padding: 0 0.3rem; border-radius: 3px;
    border: 1px solid rgba(74,158,255,0.4); background: rgba(74,158,255,0.07);
    transition: background 0.12s, color 0.12s;
}
.orgs-w .ow-add:hover { background: var(--ow-accent); color: #fff; }
.orgs-w .ow-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.orgs-w .ow-stat-pills { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.orgs-w .ow-pill {
    font-family: var(--ow-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.orgs-w .ow-pill b { font-weight: 700; }
.orgs-w .ow-pill .lbl { color: var(--ow-mute); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.62rem; }
.orgs-w .ow-pill.on  { color: var(--ow-on);  border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.07); }
.orgs-w .ow-pill.acc { color: var(--ow-accent); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.07); }

/* ── Mono section labels ────────────────────────────────────── */
.orgs-w .ow-label {
    font-family: var(--ow-mono); font-size: 0.66rem;
    color: var(--ow-mute); text-transform: uppercase; letter-spacing: 0.16em;
    font-weight: 600;
}

/* ── Filter chip bar (tags) ─────────────────────────────────── */
.orgs-w .ow-chips {
    display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
    margin: 0.3rem 0 0.9rem;
}
.orgs-w .ow-chip {
    font-family: var(--ow-mono); font-size: 0.68rem;
    padding: 3px 9px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-card);
    color: var(--ow-mute); text-decoration: none;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.orgs-w .ow-chip:hover { color: var(--text); }
.orgs-w .ow-chip.active {
    color: var(--ow-accent);
    border-color: rgba(74,158,255,0.4);
    background: rgba(74,158,255,0.10);
}

/* ── Toolbar (view toggle + columns + reset + deleted toggle) ─ */
.orgs-w .col-toolbar { gap: 0.4rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.7rem; }
.orgs-w .col-toolbar .view-toggle button,
.orgs-w .col-toolbar #col-picker-btn,
.orgs-w .col-toolbar .reset-btn {
    font-family: var(--ow-mono); font-size: 0.68rem !important;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0.35rem 0.75rem !important;
}
.orgs-w .col-toolbar .view-toggle button.active { background: var(--ow-accent); }
.orgs-w .col-toolbar .col-menu label { font-family: var(--ow-sans); }
.orgs-w .col-toolbar .ow-tally {
    margin-left: auto; font-family: var(--ow-mono); font-size: 0.68rem;
    color: var(--ow-mute); text-transform: uppercase; letter-spacing: 0.12em;
}
.orgs-w .col-toolbar .ow-tally b { color: var(--text); font-weight: 700; }

/* ── Table thead: mono uppercase, accent stripe on rows ─────── */
.orgs-w #orgs-table thead th {
    font-family: var(--ow-mono);
    font-size: 0.66rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ow-mute);
    font-weight: 600;
}
.orgs-w #orgs-table tbody td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
.orgs-w #orgs-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.1s; }
.orgs-w #orgs-table tbody tr:hover { background: rgba(74,158,255,0.06); }
.orgs-w #orgs-table tbody tr[data-healthy="1"] { box-shadow: inset 2px 0 0 0 var(--ow-on); }

/* Numeric / mono cells */
.orgs-w #orgs-table td[data-col="machines"],
.orgs-w #orgs-table td[data-col="users"],
.orgs-w #orgs-table td[data-col="tickets"],
.orgs-w #orgs-table td[data-col="invoices"],
.orgs-w #orgs-table td[data-col="total_invoices"],
.orgs-w #orgs-table td[data-col="ytd_billed"],
.orgs-w #orgs-table td[data-col="last_invoice"],
.orgs-w #orgs-table td[data-col="balance"] {
    font-family: var(--ow-mono); font-size: 0.78rem;
}
.orgs-w #orgs-table td[data-col="name"] code {
    font-family: var(--ow-mono); color: var(--ow-mute);
}

/* Pulsing green dot for healthy customers */
.orgs-w .ow-dot {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: 0.4rem; vertical-align: middle;
    background: var(--ow-on); box-shadow: 0 0 5px rgba(34,197,94,0.7);
    animation: ow-pulse 2.4s ease-out infinite;
}
@keyframes ow-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* ── Card view: same typographic system ─────────────────────── */
.orgs-w .org-card { transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; position: relative; }
.orgs-w .org-card[data-healthy="1"] { box-shadow: inset 3px 0 0 0 var(--ow-on); }
.orgs-w .org-card-name { font-family: var(--ow-sans); font-weight: 700; }
.orgs-w .org-card-subtitle { font-family: var(--ow-mono); }
.orgs-w .org-card-stat-label {
    font-family: var(--ow-mono); font-size: 0.62rem;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--ow-mute);
}
.orgs-w .org-card-stat-value { font-family: var(--ow-mono); font-weight: 700; font-size: 0.85rem; }

/* Tag pills (table + cards) — mono compact */
.orgs-w .ow-tagchip {
    display: inline-block; font-family: var(--ow-mono);
    font-size: 0.62rem; letter-spacing: 0.06em;
    padding: 1px 7px; border-radius: 999px;
    background: var(--accent-soft); color: var(--ow-accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    margin-right: 3px; margin-bottom: 2px;
}

/* Bundle I utility classes for inline-style replacement */
.orgs-w .ow-borderless { border:none; }
.orgs-w .ow-col-picker-wrap { position:relative; }
.orgs-w .ow-col-btn { background:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); cursor:pointer; }
.orgs-w .ow-col-menu-hidden { display:none; }
.orgs-w .ow-deleted-toggle--on { background:var(--danger); color:#fff; border-color:var(--danger); }
.orgs-w .ow-row { cursor:pointer; }
.orgs-w .ow-sort-link { text-decoration:none; color:inherit; display:inline-flex; align-items:center; gap:3px; }
.orgs-w .ow-sort-arrow { font-size:0.7em; color:var(--accent); }
.orgs-w .ow-tree-spacer { display:inline-block; width:1.5rem; }
.orgs-w .ow-tree-glyph { color:var(--text-muted); margin-right:0.25rem; }
.orgs-w .ow-tree-glyph-card { color:var(--text-muted); }
.orgs-w .ow-sub-badge { background:var(--accent); color:#fff; font-size:0.65rem; margin-left:0.4rem; }
.orgs-w .ow-slug-line { font-size:0.7rem; color:var(--text-muted); }
.orgs-w .ow-tickets-link { color:var(--warning); font-weight:var(--weight-semibold); }
.orgs-w .ow-mute { color:var(--text-muted); }
.orgs-w .ow-balance-bad { color:var(--danger); font-weight:var(--weight-semibold); }
.orgs-w .ow-deleted-tag { font-size:0.7rem; color:var(--danger); font-weight:var(--weight-semibold); margin-right:0.4rem; font-family:var(--ow-mono); letter-spacing:0.16em; }
.orgs-w .ow-restore-form { display:inline; }
.orgs-w .ow-restore-btn { background:var(--success); color:#fff; border-color:transparent; }
.orgs-w .ow-cards-hidden { display:none; }
.orgs-w .ow-card-title-link { color:inherit; text-decoration:none; }
.orgs-w .ow-card-tickets-num--bad { color:var(--warning); }
.orgs-w .ow-card-tickets-num--mute { color:var(--text-muted); }
.orgs-w .ow-card-bal-num--bad { color:var(--danger); }
.orgs-w .ow-card-bal-num--mute { color:var(--text-muted); }
.orgs-w .ow-card-deleted-tag { font-size:0.7rem; color:var(--danger); font-weight:var(--weight-semibold); align-self:center; margin-right:0.4rem; font-family:var(--ow-mono); letter-spacing:0.16em; }

.osh-wrap   { max-width:1280px; margin:0 auto; padding:1.25rem 1rem; color:var(--text); }
.osh-section { background:var(--bg-card); border:1px solid var(--border); border-radius:8px;
               margin-bottom:1rem; overflow:hidden; }
.osh-section-head { padding:.55rem .9rem; border-bottom:1px solid var(--border);
                    display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.osh-section-head h3 { margin:0; font-size:.95rem; font-weight:600; }
.osh-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.osh-table th { text-align:left; padding:.45rem .9rem; border-bottom:1px solid var(--border);
                font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em;
                background:var(--bg-input, var(--bg)); }
.osh-table td { padding:.5rem .9rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.osh-table tr:hover { background:var(--bg-input, rgba(255,255,255,0.02)); }
.osh-pill { display:inline-block; padding:.12rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; }
.osh-pill.ok      { background:rgba(46,204,113,.15); color:#2ecc71; }
.osh-pill.fail    { background:rgba(231,76,60,.18);  color:#e74c3c; }
.osh-pill.run     { background:rgba(245,158,11,.18); color:#f59e0b; }
.osh-pill.queued  { background:rgba(156,163,175,.18); color:#9ca3af; }
.osh-pill.skip    { background:rgba(99,102,241,.18); color:#818cf8; }
.osh-action.check { color:#4a9eff; font-weight:500; }
.osh-action.apply { color:#16a34a; font-weight:500; }
.osh-action.reboot{ color:#e74c3c; font-weight:500; }
.osh-dim    { color:var(--text-muted); font-size:.78rem; }
.osh-empty  { border:1px dashed var(--border); border-radius:8px; padding:1.6rem;
              text-align:center; color:var(--text-muted); background:var(--bg-card); }
.osh-tabs { display:flex; gap:.4rem; margin-bottom:.6rem; }
.osh-tabs a { font-size:.85rem; padding:.35rem .8rem; border-radius:6px; text-decoration:none;
              color:var(--text-muted); background:var(--bg-card); border:1px solid var(--border); }
.osh-tabs a.active { color:var(--text); background:var(--bg-input, rgba(74,158,255,.08)); border-color:var(--accent, #4a9eff); }

.pmv-shell { max-width: 560px; margin: 0 auto; padding: 0.85rem; }
  .pmv-img-wrap {
    width: 100%; aspect-ratio: 1; max-height: 320px;
    background: var(--bg-input); border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; display:flex; align-items:center; justify-content:center;
    margin-bottom: 0.85rem;
  }
  .pmv-img-wrap img { width: 100%; height: 100%; object-fit: contain; }
  .pmv-img-wrap .pmv-img-empty { color: var(--text-muted); font-size: 0.9rem; }
  .pmv-name { margin: 0 0 0.25rem; font-size: 1.35rem; line-height: 1.2; word-break: break-word; }
  .pmv-mfg { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 0.85rem; }
  .pmv-stock-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.95rem 1rem; margin-bottom: 0.85rem;
  }
  .pmv-stock-row { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; }
  .pmv-stock-num { font-size: 2.4rem; font-weight: 700; min-width: 4rem; text-align: center; }
  .pmv-stock-num.zero { color: #ef4444; }
  .pmv-stock-num.low { color: #f59e0b; }
  .pmv-stock-num.ok { color: #22c55e; }
  .pmv-stock-label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
  .pmv-qty-btn {
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text); font-size: 1.6rem; font-weight: 700;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .pmv-qty-btn:active { background: #2563eb; color: #fff; }
  .pmv-qty-btn.minus { color: #ef4444; }
  .pmv-qty-btn.plus  { color: #22c55e; }
  .pmv-qty-step {
    display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.55rem; align-items: center;
  }
  .pmv-qty-step label { font-size: 0.78rem; color: var(--text-muted); }
  .pmv-qty-step select {
    padding: 0.4rem 0.55rem; font-size: 0.9rem;
    background: var(--bg-input); border: 1px solid var(--border);
    color: var(--text); border-radius: 8px;
  }
  .pmv-stock-locs { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.55rem; }
  .pmv-stock-locs span { display: inline-block; margin-right: 0.65rem; }

  .pmv-meta {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; padding: 0.85rem; margin-bottom: 0.85rem;
    display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 0.85rem;
    font-size: 0.92rem;
  }
  .pmv-meta dt { color: var(--text-muted); font-size: 0.8rem; }
  .pmv-meta dd { margin: 0; word-break: break-all; font-family: ui-monospace, monospace; }

  .pmv-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.85rem;
  }
  .pmv-actions .btn {
    padding: 0.7rem 0.6rem; font-size: 0.95rem; text-align: center; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  }
  .pmv-actions .btn-primary { background: #2563eb; color: #fff; border: none; }
  .pmv-actions .full { grid-column: 1 / -1; }

  .pmv-secondary {
    display: flex; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.85rem;
  }
  .pmv-secondary a {
    flex: 1; min-width: 110px; padding: 0.55rem; text-align: center;
    font-size: 0.85rem; text-decoration: none; color: var(--text);
    border: 1px solid var(--border); border-radius: 8px; background: transparent;
  }

  .pmv-toast {
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
    background: #22c55e; color: #fff; padding: 0.55rem 0.95rem;
    border-radius: 999px; font-size: 0.9rem; box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    opacity: 0; transition: opacity 0.2s ease; z-index: 1000;
  }
  .pmv-toast.show { opacity: 1; }
  .pmv-toast.err { background: #ef4444; }

  .pmv-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.45;
              margin-bottom: 0.85rem; max-height: 7rem; overflow: auto;
              background: var(--bg-card); border: 1px solid var(--border);
              border-radius: 10px; padding: 0.65rem 0.8rem; }

.part-name{font-size:1.75rem;font-weight:700;line-height:1.2;margin-bottom:1.25rem;word-break:break-word;}
.pill-row{display:flex;flex-wrap:wrap;gap:0.45rem;margin-bottom:1.25rem;}
.pill{background:#21262d;border:1px solid #30363d;border-radius:20px;padding:0.25rem 0.75rem;font-size:0.78rem;color:#8b949e;}
.pill strong{color:#e6edf3;}
.stock-badge{display:inline-flex;align-items:center;gap:0.4rem;border-radius:8px;padding:0.5rem 1rem;font-size:0.9rem;font-weight:600;margin-bottom:1.5rem;}
.stock-badge.in{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.4);color:#4ade80;}
.stock-badge.out{background:rgba(248,81,73,0.12);border:1px solid rgba(248,81,73,0.35);color:#f87171;}
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dot.in{background:#4ade80;}
.dot.out{background:#f87171;}
.signin-btn{display:block;text-align:center;background:#238636;color:#fff;border-radius:8px;padding:0.85rem 1.5rem;font-size:1rem;font-weight:600;text-decoration:none;transition:background 0.15s;}
.signin-btn:hover{background:#2ea043;}

    /* Avery 5163 — 2 col x 5 row, 4" x 2" labels on US Letter. */
    .sheet {
        display: grid;
        grid-template-columns: 4in 4in;
        grid-auto-rows: 2in;
        column-gap: 0.1875in;
        row-gap: 0;
        padding: 0.5in 0.25in;
        box-sizing: border-box;
    }
    .sheet .label {
        width: 4in;
        height: 2in;
        box-sizing: border-box;
        padding: 0.15in;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        page-break-inside: avoid;
    }
    .sheet .label svg { width: 3.5in; height: 1in; }
    .sheet .label .meta {
        font-size: 9pt;
        color: #444;
        text-align: center;
        margin-top: 4pt;
    }
    @media print {
        .toolbar { display: none; }
        @page { size: letter; margin: 0; }
    }
    .toolbar {
        position: sticky; top: 0; padding: 8px;
        background: #f4f4f4; border-bottom: 1px solid #ccc;
        font-family: sans-serif;
    }
    .toolbar button { padding: 6px 12px; }

.wh-hero{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius,8px);padding:1.25rem;margin-bottom:1rem;}
.wh-hero.has-image{display:grid;grid-template-columns:96px 1fr;gap:0.85rem;align-items:start;}
.wh-hero-img{width:96px;height:96px;object-fit:contain;border-radius:var(--radius,8px);background:#fff;padding:4px;box-sizing:border-box;}
.wh-hero-name{font-size:1.15rem;font-weight:700;line-height:1.2;word-break:break-word;}
.wh-hero-sku{font-size:0.8rem;color:var(--text-muted);margin-top:0.15rem;}
.wh-qty{font-size:3rem;font-weight:800;line-height:1;margin:0.6rem 0;color:var(--text);}
.wh-qty-label{font-size:0.72rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;}
.wh-btns{display:flex;gap:0.5rem;margin-top:0.75rem;}
.wh-btn{flex:1;min-height:52px;font-size:1.1rem;font-weight:700;border:none;border-radius:var(--radius,8px);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.3rem;transition:opacity .15s;}
.wh-btn:active{opacity:.75;}
.wh-btn-dec{background:#f85149;color:#fff;}
.wh-btn-inc{background:#22c55e;color:#fff;}
.wh-btn-log{background:var(--bg-input,#2a2a2a);color:var(--text);border:1px solid var(--border);}
.wh-actions{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.75rem;}
.wh-action-btn{width:100%;min-height:48px;padding:0.6rem 1rem;font-size:0.95rem;font-weight:600;border:1px solid var(--border);border-radius:var(--radius,8px);background:var(--bg-input,#2a2a2a);color:var(--text);cursor:pointer;text-align:left;display:flex;align-items:center;gap:0.6rem;}
.wh-action-btn:active{opacity:.75;}
.wh-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);background:#22c55e;color:#fff;padding:0.55rem 1.2rem;border-radius:999px;font-size:0.9rem;font-weight:600;pointer-events:none;opacity:0;transition:opacity .25s;z-index:9999;white-space:nowrap;}
.wh-toast.wh-toast-err{background:#f85149;}
.wh-toast.show{opacity:1;}
/* modal overlay */
.wh-modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;align-items:flex-end;justify-content:center;}
.wh-modal-bg.open{display:flex;}
.wh-modal{background:var(--bg-card);border-radius:var(--radius,8px) var(--radius,8px) 0 0;width:100%;max-width:520px;padding:1.25rem;padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));}
.wh-modal h4{margin:0 0 0.75rem 0;font-size:1rem;}
.wh-modal input[type=number]{width:100%;padding:0.55rem 0.7rem;font-size:1rem;background:var(--bg-input,#1e1e1e);border:1px solid var(--border);border-radius:var(--radius,8px);color:var(--text);margin-bottom:0.6rem;}
.wh-modal textarea{width:100%;padding:0.55rem 0.7rem;font-size:0.9rem;background:var(--bg-input,#1e1e1e);border:1px solid var(--border);border-radius:var(--radius,8px);color:var(--text);margin-bottom:0.6rem;resize:vertical;min-height:70px;}
.wh-modal-btns{display:flex;gap:0.5rem;}
.wh-modal-btns button{flex:1;min-height:48px;font-size:1rem;font-weight:700;border:none;border-radius:var(--radius,8px);cursor:pointer;}
.wh-modal-cancel{background:var(--bg-input,#2a2a2a);color:var(--text);border:1px solid var(--border) !important;}
.wh-modal-submit{background:#58a6ff;color:#fff;}
/* desktop compaction */
@media(min-width:640px){
  .wh-hero{display:grid;grid-template-columns:1fr auto;gap:0 1.5rem;align-items:start;}
  .wh-hero.has-image{grid-template-columns:120px 1fr auto;gap:0 1.5rem;}
  .wh-hero.has-image .wh-hero-img{width:120px;height:120px;grid-column:1;}
  .wh-hero.has-image .wh-hero-info{grid-column:2;}
  .wh-hero.has-image .wh-hero-stock{grid-column:3;}
  .wh-hero-info{grid-column:1;}
  .wh-hero-stock{grid-column:2;text-align:right;}
  .wh-qty{font-size:2.2rem;}
  .wh-btns{flex-wrap:nowrap;width:auto;gap:0.4rem;}
  .wh-btn{flex:none;min-width:72px;font-size:1rem;}
  .wh-actions{flex-direction:row;gap:0.5rem;}
  .wh-action-btn{width:auto;flex:1;}

/* Mobile (≤640px): duplicate-group tables → stacked cards.
   The radio "Keep?" remains the first cell of each card; merge
   button row stays full-width below the table. */
@media (max-width: 640px) {
    .parts-dupes-table,
    .parts-dupes-table thead,
    .parts-dupes-table tbody,
    .parts-dupes-table tr,
    .parts-dupes-table td {
        display: block;
        width: 100%;
    }
    .parts-dupes-table thead { display: none; }
    .parts-dupes-table tbody tr {
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.55rem 0.7rem;
        margin-bottom: 0.5rem;
        background: var(--bg-input, var(--bg-card));
    }
    .parts-dupes-table tbody td {
        padding: 0.25rem 0 !important;
        border: none !important;
        text-align: left !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
    }
    .parts-dupes-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 0.66rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        flex-shrink: 0;
    }
}

.tab-nav-b34 { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin: 0 0 1rem; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .tab-nav-b34::-webkit-scrollbar { height: 4px; }
  .tab-nav-b34 a { padding: 0.4rem 0.8rem; text-decoration: none; color: var(--text-muted); white-space: nowrap; flex: 0 0 auto; }
  .tab-nav-b34 a.tab-active { border-bottom: 2px solid #58a6ff; color: #58a6ff; font-weight: 600; }
  @media (max-width: 600px) {
    .tab-nav-b34 a { padding: 0.55rem 0.7rem; font-size: 0.92rem; }
  }

@media (max-width: 640px) {
    /* Stack the Images header so Take Photo + Upload buttons don't
       crowd the section title and don't get partially hidden behind
       the right-edge of the photo grid. */
    .advanced-card .img-gallery-head { flex-direction: column !important; align-items: stretch !important; gap: .55rem; }
    .advanced-card .img-gallery-head form { width: 100%; }
    .advanced-card .img-gallery-head form .btn { flex: 1 1 auto; min-height: 40px; }
  }

.var-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; }
          .var-card { display: flex; gap: 0.55rem; padding: 0.5rem 0.6rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; align-items: center; }
          .var-thumb { width: 48px; height: 48px; object-fit: contain; background: var(--bg-input); border-radius: 4px; flex: 0 0 auto; }
          .var-thumb-placeholder { width: 48px; height: 48px; background: var(--bg-input); border-radius: 4px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.7rem; }
          .var-meta { flex: 1; min-width: 0; font-size: 0.82rem; line-height: 1.25; }
          .var-meta .var-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
          .var-meta .var-mono { font-family: ui-monospace, monospace; color: var(--text-muted); font-size: 0.74rem; }
          .var-stock { font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; }
          .var-stock.ok { background: rgba(34,197,94,.10); color: #22c55e; }
          .var-stock.low { background: rgba(245,158,11,.10); color: #f59e0b; }
          .var-stock.zero { background: rgba(239,68,68,.10); color: #ef4444; }
          .var-actions { display: flex; gap: 0.3rem; }
          .var-suggest-card { border-style: dashed; opacity: 0.92; }
          @media (max-width: 600px) {
            .var-grid { grid-template-columns: 1fr; }
          }

.autocomplete-dropdown { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:0 0 var(--radius) var(--radius); max-height:200px; overflow-y:auto; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.4); }
.ac-item { padding:8px 12px; cursor:pointer; font-size:0.85rem; border-bottom:1px solid #21262d; }
.ac-item:hover { background:var(--bg-input); }
.ac-item:last-child { border-bottom:none; }
.ac-item strong { color:#58a6ff; }

.pi-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media(max-width:700px){ .pi-grid { grid-template-columns:1fr; } }
.pi-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:1.2rem 1.4rem; }
.pi-card h3 { margin:0 0 0.9rem; font-size:0.95rem; font-weight:600; }
.pi-col-list { list-style:none; padding:0; margin:0.6rem 0 0; }
.pi-col-list li { display:flex; gap:0.5rem; align-items:baseline; padding:0.2rem 0; font-size:0.82rem; border-bottom:1px solid var(--border); }
.pi-col-list li:last-child { border-bottom:none; }
.pi-col-list .col-name { font-family:monospace; font-weight:600; min-width:130px; }
.pi-col-list .col-req { color:#f0b429; font-size:0.7rem; font-weight:700; }
.pi-col-list .col-type { color:var(--text-muted); }
/* summary tiles */
.eal-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:0.6rem; margin-bottom:1rem; }
.eal-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:0.7rem 0.9rem; }
.eal-stat .v { font-size:1.5rem; font-weight:700; }
.eal-stat .l { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-top:0.15rem; }
.pi-error-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.pi-error-table th, .pi-error-table td { padding:0.35rem 0.6rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.pi-error-table th { color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; background:var(--bg); }

@media (min-width: 641px) {
    .parts-v2-sidebar-collapsible > summary { display: none; }
    .parts-v2-sidebar-collapsible > *:not(summary) { display: block !important; }
}
@media (max-width: 640px) {
    .parts-v2-sidebar-collapsible {
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 0.55rem 0.75rem;
        background: var(--bg-card);
        margin-bottom: 0.75rem;
    }
    .parts-v2-sidebar-collapsible > summary {
        cursor: pointer;
        list-style: none;
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.15rem 0;
    }
    .parts-v2-sidebar-collapsible > summary::-webkit-details-marker { display: none; }
    .parts-v2-sidebar-collapsible > summary::before {
        content: '▸';
        font-size: 0.75rem;
        color: var(--text-muted);
        transition: transform 0.15s;
    }
    .parts-v2-sidebar-collapsible[open] > summary::before { transform: rotate(90deg); }
    .parts-v2-sidebar-collapsible[open] > *:not(summary) {
        margin-top: 0.6rem;
    }
}

@media (max-width: 760px) {
    .parts-v2-grid { grid-template-columns: 1fr !important; }
    .parts-v2-sidebar { order: 2; }
    #parts-bulk-toolbar { bottom:0;border-radius:10px 10px 0 0;width:100%;left:0;transform:none; }
}
.parts-tag-chip { transition: opacity 0.1s; }
.parts-tag-chip:hover { opacity: 0.85; }

.pl-fab-stack {
    position: fixed; right: 14px; bottom: 18px;
    display: none; flex-direction: column; gap: 0.5rem;
    z-index: 950;
  }
  .pl-fab {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    font-size: 1.5rem; line-height: 1;
    color: #fff; text-decoration: none;
    transition: transform 0.12s;
  }
  .pl-fab:active { transform: scale(0.94); }
  .pl-fab.primary { background: #2563eb; }
  .pl-fab.secondary { background: #7c3aed; }
  @media (max-width: 768px) {
    .pl-fab-stack { display: flex; }
    /* Reserve bottom padding so the FAB doesn't cover the last row */
    .parts-v2-main { padding-bottom: 90px; }
  }

@keyframes cardFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.part-row{animation:cardFadeIn 0.25s ease both;}
@media (max-width: 640px) {
  .pl-hide-mobile { display: none; }
  #parts-table { min-width: 0; }
}

.scan-shell {
    max-width: 520px; margin: 0 auto; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.85rem;
  }
  .scan-shell h2 { margin: 0; font-size: 1.15rem; }
  .scan-shell .scan-sub { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
  .scan-video-wrap {
    position: relative; width: 100%; aspect-ratio: 4/3;
    background: #000; border-radius: 10px; overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  .scan-video-wrap video {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .scan-reticle {
    position: absolute; top: 50%; left: 8%; right: 8%;
    transform: translateY(-50%); height: 22%;
    border: 2px solid rgba(255,255,255,0.85); border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.20) inset;
    pointer-events: none;
  }
  .scan-status {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.6rem 0.8rem; font-size: 0.85rem;
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 2.4rem;
  }
  .scan-status.busy { border-color: #2563eb; }
  .scan-status.match { border-color: #10b981; background: rgba(16,185,129,.07); }
  .scan-status.miss { border-color: #f59e0b; background: rgba(245,158,11,.07); }
  .scan-status.err { border-color: #ef4444; background: rgba(239,68,68,.07); }
  .scan-manual {
    display: flex; gap: 0.5rem;
  }
  .scan-manual input {
    flex: 1; padding: 0.55rem 0.7rem; border: 1px solid var(--border);
    background: var(--bg-input); color: var(--text);
    border-radius: 6px; font-size: 1rem;
    font-family: ui-monospace, monospace; letter-spacing: 0.04em;
  }
  .scan-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .scan-actions .btn { font-size: 0.9rem; }
  .scan-result {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 0.85rem;
  }
  .scan-result h3 { margin: 0 0 0.35rem; font-size: 1rem; }
  .scan-result .scan-meta { color: var(--text-muted); font-size: 0.8rem; }
  .scan-result img { max-width: 90px; max-height: 90px; float: right; margin: 0 0 .35rem .55rem; border-radius: 4px; }
  .scan-history { font-size: 0.8rem; color: var(--text-muted); }
  .scan-history li { font-family: ui-monospace, monospace; }
  .scan-tip { color: var(--text-muted); font-size: 0.78rem; }

/* 7.08.59: mobile pass for the receiving / ordering workflow — receivers
   pull this up on phones. Below 640px we hide SKU + Customer + Unit Price
   (still in the row data attributes for desktop) and tighten padding. */
.pol-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pol-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.pol-table th, .pol-table td { padding: .55rem .65rem; }
@media (max-width: 640px) {
  .pol-table { min-width: 0; }
  .pol-table th.pol-hide-mobile, .pol-table td.pol-hide-mobile { display: none; }
  .pol-table th, .pol-table td { padding: .45rem .4rem; font-size: .85rem; }
}

.pw-field { margin-bottom:0.75rem; }
.pw-field > label { display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:2px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.btn-icon { background:none; border:1px solid var(--border); border-radius:4px; padding:3px 6px; cursor:pointer; color:var(--text-muted); font-size:0.85rem; }
.btn-icon:hover { background:var(--bg-hover, rgba(255,255,255,0.05)); color:var(--text-color); }

.type-tab { flex:1; text-align:center; padding:0.6rem; border:2px solid var(--border); border-radius:var(--radius); cursor:pointer; font-size:0.8rem; background:var(--bg); transition: all 0.15s; }
    .type-tab:hover { border-color: var(--text-muted); }
    .type-tab.active { border-color: var(--primary); background: rgba(74,158,255,0.1); }

.ph-filter-row { margin:0 0 1rem; }
.ph-filter { padding:0.4rem 0.6rem; background:var(--surface-input); border:1px solid var(--border); color:var(--text); border-radius:var(--radius-sm); min-width:280px; font-size:var(--text-sm); }
.ph-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:0.75rem; margin-bottom:1.25rem; }
.ph-stat-card { padding:0.9rem 1rem; text-align:center; }
.ph-stat-num { font-size:var(--text-xl); font-weight:var(--weight-bold); }
.ph-stat-num--ok { color:var(--success); }
.ph-stat-num--bad { color:var(--danger); }
.ph-stat-num--mute { color:var(--text-muted); }
.ph-stat-num--warn { color:var(--warning); }
.ph-stat-label { font-size:0.75rem; }
.ph-risks-section { margin-bottom:1.25rem; }
.ph-risks-h3 { font-size:0.95rem; margin:0 0 0.6rem; color:var(--text); }
.ph-risks-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:0.75rem; }
.ph-row { cursor:pointer; }
.ph-age--bad { color:var(--danger); font-weight:var(--weight-bold); }
.ph-age--warn { color:var(--warning); }
.ph-age--unknown { color:var(--text-muted); }
.ph-badge { color:#fff; }
.ph-badge--safe { background:var(--success); }
.ph-badge--low { background:#eab308; }
.ph-badge--moderate { background:#f97316; }
.ph-badge--high { background:var(--danger); }
.ph-badge--critical { background:#991b1b; }
.ph-badge--err { background:var(--text-faint); }
.ph-badge--unavail { background:#475569; }
.ph-hint-tiny { font-size:0.7em; }
.ph-hint-name { font-size:0.75rem; }
.ph-last-check { font-size:0.75em; }
.ph-form-hidden { display:none; }

.pw-folder:hover, .pw-folder.active { background: var(--bg-hover, rgba(255,255,255,0.05)); }
.pw-folder.active { font-weight: 600; }

.ptc-cat-w {
  --ptc-cat-font-mono: "JetBrains Mono", "SF Mono", Monaco, "Cascadia Code", monospace;
  --ptc-cat-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --ptc-cat-bg-primary: oklch(0.15 0 0);
  --ptc-cat-bg-secondary: oklch(0.18 0.005 240);
  --ptc-cat-bg-tertiary: oklch(0.22 0.008 250);
  --ptc-cat-text-primary: oklch(0.95 0.005 240);
  --ptc-cat-text-secondary: oklch(0.70 0.01 240);
  --ptc-cat-border: oklch(0.30 0.01 240);
  --ptc-cat-success: oklch(0.65 0.15 145);
  --ptc-cat-danger: oklch(0.60 0.18 25);
  --ptc-cat-warning: oklch(0.75 0.12 85);
  --ptc-cat-info: oklch(0.65 0.15 240);
  --ptc-cat-accent: oklch(0.70 0.18 280);
  --ptc-cat-radius: 6px;
  --ptc-cat-transition: 0.2s ease;
}
.ptc-cat-w * { font-family: var(--ptc-cat-font-sans); }
.ptc-cat-w code,
.ptc-cat-w .mono { font-family: var(--ptc-cat-font-mono); }
.ptc-cat-w {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
  animation: fadeStaggerIn 0.4s ease;
}
@keyframes fadeStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ptc-cat-header {
  margin-bottom: 1.5rem;
}
.ptc-cat-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ptc-cat-text-primary);
  margin: 0 0 0.25rem 0;
  letter-spacing: -0.02em;
}
.ptc-cat-subtitle {
  font-size: 0.85rem;
  color: var(--ptc-cat-text-secondary);
  line-height: 1.5;
}
.ptc-cat-subtitle code {
  background: var(--ptc-cat-bg-tertiary);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.8rem;
  color: var(--ptc-cat-accent);
}
.ptc-cat-card {
  background: var(--ptc-cat-bg-secondary);
  border: 1px solid var(--ptc-cat-border);
  border-radius: var(--ptc-cat-radius);
  overflow: hidden;
}
.ptc-cat-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.ptc-cat-table thead {
  background: var(--ptc-cat-bg-tertiary);
}
.ptc-cat-table th {
  padding: 0.75rem 0.6rem;
  text-align: left;
  font-weight: 600;
  color: var(--ptc-cat-text-primary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ptc-cat-table td {
  padding: 0.75rem 0.6rem;
  border-top: 1px solid var(--ptc-cat-border);
  color: var(--ptc-cat-text-primary);
}
.ptc-cat-table tr:hover td {
  background: rgba(255,255,255,0.03);
}
.ptc-cat-mono {
  font-family: var(--ptc-cat-font-mono);
  font-size: 0.9em;
  color: var(--ptc-cat-accent);
}
.ptc-cat-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--ptc-cat-font-mono);
}
.ptc-cat-btn {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  background: var(--ptc-cat-bg-tertiary);
  border: 1px solid var(--ptc-cat-border);
  border-radius: 4px;
  color: var(--ptc-cat-text-primary);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all var(--ptc-cat-transition);
  cursor: pointer;
}
.ptc-cat-btn:hover {
  background: var(--ptc-cat-bg-primary);
  border-color: var(--ptc-cat-text-secondary);
}
.ptc-cat-empty {
  padding: 2rem;
  text-align: center;
  color: var(--ptc-cat-text-secondary);
  font-size: 0.9rem;
  background: var(--ptc-cat-bg-secondary);
  border: 1px solid var(--ptc-cat-border);
  border-radius: var(--ptc-cat-radius);
}
.ptc-cat-filter-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0.75rem 0;
  font-size: 0.85rem;
}
.ptc-cat-filter-row input,
.ptc-cat-filter-row select {
  background: var(--ptc-cat-bg-primary);
  color: var(--ptc-cat-text-primary);
  border: 1px solid var(--ptc-cat-border);
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
}
.ptc-cat-filter-row label {
  font-size: 0.8rem;
  color: var(--ptc-cat-text-secondary);
  cursor: pointer;
}

  .sub { color: #555; font-size: 10pt; margin-bottom: 1.2rem; }
  td.r { text-align: right; }
  .pill { display: inline-block; padding: 1pt 7pt; border-radius: 999px; font-size: 8pt; font-weight: 700;
          border: 1px solid currentColor; }
  .pill-good { color: #2e7d32; }
  .pill-warn { color: #b8860b; }
  .pill-bad  { color: #b71c1c; }
  @media print {
  }
  .actions { margin-bottom: 1rem; }
  .actions button { padding: 6pt 14pt; font-size: 11pt; cursor: pointer; }
  @media print { .actions { display: none; } }

.patch-w {
    --pw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --pw-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --pw-on: #22c55e;
    --pw-off: #ef4444;
    --pw-warn: #f59e0b;
    --pw-mute: var(--text-muted);
    --pw-accent: var(--primary, #4a9eff);
    font-family: var(--pw-sans);
    letter-spacing: -0.005em;
}

/* ── Header + stat pill bar ───────────────────────────────────── */
.patch-w .page-header { margin-bottom: 0.4rem; }
.patch-w .page-header h2 {
    font-family: var(--pw-mono);
    font-size: 1rem; font-weight: 700;
    letter-spacing: -0.005em; margin: 0;
}
.patch-w .hint {
    font-family: var(--pw-mono); font-size: 0.66rem;
    color: var(--pw-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 0.9rem; padding: 0;
}
.patch-w .pw-stats {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    padding: 0.4rem 0 0.9rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.patch-w .pw-pill {
    font-family: var(--pw-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.patch-w .pw-pill b { font-weight: 700; }
.patch-w .pw-pill .lbl {
    color: var(--pw-mute); text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 0.62rem;
}
.patch-w .pw-pill.on   { color: var(--pw-on);   border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.07); }
.patch-w .pw-pill.warn { color: var(--pw-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.patch-w .pw-pill.off  { color: var(--pw-off);  border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.07); }
.patch-w .pw-pill.acc  { color: var(--pw-accent); border-color: rgba(74,158,255,0.4); background: rgba(74,158,255,0.07); }

/* ── Section labels + search ──────────────────────────────────── */
.patch-w h3 {
    font-family: var(--pw-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--pw-mute);
    font-weight: 600;
    margin: 1.4rem 0 0.6rem;
}
.patch-w h3:first-of-type { margin-top: 0; }
.patch-w #patch-search {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.4rem 0.6rem;
    font-family: var(--pw-mono); font-size: 0.78rem; color: var(--text);
}
.patch-w #patch-search:focus { outline: none; border-color: var(--pw-accent); }

/* ── Table ────────────────────────────────────────────────────── */
.patch-w .data-table thead th {
    font-family: var(--pw-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--pw-mute);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    padding: 7px 10px;
}
.patch-w .data-table tbody td {
    padding-top: 9px; padding-bottom: 9px;
    vertical-align: middle;
}
.patch-w .data-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.patch-w .data-table tbody tr:hover { background: rgba(74,158,255,0.06); }

/* Severity left-stripe for rows with critical pending updates */
.patch-w .data-table tbody tr[data-severity="critical"] {
    box-shadow: inset 3px 0 0 0 var(--pw-off);
}
.patch-w .data-table tbody tr[data-severity="warn"] {
    box-shadow: inset 3px 0 0 0 var(--pw-warn);
}
.patch-w .data-table tbody tr[data-severity="ok"] {
    box-shadow: inset 3px 0 0 0 var(--pw-on);
}

/* Pulsing red dot for rows with critical pending updates */
.patch-w .pw-crit-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--pw-off);
    margin-right: 6px; vertical-align: middle;
    box-shadow: 0 0 5px rgba(239,68,68,0.7);
    animation: pw-pulse 2s ease-out infinite;
}
@keyframes pw-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* Status pills (replaces .badge inline color styles for status cell) */
.patch-w .pw-status {
    display: inline-flex; align-items: center;
    font-family: var(--pw-mono); font-size: 0.66rem;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 3px 8px; border-radius: 999px;
    border: 1px solid transparent;
    line-height: 1.1;
}
.patch-w .pw-status.installed { color: var(--pw-on);   background: rgba(34,197,94,0.1);  border-color: rgba(34,197,94,0.35); }
.patch-w .pw-status.pending   { color: var(--pw-warn); background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.35); }
.patch-w .pw-status.failed    { color: var(--pw-off);  background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.35); }
.patch-w .pw-status.optional  { color: var(--pw-mute); background: rgba(255,255,255,0.04); border-color: var(--border); }

.patch-w .data-table tbody tr td strong {
    font-family: var(--pw-mono); font-weight: 600;
}

/* Staggered fade-in on first 8 rows */
.patch-w .data-table tbody tr.pw-fade {
    opacity: 0; transform: translateY(4px);
    animation: pw-fade-in 0.45s cubic-bezier(0.2,0.7,0.2,1) forwards;
}
@keyframes pw-fade-in {
    to { opacity: 1; transform: translateY(0); }
}

/* Status dots used in policy table */
.patch-w .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.patch-w .status-online { background: var(--pw-on); box-shadow: 0 0 5px rgba(34,197,94,0.7); animation: pw-dot 2.4s ease-out infinite; }
.patch-w .status-offline { background: var(--pw-off); }
@keyframes pw-dot {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

tr.host-drawer.open { display:table-row !important; }

@page { size: Letter; margin: 0.6in 0.6in; }
.head { display: flex; justify-content: space-between; align-items: flex-start; }
.head .right { text-align: right; }
.title { font-size: 28pt; font-weight: 800; letter-spacing: 3px; color: #111827; }
.brand-name { font-size: 13pt; font-weight: 700; }
.brand-line { font-size: 9pt; color: #6b7280; }
.label { font-size: 8pt; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }
.value { font-size: 10pt; font-weight: 600; }
.two-col { display: flex; justify-content: space-between; gap: 16px; }
.two-col .col { flex: 1; }
.right-col { text-align: right; font-weight: 600; }
.amount-row td { font-weight: 700; font-size: 12pt; color: #059669; border-bottom: none; }
.balance-row td { color: #6b7280; border-bottom: none; }
.paid-in-full { display: inline-block; background: #d1fae5; color: #065f46; font-size: 11pt; font-weight: 800; letter-spacing: 2px; padding: 4px 14px; border-radius: 4px; border: 2px solid #6ee7b7; margin-top: 8px; }
.footer { margin-top: 20px; font-size: 8pt; color: #9ca3af; text-align: center; border-top: 1px solid #e5e7eb; padding-top: 10px; }

.pm-w {
    --pm-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --pm-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --pm-on: #22c55e;
    --pm-off: #ef4444;
    --pm-warn: #f59e0b;
    --pm-accent: var(--primary, #4a9eff);
    --pm-mute: var(--text-muted);
    font-family: var(--pm-sans);
    letter-spacing: -0.005em;
}

/* ── Compact mono header bar ────────────────────────────────── */
.pm-w .pm-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.pm-w .pm-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.pm-w .pm-meta {
    font-size: 0.7rem; color: var(--pm-mute);
    font-family: var(--pm-mono);
}

/* ── Stat pills ──────────────────────────────────────────────── */
.pm-w .pm-stats {
    display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.pm-w .pm-pill {
    font-family: var(--pm-mono); font-size: 0.72rem; padding: 5px 10px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.pm-w .pm-pill b { font-weight: 700; font-size: 0.85rem; }
.pm-w .pm-pill.red b { color: var(--pm-off); }
.pm-w .pm-pill.orange b { color: var(--pm-warn); }
.pm-w .pm-pill.green b { color: var(--pm-on); }

/* ── Aging buckets ───────────────────────────────────────────── */
.pm-w .pm-aging {
    display: flex; gap: 0.4rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.pm-w .pm-age {
    font-family: var(--pm-mono); font-size: 0.7rem;
    padding: 5px 9px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; flex-direction: column; align-items: center; line-height: 1.3;
    min-width: 80px;
}
.pm-w .pm-age .lbl {
    font-size: 0.65rem; color: var(--pm-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pm-w .pm-age .val { font-weight: 700; font-size: 0.85rem; }
.pm-w .pm-age.current .val { color: var(--pm-on); }
.pm-w .pm-age.b0-30   .val { color: var(--pm-accent); }
.pm-w .pm-age.b31-60  .val { color: var(--pm-warn); }
.pm-w .pm-age.b61-90  .val { color: #e67e22; }
.pm-w .pm-age.b90     .val { color: var(--pm-off); }

/* ── Layout ──────────────────────────────────────────────────── */
.pm-w .pm-layout {
    display: grid; grid-template-columns: 1fr 260px; gap: 0.75rem;
}
@media (max-width: 1100px) { .pm-w .pm-layout { grid-template-columns: 1fr; } }

/* ── Sidebar ─────────────────────────────────────────────────── */
.pm-w .pm-sidebar {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.85rem;
}
.pm-w .pm-sidebar h3 {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--pm-mute); font-weight: 600; margin: 0 0 0.5rem 0;
}
.pm-w .pm-sidebar ul { list-style: none; padding: 0; margin: 0; }
.pm-w .pm-sidebar li {
    display: flex; justify-content: space-between;
    padding: 0.3rem 0; border-top: 1px solid var(--border); font-size: 0.8rem;
}
.pm-w .pm-sidebar li:first-child { border-top: 0; }
.pm-w .pm-sidebar .mono { font-family: var(--pm-mono); }

/* ── Table ───────────────────────────────────────────────────── */
.pm-w .pm-table {
    width: 100%; border-collapse: collapse;
}
.pm-w .pm-table th {
    text-align: left; font-size: 0.7rem; color: var(--pm-mute);
    padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pm-w .pm-table td {
    padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border);
    font-size: 0.82rem; vertical-align: middle;
}
.pm-w .pm-table .mono { font-family: var(--pm-mono); }
.pm-w .pm-table .money { font-family: var(--pm-mono); text-align: right; }

.pm-w .pm-table tr.bucket-current td:first-child { border-left: 3px solid var(--pm-on); }
.pm-w .pm-table tr.bucket-0-30    td:first-child { border-left: 3px solid var(--pm-accent); }
.pm-w .pm-table tr.bucket-31-60   td:first-child { border-left: 3px solid var(--pm-warn); }
.pm-w .pm-table tr.bucket-61-90   td:first-child { border-left: 3px solid #e67e22; }
.pm-w .pm-table tr.bucket-90      td:first-child { border-left: 3px solid var(--pm-off); }

/* ── Payment form ────────────────────────────────────────────── */
.pm-w .pm-paybox {
    background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.2);
    border-radius: var(--radius); padding: 0.75rem; margin-top: 0.5rem;
}
.pm-w .pm-paybox label {
    font-size: 0.7rem; color: var(--pm-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.pm-w .pm-paybox input,
.pm-w .pm-paybox select {
    padding: 0.3rem 0.5rem; font-size: 0.82rem;
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.pm-w .pm-paybox .mono { font-family: var(--pm-mono); }

.pm-w .pm-history { margin-top: 0.5rem; font-size: 0.75rem; }
.pm-w .pm-history-row {
    display: grid; grid-template-columns: 110px 1fr 110px 70px; gap: 0.4rem;
    padding: 0.2rem 0; border-top: 1px dashed var(--border);
}
.pm-w .pm-history-row .mono { font-family: var(--pm-mono); }

.people-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:0.75rem; margin-bottom:2rem; }
.people-card { background:var(--bg-card, #1e1e2e); border:1px solid var(--border); border-radius:6px; padding:0.75rem; cursor:default; transition:border-color 0.2s, transform 0.2s, box-shadow 0.2s; position:relative; overflow:hidden; opacity:0; animation:peopleFadeIn 0.4s ease forwards; }
.people-card:hover { transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.3); border-color:var(--primary); }
@keyframes peopleFadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.people-name { font-size:0.9rem; font-weight:600; margin-bottom:0.4rem; display:flex; align-items:center; gap:0.3rem; padding-right:3.5rem; }
.people-badges { display:flex; gap:0.2rem; flex-wrap:wrap; margin-bottom:0.4rem; }
.people-badges span { font-size:0.58rem; padding:1px 5px; border-radius:3px; font-weight:600; letter-spacing:0.03em; }
.people-badges .b-contact   { background:#1e3a8a; color:#93c5fd; }
.people-badges .b-dir       { background:#1a3a5c; color:#58a6ff; }
.people-badges .b-ad        { background:#1e4a2a; color:#6ee7a8; }
.people-badges .b-portal    { background:#14532d; color:#86efac; }
.people-badges .b-pending   { background:#3d2e00; color:#f0b429; }
.people-stats { display:table; width:100%; font-size:0.72rem; }
.people-stats div { display:table-row; }
.people-stats span:first-child { display:table-cell; color:var(--text-muted); padding:1px 6px 1px 0; white-space:nowrap; }
.people-stats span:last-child { display:table-cell; text-align:left; padding:1px 0; word-break:break-word; }
.people-foot { font-size:0.68rem; color:var(--text-muted); margin-top:0.5rem; display:flex; justify-content:space-between; gap:0.4rem; padding-top:0.4rem; border-top:1px solid var(--border); }
.people-foot a { color:var(--text-muted); text-decoration:none; padding:0 3px; border-radius:3px; }
.people-foot a:hover { color:var(--primary); background:rgba(88,166,255,0.1); }
.people-actions { position:absolute; top:0.5rem; right:0.5rem; display:flex; gap:0.15rem; }
.people-icon-btn { background:transparent; border:1px solid transparent; color:var(--text-muted); width:1.55rem; height:1.55rem; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:0.82rem; padding:0; transition:background 0.12s, color 0.12s, border-color 0.12s; }
.people-icon-btn:hover { background:rgba(88,166,255,0.15); color:#60a5fa; border-color:rgba(88,166,255,0.35); }
.people-icon-btn.danger:hover { background:rgba(239,68,68,0.15); color:#ef4444; border-color:rgba(239,68,68,0.35); }
.people-card.no-match { display:none; }

/* Merge mode */
.people-card .merge-cb { position:absolute; top:0.5rem; left:0.5rem; width:1rem; height:1rem; accent-color:#60a5fa; display:none; cursor:pointer; z-index:2; }
body.merge-mode .people-card .merge-cb { display:block; }
body.merge-mode .people-card { padding-left:1.75rem; }
body.merge-mode .people-card.selected-for-merge { border-color:#60a5fa; box-shadow:0 0 0 2px rgba(96,165,250,0.3); }
#merge-toolbar { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:var(--bg-card); border:1px solid var(--primary); border-radius:999px; padding:0.6rem 1.1rem; display:none; align-items:center; gap:0.75rem; box-shadow:0 10px 30px rgba(0,0,0,0.4); z-index:9000; font-size:0.85rem; }
body.merge-mode #merge-toolbar { display:flex; }
#merge-toolbar .count { color:var(--text-muted); font-size:0.8rem; }
#merge-toolbar button { font-size:0.78rem; padding:0.3rem 0.65rem; }

/* Delete confirmation modal */
#people-delete-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:9998; align-items:center; justify-content:center; }
#people-delete-modal .box { background:var(--bg-card); color:var(--text); border:1px solid var(--border); border-radius:8px; width:min(460px, 94vw); max-height:88vh; display:flex; flex-direction:column; box-shadow:0 18px 60px rgba(0,0,0,0.55); }
#people-delete-modal h3 { margin:0 0 0.35rem; font-size:1rem; }
#people-delete-modal .row { padding:0.6rem 1rem; border-top:1px solid var(--border); font-size:0.82rem; display:flex; align-items:center; gap:0.5rem; }
#people-delete-modal .row:first-of-type { border-top:none; }
#people-delete-modal .row input[type=checkbox] { margin:0; }
#people-delete-modal .row small { color:var(--text-muted); font-size:0.7rem; margin-left:auto; }

.ppl-w {
    --pw-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --pw-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --pw-on: #22c55e;
    --pw-off: #ef4444;
    --pw-warn: #f59e0b;
    --pw-info: #38bdf8;
    --pw-accent: var(--primary, #4a9eff);
    --pw-mute: var(--text-muted);
    font-family: var(--pw-sans);
    letter-spacing: -0.005em;
}

/* ── Compact header bar with mono stat pills ─────────────────── */
.ppl-w .pw-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}
.ppl-w .pw-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.ppl-w .pw-stat-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ppl-w .pw-pill {
    font-family: var(--pw-mono); font-size: 0.72rem; padding: 4px 9px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.ppl-w .pw-pill b { font-weight: 700; }
.ppl-w .pw-pill .lbl {
    color: var(--pw-mute); text-transform: uppercase;
    letter-spacing: 0.18em; font-size: 0.62rem;
}
.ppl-w .pw-pill.acc  { color: var(--pw-accent); border-color: rgba(74,158,255,0.4);  background: rgba(74,158,255,0.07); }
.ppl-w .pw-pill.on   { color: var(--pw-on);     border-color: rgba(34,197,94,0.4);   background: rgba(34,197,94,0.07); }
.ppl-w .pw-pill.warn { color: var(--pw-warn);   border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.07); }
.ppl-w .pw-pill.info { color: var(--pw-info);   border-color: rgba(56,189,248,0.4);  background: rgba(56,189,248,0.07); }

/* Search form sits on the right end of the bar */
.ppl-w .pw-search {
    margin-left: auto;
    display: flex; gap: 0.4rem; align-items: center;
}
.ppl-w .pw-search input {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.35rem 0.55rem;
    font-family: var(--pw-mono); font-size: 0.74rem; color: var(--text);
    width: 16rem;
}
.ppl-w .pw-search input::placeholder { color: var(--pw-mute); }
.ppl-w .pw-search input:focus { outline: none; border-color: var(--pw-accent); }

.ppl-w .pw-hint {
    font-family: var(--pw-mono); font-size: 0.66rem;
    color: var(--pw-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 0.7rem; padding: 0;
}

/* ── Card / table ──────────────────────────────────────────────── */
.ppl-w .pw-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.4rem 0.5rem; overflow-x: auto;
}
.ppl-w .pw-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.ppl-w .pw-tbl thead th {
    text-align: left; padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-family: var(--pw-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--pw-mute);
    font-weight: 600; white-space: nowrap;
}
.ppl-w .pw-tbl tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.ppl-w .pw-tbl tbody tr:hover { background: rgba(74,158,255,0.06); }
.ppl-w .pw-tbl tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.25;
}
/* Accent left-stripe for rows that have a portal admin role (primary identity). */
.ppl-w .pw-tbl tbody tr.pw-primary {
    box-shadow: inset 4px 0 0 0 var(--pw-accent);
}

.ppl-w .pw-name { font-weight: 600; color: var(--text); }
.ppl-w .pw-sub  {
    font-family: var(--pw-mono); font-size: 0.7rem; color: var(--pw-mute);
    margin-top: 2px;
}
.ppl-w .pw-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    border: 1px solid var(--border); display: block;
}
.ppl-w .pw-avatar-fallback {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(74,158,255,0.12); color: var(--pw-accent);
    border: 1px solid rgba(74,158,255,0.3);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--pw-mono); font-size: 0.72rem; font-weight: 700;
}
.ppl-w .pw-email { font-family: var(--pw-mono); font-size: 0.78rem; color: var(--text); }
.ppl-w .pw-dept  { color: var(--text); }

/* Mono compact pills for source / role / status. */
.ppl-w .pw-tag {
    display: inline-block;
    font-family: var(--pw-mono); font-size: 0.64rem;
    text-transform: uppercase; letter-spacing: 0.14em;
    padding: 2px 7px; border-radius: 3px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--pw-mute);
    margin-right: 3px; line-height: 1.4;
    vertical-align: middle;
}
.ppl-w .pw-tag.on   { color: var(--pw-on);     border-color: rgba(34,197,94,0.4);   background: rgba(34,197,94,0.07); }
.ppl-w .pw-tag.off  { color: var(--pw-off);    border-color: rgba(239,68,68,0.4);   background: rgba(239,68,68,0.07); }
.ppl-w .pw-tag.info { color: var(--pw-info);   border-color: rgba(56,189,248,0.4);  background: rgba(56,189,248,0.07); }
.ppl-w .pw-tag.warn { color: var(--pw-warn);   border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.07); }
.ppl-w .pw-tag.muted { opacity: 0.55; }

.ppl-w .pw-actions { white-space: nowrap; }
.ppl-w .pw-actions .btn { margin-right: 3px; }

.ppl-w .pw-empty {
    text-align: center; padding: 1.6rem 1rem;
    color: var(--pw-mute);
    font-family: var(--pw-mono); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.16em;
}

/* Staggered row fade-in (capped at 8 rows) */
@keyframes pw-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.ppl-w .pw-tbl tbody tr { animation: pw-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards; }
.ppl-w .pw-tbl tbody tr:nth-child(1) { animation-delay: 0ms; }
.ppl-w .pw-tbl tbody tr:nth-child(2) { animation-delay: 50ms; }
.ppl-w .pw-tbl tbody tr:nth-child(3) { animation-delay: 100ms; }
.ppl-w .pw-tbl tbody tr:nth-child(4) { animation-delay: 150ms; }
.ppl-w .pw-tbl tbody tr:nth-child(5) { animation-delay: 200ms; }
.ppl-w .pw-tbl tbody tr:nth-child(6) { animation-delay: 250ms; }
.ppl-w .pw-tbl tbody tr:nth-child(7) { animation-delay: 300ms; }
.ppl-w .pw-tbl tbody tr:nth-child(8) { animation-delay: 350ms; }
.ppl-w .pw-tbl tbody tr:nth-child(n+9) { animation: none; }

@media (max-width: 520px) {
  .pp-three-col { grid-template-columns: 1fr !important; }
}

@media (max-width: 640px) {
  .pl-hide-mobile { display: none; }
}

/* Bundle DD — trust-tier pills. Match the marketplace look on /plugins. */
.psk-trust { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.7rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.psk-trust--internal     { background:rgba(34,197,94,0.15);  color:#22c55e; border:1px solid rgba(34,197,94,0.4); }
.psk-trust--verified     { background:rgba(59,130,246,0.15); color:#3b82f6; border:1px solid rgba(59,130,246,0.4); }
.psk-trust--experimental { background:rgba(245,158,11,0.15); color:#f59e0b; border:1px solid rgba(245,158,11,0.4); }

.pl-w {
    --pl-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --pl-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --pl-accent: var(--primary, #4a9eff);
    --pl-mute: var(--text-muted);
    font-family: var(--pl-sans);
    letter-spacing: -0.005em;
    animation: pl-fade-in 0.4s ease-out;
}
@keyframes pl-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.pl-w * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────── */
.pl-w .pl-header {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.pl-w .pl-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
    display: flex; align-items: center; gap: 0.5rem;
}
.pl-w .pl-badge {
    font-size: 0.65rem; font-weight: 600; padding: 2px 8px;
    border-radius: 8px; font-family: var(--pl-mono); text-transform: uppercase;
}
.pl-w .pl-badge.on { background: rgba(34,197,94,0.15); color: #22c55e; }
.pl-w .pl-badge.off { background: rgba(107,114,128,0.15); color: #6b7280; }
.pl-w .pl-hint {
    font-family: var(--pl-mono); font-size: 0.66rem;
    color: var(--pl-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1.5rem;
}

/* ── Section ────────────────────────────────────────────────────── */
.pl-w .pl-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
}
.pl-w .pl-section h3 {
    font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem;
}
.pl-w .pl-section p {
    font-size: 0.82rem; color: var(--pl-mute); margin-bottom: 1rem; line-height: 1.4;
}
.pl-w .pl-section small {
    font-size: 0.75rem; color: var(--pl-mute);
}
.pl-w .pl-section code {
    font-family: var(--pl-mono); font-size: 0.75rem;
    background: rgba(255,255,255,0.05); padding: 1px 4px; border-radius: 3px;
}

/* ── Grid & fields ─────────────────────────────────────────────── */
.pl-w .pl-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1rem; margin-bottom: 1rem;
}
@media (max-width: 700px) {
    .pl-w .pl-grid { grid-template-columns: 1fr; }
}
.pl-w .pl-field {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.pl-w .pl-field label {
    font-size: 0.8rem; font-weight: 500; color: var(--text);
}
.pl-w .pl-input {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--pl-mono); font-size: 0.74rem;
}
.pl-w .pl-input:focus { outline: none; border-color: var(--pl-accent); }
.pl-w .pl-textarea {
    padding: 0.5rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--pl-mono); font-size: 0.75rem; line-height: 1.4;
    resize: vertical;
}
.pl-w .pl-textarea:focus { outline: none; border-color: var(--pl-accent); }
.pl-w .pl-select {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--pl-sans); font-size: 0.82rem;
}
.pl-w .pl-select:focus { outline: none; border-color: var(--pl-accent); }

/* ── Checkbox grid ─────────────────────────────────────────────── */
.pl-w .pl-check-grid {
    display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.pl-w .pl-check {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.85rem; cursor: pointer;
}

/* ── Stat row ──────────────────────────────────────────────────── */
.pl-w .pl-stat-row {
    display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem;
}
.pl-w .pl-stat-badge {
    font-family: var(--pl-mono); font-size: 0.7rem; font-weight: 600;
    padding: 0.2rem 0.6rem; border-radius: 4px;
}
.pl-w .pl-stat-badge.ok { background: rgba(34,197,94,0.15); color: #22c55e; }
.pl-w .pl-stat-badge.warn { background: rgba(210,153,34,0.15); color: #d29922; }
.pl-w .pl-stat-badge.neutral { background: rgba(107,114,128,0.15); color: #6b7280; }

/* ── Code block ────────────────────────────────────────────────── */
.pl-w .pl-code {
    background: rgba(0,0,0,0.3); padding: 0.75rem 1rem; border-radius: 4px;
    font-family: var(--pl-mono); font-size: 0.72rem; line-height: 1.5;
    overflow-x: auto; margin-bottom: 1rem;
}

.plugin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}
.plugin-card-wrap { display:flex; }
.plugin-card-wrap > .skui-card { width:100%; }
.plugin-card-wrap.plugin-enabled > .skui-card {
    border-color: var(--success, #46a758);
    box-shadow: 0 0 0 1px var(--success, #46a758), 0 0 12px rgba(70,167,88,0.15);
}

/* Toggle switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    cursor: pointer;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-color);
    border-radius: 22px;
    transition: background 0.2s;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--success, #46a758);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* Filter buttons */
.plugin-filter-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
}
.plugin-filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.plugin-card-wrap.hidden { display: none; }

.pol-cmp-w { --pol-green: #46a758; --pol-yellow: #f5a623; --pol-red: #e74c3c; }
    .pol-cmp-w .badge {
        display:inline-block; padding:0.15rem 0.5rem; border-radius:3px; font-size:0.72rem;
        font-weight:600; font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.03em;
    }
    .pol-cmp-w .badge-password { background:#3498db; color:#fff; }
    .pol-cmp-w .badge-lockout { background:#e67e22; color:#fff; }
    .pol-cmp-w .badge-user_rights { background:#8e44ad; color:#fff; }
    .pol-cmp-w .badge-firewall { background:#e74c3c; color:#fff; }
    .pol-cmp-w .badge-audit { background:#2980b9; color:#fff; }
    .pol-cmp-w .badge-software_restriction { background:#c0392b; color:#fff; }
    .pol-cmp-w .badge-drive_mapping { background:#27ae60; color:#fff; }
    .pol-cmp-w .badge-startup_script { background:#7f8c8d; color:#fff; }
    .pol-cmp-w .pct-bar { flex:1; background:var(--border); border-radius:3px; height:8px; min-width:80px; overflow:hidden; }
    .pol-cmp-w .pct-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
    .pol-cmp-w .pct-label { font-family:'JetBrains Mono', monospace; font-size:0.85rem; font-weight:600; }

.peh-table { width:100%; border-collapse:collapse; font-size:0.8rem; font-family: ui-monospace, monospace; }
  .peh-table th, .peh-table td { text-align:left; padding:4px 6px; border-bottom:1px solid rgba(255,255,255,0.05); }
  .peh-table th { color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; }
  .peh-ours { color:#ef4444; font-weight:600; }
  .peh-foreign { color:var(--text-muted); }
  .peh-table pre { white-space:pre-wrap; word-break:break-all; margin:0; font-size:0.7rem; }

.pe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .pe-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; }
  .pe-card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .pe-card table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .pe-card th, .pe-card td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .pe-card th { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; }
  .pe-card td.num { text-align: right; }
  .pe-pill-ours { color: #ef4444; font-weight: 600; }
  .pe-pill-foreign { color: var(--text-muted); }
  .pe-card pre.args { font-family: ui-monospace, monospace; font-size: 0.7rem; white-space: pre-wrap; word-break: break-all; max-width: 400px; color: var(--text-muted); }

  .invite-box { width: 100%; max-width: 440px; }
  .invite-box h1 { font-size: 1.4rem; margin-bottom: 0.5rem; }
  .invite-box h1 span { color: var(--prt-accent); }
  .invite-sub { color: var(--prt-text-muted); font-size: 0.85rem; margin-bottom: 1.25rem; }
  .invite-box label { display: block; font-size: 0.82rem; margin-bottom: 0.3rem; color: var(--prt-text-muted); }
  .invite-box input[type=password] {
    width: 100%; padding: 0.6rem;
    background: var(--prt-bg-deep, #0d1117);
    border: 1px solid var(--prt-border, #30363d);
    border-radius: 6px; color: var(--prt-text, #e1e4e8);
    font-size: 0.92rem; margin-bottom: 0.9rem;
  }
  .invite-box input[type=password]:focus { border-color: var(--prt-accent); outline: none; }
  .invite-box .btn-primary { width: 100%; padding: 0.72rem; }
  .invite-error {
    padding: 0.6rem 0.8rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.85rem;
    background: #3d1a1a; border-left: 3px solid #f85149; color: #f85149;
  }
  .invite-back { display: block; text-align: center; margin-top: 1rem; color: var(--prt-accent); text-decoration: none; font-size: 0.85rem; }

.pab-table { width:100%; border-collapse:collapse; font-size:0.88rem; }
.pab-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                font-size:0.72rem; color:var(--text-muted);
                text-transform:uppercase; letter-spacing:0.04em; }
.pab-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                vertical-align:middle; }
.pab-table tr.ineligible td { opacity:0.55; }
.pab-row input[type=checkbox] { transform:scale(1.15); cursor:pointer; }
.pab-pill { display:inline-block; padding:1px 7px; border-radius:10px;
            font-size:0.68rem; font-weight:700; letter-spacing:0.03em; }
.pab-pill.has     { background:rgba(39,174,96,0.15);  color:#27ae60; }
.pab-pill.noemail { background:rgba(231,76,60,0.15);  color:#e74c3c; }

/* Animation for cards (kept page-local since dashboard is the only page using it). */
  @keyframes dashFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
  .portal-w .prt-card { animation: dashFadeIn 0.3s ease forwards; }

.prt-docv-w {
    --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }
  .prt-docv-w .doc-meta { font-size:0.78rem; color:#8b949e; display:flex;
    gap:1rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
  .prt-docv-w .badge { display:inline-block; padding:2px 8px; border-radius:8px;
    font-size:0.7rem; font-weight:600; background:#30363d; color:#8b949e;
    font-family:var(--prt-mono); text-transform:uppercase; letter-spacing:0.06em; }
  .prt-docv-w .card-h { font-size:0.75rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.06em; color:#8b949e; margin-bottom:0.75rem;
    font-family:var(--prt-mono); }

  .prt-docv-w .doc-content { font-size:0.9rem; line-height:1.7; color:#e1e4e8; word-break:break-word; }
  .prt-docv-w .doc-content h1,
  .prt-docv-w .doc-content h2,
  .prt-docv-w .doc-content h3 { margin:1rem 0 0.5rem; font-weight:600; }
  .prt-docv-w .doc-content p { margin-bottom:0.75rem; }
  .prt-docv-w .doc-content ul,
  .prt-docv-w .doc-content ol { padding-left:1.5rem; margin-bottom:0.75rem; }
  .prt-docv-w .doc-content li { margin-bottom:0.25rem; }
  .prt-docv-w .doc-content a { color:#58a6ff; }
  .prt-docv-w .doc-content strong { font-weight:600; }
  .prt-docv-w .doc-content em { font-style:italic; }
  .prt-docv-w .doc-content code { background:#0d1117; padding:2px 6px; border-radius:4px; font-family:monospace; font-size:0.85em; }
  .prt-docv-w .doc-content blockquote { border-left:3px solid #30363d; padding-left:1rem; color:#8b949e; margin:0.75rem 0; }
  .prt-docv-w .doc-content:empty::after { content:'No content.'; color:#8b949e; }

  .prt-docv-w .edit-form { display:none; }
  .prt-docv-w .edit-form.active { display:block; }
  .prt-docv-w .view-content.hidden { display:none; }
  .prt-docv-w input[type=text],
  .prt-docv-w textarea {
    width:100%; background:#0d1117; border:1px solid #30363d; border-radius:8px;
    padding:8px 12px; color:#e1e4e8; font-size:0.9rem; font-family:inherit;
    transition:border-color .15s;
  }
  .prt-docv-w input[type=text]:focus,
  .prt-docv-w textarea:focus { outline:none; border-color:#58a6ff; }
  .prt-docv-w textarea { resize:vertical; min-height:320px; line-height:1.6; }

.prt-doc-w {
    --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }
  .prt-doc-w .doc-row {
    background:#161b22; border:1px solid #30363d; border-radius:12px;
    padding:14px 18px; margin-bottom:10px; display:flex; align-items:center; gap:14px;
    cursor:pointer; transition:border-color .15s, transform .1s; text-decoration:none; color:inherit;
  }
  .prt-doc-w .doc-row:hover { border-color:var(--prt-accent, #58a6ff); transform:translateY(-1px); }
  .prt-doc-w .doc-icon { font-size:1.4rem; flex-shrink:0; }
  .prt-doc-w .doc-main { flex:1; min-width:0; }
  .prt-doc-w .doc-title { font-weight:600; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .prt-doc-w .doc-meta { font-size:0.75rem; color:#8b949e; margin-top:3px; }
  .prt-doc-w .doc-type {
    display:inline-block; padding:2px 8px; border-radius:8px; font-size:0.7rem;
    font-weight:600; background:#30363d; color:#8b949e; flex-shrink:0;
    font-family: var(--prt-mono); text-transform: uppercase; letter-spacing: 0.06em;
  }
  .prt-doc-w .doc-chevron { color:#8b949e; font-size:0.9rem; flex-shrink:0; }
  .prt-doc-up {
    background:#161b22; border:1px solid #30363d; border-radius:12px;
    padding:14px 18px; margin-bottom:18px;
  }
  .prt-doc-up h3 { margin:0 0 10px 0; font-size:1rem; }
  .prt-doc-up .form-row { margin-bottom:10px; display:flex; flex-direction:column; gap:4px; }
  .prt-doc-up .form-row label { font-size:0.8rem; color:#8b949e; }
  .prt-doc-up input[type=text], .prt-doc-up input[type=file] {
    background:#0d1117; border:1px solid #30363d; border-radius:6px;
    padding:8px 10px; color:#e6edf3; font-family:inherit; font-size:0.9rem;
  }
  .prt-doc-up .muted { color:#8b949e; font-size:0.8rem; }
  .prt-doc-w .doc-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
  .prt-doc-w .doc-dl {
    background:#21262d; color:#e6edf3; border:1px solid #30363d;
    padding:5px 12px; border-radius:8px; font-size:0.8rem; text-decoration:none;
  }
  .prt-doc-w .doc-dl:hover { border-color:var(--prt-accent, #58a6ff); }

/* Page-local print rules — keep the dashboard printable. */
  @media print {
    .portal-topbar, .portal-sidebar, .portal-breadcrumb, ._portal_footer,
    nav, header.pbcard ~ * .btn { display: none !important; }
    .pbcard { border-color: #ccc !important; background: white !important; box-shadow: none !important; }
    .prt-health-num { color: black !important; }
  }
  .pe-banner-dot {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  }
  .pe-banner-dot.green  { background: #3fb950; box-shadow: 0 0 14px rgba(63,185,80,0.55); }
  .pe-banner-dot.yellow { background: #d29922; box-shadow: 0 0 14px rgba(210,153,34,0.4); }
  .pe-banner-dot.red    { background: #f85149; box-shadow: 0 0 14px rgba(248,81,73,0.5); }
  .pe-bar-row { margin: 0.5rem 0; }
  .pe-bar-row .l { font-size: 0.85rem; margin-bottom: 0.25rem; display: flex; justify-content: space-between; color: var(--prt-text); }
  .pe-bar-row .bar { height: 6px; background: var(--prt-border, #21262d); border-radius: 3px; overflow: hidden; }
  .pe-bar-row .bar .fill { height: 100%; background: var(--prt-accent, #58a6ff); }
  .pe-row { display: flex; justify-content: space-between; padding: 0.5rem 0;
            border-bottom: 1px solid var(--prt-border-soft, #21262d); font-size: 0.9rem; }
  .pe-row:last-child { border-bottom: none; }

.inst-tab { cursor:pointer; }
  .inst-tab.active {
    background:var(--brand-primary,#58a6ff);
    color:#fff;
    border-color:var(--brand-primary,#58a6ff);
  }

.prt-inv-detail .totals-table { width:280px; margin-left:auto; margin-top:0.75rem; font-size:0.85rem; border-collapse:collapse; }
  .prt-inv-detail .totals-table td { padding:5px 8px; border-bottom:none; }
  .prt-inv-detail .totals-table .grand td { font-weight:700; font-size:1rem; border-top:1px solid #30363d; padding-top:10px; }
  .prt-inv-detail .text-right { text-align:right; }
  .prt-inv-detail .field-row { display:flex; gap:2rem; flex-wrap:wrap; }
  .prt-inv-detail .field { flex:1; min-width:140px; }
  .prt-inv-detail .field .lbl { font-size:0.72rem; text-transform:uppercase; color:var(--prt-text-muted); margin-bottom:4px; }
  .prt-inv-detail .field .val { font-size:0.9rem; }
  .prt-inv-detail .total-amount { font-size:2rem; font-weight:700; color:var(--prt-accent); font-family:var(--prt-mono); }
  .prt-inv-detail .total-label { font-size:0.75rem; color:var(--prt-text-muted); text-transform:uppercase; letter-spacing:0.06em; }
  .prt-inv-detail .notes { font-size:0.85rem; color:var(--prt-text-muted); white-space:pre-wrap; line-height:1.5; }

.prt-receipts .pr-pill { display:inline-block; padding:1px 8px; border-radius:10px;
             font-size:0.68rem; font-weight:700; letter-spacing:0.03em; }
  .prt-receipts .pr-pill.paid   { background:rgba(63,185,80,0.15);  color:#3fb950; }
  .prt-receipts .pr-pill.refund { background:rgba(231,76,60,0.15);  color:#e74c3c; }
  .prt-receipts .pr-pill.stripe { background:rgba(74,158,255,0.15); color:#58a6ff; }
  .prt-receipts .mono { font-family: var(--prt-mono); }
  .prt-receipts .pr-amount { font-family: var(--prt-mono); text-align:right; font-weight:600; }

.prt-inv-open .stat-val { font-size:1.6rem;font-weight:700;font-family:var(--prt-mono); }
  .prt-inv-open .stat-lbl { font-size:0.62rem;text-transform:uppercase;letter-spacing:0.12em;color:var(--prt-text-muted);margin-top:0.2rem;font-weight:600; }
  .prt-inv-open .pay-btn { display:inline-block;padding:0.3rem 0.85rem;background:var(--prt-accent);color:#fff;border:none;border-radius:6px;font-size:0.78rem;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.6; }
  .prt-inv-open .pay-btn:hover { opacity:0.85; }
  .prt-inv-open .overdue-row { background:rgba(248,81,73,0.06); }

.kb-article-body h1,.kb-article-body h2,.kb-article-body h3,
.kb-article-body h4,.kb-article-body h5,.kb-article-body h6 {
  margin:1.25rem 0 0.5rem;
  font-weight:600;
  line-height:1.3;
}
.kb-article-body h1 { font-size:1.45rem; }
.kb-article-body h2 { font-size:1.2rem; }
.kb-article-body h3 { font-size:1.05rem; }
.kb-article-body p  { margin:0.6rem 0; }
.kb-article-body ul,.kb-article-body ol { padding-left:1.4rem; margin:0.6rem 0; }
.kb-article-body li { margin:0.25rem 0; }
.kb-article-body code {
  background:var(--prt-bg-deep,#0d1117);
  border:1px solid var(--prt-border,#30363d);
  border-radius:4px;
  padding:0.1em 0.35em;
  font-size:0.88em;
  font-family:var(--prt-mono,monospace);
}
.kb-article-body pre {
  background:var(--prt-bg-deep,#0d1117);
  border:1px solid var(--prt-border,#30363d);
  border-radius:8px;
  padding:0.9rem 1rem;
  overflow-x:auto;
  margin:0.75rem 0;
}
.kb-article-body pre code {
  background:none;
  border:none;
  padding:0;
  font-size:0.87em;
  line-height:1.6;
}
.kb-article-body hr {
  border:none;
  border-top:1px solid var(--prt-border,#30363d);
  margin:1.25rem 0;
}
.kb-article-body a {
  color:var(--prt-accent,#58a6ff);
  text-decoration:underline;
}

/* Page-specific styles — preserved from legacy template, scoped under .prt-mach-w */
  .prt-mach-w {
    --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --prt-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --prt-on: #22c55e;
    --prt-off: #ef4444;
    --prt-warn: #f59e0b;
    --prt-accent: #58a6ff;
    --prt-mute: #8b949e;
    font-family: var(--prt-sans);
    letter-spacing: -0.005em;
  }
  .prt-mach-w .prt-title-row { display:flex; align-items:center; gap:12px; margin-bottom:1.25rem; }
  .prt-mach-w .prt-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
  .prt-mach-w .prt-dot.on { background:var(--prt-on); box-shadow:0 0 8px rgba(63,185,80,0.5); }
  .prt-mach-w .prt-dot.off { background:var(--prt-off); }
  .prt-mach-w .prt-hostname { color:var(--prt-mute); font-size:0.9rem; font-weight:400; margin-top:2px; }
  .prt-mach-w .prt-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
  .prt-mach-w .prt-card-h {
    font-family: var(--prt-mono); font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em;
    color:var(--prt-mute); margin-bottom: 0.75rem;
  }
  .prt-mach-w .prt-field { display:flex; justify-content:space-between; align-items:baseline;
    padding:6px 0; border-bottom:1px solid #21262d; font-size:0.85rem; }
  .prt-mach-w .prt-field:last-child { border-bottom:none; }
  .prt-mach-w .prt-field-lbl { color:var(--prt-mute); }
  .prt-mach-w .prt-field-val { color:#e1e4e8; font-weight:500; text-align:right; max-width:60%; word-break:break-all; }
  .prt-mach-w .prt-alert-row { padding:8px 0; border-bottom:1px solid #21262d; font-size:0.82rem; }
  .prt-mach-w .prt-alert-row:last-child { border-bottom:none; }
  .prt-mach-w .prt-sev { display:inline-block; padding:1px 7px; border-radius:8px; font-size:0.7rem; font-weight:600; margin-right:6px; font-family: var(--prt-mono); text-transform: uppercase; }
  .prt-mach-w .prt-sev-critical,.prt-mach-w .prt-sev-high { background:#5c1a1a; color:#f85149; }
  .prt-mach-w .prt-sev-warning,.prt-mach-w .prt-sev-medium { background:#3d3000; color:#d29922; }
  .prt-mach-w .prt-sev-info,.prt-mach-w .prt-sev-low { background:#0d2a44; color:#58a6ff; }
  .prt-mach-w .prt-no-data { color:var(--prt-mute); font-size:0.85rem; padding:8px 0; }
  .prt-mach-w .badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:0.72rem; font-weight:600; }
  .prt-mach-w .badge-success { background:#0d4429; color:#3fb950; }
  .prt-mach-w .badge-failed { background:#5c1a1a; color:#f85149; }
  .prt-mach-w .badge-running { background:#1a3a5c; color:#58a6ff; }

  /* file manager */
  .prt-mach-w .file-path-bar { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.75rem;
    background:#0d1117; border:1px solid #30363d; border-radius:8px; padding:6px 10px; font-size:0.8rem; }
  .prt-mach-w .file-path-bar span { color:#8b949e; }
  .prt-mach-w .file-path-bar code { color:#58a6ff; font-family:monospace; flex:1; word-break:break-all; }
  .prt-mach-w .file-quick-btns { display:flex; gap:0.4rem; flex-wrap:wrap; margin-bottom:0.75rem; }
  .prt-mach-w .file-quick-btns button { background:#21262d; border:1px solid #30363d; color:#e1e4e8;
    padding:3px 10px; border-radius:6px; font-size:0.78rem; cursor:pointer; }
  .prt-mach-w .file-quick-btns button:hover { background:#30363d; }
  .prt-mach-w .file-table { width:100%; border-collapse:collapse; font-size:0.83rem; }
  .prt-mach-w .file-table th { text-align:left; padding:4px 8px; color:#8b949e; font-size:0.72rem; border-bottom:1px solid #30363d; font-family: var(--prt-mono); text-transform: uppercase; letter-spacing: 0.06em; }
  .prt-mach-w .file-table td { padding:6px 8px; border-bottom:1px solid #21262d; }
  .prt-mach-w .file-table tr:last-child td { border-bottom:none; }
  .prt-mach-w .file-row-dir td:first-child { cursor:pointer; color:#58a6ff; }
  .prt-mach-w .file-row-dir:hover { background:#1c2128; }
  .prt-mach-w .file-row-file:hover { background:#1c2128; }
  .prt-mach-w #file-status-msg { font-size:0.8rem; color:#8b949e; margin-top:0.5rem; min-height:1.2em; }
  .prt-mach-w .file-back-btn { background:none; border:none; color:#58a6ff; cursor:pointer; font-size:0.82rem; padding:0;
    margin-right:0.5rem; }
  .prt-mach-w .file-back-btn:disabled { color:#8b949e; cursor:default; }

  @media(max-width:600px) { .prt-mach-w .prt-grid { grid-template-columns:1fr; } }

.prt-mesh-w {
    --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }
  .prt-mesh-w .chart-wrap { position:relative; height:160px; margin-bottom:0.5rem; }

  .prt-mesh-w .reporter-block { background:#0f1117; border:1px solid #30363d; border-radius:6px; margin-bottom:0.75rem; overflow:hidden; }
  .prt-mesh-w .reporter-header { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.9rem;
                     cursor:pointer; user-select:none; border-bottom:1px solid #30363d; }
  .prt-mesh-w .reporter-header:hover { background:rgba(255,255,255,0.03); }
  .prt-mesh-w .reporter-header .name { font-weight:600; font-size:0.88rem; flex:1; }
  .prt-mesh-w .reporter-header .stats { font-size:0.72rem; color:#8b949e; display:flex; gap:0.75rem; }
  .prt-mesh-w .reporter-header .arrow { color:#8b949e; font-size:0.7rem; transition:transform 0.2s; }
  .prt-mesh-w .reporter-body { padding:0.5rem 0.9rem 0.75rem; display:none; }
  .prt-mesh-w .reporter-body.open { display:block; }

  .prt-mesh-w .peer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.35rem; margin-top:0.4rem; }
  .prt-mesh-w .peer-item { display:flex; align-items:center; gap:0.4rem; padding:0.3rem 0.5rem; border-radius:4px; font-size:0.8rem; background:rgba(255,255,255,0.03); }
  .prt-mesh-w .dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  .prt-mesh-w .dot.green { background:#2ea043; }
  .prt-mesh-w .dot.red { background:#f85149; }
  .prt-mesh-w .dot.gray { background:#8b949e; }
  .prt-mesh-w .peer-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .prt-mesh-w .peer-lat { font-size:0.7rem; color:#8b949e; white-space:nowrap; }
  .prt-mesh-w .card-h { font-size:0.78rem; font-weight:600; text-transform:uppercase;
    letter-spacing:0.08em; color:#8b949e; margin-bottom:0.75rem;
    font-family:var(--prt-mono); }

.mfa-w { max-width: 720px; }
  .mfa-card { padding: 1.5rem; }
  .mfa-card + .mfa-card { margin-top: 1.25rem; }
  .mfa-card h2 { font-size: 1rem; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
  .mfa-card p  { color: var(--prt-mute); font-size: 0.88rem; margin: 0 0 1rem; }
  .qr-block { text-align: center; margin: 1rem 0;
              padding: 1rem; background: #fff; border-radius: 8px; }
  .qr-block img { max-width: 200px; height: auto; }
  .secret-block {
    background: var(--prt-bg-deep, #0d1117);
    border: 1px solid var(--prt-border, #30363d);
    border-radius: 6px; padding: 0.65rem 0.85rem;
    font-family: var(--prt-mono, monospace); font-size: 0.85rem;
    margin: 0.5rem 0 1rem; word-break: break-all; user-select: all;
  }
  .codes-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    margin: 0.75rem 0 1rem;
  }
  .codes-grid code {
    background: var(--prt-bg-deep, #0d1117);
    border: 1px solid var(--prt-border, #30363d);
    padding: 0.55rem 0.75rem; border-radius: 6px;
    font-size: 0.95rem; letter-spacing: 0.05em;
    text-align: center;
  }
  .pill {
    display: inline-block; padding: 0.18rem 0.5rem;
    font-size: 0.72rem; border-radius: 999px;
    background: rgba(35, 197, 94, 0.12); color: #23c55e;
    margin-left: 0.5rem; vertical-align: middle;
  }
  .pill-off {
    background: rgba(248, 81, 73, 0.12); color: #f85149;
  }
  .form-row { display: flex; gap: 0.6rem; align-items: end; flex-wrap: wrap; }
  .form-row label { display: block; font-size: 0.75rem; color: var(--prt-mute);
                    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
  .form-row input {
    padding: 0.55rem 0.75rem;
    background: var(--prt-bg-deep, #0d1117);
    border: 1px solid var(--prt-border, #30363d);
    border-radius: 6px; color: var(--prt-text);
    font-family: var(--prt-mono, monospace);
  }
  .important {
    padding: 0.75rem 0.85rem; border-radius: 8px;
    background: rgba(245, 159, 0, 0.10);
    border-left: 3px solid #f59f00;
    color: var(--prt-text); font-size: 0.85rem;
    margin-bottom: 1rem;
  }

.prt-net-w {
    --brand: #58a6ff;
  }

  /* layout */
  .prt-net-w h2 { font-size:1.2rem; font-weight:600; margin-bottom:1rem; }

  /* summary row */
  .prt-net-w .summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.75rem; margin-bottom:1.5rem; }
  .prt-net-w .sum-card { background:#161b22; border:1px solid #30363d; border-radius:10px;
              padding:.9rem .75rem; text-align:center; }
  .prt-net-w .sum-val { font-size:1.7rem; font-weight:700; letter-spacing:-.02em; }
  .prt-net-w .sum-lbl { font-size:.72rem; color:#8b949e; text-transform:uppercase; letter-spacing:.04em; margin-top:.2rem; }
  .prt-net-w .green { color:#34c759; }
  .prt-net-w .amber { color:#ff9f0a; }
  .prt-net-w .red { color:#ff3b30; }
  .prt-net-w .blue { color:var(--brand); }

  /* card titles */
  .prt-net-w .card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.9rem; }
  .prt-net-w .card-title { font-size:.78rem; color:#8b949e; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
  .prt-net-w .card-count { font-size:.78rem; color:#8b949e; }

  /* tables */
  .prt-net-w table { width:100%; border-collapse:collapse; font-size:.84rem; }
  .prt-net-w th { text-align:left; padding:7px 8px; border-bottom:1px solid #30363d;
       color:#8b949e; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
  .prt-net-w td { padding:9px 8px; border-bottom:1px solid #21262d; vertical-align:middle; }
  .prt-net-w tr:last-child td { border-bottom:none; }
  .prt-net-w tr:hover td { background:rgba(255,255,255,.02); }
  .prt-net-w .mono { font-family:'SF Mono',SFMono-Regular,Consolas,'Courier New',monospace; font-size:.8rem; color:var(--brand); }
  .prt-net-w .muted { color:#8b949e; font-size:.78rem; }

  /* badges */
  .prt-net-w .badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.7rem; font-weight:700; }
  .prt-net-w .badge-online  { background:#0d4429; color:#3fb950; }
  .prt-net-w .badge-offline { background:#2d1a1a; color:#f85149; }
  .prt-net-w .badge-cloud   { background:#1a2d4a; color:#58a6ff; }
  .prt-net-w .badge-local   { background:#1a3020; color:#3fb950; }
  .prt-net-w .badge-enabled { background:#0d4429; color:#3fb950; }
  .prt-net-w .badge-disabled{ background:#30363d; color:#8b949e; }
  .prt-net-w .badge-wpa2    { background:#2a2020; color:#f0ad4e; }
  .prt-net-w .badge-wpa3    { background:#0d3a29; color:#34c759; }
  .prt-net-w .badge-open    { background:#3d1a1a; color:#f85149; }

  /* status dot */
  .prt-net-w .dot { width:8px; height:8px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:5px; }
  .prt-net-w .dot-green { background:#34c759; box-shadow:0 0 5px rgba(52,199,89,.4); }
  .prt-net-w .dot-red   { background:#ff3b30; }
  .prt-net-w .dot-gray  { background:#444; }

  /* controller cards */
  .prt-net-w .ctrl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin-bottom:1.5rem; }
  .prt-net-w .ctrl-card { background:#161b22; border:1px solid #30363d; border-radius:12px; padding:1.1rem; }
  .prt-net-w .ctrl-name { font-size:1rem; font-weight:600; margin-bottom:.35rem; }
  .prt-net-w .ctrl-meta { font-size:.78rem; color:#8b949e; display:flex; gap:.75rem; flex-wrap:wrap; }
  .prt-net-w .ctrl-stats { display:flex; gap:1.25rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid #21262d; }
  .prt-net-w .ctrl-stat { text-align:center; }
  .prt-net-w .ctrl-stat .val { font-size:1.1rem; font-weight:700; }
  .prt-net-w .ctrl-stat .lbl { font-size:.68rem; color:#8b949e; }

  /* tabs */
  .prt-net-w .tab-bar { display:flex; gap:.35rem; margin-bottom:1rem; border-bottom:1px solid #30363d; flex-wrap:wrap; }
  .prt-net-w .tab-btn { padding:8px 14px; font-size:.85rem; color:#8b949e; border:none; background:none;
             cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:all .2s; }
  .prt-net-w .tab-btn.active, .prt-net-w .tab-btn:hover { color:var(--brand); border-bottom-color:var(--brand); }
  .prt-net-w .tab-panel { display:none; }
  .prt-net-w .tab-panel.active { display:block; }

  /* search */
  .prt-net-w .search-row { display:flex; gap:.75rem; margin-bottom:.9rem; }
  .prt-net-w .search-row input { flex:1; background:#21262d; border:1px solid #30363d; border-radius:8px;
                      color:#e1e4e8; padding:7px 12px; font-size:.85rem; outline:none; }
  .prt-net-w .search-row input:focus { border-color:var(--brand); }

  /* signal bars */
  .prt-net-w .sig { display:inline-flex; align-items:flex-end; gap:2px; }
  .prt-net-w .sig-bar { display:inline-block; width:4px; border-radius:1px; }

  /* empty */
  .prt-net-w .empty { color:#8b949e; font-size:.85rem; padding:1.5rem 0; text-align:center; }

  @media (max-width:768px) {
    .prt-net-w .ctrl-grid { grid-template-columns:1fr; }
    .prt-net-w table { font-size:.75rem; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .prt-net-w th, .prt-net-w td { padding:5px 6px; white-space:nowrap; }
  }

.prt-pm .pm-row { display:flex; align-items:center; gap:14px; padding:0.85rem 0;
    border-bottom:1px solid #21262d; }
  .prt-pm .pm-row:last-child { border-bottom:none; }
  .prt-pm .pm-icon { font-size:1.6rem; flex-shrink:0; }
  .prt-pm .pm-info { flex:1; min-width:0; }
  .prt-pm .pm-info .brand { font-weight:600; font-size:0.9rem; text-transform:capitalize; }
  .prt-pm .pm-info .sub { color:var(--prt-text-muted); font-size:0.8rem; margin-top:2px; }
  .prt-pm .pm-actions { display:flex; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
  .prt-pm .pm-btn { display:inline-block; padding:5px 12px; border-radius:8px; font-size:0.78rem;
    font-weight:500; cursor:pointer; border:none; text-decoration:none; transition:all 0.15s; }
  .prt-pm .pm-btn-default { background:#1a3a5c; color:#58a6ff; }
  .prt-pm .pm-btn-default:hover { background:#1d4573; }
  .prt-pm .pm-btn-danger { background:#3d1414; color:#f85149; }
  .prt-pm .pm-btn-danger:hover { background:#5c1a1a; }
  .prt-pm .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
  .prt-pm .form-group { display:flex; flex-direction:column; gap:4px; }
  .prt-pm .form-group.full { grid-column:1/-1; }
  .prt-pm label { font-size:0.78rem; color:var(--prt-text-muted); }
  .prt-pm input, .prt-pm select { background:#0f1117; border:1px solid #30363d; border-radius:8px;
    color:#e1e4e8; padding:8px 10px; font-size:0.85rem; width:100%; font-family:inherit; }
  .prt-pm input:focus, .prt-pm select:focus { outline:none; border-color:#58a6ff; }
  .prt-pm .btn-submit { background:#238636; color:#fff; border:none; border-radius:8px;
    padding:9px 18px; font-size:0.85rem; font-weight:600; cursor:pointer; margin-top:0.75rem; }
  .prt-pm .btn-submit:hover { background:#2ea043; }

.req-cat-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:0.7rem; margin-bottom:0.5rem; }
  @media (min-width:600px) { .req-cat-grid { grid-template-columns:repeat(3, 1fr); } }
  .req-cat-btn {
    background: var(--prt-bg-deep, #0d1117);
    border: 1px solid var(--prt-border, #30363d);
    border-radius: 12px;
    padding: 1rem 0.9rem;
    cursor: pointer;
    color: var(--prt-text, #e1e4e8);
    text-align: left;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
  }
  .req-cat-btn:hover, .req-cat-btn.on {
    border-color: var(--prt-accent);
    transform: translateY(-2px);
  }
  .req-cat-btn.on { background: rgba(88,166,255,0.12); }
  .req-label {
    font-size: 0.78rem;
    color: var(--prt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.45rem;
    margin-top: 1rem;
  }
  .req-input, .req-textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    background: var(--prt-bg-deep, #0d1117);
    border: 1px solid var(--prt-border, #30363d);
    color: var(--prt-text, #e1e4e8);
    font-size: 0.95rem;
    font-family: inherit;
  }
  .req-textarea { min-height: 120px; resize: vertical; }

:root { --mono: 'JetBrains Mono', ui-monospace, monospace; --sans: 'Inter', system-ui, sans-serif; }
  [data-variant="blueblack"] {
    --bg: #070b14; --surface: #0e1321; --surface-2: #161d30;
    --fg: #eef1f8; --fg-2: #94a0bd; --fg-3: #596082;
    --border: #1d2540;
  }
  [data-variant] {
    --ok: oklch(72% 0.14 155); --warn: oklch(78% 0.15 70);
    --crit: oklch(68% 0.20 25); --info: oklch(72% 0.13 230);
    --mute: oklch(55% 0.01 260);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
    --shadow-xl: 0 30px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
  }
  [data-accent="cyan"] { --accent: oklch(72% 0.15 220); }
  #root { height: 100vh; }
  input, button, select, textarea { font-family: inherit; color: inherit; }
  input::placeholder, textarea::placeholder { color: var(--fg-3); }
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid var(--bg); }
  .sk-scroll-x { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sk-scroll-x > * { min-width: 720px; }
  @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
  @media (max-width: 720px) {
    button, [role="button"] { min-height: 36px; }
    .sk-modal-shell { width: 100vw !important; max-width: 100vw !important; height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; border: none !important; margin: 0 !important; }
    .sk-modal-backdrop { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
    .sk-stack-mobile { grid-template-columns: 1fr !important; }
    .sk-card { max-width: 100%; }
    .sk-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sk-card-body > div[style*="grid-template-columns"][style*="1fr 1fr 1fr"] { min-width: 640px; }
    .sk-card-body > div[style*="grid-template-columns"][style*="0.8fr"],
    .sk-card-body > div[style*="grid-template-columns"][style*="0.9fr"],
    .sk-card-body > div[style*="grid-template-columns"][style*="1.4fr"],
    .sk-card-body > div[style*="grid-template-columns"][style*="1.8fr"],
    .sk-card-body > div[style*="grid-template-columns"][style*="2.2fr"],
    .sk-card-body > div[style*="grid-template-columns"][style*="3fr"] { min-width: 640px; }
  }
  @media (max-width: 480px) { .sk-scroll-x > * { min-width: 560px; } }

.prt-status-w {
    --prt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  }
  .prt-status-w .signal { display:flex; align-items:center; gap:14px; padding:14px 16px;
    border-bottom:1px solid #21262d; }
  .prt-status-w .signal:last-child { border-bottom:none; }
  .prt-status-w .signal .label { flex:1; font-weight:600; }
  .prt-status-w .dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
  .prt-status-w .dot.good { background:#3fb950; box-shadow:0 0 8px rgba(63,185,80,0.5); }
  .prt-status-w .dot.warn { background:#d29922; }
  .prt-status-w .dot.bad  { background:#f85149; }
  .prt-status-w .alert-row { padding:10px 14px; border-bottom:1px solid #21262d; font-size:0.88rem; }
  .prt-status-w .alert-row:last-child { border-bottom:none; }
  .prt-status-w .alert-row .sev { font-family:var(--prt-mono); font-size:0.68rem;
    text-transform:uppercase; color:#8b949e; margin-right:8px; letter-spacing:0.06em; }
  .prt-status-w .alert-row .host { color:#8b949e; font-size:0.75rem; margin-top:4px; }

.pv2-doc-body { padding:1.25rem 1.5rem; line-height:1.55; }
  .pv2-doc-body h1, .pv2-doc-body h2, .pv2-doc-body h3 { margin-top:1.4em; margin-bottom:0.5em; }
  .pv2-doc-body h1 { font-size:1.45rem; }
  .pv2-doc-body h2 { font-size:1.18rem; }
  .pv2-doc-body h3 { font-size:1.02rem; }
  .pv2-doc-body p, .pv2-doc-body ul, .pv2-doc-body ol { margin:0.6em 0; }
  .pv2-doc-body code { background:rgba(127,127,127,0.12); padding:0.1em 0.35em; border-radius:3px; font-size:0.9em; }
  .pv2-doc-body pre { background:rgba(127,127,127,0.08); padding:0.8em 1em; border-radius:5px; overflow-x:auto; }
  .pv2-doc-body pre code { background:none; padding:0; }
  .pv2-doc-body a { color:var(--pv2-link, #2563eb); }
  .pv2-doc-body hr { border:none; border-top:1px solid var(--pv2-border, #e5e7eb); margin:1.4em 0; }

.pv2-docs-search { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
  .pv2-docs-search .pv2-input { min-width: 14rem; }
  @media (max-width: 640px) {
    .pv2-docs-search { width: 100%; }
    .pv2-docs-search .pv2-input { flex: 1; min-width: 0; }
    .pv2-doc-action-cell { display: none; }
  }

@media (max-width: 640px) {
    .pv2-inv-action-cell { display: none; }
  }

.printer-detail-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; margin-bottom:1.25rem; }
.printer-panel { background:var(--surface,var(--bg-card)); border:1px solid var(--border); border-radius:8px; padding:1rem; }
.printer-panel h3 { margin:0 0 0.75rem; font-size:0.98rem; font-weight:600; }
.printer-table { width:100%; border-collapse:collapse; font-size:0.9rem; }
.printer-table td { padding:0.45rem 0; border-bottom:1px solid var(--border); vertical-align:top; }
.printer-table tr:last-child td { border-bottom:none; }
.printer-table td:first-child { color:var(--text-muted); width:42%; }
.printer-action-row { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; margin-bottom:1.25rem; }
.printer-jobs-wrap { overflow-x:auto; }
.printer-jobs-wrap table { min-width:860px; width:100%; }
@media (max-width: 1000px) { .printer-detail-grid { grid-template-columns:1fr; } }

.clickable-row:hover { background: var(--bg-hover, rgba(255,255,255,0.05)); }
#job-modal-overlay { display: none; }
#job-modal-overlay[data-open="true"] { display: flex; }
.job-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.job-detail-grid dt { color: var(--text-muted); font-size: 0.85em; margin: 0; }
.job-detail-grid dd { margin: 0 0 0.5rem 0; font-weight: 500; }
.job-capture-preview { margin-top: 1rem; border: 1px solid var(--border,#333); border-radius: 8px; overflow: hidden; }
.job-capture-preview img { max-width: 100%; display: block; }
.job-capture-actions { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.85rem; }
.job-capture-status { margin-top:1rem; padding:0.75rem; background:rgba(255,255,255,0.04); border:1px solid var(--border,#333); border-radius:6px; font-size:0.85em; }

.prn-page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); }
.prn-title { margin:0; }
.prn-subtle { color:var(--text-muted); font-size:var(--text-sm); margin:0.2rem 0 0; }
.prn-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.prn-banner { background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:var(--radius-sm); padding:var(--space-2) 0.9rem; margin-bottom:1.25rem; font-size:var(--text-sm); color:var(--text-muted); }
.prn-banner strong { color:var(--text); }
.prn-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:0.75rem; margin-bottom:var(--space-5); }
.prn-stat-card { text-align:center; padding:0.75rem; }
.prn-stat-num { font-size:var(--text-2xl); font-weight:var(--weight-bold); }
.prn-stat-num--accent { color:var(--accent); }
.prn-stat-num--ok { color:var(--success); }
.prn-stat-label { font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.prn-filters { margin-bottom:1rem; display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; }
.prn-filter-input { flex:1; min-width:220px; padding:0.45rem 0.75rem; background:var(--surface-input); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); box-sizing:border-box; }
.prn-filter-select { padding:0.4rem 0.6rem; background:var(--surface-input); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:var(--text-sm); max-width:200px; }
.prn-filter-count { font-size:var(--text-xs); color:var(--text-muted); width:100%; }
.printer-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; }
.printer-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.printer-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.prn-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2); }
.prn-card-head .name-col { min-width:0; }
.prn-card-name { font-weight:var(--weight-semibold); font-size:var(--text-base); color:var(--accent); text-decoration:none; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prn-card-make { font-size:var(--text-sm); color:var(--text-muted); margin-top:0.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prn-card-status-col { display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem; flex-shrink:0; }
.prn-pill { display:inline-flex; align-items:center; gap:0.25rem; border-radius:999px; padding:2px 9px; font-size:0.7rem; font-weight:var(--weight-semibold); border:1px solid var(--border); }
.prn-pill--online { background:var(--success-soft); color:var(--success); border-color:color-mix(in srgb, var(--success) 30%, transparent); }
.prn-pill--offline { background:var(--danger-soft); color:var(--danger); border-color:color-mix(in srgb, var(--danger) 25%, transparent); }
.prn-pill--unknown { background:var(--surface-input); color:var(--text-muted); }
.prn-conn-row { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; }
.prn-tag { border-radius:var(--radius-sm); padding:2px 8px; font-size:0.7rem; font-weight:var(--weight-semibold); border:1px solid var(--border); }
.prn-tag--net { background:var(--accent-soft); color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.prn-tag--local { background:color-mix(in srgb, var(--text-muted) 12%, transparent); color:var(--text-muted); }
.prn-tag--mute { background:color-mix(in srgb, var(--text-muted) 10%, transparent); color:var(--text-muted); border:none; padding:2px 7px; font-size:0.68rem; }
.prn-ip { font-size:var(--text-sm); color:var(--text-muted); }
.prn-via { font-size:0.75rem; color:var(--text-muted); }
.prn-stats-row { display:flex; gap:1.5rem; }
.prn-stat-mini { text-align:center; }
.prn-stat-mini-val { font-weight:var(--weight-bold); font-size:1rem; }
.prn-stat-mini-lbl { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; }
.prn-card-footer { display:flex; align-items:center; gap:var(--space-2); margin-top:auto; border-top:1px solid var(--border); padding-top:0.6rem; }
.prn-loc-form { flex:1; display:flex; align-items:center; gap:0.35rem; }
.prn-loc-label { font-size:var(--text-xs); color:var(--text-muted); white-space:nowrap; }
.prn-loc-select { flex:1; font-size:var(--text-sm); padding:0.2rem 0.35rem; background:var(--surface-input); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-lg); }
.prn-rm-btn { padding:3px 10px; font-size:var(--text-xs); }
.prn-empty { text-align:center; padding:3rem 2rem; }
.prn-empty-icon { font-size:2.5rem; margin-bottom:0.75rem; }
.prn-empty-msg { color:var(--text-muted); margin:0; }
.prn-empty-sub { color:var(--text-muted); font-size:var(--text-sm); margin:0.5rem 0 0; }
.prn-italic { font-style:italic; }

.detail-grid { display:grid; grid-template-columns:2fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.detail-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1rem; }
.detail-card h3 { font-size:0.95rem; margin-bottom:0.75rem; color:var(--primary); }
.field-group { margin-bottom:0.75rem; }
.field-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.field-value { font-size:0.9rem; margin-top:0.15rem; white-space:pre-wrap; }
.action-bar { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; }
.linked-item { display:inline-block; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); padding:0.3rem 0.6rem; font-size:0.8rem; margin:0.2rem; }
.badge-open { background:rgba(231,76,60,0.15); color:#e74c3c; }
.badge-investigating { background:rgba(241,196,15,0.15); color:#f1c40f; }
.badge-root_cause_found { background:rgba(52,152,219,0.15); color:#3498db; }
.badge-fix_in_progress { background:rgba(155,89,182,0.15); color:#9b59b6; }
.badge-resolved { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-closed { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.ke-badge { background:rgba(230,126,34,0.15); color:#e67e22; padding:0.2rem 0.6rem; border-radius:4px; font-size:0.78rem; font-weight:600; }

.stat-cards { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.8rem 1.2rem; text-align:center; min-width:120px; }
.stat-card .num { font-size:1.4rem; font-weight:700; }
.stat-card .label { font-size:0.75rem; color:var(--text-muted); }
.filter-bar { display:flex; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; align-items:center; }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; }
.badge-open { background:rgba(231,76,60,0.15); color:#e74c3c; }
.badge-investigating { background:rgba(241,196,15,0.15); color:#f1c40f; }
.badge-root_cause_found { background:rgba(52,152,219,0.15); color:#3498db; }
.badge-fix_in_progress { background:rgba(155,89,182,0.15); color:#9b59b6; }
.badge-resolved { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-closed { background:rgba(139,143,163,0.15); color:#8b8fa3; }
.ke-badge { background:rgba(230,126,34,0.15); color:#e67e22; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.72rem; font-weight:600; }

.pr-head { display:flex; align-items:center; justify-content:space-between; gap:0.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.pr-summary { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.pr-pill { display:inline-flex; align-items:center; gap:0.35rem; padding:0.22rem 0.6rem; border-radius:999px; font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; }
.pr-pill.ok { background:rgba(39,174,96,0.14); color:#27ae60; }
.pr-pill.warn { background:rgba(240,173,78,0.15); color:#f0ad4e; }
.pr-pill.fail { background:rgba(231,76,60,0.15); color:#e74c3c; }
.pr-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:0.85rem; }
.pr-card { border:1px solid var(--border); border-radius:8px; background:var(--bg-card); overflow:hidden; }
.pr-card-head { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.75rem 0.9rem; border-bottom:1px solid var(--border); }
.pr-card-title { font-weight:700; }
.pr-check { display:grid; grid-template-columns:1fr auto; gap:0.6rem; padding:0.62rem 0.9rem; border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.pr-check:first-child { border-top:none; }
.pr-label { font-size:0.86rem; }
.pr-evidence { font-size:0.74rem; color:var(--text-muted); margin-top:0.15rem; overflow-wrap:anywhere; }
.pr-actions { display:flex; gap:0.5rem; align-items:center; }

.pa-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
              gap:0.75rem; margin-bottom:1rem; }
.pa-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px;
           padding:0.75rem; text-align:center; }
.pa-card .val { font-size:1.55rem; font-weight:700; }
.pa-card .lbl { font-size:0.72rem; color:var(--text-muted);
                text-transform:uppercase; letter-spacing:0.03em; }
.pa-card.active   .val { color:#27ae60; }
.pa-card.disabled .val { color:#8b949e; }

.pa-table { width:100%; border-collapse:collapse; font-size:0.85rem; margin-top:0.5rem; }
.pa-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted);
               text-transform:uppercase; letter-spacing:0.04em; }
.pa-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.pa-table tr.disabled td { opacity:0.55; }
.pa-table tr.disabled td:first-child { border-left:3px solid var(--border); }
.pa-table tr:not(.disabled) td:first-child { border-left:3px solid #27ae60; }
.pa-table .mono { font-family:var(--font-mono, monospace); }
.pa-table .money { text-align:right; font-family:var(--font-mono, monospace); }

.pa-pill { display:inline-block; padding:1px 7px; border-radius:10px;
           font-size:0.68rem; font-weight:700; letter-spacing:0.03em; }
.pa-pill.syncro   { background:rgba(74,158,255,0.15); color:#4a9eff; }
.pa-pill.stock    { background:rgba(39,174,96,0.15);  color:#27ae60; }
.pa-pill.disabled { background:rgba(140,140,140,0.15); color:#888; }
.pa-pill.taxable  { background:rgba(240,173,78,0.15); color:#f0ad4e; }

.pb-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
  .pb-tab { width: 100%; border-collapse: collapse; font-size: .82rem; }
  .pb-tab th, .pb-tab td { padding: 6px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: left; }
  .pb-tab th { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
  .pb-tab td.num { text-align: right; font-family: ui-monospace, monospace; }
  .pb-qty-input { width: 70px; padding: 2px 6px; background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 3px; font-family: ui-monospace, monospace; font-size: .8rem; }
  .pb-img { width: 36px; height: 36px; object-fit: contain; background: white; border-radius: 4px; }

/* ── Billable Project Time Picker (scoped under .pbtp) ──────────────────── */
.pbtp {
    --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--sans);
    color: var(--text);
    letter-spacing: -0.005em;
}
.pbtp .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}
.pbtp h2 {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}
.pbtp .summary-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.pbtp .tile {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.pbtp .tile .tile-label {
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.pbtp .tile .tile-value {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
}
.pbtp .filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.pbtp .filter-bar label {
    display: block;
    font-family: var(--mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.pbtp .filter-bar select,
.pbtp .filter-bar input[type="date"] {
    font-family: var(--mono);
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--bg);
    color: var(--text);
    min-width: 9rem;
}
.pbtp .bulk-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: center;
}
.pbtp .bulk-bar .bulk-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
    margin-right: 0.25rem;
}
.pbtp .project-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.pbtp .project-card .card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.pbtp .project-card .card-head .pname {
    font-weight: 600;
    font-size: 0.92rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pbtp .project-card .card-head .ptotals {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.pbtp .entry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.pbtp .entry-table th {
    font-family: var(--mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 0.45rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.pbtp .entry-table td {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.pbtp .entry-table tr:last-child td {
    border-bottom: none;
}
.pbtp .entry-table tr:hover td {
    background: color-mix(in srgb, var(--primary, #4a9eff) 5%, transparent);
}
.pbtp .mono { font-family: var(--mono); }
.pbtp .action-bar {
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    border-top: 2px solid var(--border);
    padding: 0.85rem 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 1.5rem;
}
.pbtp .action-bar .sel-count {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-right: auto;
}
.pbtp .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 0.85rem;
}
@media (max-width: 600px) {
    .pbtp .summary-tiles { grid-template-columns: 1fr; }
}

.pj-tl {
    --tl-bg: var(--bg-elevated, #1e1e2e);
    --tl-border: var(--border, #333);
    --tl-text: var(--text, #e2e8f0);
    --tl-muted: var(--text-muted, #94a3b8);
    --tl-accent: var(--accent, #4a9eff);
    --tl-row-h: 2.4rem;
    --tl-label-w: 220px;
    font-family: var(--font-sans, system-ui, sans-serif);
    max-width: 1400px;
}

/* status bar colours */
.tl-bar-done      { background: #22c55e; }
.tl-bar-in_progress { background: #3b82f6; }
.tl-bar-pending   { background: #64748b; }
.tl-bar-cancelled { background: #475569; }
.tl-bar-blocked   { background: #ef4444; }

.tl-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.tl-grid {
    border: 1px solid var(--tl-border);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.82rem;
}

/* ── axis row ── */
.tl-axis {
    display: grid;
    grid-template-columns: var(--tl-label-w) 1fr;
    background: var(--bg, #16161d);
    border-bottom: 1px solid var(--tl-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.tl-axis-label {
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
    color: var(--tl-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-right: 1px solid var(--tl-border);
}

.tl-axis-dates {
    position: relative;
    height: 2rem;
    overflow: hidden;
}

.tl-axis-tick {
    position: absolute;
    top: 0;
    height: 100%;
    border-left: 1px solid var(--tl-border);
    padding-left: 3px;
    font-size: 0.68rem;
    color: var(--tl-muted);
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ── task rows ── */
.tl-row {
    display: grid;
    grid-template-columns: var(--tl-label-w) 1fr;
    border-bottom: 1px solid var(--tl-border);
    min-height: var(--tl-row-h);
}
.tl-row:last-child { border-bottom: none; }
.tl-row:hover { background: rgba(255,255,255,0.02); }

.tl-row-label {
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-right: 1px solid var(--tl-border);
    overflow: hidden;
}

.tl-task-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--tl-text);
    text-decoration: none;
}
.tl-task-title:hover { color: var(--tl-accent); }

.tl-row-chart {
    position: relative;
    overflow: hidden;
    min-height: var(--tl-row-h);
}

.tl-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 1.3rem;
    border-radius: 3px;
    display: flex;
    align-items: center;
    padding: 0 0.35rem;
    font-size: 0.7rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity 0.1s;
}
.tl-bar:hover { opacity: 1; }

/* Today marker */
.tl-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed #ef4444;
    pointer-events: none;
    z-index: 5;
}

/* Column grid lines */
.tl-col-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid rgba(255,255,255,0.04);
    pointer-events: none;
}

/* No-tasks placeholder */
.tl-empty {
    padding: 2rem;
    text-align: center;
    color: var(--tl-muted);
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .pj-tl { --tl-label-w: 130px; }
    .tl-axis-tick { font-size: 0.6rem; }
}

.pj-w {
    --pj-mono: var(--font-mono, ui-monospace,SFMono-Regular,Menlo,monospace);
    --pj-sans: var(--font-sans, system-ui, sans-serif);
    --pj-card-bg: var(--bg-elevated);
    --pj-card-border: var(--border);
    font-family: var(--pj-sans);
    /* Cap width so cards/tables don't stretch edge-to-edge on wide
       monitors — improves readability of long descriptions and
       multi-column grids. */
    max-width: 1280px;
    margin: 0 auto;
}
.pj-w .pj-card,
.pj-w > .card {
    background: var(--pj-card-bg);
    border: 1px solid var(--pj-card-border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.15s ease;
}
.pj-w > .card:hover { border-color: color-mix(in srgb, var(--accent,#58a6ff) 25%, var(--pj-card-border)); }
.pj-w h3 { font-family: var(--pj-mono); letter-spacing:-0.005em; }
.pj-w .pj-tabs {
    display: flex; gap: 2px; align-items: stretch; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin: 0.6rem 0 1rem; position: sticky; top: 0; z-index: 5;
    background: var(--bg, #0c0e15);
}
.pj-w .pj-tab {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted);
    font-family: var(--pj-mono);
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    font-weight: 600;
    padding: 0.55rem 0.95rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; text-decoration: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pj-w .pj-tab:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.pj-w .pj-tab.active {
    color: var(--text); border-bottom-color: var(--accent,#58a6ff);
}
.pj-w .pj-meta-pills {
    display:flex; gap:0.35rem; flex-wrap:wrap; align-items:center;
}
.pj-w .pj-pill {
    font-family: var(--pj-mono); font-size: 0.7rem;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.3rem; align-items: center; line-height: 1.1;
}
@media (max-width: 720px) {
    .pj-w .pj-tabs { gap: 0; }
    .pj-w .pj-tab { padding: 0.5rem 0.6rem; font-size: 0.66rem; }
}
/* ── Mobile structural rework (≤640px) ──
 * Collapses dense entry / edit / parts / billing forms that use
 * inline grid templates the global 7.07.92 rescue layer can't
 * catch (3+ columns, mixed `auto` columns, fixed-width sidebars).
 * Desktop unaffected. */
@media (max-width: 640px) {
    /* Anchored tab bar — keep horizontal scroll (style.css covers
       .tab-bar; mirror for .pj-tabs which is page-local) */
    .pj-w .pj-tabs {
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        position: static;            /* sticky+overflow breaks scroll on iOS */
    }
    .pj-w .pj-tab { flex-shrink: 0; }
    /* Inline multi-col entry / parts / billing rows → single col */
    .pj-w [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
    .pj-w [style*="grid-template-columns:1fr 1fr 1fr"],
    .pj-w [style*="grid-template-columns: 1fr 1fr 1fr"],
    .pj-w [style*="grid-template-columns:repeat(3"],
    .pj-w [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    /* Header row (h1 + action cluster) wraps on mobile */
    .pj-w > div[style*="justify-content:space-between"][style*="flex-wrap:wrap"] {
        gap: 0.5rem !important;
    }
    /* Card padding tightens */
    .pj-w .pj-card,
    .pj-w > .card { padding: 0.7rem 0.8rem; }
    /* Tables (.detail-table) get horizontal scroll via the auto
       .sk-tbl-wrap shipped by base.html — no further action. */
    .pj-w .detail-table { font-size: 0.82rem; }
    /* Photos / parts / attachments tile grids: smaller minmax so
       2 tiles fit comfortably on a 360px viewport. */
    .pj-w [style*="minmax(180px"] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
    .pj-w [style*="minmax(140px"] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
}

@keyframes proj-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.pjl-w {
    --pjl-mono: var(--font-mono, ui-monospace,SFMono-Regular,Menlo,monospace);
    --pjl-sans: var(--font-sans, "Inter Tight", system-ui, sans-serif);
    --pjl-mute: var(--text-muted);
    --pjl-on:   var(--success, #22c55e);
    --pjl-off:  var(--danger, #ef4444);
    --pjl-warn: var(--warning, #f59e0b);
    --pjl-info: var(--info, #38bdf8);
    --pjl-accent: var(--accent, #58a6ff);
    font-family: var(--pjl-sans);
    letter-spacing: -0.005em;
}
.pjl-w h2, .pjl-w h3 { font-family: var(--pjl-mono); letter-spacing:-0.005em; }

/* ── Stat strip (top metric cards) ──────────────────────────────── */
.pjl-w .pjl-stats {
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
    gap:0.65rem; margin:0 0 1rem;
}

/* ── Filter card (pbcard-style) ─────────────────────────────────── */
.pjl-w .pjl-pbcard {
    background: var(--bg-card, #1a1d27);
    border: 1px solid var(--border, #2d3140);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
}
.pjl-w .pjl-pbcard form {
    display:flex; gap:0.6rem; flex-wrap:wrap; align-items:flex-end; margin:0;
}
.pjl-w .pjl-pbcard label.field {
    display:flex; flex-direction:column; gap:0.2rem;
    font-size:0.66rem; text-transform:uppercase; letter-spacing:0.16em;
    color: var(--pjl-mute); font-family: var(--pjl-mono); font-weight:600;
}
.pjl-w .pjl-pbcard select.form-input,
.pjl-w .pjl-pbcard input.form-input {
    min-width:160px; font-family: var(--pjl-sans); font-size: 0.85rem;
}
.pjl-w .pjl-pbcard label.check {
    display:flex; align-items:center; gap:0.35rem;
    font-size:0.78rem; color:var(--text); cursor:pointer; padding-bottom:8px;
    text-transform:none; letter-spacing:0;
}

/* ── Table card ─────────────────────────────────────────────────── */
.pjl-w .pjl-tablecard {
    background: var(--bg-card, #1a1d27);
    border: 1px solid var(--border, #2d3140);
    border-radius: 8px; overflow: hidden;
}
.pjl-w .pbtable {
    width:100%; border-collapse:collapse; font-size:0.88rem;
}
.pjl-w .pbtable thead th {
    text-align:left; padding:0.7rem 1rem;
    font-family: var(--pjl-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--pjl-mute);
    font-weight: 600;
    background: var(--bg, #0f1117);
    border-bottom: 1px solid var(--border, #2d3140);
}
.pjl-w .pbtable tbody td {
    padding: 9px 1rem; vertical-align: middle;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    color: var(--text);
}
.pjl-w .pbtable tbody tr:last-child td { border-bottom: none; }
.pjl-w .pbtable tbody tr:hover { background: rgba(88,166,255,0.05); }
.pjl-w .pbtable tbody tr[data-overdue="1"] { box-shadow: inset 3px 0 0 0 var(--pjl-off); }
.pjl-w .pbtable a.row-link { color: var(--text); text-decoration: none; font-weight: 600; }
.pjl-w .pbtable a.row-link:hover { color: var(--pjl-accent); }
.pjl-w .pbtable code {
    font-family: var(--pjl-mono); font-size: 0.78rem;
    color: var(--pjl-mute);
}

/* ── Status pill (colour-coded mono) ────────────────────────────── */
.pjl-w .pjl-pill {
    font-family: var(--pjl-mono); text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.66rem; font-weight: 600;
    padding: 3px 8px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: 1px solid currentColor;
    background: transparent;
}
.pjl-w .pjl-pill[data-state="active"]    { color: var(--pjl-info);  background: rgba(56,189,248,0.10); border-color: rgba(56,189,248,0.35); }
.pjl-w .pjl-pill[data-state="planned"]   { color: var(--pjl-mute);  background: rgba(255,255,255,0.04); border-color: var(--border); }
.pjl-w .pjl-pill[data-state="on_hold"]   { color: var(--pjl-warn);  background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); }
.pjl-w .pjl-pill[data-state="completed"] { color: var(--pjl-on);    background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.35); }
.pjl-w .pjl-pill[data-state="cancelled"] { color: var(--pjl-mute);  background: rgba(255,255,255,0.04); border-color: var(--border); opacity: 0.7; }

/* ── Priority pill ───────────────────────────────────────────────── */
.pjl-w .pjl-prio {
    font-family: var(--pjl-mono); font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.1em;
    padding: 2px 7px; border-radius: 4px;
    display: inline-flex; align-items: center;
    border: 1px solid currentColor; background: transparent;
}
.pjl-w .pjl-prio[data-prio="low"]    { color: var(--pjl-mute); }
.pjl-w .pjl-prio[data-prio="normal"] { color: var(--pjl-info); }
.pjl-w .pjl-prio[data-prio="high"]   { color: var(--pjl-warn); }
.pjl-w .pjl-prio[data-prio="urgent"] { color: var(--pjl-off); background: rgba(239,68,68,0.10); }

/* Overdue date highlight */
.pjl-w .pjl-overdue { color: var(--pjl-off); font-weight: 600; }

/* ── Row thumbnail (first project image, click → media modal) ───── */
.pjl-w .pjl-thumb-cell { width: 56px; padding-right: 0 !important; }
.pjl-w .pjl-thumb {
    width: 40px; height: 40px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border, #2d3140);
    overflow: hidden;
    display: inline-block; vertical-align: middle;
    cursor: pointer;
    padding: 0;
}
.pjl-w .pjl-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.pjl-w .pjl-thumb:hover { border-color: var(--pjl-accent); }
.pjl-w .pjl-thumb-empty {
    /* Placeholder keeps row alignment when a project has no images. */
    width: 40px; height: 40px; display: inline-block; vertical-align: middle;
}

/* ── Media modal ────────────────────────────────────────────────── */
.pjl-mm-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.78);
    display: none;
    align-items: center; justify-content: center;
    z-index: 9999;
    padding: 1rem;
}
.pjl-mm-overlay.open { display: flex; }
.pjl-mm-panel {
    background: var(--bg-card, #1a1d27);
    border: 1px solid var(--border, #2d3140);
    border-radius: 10px;
    width: min(960px, 100%); max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    font-family: var(--pjl-sans);
}
.pjl-mm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border, #2d3140);
}
.pjl-mm-title { font-family: var(--pjl-mono); font-size: 0.78rem;
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--text); }
.pjl-mm-close {
    background: transparent; border: 1px solid var(--border);
    color: var(--text); padding: 4px 10px; border-radius: 6px; cursor: pointer;
    font-family: var(--pjl-mono); font-size: 0.74rem;
}
.pjl-mm-close:hover { background: rgba(255,255,255,0.05); }
.pjl-mm-body {
    padding: 0.85rem 1rem 1rem;
    overflow-y: auto;
}
.pjl-mm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
}
.pjl-mm-tile {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 6px; overflow: hidden;
    cursor: zoom-in;
}
.pjl-mm-tile img {
    width: 100%; height: 140px; object-fit: cover; display: block;
}
.pjl-mm-tile .pjl-mm-name {
    font-size: 0.74rem; color: var(--pjl-mute);
    padding: 6px 8px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.pjl-mm-empty { color: var(--pjl-mute); padding: 1.2rem; text-align: center; }

/* 7.07.51 W — lightbox overlay (click a tile → near-fullscreen view
   with a metadata sidebar). Sits ABOVE the grid modal at z=10000 so it
   covers it cleanly. Click-on-image dismisses (per spec). */
.pjl-lb-overlay {
    /* 7.08.54: trimmed overlay padding 1.5→0.5vh/vw and bumped frame
       max to 99/100 so the image actually fills the viewport. Previous
       layout left ~6% of vertical and ~4% horizontal black space slack. */
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    display: none;
    align-items: center; justify-content: center;
    z-index: 10000;
    padding: 0.5vh 0.5vw;
}
.pjl-lb-overlay.open { display: flex; }
.pjl-lb-frame {
    display: flex; flex-direction: row;
    gap: 0.75rem;
    max-width: 99vw; max-height: 99vh;
    width: 100%; height: 100%;
    align-items: stretch;
}
.pjl-lb-img-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex; align-items: center; justify-content: center;
    background: #000;
    border: 1px solid var(--border, #2d3140);
    border-radius: 8px;
    overflow: hidden;
    cursor: zoom-out; /* second click closes */
    position: relative;
}
.pjl-lb-img-wrap img {
    /* 7.08.54: was max-height 92vh (4% slack of black) and now uses
       100% of the wrap which is already bounded by frame max-height 99vh
       — so portrait photos get the full vertical slot, not 92% of it. */
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
}
.pjl-lb-side {
    /* 7.08.54: sidebar shrunk 320→280px so the image gets ~40 more px of
       horizontal slot. Metadata still fits because the section labels are
       short and pjl-lb-meta-row wraps cleanly. */
    flex: 0 0 280px;
    max-width: 32vw;
    background: var(--bg-card, #1a1d27);
    border: 1px solid var(--border, #2d3140);
    border-radius: 8px;
    display: flex; flex-direction: column;
    overflow: hidden;
    font-family: var(--pjl-sans);
    color: var(--text);
}
.pjl-lb-side-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border, #2d3140);
}
.pjl-lb-side-title {
    font-family: var(--pjl-mono); font-size: 0.74rem;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--pjl-mute);
}
.pjl-lb-close {
    background: transparent; border: 1px solid var(--border);
    color: var(--text); padding: 3px 9px; border-radius: 5px; cursor: pointer;
    font-family: var(--pjl-mono); font-size: 0.7rem;
}
.pjl-lb-close:hover { background: rgba(255,255,255,0.05); }
.pjl-lb-side-body {
    padding: 0.7rem 0.85rem 0.4rem;
    overflow-y: auto;
    flex: 1 1 auto;
    font-size: 0.82rem;
}
.pjl-lb-section { margin-bottom: 0.85rem; }
.pjl-lb-section h4 {
    font-family: var(--pjl-mono); font-size: 0.7rem;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--pjl-mute);
    margin: 0 0 0.3rem; font-weight: 600;
}
.pjl-lb-meta-row {
    display: flex; justify-content: space-between;
    gap: 0.6rem; padding: 2px 0;
    font-size: 0.78rem; color: var(--text);
}
.pjl-lb-meta-row .k { color: var(--pjl-mute); flex: 0 0 auto; }
.pjl-lb-meta-row .v {
    flex: 1 1 auto; text-align: right;
    word-break: break-word; font-family: var(--pjl-mono);
    font-size: 0.74rem;
}
.pjl-lb-input, .pjl-lb-textarea {
    width: 100%; box-sizing: border-box;
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border, #2d3140);
    border-radius: 5px;
    color: var(--text);
    padding: 5px 8px;
    font-family: var(--pjl-sans); font-size: 0.82rem;
}
.pjl-lb-textarea { min-height: 70px; resize: vertical; }
.pjl-lb-tags {
    display: flex; flex-wrap: wrap; gap: 4px;
    min-height: 24px;
    margin-bottom: 4px;
}
.pjl-lb-tag {
    background: rgba(255,255,255,0.07);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.72rem;
    display: inline-flex; align-items: center; gap: 4px;
}
.pjl-lb-tag.auto { opacity: 0.65; }
.pjl-lb-tag .x {
    cursor: pointer; color: var(--pjl-mute);
    line-height: 1;
}
.pjl-lb-tag .x:hover { color: #f55; }
.pjl-lb-side-foot {
    display: flex; justify-content: flex-end; gap: 6px;
    padding: 0.55rem 0.85rem;
    border-top: 1px solid var(--border, #2d3140);
}
.pjl-lb-save {
    background: var(--pjl-accent, #4f8cff); color: #fff;
    border: 0; border-radius: 5px;
    padding: 5px 14px; cursor: pointer;
    font-family: var(--pjl-mono); font-size: 0.74rem;
    text-transform: uppercase; letter-spacing: 0.08em;
}
.pjl-lb-save[disabled] { opacity: 0.5; cursor: progress; }
.pjl-lb-save-status {
    align-self: center; font-size: 0.72rem; color: var(--pjl-mute);
}
@media (max-width: 900px) {
    .pjl-lb-frame { flex-direction: column; }
    .pjl-lb-side { flex: 0 0 auto; max-width: none; max-height: 40vh; }
    .pjl-lb-img-wrap img { max-height: 55vh; }
}

/* ── Mobile card-view (data-label driven) ───────────────────────── */
@media (max-width: 720px) {
    .pjl-w .pbtable.resp { display: block; }
    .pjl-w .pbtable.resp thead { display: none; }
    .pjl-w .pbtable.resp tbody { display: block; }
    .pjl-w .pbtable.resp tr {
        display: block; padding: 0.6rem 0.85rem;
        border-bottom: 1px solid var(--border);
    }
    .pjl-w .pbtable.resp tr:last-child { border-bottom: none; }
    .pjl-w .pbtable.resp td {
        display: flex; justify-content: space-between; gap: 0.75rem;
        padding: 4px 0; border: none;
    }
    .pjl-w .pbtable.resp td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-family: var(--pjl-mono); font-size: 0.62rem;
        text-transform: uppercase; letter-spacing: 0.12em;
        color: var(--pjl-mute); font-weight: 600;
        align-self: center;
    }
    .pjl-w .pbtable.resp tr[data-overdue="1"] { box-shadow: inset 3px 0 0 0 var(--pjl-off); }
}

.pjl-fab-stack {
    position: fixed; right: 14px; bottom: 18px;
    display: none; flex-direction: column; gap: 0.5rem;
    z-index: 950;
  }
  .pjl-fab {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    font-size: 1.5rem; line-height: 1;
    color: #fff; text-decoration: none;
    transition: transform 0.12s;
  }
  .pjl-fab:active { transform: scale(0.94); }
  .pjl-fab.primary { background: #2563eb; }
  @media (max-width: 768px) {
    .pjl-fab-stack { display: flex; }
    .pjl-w { padding-bottom: 90px; }
  }

.mt-grid { display: grid; gap: 1rem; }
.mt-proj { padding: 0.8rem; background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border); border-radius: 6px; }
.mt-proj-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.4rem; }
.mt-proj-h h3 { margin: 0; font-size: 1rem; }
.mt-proj-h .meta { font-size: 0.78em; color: var(--text-muted); }
.mt-task { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); font-size: 0.88em; }
.mt-task:last-child { border-bottom: 0; }
.mt-task.done { opacity: 0.6; }
.mt-task .title { font-weight: 500; }
.mt-task .due { font-size: 0.82em; color: var(--text-muted); white-space: nowrap; }
.mt-task .due.overdue { color: var(--danger, #ef4444); font-weight: 600; }
.mt-task .due.soon { color: #f59e0b; }
.mt-status { font-size: 0.7em; padding: 1px 6px; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.mt-status-pending     { background: rgba(148,163,184,0.15); color: #94a3b8; }
.mt-status-in_progress { background: rgba(59,130,246,0.15); color: #3b82f6; }
.mt-status-blocked     { background: rgba(239,68,68,0.15); color: #ef4444; }
.mt-status-done        { background: rgba(34,197,94,0.15); color: #22c55e; }

.rv-grid { display: grid; gap: 0.6rem; }
.rv-card { padding: 0.85rem 1rem; background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border); border-radius: 6px; }
.rv-card.heavy   { border-left: 4px solid #ef4444; }
.rv-card.busy    { border-left: 4px solid #f59e0b; }
.rv-card.steady  { border-left: 4px solid #3b82f6; }
.rv-card.light   { border-left: 4px solid #22c55e; }
.rv-row { display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap: 0.6rem; align-items: center; }
.rv-name { font-weight: 600; }
.rv-name small { display: block; color: var(--text-muted); font-size: 0.78em; font-weight: normal; margin-top: 2px; }
.rv-stat .label { font-size: 0.7em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.rv-stat .value { font-size: 1.2em; font-weight: 700; margin-top: 2px; }
.rv-stat .value.alarm { color: #ef4444; }
.rv-stat .value.warn { color: #f59e0b; }
@media (max-width: 720px) {
  .rv-row { grid-template-columns: 1fr; }
}

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; }
.tpl-card { padding: 0.85rem 1rem; background: var(--bg-elevated, var(--bg-card)); border: 1px solid var(--border); border-radius: 6px; }
.tpl-card h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.tpl-card .meta { font-size: 0.78em; color: var(--text-muted); margin-bottom: 0.5rem; }
.tpl-card .scope { font-size: 0.85em; max-height: 60px; overflow: hidden; color: var(--text-muted); margin-bottom: 0.6rem; white-space: pre-wrap; }
.tpl-card .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

@page { size: 4in 6in; margin: 0.15in; }
.toolbar {
  padding: 10px;
  display: flex;
  gap: 8px;
  justify-content: center;
}
.sheet {
  width: 3.7in;
  min-height: 5.55in;
  margin: 0 auto 14px;
  padding: 0.18in;
  background: #fff;
  border: 1px solid #222;
  box-sizing: border-box;
}
.section {
  border-bottom: 1px solid #222;
  padding: 0.12in 0;
}
.section:last-child { border-bottom: 0; }
.eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.to-lines {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  white-space: pre-line;
}
.meta {
  font-size: 12px;
  line-height: 1.45;
}
.po {
  font-size: 24px;
  font-weight: 800;
}
.qr {
  display: flex;
  gap: 10px;
  align-items: center;
}
.qr svg {
  width: 1.15in;
  height: 1.15in;
}
@media print {
  .toolbar { display: none; }
  .sheet { border: 0; margin: 0; }
}

.qbr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.qbr-card-title {
    font-size: 0.9rem; font-weight: 600;
    color: var(--text); margin: 0 0 0.85rem;
}
.qbr-form { margin: 0; }
.qbr-fields {
    display: flex; gap: 0.75rem; align-items: flex-end;
    flex-wrap: wrap;
}
.qbr-field {
    display: flex; flex-direction: column; gap: 0.3rem;
}
.qbr-field label {
    font-size: 0.75rem; font-weight: 500;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.04em;
}
.qbr-field input {
    padding: 0.4rem 0.6rem;
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.85rem;
}
.qbr-field input:focus {
    outline: none; border-color: var(--accent);
}
.qbr-hint {
    font-size: 0.75rem; color: var(--text-muted);
    margin: 0.6rem 0 0;
}

/* 7.09.87: QBR report print/body rules live in qbr_report.css only.
   Keeping that standalone report CSS in the global bundle constrained the
   normal app shell to a narrow white report page after fresh asset loads. */

.qc-w {
    --qc-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --qc-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --qc-accent: var(--primary, #4a9eff);
    --qc-mute: var(--text-muted);
    --qc-on: #22c55e;
    --qc-warn: #f59e0b;
    --qc-off: #6b7280;
    font-family: var(--qc-sans);
    letter-spacing: -0.005em;
    animation: qc-fade-in 0.4s ease-out;
}
@keyframes qc-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.qc-w * { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────────────── */
.qc-w .qc-header {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.qc-w .qc-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.qc-w .qc-hint {
    font-family: var(--qc-mono); font-size: 0.66rem;
    color: var(--qc-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1.5rem;
}

/* ── Layout: list + add form side by side ─────────────────────── */
.qc-w .qc-layout {
    display: grid; grid-template-columns: 1fr 350px;
    gap: 1.5rem;
}
@media (max-width: 800px) {
    .qc-w .qc-layout { grid-template-columns: 1fr; }
}

/* ── Table ─────────────────────────────────────────────────────── */
.qc-w .qc-table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.qc-w .qc-table thead th {
    text-align: left; padding: 8px 9px;
    border-bottom: 1px solid var(--border);
    font-family: var(--qc-mono); font-size: 0.62rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--qc-mute); font-weight: 600;
}
.qc-w .qc-table tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.qc-w .qc-table tbody tr:hover { background: rgba(74,158,255,0.06); }
.qc-w .qc-table tbody td {
    padding: 8px 9px; vertical-align: middle;
}

/* ── Status badges ──────────────────────────────────────────────── */
.qc-w .qc-status {
    display: inline-block; font-size: 0.65rem; font-weight: 600;
    padding: 2px 8px; border-radius: 6px; text-transform: uppercase;
    letter-spacing: 0.04em; font-family: var(--qc-mono);
}
.qc-w .qc-status.resolved { background: rgba(34,197,94,0.15); color: var(--qc-on); }
.qc-w .qc-status.closed { background: rgba(107,114,128,0.15); color: var(--qc-off); }
.qc-w .qc-status.waiting { background: rgba(245,158,11,0.15); color: var(--qc-warn); }

/* ── Card ──────────────────────────────────────────────────────── */
.qc-w .qc-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem;
}
.qc-w .qc-card h3 {
    font-size: 0.9rem; font-weight: 600; margin: 0 0 1rem;
}

/* ── Fields ────────────────────────────────────────────────────── */
.qc-w .qc-field {
    display: flex; flex-direction: column; gap: 0.35rem;
    margin-bottom: 1rem;
}
.qc-w .qc-field label {
    font-size: 0.8rem; font-weight: 500; color: var(--text);
}
.qc-w .qc-input {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--qc-mono); font-size: 0.74rem;
}
.qc-w .qc-input:focus { outline: none; border-color: var(--qc-accent); }
.qc-w .qc-select {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--qc-sans); font-size: 0.82rem;
}
.qc-w .qc-select:focus { outline: none; border-color: var(--qc-accent); }

/* ── Empty state ───────────────────────────────────────────────── */
.qc-w .qc-empty {
    padding: 1.5rem; text-align: center;
    color: var(--qc-mute); font-size: 0.85rem;
}

  .pin { font-size:2rem; font-weight:700; letter-spacing:0.3em;
    color:#58a6ff; margin:16px 0 24px; font-variant-numeric:tabular-nums; }
  .sub { color:#8b949e; margin-bottom:22px; font-size:0.92rem; line-height:1.6; }
  .err { background:rgba(248,81,73,0.12); color:#f85149; padding:14px; border-radius:10px;
    margin-bottom:18px; font-size:0.9rem; }
  .tiny { color:#8b949e; font-size:0.72rem; margin-top:22px; }

  .sub { color:#8b949e; margin-bottom:24px; font-size:0.92rem; }
  body:not(.sk-app-shell) input { width:100%; padding:16px; border-radius:12px; background:#0f1117;
    border:1px solid #30363d; color:#e1e4e8; font-size:1.4rem; text-align:center;
    letter-spacing:0.2em; font-family:inherit; }
  .btn:disabled { opacity:0.5; cursor:not-allowed; }
  .err { color:#f78b8b; font-size:0.85rem; margin-top:10px; }
  .ts { margin:14px 0 0; display:flex; justify-content:center; }

.rack-layout { display:grid; grid-template-columns:1fr 360px; gap:1.5rem; align-items:start; }
@media (max-width:900px) { .rack-layout { grid-template-columns:1fr; } }

.rack-diagram { background:var(--bg-card); border:2px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.rack-header { background:var(--bg-input); padding:0.5rem 0.75rem; font-weight:600; font-size:0.85rem; text-align:center; border-bottom:1px solid var(--border); }
.rack-body { position:relative; }
.rack-row { display:flex; align-items:stretch; border-bottom:1px solid rgba(128,128,128,0.15); min-height:28px; }
.rack-unit-num { width:32px; text-align:center; font-size:0.7rem; color:var(--text-muted); display:flex; align-items:center; justify-content:center; border-right:1px solid rgba(128,128,128,0.2); flex-shrink:0; }
.rack-slot { flex:1; position:relative; min-height:28px; }
.rack-slot.empty { background:repeating-linear-gradient(90deg, transparent 0px, transparent 8px, rgba(128,128,128,0.05) 8px, rgba(128,128,128,0.05) 9px); }

.rack-item { position:absolute; left:2px; right:2px; border-radius:3px; display:flex; align-items:center; padding:0 0.5rem; font-size:0.75rem; font-weight:500; color:#fff; cursor:pointer; z-index:2; overflow:hidden; text-shadow:0 1px 2px rgba(0,0,0,0.3); box-shadow:inset 0 1px 0 rgba(255,255,255,0.15), 0 1px 3px rgba(0,0,0,0.2); transition:opacity 0.15s; }
.rack-item:hover { opacity:0.9; }
.rack-item .item-icon { margin-right:0.4rem; font-size:0.85rem; }
.rack-item .item-label { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.rack-item .item-info { font-size:0.65rem; opacity:0.8; margin-left:0.5rem; white-space:nowrap; }

/* Device type colors */
.rack-item.type-switch { background:linear-gradient(135deg, #3b82f6, #2563eb); }
.rack-item.type-router { background:linear-gradient(135deg, #ef4444, #dc2626); }
.rack-item.type-patch_panel { background:linear-gradient(135deg, #6b7280, #4b5563); }
.rack-item.type-ups { background:linear-gradient(135deg, #22c55e, #16a34a); }
.rack-item.type-server { background:linear-gradient(135deg, #a855f7, #9333ea); }
.rack-item.type-firewall { background:linear-gradient(135deg, #f97316, #ea580c); }
.rack-item.type-nas { background:linear-gradient(135deg, #06b6d4, #0891b2); }
.rack-item.type-other { background:linear-gradient(135deg, #8b5cf6, #7c3aed); }

.rack-sidebar .card { padding:1rem; margin-bottom:1rem; }
.rack-sidebar h3 { margin-top:0; margin-bottom:0.75rem; font-size:0.95rem; }

.item-actions { display:flex; gap:0.3rem; margin-top:0.3rem; }
.item-row { padding:0.5rem; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:0.5rem; font-size:0.82rem; }
.item-row-header { display:flex; justify-content:space-between; align-items:center; }
.type-dot { width:10px; height:10px; border-radius:2px; display:inline-block; margin-right:0.3rem; vertical-align:middle; }

.rep-frame { background:#000; border-radius:6px; min-height:420px; display:flex; align-items:center; justify-content:center; }
.rep-frame img { max-width:100%; max-height:80vh; object-fit:contain; }
.rep-controls { display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem; flex-wrap:wrap; }
.rep-controls .btn { font-size:0.85rem; }
.rep-scrub { flex:1; min-width:240px; }
.rep-meta { color:var(--text-muted); font-size:0.8rem; }

.player-toolbar { display:flex; gap:0.5rem; align-items:center; padding:0.5rem 0; flex-wrap:wrap; }
.player-toolbar .btn { font-size:0.8rem; padding:0.3rem 0.7rem; }
#player-container { background:#000; border-radius:var(--radius,6px); overflow:hidden; position:relative; min-height:200px; display:flex; align-items:center; justify-content:center; }
#player-screen { width:100%; display:block; }
#player-loading { color:#aaa; font-size:0.9rem; position:absolute; }
#player-progress { width:100%; height:6px; background:var(--border-color); cursor:pointer; border-radius:3px; overflow:hidden; }
#player-progress-fill { height:100%; background:var(--primary-color,#5b8af5); width:0%; transition:width 0.1s; }
.player-time { font-size:0.85rem; color:var(--text-muted); min-width:80px; }

.rc-wrap { display: grid; grid-template-columns: minmax(0,720px) 320px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .rc-wrap { grid-template-columns: 1fr; } }
.rc-form { min-width: 0; }
.rc-side { background: var(--bg-card); border: 1px solid var(--border);
           border-radius: 8px; padding: 0.9rem 1rem; position: sticky; top: 0.5rem; max-height: 90vh; overflow-y: auto; }
.rc-side h3 { font-size: .76rem; text-transform: uppercase; color: var(--text-muted);
              letter-spacing: 0.06em; margin: 0 0 0.6rem; font-weight: 600; }
.rc-side .li-row { display: flex; justify-content: space-between; gap: .4rem;
                   padding: .35rem 0; border-bottom: 1px solid var(--border); font-size: .82rem; }
.rc-side .li-row:last-child { border-bottom: 0; }
.rc-side .li-num { font-weight: 600; }
.rc-side .li-date { color: var(--text-muted); font-size: .7rem; font-family: ui-monospace, monospace; }
.rc-side .li-amt { font-family: ui-monospace, monospace; }
.rc-side .li-stat { display: inline-block; padding: 0 5px; border-radius: 3px;
                    font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.rc-side .li-stat.paid { background: rgba(34,197,94,0.12); color: #22c55e; }
.rc-side .li-stat.overdue { background: rgba(239,68,68,0.12); color: #ef4444; }
.rc-side .li-stat.sent { background: rgba(59,130,246,0.12); color: #3b82f6; }
.rc-side .li-stat.cancelled { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.rc-side .empty { color: var(--text-muted); font-style: italic; padding: .4rem 0; font-size: .8rem; }

.rc-form { max-width: none; }
.rc-form label { display:block; font-size:0.8rem; color:var(--text-muted);
                 margin:0.75rem 0 0.2rem; }
.rc-form input[type=text], .rc-form input[type=date], .rc-form input[type=number],
.rc-form input[type=email], .rc-form select, .rc-form textarea {
    width:100%; padding:0.45rem 0.6rem; background:var(--bg);
    border:1px solid var(--border); border-radius:6px;
    color:var(--text); font-size:0.9rem;
}
.rc-form .row2 { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.rc-form .row3 { display:grid; grid-template-columns:1fr 120px 140px 140px auto; gap:0.5rem; align-items:center; }
.rc-form .section { background:var(--bg-card); border:1px solid var(--border);
                    border-radius:8px; padding:1rem; margin-top:1rem; }
.rc-form .section h3 { font-size:0.78rem; text-transform:uppercase;
                       color:var(--text-muted); letter-spacing:0.04em;
                       margin:0 0 0.75rem; }
.rc-form .toggle { display:flex; align-items:center; gap:0.5rem;
                   font-size:0.85rem; cursor:pointer; }
.rc-items .row3.head { color:var(--text-muted); font-size:0.72rem;
                       text-transform:uppercase; letter-spacing:0.04em; }
.rc-items .item-amount { font-family:var(--font-mono, monospace); text-align:right; }
.rc-total { font-size:1.15rem; font-weight:600; font-family:var(--font-mono, monospace); }
.btn-danger-small { color:#e74c3c; font-size:0.75rem; padding:0.25rem 0.5rem; }

.rc-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.rc-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted);
               text-transform:uppercase; letter-spacing:0.04em; }
.rc-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.rc-table .mono { font-family:var(--font-mono, monospace); }
.rc-table tr.disabled td { opacity:0.55; }
.rc-pill { display:inline-block; padding:1px 7px; border-radius:10px;
           font-size:0.68rem; font-weight:700; letter-spacing:0.03em; }
.rc-pill.on     { background:rgba(39,174,96,0.15);   color:#27ae60; }
.rc-pill.off    { background:rgba(140,140,140,0.15); color:#888; }
.rc-pill.syncro { background:rgba(74,158,255,0.15);  color:#4a9eff; }
.rc-pill.auto   { background:rgba(240,173,78,0.15);  color:#f0ad4e; }

.rec-form { max-width:920px; }
.rec-form .card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.rec-form .card h3 { margin:0 0 .8rem; font-size:.95rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.rec-form .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; }
.rec-form .grid-4 { display:grid; grid-template-columns:repeat(4, 1fr); gap:.8rem 1rem; }
.rec-form label { display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:.2rem; font-weight:500; }
.rec-form .form-input { width:100%; background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:.45rem .6rem; border-radius:6px; font-size:.88rem; }
.rec-form .form-input:focus { outline:none; border-color:var(--accent, #4a9eff); }
.rec-items { width:100%; border-collapse:collapse; }
.rec-items th { padding:.4rem .5rem; font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; text-align:left; border-bottom:1px solid var(--border); }
.rec-items td { padding:.3rem .25rem; border-bottom:1px solid var(--border); }
.rec-totals { margin-top:.8rem; padding:.6rem .8rem; background:var(--bg); border-radius:6px; display:flex; justify-content:flex-end; gap:1.5rem; font-size:.88rem; }
.rec-totals strong { font-size:1.05rem; color:var(--text); }
.checkrow { display:flex; align-items:center; gap:.5rem; padding:.5rem 0; cursor:pointer; }
.checkrow input { margin:0; }
@media (max-width:720px) { .rec-form .grid-2, .rec-form .grid-4 { grid-template-columns:1fr; } }

.clone-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.clone-card h3 { margin:0 0 .6rem; font-size:.95rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.clone-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:.4rem .8rem; font-size:.85rem; }
.clone-grid .lbl { color:var(--text-muted); }
.cand-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.cand-table th, .cand-table td { padding:.4rem .55rem; text-align:left; border-bottom:1px solid var(--border); }
.cand-table th { background:var(--bg); color:var(--text-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.has-tmpl { display:inline-block; padding:.1rem .55rem; border-radius:10px; background:#f59e0b22; color:#f59e0b; font-size:.7rem; font-weight:600; }
.no-tmpl { display:inline-block; padding:.1rem .55rem; border-radius:10px; background:#9ca3af22; color:#9ca3af; font-size:.7rem; font-weight:600; }
.checkrow { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; cursor:pointer; }

.rec-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.rec-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
}
.rec-stat-value {
    font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1;
}
.rec-stat-value--good { color: var(--success); }
.rec-stat-value--muted { color: var(--text-muted); }
.rec-stat-value--accent { color: var(--info); }
.rec-stat-label {
    font-size: 0.72rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-top: 0.2rem;
}
.rec-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.rec-table th {
    text-align: left; font-size: 0.72rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted);
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.rec-table td {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.rec-table tbody tr:last-child td { border-bottom: none; }
.rec-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.rec-table tr.rec-paused td { opacity: 0.55; }
.rec-template-link { color: var(--text); font-weight: 600; }
.rec-note { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }
.rec-muted { color: var(--text-muted); }
.rec-day { font-size: 0.72rem; margin-left: 0.3rem; }
.rec-small { font-size: 0.7rem; }
.rec-pill {
    display: inline-block; padding: 0.1rem 0.5rem;
    border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    vertical-align: middle;
}
.rec-pill--active { background: var(--success-soft); color: var(--success); }
.rec-pill--paused { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.rec-pill--freq { background: var(--accent-soft); color: var(--accent); }
.rec-pill--email { background: rgba(167,139,250,0.14); color: #a78bfa; }
.rec-pill--charge { background: var(--success-soft); color: var(--success); }
.rec-pill--syncro { background: var(--warning-soft); color: var(--warning); }
.rec-actions { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.rec-actions form { margin: 0; display: inline; }
.rec-actions .skui-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.rec-delete-btn { color: var(--danger) !important; }

.ri-w {
    --ri-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ri-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --ri-on: #22c55e;
    --ri-off: #ef4444;
    --ri-warn: #f59e0b;
    --ri-accent: var(--primary, #4a9eff);
    --ri-mute: var(--text-muted);
    font-family: var(--ri-sans);
    letter-spacing: -0.005em;
}

/* ── Compact mono header bar ────────────────────────────────── */
.ri-w .ri-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.7rem;
    flex-wrap: wrap;
}
.ri-w .ri-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.ri-w .ri-meta {
    font-size: 0.7rem; color: var(--ri-mute);
    font-family: var(--ri-mono);
}

/* ── Stat pills ──────────────────────────────────────────────── */
.ri-w .ri-stats {
    display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.ri-w .ri-pill-row {
    font-family: var(--ri-mono); font-size: 0.72rem; padding: 5px 10px;
    border-radius: 999px; background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.4rem; align-items: center; line-height: 1.1;
}
.ri-w .ri-pill-row b { font-weight: 700; font-size: 0.85rem; }
.ri-w .ri-pill-row.past-due b { color: var(--ri-off); }
.ri-w .ri-pill-row.due b { color: var(--ri-warn); }
.ri-w .ri-pill-row.enabled b { color: var(--ri-on); }
.ri-w .ri-pill-row.syncro b { color: var(--ri-accent); }

/* ── Summary cards ───────────────────────────────────────────── */
.ri-w .ri-summary {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin-bottom: 1rem;
}
.ri-w .ri-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 0.75rem; text-align: center;
}
.ri-w .ri-card .val { font-size: 1.6rem; font-weight: 700; }
.ri-w .ri-card .lbl {
    font-size: 0.72rem; color: var(--ri-mute);
    text-transform: uppercase; letter-spacing: 0.03em;
}
.ri-w .ri-card.past-due .val  { color: var(--ri-off); }
.ri-w .ri-card.due      .val  { color: var(--ri-warn); }
.ri-w .ri-card.enabled  .val  { color: var(--ri-on); }

/* ── Table ───────────────────────────────────────────────────── */
.ri-w .ri-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem;
}
.ri-w .ri-table th {
    text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
    font-size: 0.72rem; color: var(--ri-mute);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ri-w .ri-table td {
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.ri-w .ri-table .mono { font-family: var(--ri-mono); }
.ri-w .ri-table .money { font-family: var(--ri-mono); text-align: right; }
.ri-w .ri-table tr.past-due    td:first-child { border-left: 3px solid var(--ri-off); }
.ri-w .ri-table tr.due-today   td:first-child { border-left: 3px solid var(--ri-warn); }
.ri-w .ri-table tr.future      td:first-child { border-left: 3px solid var(--ri-on); }
.ri-w .ri-table tr.disabled    td:first-child { border-left: 3px solid var(--border); }
.ri-w .ri-table tr.disabled    td              { opacity: 0.55; }

/* ── Pills ─────────────────────────────────────────────────── */
.ri-w .ri-pill-row { display: inline-block; padding: 1px 7px; border-radius: 10px;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; }
.ri-w .ri-pill-row.due      { background: rgba(240,173,78,0.15); color: var(--ri-warn); }
.ri-w .ri-pill-row.past-due { background: rgba(231,76,60,0.15);  color: var(--ri-off); }
.ri-w .ri-pill-row.future   { background: rgba(39,174,96,0.15);  color: var(--ri-on); }
.ri-w .ri-pill-row.disabled { background: rgba(140,140,140,0.15); color: #888; }
.ri-w .ri-pill-row.syncro   { background: rgba(74,158,255,0.15); color: var(--ri-accent); }

/* 6.87.30: Remote Desktop pop-out chrome stripping lives in
   remote_desktop_popout.css, which is loaded only for ?popout=1.
   Keep the global bundle from hiding the normal RMM sidebar/topbar. */

.rd-toolbar { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; padding:0.5rem 0; }
.rd-toolbar .btn { font-size:0.8rem; padding:0.3rem 0.7rem; }
.rd-toolbar select { background:var(--bg-card); color:var(--text); border:1px solid var(--border); padding:0.25rem 0.4rem; border-radius:var(--radius,4px); font-size:0.8rem; }
.rd-toolbar .separator { width:1px; height:1.5rem; background:var(--border); margin:0 0.25rem; }
/* 6.87.0: persistent fullscreen toolbar. In fullscreen, the page-level
   toolbar is invisible behind the fixed-position #rd-container. Clone
   the toolbar inside the container as an absolute-positioned overlay
   that fades on mouse idle. Same IDs to keep the existing handlers
   wired. */
#rd-container.fullscreen .rd-toolbar-floating { display:flex; }
.rd-toolbar-floating {
    display:none; position:absolute; top:0; left:0; right:0;
    background:rgba(20, 22, 30, 0.92);
    backdrop-filter:blur(8px);
    padding:0.4rem 0.75rem;
    z-index:11;
    flex-wrap:wrap; gap:0.5rem; align-items:center;
    border-bottom:1px solid rgba(255,255,255,0.08);
    transition:opacity 0.25s;
}
.rd-toolbar-floating.idle { opacity:0; pointer-events:none; }
.rd-toolbar-floating.idle:hover { opacity:1; pointer-events:auto; }
.rd-toolbar-floating .btn { font-size:0.78rem; padding:0.28rem 0.65rem; }
.rd-toolbar-floating select {
    background:#1e2230; color:#eef1f8;
    border:1px solid rgba(255,255,255,0.15);
    padding:0.22rem 0.4rem; border-radius:4px; font-size:0.78rem;
}
.rd-toolbar-floating .separator { width:1px; height:1.4rem; background:rgba(255,255,255,0.15); margin:0 0.2rem; }
.rd-status-bar { display:flex; gap:1rem; padding:0.4rem 0.5rem; font-size:0.8rem; color:var(--text-muted); background:var(--bg-card); border-radius:var(--radius,4px); margin-bottom:0.5rem; align-items:center; }
.rd-status-bar .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.rd-status-bar .dot.green { background:#22c55e; }
.rd-status-bar .dot.red { background:#ef4444; }
.rd-status-bar .dot.yellow { background:#eab308; }
/* v6.6.1: container fits the viewport height by default so the full
   remote desktop is visible without scrolling, and the img is
   letterboxed with object-fit:contain so the remote machine's
   resolution is preserved regardless of aspect ratio. Fullscreen
   mode uses the browser fullscreen API + a black background. */
#rd-container {
    position:relative;
    background:#000;
    border-radius:var(--radius,6px);
    overflow:hidden;
    outline:none;
    width:100%;
    /* Default: fit into the viewport minus header + toolbar. */
    height:calc(100vh - 220px);
    min-height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
}
#rd-container.fullscreen {
    border-radius:0;
    width:100vw;
    height:100vh;
    min-height:0;
    position:fixed;
    top:0; left:0;
    z-index:9999;
}
#rd-screen {
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    display:block;
    image-rendering:auto;
    object-fit:contain;
}
#rd-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#666; font-size:1.1rem; text-align:center; }
/* Panels slide in from the right. Styling is defensive: explicit
   background/color/shadow so inherited context inside #rd-container
   (black background, no text color) doesn't leave the panel
   invisible even when the class toggle works. */
.rd-panel {
    position:absolute; top:0; right:0; width:360px; height:100%;
    background:var(--bg-card, #1a1d27);
    color:var(--text, #eef1f8);
    border-left:1px solid var(--border, #2d3140);
    box-shadow:-4px 0 18px rgba(0,0,0,0.45);
    display:flex; flex-direction:column;
    z-index:10;
    transition:transform 0.2s;
}
.rd-panel.hidden { transform:translateX(100%); pointer-events:none; }
.rd-panel-header { display:flex; justify-content:space-between; align-items:center; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); font-size:0.85rem; font-weight:600; }
/* min-height:0 is critical — without it, a flex item's default min-height
   is `auto` (== content size), so `flex:1` doesn't compress the child
   below content size and the overflow scrollbar never engages. Files
   Panel was showing the first ~10 entries and clipping the rest. */
.rd-panel-body { flex:1; min-height:0; overflow-y:auto; padding:0.5rem; font-size:0.8rem; }
.file-entry { display:flex; align-items:center; gap:0.5rem; padding:0.3rem 0.5rem; cursor:pointer; border-radius:var(--radius,4px); }
.file-entry:hover { background:var(--bg-card); }
.file-entry .icon { width:1.2rem; text-align:center; }
.file-breadcrumb { display:flex; gap:0.25rem; flex-wrap:wrap; padding:0.3rem 0.5rem; font-size:0.8rem; border-bottom:1px solid var(--border); }
.file-breadcrumb span { cursor:pointer; color:var(--primary); }
.file-breadcrumb span:hover { text-decoration:underline; }
.upload-zone { border:2px dashed var(--border); border-radius:var(--radius,4px); padding:1rem; text-align:center; margin:0.5rem; color:var(--text-muted); cursor:pointer; }
.upload-zone.dragover { border-color:var(--primary); background:rgba(59,130,246,0.1); }
.hotkey-hint { font-size:0.7rem; color:var(--text-muted); padding:0 0.2rem; }
.quality-indicator { display:flex; align-items:center; gap:0.3rem; }
.quality-bar { width:40px; height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.quality-bar-fill { height:100%; background:#22c55e; transition:width 0.3s; }

.rd-tb-icon { padding: 0.35rem 0.55rem; font-size: 0.95rem; line-height: 1; min-width: 32px; }
.rd-tb-icon[disabled] { opacity: 0.4; }
.rd-tb-pop { position: relative; display: inline-block; }
.rd-tb-pop > .rd-tb-pop-body {
    display: none; position: absolute; top: 100%; left: 0;
    min-width: 220px; background: var(--bg-card,#1a1d27);
    border: 1px solid var(--border,#2d3140);
    border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    padding: 0.6rem; z-index: 30; margin-top: 0.25rem;
}
.rd-tb-pop.open > .rd-tb-pop-body { display: block; }
.rd-tb-pop-body label { display: block; font-size: 0.74rem; color: var(--text-muted); margin: 0.4rem 0 0.15rem; }
.rd-tb-pop-body select { width: 100%; padding: 0.3rem 0.4rem; background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 4px; font-size: 0.82rem; }
.rd-tb-pop-body button { width: 100%; text-align: left; margin: 0.15rem 0; font-size: 0.82rem; padding: 0.35rem 0.5rem; }
.rd-tb-pop-body .rd-tb-row { display: flex; gap: 0.35rem; }
.rd-tb-pop-body .rd-tb-row > button { flex: 1; }
.rd-tb-active { background: rgba(229,72,77,0.25) !important; }

/* ── Reports index visual harmony (scoped under .rpt-w) ───────────── */
.rpt-w {
    --rpt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --rpt-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --rpt-mute: var(--text-muted);
    --rpt-fg: var(--text);
    --rpt-bd: var(--border);
    --rpt-card: var(--bg-card);
    --rpt-accent: var(--primary, #4a9eff);
    font-family: var(--rpt-sans);
    color: var(--rpt-fg);
    letter-spacing: -0.005em;
}

.rpt-w .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.rpt-w h2 {
    font-family: var(--rpt-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.rpt-w .btn {
    font-family: var(--rpt-sans);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

/* Report card grid */
.rpt-w .report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.rpt-w .report-card {
    text-decoration: none;
    color: inherit;
    background: var(--rpt-card);
    border: 1px solid var(--rpt-bd);
    border-radius: 8px;
    padding: 1.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rpt-w .report-card:hover {
    border-color: var(--rpt-accent) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.rpt-w .report-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.rpt-w .report-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.rpt-w .report-card h3 {
    font-family: var(--rpt-sans);
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    letter-spacing: -0.01em;
}

.rpt-w .report-card p {
    color: var(--rpt-mute);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.4;
}

/* Special card borders */
.rpt-w .report-card.highlight {
    border-width: 2px;
    border-color: var(--rpt-accent);
}

.rpt-w .report-card.superadmin {
    border-color: #58a6ff;
}

/* Staggered fade-in */
@keyframes rpt-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.rpt-w .report-card {
    animation: rpt-fadein 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}

  .meta { color:#666; font-size: 12px; margin-bottom: 16px; }
  .kpis { display: table; width: 100%; margin: 8px 0 16px; }
  .kpi { display: table-cell; background:#f3f4f6; border-radius:6px; padding:10px 14px; margin-right:8px; }
  .kpi .n { font-size: 22px; font-weight:700; color:#111; }
  .kpi .l { font-size: 11px; text-transform: uppercase; color:#666; letter-spacing: .04em; }
  .ok { color:#047857; font-weight:600; }
  .err { color:#b91c1c; font-weight:600; }
  .muted { color:#888; }
  .footer { margin-top: 28px; color:#888; font-size: 11px; border-top:1px solid #e5e7eb; padding-top: 10px; }

.sk-return-detail-header { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; margin:-0.5rem 0 1rem; }
  .sk-return-shell { display:grid; grid-template-columns:minmax(0, 2fr) minmax(280px, 1fr); gap:1rem; align-items:start; }
  .sk-return-stack { display:flex; flex-direction:column; gap:1rem; }
  .sk-return-panel { padding:1rem; background:var(--surface,var(--bg-card)); border:1px solid var(--border); border-radius:8px; }
  .sk-return-panel h3,
  .sk-return-panel h4 { margin:0 0 0.75rem; font-size:0.98rem; font-weight:600; }
  .sk-return-muted { color:var(--text-muted); font-size:0.85rem; line-height:1.45; }
  .sk-return-actions { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
  .sk-return-action-row { display:flex; gap:0.5rem; align-items:end; flex-wrap:wrap; }
  .sk-return-summary { width:100%; border-collapse:collapse; font-size:0.9rem; }
  .sk-return-summary td { padding:0.45rem 0; border-bottom:1px solid var(--border); vertical-align:top; }
  .sk-return-summary td:first-child { color:var(--text-muted); width:42%; }
  .sk-return-history { list-style:none; padding:0; margin:0; }
  .sk-return-history li { padding:0.65rem 0; border-bottom:1px solid var(--border); }
  .sk-return-history li:last-child { border-bottom:none; }
  .sk-return-lines { overflow-x:auto; }
  .sk-return-lines table { margin:0; min-width:980px; }
  @media (max-width: 1000px) {
    .sk-return-shell { grid-template-columns:1fr; }
  }

.sk-return-form { max-width:1180px; }
  .sk-return-section { margin-bottom:1rem; }
  .sk-return-grid-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1rem; }
  .sk-return-grid-2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; }
  .sk-return-panel { padding:1rem; background:var(--surface,var(--bg-card)); border:1px solid var(--border); border-radius:8px; }
  .sk-return-panel h3,
  .sk-return-section h3 { margin:0 0 0.75rem; font-size:0.98rem; font-weight:600; }
  .sk-return-help { color:var(--text-muted); font-size:0.85rem; line-height:1.45; margin:0.5rem 0 0; }
  .sk-return-actions { margin-top:1.25rem; display:flex; gap:0.5rem; flex-wrap:wrap; }
  .sk-return-lines { margin-top:0.5rem; }
  .sk-return-lines .form-input { min-width:0; }
  .sk-return-lines td,
  .sk-return-lines th { vertical-align:middle; }
  @media (max-width: 900px) {
    .sk-return-grid-3,
    .sk-return-grid-2 { grid-template-columns:1fr; }
    .sk-return-lines { overflow-x:auto; }
    .sk-return-lines table { min-width:980px; }
  }

.sk-return-overview { display:grid; grid-template-columns:repeat(4, minmax(150px, 1fr)); gap:0.75rem; margin-bottom:1rem; }
  .sk-return-metric { display:flex; flex-direction:column; gap:0.2rem; padding:0.85rem 1rem; background:var(--surface,var(--bg-card)); border:1px solid var(--border); border-radius:8px; }
  .sk-return-metric-label { color:var(--text-muted); font-size:0.75rem; text-transform:uppercase; font-weight:600; letter-spacing:0.04em; }
  .sk-return-metric-value { color:var(--text); font-size:1.45rem; font-weight:700; line-height:1.15; }
  .sk-return-metric-sub { color:var(--text-muted); font-size:0.78rem; }
  .sk-return-filter-card { margin-bottom:1rem; }
  .sk-return-list-filter { display:grid; grid-template-columns:repeat(6, minmax(130px, 1fr)); gap:0.75rem; align-items:end; padding:1rem; }
  .sk-return-list-filter label { display:flex; flex-direction:column; gap:0.25rem; font-size:0.78rem; color:var(--text-muted); }
  .sk-return-list-filter .sk-return-check { flex-direction:row; align-items:center; padding-bottom:0.55rem; cursor:pointer; }
  .sk-return-list-filter-actions { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
  .sk-return-list-meta { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; margin:-0.25rem 0 1rem; color:var(--text-muted); font-size:0.82rem; }
  .sk-return-list-meta .skui-chip { cursor:default; }
  .sk-return-list-table td,
  .sk-return-list-table th { white-space:nowrap; }
  .sk-return-list-table td:nth-child(3) { white-space:normal; min-width:180px; }
  .sk-return-row { cursor:pointer; }
  .sk-return-primary-link { color:inherit; text-decoration:none; }
  .sk-return-primary-link:hover { color:var(--accent); text-decoration:underline; }
  .sk-return-pagination { margin-top:1rem; display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; }
  @media (max-width: 1180px) {
    .sk-return-list-filter { grid-template-columns:repeat(3, minmax(150px, 1fr)); }
  }
  @media (max-width: 900px) {
    .sk-return-overview { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .sk-return-overview { grid-template-columns:1fr; }
    .sk-return-list-filter { grid-template-columns:1fr; }
    .sk-return-list-filter .sk-return-check { padding-bottom:0; }
  }

.sb-badge { display:inline-block; padding:0.12rem 0.5rem; border-radius:999px; font-size:0.7rem;
            font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.sb-badge.open { background:rgba(231,76,60,0.15); color:#e74c3c; }
.sb-badge.fixed { background:rgba(39,174,96,0.15); color:#27ae60; }
.sb-badge.dismissed { background:rgba(127,127,127,0.12); color:var(--text-muted); }

.sb-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin:0.75rem 0; }
.sb-detail-card { padding:1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.sb-detail-card h3 { font-size:0.82rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 0.65rem 0; }
.sb-detail-card .row { display:flex; justify-content:space-between; padding:0.35rem 0; border-bottom:1px solid var(--border); font-size:0.84rem; }
.sb-detail-card .row:last-child { border-bottom:none; }
.sb-detail-card .row .k { color:var(--text-muted); }
.sb-detail-card .row .v { font-weight:500; }
.sb-detail-card .row .v.mono { font-family:var(--font-mono, monospace); font-size:0.78rem; }

.sb-traceback { background:var(--bg); border:1px solid var(--border); border-radius:8px;
                padding:0.85rem; font-family:var(--font-mono, monospace); font-size:0.78rem;
                white-space:pre-wrap; max-height:400px; overflow-y:auto; margin-top:0.75rem;
                color:var(--text-muted); }
.sb-actions { display:flex; gap:0.5rem; margin:0.75rem 0; }

.sb-stats-sm { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.75rem; margin:0.75rem 0; }
.sb-stat-sm { padding:0.75rem; border:1px solid var(--border); border-radius:8px; background:var(--bg-2, var(--bg)); text-align:center; }
.sb-stat-sm .label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.sb-stat-sm .value { font-size:1.3rem; font-weight:700; margin-top:0.15rem; }

.sb-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.sb-table th { text-align:left; padding:0.5rem 0.7rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.sb-table td { padding:0.45rem 0.7rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.sb-table .mono { font-family:var(--font-mono, monospace); font-size:0.78rem; color:var(--text-muted); }
.sb-badge { display:inline-block; padding:0.12rem 0.5rem; border-radius:999px; font-size:0.7rem;
            font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.sb-badge.open { background:rgba(231,76,60,0.15); color:#e74c3c; }
.sb-badge.fixed { background:rgba(39,174,96,0.15); color:#27ae60; }
.sb-badge.dismissed { background:rgba(127,127,127,0.12); color:var(--text-muted); }
.sb-bug-actions { display:flex; gap:0.35rem; }
.sb-bug-actions form { display:inline; }

.sb-filter { display:flex; gap:0.5rem; margin:0.5rem 0; }
.sb-filter .btn { font-size:0.78rem; padding:0.3rem 0.7rem; }
.sb-filter .btn.active { background:var(--accent); color:#fff; }

/* ── Stat cards ── */
.sb-stats { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0.85rem; margin:1rem 0; }
.sb-stat { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.sb-stat .label { font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }
.sb-stat .value { font-size:1.55rem; font-weight:700; margin-top:0.2rem; }
.sb-stat.ok .value { color:#27ae60; }
.sb-stat.fail .value { color:#e74c3c; }
.sb-stat.warn .value { color:#f59e0b; }
.sb-stat.info .value { color:#38bdf8; }
.sb-stat.muted .value { color:var(--text-muted); }

/* ── Run indicator ── */
.sb-run-indicator { display:inline-flex; align-items:center; gap:6px; font-size:0.8rem; padding:0.35rem 0.85rem; border-radius:999px; margin-left:0.75rem; }
.sb-run-indicator.active { background:rgba(56,189,248,0.12); color:#38bdf8; border:1px solid rgba(56,189,248,0.3); }
.sb-run-indicator.idle { background:rgba(127,127,127,0.08); color:var(--text-muted); border:1px solid var(--border); }
.sb-pulse { width:7px; height:7px; border-radius:50%; }
.sb-run-indicator.active .sb-pulse { background:#38bdf8; animation:sb-pulse-anim 1.5s ease-in-out infinite; }
@keyframes sb-pulse-anim {
  0%, 100% { box-shadow:0 0 0 0 rgba(56,189,248,0.4); }
  50% { box-shadow:0 0 0 5px rgba(56,189,248,0); }
}
.sb-run-indicator.idle .sb-pulse { background:var(--text-muted); }

/* ── Action bar ── */
.sb-actions { display:flex; gap:0.5rem; align-items:center; margin:0.75rem 0; flex-wrap:wrap; }
.sb-actions .btn { display:inline-flex; align-items:center; gap:4px; }

/* ── Chart container ── */
.sb-chart-row { display:grid; grid-template-columns:2fr 1fr; gap:0.85rem; margin:0.85rem 0; }
.sb-chart-card { padding:1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.sb-chart-card h3 { font-size:0.82rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 0.65rem 0; }

/* ── Tables ── */
.sb-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.sb-table th { text-align:left; padding:0.5rem 0.7rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.sb-table td { padding:0.45rem 0.7rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.sb-table .mono { font-family:var(--font-mono, monospace); font-size:0.78rem; color:var(--text-muted); }

/* ── Badges ── */
.sb-badge { display:inline-block; padding:0.12rem 0.5rem; border-radius:999px; font-size:0.7rem;
            font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.sb-badge.open { background:rgba(231,76,60,0.15); color:#e74c3c; }
.sb-badge.fixed { background:rgba(39,174,96,0.15); color:#27ae60; }
.sb-badge.dismissed { background:rgba(127,127,127,0.12); color:var(--text-muted); }
.sb-badge.running { background:rgba(56,189,248,0.15); color:#38bdf8; }
.sb-badge.completed { background:rgba(39,174,96,0.12); color:#27ae60; }
.sb-badge.error { background:rgba(231,76,60,0.15); color:#e74c3c; }

/* ── Section headers ── */
.sb-section { margin:1.25rem 0; }
.sb-section h2 { font-size:0.95rem; font-weight:600; margin:0 0 0.5rem 0; display:flex; align-items:center; gap:0.5rem; }
.sb-section h2 .count { font-size:0.75rem; background:var(--surface, var(--bg)); padding:1px 7px;
                         border-radius:999px; border:1px solid var(--border); color:var(--text-muted); }

/* ── Bug detail row ── */
.sb-bug-actions { display:flex; gap:0.35rem; }
.sb-bug-actions form { display:inline; }

/* ── Empty state ── */
.sb-empty { text-align:center; color:var(--text-muted); padding:2rem; font-size:0.9rem; }

/* ── Autocorrect output ── */
.sb-output-box { background:var(--bg); border:1px solid var(--border); border-radius:8px;
                 padding:0.85rem; font-family:var(--font-mono, monospace); font-size:0.78rem;
                 white-space:pre-wrap; max-height:300px; overflow-y:auto; margin-top:0.75rem;
                 color:var(--text-muted); display:none; }
.sb-output-box.visible { display:block; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sb-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .sb-chart-row { grid-template-columns:1fr; }
}
@media (max-width: 500px) {
  .sb-stats { grid-template-columns:1fr; }
}

.sb-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.sb-table th { text-align:left; padding:0.5rem 0.7rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.sb-table td { padding:0.45rem 0.7rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.sb-table .mono { font-family:var(--font-mono, monospace); font-size:0.78rem; color:var(--text-muted); }
.sb-badge { display:inline-block; padding:0.12rem 0.5rem; border-radius:999px; font-size:0.7rem;
            font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.sb-badge.running { background:rgba(56,189,248,0.15); color:#38bdf8; }
.sb-badge.completed { background:rgba(39,174,96,0.12); color:#27ae60; }
.sb-badge.error { background:rgba(231,76,60,0.15); color:#e74c3c; }

.clone-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.clone-card h3 { margin:0 0 .6rem; font-size:.95rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.clone-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:.4rem .8rem; font-size:.85rem; }
.clone-grid .lbl { color:var(--text-muted); }
.cand-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.cand-table th, .cand-table td { padding:.4rem .55rem; text-align:left; border-bottom:1px solid var(--border); }
.cand-table th { background:var(--bg); color:var(--text-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.has-tmpl { display:inline-block; padding:.1rem .55rem; border-radius:10px; background:#f59e0b22; color:#f59e0b; font-size:.7rem; font-weight:600; }
.no-tmpl  { display:inline-block; padding:.1rem .55rem; border-radius:10px; background:#9ca3af22; color:#9ca3af; font-size:.7rem; font-weight:600; }
.checkrow { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; cursor:pointer; }

/* ── Scheduled reports visual harmony (scoped under .srpt-w) ───────── */
.srpt-w {
    --srpt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --srpt-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --srpt-mute: var(--text-muted);
    --srpt-fg: var(--text);
    --srpt-bd: var(--border);
    --srpt-card: var(--bg-card);
    --srpt-accent: var(--primary, #4a9eff);
    font-family: var(--srpt-sans);
    color: var(--srpt-fg);
    letter-spacing: -0.005em;
}

.srpt-w .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.srpt-w h2 {
    font-family: var(--srpt-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Reports table */
.srpt-w .reports-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.srpt-w .reports-table thead th {
    font-family: var(--srpt-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--srpt-mute);
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--srpt-bd);
}

.srpt-w .reports-table tbody td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--srpt-bd);
    vertical-align: middle;
}

.srpt-w .reports-table tbody tr:last-child td {
    border-bottom: none;
}

.srpt-w .reports-table strong {
    font-weight: 600;
}

.srpt-w .reports-table .mono {
    font-family: var(--srpt-mono);
    font-size: 0.75rem;
}

/* Badges */
.srpt-w .badge {
    display: inline-block;
    font-family: var(--srpt-mono);
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.srpt-w .badge-success {
    background: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.srpt-w .badge-danger {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

.srpt-w .badge-warning {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.srpt-w .badge-unknown {
    background: rgba(149, 165, 166, 0.15);
    color: #95a5a6;
}

.srpt-w .error-detail {
    display: block;
    font-family: var(--srpt-mono);
    font-size: 0.65rem;
    color: var(--srpt-mute);
    margin-top: 2px;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Form actions */
.srpt-w .actions-cell {
    white-space: nowrap;
}

.srpt-w .actions-cell form {
    display: inline;
    margin-right: 0.25rem;
}

.srpt-w .btn {
    font-family: var(--srpt-sans);
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

/* Create form card */
.srpt-w .card {
    background: var(--srpt-card);
    border: 1px solid var(--srpt-bd);
    border-radius: 8px;
    padding: 1.25rem;
}

.srpt-w .card h3 {
    font-family: var(--srpt-sans);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

.srpt-w .create-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.srpt-w .form-group {
    margin: 0;
}

.srpt-w .form-group label {
    display: block;
    font-family: var(--srpt-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--srpt-mute);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.srpt-w .form-input {
    font-family: var(--srpt-sans);
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    background: var(--bg-input);
    color: var(--srpt-fg);
    border: 1px solid var(--srpt-bd);
    border-radius: 6px;
}

.srpt-w .form-input[style*="min-width"] {
    min-width: inherit;
}

.sd-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0.9rem; margin:1rem 0; }
.sd-stat { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.sd-stat .label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.sd-stat .value { font-size:1.5rem; font-weight:700; margin-top:0.25rem; }
.sd-stat.ok .value { color:#27ae60; }
.sd-stat.warn .value { color:#e67e22; }
.sd-stat.fail .value { color:#e74c3c; }

.sd-section { margin-top:1.25rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px;
              background:var(--bg-2, var(--bg)); }
.sd-section h3 { margin:0 0 0.6rem 0; font-size:1rem; }
.sd-section .empty { color:var(--text-muted); font-style:italic; }
.sd-list { margin:0; padding-left:1.25rem; font-family:var(--font-mono, monospace); font-size:0.85rem; columns:2; }
@media (max-width: 720px) { .sd-list { columns:1; } }
.sd-toolbar { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.5rem; }
.sd-meta { color:var(--text-muted); font-size:0.85rem; }

.scr-form-w {
  --sf-bg: var(--bg-card);
  --sf-bg-subtle: var(--bg-subtle);
  --sf-border: var(--border);
  --sf-text: var(--text);
  --sf-text-muted: var(--text-muted);
  --sf-primary: var(--primary);
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  animation: sfFadeIn 0.4s ease-out;
  max-width: 700px;
}
@keyframes sfFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sf-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}
.sf-hdr h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sf-form-group {
  margin-bottom: 1.25rem;
}
.sf-label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--sf-text);
}
.sf-input {
  width: 100%;
  padding: 0.6rem;
  background: var(--sf-bg-subtle);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  color: var(--sf-text);
  font-size: 0.9rem;
}
.sf-textarea {
  width: 100%;
  padding: 0.6rem;
  background: var(--sf-bg-subtle);
  border: 1px solid var(--sf-border);
  border-radius: 6px;
  color: var(--sf-text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  resize: vertical;
}
.sf-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sf-border);
  margin-top: 1.5rem;
}

.scr-lib-w {
  --sl-bg: var(--bg-card);
  --sl-bg-subtle: var(--bg-subtle);
  --sl-border: var(--border);
  --sl-text: var(--text);
  --sl-text-muted: var(--text-muted);
  --sl-primary: var(--primary);
  --sl-green: #3fb950;
  --sl-red: #f85149;
  font-family: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  animation: slFadeIn 0.4s ease-out;
}
@keyframes slFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sl-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
.sl-hdr h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sl-hint {
  color: var(--sl-text-muted);
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}
.sl-cat-header {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--sl-text);
  letter-spacing: -0.01em;
}
.sl-card {
  background: var(--sl-bg);
  border: 1px solid var(--sl-border);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  animation: slFadeIn 0.3s ease-out backwards;
}
.sl-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.sl-card-header strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sl-text);
}
.sl-card-actions {
  display: flex;
  gap: 0.4rem;
}
.sl-card-desc {
  color: var(--sl-text-muted);
  font-size: 0.85rem;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}
.sl-card summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--sl-primary);
  user-select: none;
}
.sl-card summary:hover {
  text-decoration: underline;
}
.sl-card-code {
  background: var(--sl-bg-subtle);
  border: 1px solid var(--sl-border);
  border-radius: 6px;
  padding: 0.75rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  overflow-x: auto;
  margin: 0.5rem 0 0.75rem 0;
}
.sl-run-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sl-border);
}
.sl-run-bar .hint {
  font-size: 0.8rem;
  color: var(--sl-text-muted);
}
.sl-run-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.sl-machine-select {
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
  background: var(--sl-bg-subtle);
  border: 1px solid var(--sl-border);
  border-radius: 4px;
  color: var(--sl-text);
  min-width: 180px;
}
.sl-empty {
  text-align: center;
  padding: 2rem;
  color: var(--sl-text-muted);
  font-size: 0.9rem;
}
.sl-empty a {
  color: var(--sl-primary);
  text-decoration: none;
}
.sl-empty a:hover {
  text-decoration: underline;
}

.sec-logs-w { --sec-red: #e74c3c; --sec-green: #2ecc71; --sec-yellow: #f0ad4e; --sec-blue: #3498db; --sec-orange: #e67e22; --sec-purple: #8e44ad; --sec-gray: #7f8c8d; }
    .sec-logs-w .sec-tabs { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1rem; }
    .sec-logs-w .sec-tab {
        padding:0.6rem 1.2rem; font-size:0.9rem; cursor:pointer; border:none; background:none;
        color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-2px;
        transition:all 0.15s; font-family:'Inter Tight', sans-serif; font-weight:500;
    }
    .sec-logs-w .sec-tab:hover { color:var(--text); }
    .sec-logs-w .sec-tab.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
    .sec-logs-w .sec-panel { display:none; }
    .sec-logs-w .sec-panel.active { display:block; }
    .sec-logs-w .filter-bar { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }
    .sec-logs-w .badge {
        display:inline-block; padding:0.15rem 0.5rem; border-radius:3px; font-size:0.72rem;
        font-weight:600; font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:0.03em;
    }
    .sec-logs-w .badge-success { background:rgba(46,204,113,0.15); color:var(--sec-green); }
    .sec-logs-w .badge-fail { background:rgba(231,76,60,0.15); color:var(--sec-red); }
    .sec-logs-w .badge-info { background:rgba(52,152,219,0.15); color:var(--sec-blue); }
    .sec-logs-w .badge-warning { background:rgba(240,173,78,0.15); color:#d35400; }
    .sec-logs-w .badge-critical { background:rgba(231,76,60,0.15); color:var(--sec-red); }
    .sec-logs-w .log-table tr.log-ERROR { background:rgba(231,76,60,0.05); }
    .sec-logs-w .log-table tr.log-WARN { background:rgba(240,173,78,0.05); }

.sec-pos-w { --sec-green: #2ecc71; --sec-yellow: #f0ad4e; --sec-orange: #e67e22; --sec-red: #e74c3c; --sec-bg-subtle: #f8f9fa; }
    .sec-pos-w .overall-card {
        background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
        padding:1.5rem; text-align:center; opacity:0; animation:fadeSlideIn 0.5s ease forwards;
    }
    .sec-pos-w .breakdown-card {
        background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
        padding:1.25rem; opacity:0; animation:fadeSlideIn 0.5s ease 0.08s forwards;
    }
    .sec-pos-w .risk-card {
        background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
        padding:1rem; text-align:center; opacity:0; animation:fadeSlideIn 0.5s ease forwards;
    }
    .sec-pos-w .risk-card:nth-child(1) { animation-delay:0.12s; border-top:3px solid #e74c3c; }
    .sec-pos-w .risk-card:nth-child(2) { animation-delay:0.16s; border-top:3px solid #e67e22; }
    .sec-pos-w .risk-card:nth-child(3) { animation-delay:0.2s; border-top:3px solid #f0ad4e; }
    .sec-pos-w .risk-card:nth-child(4) { animation-delay:0.24s; border-top:3px solid #2ecc71; }
    .sec-pos-w .risk-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
    .sec-pos-w .overall-grid { display:grid; grid-template-columns:250px 1fr; gap:1.5rem; margin-bottom:1.5rem; }
    .sec-pos-w h4 {
        font-family:'Inter Tight', sans-serif; font-size:0.95rem; font-weight:600; margin:0 0 1rem 0;
    }
    .sec-pos-w .overall-score {
        font-family:'JetBrains Mono', monospace; font-size:3.5rem; font-weight:700; letter-spacing:-0.02em;
    }
    .sec-pos-w .risk-label { font-size:0.8rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
    .sec-pos-w .risk-count { font-family:'JetBrains Mono', monospace; font-size:2rem; font-weight:700; }
    .sec-pos-w .breakdown-row { display:flex; align-items:center; gap:0.5rem; font-size:0.8rem; }
    .sec-pos-w .breakdown-row .label { width:120px; color:var(--text-muted); }
    .sec-pos-w .breakdown-row .score {
        font-family:'JetBrains Mono', monospace; min-width:35px; text-align:right; font-weight:600;
    }
    .sec-pos-w .bar-mini { flex:1; height:6px; background:var(--sec-bg-subtle); border-radius:3px; overflow:hidden; }
    .sec-pos-w .bar-mini-fill { height:100%; border-radius:3px; transition:width 0.5s ease; }
    @keyframes fadeSlideIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    @media (max-width:1024px) {
        .sec-pos-w .overall-grid { grid-template-columns:1fr; }
        .sec-pos-w .risk-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (prefers-color-scheme: dark) {
        .sec-pos-w { --sec-bg-subtle: #1a1a1a; }
    }

.stat-cards { display:flex; gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.8rem 1.2rem; text-align:center; min-width:120px; }
.stat-card .num { font-size:1.4rem; font-weight:700; }
.stat-card .label { font-size:0.75rem; color:var(--text-muted); }
.tab-bar { display:flex; gap:0; margin-bottom:1.5rem; border-bottom:2px solid var(--border); }
.tab-bar a { padding:0.6rem 1.2rem; color:var(--text-muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-2px; font-size:0.85rem; }
.tab-bar a.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-bar a:hover { color:var(--text); }
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:600px; width:90%; max-height:85vh; overflow-y:auto; }
.modal-box h3 { margin-top:0; margin-bottom:1rem; }
.badge-new { background:rgba(52,152,219,0.15); color:#3498db; }
.badge-approved { background:rgba(46,204,113,0.15); color:#2ecc71; }
.badge-in_progress { background:rgba(241,196,15,0.15); color:#f1c40f; }
.badge-completed { background:rgba(70,167,88,0.15); color:#46a758; }
.badge-cancelled { background:rgba(231,76,60,0.15); color:#e74c3c; }

        .container { max-width:900px; margin:0 auto; padding:2rem 1rem; }
        .subtitle { color:var(--text-muted); font-size:0.9rem; margin-bottom:2rem; }
        .category-label { font-size:1rem; font-weight:600; margin:1.5rem 0 0.75rem; color:var(--primary); text-transform:uppercase; letter-spacing:0.05em; }
        .card h3 { font-size:1rem; margin-bottom:0.3rem; }
        .card .desc { color:var(--text-muted); font-size:0.85rem; margin-bottom:0.5rem; }
        .card .meta { display:flex; gap:1rem; font-size:0.78rem; color:var(--text-muted); }
        input, textarea, select { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); padding:0.5rem 0.75rem; width:100%; font-size:0.9rem; margin-bottom:0.75rem; }
        label { display:block; font-size:0.82rem; font-weight:600; margin-bottom:0.25rem; color:var(--text-muted); }
        .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1000; align-items:center; justify-content:center; }
        .modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; max-width:500px; width:90%; max-height:85vh; overflow-y:auto; }
        .flash { padding:0.75rem 1rem; border-radius:var(--radius); margin-bottom:1rem; font-size:0.85rem; }
        .flash-success { background:rgba(70,167,88,0.15); color:var(--green); border:1px solid rgba(70,167,88,0.3); }
        .flash-error { background:rgba(231,76,60,0.15); color:#e74c3c; border:1px solid rgba(231,76,60,0.3); }

.svc-mon-w {
    --sm-fg: var(--text);
    --sm-mute: var(--text-muted);
    --sm-bg: var(--bg);
    --sm-card: var(--bg-card, var(--card-bg));
    --sm-bd: var(--border, var(--border-color));
    --sm-ok: #22c55e;
    --sm-err: #ef4444;
    --sm-accent: var(--primary, #4a9eff);
    --sm-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --sm-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    font-family: var(--sm-sans);
    color: var(--sm-fg);
    letter-spacing: -0.005em;
}

.svc-mon-w h2 {
    font-family: var(--sm-sans);
    letter-spacing: -0.01em;
}

/* ── Form card ──────────────────────────────────────────────────── */
.svc-mon-w .sm-form-card {
    background: var(--sm-card); border: 1px solid var(--sm-bd);
    border-radius: 8px; padding: 1rem;
    margin-bottom: 1.5rem;
}
.svc-mon-w .sm-form-card label {
    font-family: var(--sm-sans); font-size: 0.8rem; font-weight: 500;
}
.svc-mon-w .sm-form-card input[type="text"] {
    background: var(--sm-bg); border: 1px solid var(--sm-bd);
    border-radius: 4px; padding: 0.5rem;
    font-family: var(--sm-mono); font-size: 0.8rem; color: var(--sm-fg);
}
.svc-mon-w .sm-form-card input[type="text"]:focus {
    outline: none; border-color: var(--sm-accent);
}
.svc-mon-w .sm-form-card input[type="checkbox"] {
    cursor: pointer;
}
.svc-mon-w .sm-form-checkbox {
    font-size: 0.8rem; display: flex; align-items: center; gap: 0.4rem;
    cursor: pointer; user-select: none;
}

/* ── Table ──────────────────────────────────────────────────────── */
.svc-mon-w .sm-table-wrap {
    background: var(--sm-card); border: 1px solid var(--sm-bd);
    border-radius: 6px; overflow-x: auto;
}
.svc-mon-w .sm-table-wrap table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.svc-mon-w .sm-table-wrap thead th {
    text-align: left; padding: 8px 10px;
    background: var(--sm-card);
    border-bottom: 1px solid var(--sm-bd);
    font-family: var(--sm-mono); font-size: 0.66rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--sm-mute);
    font-weight: 600; white-space: nowrap;
}
.svc-mon-w .sm-table-wrap tbody td {
    padding: 9px 10px; vertical-align: middle; line-height: 1.3;
}
.svc-mon-w .sm-table-wrap tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.svc-mon-w .sm-table-wrap tbody tr:hover { background: rgba(74,158,255,0.06); }

/* ── Service name (mono) ────────────────────────────────────────── */
.svc-mon-w .sm-svc-name {
    font-family: var(--sm-mono); font-size: 0.8rem;
    background: rgba(255,255,255,0.04);
    padding: 3px 7px; border-radius: 3px;
    border: 1px solid var(--sm-bd);
}

/* ── Toggle buttons ─────────────────────────────────────────────── */
.svc-mon-w .sm-toggle-active {
    background: var(--sm-accent); color: #fff; border: none;
    font-family: var(--sm-mono); font-size: 0.7rem;
}
.svc-mon-w .sm-toggle-disabled {
    background: transparent; color: var(--sm-mute);
    border: 1px solid var(--sm-bd);
    font-family: var(--sm-mono); font-size: 0.7rem;
}

.svc-mon-w .sm-yes { color: var(--sm-ok); font-family: var(--sm-mono); font-size: 0.75rem; }
.svc-mon-w .sm-no { color: var(--sm-mute); font-family: var(--sm-mono); font-size: 0.75rem; }

/* Staggered row fade-in */
@keyframes sm-rowin { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.svc-mon-w .sm-table-wrap tbody tr {
    animation: sm-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards;
}
.svc-mon-w .sm-table-wrap tbody tr:nth-child(1) { animation-delay: 0ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(2) { animation-delay: 50ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(3) { animation-delay: 100ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(4) { animation-delay: 150ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(5) { animation-delay: 200ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(6) { animation-delay: 250ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(7) { animation-delay: 300ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(8) { animation-delay: 350ms; }
.svc-mon-w .sm-table-wrap tbody tr:nth-child(n+9) { animation: none; }

.set-w {
    --set-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --set-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --set-on: #22c55e;
    --set-off: #ef4444;
    --set-warn: #f59e0b;
    --set-info: #38bdf8;
    --set-accent: var(--primary, #4a9eff);
    --set-mute: var(--text-muted);
    font-family: var(--set-sans);
    letter-spacing: -0.005em;
    animation: set-fade-in 0.4s ease-out;
}

@keyframes set-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Compact header bar ────────────────────────────────────────── */
.set-w .set-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.set-w .set-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.set-w .set-hint {
    font-family: var(--set-mono); font-size: 0.66rem;
    color: var(--set-mute); text-transform: uppercase; letter-spacing: 0.16em;
    margin: 0 0 1rem; padding: 0;
}

/* ── Form sections ─────────────────────────────────────────────── */
.set-w .set-section {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 1.2rem 1.4rem; margin-bottom: 2rem;
}
.set-w .set-section h3 {
    font-size: 0.9rem; font-weight: 600; margin: 0 0 0.5rem;
    color: var(--text);
}
.set-w .set-section h4 {
    font-size: 0.8rem; font-weight: 600; margin: 1.2rem 0 0.5rem;
    color: var(--set-mute); text-transform: uppercase; letter-spacing: 0.08em;
}
.set-w .set-section > p {
    font-size: 0.82rem; color: var(--set-mute); margin-bottom: 1rem; line-height: 1.4;
}
.set-w .set-section small {
    font-size: 0.75rem; color: var(--set-mute);
}
.set-w .set-section code {
    font-family: var(--set-mono); font-size: 0.75rem;
    background: rgba(255,255,255,0.05); padding: 1px 4px; border-radius: 3px;
}
.set-w .set-section a {
    color: var(--set-accent);
}

.set-w .set-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem; margin-bottom: 1rem;
}
.set-w .set-field {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.set-w .set-field label {
    font-size: 0.8rem; font-weight: 500; color: var(--text);
}
.set-w .set-input {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--set-mono); font-size: 0.74rem;
}
.set-w .set-input:focus { outline: none; border-color: var(--set-accent); }
.set-w .set-select {
    padding: 0.4rem 0.6rem; background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--set-sans); font-size: 0.82rem;
}
.set-w .set-select:focus { outline: none; border-color: var(--set-accent); }

.set-w .set-pwd-field {
    display: flex; gap: 0.35rem;
}
.set-w .set-pwd-field input {
    flex: 1;
}

/* ── Feature toggle cards ──────────────────────────────────────── */
.set-w .set-card {
    background: rgba(255,255,255,0.02); padding: 0.6rem 0.8rem;
    border-radius: 4px; border: 1px solid var(--border);
    display: flex; align-items: center; gap: 0.6rem;
}
.set-w .set-card-title {
    font-size: 0.82rem; font-weight: 600; color: var(--text);
}
.set-w .set-card-desc {
    font-size: 0.75rem; color: var(--set-mute);
}

/* ── Toggle switch ─────────────────────────────────────────────── */
.set-w .toggle-switch { position:relative; display:inline-block; width:40px; height:22px; flex-shrink: 0; }
.set-w .toggle-switch input { opacity:0; width:0; height:0; }
.set-w .toggle-slider {
    position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
    background:#555; border-radius:22px; transition:0.2s;
}
.set-w .toggle-slider:before {
    content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px;
    background:#fff; border-radius:50%; transition:0.2s;
}
.set-w .toggle-switch input:checked + .toggle-slider { background:var(--set-accent); }
.set-w .toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); }

/* ── Code block ────────────────────────────────────────────────── */
.set-w .set-code {
    background: rgba(0,0,0,0.3); padding: 0.75rem 1rem; border-radius: 4px;
    font-family: var(--set-mono); font-size: 0.72rem; line-height: 1.5;
    overflow-x: auto;
}
.set-w .set-code label {
    display: block; font-size: 0.7rem; color: var(--set-mute);
    margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.08em;
}
.set-w .set-code code {
    color: var(--set-accent);
}

/* ── Test result ───────────────────────────────────────────────── */
.set-w .set-test {
    font-size: 0.82rem; font-family: var(--set-mono);
}
.set-w .set-test.ok { color: var(--set-on); }
.set-w .set-test.err { color: var(--set-off); }

/* ── Two-column layout: form on the left, sticky ToC on the right ── */
.set-w .set-layout { display:grid; grid-template-columns:minmax(0, 1fr) 220px; gap:1.5rem; align-items:start; }
@media (max-width: 960px) { .set-w .set-layout { grid-template-columns:1fr; } .set-w .set-toc { display:none; } }
.set-w .set-toc { position:sticky; top:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:0.7rem 0.8rem; max-height:calc(100vh - 2rem); overflow:auto; }
.set-w .set-toc-title { font-size:0.65rem; color:var(--set-mute); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; margin-bottom:0.5rem; }
.set-w .set-toc a { display:block; padding:0.3rem 0.5rem; border-radius:4px; color:var(--text); text-decoration:none; font-size:0.78rem; line-height:1.3; }
.set-w .set-toc a:hover { background:rgba(255,255,255,0.04); color:var(--set-accent); }

/* Section anchors get a top-margin offset so jump-to doesn't hide
   the heading behind the page-header bar. */
.set-w h3[id] { scroll-margin-top:1rem; }

.dash-org-logo { height:24px; width:24px; object-fit:contain; border-radius:var(--radius-sm); vertical-align:middle; margin-right:0.4rem; }

.toggle-switch { position:relative; display:inline-block; width:40px; height:22px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#555; border-radius:22px; transition:0.2s; }
.toggle-slider:before { content:""; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:0.2s; }
.toggle-switch input:checked + .toggle-slider { background:var(--primary-color, #3b82f6); }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(18px); }

.shell-type-btn { opacity: 0.6; }
.shell-type-btn.active { opacity: 1; background: var(--accent-color, #4a9eff); color: #fff; }

.smk-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
  .smk-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; }
  .smk-card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .smk-card table { width: 100%; border-collapse: collapse; font-size: 0.8rem; font-family: ui-monospace, monospace; }
  .smk-card th, .smk-card td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .smk-card th { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }
  .smk-card td.num { text-align: right; }
  .smk-ok { color: #10b981; }
  .smk-redir { color: #3b82f6; }
  .smk-warn { color: #f59e0b; }
  .smk-err { color: #ef4444; font-weight: 600; }
  .smk-summary { font-size: 0.9rem; margin-bottom: 1rem; }

.sb-meta { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.6rem; margin-bottom:1rem; }
  .sb-meta-item { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:.6rem .8rem; }
  .sb-meta-item label { display:block; font-size:.68rem; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
  .sb-meta-item span { font-size:.82rem; font-family:monospace; }
  .sb-card { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:.8rem; margin-bottom:1rem; }
  .sb-card h3 { margin:0 0 .5rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); }
  pre.log { font-size:.72rem; white-space:pre-wrap; word-break:break-all; max-height:500px; overflow-y:auto;
            background:var(--bg-input,#111); border:1px solid var(--border); border-radius:4px;
            padding:.6rem; margin:0; color:var(--text); }
  .conf-high { color:#10b981; font-weight:600; }
  .conf-med  { color:#f59e0b; font-weight:600; }
  .conf-low  { color:#ef4444; }

.sb-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
  .sb-table th, .sb-table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--border); }
  .sb-table th { color:var(--text-muted); font-size:0.7rem; text-transform:uppercase; }
  .conf-high { color:#10b981; font-weight:600; }
  .conf-med  { color:#f59e0b; font-weight:600; }
  .conf-low  { color:#ef4444; }
  .badge-yes { background:#10b98122; color:#10b981; border-radius:4px; padding:1px 6px; font-size:.7rem; }
  .badge-no  { background:#ef444422; color:#ef4444; border-radius:4px; padding:1px 6px; font-size:.7rem; }

  @media (prefers-color-scheme: dark) { body { background:#111; color:#eee; } }
  @media (prefers-color-scheme: dark) { .card { background:#1b1c1f; border-color:#2a2c30; } }
  .btn.secondary { background:transparent; color:#2563eb; border:1px solid #2563eb;
                   padding: 0.55rem 1rem; font-size:0.9rem; font-weight:500; }
  .steps { counter-reset: s; padding-left: 0; list-style: none; margin: 1.5rem 0; }
  .steps li { counter-increment: s; padding: 0.5rem 0 0.5rem 2.2rem; position: relative; }
  .steps li::before { content: counter(s); position: absolute; left: 0; top: 0.4rem;
                      width: 1.6rem; height: 1.6rem; border-radius: 50%;
                      background:#2563eb; color:#fff; font-weight:600;
                      display:flex; align-items:center; justify-content:center;
                      font-size:0.85rem; }
  .other-os { margin-top: 1.5rem; font-size: 0.85rem; color: #666; }
  .other-os a { color: #2563eb; margin-right: 1rem; }

  @media (prefers-color-scheme: dark) { body { background:#111; color:#eee; } }
  @media (prefers-color-scheme: dark) { .card { background:#1b1c1f; border-color:#2a2c30; } }
  .pin { font-size: 1.8rem; font-weight: 600; letter-spacing: 0.15em;
         padding: 0.4rem 0.9rem; background:#eef2ff; color:#1e3a8a;
         border-radius: 8px; display: inline-block; }
  @media (prefers-color-scheme: dark) { .pin { background:#1e293b; color:#bfdbfe; } }
  .btn.secondary { background:transparent; color:#2563eb; border:1px solid #2563eb;
                   padding: 0.55rem 1rem; font-size:0.9rem; font-weight:500; }
  .steps { counter-reset: s; padding-left: 0; list-style: none; margin: 1.5rem 0; }
  .steps li { counter-increment: s; padding: 0.5rem 0 0.5rem 2.2rem; position: relative; }
  .steps li::before { content: counter(s); position: absolute; left: 0; top: 0.4rem;
                      width: 1.6rem; height: 1.6rem; border-radius: 50%;
                      background:#2563eb; color:#fff; font-weight:600;
                      display:flex; align-items:center; justify-content:center;
                      font-size:0.85rem; }
  .other-os { margin-top: 1.5rem; font-size: 0.85rem; color: #666; }
  .other-os a { color: #2563eb; margin-right: 1rem; }
  .err { background:#fee2e2; color:#7f1d1d; padding:0.8rem 1rem;
         border-radius:8px; }
  @media (prefers-color-scheme: dark) { .err { background:#3f1d1d; color:#fecaca; } }
  code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
         font-size: 0.85rem; background:#eef2ff; padding:2px 6px; border-radius:4px; }

#sos-container { background:#000; border-radius:var(--radius,6px); overflow:hidden;
                   min-height:480px; position:relative; outline:none; }
  #sos-screen { width:100%; display:block; }
  #sos-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                 color:#ccc; text-align:center; font-size:1rem; }
  .sos-meta { display:flex; gap:1rem; font-size:0.85rem; color:var(--text-muted);
              padding:0.4rem 0; flex-wrap:wrap; }
  .sos-meta .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
  .dot-green { background:#22c55e; }
  .dot-amber { background:#eab308; }
  .dot-red   { background:#ef4444; }
  details.sos-tools { margin:0.6rem 0; border:1px solid var(--border,#2a2a2a);
                      border-radius:6px; padding:0.6rem 0.85rem; background:rgba(255,255,255,0.02); }
  details.sos-tools[open] summary { margin-bottom:0.6rem; }
  details.sos-tools summary { cursor:pointer; font-weight:600; user-select:none; }
  .sos-tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:0.85rem; }
  .sos-tool-card { border:1px solid var(--border,#2a2a2a); border-radius:6px;
                   padding:0.6rem 0.7rem; background:rgba(0,0,0,0.18); }
  .sos-tool-card h4 { margin:0 0 0.45rem 0; font-size:0.95rem; }
  .sos-tool-card textarea { width:100%; min-height:5rem; font-family:monospace;
                            font-size:0.82rem; }
  .sos-tool-card input[type=text] { width:100%; font-family:monospace; font-size:0.82rem; }
  .sos-tool-out { font-family:monospace; font-size:0.78rem; white-space:pre-wrap;
                  background:#0b0b0b; color:#cfcfcf; padding:0.4rem 0.55rem; border-radius:4px;
                  max-height:14rem; overflow:auto; margin-top:0.4rem; }
  .sos-history { margin-top:0.5rem; font-size:0.78rem; color:var(--text-muted); }
  .sos-history div { padding:0.18rem 0; border-bottom:1px dotted rgba(255,255,255,0.06); }
  .sos-history code { color:#9bd; }

.saa-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
  .saa-card h3 { margin-top: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .saa-card pre { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.8rem; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-height: 600px; overflow-y: auto; }
  .saa-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .saa-table th, .saa-table td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: left; }
  .saa-table th { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }
  .saa-status { padding: 0.5rem 0.8rem; border-radius: 4px; margin-bottom: 1rem; font-size: 0.85rem; }
  .saa-ok { background: rgba(34,197,94,0.10); color: #22c55e; border: 1px solid rgba(34,197,94,0.30); }
  .saa-err { background: rgba(239,68,68,0.10); color: #ef4444; border: 1px solid rgba(239,68,68,0.30); }
  .saa-copy-btn { background: var(--primary); color: white; border: none; padding: 0.4rem 0.8rem; border-radius: 4px; cursor: pointer; font-size: 0.78rem; font-weight: 600; }
  .saa-copy-btn:hover { opacity: 0.9; }
  .saa-copy-btn.copied { background: #22c55e; }

.sa-tab { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .sa-tab th, .sa-tab td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: left; }
  .sa-tab th { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }
  .sa-tab td.num { text-align: right; }
  .sa-args { white-space: pre-wrap; word-break: break-all; max-width: 600px; color: var(--text-muted); font-size: 0.7rem; }
  .sa-section { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; margin-bottom: 1rem; }

.sa-tab { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .sa-tab th, .sa-tab td { padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.05); text-align: left; }
  .sa-tab th { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }
  .sa-tab td.num { text-align: right; }
  .sa-high { color: #ef4444; }
  .sa-normal { color: var(--text-muted); }
  .sa-args { white-space: pre-wrap; word-break: break-all; max-width: 600px; color: var(--text-muted); font-size: 0.7rem; }
  .sa-section { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; margin-bottom: 1rem; }

.sa-trend { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; margin-bottom: 1rem; }
  .sa-trend h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .sa-trend-chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .sa-trend-bar { flex: 1; min-width: 4px; background: rgba(59, 130, 246, 0.4); border-top: 2px solid #3b82f6; position: relative; }
  .sa-trend-bar-high { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(239, 68, 68, 0.55); border-top: 2px solid #ef4444; }
  .sa-trend-bar:hover { background: rgba(59, 130, 246, 0.7); }
  .sa-trend-bar:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-card); border: 1px solid var(--border); padding: 4px 6px; font-size: 0.7rem; white-space: nowrap; z-index: 10; }
  .sa-trend-axis { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-muted); font-size: 0.65rem; font-family: ui-monospace, monospace; }
  .sa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .sa-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; }
  .sa-card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .sa-card table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .sa-card th, .sa-card td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .sa-card th { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; }
  .sa-card td.num { text-align: right; }
  .sa-pill-high { color: #ef4444; }
  .sa-pill-normal { color: var(--text-muted); }
  .sa-card pre.args { font-family: ui-monospace, monospace; font-size: 0.7rem; white-space: pre-wrap; word-break: break-all; max-width: 400px; color: var(--text-muted); }

.hlp-w {
    --hlp-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --hlp-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --hlp-accent: var(--primary, #4a9eff);
    --hlp-mute: var(--text-muted);
    font-family: var(--hlp-sans);
    letter-spacing: -0.005em;
}
.hlp-w .ssh-helper { max-width: 640px; margin: 1rem auto; padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--hlp-sans); }
.hlp-w .ssh-helper h2 { margin: 0 0 0.25rem 0; font-size: 1.05rem; }
.hlp-w .ssh-helper .target { color: var(--text-muted); font-family: var(--hlp-mono); font-size: 0.85rem; margin-bottom: 1rem; }
.hlp-w .ssh-helper label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; }
.hlp-w .ssh-helper input[type=text] { width: 100%; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--hlp-mono); }
.hlp-w .ssh-helper .cmd-row { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.5rem; }
.hlp-w .ssh-helper .cmd-row code { flex: 1; padding: 0.6rem 0.75rem; background: #0d1117; border: 1px solid var(--border); border-radius: 4px; color: #79c0ff; font-size: 0.85rem; overflow: auto; white-space: nowrap; font-family: var(--hlp-mono); }
.hlp-w .ssh-helper .actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.hlp-w .ssh-helper .hint { margin-top: 1rem; padding: 0.75rem; background: rgba(88,166,255,0.08); border-left: 3px solid #58a6ff; font-size: 0.8rem; color: var(--text-muted); }
.hlp-w .ssh-helper .copied { color: #2ecc71; font-size: 0.75rem; margin-left: 0.5rem; opacity: 0; transition: opacity 0.3s; }
.hlp-w .ssh-helper .copied.show { opacity: 1; }
.hlp-w .ssh-helper .suggestions { margin-top: 0.4rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hlp-w .ssh-helper .suggestions button { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.75rem; cursor: pointer; font-family: var(--hlp-mono); }
.hlp-w .ssh-helper .suggestions button:hover { background: rgba(88,166,255,0.15); border-color: #58a6ff; }

.ssh-term-wrap { max-width: 720px; margin: 1rem auto; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
  .ssh-term-wrap h2 { margin: 0 0 0.25rem 0; font-size: 1.05rem; }
  .ssh-term-wrap .target { color: var(--text-muted); font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; margin-bottom: 1rem; }
  .ssh-term-wrap label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0.75rem 0 0.25rem; }
  .ssh-term-wrap input[type=text], .ssh-term-wrap input[type=password], .ssh-term-wrap textarea {
    width: 100%; padding: 0.5rem; background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text); font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem;
  }
  .ssh-term-wrap textarea { min-height: 120px; resize: vertical; }
  .ssh-term-wrap .mode-tabs { display: flex; gap: 0.25rem; margin-top: 0.5rem; }
  .ssh-term-wrap .mode-tabs button {
    flex: 1; padding: 0.4rem; background: var(--bg); border: 1px solid var(--border);
    color: var(--text); font-size: 0.75rem; cursor: pointer; border-radius: 4px;
  }
  .ssh-term-wrap .mode-tabs button.active { background: rgba(88,166,255,0.15); border-color: #58a6ff; color: #58a6ff; }
  .ssh-term-wrap .actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
  .ssh-term-wrap .err { color: #f85149; font-size: 0.8rem; margin-top: 0.5rem; min-height: 1em; }
  .ssh-term-wrap .hint { margin-top: 1rem; padding: 0.6rem 0.75rem; background: rgba(88,166,255,0.08); border-left: 3px solid #58a6ff; font-size: 0.75rem; color: var(--text-muted); }

  #ssh-term-full { display: none; }
  #ssh-term-full.active { display: block; }
  #ssh-status-bar {
    padding: 0.5rem 1rem; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 4px; margin-bottom: 0.5rem; display: flex; gap: 1rem; align-items: center;
  }
  #ssh-term-host {
    width: 100%; height: calc(100vh - 220px); min-height: 400px;
    background: #000; border: 1px solid var(--border); border-radius: 4px; padding: 4px;
  }

.ss-form { max-width:760px; }
.ss-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.ss-card h3 { margin:0 0 .8rem; font-size:.95rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.ss-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem 1rem; }
.ss-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.8rem 1rem; }
.ss-form label { display:block; font-size:.78rem; color:var(--text-muted); margin-bottom:.2rem; }
.ss-form .form-input { width:100%; background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:.45rem .6rem; border-radius:6px; font-size:.88rem; }
.ss-checkrow { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; cursor:pointer; }
.ss-checkrow input { margin:0; }
.ss-status { display:inline-block; padding:.15rem .55rem; border-radius:10px; font-size:.7rem; font-weight:600; }
.ss-status.sent { background:#16a34a22; color:#16a34a; }
.ss-status.error { background:#ef444422; color:#ef4444; }
.ss-status.pending { background:#3b82f622; color:#3b82f6; }
@media (max-width:720px) { .ss-grid, .ss-grid-3 { grid-template-columns:1fr; } }

.clone-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:1rem 1.2rem; margin-bottom:1rem; }
.clone-card h3 { margin:0 0 .6rem; font-size:.95rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; }
.clone-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:.4rem .8rem; font-size:.85rem; }
.clone-grid .lbl { color:var(--text-muted); }
.cand-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.cand-table th, .cand-table td { padding:.4rem .55rem; text-align:left; border-bottom:1px solid var(--border); }
.cand-table th { background:var(--bg); color:var(--text-muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
.has-sched { display:inline-block; padding:.1rem .55rem; border-radius:10px; background:#f59e0b22; color:#f59e0b; font-size:.7rem; font-weight:600; }
.no-sched { display:inline-block; padding:.1rem .55rem; border-radius:10px; background:#9ca3af22; color:#9ca3af; font-size:.7rem; font-weight:600; }
.checkrow { display:flex; align-items:center; gap:.5rem; padding:.4rem 0; cursor:pointer; }

.ac-card { background:var(--bg-card); border:1px solid var(--border);
           border-radius:8px; padding:1.25rem 1.5rem; max-width:560px;
           margin:0 auto; }
#payment-element { padding:12px 10px; background:#fff;
                   border:1px solid #e5e7eb; border-radius:6px;
                   min-height:40px; }
#ac-submit { margin-top:1rem; padding:10px 24px; font-weight:600; }
#ac-error { color:#e74c3c; font-size:0.82rem; margin-top:0.75rem; min-height:1em; }
.ac-hint { font-size:0.75rem; color:var(--text-muted); margin-top:0.5rem; }

.skss-w { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: -0.005em; }
.skss-w .skss-badges { display: flex; gap: .35rem; margin-bottom: 1rem; }
.skss-w .skss-badge {
    font-family: ui-monospace, monospace;
    font-size: 0.68rem; font-weight: 700;
    padding: .15rem .55rem; border-radius: 4px;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.skss-w .skss-badge.on    { background: rgba(34,197,94,0.12);  color: #22c55e; border:1px solid rgba(34,197,94,0.4); }
.skss-w .skss-badge.off   { background: rgba(107,114,128,0.12); color: var(--text-muted); border:1px solid var(--border); }
.skss-w .skss-badge.test  { background: rgba(99,91,255,0.12);  color: #635bff; border:1px solid rgba(99,91,255,0.4); }
.skss-w .skss-badge.live  { background: rgba(239,68,68,0.12);  color: #ef4444; border:1px solid rgba(239,68,68,0.4); }

.skss-w .skss-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
@media (max-width: 900px) { .skss-w .skss-grid { grid-template-columns: 1fr; } }

.skss-w .card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 1.1rem 1.2rem;
}
.skss-w .card h3 {
    font-size: 0.74rem; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.06em;
    margin: 0 0 .8rem; font-weight: 600;
}

.skss-w .skss-form label {
    display: block; font-size: 0.78rem; font-weight: 600;
    color: var(--text); margin-bottom: 0.25rem;
}
.skss-w .skss-form input[type="text"],
.skss-w .skss-form input[type="password"],
.skss-w .skss-form select {
    width: 100%; padding: 0.4rem 0.55rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text);
    font-family: ui-monospace, monospace; font-size: 0.82rem;
    margin-bottom: 0.85rem;
}
.skss-w .skss-form input:focus,
.skss-w .skss-form select:focus {
    outline: none; border-color: #635bff;
    box-shadow: 0 0 0 2px rgba(99,91,255,0.18);
}
.skss-w .skss-hint {
    font-size: 0.72rem; color: var(--text-muted);
    margin-top: -0.6rem; margin-bottom: 0.85rem; line-height: 1.4;
}
.skss-w .skss-checkbox {
    display: flex; align-items: center; gap: .45rem;
    margin: .35rem 0 .9rem; cursor: pointer;
    font-size: 0.82rem; color: var(--text);
}
.skss-w .skss-actions { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; align-items: center; }
.skss-w code.tok {
    font-family: ui-monospace, monospace; font-size: 0.78rem;
    background: var(--bg); padding: .12rem .35rem;
    border-radius: 3px; border: 1px solid var(--border);
}
.skss-w .skss-webhook {
    font-family: ui-monospace, monospace; font-size: 0.78rem;
    color: var(--text); word-break: break-all; line-height: 1.4;
    padding: .45rem .6rem; background: var(--bg);
    border: 1px solid var(--border); border-radius: 4px;
}
.skss-w .skss-text {
    font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
}
.skss-w .skss-cards-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.skss-w .skss-cards-table tr { border-top: 1px solid var(--border); }
.skss-w .skss-cards-table tr:first-child { border-top: 0; }
.skss-w .skss-cards-table td { padding: .45rem .25rem; vertical-align: top; }
.skss-w .skss-card-brand { font-family: ui-monospace, monospace; font-weight: 600; }
.skss-w .skss-expiry { font-size: 0.7rem; color: var(--text-muted); margin-top: 2px; }
.skss-w .skss-row-actions { text-align: right; white-space: nowrap; }
.skss-w .skss-empty { font-size: 0.82rem; color: var(--text-muted); padding: .5rem 0; }
.skss-w #str-test-result { font-size: 0.78rem; margin-left: .25rem; }
.skss-w #str-test-result.ok   { color: #22c55e; }
.skss-w #str-test-result.fail { color: #ef4444; }

.su-w { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: -0.005em; }
.su-w h1 { font-size: 1.05rem; margin: 0 0 .25rem; }
.su-w .meta { color: var(--text-muted); font-size: .8rem; margin-bottom: 1rem; }
.su-w h2 { font-size: .9rem; border-bottom: 1px solid var(--border); padding-bottom: .25rem; margin: 1.25rem 0 .5rem; }
.su-w table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.su-w th, .su-w td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.su-w th { font-weight: 600; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.su-w .stripe-id { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--text-muted); }
.su-w .badge { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: .68rem; font-weight: 700; }
.su-w form { display: inline; }
.su-w select, .su-w input[type=number] { font-size: .78rem; padding: .2rem .35rem; max-width: 280px; }
.su-w .btn-link { background: var(--primary, #4a9eff); color: white; border: 0; padding: .25rem .55rem; border-radius: 4px; cursor: pointer; font-size: .72rem; }
.su-w .btn-ignore { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: .25rem .55rem; border-radius: 4px; cursor: pointer; font-size: .72rem; }
.su-w .conflict { color: #f59e0b; font-size: .68rem; }
.su-w .empty { color: var(--text-muted); font-style: italic; padding: .5rem; }

/* 7.08.66: collapse the 2-col main grid + 2-col sub-grids on phones.
   At <840px the main 2-col reflows to stacked; at <520px the inner
   2-col field rows go single-column for full-width touch targets. */
@media (max-width: 840px) {
  .sd-main { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .sd-two-col { grid-template-columns: 1fr !important; }
}
.sd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 7.08.61: mobile pass — hide Contact + W9/Ins/Active columns below
   640px so the essentials (Name + Paid YTD + Outstanding) fit a
   phone screen. Compliance + contact info still on the detail page. */
@media (max-width: 640px) {
  .subl-hide-mobile { display: none; }
}

.si-w { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: -0.005em; }
.si-w .si-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; max-width: 1100px; }
@media (max-width: 900px) { .si-w .si-grid { grid-template-columns: 1fr; } }
.si-w .card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 1rem 1.15rem;
}
.si-w .card h3 {
    font-size: .76rem; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 0.06em;
    margin: 0 0 .1rem; font-weight: 600;
}
.si-w .card p.hint {
    font-size: .76rem; color: var(--text-muted);
    margin: .15rem 0 .8rem; line-height: 1.45;
}
.si-w .btn-row { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.si-w .si-form input[type="text"], .si-w .si-form input[type="password"],
.si-w .si-form input[type="number"] {
    width: 100%; padding: .35rem .55rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 4px; color: var(--text);
    font-family: ui-monospace, monospace; font-size: .82rem;
}
.si-w .si-inline-settings {
    display: flex; flex-wrap: wrap; align-items: end; gap: .5rem;
    margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border);
}
.si-w .si-inline-settings label {
    margin: 0; min-width: 8rem;
}
.si-w .si-inline-settings label.check {
    display: flex; align-items: center; gap: .4rem;
    min-width: auto; padding: .36rem 0; font-weight: 600;
}
.si-w .si-inline-settings input[type="number"] {
    width: 8rem;
}
.si-w .si-form label {
    display: block; font-size: .78rem; font-weight: 600;
    margin: .55rem 0 .2rem; color: var(--text);
}
.si-w .si-form input:focus {
    outline: none; border-color: var(--primary, #4a9eff);
    box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.15);
}
.si-w .progress {
    display: none; margin-top: .8rem; padding: .6rem .8rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 6px;
}
.si-w .progress .top {
    display: flex; justify-content: space-between; align-items: center;
    gap: .5rem; font-size: .82rem; margin-bottom: .35rem;
}
.si-w .progress .counts {
    font-family: ui-monospace, monospace; font-size: .72rem;
    color: var(--text-muted);
}
.si-w .progress .bar-track {
    height: 5px; background: var(--bg-card);
    border-radius: 3px; overflow: hidden;
}
.si-w .progress .bar { height: 100%; width: 0; transition: width .3s; }
.si-w .progress .bar.green   { background: #22c55e; }
.si-w .progress .bar.cyan    { background: #06b6d4; }
.si-w .progress .bar.primary { background: var(--primary, #4a9eff); }
.si-w .err-line {
    display: block; margin-top: .4rem; padding: .3rem .55rem;
    background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.4);
    border-radius: 4px; font-size: .72rem; color: #ef4444;
    font-family: ui-monospace, monospace; line-height: 1.4;
}
.si-w .cancel-btn {
    background: #ef4444; color: #fff; border: 0;
    font-size: .72rem; padding: .2rem .5rem; border-radius: 4px;
    cursor: pointer; display: none;
}

.batch-chip {
      display:inline-flex; align-items:center; gap:.25rem;
      padding:.18rem .55rem; border-radius:999px;
      border:1px solid var(--border); background:var(--bg-input, var(--bg));
      color:var(--text-muted); font-size:.74rem; cursor:pointer;
      user-select:none; transition:all .12s ease;
    }
    .batch-chip:hover { border-color:var(--accent, #4a9eff); color:var(--text); }
    .batch-chip.lit {
      background:rgba(74,158,255,0.18); border-color:var(--accent, #4a9eff);
      color:var(--accent, #4a9eff); font-weight:600;
    }
    .batch-chip[data-type="invoices"].lit  { background:rgba(39,174,96,0.18); border-color:#27ae60; color:#27ae60; }
    .batch-chip[data-type="estimates"].lit { background:rgba(240,173,78,0.18); border-color:#f0ad4e; color:#f0ad4e; }
    .batch-chip[data-type="payments"].lit  { background:rgba(124,58,237,0.18); border-color:#7c3aed; color:#7c3aed; }
    #batch-runbar {
      position:sticky; bottom:0; background:var(--bg-card);
      border:1px solid var(--accent, #4a9eff); border-radius:8px;
      padding:.6rem .9rem; margin-top:.6rem;
      display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
      box-shadow:0 -2px 8px rgba(0,0,0,.15); z-index:10;
    }
    #batch-runbar.empty { display:none; }

.rec-w { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: -0.005em; }
.rec-w h1 { font-size: 1.05rem; margin: 0 0 .25rem; }
.rec-w .meta { color: var(--text-muted); font-size: .8rem; margin-bottom: 1rem; }
.rec-w .totals { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; max-width: 760px; margin-bottom: 1.2rem; }
.rec-w .panel { padding: .8rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
.rec-w .panel .label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.rec-w .panel .big { font-size: 1.4rem; font-weight: 700; margin-top: .15rem; }
.rec-w .panel .sub { font-size: .78rem; color: var(--text-muted); }
.rec-w h2 { font-size: .9rem; border-bottom: 1px solid var(--border); padding-bottom: .25rem; margin: 1.25rem 0 .5rem; }
.rec-w table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.rec-w th, .rec-w td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); text-align: left; }
.rec-w th { font-weight: 600; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.rec-w .id { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--text-muted); }
.rec-w .amt { font-family: ui-monospace, monospace; text-align: right; }
.rec-w .empty { color: var(--text-muted); font-style: italic; padding: .6rem; }

.sra-w { font-family: 'Inter Tight', system-ui, sans-serif; letter-spacing: -0.005em; }
.sra-w h2 { font-size: .95rem; margin: 1.4rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid var(--border); }
.sra-w h2 .count { font-weight: 400; font-size: .78rem; color: var(--text-muted); margin-left: .35rem; }
.sra-w table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.sra-w th { font-weight: 600; color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .35rem .45rem; text-align: left; border-bottom: 1px solid var(--border); }
.sra-w td { padding: .4rem .45rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.sra-w .id { font-family: ui-monospace, monospace; font-size: .7rem; color: var(--text-muted); }
.sra-w .amt { font-family: ui-monospace, monospace; text-align: right; }
.sra-w .empty { color: var(--text-muted); font-style: italic; padding: .6rem 0; font-size: .82rem; }
.sra-w .stat-pill { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sra-w .stat-pill.paid     { background: rgba(34,197,94,0.12); color: #22c55e; }
.sra-w .stat-pill.partial  { background: rgba(99,91,255,0.12); color: #635bff; }
.sra-w .stat-pill.overdue  { background: rgba(239,68,68,0.12); color: #ef4444; }
.sra-w .stat-pill.sent     { background: rgba(59,130,246,0.12); color: #3b82f6; }
.sra-w .stat-pill.draft    { background: rgba(107,114,128,0.12); color: var(--text-muted); }
.sra-w .totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; max-width: 760px; margin-bottom: 1rem; }
.sra-w .panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: .7rem .9rem; }
.sra-w .panel .label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.sra-w .panel .big { font-size: 1.3rem; font-weight: 700; margin-top: .15rem; }
.sra-w .panel .sub { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; }

.syn-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0.9rem; margin:1rem 0; }
.syn-stat { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--bg-2, var(--bg)); }
.syn-stat .label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.syn-stat .value { font-size:1.5rem; font-weight:700; margin-top:0.25rem; }
.syn-stat.ok .value { color:#27ae60; }
.syn-stat.fail .value { color:#e74c3c; }

.syn-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.syn-table th { text-align:left; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border);
                font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.syn-table td { padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.syn-table .mono { font-family:var(--font-mono, monospace); font-size:0.8rem; color:var(--text-muted); }
.syn-badge { display:inline-block; padding:0.15rem 0.55rem; border-radius:999px; font-size:0.72rem;
             font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.syn-badge.ok { background:rgba(39,174,96,0.15); color:#27ae60; }
.syn-badge.fail, .syn-badge.timeout, .syn-badge.error { background:rgba(231,76,60,0.15); color:#e74c3c; }
.syn-badge.idle { background:rgba(127,127,127,0.15); color:var(--text-muted); }

.syn-form { margin-top:1.5rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px;
            background:var(--bg-2, var(--bg)); }
.syn-form summary { cursor:pointer; font-weight:600; font-size:0.95rem; padding:0.25rem 0; }
.syn-form .grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.85rem; margin-top:0.85rem; }
.syn-form label { display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:0.25rem; }
.syn-form input[type="text"], .syn-form input[type="number"], .syn-form select, .syn-form textarea {
    width:100%; padding:0.45rem 0.6rem; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text); font-size:0.85rem;
}
.syn-form textarea { font-family:var(--font-mono, monospace); min-height:60px; }
.syn-form .full { grid-column:1 / -1; }
.syn-form .actions { margin-top:0.85rem; display:flex; gap:0.6rem; }

.syn-actions { display:flex; gap:0.4rem; flex-wrap:wrap; }
.syn-actions form { display:inline; }

.syn-form { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px;
            background:var(--bg-2, var(--bg)); }
.syn-form .grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.85rem; }
.syn-form label { display:block; font-size:0.78rem; color:var(--text-muted); margin-bottom:0.25rem; }
.syn-form input[type="text"], .syn-form input[type="number"], .syn-form select, .syn-form textarea {
    width:100%; padding:0.45rem 0.6rem; border:1px solid var(--border); border-radius:6px;
    background:var(--bg); color:var(--text); font-size:0.85rem;
}
.syn-form textarea { font-family:var(--font-mono, monospace); min-height:60px; }
.syn-form .full { grid-column:1 / -1; }
.syn-form .actions { margin-top:0.85rem; display:flex; gap:0.6rem; }

.syn-spark { margin:1rem 0; padding:1rem; border:1px solid var(--border); border-radius:10px;
             background:var(--bg-2, var(--bg)); }
.syn-spark canvas { max-height:140px; }

.syn-runs { width:100%; border-collapse:collapse; font-size:0.82rem; margin-top:1rem; }
.syn-runs th { text-align:left; padding:0.45rem 0.65rem; border-bottom:1px solid var(--border);
               font-size:0.72rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.syn-runs td { padding:0.4rem 0.65rem; border-bottom:1px solid var(--border); }
.syn-runs .mono { font-family:var(--font-mono, monospace); }
.syn-badge { display:inline-block; padding:0.1rem 0.5rem; border-radius:999px; font-size:0.7rem;
             font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.syn-badge.ok { background:rgba(39,174,96,0.15); color:#27ae60; }
.syn-badge.fail, .syn-badge.timeout, .syn-badge.error { background:rgba(231,76,60,0.15); color:#e74c3c; }

.te-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
  .te-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; }
  .te-card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .te-card table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .te-card th, .te-card td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .te-card th { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; }
  .te-card td.num { text-align: right; }
  .te-comp { display: inline-block; padding: 2px 6px; margin-right: 4px; background: rgba(239, 68, 68, 0.15); color: #ef4444; border-radius: 3px; font-size: 0.7rem; }
  .te-clear-btn { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 2px 8px; border-radius: 3px; font-size: 0.7rem; cursor: pointer; }
  .te-clear-btn:hover { color: #ef4444; border-color: #ef4444; }

.tkc-banner {
    display: flex; gap: 1rem; align-items: flex-start;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.25rem 1.25rem 1rem;
    margin-bottom: 1.5rem;
}
.tkc-banner--clocked-in {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.tkc-banner--not-clocked {
    background: var(--accent-soft);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.tkc-banner-indicator {
    width: 3px; border-radius: 2px; flex-shrink: 0;
    align-self: stretch; min-height: 40px;
}
.tkc-banner--clocked-in .tkc-banner-indicator { background: var(--success); }
.tkc-banner--not-clocked .tkc-banner-indicator { background: var(--accent); }
.tkc-banner-content { flex: 1; min-width: 0; }
.tkc-banner-title {
    font-size: 1rem; font-weight: 600;
    color: var(--text); margin-bottom: 0.85rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.tkc-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.tkc-dot--on { background: var(--success); }
.tkc-dot--off { background: var(--accent); }
.tkc-form { display: flex; flex-direction: column; gap: 0.5rem; }
.tkc-label {
    font-size: 0.82rem; color: var(--text-muted);
    font-weight: 500;
}
.tkc-textarea {
    width: 100%; max-width: 480px;
    padding: 0.45rem 0.65rem;
    background: var(--bg-input); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 0.88rem; resize: vertical;
    box-sizing: border-box;
}
.tkc-textarea:focus { outline: none; border-color: var(--accent); }
.tkc-submit { align-self: flex-start; }
.tkc-submit--danger {
    background: var(--danger-soft); border-color: var(--danger);
    color: var(--danger);
}
.tkc-submit--danger:hover { background: var(--danger); color: #fff; }
.tkc-active { color: var(--success); font-weight: 600; }
.tkc-section { margin-top: 1.5rem; }
.tkc-section-title {
    font-size: 0.8rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); margin: 0 0 0.75rem;
}

.terminal-wrapper {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 60px);
        background: #0d1117;
        border-radius: var(--radius);
        overflow: hidden;
        position: relative;
    }
    .terminal-toolbar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #161b22;
        border-bottom: 1px solid #30363d;
        flex-shrink: 0;
        flex-wrap: wrap;
    }
    .terminal-toolbar .btn {
        font-size: 0.8rem;
        padding: 0.3rem 0.75rem;
    }
    .terminal-status {
        font-size: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        margin-left: auto;
        color: #8b949e;
    }
    .terminal-status .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
    }
    .terminal-status .dot.running { background: #3fb950; }
    .terminal-status .dot.stopped { background: #f85149; }

    /* Tab bar */
    .terminal-tabs {
        display: flex;
        background: #0d1117;
        border-bottom: 1px solid #30363d;
        flex-shrink: 0;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .terminal-tab {
        display: flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        color: #8b949e;
        cursor: pointer;
        border-right: 1px solid #30363d;
        white-space: nowrap;
        user-select: none;
        transition: background 0.15s;
    }
    .terminal-tab:hover { background: #161b22; }
    .terminal-tab.active {
        background: #161b22;
        color: #e6edf3;
        border-bottom: 2px solid #58a6ff;
    }
    .terminal-tab .tab-dot {
        width: 6px; height: 6px; border-radius: 50%; display: inline-block;
    }
    .terminal-tab .tab-dot.running { background: #3fb950; }
    .terminal-tab .tab-dot.stopped { background: #f85149; }
    .terminal-tab .tab-close {
        opacity: 0.5; cursor: pointer; font-size: 0.9rem; line-height: 1;
    }
    .terminal-tab .tab-close:hover { opacity: 1; color: #f85149; }
    .tab-add {
        padding: 0.4rem 0.6rem;
        font-size: 1rem;
        color: #8b949e;
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    .tab-add:hover { color: #e6edf3; background: #161b22; }

    /* Options row */
    .terminal-options {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.35rem 1rem;
        background: #161b22;
        border-bottom: 1px solid #30363d;
        font-size: 0.8rem;
        color: #8b949e;
        flex-shrink: 0;
    }
    .terminal-options label {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        cursor: pointer;
    }
    .terminal-options input[type="checkbox"] {
        accent-color: #f59e0b;
    }

    #terminal-container {
        flex: 1;
        padding: 4px;
        position: relative;
        overflow: hidden;
        min-height: 0;
    }
    #terminal-container .xterm {
        height: 100%;
    }

    /* Connection-state banner shown above the terminal when the
       SocketIO connection drops. Three states: hidden / warn / error. */
    .connection-banner {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        font-weight: 600;
        text-align: center;
        flex-shrink: 0;
        color: #fff;
    }
    .connection-banner.hidden { display: none; }
    .connection-banner.warn   { background: #d97706; }
    .connection-banner.error  { background: #dc2626; }

    /* ── Mobile layout ───────────────────────────────────────────────
       On narrow screens, the desktop toolbar + tab bar + options row
       easily eats 200+ px and pushes the xterm canvas off-screen.
       Collapse chrome aggressively so there's always room for the
       terminal. */
    @media (max-width: 768px) {
        .terminal-wrapper {
            /* Use the newer svh (small viewport height) so iOS Safari's
               dynamic toolbar doesn't steal space we thought we had. */
            height: calc(100svh - 60px);
        }
        .terminal-toolbar {
            padding: 0.4rem 0.6rem;
            gap: 0.3rem;
        }
        .terminal-toolbar .btn {
            font-size: 0.75rem;
            padding: 0.25rem 0.55rem;
        }
        .terminal-toolbar .terminal-status {
            font-size: 0.7rem;
            margin-left: auto;
        }
        .terminal-tabs { font-size: 0.72rem; }
        .terminal-tab {
            padding: 0.3rem 0.55rem;
            font-size: 0.72rem;
        }
        .terminal-options { display: none; }   /* no room on phone */
        #terminal-container {
            padding: 2px;
        }
    }
    /* Very small phones (<380px) — collapse even harder. */
    @media (max-width: 380px) {
        .terminal-toolbar .btn span,
        .terminal-toolbar .btn svg + * { display: none; }
        .terminal-status span:first-of-type { display: none; }
    }

    /* Drop zone overlay - covers entire terminal wrapper */
    .drop-zone-overlay {
        display: none;
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(88, 166, 255, 0.15);
        border: 3px dashed #58a6ff;
        border-radius: 8px;
        z-index: 1000;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: #58a6ff;
        pointer-events: none;
    }
    .drop-zone-overlay.active {
        display: flex;
    }

    /* Upload panel */
    .upload-panel {
        display: none;
        background: #161b22;
        border-top: 1px solid #30363d;
        padding: 0.5rem 1rem;
        flex-shrink: 0;
        max-height: 150px;
        overflow-y: auto;
    }
    .upload-panel.open { display: block; }
    .upload-panel .upload-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0;
        font-size: 0.8rem;
        color: #8b949e;
        border-bottom: 1px solid #21262d;
    }
    .upload-panel .upload-item .upload-path {
        flex: 1;
        font-family: monospace;
        font-size: 0.75rem;
        color: #58a6ff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .upload-panel .upload-item .upload-copy {
        cursor: pointer;
        font-size: 0.75rem;
        padding: 0.15rem 0.4rem;
        border: 1px solid #30363d;
        border-radius: 4px;
        color: #8b949e;
        background: none;
    }
    .upload-panel .upload-item .upload-copy:hover {
        color: #e6edf3;
        border-color: #58a6ff;
    }
    .upload-status {
        font-size: 0.8rem;
        color: #8b949e;
        padding: 0.25rem 0;
    }

    /* New session dialog */
    .new-session-dialog {
        display: none;
        position: fixed;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: #161b22;
        border: 1px solid #30363d;
        border-radius: 8px;
        padding: 1.5rem;
        z-index: 3000;
        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
        min-width: 320px;
    }
    .new-session-dialog h3 { margin: 0 0 1rem; color: #e6edf3; font-size: 1rem; }
    .new-session-dialog .form-group { margin-bottom: 0.75rem; }
    .new-session-dialog label { display: block; font-size: 0.85rem; color: #8b949e; margin-bottom: 0.25rem; }
    .new-session-dialog input[type="text"] {
        width: 100%; padding: 0.4rem 0.6rem; border: 1px solid #30363d; border-radius: 6px;
        background: #0d1117; color: #e6edf3; font-size: 0.85rem;
    }
    .new-session-dialog .dialog-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
    .dialog-backdrop {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 2999;
    }

.3cx-cdr-w { --font-mono:'JetBrains Mono',monospace; --font-head:'Inter Tight',sans-serif; }
.cdr-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.85rem; margin-bottom:1.5rem;
              animation:fadeIn 0.3s ease; }
.cdr-header h1 { margin:0.25rem 0 0; font-family:var(--font-head); font-size:1.4rem; font-weight:600; }
.filter-bar { display:flex; gap:0.85rem; align-items:center; flex-wrap:wrap; margin-bottom:1.25rem;
              background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:0.85rem 1.15rem;
              animation:fadeIn 0.4s ease 0.05s backwards; }
.filter-bar label { font-size:0.82rem; color:var(--text-muted); font-family:var(--font-head); font-weight:500; }
.filter-bar input[type=date] { padding:0.4rem 0.65rem; border:1px solid var(--border); border-radius:6px;
                               background:var(--bg); color:var(--text); font-size:0.85rem; font-family:var(--font-mono);
                               transition:border-color 0.15s ease; }
.filter-bar input[type=date]:focus { outline:none; border-color:var(--primary); }
.cdr-table { width:100%; border-collapse:collapse; font-size:0.82rem; animation:fadeIn 0.5s ease 0.1s backwards; }
.cdr-table th { text-align:left; padding:0.6rem 0.85rem; border-bottom:2px solid var(--border);
                color:var(--text-muted); font-size:0.73rem; text-transform:uppercase; letter-spacing:.04em;
                font-weight:600; font-family:var(--font-head); white-space:nowrap; }
.cdr-table td { padding:0.5rem 0.85rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.cdr-table tr:hover td { background:var(--hover); transition:background 0.1s ease; }
.cdr-pill { display:inline-block; padding:0.2rem 0.55rem; border-radius:20px; font-size:0.72rem; font-weight:500;
            font-family:var(--font-head); }
.cdr-pill.in { background:rgba(34,197,94,.12); color:#16a34a; }
.cdr-pill.out { background:rgba(99,102,241,.12); color:#4f46e5; }
.cdr-pill.int { background:rgba(234,179,8,.12); color:#b45309; }
.cdr-pill.missed { background:rgba(239,68,68,.12); color:#dc2626; }
.pagination { display:flex; gap:0.5rem; align-items:center; justify-content:center; margin-top:1.5rem; flex-wrap:wrap;
              animation:fadeIn 0.5s ease 0.15s backwards; }
.pagination a, .pagination span { padding:0.4rem 0.75rem; border:1px solid var(--border); border-radius:6px;
                                   font-size:0.82rem; text-decoration:none; color:var(--text); transition:all 0.15s ease; }
.pagination a:hover { border-color:var(--primary); background:var(--hover); }
.pagination .current { background:var(--primary); color:#fff; border-color:var(--primary); }
.stat-mono { font-family:var(--font-mono); font-size:0.85rem; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.3cx-dash-w { --font-mono:'JetBrains Mono',monospace; --font-head:'Inter Tight',sans-serif; }
.cx-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.85rem; margin-bottom:1.75rem;
             animation:fadeIn 0.3s ease; }
.cx-header h1 { margin:0; font-size:1.4rem; font-weight:600; font-family:var(--font-head); }
.cx-host { font-size:0.8rem; color:var(--text-muted); font-family:var(--font-mono); }
.tab-nav { display:flex; gap:0.25rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; overflow-x:auto;
           animation:fadeIn 0.4s ease 0.05s backwards; }
.tab-btn { background:none; border:none; padding:0.6rem 1.2rem; cursor:pointer; font-size:0.9rem;
           color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap;
           font-family:var(--font-head); font-weight:500; transition:all 0.15s ease; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.tab-pane { display:none; }
.tab-pane.active { display:block; animation:fadeIn 0.5s ease 0.1s backwards; }
.data-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.data-table th { text-align:left; padding:0.6rem 0.85rem; border-bottom:2px solid var(--border);
                 color:var(--text-muted); font-size:0.73rem; text-transform:uppercase; letter-spacing:.04em;
                 font-weight:600; font-family:var(--font-head); white-space:nowrap; }
.data-table td { padding:0.5rem 0.85rem; border-bottom:1px solid var(--border); vertical-align:top; }
.data-table tr:hover td { background:var(--hover); transition:background 0.1s ease; }
.loading { text-align:center; padding:2.5rem; color:var(--text-muted); font-size:0.9rem; font-family:var(--font-head); }
.error-msg { color:#dc2626; background:rgba(239,68,68,.1); padding:0.85rem 1.15rem; border-radius:8px;
             font-size:0.85rem; font-family:var(--font-head); }
.badge-green { background:rgba(34,197,94,.12); color:#16a34a; }
.badge-red { background:rgba(239,68,68,.12); color:#dc2626; }
.badge-gray { background:var(--border); color:var(--text-muted); }
.action-row { display:flex; gap:0.6rem; align-items:center; margin-bottom:1.1rem; flex-wrap:wrap; }
.table-wrap { overflow-x:auto; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.cx-stages { display:flex; gap:.5rem; flex-wrap:wrap; align-items:stretch; margin:0 0 1.4rem; }
.cx-stage  { flex:1 1 180px; min-width:180px; display:flex; gap:.6rem; align-items:flex-start;
             padding:.7rem .85rem; border:1px solid var(--border); border-radius:6px;
             background:var(--bg-card); }
.cx-stage.s-ok    { border-color:#1f7a3d; background:rgba(31,122,61,.08); }
.cx-stage.s-warn  { border-color:#a87a17; background:rgba(168,122,23,.08); }
.cx-stage.s-err   { border-color:#a83333; background:rgba(168,51,51,.10); }
.cx-stage.s-todo  { opacity:.65; }
.cx-stage-num { flex:0 0 22px; width:22px; height:22px; border-radius:50%;
                display:inline-flex; align-items:center; justify-content:center;
                font-size:.72rem; font-weight:700; font-family:ui-monospace,Menlo,monospace;
                background:var(--bg-input,rgba(0,0,0,.18)); color:var(--text-muted);
                border:1px solid var(--border); }
.cx-stage.s-ok   .cx-stage-num { background:#1f7a3d; color:#fff; border-color:#1f7a3d; }
.cx-stage.s-warn .cx-stage-num { background:#a87a17; color:#fff; border-color:#a87a17; }
.cx-stage.s-err  .cx-stage-num { background:#a83333; color:#fff; border-color:#a83333; }
.cx-stage-body { flex:1; min-width:0; }
.cx-stage-name { font-size:.78rem; font-weight:600; color:var(--text); margin-bottom:.15rem; }
.cx-stage-msg  { font-size:.72rem; color:var(--text-muted); line-height:1.35;
                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-stage-msg a { color:var(--accent,#58a6ff); }

@keyframes spin { to { transform:rotate(360deg); } }

.tcx-edit-w { max-width:780px; margin:0 auto; }
.tcx-edit-w .page-header { display:flex; align-items:flex-start; justify-content:space-between; margin:0 0 .4rem; gap:1rem; }
.tcx-edit-w .page-header h2 { margin:0; }
.tcx-back { font-size:.82rem; color:var(--text-muted); text-decoration:none; }
.tcx-back:hover { color:var(--text); }
.tcx-edit-sub { color:var(--text-muted); font-size:.88rem; line-height:1.5; margin:0 0 1.25rem; }
.tcx-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius,8px);
            padding:1rem 1.2rem; margin-bottom:1rem; }
.tcx-card code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
                 background:var(--bg-input,rgba(0,0,0,.18)); padding:.15rem .45rem; border-radius:4px; }
.tcx-section-h { display:flex; align-items:center; gap:.5rem; margin:1.6rem 0 .8rem;
                 font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
                 color:var(--text-muted); }
.tcx-section-h::after { content:''; flex:1; height:1px; background:var(--border); }
.tcx-row { display:grid; grid-template-columns:200px 1fr; gap:.5rem 1.2rem; align-items:start; margin-bottom:.85rem; }
.tcx-row label { font-size:.85rem; font-weight:500; color:var(--text); padding-top:.5rem; }
.tcx-row input, .tcx-row select, .tcx-row textarea {
  width:100%; box-sizing:border-box; padding:.5rem .7rem;
  border:1px solid var(--border); border-radius:6px;
  background:var(--bg-input,var(--bg)); color:var(--text);
  font-size:.9rem; transition:border-color .12s, box-shadow .12s;
}
.tcx-row input:focus, .tcx-row select:focus, .tcx-row textarea:focus {
  outline:none; border-color:var(--accent,#58a6ff);
  box-shadow:0 0 0 2px rgba(88,166,255,.15);
}
.tcx-hint { font-size:.78rem; color:var(--text-muted); margin-top:.3rem; line-height:1.4; }
.tcx-checkbox-row { display:flex; align-items:center; gap:.55rem; padding:.5rem 0;
                    font-size:.88rem; color:var(--text); cursor:pointer; }
.tcx-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.4rem;
               padding-top:1.1rem; border-top:1px solid var(--border); }
@media (max-width:640px) {
  .tcx-row { grid-template-columns:1fr; }
  .tcx-row label { padding-top:0; }
}

.tcx-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.5rem; margin-bottom:1rem; }
.tcx-status-card { padding:.6rem .8rem; border:1px solid var(--border); border-radius:6px; background:var(--bg-card); display:flex; gap:.5rem; align-items:center; }
.tcx-status-card.s-ok    { border-color:#1f7a3d; background:rgba(31,122,61,.08); }
.tcx-status-card.s-warn  { border-color:#a87a17; background:rgba(168,122,23,.08); }
.tcx-status-card.s-err   { border-color:#a83333; background:rgba(168,51,51,.10); }
.tcx-status-dot { width:10px; height:10px; border-radius:50%; flex:0 0 10px; background:var(--text-muted); }
.tcx-status-card.s-ok   .tcx-status-dot { background:#1f7a3d; }
.tcx-status-card.s-warn .tcx-status-dot { background:#a87a17; }
.tcx-status-card.s-err  .tcx-status-dot { background:#a83333; }
.tcx-status-name { font-size:.78rem; font-weight:600; color:var(--text); }
.tcx-status-msg  { font-size:.7rem; color:var(--text-muted); }

.tcx-w { --tcx-mono: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tcx-w .page-header { display:flex; align-items:center; justify-content:space-between; margin:0 0 .9rem; }
.tcx-w .page-header h2 { margin:0; }
.tcx-stat-row { display:flex; gap:.5rem; margin:0 0 1rem; flex-wrap:wrap; font-family:var(--tcx-mono); font-size:.74rem; }
.tcx-stat { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .6rem; border:1px solid var(--border);
            border-radius:6px; background:var(--bg-card); color:var(--text-muted); }
.tcx-stat strong { color:var(--text); font-weight:600; }
.tcx-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1rem; }
.tcx-card { position:relative; border:1px solid var(--border); border-radius:var(--radius,8px);
            padding:1rem 1.1rem; background:var(--bg-card);
            transition:border-color .15s, box-shadow .15s, transform .15s; }
.tcx-card:hover { border-color:var(--accent,#58a6ff); box-shadow:0 6px 18px rgba(0,0,0,.25); transform:translateY(-1px); }
.tcx-card.s-active   { box-shadow:inset 4px 0 0 #1f7a3d; }
.tcx-card.s-pending  { box-shadow:inset 4px 0 0 #a87a17; }
.tcx-card.s-error    { box-shadow:inset 4px 0 0 #a83333; }
.tcx-card.s-active:hover  { box-shadow:inset 4px 0 0 #1f7a3d, 0 6px 18px rgba(0,0,0,.25); }
.tcx-card.s-pending:hover { box-shadow:inset 4px 0 0 #a87a17, 0 6px 18px rgba(0,0,0,.25); }
.tcx-card.s-error:hover   { box-shadow:inset 4px 0 0 #a83333, 0 6px 18px rgba(0,0,0,.25); }
.tcx-card h3 { margin:0 0 .35rem; font-size:1rem; font-weight:600; color:var(--text); }
.tcx-host { font-family:var(--tcx-mono); font-size:.78rem; color:var(--text-muted);
            background:var(--bg-input,rgba(0,0,0,.18)); padding:.18rem .5rem; border-radius:4px;
            display:inline-block; margin-bottom:.6rem; }
.tcx-meta-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; }
.tcx-pill { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--tcx-mono);
            font-size:.7rem; padding:.18rem .5rem; border-radius:4px; border:1px solid; text-transform:uppercase;
            letter-spacing:.04em; }
.tcx-pill-ok    { background:rgba(31,122,61,.15);  border-color:#1f7a3d;  color:#5fbf7e; }
.tcx-pill-warn  { background:rgba(168,122,23,.15); border-color:#a87a17;  color:#d4a141; }
.tcx-pill-err   { background:rgba(168,51,51,.15);  border-color:#a83333;  color:#e08585; }
.tcx-pill-mute  { background:transparent; border-color:var(--border); color:var(--text-muted); }
.tcx-sub { font-size:.78rem; color:var(--text-muted); margin-bottom:.6rem; }
.tcx-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.85rem; padding-top:.8rem;
               border-top:1px solid var(--border); }
.tcx-empty { text-align:center; padding:4rem 2rem; color:var(--text-muted);
             border:1px dashed var(--border); border-radius:var(--radius,8px); background:var(--bg-card); }
.tcx-empty h3 { margin:0 0 .5rem; color:var(--text); }

.3cx-rpt-w { --font-mono:'JetBrains Mono',monospace; --font-head:'Inter Tight',sans-serif; }
.rpt-header { margin-bottom:1.25rem; animation:fadeIn 0.3s ease; }
.rpt-header h1 { margin:0.25rem 0 0; font-family:var(--font-head); font-size:1.4rem; font-weight:600; }
.rpt-layout { display:grid; grid-template-columns:260px 1fr; gap:1.5rem; align-items:start;
              animation:fadeIn 0.4s ease 0.05s backwards; }
.rpt-sidebar { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:1.25rem;
               box-shadow:0 2px 8px rgba(0,0,0,0.03); }
.rpt-sidebar h3 { margin:0 0 1.1rem; font-size:0.9rem; font-weight:600; font-family:var(--font-head); color:var(--text); }
.rpt-type-btn { display:block; width:100%; text-align:left; padding:0.6rem 0.85rem; border:none;
                background:none; border-radius:8px; cursor:pointer; font-size:0.85rem; color:var(--text);
                margin-bottom:0.3rem; font-family:var(--font-head); font-weight:500; transition:all 0.15s ease; }
.rpt-type-btn:hover { background:var(--hover); }
.rpt-type-btn.active { background:var(--primary); color:#fff; }
.rpt-date { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap;
            background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
            padding:0.85rem 1.15rem; margin-bottom:1.4rem; box-shadow:0 2px 8px rgba(0,0,0,0.03); }
.rpt-date label { font-size:0.82rem; color:var(--text-muted); font-family:var(--font-head); font-weight:500; }
.rpt-date input[type=date] { padding:0.4rem 0.65rem; border:1px solid var(--border); border-radius:6px;
                              background:var(--bg); color:var(--text); font-size:0.85rem; font-family:var(--font-mono);
                              transition:border-color 0.15s ease; }
.rpt-date input[type=date]:focus { outline:none; border-color:var(--primary); }
.data-table { width:100%; border-collapse:collapse; font-size:0.82rem; animation:fadeIn 0.5s ease 0.1s backwards; }
.data-table th { text-align:left; padding:0.6rem 0.85rem; border-bottom:2px solid var(--border);
                 color:var(--text-muted); font-size:0.73rem; text-transform:uppercase; letter-spacing:.04em;
                 font-weight:600; font-family:var(--font-head); white-space:nowrap; }
.data-table td { padding:0.5rem 0.85rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:hover td { background:var(--hover); transition:background 0.1s ease; }
.stat-mono { font-family:var(--font-mono); font-size:0.85rem; }
@media(max-width:900px) { .rpt-layout { grid-template-columns:1fr; } }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.3cx-setup-w { --font-mono:'JetBrains Mono',monospace; --font-head:'Inter Tight',sans-serif; max-width:680px; margin:0 auto; }
.setup-header { margin-bottom:0.5rem; animation:fadeIn 0.3s ease; }
.setup-header h1 { margin:0.5rem 0 0; font-family:var(--font-head); font-size:1.5rem; font-weight:600; }
.steps { display:flex; gap:0; margin-bottom:2.5rem; animation:fadeIn 0.4s ease 0.05s backwards; }
.step-indicator { flex:1; text-align:center; padding:0.6rem 0.5rem; font-size:0.82rem; color:var(--text-muted);
                  border-bottom:2px solid var(--border); font-family:var(--font-head); font-weight:500;
                  transition:all 0.2s ease; }
.step-indicator.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.step-indicator.done { color:#16a34a; border-bottom-color:#16a34a; }
.form-group { margin-bottom:1.4rem; animation:fadeIn 0.5s ease 0.1s backwards; }
.form-group label { display:block; font-size:0.85rem; font-weight:500; margin-bottom:0.4rem; font-family:var(--font-head); color:var(--text); }
.form-group input, .form-group textarea, .form-group select {
  width:100%; padding:0.55rem 0.8rem; border:1px solid var(--border);
  border-radius:8px; background:var(--card-bg); color:var(--text); font-size:0.9rem;
  transition:border-color 0.15s ease; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline:none; border-color:var(--primary);
}
.form-group textarea { font-family:var(--font-mono); font-size:0.82rem; height:150px; resize:vertical; line-height:1.5; }
.auth-toggle { display:flex; gap:1.25rem; margin-bottom:1rem; }
.auth-toggle label { display:flex; align-items:center; gap:0.45rem; cursor:pointer; font-size:0.9rem; font-family:var(--font-head); }
.instructions { background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
                padding:1.25rem 1.4rem; margin-bottom:1.4rem; box-shadow:0 2px 8px rgba(0,0,0,0.03); }
.instructions h4 { margin:0 0 0.75rem; font-size:0.95rem; font-weight:600; font-family:var(--font-head); color:var(--text); }
.instructions ol, .instructions ul { margin:0; padding-left:1.4rem; font-size:0.87rem; line-height:1.8; color:var(--text); }
.instructions code { background:var(--bg); padding:0.2rem 0.5rem; border-radius:5px; font-family:var(--font-mono); font-size:0.8rem; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.85rem; margin-bottom:1.2rem; }
.info-item { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:1rem;
             box-shadow:0 2px 8px rgba(0,0,0,0.03); }
.info-item .label { font-size:0.78rem; color:var(--text-muted); margin-bottom:0.3rem; font-family:var(--font-head); font-weight:500; }
.info-item .value { font-size:0.88rem; font-weight:500; font-family:var(--font-mono); word-break:break-all; }
.table-list { font-size:0.8rem; color:var(--text-muted); margin:0.6rem 0; font-family:var(--font-mono); }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

.ticket-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.ticket-meta { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0.75rem; margin:1rem 0; }
.ticket-meta-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.6rem 0.8rem; }
.ticket-meta-item label { display:block; font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; margin-bottom:0.2rem; }
.ticket-meta-item .value { font-size:0.9rem; }
.timeline { margin:1.5rem 0; }
.timeline-item { display:flex; gap:0.75rem; padding:0.75rem 0; border-bottom:1px solid var(--border); }
.timeline-item:last-child { border-bottom:none; }
.timeline-avatar { width:32px; height:32px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:600; flex-shrink:0; }
.timeline-avatar.internal { background:var(--yellow); }
.timeline-body { flex:1; }
.timeline-author { font-weight:600; font-size:0.85rem; }
.timeline-date { font-size:0.75rem; color:var(--text-muted); margin-left:0.5rem; }
.timeline-text { margin-top:0.3rem; font-size:0.88rem; white-space:pre-wrap; }
.timeline-badge { font-size:0.7rem; background:var(--bg-input); padding:0.1rem 0.4rem; border-radius:3px; margin-left:0.3rem; }

/* ── Ticket detail visual reskin (scoped under .tdtl) ──────────── */
.tdtl {
    --tdtl-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --tdtl-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --tdtl-mute: var(--text-muted);
    --tdtl-fg: var(--text);
    --tdtl-bd: var(--border);
    --tdtl-card: var(--bg-card);
    --tdtl-accent: var(--primary, #4a9eff);
    font-family: var(--tdtl-sans);
    color: var(--tdtl-fg);
    letter-spacing: -0.005em;
}
.tdtl-bc {
    font-family: var(--tdtl-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--tdtl-mute);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.tdtl-bc a { color: var(--tdtl-mute); text-decoration: none; }
.tdtl-bc a:hover { color: var(--tdtl-fg); }
.tdtl-bc .sep { opacity: 0.5; margin: 0 0.35rem; }
.tdtl-bc .cur { color: var(--tdtl-fg); }

.tdtl-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.2rem;
    padding: 0.95rem 1.1rem;
    background: var(--tdtl-card);
    border: 1px solid var(--tdtl-bd);
    border-radius: 8px;
    margin-bottom: 0.85rem;
    position: relative;
    overflow: hidden;
}
.tdtl-hero::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--tdtl-stripe, #6b7280);
}
.tdtl-hero-id { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.tdtl-idline { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.tdtl-num {
    font-family: var(--tdtl-mono);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--tdtl-fg);
}
.tdtl-subject {
    font-family: var(--tdtl-sans);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: -0.01em;
    color: var(--tdtl-fg);
}
.tdtl-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.tdtl-pill {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: var(--tdtl-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-weight: 600;
}
.tdtl-pill .lbl { opacity: 0.7; font-weight: 400; letter-spacing: 0.18em; }
.tdtl-pill .val { font-weight: 700; }
.tdtl-pill.status-open { color: #3b82f6; background: rgba(59,130,246,0.08); }
.tdtl-pill.status-in_progress { color: #f59e0b; background: rgba(245,158,11,0.08); }
.tdtl-pill.status-waiting { color: #a78bfa; background: rgba(167,139,250,0.08); }
.tdtl-pill.status-resolved { color: #22c55e; background: rgba(34,197,94,0.08); }
.tdtl-pill.status-closed,
.tdtl-pill.status-cancelled,
.tdtl-pill.status-merged { color: #9ca3af; background: rgba(156,163,175,0.08); }
.tdtl-pill.prio-low { color: #6ab0ff; background: rgba(26,115,232,0.08); }
.tdtl-pill.prio-medium { color: #7ee787; background: rgba(63,185,80,0.08); }
.tdtl-pill.prio-high { color: #f9c66b; background: rgba(245,158,11,0.08); }
.tdtl-pill.prio-urgent { color: #ff8a80; background: rgba(248,81,73,0.08); }
.tdtl-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--tdtl-mute); }
.tdtl-meta b { color: var(--tdtl-fg); font-weight: 500; }
.tdtl-meta a { color: var(--tdtl-accent); text-decoration: none; }
.tdtl-meta a:hover { text-decoration: underline; }
.tdtl-hero-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: flex-start; }

/* 3-card spec grid */
.tdtl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-bottom: 0.85rem;
}
.tdtl-card {
    background: var(--tdtl-card);
    border: 1px solid var(--tdtl-bd);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.tdtl-card h3 {
    font-family: var(--tdtl-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tdtl-mute);
    margin: 0;
    font-weight: 600;
}
.tdtl-spec { display: grid; grid-template-columns: 90px 1fr; gap: 0.35rem 0.7rem; font-size: 0.82rem; margin: 0; }
.tdtl-spec dt { color: var(--tdtl-mute); font-family: var(--tdtl-mono); font-size: 0.7rem; align-self: center; letter-spacing: 0.04em; }
.tdtl-spec dd { margin: 0; color: var(--tdtl-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdtl-spec dd.mono { font-family: var(--tdtl-mono); font-size: 0.78rem; }
.tdtl-spec dd a { color: var(--tdtl-accent); text-decoration: none; }
.tdtl-spec dd a:hover { text-decoration: underline; }

/* Comment timeline cards */
.tdtl-comment {
    position: relative;
    background: var(--tdtl-card);
    border: 1px solid var(--tdtl-bd);
    border-radius: 8px;
    padding: 0.7rem 0.9rem 0.8rem;
    margin-bottom: 0.55rem;
    display: flex;
    gap: 0.75rem;
}
.tdtl-comment.is-internal {
    border-color: rgba(245,158,11,0.4);
    background: rgba(245,158,11,0.04);
}
.tdtl-comment .timeline-avatar {
    /* preserve avatar circle from existing .timeline-avatar styling */
}
.tdtl-comment-body { flex: 1; min-width: 0; }
.tdtl-comment-head {
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 0.3rem;
}
.tdtl-comment-author { font-weight: 600; font-size: 0.88rem; color: var(--tdtl-fg); }
.tdtl-comment-time {
    font-family: var(--tdtl-mono);
    font-size: 0.7rem;
    color: var(--tdtl-mute);
    margin-left: auto;
    letter-spacing: 0.02em;
}
.tdtl-role-pill {
    font-family: var(--tdtl-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid var(--tdtl-bd);
    color: var(--tdtl-mute);
    font-weight: 600;
}
.tdtl-role-pill.internal { color: #f59e0b; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
.tdtl-role-pill.public { color: #22c55e; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.06); }
.tdtl-comment-text { font-size: 0.88rem; white-space: pre-wrap; color: var(--tdtl-fg); line-height: 1.5; }

/* Sidebar mono labels */
.tdtl .sidebar-section-label,
.tdtl-side-label {
    font-family: var(--tdtl-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--tdtl-mute);
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.tdtl .sidebar-form label {
    font-family: var(--tdtl-mono);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    color: var(--tdtl-mute);
    font-weight: 600;
}

@media (max-width: 1100px) {
    .tdtl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .tdtl-hero { grid-template-columns: 1fr; }
    .tdtl-grid { grid-template-columns: 1fr; }
    .tdtl-num { font-size: 1.2rem; }
}
/* ── Mobile structural rework (≤640px) ──
 * The 7.07.92 global rescue covers 1fr/2fr 2-col grids but the
 * ticket-detail-layout column template (`1fr 300px`) needs an
 * explicit override. Also stacks comment-thread vs reply form
 * and tightens inner tables / charges / parts panels. */
@media (max-width: 640px) {
    /* Main 2-col layout (description + sidebar) → stacked */
    .ticket-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }
    /* Sidebar widgets need full width and tighter padding */
    .sidebar-form,
    .sidebar-section { padding: 0.7rem; }
    /* Comment thread cards — tighten and break the inline flex row
       (avatar + body + meta) into a column so long author/time
       headers stop pushing content off-screen. */
    .comment-box textarea { font-size: 0.9rem; }
    .comment-actions { flex-wrap: wrap; gap: 0.4rem; }
    .comment-actions > * { flex: 1 1 auto; }
    /* Inner tables (charges, parts, time entries) get horizontal
       scroll so the 5–6-col layouts don't blow up the viewport */
    .tdtl table { font-size: 0.78rem; }
    .tdtl table th,
    .tdtl table td { padding: 0.3rem 0.4rem; }
    /* Attachment previews — cap to viewport */
    .attachment-preview { max-width: 100%; max-height: 220px; }
}
.comment-box { margin-top:1rem; }
.comment-box textarea { width:100%; min-height:100px; background:var(--bg-input); color:var(--text); border:1px solid var(--border); border-radius:var(--radius); padding:0.6rem; font-size:0.88rem; resize:vertical; }
.comment-actions { display:flex; gap:0.5rem; margin-top:0.5rem; align-items:center; }
.sidebar-form { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.sidebar-form .form-group { margin-bottom:0.75rem; }
.sidebar-form label { display:block; font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; margin-bottom:0.2rem; }
.sidebar-form select, .sidebar-form input { width:100%; background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:0.35rem 0.5rem; border-radius:var(--radius); font-size:0.85rem; }
.time-entries { margin-top:1rem; }
.time-entry { display:flex; justify-content:space-between; padding:0.4rem 0; font-size:0.8rem; border-bottom:1px solid var(--border); }
.attachment-list { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; }
.attachment-item { background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); padding:0.3rem 0.5rem; font-size:0.8rem; }
.attachment-item a { color:var(--primary); text-decoration:none; }
.attachment-preview { max-width:200px; max-height:150px; border-radius:var(--radius); margin-top:0.3rem; cursor:pointer; }
.tag-pill { display:inline-block; padding:0.15rem 0.5rem; border-radius:10px; font-size:0.75rem; font-weight:500; margin:0.15rem 0.1rem; }
.tag-pill .tag-remove { cursor:pointer; margin-left:0.3rem; opacity:0.6; }
.tag-pill .tag-remove:hover { opacity:1; }
.tag-input-wrap { display:flex; flex-wrap:wrap; gap:0.3rem; align-items:center; background:var(--bg-input); border:1px solid var(--border); border-radius:var(--radius); padding:0.3rem; min-height:32px; position:relative; }
.tag-input-wrap input { border:none; background:none; color:var(--text); outline:none; font-size:0.8rem; flex:1; min-width:80px; padding:0.1rem 0.3rem; }
.tag-autocomplete { position:absolute; top:100%; left:0; right:0; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); max-height:150px; overflow-y:auto; z-index:100; display:none; }
.tag-autocomplete div { padding:0.3rem 0.5rem; font-size:0.8rem; cursor:pointer; }
.tag-autocomplete div:hover { background:var(--bg-input); }
.sidebar-section { margin-top:1rem; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.8rem; }
.sidebar-section h4 { margin:0 0 0.5rem 0; font-size:0.85rem; }
.sidebar-section-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; margin-bottom:0.3rem; }
.watcher-item { display:flex; justify-content:space-between; align-items:center; padding:0.2rem 0; font-size:0.8rem; }
.sub-ticket-item { padding:0.3rem 0; border-bottom:1px solid var(--border); font-size:0.8rem; }
.sub-ticket-item:last-child { border-bottom:none; }
.merge-section { margin-top:0.75rem; }

/* ── Ticket new form visual harmony (scoped under .tnew) ──────────── */
.tnew {
    --tn-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --tn-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --tn-mute: var(--text-muted);
    --tn-fg: var(--text);
    --tn-bd: var(--border);
    --tn-card: var(--bg-card);
    --tn-accent: var(--primary, #4a9eff);
    font-family: var(--tn-sans);
    color: var(--tn-fg);
    letter-spacing: -0.005em;
}

.tnew .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.tnew h2 {
    font-family: var(--tn-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Form grid layout */
.tnew form {
    max-width: 800px;
}

.tnew .form-group {
    margin-bottom: 1.25rem;
}

.tnew label {
    display: block;
    font-family: var(--tn-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tn-mute);
    margin-bottom: 0.35rem;
    font-weight: 600;
}

.tnew input[type="text"],
.tnew input[type="email"],
.tnew input[type="file"],
.tnew select,
.tnew textarea {
    width: 100%;
    background: var(--bg-input);
    color: var(--tn-fg);
    border: 1px solid var(--tn-bd);
    border-radius: 6px;
    padding: 0.5rem 0.65rem;
    font-family: var(--tn-sans);
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tnew input:focus,
.tnew select:focus,
.tnew textarea:focus {
    outline: none;
    border-color: var(--tn-accent);
    box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1);
}

.tnew textarea {
    resize: vertical;
    line-height: 1.5;
}

.tnew .btn {
    font-family: var(--tn-sans);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.tnew .btn-primary {
    background: var(--tn-accent);
    border-color: var(--tn-accent);
    color: #fff;
}

.tnew .btn-primary:hover {
    opacity: 0.9;
}

/* Two column grid */
.tnew .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 640px) {
    .tnew .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Staggered fade-in for form sections */
@keyframes tn-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.tnew .form-group {
    animation: tn-fadein 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.tnew .form-group:nth-child(1) { animation-delay: 0ms; }
.tnew .form-group:nth-child(2) { animation-delay: 40ms; }
.tnew .form-group:nth-child(3) { animation-delay: 80ms; }
.tnew .form-group:nth-child(4) { animation-delay: 120ms; }
.tnew .form-group:nth-child(5) { animation-delay: 160ms; }
.tnew .form-group:nth-child(6) { animation-delay: 200ms; }

/* ── Ticket reports visual harmony (scoped under .trpt) ──────────── */
.trpt {
    --tprt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --tprt-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --tprt-mute: var(--text-muted);
    --tprt-fg: var(--text);
    --tprt-bd: var(--border);
    --tprt-card: var(--bg-card);
    --tprt-accent: var(--primary, #4a9eff);
    font-family: var(--tprt-sans);
    color: var(--tprt-fg);
    letter-spacing: -0.005em;
}

.trpt .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.trpt h2 {
    font-family: var(--tprt-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Date filter form */
.trpt .filter-form {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.trpt .filter-form .form-group {
    margin-bottom: 0;
}

.trpt .filter-form label {
    display: block;
    font-family: var(--tprt-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tprt-mute);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.trpt .filter-form input[type="date"] {
    font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    background: var(--bg-input);
    color: var(--tprt-fg);
    border: 1px solid var(--tprt-bd);
    border-radius: 6px;
}

.trpt .btn {
    font-family: var(--tprt-sans);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

/* Mono stat pills */
.trpt .stats-grid {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--tprt-bd);
}

.trpt .stat-pill {
    font-family: var(--tprt-mono);
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tprt-bd);
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    line-height: 1.1;
    text-decoration: none;
    color: var(--tprt-fg);
}

.trpt .stat-pill .label {
    color: var(--tprt-mute);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.62rem;
    font-weight: 500;
}

.trpt .stat-pill .value {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tprt-fg);
}

/* Subheadings */
.trpt h3 {
    font-family: var(--tprt-sans);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
}

/* Mono uppercase thead */
.trpt .data-table thead th {
    font-family: var(--tprt-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tprt-mute);
    font-weight: 600;
}

/* Two-column grid for breakdown tables */
.trpt .breakdown-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .trpt .breakdown-grid {
        grid-template-columns: 1fr;
    }
}

/* Staggered fade-in */
@keyframes tprt-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.trpt .stat-pill {
    animation: tprt-fadein 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.trpt .stat-pill:nth-child(1) { animation-delay: 0ms; }
.trpt .stat-pill:nth-child(2) { animation-delay: 40ms; }
.trpt .stat-pill:nth-child(3) { animation-delay: 80ms; }
.trpt .stat-pill:nth-child(4) { animation-delay: 120ms; }
.trpt .stat-pill:nth-child(5) { animation-delay: 160ms; }
.trpt .stat-pill:nth-child(6) { animation-delay: 200ms; }

/* ── Ticket templates visual harmony (scoped under .ttmp) ─────────── */
.ttmp {
    --tt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --tt-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --tt-mute: var(--text-muted);
    --tt-fg: var(--text);
    --tt-bd: var(--border);
    --tt-card: var(--bg-card);
    --tt-accent: var(--primary, #4a9eff);
    font-family: var(--tt-sans);
    color: var(--tt-fg);
    letter-spacing: -0.005em;
}

.ttmp .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ttmp h2 {
    font-family: var(--tt-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

/* Intro text */
.ttmp .intro {
    color: var(--tt-mute);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Template cards */
.ttmp .template-card {
    background: var(--tt-card);
    border: 1px solid var(--tt-bd);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ttmp .template-card:hover {
    border-color: var(--tt-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.ttmp .template-card h4 {
    font-family: var(--tt-sans);
    font-weight: 600;
    font-size: 1rem;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}

.ttmp .template-card .meta {
    font-family: var(--tt-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tt-mute);
    margin-bottom: 0.5rem;
}

.ttmp .template-body {
    font-size: 0.85rem;
    white-space: pre-wrap;
    background: var(--bg-input);
    padding: 0.6rem 0.8rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    max-height: 150px;
    overflow-y: auto;
    line-height: 1.5;
    font-family: var(--tt-sans);
}

.ttmp .template-actions {
    display: flex;
    gap: 0.3rem;
}

.ttmp .btn {
    font-family: var(--tt-sans);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
}

/* New template form in details */
.ttmp details {
    margin-bottom: 1.5rem;
}

.ttmp details[open] summary {
    margin-bottom: 0.75rem;
}

.ttmp details .form-group {
    margin-bottom: 0.75rem;
}

.ttmp details label {
    display: block;
    font-family: var(--tt-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tt-mute);
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.ttmp details input[type="text"],
.ttmp details select,
.ttmp details textarea {
    width: 100%;
    background: var(--bg-input);
    color: var(--tt-fg);
    border: 1px solid var(--tt-bd);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    font-family: var(--tt-sans);
    font-size: 0.85rem;
}

.ttmp details textarea {
    resize: vertical;
    line-height: 1.5;
}

/* Edit form (inline) */
.ttmp .edit-form {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--tt-bd);
}

.ttmp .edit-form .form-group {
    margin-bottom: 0.5rem;
}

/* Staggered fade-in */
@keyframes tt-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.ttmp .template-card {
    animation: tt-fadein 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.ttmp .template-card:nth-child(1) { animation-delay: 0ms; }
.ttmp .template-card:nth-child(2) { animation-delay: 40ms; }
.ttmp .template-card:nth-child(3) { animation-delay: 80ms; }
.ttmp .template-card:nth-child(4) { animation-delay: 120ms; }
.ttmp .template-card:nth-child(5) { animation-delay: 160ms; }
.ttmp .template-card:nth-child(n+6) { animation-delay: 200ms; }

.ticket-filters { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem; align-items:center; }
.ticket-filters select, .ticket-filters input { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:0.3rem 0.6rem; border-radius:var(--radius); font-size:0.8rem; }
.priority-dot { display:inline-block; padding:1px 8px; border-radius:4px; font-size:0.75rem; font-weight:600; }
.priority-critical, .priority-urgent { background:#ef444422; color:#ef4444; }
.priority-high { background:#f59e0b22; color:#f59e0b; }
.priority-medium { background:#3b82f622; color:#3b82f6; }
.priority-low { background:#6b728022; color:#6b7280; }
.ticket-stats { display:flex; gap:1rem; margin-bottom:1rem; flex-wrap:wrap; }
.ticket-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.8rem 1.2rem; text-align:center; min-width:90px; cursor:pointer; transition:border-color 0.15s, background 0.15s; text-decoration:none; color:inherit; display:block; }
.ticket-stat:hover { border-color:var(--primary); background:var(--bg-input); }
.ticket-stat .value { font-size:1.5rem; font-weight:700; }
.ticket-stat .label { font-size:0.75rem; color:var(--text-muted); }
.synopsis-tooltip { position:fixed; z-index:9999; max-width:350px; padding:0.6rem 0.8rem; background:#1e1e2e; color:#e0e0e0; border:1px solid #444; border-radius:6px; font-size:0.8rem; line-height:1.4; box-shadow:0 4px 12px rgba(0,0,0,0.4); pointer-events:none; opacity:0; transition:opacity 0.15s ease; }
.synopsis-tooltip.visible { opacity:1; }
.synopsis-tooltip .synopsis-label { font-size:0.65rem; text-transform:uppercase; color:#888; margin-bottom:0.3rem; letter-spacing:0.5px; }
.tag-pill { display:inline-block; padding:0.1rem 0.45rem; border-radius:10px; font-size:0.7rem; font-weight:500; margin-right:0.2rem; }
.sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.sortable:hover { color:var(--primary); }
.sort-arrow { font-size:0.7rem; margin-left:0.2rem; }
.bulk-bar { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.5rem 0.75rem; margin-bottom:0.75rem; display:none; align-items:center; gap:0.5rem; flex-wrap:wrap; }
.bulk-bar.active { display:flex; }
.bulk-bar select { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:0.25rem 0.5rem; border-radius:var(--radius); font-size:0.8rem; }
.bulk-count { font-size:0.85rem; font-weight:600; color:var(--primary); }
.qc-wrap { position:relative; display:inline-block; }
.qc-btn { background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:var(--radius); padding:0.15rem 0.4rem; font-size:0.75rem; cursor:pointer; line-height:1; }
.qc-btn:hover { background:var(--bg-input); color:var(--text); }
.qc-menu { display:none; position:absolute; right:0; top:100%; z-index:50; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); min-width:150px; box-shadow:0 4px 12px rgba(0,0,0,0.3); padding:0.25rem 0; }
.qc-menu.open { display:block; }
.qc-menu button { display:block; width:100%; text-align:left; background:none; border:none; color:var(--text); padding:0.35rem 0.65rem; font-size:0.8rem; cursor:pointer; }
.qc-menu button:hover { background:var(--bg-input); }
.ticket-subj-cell { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:768px) {
    .ticket-subj-cell { max-width:none; white-space:normal; overflow:visible; text-overflow:clip; }
}

/* ── Visual harmony pass: aesthetics scoped under .tlist so nothing
     bleeds into other pages. All existing IDs / classes / form actions
     are preserved — JS hooks (filterTickets, sortBy, bulk bar,
     resolve modal, qc-menu, synopsis tooltip) work unchanged. ── */
.tlist {
    --tl-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --tl-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --tl-on: #22c55e;
    --tl-off: #ef4444;
    --tl-warn: #f59e0b;
    --tl-accent: var(--primary, #4a9eff);
    --tl-mute: var(--text-muted);
    font-family: var(--tl-sans);
    letter-spacing: -0.005em;
}

/* Compact mono stat-pill row (replaces .ticket-stats card row) */
.tlist .ticket-stats {
    display:flex; gap:0.4rem; margin-bottom:0.8rem; flex-wrap:wrap;
    padding:0.4rem 0 0.7rem;
    border-bottom:1px solid var(--border);
}
.tlist .ticket-stat,
.tlist a.ticket-stat {
    font-family: var(--tl-mono); font-size:0.72rem; padding:4px 10px;
    border-radius:999px; background:rgba(255,255,255,0.04);
    border:1px solid var(--border);
    display:inline-flex; gap:0.4rem; align-items:center; line-height:1.1;
    min-width:0; text-align:left;
    text-decoration:none; color:var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.tlist .ticket-stat:hover { border-color:var(--tl-accent); background:rgba(74,158,255,0.08); }
.tlist .ticket-stat .value { font-size:0.78rem; font-weight:700; color:var(--text); }
.tlist .ticket-stat .label {
    color:var(--tl-mute); text-transform:uppercase;
    letter-spacing:0.18em; font-size:0.62rem; font-weight:500;
}
.tlist .ticket-stat.s-open  { color:var(--tl-accent); border-color:rgba(74,158,255,0.4); background:rgba(74,158,255,0.07); }
.tlist .ticket-stat.s-open .value { color:var(--tl-accent); }
.tlist .ticket-stat.s-prog  { color:#f59e0b; border-color:rgba(245,158,11,0.4); background:rgba(245,158,11,0.07); }
.tlist .ticket-stat.s-prog .value { color:#f59e0b; }
.tlist .ticket-stat.s-wait  { color:#a78bfa; border-color:rgba(139,92,246,0.4); background:rgba(139,92,246,0.07); }
.tlist .ticket-stat.s-wait .value { color:#a78bfa; }
.tlist .ticket-stat.s-res   { color:var(--tl-on); border-color:rgba(34,197,94,0.4); background:rgba(34,197,94,0.07); }
.tlist .ticket-stat.s-res .value { color:var(--tl-on); }
.tlist .ticket-stat.s-crit  { color:var(--tl-off); border-color:rgba(239,68,68,0.4); background:rgba(239,68,68,0.07); }
.tlist .ticket-stat.s-crit .value { color:var(--tl-off); }

/* Mono uppercase thead */
.tlist .data-table thead th {
    font-family: var(--tl-mono);
    font-size:0.66rem; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--tl-mute);
    font-weight:600;
}

/* Compact body rows: 9px vertical padding, hairline dividers */
.tlist .data-table tbody td { padding-top:9px; padding-bottom:9px; vertical-align:middle; }
.tlist .data-table tbody tr { border-bottom:1px solid rgba(255,255,255,0.04); }
/* 4px accent left-stripe for unresolved tickets, red for critical */
.tlist .data-table tbody tr[data-tstate="open"] { box-shadow: inset 4px 0 0 0 var(--tl-accent); }
.tlist .data-table tbody tr[data-tprio="critical"],
.tlist .data-table tbody tr[data-tprio="urgent"] { box-shadow: inset 4px 0 0 0 var(--tl-off); }

/* Compact mono pills for status & priority */
.tlist .tl-status, .tlist .tl-prio {
    display:inline-flex; align-items:center; gap:4px;
    font-family: var(--tl-mono); font-size:0.66rem;
    text-transform:uppercase; letter-spacing:0.08em; font-weight:600;
    padding:2px 7px; border-radius:999px;
    background:rgba(255,255,255,0.04); border:1px solid var(--border);
    line-height:1.3;
}
.tlist .tl-status.st-open       { color:#3b82f6; border-color:rgba(59,130,246,0.4); background:rgba(59,130,246,0.08); }
.tlist .tl-status.st-progress   { color:#f59e0b; border-color:rgba(245,158,11,0.4); background:rgba(245,158,11,0.08); }
.tlist .tl-status.st-waiting    { color:#a78bfa; border-color:rgba(139,92,246,0.4); background:rgba(139,92,246,0.08); }
.tlist .tl-status.st-resolved   { color:var(--tl-on); border-color:rgba(34,197,94,0.4); background:rgba(34,197,94,0.08); }
.tlist .tl-status.st-closed     { color:#9ca3af; border-color:rgba(156,163,175,0.4); background:rgba(156,163,175,0.08); }

.tlist .tl-prio.pr-critical, .tlist .tl-prio.pr-urgent { color:var(--tl-off); border-color:rgba(239,68,68,0.4); background:rgba(239,68,68,0.08); }
.tlist .tl-prio.pr-high     { color:#fb923c; border-color:rgba(251,146,60,0.4); background:rgba(251,146,60,0.08); }
.tlist .tl-prio.pr-medium   { color:#3b82f6; border-color:rgba(59,130,246,0.4); background:rgba(59,130,246,0.08); }
.tlist .tl-prio.pr-low      { color:#9ca3af; border-color:rgba(156,163,175,0.4); background:rgba(156,163,175,0.08); }

/* Pulsing dot for open status */
.tlist .tl-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.tlist .tl-dot.live { background:var(--tl-on); box-shadow:0 0 5px rgba(34,197,94,0.7); animation: tl-pulse 2.4s ease-out infinite; }
.tlist .tl-dot.flat { background:#6b7280; }
@keyframes tl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Staggered row fade-in for first 8 rows */
@keyframes tl-rowin { from { opacity:0; transform: translateY(2px); } to { opacity:1; transform:none; } }
.tlist .data-table tbody tr { animation: tl-rowin 0.32s cubic-bezier(0.2,0.7,0.2,1) backwards; }
.tlist .data-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.tlist .data-table tbody tr:nth-child(2) { animation-delay: 50ms; }
.tlist .data-table tbody tr:nth-child(3) { animation-delay: 100ms; }
.tlist .data-table tbody tr:nth-child(4) { animation-delay: 150ms; }
.tlist .data-table tbody tr:nth-child(5) { animation-delay: 200ms; }
.tlist .data-table tbody tr:nth-child(6) { animation-delay: 250ms; }
.tlist .data-table tbody tr:nth-child(7) { animation-delay: 300ms; }
.tlist .data-table tbody tr:nth-child(8) { animation-delay: 350ms; }
.tlist .data-table tbody tr:nth-child(n+9) { animation: none; }

.tlist .sk-queue-tabs { display:flex; gap:0.25rem; flex-wrap:wrap;
    margin:0.4rem 0 0.85rem; padding-bottom:0.5rem;
    border-bottom:1px solid var(--border); }
.tlist .sk-queue-tab { display:inline-flex; align-items:center; gap:0.4rem;
    padding:6px 12px; border-radius:999px;
    background:transparent; border:1px solid var(--border);
    color:var(--text-muted); font-size:0.78rem; font-weight:500;
    text-decoration:none; transition:border-color 0.15s, background 0.15s, color 0.15s; }
.tlist .sk-queue-tab:hover { color:var(--text); border-color:var(--tl-accent);
    background:rgba(74,158,255,0.06); }
.tlist .sk-queue-tab.active { color:var(--tl-accent);
    border-color:var(--tl-accent); background:rgba(74,158,255,0.12); }
.tlist .sk-queue-tab.tab-sla.active { color:#ef4444;
    border-color:#ef4444; background:rgba(239,68,68,0.10); }
.tlist .sk-queue-badge { display:inline-flex; align-items:center;
    justify-content:center; min-width:1.25rem; padding:1px 6px;
    border-radius:999px; font-size:0.66rem; font-weight:700;
    background:rgba(255,255,255,0.06); color:inherit; }
.tlist .sk-queue-tab.tab-sla .sk-queue-badge { background:rgba(239,68,68,0.18); color:#ef4444; }

/* Row one-click actions — visible on hover only on desktop. */
.tlist .sk-row-actions { display:inline-flex; gap:2px; align-items:center;
    opacity:0; transition:opacity 0.12s; margin-right:4px; }
.tlist tr:hover .sk-row-actions { opacity:1; }
@media (max-width:768px) { .tlist .sk-row-actions { opacity:1; } }
.tlist .sk-row-act-btn { background:transparent; border:1px solid transparent;
    color:var(--text-muted); width:24px; height:24px; padding:0;
    border-radius:4px; font-size:0.85rem; line-height:1; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; }
.tlist .sk-row-act-btn:hover { color:var(--text); background:var(--bg-input);
    border-color:var(--border); }
.tlist .sk-row-act-btn.act-resolve:hover { color:#22c55e; }
.tlist .sk-row-act-btn.act-assign:hover { color:#3b82f6; }
.tlist .sk-row-act-btn.act-preview:hover { color:#a78bfa; }

/* Make the drawer slightly wider for the ticket preview. */
.skui-drawer[data-id="ticket-preview"] { width:min(480px, 96vw); }
.tlist .sk-prev-comment { padding:0.4rem 0.55rem; border-radius:6px;
    background:rgba(255,255,255,0.03); border:1px solid var(--border);
    margin-bottom:0.4rem; font-size:0.82rem; }
.tlist .sk-prev-comment-head { display:flex; justify-content:space-between;
    color:var(--text-muted); font-size:0.7rem; margin-bottom:0.2rem; }
.tlist .sk-prev-comment-body { white-space:pre-wrap; word-break:break-word;
    color:var(--text); }
.tlist .sk-prev-comment.internal { border-color:rgba(245,158,11,0.4);
    background:rgba(245,158,11,0.06); }
.tlist .sk-prev-desc { white-space:pre-wrap; word-break:break-word;
    font-size:0.82rem; color:var(--text); line-height:1.45; }
.tlist .sk-prev-meta dt { font-weight:500; }
.tlist .sk-prev-meta dd { font-family:var(--tl-mono); font-size:0.78rem; }

.tl-fab-stack {
    position: fixed; right: 14px; bottom: 18px;
    display: none; flex-direction: column; gap: 0.5rem;
    z-index: 950;
  }
  .tl-fab {
    width: 56px; height: 56px; border-radius: 50%;
    border: 1px solid var(--border); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
    font-size: 1.5rem; line-height: 1;
    color: #fff; text-decoration: none;
    transition: transform 0.12s;
  }
  .tl-fab:active { transform: scale(0.94); }
  .tl-fab.primary { background: #2563eb; }
  @media (max-width: 768px) {
    .tl-fab-stack { display: flex; }
    .tlist { padding-bottom: 90px; }
  }

.ticket-filters { display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; }
.ticket-filters select { background:var(--bg-input); color:var(--text); border:1px solid var(--border); padding:0.3rem 0.6rem; border-radius:var(--radius); font-size:0.8rem; }
.priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:0.3rem; }
.priority-urgent { background:#ef4444; }
.priority-high { background:#f59e0b; }
.priority-medium { background:#3b82f6; }
.priority-low { background:#6b7280; }
/* Compact analytics — one tighter row, half the previous vertical space.
   Used to be 2 columns × 1.5rem padding × 5 rows. Drops the separate
   stat-cards block (replaced by cards.stat_grid) and uses 3 columns of
   smaller analytics cards above 1024px. */
.analytics-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:0.75rem; margin-bottom:1rem; }
.analytics-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:0.75rem 0.85rem; }
.analytics-card h3 { font-size:0.85rem; margin:0 0 0.5rem; }
.bar-row { display:flex; align-items:center; gap:0.5rem; margin-bottom:0.3rem; font-size:0.78rem; }
.bar-label { min-width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-fill { height:14px; background:var(--primary); border-radius:3px; min-width:2px; }
.bar-count { font-size:0.75rem; color:var(--text-muted); min-width:30px; }
.synopsis-tooltip { position:fixed; z-index:9999; max-width:350px; padding:0.6rem 0.8rem; background:#1e1e2e; color:#e0e0e0; border:1px solid #444; border-radius:6px; font-size:0.8rem; line-height:1.4; box-shadow:0 4px 12px rgba(0,0,0,0.4); pointer-events:none; opacity:0; transition:opacity 0.15s ease; }
.synopsis-tooltip.visible { opacity:1; }
.synopsis-tooltip .synopsis-label { font-size:0.65rem; text-transform:uppercase; color:#888; margin-bottom:0.3rem; letter-spacing:0.5px; }
/* Skeleton loader for the AI synopsis line — 1 short shimmer bar instead
   of the dangling "Loading..." text that the user flagged as confusing. */
.synopsis-skeleton {
    display:inline-block; width:80%; height:0.8rem; border-radius:4px;
    background:linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.04) 100%);
    background-size:200% 100%;
    animation:synopsisShim 1.2s ease-in-out infinite;
}
@keyframes synopsisShim { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (max-width:768px) { .analytics-grid { grid-template-columns:1fr; } }

/* ── Recurring tickets visual harmony (scoped under .trec) ────────── */
.trec {
    --tr-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --tr-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --tr-mute: var(--text-muted);
    --tr-fg: var(--text);
    --tr-bd: var(--border);
    --tr-card: var(--bg-card);
    --tr-accent: var(--primary, #4a9eff);
    font-family: var(--tr-sans);
    color: var(--tr-fg);
    letter-spacing: -0.005em;
}

.trec .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.trec h2 {
    font-family: var(--tr-sans);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.trec .intro {
    color: var(--tr-mute);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

/* Mono stat pills for summary */
.trec .stats-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--tr-bd);
}

.trec .stat-pill {
    font-family: var(--tr-mono);
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tr-bd);
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    line-height: 1.1;
}

.trec .stat-pill .label {
    color: var(--tr-mute);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.62rem;
    font-weight: 500;
}

.trec .stat-pill .value {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--tr-fg);
}

/* Mono uppercase thead */
.trec .data-table thead th {
    font-family: var(--tr-mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tr-mute);
    font-weight: 600;
}

/* Compact body rows */
.trec .data-table tbody td {
    padding-top: 9px;
    padding-bottom: 9px;
    vertical-align: middle;
}

/* Inactive rows dimmed */
.trec .data-table tbody tr.inactive {
    opacity: 0.5;
}

/* Mono badges */
.trec .mono-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--tr-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tr-bd);
    line-height: 1.3;
}

.trec .mono-badge.active {
    color: #22c55e;
    border-color: rgba(34,197,94,0.4);
    background: rgba(34,197,94,0.08);
}

.trec .mono-badge.inactive {
    color: #9ca3af;
    border-color: rgba(156,163,175,0.4);
    background: rgba(156,163,175,0.08);
}

/* Staggered row fade-in */
@keyframes tr-rowin {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

.trec .data-table tbody tr {
    animation: tr-rowin 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
}
.trec .data-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.trec .data-table tbody tr:nth-child(2) { animation-delay: 50ms; }
.trec .data-table tbody tr:nth-child(3) { animation-delay: 100ms; }
.trec .data-table tbody tr:nth-child(4) { animation-delay: 150ms; }
.trec .data-table tbody tr:nth-child(5) { animation-delay: 200ms; }
.trec .data-table tbody tr:nth-child(n+6) { animation: none; }

.th-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .th-card { background: var(--bg-card); border:1px solid var(--border); border-radius: 6px; padding: 0.8rem; }
  .th-card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
  .th-card table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-family: ui-monospace, monospace; }
  .th-card th, .th-card td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .th-card th { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; }
  .th-card td.num { text-align: right; }
  .th-grpc { color: #10b981; }
  .th-ws { color: #3b82f6; }
  .th-http { color: #f59e0b; }
  .th-warn { color: #ef4444; font-weight: 600; }

  .wrap {
    width:100%; max-width:420px; min-height:100vh;
    display:flex; flex-direction:column;
    background:var(--card);
    box-shadow:0 0 40px rgba(0,0,0,.06);
  }
  header.hdr {
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    color:#fff; padding:0.9rem 1rem; display:flex; align-items:center; gap:0.6rem;
  }
  .hdr .logo {
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.18); display:flex; align-items:center;
    justify-content:center; font-size:1.1rem;
  }
  .hdr .meta { flex:1; line-height:1.2; }
  .hdr .meta .title { font-size:0.95rem; font-weight:600; }
  .hdr .meta .sub { font-size:0.72rem; opacity:0.85; }
  .hdr .pill {
    font-size:0.65rem; padding:2px 8px; border-radius:999px;
    background:rgba(255,255,255,.2); letter-spacing:0.02em;
  }

  #msgs {
    flex:1; overflow-y:auto; padding:0.9rem; display:flex;
    flex-direction:column; gap:0.45rem;
    background:#fafafa;
  }
  .msg {
    max-width:82%; padding:0.55rem 0.85rem; border-radius:16px;
    font-size:0.9rem; line-height:1.4; word-wrap:break-word;
    white-space:pre-wrap;
  }
  .msg.user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; }
  .msg.tech { align-self:flex-start; background:var(--bubble); color:var(--ink); border-bottom-left-radius:4px; }
  .msg.system { align-self:center; background:none; color:var(--muted); font-size:0.76rem; font-style:italic; padding:0.15rem 0.4rem; }
  .stamp { display:block; font-size:0.65rem; opacity:0.6; margin-top:2px; }

  .composer {
    border-top:1px solid var(--border);
    padding:0.6rem; background:#fff;
    display:flex; gap:0.5rem; align-items:flex-end;
  }
  .composer textarea {
    flex:1; border:1px solid var(--border); border-radius:16px;
    padding:0.55rem 0.9rem; font:inherit; font-size:0.9rem;
    resize:none; max-height:120px; min-height:38px; outline:none;
    background:#fafafa;
  }
  .composer textarea:focus { border-color:var(--accent); background:#fff; }
  .composer button {
    background:var(--accent); color:#fff; border:0; border-radius:50%;
    width:38px; height:38px; cursor:pointer; font-size:1rem;
    display:flex; align-items:center; justify-content:center;
  }
  .composer button:hover { background:var(--accent2); }
  .composer button:disabled { opacity:0.5; cursor:not-allowed; }

  .toolbar {
    display:flex; gap:0.4rem; padding:0.4rem 0.6rem;
    border-top:1px solid var(--border); background:#fff;
    justify-content:flex-end;
  }
  .toolbar button {
    background:transparent; color:var(--muted); border:1px solid var(--border);
    padding:0.3rem 0.6rem; font-size:0.7rem; border-radius:999px; cursor:pointer;
  }
  .toolbar button:hover { color:var(--ink); border-color:#bbb; }
  .toolbar .danger:hover { color:var(--danger); border-color:var(--danger); }

  /* Orphan .modal-bg/.modal/.offline-banner block was a stray
     copy of tray_chat.css rules that landed in global scope. The
     bare ".modal { background:#fff; max-width:340px; }" stripped
     position:fixed/inset:0 from the canonical step-up modal at
     line 3556, so step-up-protected actions (Win11 upgrade,
     uninstall agent, etc.) rendered as a 340px white box in the
     normal flow. Removed — tray_chat.css keeps its own scoped
     copy for the tray UI. */

  .offline-banner {
    display:none; text-align:center; padding:0.35rem;
    background:#fff3cd; color:#8a6d3b; font-size:0.75rem;
    border-bottom:1px solid #f5e4a0;
  }
  .offline-banner.on { display:block; }

.unassigned-page { display:flex; flex-direction:column; gap:1rem; }
    .unassigned-metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:0.75rem; }
    .unassigned-ops-grid { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(280px, 0.75fr); gap:0.75rem; align-items:stretch; }
    .unassigned-install-panel { border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--surface,var(--bg-card,#1a1d27)); padding:1rem; min-width:0; }
    .unassigned-install-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:0.75rem; }
    .unassigned-install-title { margin:0; font-size:0.95rem; font-weight:600; color:var(--text,#e1e4ed); }
    .unassigned-install-sub { margin:0.2rem 0 0; color:var(--text-muted,#8b8fa3); font-size:0.82rem; line-height:1.45; }
    .unassigned-tabs { display:flex; gap:0.4rem; flex-wrap:wrap; }
    .install-tab { cursor:pointer; min-width:4.5rem; justify-content:center; }
    .install-tab.active { background:var(--accent,var(--primary,#58a6ff)); color:#fff; border-color:var(--accent,var(--primary,#58a6ff)); }
    .install-pane-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0.5rem; align-items:center; }
    .install-command { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.78rem; min-width:0; }
    .unassigned-transport-panel { display:flex; flex-direction:column; gap:0.75rem; border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--surface,var(--bg-card,#1a1d27)); padding:1rem; }
    .unassigned-transport-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.5rem; }
    .unassigned-transport-stat { padding:0.65rem; border:1px solid var(--border,#2d3140); border-radius:var(--radius-sm,6px); background:var(--bg,#0f1117); }
    .unassigned-transport-stat span { display:block; color:var(--text-muted,#8b8fa3); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.04em; }
    .unassigned-transport-stat strong { display:block; margin-top:0.2rem; color:var(--text,#e1e4ed); font-size:1.25rem; line-height:1; }
    .unassigned-notice { margin:0; padding:0.65rem 0.75rem; border:1px solid color-mix(in srgb, var(--warning,#d29922) 55%, var(--border,#2d3140)); border-radius:var(--radius-sm,6px); background:color-mix(in srgb, var(--warning,#d29922) 11%, transparent); color:var(--text,#e1e4ed); font-size:0.8rem; line-height:1.45; }
    .unassigned-ok { border-color:color-mix(in srgb, var(--success,#3fb950) 55%, var(--border,#2d3140)); background:color-mix(in srgb, var(--success,#3fb950) 10%, transparent); }
    .unassigned-toolbar { display:flex; gap:0.6rem; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:0.75rem; }
    .unassigned-search { display:flex; align-items:center; gap:0.45rem; min-width:min(26rem,100%); flex:1; padding:0.45rem 0.65rem; border:1px solid var(--border,#2d3140); border-radius:var(--radius-md,8px); background:var(--bg-input,#0d1117); color:var(--text-muted,#8b8fa3); }
    .unassigned-search input { width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--text,#e1e4ed); font-size:0.88rem; }
    .unassigned-chip-row { display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
    .unassigned-card-actions { display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }
    .unassigned-host { display:flex; flex-direction:column; gap:0.15rem; min-width:12rem; }
    .unassigned-host strong { color:var(--text,#e1e4ed); }
    .unassigned-host span, .unassigned-muted { color:var(--text-muted,#8b8fa3); font-size:0.78rem; }
    .unassigned-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.8rem; }
    .unassigned-transport { display:inline-flex; align-items:center; justify-content:center; min-width:4.2rem; padding:0.18rem 0.55rem; border-radius:999px; font-size:0.7rem; font-weight:700; border:1px solid currentColor; }
    .unassigned-transport--grpc { color:var(--info,#58a6ff); background:color-mix(in srgb, var(--info,#58a6ff) 14%, transparent); }
    .unassigned-transport--websocket { color:var(--warning,#d29922); background:color-mix(in srgb, var(--warning,#d29922) 14%, transparent); }
    .unassigned-transport--http { color:var(--text-muted,#8b8fa3); background:color-mix(in srgb, var(--text-muted,#8b8fa3) 12%, transparent); }
    .unassigned-transport--unknown { color:var(--text-muted,#8b8fa3); background:transparent; }
    .unassigned-org-select,
    .unassigned-org-select option {
        background: var(--bg-input, #0d1117);
        color: var(--text, #e6edf3);
        -webkit-text-fill-color: var(--text, #e6edf3);
    }
    .unassigned-import-actions { min-width:18rem; }
    .unassigned-import-actions .sk-searchable-select-button,
    .unassigned-import-actions .sk-searchable-select-search,
    .unassigned-import-actions .sk-searchable-select-panel,
    .unassigned-import-actions .sk-searchable-select-row {
        background: var(--bg-input, #0d1117) !important;
        color: var(--text, #e6edf3) !important;
        -webkit-text-fill-color: var(--text, #e6edf3);
    }
    .unassigned-import-actions .sk-searchable-select-panel {
        background: var(--bg-card, var(--bg-input, #0d1117)) !important;
        border-color: var(--border, #30363d) !important;
    }
    .unassigned-import-actions .sk-searchable-select-row:hover {
        background: var(--bg-hover, rgba(88,166,255,0.18)) !important;
    }
    .unassigned-row[hidden] { display:none; }
    .unassigned-empty-cell { padding:0 !important; }
    @media (max-width: 760px) {
        .unassigned-ops-grid { grid-template-columns:1fr; }
        .install-pane-row { grid-template-columns:1fr; }
        .unassigned-import-actions { min-width:14rem; }
    }

/* ── Tabs ── */
.un-tab-nav { display:flex; gap:0.25rem; border-bottom:1px solid var(--border); margin-bottom:1rem; overflow-x:auto; }
.un-tab-btn { background:none; border:none; padding:0.5rem 1.1rem; cursor:pointer; font-size:0.88rem;
              color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.un-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.un-tab-content { display:none; }
.un-tab-content.active { display:block; }
/* Anchor jumps (e.g. #switches, #topology) land below the fixed top bar,
   so the model heading and tab content aren't covered by .sk-topbar. */
.un-tab-content { scroll-margin-top: 72px; }
.un-tab-nav { scroll-margin-top: 72px; }
.sw-card-name, .sw-card-meta { scroll-margin-top: 72px; }

/* ── Controller cards ── */
.ctrl-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.ctrl-card { padding:1rem; cursor:default; }

/* ── Topology ── */
#topo-container { width:100%; height:520px; background:var(--card-bg); border:1px solid var(--border);
                  border-radius:8px; position:relative; }
.topo-toolbar { display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin-bottom:0.75rem; }
.topo-legend { display:flex; gap:0.75rem; flex-wrap:wrap; font-size:0.75rem; color:var(--text-muted); margin-bottom:0.5rem; }
.topo-legend span { display:inline-flex; align-items:center; gap:0.3rem; }
.topo-dot { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ── Device cards ── */
.dev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.75rem; }
.dev-card { border:1px solid var(--border); border-radius:8px; padding:0.85rem; cursor:pointer; transition:border-color .15s; }
.dev-card:hover { border-color:var(--primary); }
.dev-icon { font-size:1.6rem; width:40px; height:40px; border-radius:8px; display:flex; align-items:center;
            justify-content:center; margin-right:0.5rem; flex-shrink:0; }
.dev-icon.gateway { background:#ede9fe; }
.dev-icon.switch   { background:#d1fae5; }
.dev-icon.ap       { background:#fef3c7; }
.dev-icon.other    { background:#f3f4f6; }

/* ── Switch faceplate ── */
#faceplate-wrap { background:#111; border-radius:10px; padding:1.25rem 1.5rem; margin-top:0.75rem;
                  box-shadow:0 4px 24px rgba(0,0,0,.4); }
.faceplate-model { color:#9ca3af; font-size:0.8rem; margin-bottom:0.75rem; letter-spacing:.04em; }
.faceplate-ports { display:flex; flex-wrap:wrap; gap:5px; }
.fp-port { width:34px; border-radius:4px; background:#1f2937; padding:4px 3px 5px; text-align:center;
           cursor:pointer; position:relative; transition:transform .1s; }
.fp-port:hover { transform:scale(1.12); z-index:10; }
.fp-led  { height:7px; border-radius:2px; margin-bottom:3px; }
.fp-num  { font-size:9px; color:#9ca3af; line-height:1; }
.fp-spd  { font-size:8px; color:#6b7280; line-height:1.2; }
.fp-port.up    .fp-led { background:#22c55e; }
.fp-port.poe   .fp-led { background:#16a34a; box-shadow:0 0 5px #16a34a88; }
.fp-port.down  .fp-led { background:#374151; }
.fp-port.uplink .fp-led { background:#3b82f6; box-shadow:0 0 5px #3b82f688; }
.fp-port.sfp    .fp-led { background:#8b5cf6; }
.fp-tooltip { position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
              background:#1e293b; color:#e2e8f0; padding:0.5rem 0.65rem; border-radius:6px;
              font-size:0.73rem; white-space:nowrap; z-index:100; pointer-events:none;
              border:1px solid #334155; box-shadow:0 4px 12px rgba(0,0,0,.5); display:none; }
.fp-port:hover .fp-tooltip { display:block; }
.fp-legend { display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.75rem; font-size:0.73rem; }
.fp-legend span { display:inline-flex; align-items:center; gap:0.3rem; color:#9ca3af; }
.fp-legend-dot { width:10px; height:7px; border-radius:2px; display:inline-block; }

/* ── Device detail drawer ── */
#dev-drawer { position:fixed; top:0; right:-480px; width:460px; height:100vh; z-index:3000;
              background:var(--bg); border-left:1px solid var(--border); overflow-y:auto;
              transition:right .25s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 32px rgba(0,0,0,.2); }
#dev-drawer.open { right:0; }
#dev-drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:2999; }
#dev-drawer-overlay.open { display:block; }
#client-drawer { position:fixed; top:0; right:-420px; width:400px; height:100vh; z-index:3100;
                 background:var(--bg); border-left:1px solid var(--border); overflow-y:auto;
                 transition:right .25s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 32px rgba(0,0,0,.3); }
#client-drawer.open { right:0; }
#client-drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:3099; }
#client-drawer-overlay.open { display:block; }
.fp-port.fp-has-client { cursor:pointer; outline:1px solid rgba(99,102,241,.5); }
.fp-port.fp-has-client:hover { outline:2px solid #6366f1; }

/* ── Manage controller drawer (triggered by the gear button) ── */
#mgr-drawer { position:fixed; top:0; right:-420px; width:400px; height:100vh; z-index:3000;
              background:var(--bg); border-left:1px solid var(--border); overflow-y:auto;
              transition:right .25s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 32px rgba(0,0,0,.2); }
#mgr-drawer.open { right:0; }
#mgr-drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:2999; }
#mgr-drawer-overlay.open { display:block; }
.drawer-header { padding:1.25rem 1.5rem 1rem; border-bottom:1px solid var(--border);
                 display:flex; align-items:start; justify-content:space-between; gap:1rem; position:sticky; top:0;
                 background:var(--bg); z-index:1; }
.drawer-body { padding:1.25rem 1.5rem; }
.drawer-section { margin-bottom:1.5rem; }
.drawer-section h4 { font-size:0.78rem; text-transform:uppercase; letter-spacing:.06em;
                     color:var(--text-muted); margin:0 0 0.75rem; border-bottom:1px solid var(--border); padding-bottom:0.35rem; }
.drawer-kv { display:grid; grid-template-columns:auto 1fr; gap:0.3rem 0.75rem; font-size:0.85rem; }
.drawer-kv span:nth-child(odd) { color:var(--text-muted); white-space:nowrap; }

/* ── Port table in drawer ── */
.port-mini-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.port-mini-table th { text-align:left; color:var(--text-muted); font-weight:500; padding:0.2rem 0.4rem;
                      border-bottom:1px solid var(--border); font-size:0.72rem; }
.port-mini-table td { padding:0.25rem 0.4rem; border-bottom:1px solid var(--border); }

/* ── Inventory badge ── */
.inv-badge { display:inline-flex; align-items:center; gap:0.4rem; background:var(--card-bg);
             border:1px solid var(--border); border-radius:6px; padding:0.5rem 0.75rem;
             font-size:0.82rem; margin:0.25rem 0; }
.inv-badge img { width:36px; height:36px; object-fit:contain; border-radius:4px; background:#f3f4f6; }

/* ── Search bar ── */
.un-search { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.85rem; flex-wrap:wrap; }
.un-search input { padding:0.35rem 0.6rem; border-radius:6px; border:1px solid var(--border);
                   font-size:0.85rem; background:var(--input-bg,var(--card-bg)); color:var(--text);
                   min-width:220px; flex:1; max-width:360px; }
.un-search-count { font-size:0.78rem; color:var(--text-muted); margin-left:0.25rem; }

/* ── Switch card grid ── */
.sw-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.65rem; margin-bottom:1rem; }
.sw-card { border:1px solid var(--border); border-radius:8px; padding:0.85rem 1rem; cursor:pointer;
           transition:border-color .15s,background .15s; }
.sw-card:hover { border-color:var(--primary); }
.sw-card.selected { border-color:var(--primary); background:rgba(88,166,255,.06); }
.sw-card-name { font-weight:600; font-size:0.88rem; margin-bottom:0.15rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sw-card-meta { font-size:0.75rem; color:var(--text-muted); }

/* ── Port speed colors (faceplate) ── */
.fp-port.spd-100  .fp-led { background:#f59e0b; }          /* 100Mbps — amber */
.fp-port.spd-1g   .fp-led { background:#22c55e; }          /* 1 Gbps  — green */
.fp-port.spd-2g5  .fp-led { background:#34d399; }          /* 2.5 Gbps— teal */
.fp-port.spd-10g  .fp-led { background:#60a5fa; box-shadow:0 0 5px #60a5fa88; }  /* 10G — blue */
.fp-port.spd-sfp  .fp-led { background:#a78bfa; box-shadow:0 0 5px #a78bfa88; }  /* SFP — purple */
/* poe overrides speed color with glow */
.fp-port.poe.spd-1g   .fp-led { background:#16a34a; box-shadow:0 0 5px #16a34a88; }
.fp-port.poe.spd-10g  .fp-led { background:#2563eb; box-shadow:0 0 5px #2563eb88; }
.fp-port.down         .fp-led { background:#374151 !important; box-shadow:none !important; }

/* ── OS / device type badges ── */
.os-badge { display:inline-block; font-size:0.68rem; padding:1px 5px; border-radius:3px;
            background:var(--card-bg); border:1px solid var(--border); color:var(--text-muted);
            margin-left:0.3rem; vertical-align:middle; }

/* ── Health cards ── */
.health-device-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.65rem; }
.health-device-card { border:1px solid var(--border); border-radius:8px; padding:0.85rem; cursor:pointer; transition:border-color .15s, transform .1s; }
.health-device-card:hover { border-color:var(--primary); transform:translateY(-1px); }
.health-score { font-size:1.8rem; font-weight:700; line-height:1; }
.health-score.good   { color:#22c55e; }
.health-score.warn   { color:#f59e0b; }
.health-score.bad    { color:#ef4444; }
.health-score.na     { color:var(--text-muted); }

/* ── Health breakdown modal ── */
#hb-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:4500;
            align-items:center; justify-content:center; padding:1rem; }
#hb-modal.open { display:flex; }
.hb-modal-card { background:var(--bg); border:1px solid var(--border); border-radius:10px;
                 width:100%; max-width:540px; max-height:90vh; overflow:auto; }
.hb-modal-head { padding:1rem 1.25rem; border-bottom:1px solid var(--border);
                 display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.hb-row { display:grid; grid-template-columns:115px 70px 1fr auto; gap:0.6rem;
          padding:0.55rem 0.65rem; border-bottom:1px solid var(--border); align-items:center; }
.hb-key { color:var(--text-muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:.05em; }
.hb-val { font-weight:600; font-size:0.92rem; }
.hb-thresh { font-size:0.75rem; color:var(--text-muted); }
.hb-pill { padding:1px 8px; border-radius:10px; font-size:0.7rem; font-weight:600; text-transform:uppercase; }
.hb-pill.good { background:rgba(34,197,94,.12); color:#15803d; border:1px solid rgba(34,197,94,.4); }
.hb-pill.warn { background:rgba(245,158,11,.12); color:#92400e; border:1px solid rgba(245,158,11,.4); }
.hb-pill.bad  { background:rgba(239,68,68,.12);  color:#991b1b; border:1px solid rgba(239,68,68,.4); }
.hb-pill.na   { background:rgba(107,114,128,.12); color:#6b7280; border:1px solid rgba(107,114,128,.4); }

/* ── Multi-WAN sidebar ── */
.wan-side { border:1px solid var(--border); border-radius:8px; padding:0.85rem 1rem;
            background:var(--card-bg); margin-bottom:1rem; }
.wan-side h4 { margin:0 0 0.6rem; font-size:0.78rem; text-transform:uppercase;
               letter-spacing:.06em; color:var(--text-muted); }
.wan-row { display:flex; align-items:center; gap:0.6rem; padding:0.4rem 0;
           border-top:1px solid var(--border); font-size:0.85rem; }
.wan-row:first-of-type { border-top:none; }
.wan-row .wan-label { font-weight:700; min-width:54px; }
.wan-row .wan-isp { color:var(--text-muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wan-status-up { color:#22c55e; font-weight:600; }
.wan-status-down { color:#ef4444; font-weight:600; }

/* ── Settings (VLANs / Firewall / Port Forwards) ── */
.settings-section { margin-bottom:1.5rem; }
.settings-section h4 { font-size:0.82rem; text-transform:uppercase; letter-spacing:.06em;
                       color:var(--text-muted); margin:0 0 0.6rem; }
.vlan-pill { display:inline-flex; align-items:center; gap:0.3rem; background:var(--card-bg);
             border:1px solid var(--border); border-radius:6px; padding:0.3rem 0.6rem;
             font-size:0.8rem; margin:0.2rem; }
.vlan-tag { font-size:0.7rem; padding:1px 5px; border-radius:3px; background:#1a2d4a; color:#58a6ff; font-weight:600; }

/* ── Tabs ── */
.tab-bar { display:flex; gap:0; border-bottom:2px solid var(--border); margin-bottom:1.25rem; }
.tab-btn { padding:0.55rem 1.2rem; font-size:0.88rem; font-weight:600; background:none; border:none;
           border-bottom:2px solid transparent; margin-bottom:-2px; cursor:pointer;
           color:var(--text-muted); transition:color .15s, border-color .15s; }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-pane { display:none; }
.tab-pane.active { display:block; }

/* ── Cloud / Site Manager ── */
.sm-section { margin-bottom:1.5rem; }
.sm-section h3 { font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
                 color:var(--text-muted); margin-bottom:0.6rem; }
.sm-acct-row { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
               padding:0.6rem 0.9rem; background:var(--card-bg); border:1px solid var(--border);
               border-radius:8px; margin-bottom:0.5rem; font-size:0.85rem; }
.sm-acct-row .acct-label { font-weight:600; flex:1; min-width:120px; }
.sm-acct-row .acct-status { font-size:0.75rem; color:var(--text-muted); flex:2; min-width:160px; }
.sm-acct-row .acct-actions { display:flex; gap:0.4rem; flex-shrink:0; }
.btn-xs { padding:3px 10px; font-size:0.75rem; border-radius:6px; border:1px solid var(--border);
          background:transparent; color:var(--text-muted); cursor:pointer; transition:all .15s; }
.btn-xs:hover { border-color:var(--primary); color:var(--primary); }
.btn-xs.danger:hover { border-color:#f85149; color:#f85149; }
.add-acct-form { background:var(--card-bg); border:1px solid var(--border); border-radius:10px;
                 padding:1rem 1.1rem; margin-top:0.75rem; }
.add-acct-form .form-row { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:flex-end; }
.add-acct-form .form-group { display:flex; flex-direction:column; gap:4px; }
.add-acct-form label { font-size:0.75rem; color:var(--text-muted); font-weight:500; }
.add-acct-form input { background:var(--bg); border:1px solid var(--border); border-radius:6px;
                       padding:6px 10px; color:var(--text); font-size:0.85rem; min-width:200px; }
.add-acct-form input:focus { outline:none; border-color:var(--primary); }

/* ── SM data grids ── */
.sm-hosts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:0.6rem; margin-bottom:1rem; }
.sm-host-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
                padding:0.75rem 0.9rem; font-size:0.82rem; }
.sm-host-card .hname { font-weight:700; margin-bottom:2px; }
.sm-host-card .hmeta { color:var(--text-muted); font-size:0.75rem; }
.sm-sites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:0.6rem; margin-bottom:1rem; }
.sm-site-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px;
                padding:0.65rem 0.8rem; font-size:0.82rem; }
.sm-device-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
.sm-device-table th { text-align:left; padding:0.4rem 0.6rem; font-size:0.72rem; font-weight:500;
                       color:var(--text-muted); border-bottom:2px solid var(--border); }
.sm-device-table td { padding:0.4rem 0.6rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.sm-device-table tr:hover td { background:rgba(88,166,255,.04); }
.upd-badge { background:#7c3aed22; color:#a78bfa; border:1px solid #7c3aed44;
             font-size:0.68rem; padding:1px 6px; border-radius:4px; font-weight:600; white-space:nowrap; }
.fw-ok { font-size:0.75rem; color:#3fb950; }
.fw-upd { font-size:0.75rem; color:#a78bfa; font-weight:600; }

/* ── Sub-tabs inside Cloud pane ── */
.subtab-bar { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.subtab-btn { padding:0.4rem 0.9rem; font-size:0.82rem; font-weight:500; background:none; border:none;
              border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;
              color:var(--text-muted); transition:color .15s, border-color .15s; }
.subtab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.subtab-pane { display:none; }
.subtab-pane.active { display:block; }
.filter-row { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.75rem; flex-wrap:wrap; }
.filter-row input,.filter-row select { background:var(--bg); border:1px solid var(--border);
  border-radius:6px; padding:5px 10px; color:var(--text); font-size:0.82rem; }
.empty-note { color:var(--text-muted); font-size:0.85rem; text-align:center; padding:2rem 0; }

/* ── Site grid ── */
.un-sites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.un-site-card { padding:1rem 1.1rem; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.un-site-card:hover { border-color:var(--primary); box-shadow:0 2px 12px rgba(88,166,255,.1); }
.mode-badge { font-size:0.7rem; padding:2px 6px; border-radius:3px; background:#d1fae5; color:#065f46; font-weight:600; }
.mode-badge.cloud { background:#dbeafe; color:#1e40af; }
.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.status-dot.green { background:#22c55e; box-shadow:0 0 4px #22c55e88; }
.status-dot.amber { background:#f59e0b; }
.status-dot.red   { background:#ef4444; }
.status-dot.gray  { background:#6b7280; }
.un-stat-row { display:flex; gap:1rem; flex-wrap:wrap; font-size:0.8rem; color:var(--text-muted); margin-top:0.5rem; }
.un-stat-row span strong { color:var(--text); }
.un-card-footer { display:flex; gap:0.35rem; flex-wrap:wrap; margin-top:0.75rem; padding-top:0.6rem;
                  border-top:1px solid var(--border); }

/* ── Controller modal ── */

/* ── Tabs ── */
.up-tab-nav { display:flex; gap:0.25rem; border-bottom:1px solid var(--border); margin-bottom:1rem; overflow-x:auto; }
.up-tab-btn { background:none; border:none; padding:0.5rem 1.1rem; cursor:pointer; font-size:0.88rem;
              color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; }
.up-tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
.up-tab-content { display:none; }
.up-tab-content.active { display:block; }

/* ── Device grid ── */
.dev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:0.75rem; }
.dev-card { border:1px solid var(--border); border-radius:8px; padding:0.9rem 1rem; cursor:pointer; transition:border-color .15s; }
.dev-card:hover { border-color:var(--primary); }
.dev-card-header { display:flex; align-items:start; gap:0.65rem; margin-bottom:0.5rem; }
.dev-icon-wrap { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;
                 font-size:1.4rem; flex-shrink:0; background:var(--card-bg); border:1px solid var(--border); }
.dev-name { font-weight:600; font-size:0.88rem; line-height:1.2; }
.dev-model { font-size:0.74rem; color:var(--text-muted); }
.state-badge { display:inline-block; font-size:0.68rem; padding:1px 6px; border-radius:10px; font-weight:600;
               text-transform:uppercase; letter-spacing:.03em; }
.state-badge.connected,.state-badge.online { background:#d1fae5; color:#065f46; }
.state-badge.disconnected,.state-badge.offline { background:#fee2e2; color:#991b1b; }
.state-badge.unknown { background:#f3f4f6; color:#6b7280; }

/* ── Search bar ── */
.up-search { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.85rem; flex-wrap:wrap; }
.up-search input { padding:0.35rem 0.6rem; border-radius:6px; border:1px solid var(--border);
                   font-size:0.85rem; background:var(--input-bg,var(--card-bg)); color:var(--text);
                   min-width:200px; flex:1; max-width:340px; }
.up-search-count { font-size:0.78rem; color:var(--text-muted); }

/* ── Table ── */
.up-table { width:100%; border-collapse:collapse; font-size:0.84rem; }
.up-table th { text-align:left; padding:0.4rem 0.65rem; color:var(--text-muted); font-size:0.75rem;
               font-weight:500; border-bottom:2px solid var(--border); }
.up-table td { padding:0.4rem 0.65rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.up-table tr:hover td { background:rgba(88,166,255,.04); cursor:pointer; }

/* ── Device drawer ── */
#dev-drawer { position:fixed; top:0; right:-500px; width:480px; height:100vh; z-index:3000;
              background:var(--bg); border-left:1px solid var(--border); overflow-y:auto;
              transition:right .25s cubic-bezier(.4,0,.2,1); box-shadow:-8px 0 32px rgba(0,0,0,.2); }
#dev-drawer.open { right:0; }
#dev-drawer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:2999; }
#dev-drawer-overlay.open { display:block; }
.drawer-header { padding:1.25rem 1.5rem 1rem; border-bottom:1px solid var(--border);
                 display:flex; align-items:start; justify-content:space-between; gap:1rem;
                 position:sticky; top:0; background:var(--bg); z-index:1; }
.drawer-body { padding:1.25rem 1.5rem; }
.drawer-section { margin-bottom:1.5rem; }
.drawer-section h4 { font-size:0.78rem; text-transform:uppercase; letter-spacing:.06em;
                     color:var(--text-muted); margin:0 0 0.75rem; border-bottom:1px solid var(--border); padding-bottom:0.35rem; }
.drawer-kv { display:grid; grid-template-columns:auto 1fr; gap:0.3rem 0.75rem; font-size:0.84rem; }
.drawer-kv span:nth-child(odd) { color:var(--text-muted); white-space:nowrap; }

/* ── Snapshot thumb ── */
.snap-thumb { width:100%; border-radius:6px; border:1px solid var(--border); background:#111;
              display:block; object-fit:cover; max-height:200px; }

/* ── Site grid ── */
.up-sites-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.up-site-card { padding:1rem 1.1rem; cursor:pointer; transition:border-color .15s,box-shadow .15s; }
.up-site-card:hover { border-color:var(--primary); box-shadow:0 2px 12px rgba(88,166,255,.1); }
.mode-badge { font-size:0.7rem; padding:2px 6px; border-radius:3px; background:#d1fae5; color:#065f46; font-weight:600; }
.mode-badge.cloud { background:#dbeafe; color:#1e40af; }
.status-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; }
.status-dot.green { background:#22c55e; box-shadow:0 0 4px #22c55e88; }
.status-dot.amber { background:#f59e0b; }
.status-dot.red   { background:#ef4444; }
.status-dot.gray  { background:#6b7280; }
.up-stat-row { display:flex; gap:1rem; flex-wrap:wrap; font-size:0.8rem; color:var(--text-muted); margin-top:0.5rem; }
.up-stat-row span strong { color:var(--text); }
.up-card-footer { display:flex; gap:0.35rem; flex-wrap:wrap; margin-top:0.75rem; padding-top:0.6rem;
                  border-top:1px solid var(--border); }

.ao-badge { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; font-family: ui-monospace, monospace; border: 1px solid var(--border); }
  .ao-running { color: #f59e0b; border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.08); }
  .ao-err { color: #ef4444; border-color: rgba(239,68,68,0.4); background: rgba(239,68,68,0.08); }
  .ao-idle { color: var(--text-muted); }

  .ao-order { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 1rem; }
  .ao-order-head { display:flex; justify-content: space-between; align-items: center; gap:0.5rem; padding: .55rem .9rem; border-bottom: 1px solid var(--border); }
  .ao-order-head .meta { display:flex; gap:0.6rem; align-items:center; flex-wrap:wrap; font-size: .78rem; color: var(--text); }
  .ao-order-head .ao-order-date { color: var(--text-muted); font-family: ui-monospace, monospace; font-size: .72rem; }
  .ao-order-head .ao-order-total { font-weight:600; }
  .ao-order-head .ao-order-status { font-size:.65rem; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,0.06); color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
  .ao-order-head .ao-order-id { font-family: ui-monospace, monospace; font-size:.65rem; color:var(--text-muted); opacity:0.7; }
  .ao-vendor-btn { display:inline-flex; align-items:center; gap:0.35rem; padding:3px 9px; background:#0559C9; color:#fff !important; border-radius:4px; font-size:.7rem; font-weight:700; text-decoration:none; flex-shrink:0; }
  .ao-vendor-btn:hover { filter:brightness(1.10); }
  body.ao-view-grid .ao-vendor-btn .ao-vendor-btn-label { display:none; }
  body.ao-view-grid .ao-order-id { display:none; }
  .ao-spin { display:inline-block; animation: ao-spin-anim 1.1s linear infinite; }
  @keyframes ao-spin-anim { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  .ao-view-toggle { display:inline-flex; gap:0; margin-left:auto; }
  .ao-view-toggle button { background:var(--bg); border:1px solid var(--border); color:var(--text-muted); padding:3px 10px; font-size:.78rem; cursor:pointer; }
  .ao-view-toggle button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
  .ao-view-toggle button:first-child { border-radius:4px 0 0 4px; }
  .ao-view-toggle button:last-child { border-radius:0 4px 4px 0; }

  body.ao-view-grid #bulkForm { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:0.8rem; align-items:start; }
  body.ao-view-grid .ao-order { margin-bottom:0; }
  body.ao-view-grid .ao-items { display:flex; flex-direction:column; gap:.4rem; padding:.5rem; max-height:520px; overflow-y:auto; }
  body.ao-view-grid .ao-item { display:grid; grid-template-columns:56px 1fr auto auto; gap:.5rem; align-items:center; padding:.45rem; border:1px solid var(--border); border-radius:6px; }
  body.ao-view-grid .ao-item img { width:56px; height:56px; object-fit:contain; background:#fff; border-radius:4px; }
  body.ao-view-grid .ao-item .title { font-size:.78rem; font-weight:600; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  body.ao-view-grid .ao-item .meta { display:flex; flex-wrap:wrap; gap:.25rem .55rem; font-size:.65rem; margin-top:.15rem; }
  body.ao-view-grid .ao-item-actions { margin-top:.35rem; }
  body.ao-view-grid .ao-status { font-size:.6rem; padding:1px 6px; }
  body.ao-view-grid #bulkForm > .ao-empty { grid-column:1 / -1; }

  .ao-items { display: grid; grid-template-columns: 1fr; }
  .ao-item { display: grid; grid-template-columns: 80px minmax(0, 1fr) 180px 140px 32px; gap: .8rem; align-items: center; padding: .6rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); }
  .ao-item:last-child { border-bottom: 0; }
  .ao-item.imported { background: rgba(34,197,94,0.05); }
  .ao-item.returned { opacity: 0.55; background: rgba(239,68,68,0.04); }
  .ao-item img { width: 70px; height: 70px; object-fit: contain; background: white; border-radius: 4px; }
  .ao-img-empty { width:70px; height:70px; border-radius:4px; border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:.7rem; background:rgba(255,255,255,0.02); }
  .ao-item .title { font-weight: 600; font-size: .85rem; line-height: 1.3; }
  .ao-item .meta { font-family: ui-monospace, monospace; font-size: .7rem; color: var(--text-muted); margin-top: 4px; }
  .ao-item .meta span { margin-right: .8rem; }
  .ao-item-actions { margin-top:.45rem; display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; }
  .ao-item .note-line { margin-top: .35rem; font-size: .72rem; color: #93c5fd; }
  .ao-item .note-line strong { color: var(--text-muted); }
  .ao-note-btn { display:inline-flex; align-items:center; justify-content:center; gap:.32rem; min-width:1.55rem; height:1.7rem; padding:0 .55rem; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text-muted); cursor:pointer; vertical-align:middle; }
  .ao-note-btn:hover { color: var(--text); border-color: var(--primary); }
  .ao-note-btn svg { width: .9rem; height: .9rem; display:block; }
  .ao-note-label { font-size:.72rem; font-weight:600; }
  .ao-status { font-family: ui-monospace, monospace; font-size: .7rem; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .1em; }
  .ao-status.imported { color: #22c55e; background: rgba(34,197,94,0.10); border: 1px solid rgba(34,197,94,0.30); }
  .ao-status.pending { color: var(--text-muted); border: 1px solid var(--border); }

  .ao-bulk-bar { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 200; background: var(--bg-card); border: 1px solid var(--primary); border-radius: 8px; padding: .7rem 1.1rem; box-shadow: 0 6px 24px rgba(0,0,0,0.45); display: flex; gap: .8rem; align-items: center; }
  .ao-bulk-bar .count { font-weight: 600; color: var(--primary); }

  .ao-toast { position: fixed; bottom: 2rem; right: 2rem; background: rgba(34,197,94,0.95); color: white; padding: .8rem 1.2rem; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); display: none; z-index: 1000; font-weight: 600; font-size: .85rem; max-width: 400px; }
  .ao-toast.err { background: rgba(239,68,68,0.95); }

  .ao-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 999; }
  .ao-modal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; width: 580px; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
  .ao-modal-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
  .ao-modal-body { padding: 1rem; overflow: auto; flex: 1; }
  .ao-modal-foot { padding: .8rem 1rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; }
  .btn-close { background: transparent; border: 0; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; line-height: 1; }
  .ao-dest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
  .ao-dest { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; background: var(--bg); }
  .ao-dest:hover { border-color: var(--primary); }
  .ao-dest input { margin-top: .15rem; }
  .ao-dest .ao-hint { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
  .ao-pick-block { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--border); }
  .ao-label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .4rem; }
  .ao-pick-block input[type="text"], .ao-pick-block textarea, .ao-pick-block select { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: .4rem .6rem; border-radius: 4px; box-sizing: border-box; }
  .ao-results { max-height: 220px; overflow-y: auto; margin-top: .4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); }
  .ao-result-row { padding: .5rem .6rem; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: .82rem; }
  .ao-result-row:last-child { border-bottom: 0; }
  .ao-result-row:hover { background: rgba(91,138,245,0.10); }
  .ao-result-row .meta { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }
  .ao-empty { padding: .6rem; color: var(--text-muted); font-size: .78rem; text-align: center; }
  .ao-inventory-option { display:flex; gap:0.55rem; align-items:flex-start; padding:0.65rem; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,0.03); }
  .ao-shipbox { padding:.55rem .7rem; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:6px; font-size:.78rem; color:var(--text-muted); min-width:0; overflow:hidden; }
  .ao-shipbox .k { display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.25rem; color:var(--text-muted); }
  .ao-shipbox > div, .ao-shipbox a { overflow-wrap:anywhere; word-break:break-word; }
  .ao-ship { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.55rem; padding:.6rem 1rem 0; min-width:0; }
  .ao-order-note { margin:.6rem 1rem 0; padding:.5rem .65rem; border:1px solid rgba(88,166,255,.2); background:rgba(88,166,255,.06); border-radius:6px; font-size:.78rem; }

.usr-lst-w {
    --ul-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --ul-sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
    --ul-on: #22c55e;
    --ul-off: #ef4444;
    --ul-warn: #f59e0b;
    --ul-info: #38bdf8;
    --ul-accent: var(--primary, #4a9eff);
    --ul-mute: var(--text-muted);
    font-family: var(--ul-sans);
    letter-spacing: -0.005em;
}

/* ── Header bar with mono stat pills ───────────────────────── */
.usr-lst-w .ul-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0 0.7rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}
.usr-lst-w .ul-h1 {
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0;
}
.usr-lst-w .ul-actions {
    margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap;
}

/* ── Banner cards ──────────────────────────────────────────────── */
.usr-lst-w .ul-banner {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; padding: 0.85rem 1.1rem; margin-bottom: 0.85rem;
    border-left: 4px solid var(--ul-mute);
    display: flex; gap: 1rem; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
}
.usr-lst-w .ul-banner.on { border-left-color: var(--ul-on); }
.usr-lst-w .ul-banner.warn { border-left-color: var(--ul-warn); }
.usr-lst-w .ul-banner.info { border-left-color: var(--ul-info); }
.usr-lst-w .ul-banner-content { flex: 1; min-width: 300px; }
.usr-lst-w .ul-banner-title {
    font-weight: 600; font-size: 0.82rem; margin-bottom: 0.2rem; display: block;
}
.usr-lst-w .ul-banner-desc {
    font-size: 0.78rem; color: var(--ul-mute); line-height: 1.3;
}

/* ── Mono pills ────────────────────────────────────────────────────── */
.usr-lst-w .ul-pill {
    font-family: var(--ul-mono); font-size: 0.62rem;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    display: inline-flex; gap: 0.35rem; align-items: center; line-height: 1.1;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.usr-lst-w .ul-pill b { font-weight: 700; }
.usr-lst-w .ul-pill.on  { color: var(--ul-on);  border-color: rgba(34,197,94,0.4);  background: rgba(34,197,94,0.07); }
.usr-lst-w .ul-pill.off { color: var(--ul-off); border-color: rgba(239,68,68,0.4);  background: rgba(239,68,68,0.07); }
.usr-lst-w .ul-pill.warn { color: var(--ul-warn); border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.07); }
.usr-lst-w .ul-pill.info { color: var(--ul-info); border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.07); }
.usr-lst-w .ul-pill.ad { color: #58a6ff; border-color: rgba(88,166,255,0.4); background: rgba(88,166,255,0.07); }

/* ── Table ───────────────────────────────────────────────────────── */
.usr-lst-w .ul-table-wrapper {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; overflow: hidden;
}
.usr-lst-w table {
    width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.usr-lst-w thead th {
    text-align: left; padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-family: var(--ul-mono);
    font-size: 0.66rem; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ul-mute);
    font-weight: 600; white-space: nowrap;
}
.usr-lst-w tbody tr {
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.1s;
}
.usr-lst-w tbody tr:hover { background: rgba(74,158,255,0.06); }
.usr-lst-w tbody td {
    padding: 10px 12px; vertical-align: middle; line-height: 1.25;
}
.usr-lst-w .ul-name { font-weight: 600; color: var(--text); }
.usr-lst-w .ul-sub {
    font-family: var(--ul-mono); font-size: 0.7rem; color: var(--ul-mute);
    margin-top: 2px;
}

/* ── Tags ───────────────────────────────────────────────────────── */
.usr-lst-w .ul-tag {
    display: inline-block;
    font-family: var(--ul-mono); font-size: 0.64rem;
    text-transform: uppercase; letter-spacing: 0.14em;
    padding: 2px 7px; border-radius: 3px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--ul-mute);
    margin-right: 3px; line-height: 1.4;
    vertical-align: middle;
}
.usr-lst-w .ul-tag.on   { color: var(--ul-on);     border-color: rgba(34,197,94,0.4);   background: rgba(34,197,94,0.07); }
.usr-lst-w .ul-tag.off  { color: var(--ul-off);    border-color: rgba(239,68,68,0.4);   background: rgba(239,68,68,0.07); }
.usr-lst-w .ul-tag.info { color: var(--ul-info);   border-color: rgba(56,189,248,0.4);  background: rgba(56,189,248,0.07); }
.usr-lst-w .ul-tag.warn { color: var(--ul-warn);   border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.07); }
.usr-lst-w .ul-tag.muted { opacity: 0.55; }

.vs-shell { max-width: 880px; margin: 0 auto; padding: 1rem; }
  .vs-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem; }
  .vs-card h2 { margin: 0 0 0.55rem; font-size: 1.05rem; }
  .vs-card h3 { margin: 0.85rem 0 0.45rem; font-size: 0.95rem; }
  .vs-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
  .vs-status-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .vs-status-dot.ok  { background: #22c55e; }
  .vs-status-dot.bad { background: #ef4444; }
  .vs-mono { font-family: ui-monospace, monospace; font-size: 0.85rem; color: var(--text-muted); }
  .vs-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
  .vs-table th, .vs-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; }
  .vs-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
  .vs-pill { font-size: 0.66rem; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); display: inline-block; }
  .vs-pill.best { background: rgba(34,197,94,.10); color: #22c55e; border-color: rgba(34,197,94,.35); }
  .vs-pill.good { background: rgba(56,189,248,.10); color: #38bdf8; border-color: rgba(56,189,248,.35); }
  .vs-pill.fast { background: rgba(245,158,11,.10); color: #f59e0b; border-color: rgba(245,158,11,.35); }
  .vs-progress {
    height: 12px; background: var(--bg-input); border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border); margin-top: 0.35rem;
  }
  .vs-progress > div { height: 100%; background: linear-gradient(90deg, #2563eb, #38bdf8); transition: width .25s; }
  pre.vs-code {
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px;
    padding: 0.55rem 0.7rem; font-size: 0.8rem; color: var(--text);
    overflow-x: auto; margin: 0.3rem 0 0.6rem;
  }

.rsal-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0.75rem; margin-bottom:1rem; }
  .rsal-protocol { display:inline-flex; align-items:center; justify-content:center; min-width:5.4rem; padding:0.18rem 0.55rem; border-radius:999px; border:1px solid currentColor; font-size:0.7rem; font-weight:700; }
  .rsal-protocol.vnc { color:var(--info,#58a6ff); background:color-mix(in srgb, var(--info,#58a6ff) 14%, transparent); }
  .rsal-protocol.rustdesk { color:var(--success,#3fb950); background:color-mix(in srgb, var(--success,#3fb950) 14%, transparent); }
  .rsal-mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:0.78rem; }
  .rsal-muted { color:var(--text-muted,#8b8fa3); }
  .rsal-actions { display:flex; gap:0.4rem; align-items:center; flex-wrap:wrap; }

@media (max-width: 640px) {
    .warr-hide-mobile { display: none; }
}
@media (max-width: 520px) {
    .warr-two-col { grid-template-columns: 1fr !important; }
}

.whk-w {
    --whk-font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --whk-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --whk-bg-card: #0d1117;
    --whk-bg-elevated: #161b22;
    --whk-bg-input: #010409;
    --whk-border: #30363d;
    --whk-text: #c9d1d9;
    --whk-text-muted: #8b949e;
    --whk-text-dim: #6e7681;
    --whk-primary: #58a6ff;
    --whk-primary-bg: rgba(88, 166, 255, 0.15);
    --whk-success: #3fb950;
    --whk-success-bg: rgba(63, 185, 80, 0.15);
    --whk-danger: #f85149;
    --whk-danger-bg: rgba(248, 81, 73, 0.15);
    --whk-radius-sm: 6px;
    --whk-radius-md: 12px;
    --whk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --whk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-family: var(--whk-font-sans);
    color: var(--whk-text);
    animation: whk-fade-in 0.4s ease-out;
}

@keyframes whk-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.whk-w * {
    box-sizing: border-box;
}

.whk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.whk-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--whk-text);
}

.whk-hint {
    font-size: 0.9rem;
    color: var(--whk-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.whk-form-card {
    background: var(--whk-bg-card);
    border: 1px solid var(--whk-border);
    border-radius: var(--whk-radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--whk-shadow-sm);
    animation: whk-fade-in 0.5s ease-out backwards;
}

.whk-form-card.hidden {
    display: none;
}

.whk-form-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
}

.whk-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--whk-text-muted);
    margin-bottom: 0.35rem;
}

.whk-form-input,
.whk-form-select,
.whk-form-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--whk-bg-input);
    border: 1px solid var(--whk-border);
    border-radius: var(--whk-radius-sm);
    color: var(--whk-text);
    font-family: var(--whk-font-mono);
    font-size: 0.85rem;
}

.whk-form-input:focus,
.whk-form-select:focus,
.whk-form-textarea:focus {
    outline: none;
    border-color: var(--whk-primary);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.whk-form-textarea {
    font-family: var(--whk-font-mono);
    resize: vertical;
    min-height: 60px;
}

.whk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .whk-form-grid { grid-template-columns: 1fr; }
}

.whk-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.whk-event-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: var(--whk-radius-sm);
    transition: background 0.15s;
}

.whk-event-label:hover {
    background: var(--whk-bg-elevated);
}

.whk-actions {
    display: flex;
    gap: 0.75rem;
}

.whk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--whk-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--whk-radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.whk-btn-primary {
    background: var(--whk-primary);
    color: #000;
}

.whk-btn-primary:hover {
    background: #4c9aed;
    transform: translateY(-1px);
    box-shadow: var(--whk-shadow-md);
}

.whk-btn-default {
    background: var(--whk-bg-elevated);
    border: 1px solid var(--whk-border);
    color: var(--whk-text);
}

.whk-btn-default:hover {
    background: var(--whk-border);
}

.whk-btn-danger {
    color: var(--whk-danger);
}

.whk-btn-danger:hover {
    background: var(--whk-danger-bg);
}

.whk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--whk-bg-card);
    border: 1px solid var(--whk-border);
    border-radius: var(--whk-radius-md);
    overflow: hidden;
    box-shadow: var(--whk-shadow-sm);
    animation: whk-fade-in 0.5s ease-out backwards;
}

.whk-table thead {
    background: var(--whk-bg-elevated);
    border-bottom: 1px solid var(--whk-border);
}

.whk-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--whk-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.whk-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--whk-border);
    vertical-align: middle;
}

.whk-table tr:last-child td {
    border-bottom: none;
}

.whk-table tr:hover {
    background: var(--whk-bg-elevated);
}

.whk-table-code {
    font-family: var(--whk-font-mono);
    font-size: 0.75rem;
    background: var(--whk-bg-input);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.whk-event-tag {
    display: inline-block;
    background: var(--whk-bg-elevated);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin: 1px;
    font-size: 0.75rem;
}

.whk-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.whk-badge-success {
    background: var(--whk-success-bg);
    color: var(--whk-success);
}

.whk-badge-error {
    background: var(--whk-danger-bg);
    color: var(--whk-danger);
}

.whk-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--whk-text-muted);
    font-size: 0.9rem;
    font-style: italic;
}

.whk-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--whk-text);
}

.whk-table-actions {
    display: flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.whk-table-actions form {
    display: inline;
}

.whk-w {
    --whk-font-sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --whk-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --whk-bg-card: #0d1117;
    --whk-bg-elevated: #161b22;
    --whk-bg-input: #010409;
    --whk-border: #30363d;
    --whk-text: #c9d1d9;
    --whk-text-muted: #8b949e;
    --whk-text-dim: #6e7681;
    --whk-primary: #58a6ff;
    --whk-primary-bg: rgba(88, 166, 255, 0.15);
    --whk-success: #3fb950;
    --whk-success-bg: rgba(63, 185, 80, 0.15);
    --whk-danger: #f85149;
    --whk-danger-bg: rgba(248, 81, 73, 0.15);
    --whk-radius-sm: 6px;
    --whk-radius-md: 12px;
    --whk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --whk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-family: var(--whk-font-sans);
    color: var(--whk-text);
    animation: whk-fade-in 0.4s ease-out;
}

@keyframes whk-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.whk-w * {
    box-sizing: border-box;
}

.whk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.whk-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--whk-text);
}

.whk-hint {
    font-size: 0.9rem;
    color: var(--whk-text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.whk-form-card {
    background: var(--whk-bg-card);
    border: 1px solid var(--whk-border);
    border-radius: var(--whk-radius-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--whk-shadow-sm);
    animation: whk-fade-in 0.5s ease-out backwards;
}

.whk-form-card.hidden {
    display: none;
}

.whk-form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--whk-text-muted);
    margin-bottom: 0.35rem;
}

.whk-form-input,
.whk-form-select,
.whk-form-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    background: var(--whk-bg-input);
    border: 1px solid var(--whk-border);
    border-radius: var(--whk-radius-sm);
    color: var(--whk-text);
    font-family: var(--whk-font-mono);
    font-size: 0.85rem;
}

.whk-form-input:focus,
.whk-form-select:focus,
.whk-form-textarea:focus {
    outline: none;
    border-color: var(--whk-primary);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

.whk-form-textarea {
    font-family: var(--whk-font-mono);
    resize: vertical;
    min-height: 80px;
}

.whk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .whk-form-grid { grid-template-columns: 1fr; }
}

.whk-actions {
    display: flex;
    gap: 0.75rem;
}

.whk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--whk-font-sans);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--whk-radius-sm);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.whk-btn-primary {
    background: var(--whk-primary);
    color: #000;
}

.whk-btn-primary:hover {
    background: #4c9aed;
    transform: translateY(-1px);
    box-shadow: var(--whk-shadow-md);
}

.whk-btn-default {
    background: var(--whk-bg-elevated);
    border: 1px solid var(--whk-border);
    color: var(--whk-text);
}

.whk-btn-default:hover {
    background: var(--whk-border);
}

.whk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: var(--whk-bg-card);
    border: 1px solid var(--whk-border);
    border-radius: var(--whk-radius-md);
    overflow: hidden;
    box-shadow: var(--whk-shadow-sm);
    animation: whk-fade-in 0.5s ease-out backwards;
}

.whk-table thead {
    background: var(--whk-bg-elevated);
    border-bottom: 1px solid var(--whk-border);
}

.whk-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--whk-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.whk-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--whk-border);
    vertical-align: middle;
}

.whk-table tr:last-child td {
    border-bottom: none;
}

.whk-table tr:hover {
    background: var(--whk-bg-elevated);
}

.whk-table-code {
    font-family: var(--whk-font-mono);
    font-size: 0.75rem;
    background: var(--whk-bg-input);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.whk-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.whk-badge-success {
    background: var(--whk-success-bg);
    color: var(--whk-success);
}

.whk-badge-error {
    background: var(--whk-danger-bg);
    color: var(--whk-danger);
}

.whk-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--whk-text-muted);
    font-size: 0.9rem;
}

.whk-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--whk-text);
}

.ws-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:1.5rem; flex-wrap:wrap; }
.ws-tabs a { padding:0.6rem 1.1rem; text-decoration:none; color:var(--text-muted); border-bottom:2px solid transparent; font-size:0.9rem; }
.ws-tabs a.active { color:var(--text); border-bottom-color:var(--blue); font-weight:600; }
.ws-stat { display:inline-block; padding:0.4rem 0.8rem; background:var(--card-bg, #1a2433); border-radius:4px; margin-right:0.5rem; font-size:0.85rem; }
.ws-stat strong { color:var(--blue); }
.ws-app-row { display:flex; align-items:center; gap:0.75rem; padding:0.4rem 0; border-bottom:1px solid var(--border); }
.ws-app-row:last-child { border:none; }
.ws-app-row .ws-name { flex:1; }
.ws-app-row .ws-ver { font-size:0.8rem; color:var(--text-muted); min-width:120px; }
.ws-app-row .ws-id { font-size:0.75rem; color:var(--text-muted); min-width:200px; }
@media (max-width:720px) {
    .ws-app-row { flex-wrap:wrap; }
    .ws-app-row .ws-id { display:none; }
    .ws-tabs a { padding:0.5rem 0.7rem; font-size:0.85rem; }
}

.ws-storage-card { background:var(--bg-card); border:1px solid var(--border);
                   border-radius:8px; padding:1.25rem; max-width:720px;
                   margin-bottom:1rem; }
.ws-storage-card h3 { margin-top:0; }
.ws-storage-card label { display:block; margin-top:0.75rem; font-weight:600; }
.ws-storage-card input { width:100%; padding:0.5rem; font-family:monospace;
                         font-size:0.85rem; border:1px solid var(--border);
                         border-radius:4px; background:var(--bg-input,white); }
.ws-storage-card .help { font-size:0.78rem; color:var(--text-muted);
                         margin-top:0.25rem; }
.ws-storage-actions { margin-top:1.25rem; display:flex; gap:0.5rem; flex-wrap:wrap; }
.ws-storage-result.ok  { color:#0a7d3a; }
.ws-storage-result.err { color:#b30000; }
@media (max-width:720px){
    .ws-storage-card { padding:0.85rem; }
}

/* Static extraction selector coverage for class-based templates. */
/* These rules provide baseline layout after inline styles were removed. */
#portal-guide-panel { min-width: 0; border-radius: 8px; }
.access-policy-form { min-width: 0; }
.activity-panel { min-width: 0; }
.aibrief-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.aidash-health-strip { min-width: 0; }
.appointment-grid-3 { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.approvals-note { min-width: 0; }
.approvals-title { min-width: 0; }
.assist-cache-intro { min-width: 0; }
.assist-log-question { min-width: 0; }
.assist-simple-body { min-width: 0; }
.bcfg-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.bcfg-two-col { min-width: 0; }
.changelog-delete-btn { min-width: 0; }
.custom-fields-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.doc-version-added { min-width: 0; }
.doc-version-diff { min-width: 0; }
.err500-card { min-width: 0; border-radius: 8px; }
.export-templates-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.fs-search__row { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ft-history-header { min-width: 0; }
.ft-risk-high { min-width: 0; }
.ft-toolbar { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.gdpr-type-select { min-width: 0; }
.group-form-actions { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.inst-command-row { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.journal-table { min-width: 0; }
.legal-back { min-width: 0; }
.legal-copy { min-width: 0; border-radius: 8px; }
.legal-effective { min-width: 0; }
.lic-days-critical { min-width: 0; }
.lic-page-header { min-width: 0; }
.login-brand-mark { min-width: 0; }
.ma-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.mdm-panel.danger { min-width: 0; border-radius: 8px; }
.mfa-w .form-row input { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.mfa-w .secret-block { min-width: 0; }
.ms-meter::-webkit-meter-bar { min-width: 0; }
.nb-recycle-intro { min-width: 0; }
.nic-tag { min-width: 0; }
.not-found { min-width: 0; }
.notification-required-badge { min-width: 0; }
.org-not-found { min-width: 0; }
/* ── Portal Access modal (shared: contacts / users / people) ──────────
   Full stylesheet — a prior "consolidate static UI assets" pass dropped
   it and left only two min-width:0 stubs, so the modal rendered
   unstyled and inline with no card. */
.pa-modal { display: none; }
.pa-modal.is-open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, 0.55);
    align-items: flex-start;
    justify-content: center;
    padding: 3vh 1rem;
    overflow-y: auto;
}
.pa-panel {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid var(--border, #333);
    border-radius: 8px;
    width: min(560px, 100%);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.pa-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #333);
}
.pa-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--text); }
.pa-contact-label { margin-top: 0.2rem; font-size: 0.82rem; color: var(--text-muted); }
.pa-body { padding: 1.1rem 1.25rem; overflow-y: auto; }
.pa-status-banner { margin-bottom: 0.75rem; font-size: 0.85rem; }
.pa-status-banner:empty { display: none; }
.pa-field { margin-bottom: 1rem; }
.pa-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}
.pa-control {
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: var(--bg-input, var(--bg, #14151c));
    color: var(--text);
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    font-size: 0.88rem;
}
.pa-control:focus { outline: none; border-color: var(--primary, #4a9eff); }
.pa-help-text { margin-top: 0.3rem; font-size: 0.76rem; color: var(--text-muted); }
.pa-perms-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.pa-perms-head .pa-label { margin: 0; flex: 1; }
.pa-perms-list {
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    background: var(--bg-input, var(--bg, #14151c));
    max-height: 240px;
    overflow-y: auto;
}
.pa-perm-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border, #333);
}
.pa-perm-row:last-child { border-bottom: none; }
.pa-perm-row:hover { background: rgba(255, 255, 255, 0.03); }
.pa-perm-cb { accent-color: var(--primary, #4a9eff); flex-shrink: 0; margin: 0; }
.pa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: end; }
.pa-invite-wrap { display: flex; align-items: center; }
.pa-check-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
}
.pa-footer-note { margin-top: 0.85rem; font-size: 0.76rem; line-height: 1.4; color: var(--text-muted); }
.pa-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border, #333);
}
.pa-footer-actions { display: flex; gap: 0.5rem; }
.pa-revoke { color: var(--danger, #ef4444); }
.pa-hidden { display: none !important; }
.pab-toolbar { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pad-modal.is-open { min-width: 0; border-radius: 8px; }
.pad-warning-text { min-width: 0; }
.pak-new-key { min-width: 0; }
.pak-revoked-summary { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.part-history-header { min-width: 0; }
.payment-add-card { min-width: 0; border-radius: 8px; }
.payment-card-element { min-width: 0; border-radius: 8px; }
.pe-posture.bad { min-width: 0; }
.ph-example-title.is-high { min-width: 0; }
.ph-filter-input { min-width: 0; }
.plugin-hook-card { min-width: 0; border-radius: 8px; }
.pm-head { min-width: 0; }
.pm-modal-card { min-width: 0; border-radius: 8px; }
.pm-table-select { min-width: 0; border-radius: 8px; }
.portal-assets-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.portal-assets-status.is-approved { min-width: 0; }
.portal-audit-detail { min-width: 0; }
.portal-audit-filter-form { min-width: 0; }
.portal-auth-page { min-width: 0; }
.portal-backup-runs[hidden] { min-width: 0; display: none !important; }
.portal-backup-summary { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.portal-comment-thread { min-width: 0; }
.portal-devices-list { min-width: 0; }
.portal-feed-toast { min-width: 0; }
.portal-footer-inner { min-width: 0; }
.portal-help-item { min-width: 0; }
.portal-help-search { min-width: 0; }
.portal-impersonation { min-width: 0; }
.portal-kb-article .kb-article-body pre { min-width: 0; }
.portal-kb-article .portal-kb-updated { min-width: 0; }
.portal-kb-card-link { min-width: 0; border-radius: 8px; }
.portal-kb-category-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.portal-notifications-list { min-width: 0; }
.portal-profile-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.portal-profile-kind-option { min-width: 0; }
.portal-sidebar .ps-link-placeholder { min-width: 0; }
.portal-ticket-filter { min-width: 0; }
.pra-modal.is-open { min-width: 0; border-radius: 8px; }
.pra-perm-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.prt-backup-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.prt-inv-detail .submit-payment { min-width: 0; }
.prt-inv-open .paid-section.is-open { min-width: 0; }
.prt-mesh-w .mesh-metrics { min-width: 0; }
.prt-receipts .pr-summary { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.prt-status-w .alerts-title { min-width: 0; }
.prt-welcome { min-width: 0; }
.ptn-card { min-width: 0; border-radius: 8px; }
.ptn-textarea { min-width: 0; }
.pu-header { min-width: 0; }
.pu-role-select { min-width: 0; }
.purchase-source-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pv2-internal-pill { min-width: 0; }
.pv2-inv-view-btn { min-width: 0; }
.pv2-invoice-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pv2-settings-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pv2-ticket-description { min-width: 0; }
.pvi-summary-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pvp-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pvp-toast { min-width: 0; }
.scim-actions { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sk-adv-status { min-width: 0; }
.sk-app-action-status { min-width: 0; }
.sk-asset-section { min-width: 0; }
.sk-chip-bar { min-width: 0; }
.sk-command-progress { min-width: 0; }
.sk-dc-modal { min-width: 0; }
.sk-guidance-block { min-width: 0; }
.sk-legacy-command { min-width: 0; }
.sk-md-app-icon { min-width: 0; }
.sk-md-backup-head { min-width: 0; }
.sk-md-backup-stat-grid { min-width: 0; }
.sk-md-data-table { min-width: 0; }
.sk-md-dns-list { min-width: 0; }
.sk-md-duck-toolbar { min-width: 0; }
.sk-md-full-modal { min-width: 0; }
.sk-md-health-note { min-width: 0; }
.sk-md-image-modal { min-width: 0; }
.sk-md-local-summary { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sk-md-lock-overlay { min-width: 0; }
.sk-md-menu { min-width: 0; }
.sk-md-modal { min-width: 0; }
.sk-md-monitor-head { min-width: 0; }
.sk-md-nic-tags { min-width: 0; }
.sk-md-notes-card { min-width: 0; }
.sk-md-ntp-prompt { min-width: 0; }
.sk-md-photo-card { min-width: 0; }
.sk-md-photo-grid { min-width: 0; }
.sk-md-platform-hint { min-width: 0; }
.sk-md-print-pager { min-width: 0; }
.sk-md-progress-native { min-width: 0; }
.sk-md-reboot-banner { min-width: 0; }
.sk-md-reg-panel { min-width: 0; }
.sk-md-rel-list { min-width: 0; }
.sk-md-scanbar { min-width: 0; }
.sk-md-screenshare-panel { min-width: 0; }
.sk-md-svc-status { min-width: 0; }
.sk-md-tool-output { min-width: 0; }
.sk-md-tray-action { min-width: 0; }
.sk-md-update-badge { min-width: 0; }
.sk-md-user-access { min-width: 0; }
.sk-md-widget { min-width: 0; }
.sk-netscan-modal { min-width: 0; border-radius: 8px; }
.sk-policy-last { min-width: 0; }
.sk-policy-last-enforcement { min-width: 0; }
.sk-progress-wrap { min-width: 0; }
.sk-rename-row { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.sk-rustdesk-handoff { min-width: 0; }
.sk-sos-body .rustdesk-fallback { min-width: 0; }
.sk-speedtest-card { min-width: 0; }
.sk-support-dark .card { min-width: 0; border-radius: 8px; }
.sk-tool-heading-warn { min-width: 0; }
.sk-tool-pane { min-width: 0; }
.sk-tray-status { min-width: 0; }
.sk-uninstall-card { min-width: 0; border-radius: 8px; }
.sk-win11-probe-panel { min-width: 0; border-radius: 8px; }
.snap-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.subsystem-list { min-width: 0; }
.th-card.wide { min-width: 0; border-radius: 8px; }
.trace-output { min-width: 0; }
.ufp-mode-badge.is-cloud { min-width: 0; }
.ufp-table-card { min-width: 0; border-radius: 8px; }
.vendor-form-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.vendors-grid { min-width: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.webcam-modal { min-width: 0; }
body.sk-assist-open .sk-help-drawer-trigger { min-width: 0; }

/* 7.09.88: App-shell guardrail.
   style.css still contains older page-specific CSS copied from standalone
   reports, print views, and public tools. Those chunks define broad body,

html.sk-app-html {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
}

html.sk-app-html body.sk-app-shell {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

html[data-theme="light"] body.sk-app-shell {
    --bg: #f2f3f7;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f0f0f2;
    --surface-input: #f0f0f2;
    --bg-card: var(--surface);
    --bg-input: var(--surface-input);
    --card: var(--surface);
    --fg: #111318;
    --border: #c8ccd8;
    --text: #111318;
    --text-muted: #5a6074;
    --text-faint: #8a8f9d;
    --accent: #0071e3;
    --primary: #0071e3;
    --primary-hover: #0077ed;
    --success: #16a34a;
    --success-soft: rgba(34, 197, 94, 0.12);
    --warning: #d97706;
    --warning-soft: rgba(245, 158, 11, 0.12);
    --danger: #dc2626;
    --info: #0071e3;
}

body.sk-app-shell .content,
body.sk-app-shell main.content {
    flex: 0 0 auto;
    width: calc(100vw - 220px);
    max-width: none;
    min-width: 0;
    margin-left: 220px;
    padding: calc(48px + 1.5rem) 2rem 2rem 2rem;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
}

body.sk-sidebar-collapsed.sk-app-shell .content,
body.sk-sidebar-collapsed.sk-app-shell main.content {
    width: calc(100vw - 64px);
    margin-left: 64px;
}

body.sk-app-shell .sidebar {
    display: flex;
}

body.sk-app-shell .sk-topbar {
    display: flex;
}

body.sk-app-shell .card {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--text);
}

/* 7.09.90: shell-specific recovery from legacy standalone chunks.
   Several old print/report stylesheets still live in style.css and can load
   after the main shell rules. Keep the authenticated app navigation and
   footer compact even when those broad button/a/card rules are present. */
body.sk-app-shell .sidebar li a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 0;
    padding: 0.42rem 0.85rem;
    margin: 1px 8px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
    text-decoration: none;
}

body.sk-app-shell .sidebar li a:hover {
    color: var(--text);
    background: rgba(255,255,255,0.05);
}

body.sk-app-shell .sidebar li a.active {
    color: var(--text);
    background: rgba(255,255,255,0.07);
    border-left-color: var(--accent);
    font-weight: 500;
    padding-left: calc(0.85rem - 2px);
}

body.sk-app-shell .sidebar-submenu-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 0;
    padding: 0.42rem 0.85rem;
    margin: 1px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

body.sk-app-shell .sidebar-submenu-items li a {
    padding-left: 2rem;
    margin-left: 1.35rem;
    margin-right: 8px;
    border-left: 2px solid rgba(255,255,255,0.08);
    border-radius: 0 6px 6px 0;
    font-size: 0.775rem;
}

body.sk-app-shell .sidebar-footer {
    flex: 0 0 auto;
    padding: 0.55rem 0.75rem 0.65rem;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.78rem;
}

body.sk-app-shell .sidebar-footer a,
body.sk-app-shell .sidebar-version {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--text-muted);
    text-decoration: none;
}

body.sk-app-shell .admin-menu-trigger,
body.sk-app-shell .user-menu-trigger,
body.sk-app-shell .sk-collapse-toggle,
body.sk-app-shell .sidebar-monitor {
    box-sizing: border-box;
    text-decoration: none;
}

body.sk-app-shell .admin-menu-dropdown:not(.admin-menu-open),
body.sk-app-shell .user-menu-dropdown:not(.user-menu-open) {
    display: none !important;
}

body.sk-app-shell .dash-status-bar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 0;
    height: auto;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

body.sk-app-shell .dash-status-bar .spacer {
    flex: 1 1 auto;
    min-height: 0;
}

body.sk-app-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: auto;
    margin: 0;
    line-height: 1;
    text-decoration: none;
}

body.sk-app-shell .btn-full {
    width: 100%;
}

body.sk-app-shell #restart-modal.modal {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 1rem !important;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 16, 0.68) !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: auto !important;
    z-index: 10040 !important;
    box-shadow: none !important;
}

body.sk-app-shell #restart-modal .modal-content.sk-restart-modal-content {
    width: min(500px, calc(100vw - 2rem)) !important;
    max-width: min(500px, calc(100vw - 2rem)) !important;
    max-height: min(720px, calc(100vh - 2rem)) !important;
    overflow-y: auto !important;
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    padding: 1.35rem !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45) !important;
}

body.sk-app-shell #restart-modal .modal-content h3 {
    margin: 0 0 0.65rem;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.25;
}

body.sk-app-shell #restart-modal .sk-restart-file-list {
    max-height: min(260px, 44vh);
    background: var(--surface-input);
}

body.sk-app-shell #restart-modal .form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

body.sk-app-shell #restart-modal .btn {
    min-width: 0;
    min-height: 38px;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-input);
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 650;
}

body.sk-app-shell #restart-modal .btn-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

body.sk-app-shell #rmm-status-bar > * {
    margin-bottom: 0;
}

body.sk-app-shell #rmm-status-bar .dash-search-wrap {
    flex: 0 1 200px;
    width: 200px;
    margin: 0;
}

body.sk-app-shell #rmm-status-bar .dash-search-wrap input.dash-search {
    width: 100%;
    margin: 0;
    letter-spacing: 0;
    text-align: left;
    font-size: var(--text-sm);
    line-height: 1.2;
    font-family: inherit;
}

body.sk-app-shell #rmm-status-bar .dash-status-select {
    flex: 0 0 auto;
    width: auto;
    max-width: 140px;
    margin: 0;
}

body.sk-app-shell #rmm-status-bar .dash-status-select.wide {
    max-width: 130px;
}

body.sk-app-shell #rmm-status-bar .dash-cols-wrap,
body.sk-app-shell #rmm-status-bar .dash-cols-btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

body.sk-app-shell .sk-saved-views {
    min-height: 0;
    padding: 0.4rem 0;
    margin: 0 0 0.75rem;
}

body.sk-app-shell .sk-saved-views button {
    width: auto;
    margin: 0;
}

body.sk-app-shell .cust-grid {
    min-height: 0;
    align-items: start;
}

body.sk-app-shell .cust-card {
    min-height: 0;
    margin: 0;
}

/* 7.09.96: authenticated app-shell recovery from unscoped print/report CSS.
   Several legacy report chunks in this bundle contain raw body/card/table/th
   rules. Keep the dark RMM shell and dense tables authoritative at the end of
   the cascade so statement/print CSS cannot leak into admin pages. */
body.sk-app-shell table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    font-size: 0.88rem;
}

body.sk-app-shell thead {
    background: rgba(255,255,255,0.03);
    position: sticky;
    top: 0;
    z-index: 5;
}

body.sk-app-shell th,
body.sk-app-shell td {
    text-align: left;
    border-color: var(--border);
    color: var(--text);
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: normal;
}

body.sk-app-shell th {
    padding: 0.7rem 0.85rem;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    vertical-align: middle;
}

body.sk-app-shell td {
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--border);
    vertical-align: middle;
}

body.sk-app-shell tr:hover td {
    background: rgba(255,255,255,0.02);
}

body.sk-app-shell .sk-card-table,
body.sk-app-shell .skui-table-card {
    overflow: hidden;
}

body.sk-app-shell .sk-card-table__scroll,
body.sk-app-shell .skui-table-card-body,
body.sk-app-shell .table-responsive,
body.sk-app-shell .sk-tbl-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.sk-app-shell .sk-card-table table,
body.sk-app-shell table.data-table,
body.sk-app-shell .skui-table-card table {
    min-width: min(100%, 920px);
}

body.sk-app-shell table.ep-table {
    min-width: 1320px;
}

body.sk-app-shell table.data-table th,
body.sk-app-shell table.data-table td,
body.sk-app-shell .sk-card-table table th,
body.sk-app-shell .sk-card-table table td {
    white-space: nowrap;
}

body.sk-app-shell table.data-table td,
body.sk-app-shell .sk-card-table table td {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.sk-app-shell .btn,
body.sk-app-shell a.btn,
body.sk-app-shell button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: auto;
    min-height: 34px;
    margin: 0;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-card);
    color: var(--text);
    box-shadow: none;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
}

body.sk-app-shell .btn-primary,
body.sk-app-shell a.btn-primary,
body.sk-app-shell button.btn-primary {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

body.sk-app-shell .btn-small,
body.sk-app-shell .btn-sm,
body.sk-app-shell a.btn-small,
body.sk-app-shell button.btn-small {
    min-height: 30px;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
}

body.sk-app-shell table .btn,
body.sk-app-shell table .btn-small,
body.sk-app-shell table button {
    min-height: 28px;
    padding: 0.25rem 0.55rem;
    font-size: 0.76rem;
    white-space: nowrap;
}

body.sk-app-shell code {
    display: inline-block;
    max-width: 100%;
    padding: 0.08rem 0.32rem;
    border: 1px solid rgba(148,163,184,0.18);
    border-radius: 5px;
    background: rgba(255,255,255,0.055);
    color: var(--text);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.78em;
    line-height: 1.25;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 7.10.00: table chips must stay horizontal. Without this, leaked report
   styles and tight auto columns make IPs, versions, and action labels render
   one character per line. */
body.sk-app-shell table code,
body.sk-app-shell table .badge,
body.sk-app-shell table [class*="badge"],
body.sk-app-shell table [class*="pill"],
body.sk-app-shell table [class*="chip"] {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

body.sk-app-shell table.ep-table .col-ip {
    min-width: 8rem;
}

body.sk-app-shell input,
body.sk-app-shell textarea,
body.sk-app-shell select {
    background: var(--bg-input);
    border-color: var(--border);
    color: var(--text);
}

@media (max-width: 768px) {
    body.sk-app-shell .content,
    body.sk-app-shell main.content {
        width: 100vw;
        margin-left: 0;
        padding: calc(56px + 1rem) 0.75rem 1rem;
    }
}

/* 7.10.01: containment pass for app-wide CSS regression fallout. Wide
   operational tables must scroll inside their card/page region, and the
   help drawer must remain invisible until the drawer script opens it. */
body.sk-app-shell,
body.sk-app-shell .content,
body.sk-app-shell main.content {
    max-width: 100%;
    overflow-x: clip;
}

body.sk-app-shell .sk-help-drawer[hidden],
body.sk-app-shell .sk-help-drawer-backdrop[hidden] {
    display: none !important;
}

body.sk-app-shell .sk-help-drawer:not(.open) {
    right: 0 !important;
    left: auto !important;
    transform: translateX(110%) !important;
    pointer-events: none !important;
}

body.sk-app-shell .sk-help-drawer.open {
    right: 0 !important;
    left: auto !important;
    transform: translateX(0) !important;
}

body.sk-app-shell .sk-help-drawer-backdrop:not(.open) {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.sk-app-shell .mlist,
body.sk-app-shell .nb-admin-card,
body.sk-app-shell .analytics-card {
    min-width: 0;
    max-width: 100%;
}

body.sk-app-shell .ml-table-scroll,
body.sk-app-shell .nb-scroll,
body.sk-app-shell .analytics-card {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.sk-app-shell .mlist .ml-toolbar {
    min-width: 0;
}

body.sk-app-shell .mlist .ml-search-input {
    flex: 1 1 320px;
    min-width: 220px;
    max-width: min(520px, 100%);
}

body.sk-app-shell .mlist .ml-csv-btn {
    margin-left: 0;
}

body.sk-app-shell .mlist #machines-table {
    min-width: 1120px;
    width: 100%;
}

body.sk-app-shell .mlist .ml-actions-cell {
    width: 13rem;
    max-width: 13rem;
}

body.sk-app-shell .mlist .ml-actions-cell .btn,
body.sk-app-shell .mlist .ml-actions-cell button {
    min-height: 30px;
    padding: 0.28rem 0.58rem;
    font-size: 0.78rem;
}

body.sk-app-shell .nb-admin-card .nb-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    min-width: 0;
}

body.sk-app-shell .nb-admin-card .nb-copy,
body.sk-app-shell .nb-admin-card .nb-meta-line {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.sk-app-shell .nb-scroll table.data-table {
    table-layout: fixed;
    min-width: 980px;
    width: 100%;
}

body.sk-app-shell .nb-scroll table.data-table th,
body.sk-app-shell .nb-scroll table.data-table td {
    white-space: normal;
}

body.sk-app-shell .nb-scroll table.data-table th:nth-child(1),
body.sk-app-shell .nb-scroll table.data-table td:nth-child(1) { width: 15rem; }
body.sk-app-shell .nb-scroll table.data-table th:nth-child(2),
body.sk-app-shell .nb-scroll table.data-table td:nth-child(2) { width: 13rem; }
body.sk-app-shell .nb-scroll table.data-table th:nth-child(3),
body.sk-app-shell .nb-scroll table.data-table td:nth-child(3) { width: 18rem; }
body.sk-app-shell .nb-scroll table.data-table th:nth-child(4),
body.sk-app-shell .nb-scroll table.data-table td:nth-child(4) { width: 10rem; }
body.sk-app-shell .nb-scroll table.data-table th:nth-child(5),
body.sk-app-shell .nb-scroll table.data-table td:nth-child(5) { width: 8rem; }
body.sk-app-shell .nb-scroll table.data-table th:nth-child(6),
body.sk-app-shell .nb-scroll table.data-table td:nth-child(6) { width: 16rem; }
body.sk-app-shell .nb-scroll table.data-table th:nth-child(7),
body.sk-app-shell .nb-scroll table.data-table td:nth-child(7) { width: 12rem; }

body.sk-app-shell .nb-update-split {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    gap: 0.2rem;
    vertical-align: middle;
}

body.sk-app-shell .nb-inline-form {
    display: inline-flex;
    min-width: 0;
}

body.sk-app-shell .nb-update-pill,
body.sk-app-shell .nb-update-btn.badge {
    display: inline-flex;
    align-items: center;
    max-width: 13rem;
    min-height: 26px;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.sk-app-shell .nb-update-menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

body.sk-app-shell .nb-update-menu > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

body.sk-app-shell .nb-update-menu > summary::-webkit-details-marker {
    display: none;
}

body.sk-app-shell .nb-update-menu-panel {
    right: 0;
    left: auto;
    min-width: min(260px, 80vw);
    max-width: 80vw;
    white-space: normal;
}

body.sk-app-shell .analytics-card table.data-table {
    min-width: 0;
    table-layout: fixed;
}

body.sk-app-shell .analytics-card table.data-table th,
body.sk-app-shell .analytics-card table.data-table td {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Fail closed even if the drawer shell is emitted inside an older page or
   before body-scoped recovery selectors win the cascade. */
.sk-help-drawer[hidden],
.sk-help-drawer[aria-hidden="true"]:not(.open),
.sk-help-drawer-backdrop[hidden],
.sk-help-drawer-backdrop[aria-hidden="true"]:not(.open) {
    display: none !important;
}

.analytics-card table.data-table {
    width: 100%;
    min-width: 0 !important;
    table-layout: fixed;
}

.analytics-card table.data-table th,
.analytics-card table.data-table td {
    padding: 0.45rem 0.42rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-card table.data-table td {
    font-size: 0.76rem !important;
}

/* 7.10.05: restore the shared feature-help side panel. The template is
   included on several pages; without a closed default it renders as plain
   page content over the sidebar/logo. */
.fh-modal[hidden],
.fh-modal[aria-hidden="true"]:not(.is-open) {
    display: none !important;
}

.fh-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10020;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(2, 6, 23, 0.56);
    backdrop-filter: blur(3px);
}

.fh-modal.is-open {
    display: flex;
}

.fh-panel {
    width: min(440px, calc(100vw - 1.5rem));
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 70px rgba(0, 0, 0, 0.45);
}

.fh-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.fh-title-wrap {
    min-width: 0;
}

.fh-category {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.fh-title {
    margin: 0.25rem 0 0;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.25;
}

.fh-meta {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.fh-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.fh-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1rem;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.55;
}

.fh-muted,
.fh-error {
    color: var(--text-muted);
}

.fh-error {
    color: #fca5a5;
}

.fh-related {
    display: none;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.82rem;
}

.fh-related.is-visible {
    display: block;
}

.fh-related a {
    color: var(--accent);
}

/* 7.10.06: restore dense app tables after the 7.09.96 shell guard made every
   grid inherit heavy global table chrome. Page/table classes should control
   their own visual weight; the shell only prevents bad wrapping/overflow. */
body.sk-app-shell table {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.sk-app-shell thead {
    position: static;
    top: auto;
    z-index: auto;
}

body.sk-app-shell th,
body.sk-app-shell td {
    border-top: 0;
}

body.sk-app-shell table.data-table,
body.sk-app-shell .sk-card-table table,
body.sk-app-shell .skui-table-card table {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-collapse: collapse;
    font-size: 0.82rem;
}

body.sk-app-shell table.data-table th,
body.sk-app-shell .sk-card-table table th,
body.sk-app-shell .skui-table-card table th {
    padding: 0.55rem 0.75rem;
    border-top: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: normal;
}

body.sk-app-shell table.data-table td,
body.sk-app-shell .sk-card-table table td,
body.sk-app-shell .skui-table-card table td {
    padding: 0.5rem 0.75rem;
    border-top: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    vertical-align: middle;
}

body.sk-app-shell table.data-table tr:hover td,
body.sk-app-shell .sk-card-table table tr:hover td,
body.sk-app-shell .skui-table-card table tr:hover td {
    background: rgba(255, 255, 255, 0.018);
}

body.sk-app-shell .mlist #machines-table {
    min-width: 1040px;
    background: var(--bg-card);
    border: 0;
    box-shadow: none;
}

body.sk-app-shell .mlist #machines-table th,
body.sk-app-shell .mlist #machines-table td {
    border-left: 0;
    border-right: 0;
}

body.sk-app-shell .mlist #machines-table tbody td {
    border-bottom: 0;
    padding-top: 9px;
    padding-bottom: 9px;
}

body.sk-app-shell .nb-admin-card {
    max-width: 100%;
    overflow: hidden;
}

body.sk-app-shell .nb-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.sk-app-shell .nb-scroll table.data-table {
    table-layout: auto;
    min-width: 0;
    width: 100%;
}

body.sk-app-shell .nb-scroll table.data-table th,
body.sk-app-shell .nb-scroll table.data-table td {
    width: auto !important;
    border-left: 0;
    border-right: 0;
}

body.sk-app-shell .nb-scroll table.data-table td {
    overflow-wrap: anywhere;
}

body.sk-app-shell .nb-scroll .nb-update-pill,
body.sk-app-shell .nb-scroll .nb-update-btn.badge {
    max-width: 10.5rem;
    min-height: 24px;
    padding: 0.18rem 0.45rem;
    font-size: 0.68rem;
}

body.sk-app-shell .nb-admin-card .nb-card-head .btn,
body.sk-app-shell .nb-admin-card .nb-card-head button {
    min-height: 32px;
    padding: 0.38rem 0.75rem;
    font-size: 0.82rem;
}

/* 7.10.x: restore saved-views lite widget styling — 5a262dd5 converted
   saved_views.js inline styles to .sk-saved-view-lite* classes but never
   created the rules. Values match the original style.cssText. */
.sk-saved-view-lite {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.8rem;
}
.sk-saved-view-lite-label {
    color: var(--text-muted);
    margin-right: 0.25rem;
}
.sk-saved-view-lite-empty {
    color: var(--text-muted);
    font-style: italic;
}
.sk-saved-view-lite-chip {
    padding: 0.25rem 0.6rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    font-size: 0.8rem;
}
.sk-saved-view-lite-save {
    padding: 0.25rem 0.6rem;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
}
.sk-saved-view-lite-chip:hover,
.sk-saved-view-lite-save:hover {
    border-color: var(--accent);
    color: var(--text);
}