/* Nexus — WordPress Dev Dashboard Styles */

/* ============ Custom Properties ============ */
:root {
    --bg-body: #f4f5f7;
    --bg-card: #ffffff;
    --bg-elevated: #eef0f3;
    --bg-input: #eef0f3;
    --bg-sidebar: #ffffff;
    --border: #d0d5dd;
    --border-hover: #0969da;
    --text-primary: #1a1d23;
    --text-secondary: #525866;
    --text-muted: #717784;
    --text-heading: #0f1115;
    --accent: #0969da;
    --accent-hover: #0550ae;
    --accent-fg: #ffffff;
    --accent-subtle: #ddf4ff;
    --btn-bg: #f0f2f5;
    --btn-border: #d0d5dd;
    --btn-hover-bg: #e0e4e8;
    --btn-hover-border: #b0b8c1;
    --btn-text: #1a1d23;
    --badge-bg: #e8ecf0;
    --badge-border: #d1d9e0;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.1);
    --fallback-color: #0969da;
    --code-bg: #eff2f5;
    --code-text: #1f2328;
    --stats-bar-bg: #ffffff;
    --stats-bar-border: #d1d9e0;
    --stat-value: #1f2328;
    --stat-label: #7d8590;
    --progress-bg: #e0e4e8;
    --progress-fill: #0969da;
    --dot-online: #1a7f37;
    --dot-offline: #cf222e;
    --drag-bg: rgba(9,105,218,0.06);
    --drag-border: #0969da;
    --toast-bg: #1f2328;
    --toast-text: #ffffff;
    --modal-backdrop: rgba(0,0,0,0.4);
    --sidebar-active: #ddf4ff;
    --sidebar-active-text: #0550ae;
    --sidebar-hover: #f0f2f5;
    --danger: #cf222e;
    --danger-hover: #a40e26;
    --success: #1a7f37;
    --success-bg: #dafbe1;
    --warning: #9a6700;
    --warning-bg: #fff8c5;
    --info: #0969da;
    --info-bg: #ddf4ff;
    --log-bg: #1e1e2e;
    --log-text: #cdd6f4;
    --log-line-hover: rgba(255,255,255,0.04);
    --toggle-bg: var(--bg-input);
    --toggle-active: var(--accent);
    --toggle-knob: #ffffff;

    /* -- Design tokens from REDESIGN.md -- */
    --border-subtle: #e4e7ec;
    --text-heading: #0f1115;

    /* -- Typography scale (minor third 1.2 ratio, base 14px) -- */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', ui-monospace, monospace;
    --text-xs:   0.694rem;
    --text-sm:   0.833rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.35rem;
    --text-xl:   1.62rem;
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* -- Spacing scale (8px-based with 4px half-step) -- */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* -- Radius scale -- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-full: 9999px;

    /* -- Shadow scale -- */
    --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl:   0 16px 48px rgba(0,0,0,0.16);

    /* -- Focus -- */
    --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);
    --focus-ring-inset: inset 0 0 0 2px var(--accent);

    /* -- Transitions -- */
    --transition-fast: 0.1s ease;
    --transition-base: 0.15s ease;
    --transition-slow: 0.25s ease;

    /* -- Toast -- */
    --toast-max-width: 380px;
    --toast-min-width: 260px;

    /* -- Log severity -- */
    --log-error: #ef4444;
    --log-warning: #eab308;
    --log-notice: #3b82f6;
    --log-debug: #71717a;

    /* -- Log font -- */
    --log-font: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', ui-monospace, monospace;
    --log-font-size: 0.8125rem;
    --log-line-height: 1.65;

    /* -- Button disabled -- */
    --btn-disabled-opacity: 0.45;

    /* -- Drag -- */
    --drag-ghost-shadow: 0 8px 24px rgba(0,0,0,0.15);

    /* -- Card -- */
    --card-padding: var(--space-5);
}

[data-theme="dark"] {
    --bg-body: #0f1117;
    --bg-card: #161b22;
    --bg-elevated: #1c2028;
    --bg-input: #21262d;
    --bg-sidebar: #161b22;
    --border: #2d333b;
    --border-subtle: #232830;
    --border-hover: #58a6ff;
    --text-primary: #e1e4e8;
    --text-secondary: #8b949e;
    --text-muted: #848d97;
    --text-heading: #f0f3f6;
    --accent: #1f6feb;
    --accent-hover: #388bfd;
    --accent-fg: #ffffff;
    --accent-subtle: #0d1d30;
    --btn-bg: #21262d;
    --btn-border: #2d333b;
    --btn-hover-bg: #2d333b;
    --btn-hover-border: #444c56;
    --btn-text: #e1e4e8;
    --badge-bg: #1c2028;
    --badge-border: #2d333b;
    --shadow-card: none;
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.3);
    --fallback-color: #58a6ff;
    --code-bg: #21262d;
    --code-text: #e1e4e8;
    --stats-bar-bg: #161b22;
    --stats-bar-border: #2d333b;
    --stat-value: #f0f3f6;
    --stat-label: #8b949e;
    --progress-bg: #21262d;
    --progress-fill: #58a6ff;
    --dot-online: #3fb950;
    --dot-offline: #f85149;
    --drag-bg: rgba(31,111,235,0.1);
    --drag-border: #58a6ff;
    --toast-bg: #e1e4e8;
    --toast-text: #0f1117;
    --modal-backdrop: rgba(0,0,0,0.6);
    --sidebar-active: #0d1d30;
    --sidebar-active-text: #58a6ff;
    --sidebar-hover: #1c2028;
    --danger: #f85149;
    --danger-hover: #ff7b72;
    --success: #3fb950;
    --success-bg: #0d2818;
    --warning: #d29922;
    --warning-bg: #2e2213;
    --info: #58a6ff;
    --info-bg: #0d1d30;
    --log-bg: #0d1117;
    --log-text: #c9d1d9;
    --log-line-hover: rgba(255,255,255,0.04);
    --toggle-bg: var(--bg-input);
    --toggle-active: var(--accent);
    --toggle-knob: #ffffff;

    /* -- Dark mode design tokens -- */
    --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);
    --focus-ring-inset: inset 0 0 0 2px var(--accent);
    --log-error: #fca5a5;
    --log-warning: #fde68a;
    --log-notice: #93c5fd;
    --log-debug: #71717a;
    --drag-ghost-shadow: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-xs:   none;
    --shadow-sm:   none;
    --shadow-md:   0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.4);
    --shadow-xl:   0 16px 48px rgba(0,0,0,0.5);
}

/* ============ Calm Theme (Light Earthy) ============ */
/* Inspired by sunlit forest clearings: warm cream, sage, stone, moss */
[data-theme="calm"] {
    --bg-body: #f0ebe2;
    --bg-card: #faf7f2;
    --bg-elevated: #ede8de;
    --bg-input: #ede8de;
    --bg-sidebar: #faf7f2;
    --border: #d4cbbf;
    --border-subtle: #e2dacf;
    --border-hover: #577458;
    --text-primary: #3d3530;
    --text-secondary: #6b6058;
    --text-muted: #807668;
    --text-heading: #2d2520;
    --accent: #577458;
    --accent-hover: #4a6449;
    --accent-fg: #ffffff;
    --accent-subtle: #e0ece1;
    --btn-bg: #ede8de;
    --btn-border: #d4cbbf;
    --btn-hover-bg: #e2dacf;
    --btn-hover-border: #c0b5a8;
    --btn-text: #3d3530;
    --badge-bg: #e5dfd5;
    --badge-border: #d4cbbf;
    --shadow-card: 0 1px 3px rgba(80,60,40,0.06);
    --shadow-card-hover: 0 4px 16px rgba(80,60,40,0.10);
    --fallback-color: #577458;
    --code-bg: #ede8de;
    --code-text: #3d3530;
    --stats-bar-bg: #faf7f2;
    --stats-bar-border: #d4cbbf;
    --stat-value: #2d2520;
    --stat-label: #807668;
    --progress-bg: #e2dacf;
    --progress-fill: #577458;
    --dot-online: #4d7a50;
    --dot-offline: #a04a3d;
    --drag-bg: rgba(87,116,88,0.07);
    --drag-border: #577458;
    --toast-bg: #3d3530;
    --toast-text: #faf7f2;
    --modal-backdrop: rgba(45,37,32,0.35);
    --sidebar-active: #e0ece1;
    --sidebar-active-text: #4a6449;
    --sidebar-hover: #ede8de;
    --danger: #a04a3d;
    --danger-hover: #8b3d32;
    --success: #4d7a50;
    --success-bg: #e0ece1;
    --warning: #8c6520;
    --warning-bg: #f5ecd6;
    --info: #577458;
    --info-bg: #e0ece1;
    --log-bg: #2a2520;
    --log-text: #d4cbbf;
    --log-line-hover: rgba(250,247,242,0.04);
    --toggle-bg: var(--bg-input);
    --toggle-active: var(--accent);
    --toggle-knob: #ffffff;

    /* -- Calm light design tokens -- */
    --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);
    --focus-ring-inset: inset 0 0 0 2px var(--accent);
    --log-error: #a04a3d;
    --log-warning: #8c6520;
    --log-notice: #577458;
    --log-debug: #807668;
    --drag-ghost-shadow: 0 8px 24px rgba(80,60,40,0.15);
    --shadow-xs:   0 1px 2px rgba(80,60,40,0.04);
    --shadow-sm:   0 1px 3px rgba(80,60,40,0.06), 0 1px 2px rgba(80,60,40,0.03);
    --shadow-md:   0 4px 12px rgba(80,60,40,0.07);
    --shadow-lg:   0 8px 24px rgba(80,60,40,0.10);
    --shadow-xl:   0 16px 48px rgba(80,60,40,0.14);
}

/* ============ Calm Dark Theme (Dark Earthy) ============ */
/* Inspired by forest at dusk: deep warm browns, moss greens, amber */
[data-theme="calm-dark"] {
    --bg-body: #1a1814;
    --bg-card: #242019;
    --bg-elevated: #2d2921;
    --bg-input: #342f27;
    --bg-sidebar: #242019;
    --border: #3d3830;
    --border-subtle: #322d26;
    --border-hover: #8ab490;
    --text-primary: #d8d0c4;
    --text-secondary: #a09686;
    --text-muted: #8a8070;
    --text-heading: #ece5d8;
    --accent: #8ab490;
    --accent-hover: #9ec4a3;
    --accent-fg: #1a1814;
    --accent-subtle: #2a3328;
    --btn-bg: #342f27;
    --btn-border: #3d3830;
    --btn-hover-bg: #443e35;
    --btn-hover-border: #554e44;
    --btn-text: #d8d0c4;
    --badge-bg: #2d2921;
    --badge-border: #3d3830;
    --shadow-card: none;
    --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.30);
    --fallback-color: #8ab490;
    --code-bg: #342f27;
    --code-text: #d8d0c4;
    --stats-bar-bg: #242019;
    --stats-bar-border: #3d3830;
    --stat-value: #ece5d8;
    --stat-label: #a09686;
    --progress-bg: #342f27;
    --progress-fill: #8ab490;
    --dot-online: #7db882;
    --dot-offline: #d07060;
    --drag-bg: rgba(138,180,144,0.10);
    --drag-border: #8ab490;
    --toast-bg: #d8d0c4;
    --toast-text: #1a1814;
    --modal-backdrop: rgba(10,8,6,0.55);
    --sidebar-active: #2a3328;
    --sidebar-active-text: #8ab490;
    --sidebar-hover: #2d2921;
    --danger: #d07060;
    --danger-hover: #e08878;
    --success: #7db882;
    --success-bg: #2a3328;
    --warning: #d4a044;
    --warning-bg: #332a18;
    --info: #8ab490;
    --info-bg: #2a3328;
    --log-bg: #161410;
    --log-text: #c4baa8;
    --log-line-hover: rgba(216,208,196,0.04);
    --toggle-bg: var(--bg-input);
    --toggle-active: var(--accent);
    --toggle-knob: #1a1814;

    /* -- Calm dark design tokens -- */
    --focus-ring: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent);
    --focus-ring-inset: inset 0 0 0 2px var(--accent);
    --log-error: #e0a090;
    --log-warning: #ddb870;
    --log-notice: #8ab490;
    --log-debug: #8a8070;
    --drag-ghost-shadow: 0 8px 24px rgba(0,0,0,0.40);
    --shadow-xs:   none;
    --shadow-sm:   none;
    --shadow-md:   0 4px 12px rgba(0,0,0,0.25);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.35);
    --shadow-xl:   0 16px 48px rgba(0,0,0,0.45);
}

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

body {
    font-family: var(--font-family);
    font-size: 14px;
    line-height: var(--leading-normal);
    background: var(--bg-body);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============ Focus-visible ============ */
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.form-input:focus-visible,
.form-select:focus-visible,
.log-search:focus-visible,
.log-source-select:focus-visible,
.nexus-search input:focus-visible {
    box-shadow: none;
    border-color: var(--accent);
}

/* ============ Layout (2-row grid) ============ */
.nexus-layout {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 220px 1fr;
    grid-template-areas:
        "header header"
        "sidebar main";
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transition: grid-template-columns var(--transition-slow);
}

/* ============ Header ============ */
.nexus-header {
    grid-area: header;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    height: 52px;
    flex-wrap: nowrap;
}

.nexus-brand {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);
    white-space: nowrap;
}

.nexus-brand span {
    color: inherit;
}

/* ============ Navigation Tabs ============ */
.nexus-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-4);
}

.nexus-nav-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: color var(--transition-base), background var(--transition-base);
    white-space: nowrap;
    height: 32px;
    line-height: var(--leading-none);
}

.nexus-nav-tab:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.nexus-nav-tab.active {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    background: var(--bg-elevated);
}

.nexus-nav-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-normal);
    margin-left: var(--space-1);
}

.nexus-search {
    flex: 1;
    min-width: 180px;
    max-width: 360px;
    margin-left: auto;
}

.nexus-search input {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-base);
    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='%237d8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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: var(--space-3) center;
    background-size: 14px;
}

.nexus-search input:focus {
    border-color: var(--accent);
}

.nexus-search input::placeholder {
    color: var(--text-muted);
}

/* ============ Mobile Search (shown in main area on mobile) ============ */
.mobile-search {
    display: none;
    padding: var(--space-3) var(--space-4) 0;
}

.mobile-search input {
    width: 100%;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-base);
    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='%237d8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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: var(--space-3) center;
    background-size: 14px;
}

.mobile-search input:focus { border-color: var(--accent); }
.mobile-search input::placeholder { color: var(--text-muted); }

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-none);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-base), border-color var(--transition-base);
    border: 1px solid var(--btn-border);
    color: var(--btn-text);
    background: var(--btn-bg);
    cursor: pointer;
    white-space: nowrap;
    height: 32px;
}

.btn:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-danger:hover {
    background: var(--danger);
    color: var(--accent-fg);
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

.btn:disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
}

.btn-new-site .btn-label {
    /* visible by default, hidden on mobile via media query */
}

/* ============ Tools Dropdown ============ */
.tools-dropdown {
    position: relative;
}

.tools-menu {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    min-width: 200px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-1) 0;
    z-index: 100;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

[data-theme="dark"] .tools-menu {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.tools-dropdown.open .tools-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tools-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: background var(--transition-fast);
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
}

.tools-menu-item:hover {
    background: var(--bg-elevated);
}

.tools-menu-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-1) 0;
}

.tools-menu-external {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: auto;
}

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base);
    color: var(--text-secondary);
}

.theme-toggle:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
}

/* Theme toggle icon visibility: show only the icon for the active theme */
.theme-toggle .icon-moon,
.theme-toggle .icon-leaf,
.theme-toggle .icon-forest { display: none; }

[data-theme="calm"] .theme-toggle .icon-sun { display: none; }
[data-theme="calm"] .theme-toggle .icon-leaf { display: block; }

[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

[data-theme="calm-dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="calm-dark"] .theme-toggle .icon-forest { display: block; }

/* ============ Stats Bar (LEGACY -- no longer rendered, kept for backward compat) ============ */
.nexus-stats { display: none; }
.stats-group { display: none; }
.stat { display: none; }
.stat-value { display: none; }
.stat-label { display: none; }
.stat-bar { display: none; }
.stat-bar-fill { display: none; }

.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: var(--space-1);
    vertical-align: middle;
}

.status-dot.online  { background: var(--dot-online); }
.status-dot.offline { background: var(--dot-offline); }

/* ============ Sidebar ============ */
.nexus-sidebar {
    grid-area: sidebar;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    width: 220px;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: width var(--transition-slow);
}

.sidebar-stats-zone { flex-shrink: 0; }
.sidebar-context { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.sidebar-bottom { flex-shrink: 0; }

/* -- Collapsible stats section at top of sidebar -- */
.sidebar-stats {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}

.sidebar-stats-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.sidebar-stats-summary-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sidebar-stats-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: transform var(--transition-base);
}

.sidebar-stats-chevron.expanded {
    transform: rotate(180deg);
}

.sidebar-stats-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

/* -- Summary danger color for disk > 90% -- */
.sidebar-stats-summary-text .summary-danger {
    color: var(--danger);
    font-weight: var(--weight-semibold);
}

/* -- Stat Block (CPU, RAM, DISK) -- */
.stat-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-block-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.stat-block-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-block-value {
    font-size: var(--text-xs);
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.stat-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.stat-bar-track {
    flex: 1;
    height: 6px;
    background: var(--progress-bg);
    border-radius: 3px;
    overflow: hidden;
}

.stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background-color 0.3s ease;
}

.stat-bar-fill.ok      { background: var(--progress-fill); }
.stat-bar-fill.warning  { background: var(--warning); }
.stat-bar-fill.danger   { background: var(--danger); }

.stat-bar-pct {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    min-width: 2.5em;
    text-align: right;
    flex-shrink: 0;
}

.stat-bar-pct.ok       { color: var(--progress-fill); }
.stat-bar-pct.warning   { color: var(--warning); }
.stat-bar-pct.danger    { color: var(--danger); }

.stat-block-secondary {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-normal);
}

/* -- Divider between stat blocks and info rows -- */
.stat-info-divider {
    border-bottom: 1px solid var(--border);
    margin: var(--space-1) 0;
}

/* -- Info rows (Uptime, PHP, MySQL) -- */
.stat-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
}

.stat-info-row .label {
    color: var(--text-muted);
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
}

.stat-info-row .value {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.sidebar-stats-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
    margin-left: var(--space-2);
}

.sidebar-stats-refresh:hover {
    background: var(--btn-hover-bg);
    color: var(--text-primary);
}

/* -- Groups section -- */
.sidebar-groups {
    display: flex;
    flex-direction: column;
    padding-top: var(--space-3);
}

.sidebar-groups-header {
    padding: 0 var(--space-4) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* -- Legacy sidebar-header/title/add (kept for backward compat) -- */
.sidebar-header {
    display: none;
}

.sidebar-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.sidebar-add {
    display: none;
}

.sidebar-items {
    flex: 1;
    list-style: none;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-left: 3px solid transparent;
    user-select: none;
    min-height: 36px;
}

.sidebar-item:hover {
    background: var(--sidebar-hover);
}

.sidebar-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    border-left-color: var(--accent);
    font-weight: var(--weight-semibold);
}

/* -- New Group button at bottom of list -- */
.sidebar-create-group {
    margin: var(--space-2) var(--space-4) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.sidebar-create-group:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* -- Mobile close button -- */
.sidebar-close {
    display: none;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    cursor: pointer;
    color: var(--text-secondary);
    z-index: 10;
}

.sidebar-close:hover {
    color: var(--text-primary);
}

.sidebar-item.drag-over {
    background: var(--drag-bg);
    border-left-color: var(--drag-border);
}

.sidebar-item.drag-over .sidebar-count {
    display: none;
}

.sidebar-item.drag-over::after {
    content: 'Drop here';
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    color: var(--accent);
    margin-left: auto;
}

/* -- Sidebar item icon wrapper (14px fixed, centers dot/icon) -- */
.sidebar-item-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* -- Sidebar item name -- */
.sidebar-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-count {
    flex-shrink: 0;
    min-width: 18px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
}

.sidebar-item.active .sidebar-count {
    color: var(--sidebar-active-text);
    opacity: 0.7;
}

/* -- Edit button (hover-only, direct child of .sidebar-item) -- */
.sidebar-item-edit {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    opacity: 0;
    pointer-events: none;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                opacity var(--transition-fast);
}

.sidebar-item:hover .sidebar-item-edit {
    opacity: 0.7;
    pointer-events: auto;
}

.sidebar-item-edit:hover {
    opacity: 1;
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.sidebar-item-edit:focus-visible {
    opacity: 1;
    pointer-events: auto;
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Hide edit button during drag-over */
.sidebar-item.drag-over .sidebar-item-edit {
    display: none;
}

/* Legacy classes kept for backward compat */
.sidebar-item-actions {
    display: none;
}

.sidebar-item-btn {
    display: none;
}

/* ============ Sidebar Collapsible Content ============ */
.sidebar-collapsible-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.sidebar-collapsible-content.hidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    flex: 0;
}

/* ============ Sidebar Footer ============ */
.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    margin-top: auto;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.sidebar-footer-version {
    font-family: var(--font-mono);
    font-weight: var(--weight-medium);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    font-size: inherit;
    transition: color var(--transition-fast);
}
.sidebar-footer-version:hover {
    color: var(--accent);
}

.sidebar-footer-credit {
    font-weight: var(--weight-medium);
    opacity: 0.7;
    color: var(--text-muted);
    text-decoration: none;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.sidebar-footer-credit:hover {
    opacity: 1;
    color: var(--accent);
}

/* ============ Sidebar Collapse Button ============ */
.sidebar-collapse-btn {
    position: absolute;
    right: -14px;
    bottom: 48px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    color: var(--text-muted);
    z-index: 10;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.sidebar-collapse-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.sidebar-collapse-btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.sidebar-collapse-icon {
    transition: transform var(--transition-slow);
}

.nexus-sidebar.collapsed .sidebar-collapse-icon {
    transform: rotate(180deg);
}

/* ============ Sidebar Collapsed State ============ */
.nexus-sidebar.collapsed {
    width: 48px;
    overflow: visible;
}

.nexus-layout.sidebar-collapsed {
    grid-template-columns: 48px 1fr;
}

/* ============ Sidebar Collapsed Icons ============ */
.sidebar-collapsed-icons {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) 0;
    gap: var(--space-1);
}

.nexus-sidebar.collapsed .sidebar-collapsed-icons {
    display: flex;
}

.sidebar-collapsed-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-md);
    background: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
    position: relative;
    flex-shrink: 0;
}

.sidebar-collapsed-icon:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.sidebar-collapsed-icon.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
}

.sidebar-collapsed-divider {
    width: 24px;
    height: 1px;
    background: var(--border);
    margin: var(--space-1) 0;
    flex-shrink: 0;
}

.sidebar-collapsed-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============ Group Header (Main Content) ============ */
.group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
}

.group-header-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.group-header-name {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
}

.group-header-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.group-header-edit:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.group-header-edit:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.group-header-count {
    margin-left: auto;
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--weight-normal);
}

/* ============ Main Grid ============ */
.nexus-main {
    grid-area: main;
    padding: var(--space-6);
    overflow-y: auto;
}

/* -- Site Grid Toolbar (sort + count) -- */
.site-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    gap: var(--space-3);
}

.site-grid-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--weight-medium);
}

.site-grid-sort {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.site-grid-sort-label {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.site-grid-sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--transition-base);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    background-size: 12px;
    min-width: 0;
    outline: none;
}

.site-grid-sort-select:hover {
    border-color: var(--border-hover);
}

.site-grid-sort-select:focus-visible {
    box-shadow: var(--focus-ring);
}

.site-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-5);
}

/* ============ Site Card ============ */
.site-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
    transition: border-color var(--transition-base),
                box-shadow var(--transition-slow);
    box-shadow: var(--shadow-xs);
    position: relative;
    cursor: default;
    overflow: hidden;
}

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

.site-card.dragging {
    opacity: 0.35;
    border-style: dashed;
    border-color: var(--accent);
    box-shadow: none;
}

.site-card.drag-cancelled {
    animation: drag-snap-back 0.25s ease-out;
}

@keyframes drag-snap-back {
    0%   { opacity: 0.35; }
    100% { opacity: 1; }
}

.card-top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-icon .fallback {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--accent);
    text-transform: uppercase;
    line-height: 1;
}

.card-info {
    flex: 1;
    min-width: 0;
}

a.card-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--transition-base);
}

a.card-title:hover {
    color: var(--accent);
}

.card-url {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--log-font);
    line-height: var(--leading-normal);
    margin-top: 1px;
}

.card-group-tag {
    margin-left: auto;
    flex-shrink: 0;
    font-size: var(--text-xs);
    padding: 2px var(--space-2);
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    line-height: var(--leading-snug);
    align-self: center;
}

/* -- Card Badges Row -- */
.card-badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    flex-wrap: wrap;
}

/* -- Card Stats Row -- */
.card-stats {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-3);
}

.card-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.card-stat-icon {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.card-stat-value {
    font-weight: var(--weight-medium);
}

.card-meta {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.meta-item {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.meta-item .label {
    color: var(--text-muted);
    margin-right: var(--space-1);
}

.card-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.card-actions .btn {
    padding: var(--space-1) var(--space-2);
    height: 28px;
    font-size: var(--text-xs);
}

.card-actions .card-action-spacer {
    flex: 1;
    min-width: var(--space-2);
}

/* ============ Empty State ============ */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    color: var(--text-muted);
}

.empty-state code {
    background: var(--code-bg);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--code-text);
}

/* ============ Loading ============ */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-8);
    color: var(--text-muted);
}

.spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: var(--space-3);
}

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

.spin {
    animation: spin 1s linear infinite;
}

/* ============ Modal (native <dialog>) ============ */
dialog.nexus-modal {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0;
    width: min(480px, calc(100vw - 2rem));
    box-shadow: var(--shadow-xl);
    margin: auto;
    max-height: 85vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: modal-enter var(--transition-slow) ease-out;
}

dialog.nexus-modal::backdrop {
    background: var(--modal-backdrop);
    animation: backdrop-enter var(--transition-slow) ease-out;
}

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

@keyframes backdrop-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 1;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.modal-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
}

.modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--text-md);
    line-height: var(--leading-none);
    transition: background var(--transition-fast),
                color var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.modal-close:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.modal-body {
    padding: var(--space-5);
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    line-height: var(--leading-normal);
}

.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
    line-height: var(--leading-normal);
    min-height: 36px;
}

.form-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.form-input:disabled {
    background: var(--bg-elevated);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* -- Password Input Group -- */
.form-input-group {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.form-input-group .form-input {
    flex: 1;
    min-width: 0;
}

.form-input-group .btn {
    flex-shrink: 0;
    min-height: 36px;
    align-self: stretch;
}

.form-color-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.form-color-input {
    width: 40px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 2px;
    background: var(--bg-input);
}

.color-presets {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.color-preset {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition-base),
                transform var(--transition-base);
    padding: 0;
    position: relative;
}

.color-preset::before {
    content: '';
    position: absolute;
    inset: -6px;
}

.color-preset:hover {
    transform: scale(1.15);
}

.color-preset:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.color-preset.selected {
    border-color: var(--text-primary);
    transform: scale(1.1);
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: var(--bg-card);
    z-index: 1;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.modal-footer .btn-delete {
    margin-right: auto;
}

/* ============ Toast ============ */
.toast-container {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    pointer-events: none;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    background: var(--toast-bg);
    color: var(--toast-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    box-shadow: var(--shadow-md);
    animation: toast-in var(--transition-slow) ease-out;
    pointer-events: auto;
    max-width: var(--toast-max-width);
    min-width: var(--toast-min-width);
    word-break: break-word;
}

.toast.toast-exit {
    animation: toast-out 0.2s ease-in forwards;
}

.toast-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 1px;
}

.toast-icon-success { color: var(--success); }
.toast-icon-error   { color: var(--danger); }
.toast-icon-info    { color: var(--info); }

.toast-message {
    flex: 1;
    min-width: 0;
}

.toast-dismiss {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: inherit;
    opacity: 0.4;
    transition: opacity var(--transition-fast);
    margin-left: var(--space-1);
    padding: 0;
}

.toast-dismiss:hover {
    opacity: 0.9;
}

.toast-dismiss:focus-visible {
    opacity: 1;
    box-shadow: var(--focus-ring);
    outline: none;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(16px);
    }
}

/* ============ Mobile ============ */
.sidebar-toggle {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    cursor: pointer;
    color: var(--text-secondary);
    transition: background var(--transition-base), border-color var(--transition-base);
}

.sidebar-toggle:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
}

/* ============ Sidebar Backdrop ============ */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 999;
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}

[data-theme="dark"] .sidebar-backdrop {
    background: rgba(0,0,0,0.5);
}

.sidebar-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* ============ Package Picker ============ */
dialog.nexus-modal.modal-wide {
    width: min(720px, calc(100vw - 2rem));
}

.section-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    padding: var(--space-3) 0;
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    transition: color var(--transition-base);
}

.section-toggle:hover {
    color: var(--accent);
}

.section-toggle-chevron {
    transition: transform var(--transition-base);
    color: var(--text-muted);
    flex-shrink: 0;
}

.section-toggle-chevron.expanded {
    transform: rotate(180deg);
}

.section-toggle-count {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: 999px;
    padding: 0 6px;
    min-width: 18px;
    text-align: center;
    line-height: 18px;
    height: 18px;
}

.package-chips-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.package-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2) 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    background: var(--accent-subtle);
    color: var(--accent);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-fast);
    line-height: 1.5;
}

.package-chip:hover {
    background: var(--accent);
    color: var(--accent-fg);
}

.package-chip-theme {
    background: var(--success-bg);
    color: var(--success);
}

.package-chip-theme:hover {
    background: var(--success);
    color: #fff;
}

.package-chip-x {
    font-size: var(--text-sm);
    line-height: 1;
    margin-left: 2px;
}

.package-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.package-picker-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0;
}

.package-picker-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition-base), border-color var(--transition-base);
    margin-bottom: -1px;
}

.package-picker-tab:hover {
    color: var(--text-primary);
}

.package-picker-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: var(--weight-semibold);
}

.package-tab-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: 999px;
    padding: 0 5px;
    min-width: 16px;
    text-align: center;
    line-height: 16px;
    height: 16px;
}

.package-picker-search {
    margin-top: var(--space-2);
}

.package-picker-results {
    max-height: 350px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.package-picker-loading,
.package-picker-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.package-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-subtle);
}

.package-item:last-child {
    border-bottom: none;
}

.package-item:hover {
    background: var(--bg-elevated);
}

.package-item.selected {
    background: var(--accent-subtle);
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--space-3) - 3px);
}

.package-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
}

.package-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.package-item-icon-fallback {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--text-muted);
    text-transform: uppercase;
}

.package-item-info {
    flex: 1;
    min-width: 0;
}

.package-item-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.package-item-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.package-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: 1px;
}

.package-rating {
    color: var(--warning);
    letter-spacing: 1px;
    font-size: 10px;
}

.package-item-check {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============ Progress Step Warning ============ */
.progress-step.warning {
    color: var(--warning);
}

.progress-step.warning .progress-step-icon svg {
    animation: check-appear 0.3s ease-out;
}

/* ============ Credential Display ============ */
.credential-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.credential-value code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    background: var(--code-bg);
    color: var(--code-text);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    user-select: all;
    -webkit-user-select: all;
}

.copy-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    flex-shrink: 0;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.copy-btn:hover {
    color: var(--accent);
    background: var(--bg-elevated);
}

.copy-btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* ============ Tablet (768px - 1023px) ============ */
@media (max-width: 1023px) {
    .nexus-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main";
    }

    .nexus-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
        border-right: none;
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        will-change: transform;
    }

    [data-theme="dark"] .nexus-sidebar {
        box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    }

    .nexus-sidebar.open {
        transform: translateX(0);
    }

    .sidebar-close {
        display: flex;
    }

    .sidebar-backdrop {
        display: block;
    }

    .sidebar-toggle {
        display: flex;
    }

    /* Larger touch targets in drawer */
    .sidebar-item {
        min-height: 44px;
    }

    /* Hide collapse button on mobile — sidebar is already a drawer */
    .sidebar-collapse-btn {
        display: none;
    }

    /* Prevent collapsed state from affecting mobile drawer */
    .nexus-sidebar.collapsed {
        width: 280px;
    }

    .nexus-layout.sidebar-collapsed {
        grid-template-columns: 1fr;
    }
}

/* ============ Mobile (< 768px) ============ */
@media (max-width: 767px) {
    dialog.nexus-modal.modal-wide {
        width: calc(100vw - 1rem);
    }

    .package-item-icon {
        width: 32px;
        height: 32px;
    }

    .package-item-desc {
        display: none;
    }
    .nexus-header {
        padding: var(--space-2) var(--space-4);
        gap: var(--space-2);
        height: 48px;
    }

    .nexus-nav {
        margin-left: var(--space-2);
    }

    .nexus-main {
        padding: var(--space-4);
    }

    .site-grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

}

/* (mobile-search removed — search is now in SiteGrid toolbar) */

/* ============ Toast Types ============ */
.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-error   { border-left: 3px solid var(--danger); }
.toast.toast-info    { border-left: 3px solid var(--info); }

/* ============ View Toggle (LEGACY -- replaced by nav tabs, hidden) ============ */
.view-toggle { display: none; }
.view-toggle-btn { display: none; }

/* ============ Toggle Switch ============ */
.toggle-switch {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--toggle-bg);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-base);
    border: 1px solid var(--border);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--toggle-knob);
    border-radius: 50%;
    transition: transform var(--transition-base);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--toggle-active);
    border-color: var(--toggle-active);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    box-shadow: var(--focus-ring);
}

/* ============ Progress Stream ============ */
.progress-stream {
    padding: var(--space-5);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.progress-step.done .progress-step-icon svg {
    animation: check-appear 0.3s ease-out;
}

@keyframes check-appear {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

.progress-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.progress-step.active {
    color: var(--text-primary);
}

.progress-step.done {
    color: var(--success);
}

.progress-step.error {
    color: var(--danger);
}

.progress-step-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.progress-step-icon .spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.progress-result {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.progress-result.success {
    background: var(--success-bg);
    color: var(--success);
}

.progress-result.error {
    background: var(--warning-bg);
    color: var(--danger);
}

.progress-result a {
    color: inherit;
    font-weight: var(--weight-semibold);
}

/* ============ Create Site Modal ============ */
.url-preview {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: var(--space-1);
}

.url-preview span {
    color: var(--accent);
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--danger);
    margin-top: var(--space-1);
}

/* ============ Delete Confirm ============ */
.delete-warning {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: #fef2f2;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .delete-warning {
    background: #2d1215;
    border-color: #5c2327;
}

.delete-warning strong {
    color: var(--danger);
    font-weight: var(--weight-semibold);
}

/* ============ Settings Modal ============ */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 44px;
    gap: var(--space-4);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-label {
    font-size: var(--text-sm);
    color: var(--text-primary);
}

.settings-sublabel {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.settings-section-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.settings-section-title:first-child {
    margin-top: 0;
}

.settings-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.settings-info-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
}

.settings-info-row .label {
    color: var(--text-muted);
}

.settings-info-row .value {
    color: var(--text-primary);
    font-weight: var(--weight-medium);
}

/* ============ Log Viewer ============ */
.log-viewer {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.log-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.log-source-select {
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    min-width: 180px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
    min-height: 34px;
}

.log-source-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.log-search {
    flex: 1;
    min-width: 160px;
    max-width: 360px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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: 10px center;
    background-size: 13px;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
    min-height: 34px;
}

.log-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

.log-line-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    padding: 0 var(--space-2);
}

.log-actions {
    display: flex;
    gap: var(--space-1);
    margin-left: auto;
    align-items: center;
}

.log-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: var(--space-2);
}

.log-status .live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 1.5s ease-in-out infinite;
}

.log-output {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: var(--log-bg);
    border-radius: var(--radius-md);
    padding: var(--space-2) 0;
    font-family: var(--log-font);
    font-size: var(--log-font-size);
    line-height: var(--log-line-height);
    color: var(--log-text);
    margin-top: var(--space-2);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}

.log-line {
    display: flex;
    padding: 0 var(--space-3);
    min-height: calc(var(--log-font-size) * var(--log-line-height));
    transition: background var(--transition-fast);
}

.log-line:hover {
    background: var(--log-line-hover);
}

.log-line-number {
    flex-shrink: 0;
    width: 3rem;
    text-align: right;
    padding-right: var(--space-3);
    color: rgba(255,255,255,0.18);
    user-select: none;
    -webkit-user-select: none;
    font-variant-numeric: tabular-nums;
    border-right: 1px solid rgba(255,255,255,0.05);
    margin-right: var(--space-3);
}

.log-line-content {
    flex: 1;
    min-width: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

/* -- Severity coloring -- */
.log-line-content.severity-error {
    color: var(--log-error);
}

.log-line-content.severity-warning {
    color: var(--log-warning);
}

.log-line-content.severity-notice {
    color: var(--log-notice);
}

.log-line-content.severity-debug {
    color: var(--log-debug);
}

/* -- Search highlighting -- */
.log-line-content mark {
    background: rgba(250, 204, 21, 0.25);
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
}

[data-theme="dark"] .log-line-content mark {
    background: rgba(250, 204, 21, 0.2);
}

.log-empty {
    text-align: center;
    padding: var(--space-12);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ============ Sidebar Logs Section (LEGACY -- removed from sidebar, hidden) ============ */
.sidebar-section { display: none; }

/* ============ Site Card Icon Buttons ============ */
.card-icon-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
    flex-shrink: 0;
}

.card-icon-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border);
    color: var(--text-primary);
}

.card-icon-btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.card-icon-btn.danger-icon:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: transparent;
}

/* ============ Health Inline Indicator ============ */
.health-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    padding: 2px 0;
    white-space: nowrap;
    margin-left: auto;
}

.health-inline:hover {
    color: var(--text-primary);
}

.health-inline:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.health-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-dot.health-ok      { background: var(--success); }
.health-dot.health-warning  { background: var(--warning); }
.health-dot.health-error    { background: var(--danger); }
.health-dot.health-loading  {
    background: var(--text-muted);
    animation: pulse 1.5s ease-in-out infinite;
}
.health-dot.health-unknown  { background: var(--text-muted); }

.health-label-warning { color: var(--warning); }
.health-label-error   { color: var(--danger); }

/* ============ Health Modal ============ */

.health-modal-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
}

.health-modal-status-icon { display: flex; }
.health-modal-status-text { font-weight: var(--weight-semibold); font-size: var(--text-md); }

.health-modal-ok      { background: var(--success-bg); color: var(--success); }
.health-modal-warning  { background: var(--warning-bg); color: var(--warning); }
.health-modal-error    { background: #fef2f2; color: var(--danger); }
.health-modal-loading  { background: var(--bg-elevated); color: var(--text-muted); }

[data-theme="dark"] .health-modal-error { background: #2d1215; }

.health-checks-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.health-check-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.health-check-row:last-child {
    border-bottom: none;
}

.health-check-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    flex-shrink: 0;
}

.health-check-info {
    flex: 1;
    min-width: 0;
}

.health-check-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.health-check-value {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    margin-top: 1px;
}

.health-check-ok      { color: var(--success); }
.health-check-warning  { color: var(--warning); }
.health-check-error    { color: var(--danger); }

.health-modal-loading {
    text-align: center;
    padding: var(--space-4) 0;
}

/* ============ PSI (PageSpeed) Badge ============ */
.psi-inline {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 2px 0;
}

.psi-score {
    min-width: 24px;
    text-align: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    white-space: nowrap;
}

.psi-good {
    background: var(--success-bg);
    color: var(--success);
}

.psi-average {
    background: var(--warning-bg);
    color: var(--warning);
}

.psi-poor {
    background: #fef2f2;
    color: var(--danger);
}

[data-theme="dark"] .psi-poor {
    background: #2d1215;
}

.psi-unknown {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.psi-loading {
    background: var(--bg-elevated);
    color: var(--text-muted);
    animation: pulse 1.5s ease-in-out infinite;
}

.psi-scores-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.psi-score-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.psi-score-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid currentColor;
}

.psi-score-circle.psi-good    { color: var(--success); background: var(--success-bg); }
.psi-score-circle.psi-average { color: var(--warning); background: var(--warning-bg); }
.psi-score-circle.psi-poor    { color: var(--danger); background: #fef2f2; }
.psi-score-circle.psi-unknown { color: var(--text-muted); background: var(--bg-elevated); }

[data-theme="dark"] .psi-score-circle.psi-poor { background: #2d1215; }

.psi-score-number {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: 1;
}

.psi-score-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
    font-weight: var(--weight-medium);
}

.psi-audit-time {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-3);
}

.psi-no-data {
    text-align: center;
    padding: var(--space-4) 0;
}

@media (max-width: 480px) {
    .psi-scores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============ MailHog Info Modal ============ */
.modal-code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    overflow-x: auto;
    margin: var(--space-2) 0;
    white-space: pre;
}
.modal-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    margin-top: var(--space-4);
    margin-bottom: var(--space-1);
}
.modal-section-title:first-child {
    margin-top: 0;
}
.modal-text {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
}
.modal-list {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    padding-left: var(--space-5);
    margin: var(--space-1) 0;
}

/* ============ Create Card ============ */
.create-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 200px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--transition-base), background var(--transition-base);
}
.create-card:hover {
    border-color: var(--accent);
    background: var(--accent-subtle);
}
.create-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-input);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    color: var(--text-muted);
    transition: background var(--transition-base), color var(--transition-base);
}
.create-card:hover .create-card-icon {
    background: var(--accent);
    color: var(--accent-fg);
}
.create-card-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
}
.create-card:hover .create-card-label {
    color: var(--text-primary);
}

.create-card:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* ============ Button Disabled State ============ */
.btn:disabled,
.btn[disabled] {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* ============ Button Press ============ */
.btn:active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 0.05s;
}

/* ============ Focus-Visible Styles ============ */
.btn:focus-visible,
.sidebar-item:focus-visible,
.theme-toggle:focus-visible,
.sidebar-add:focus-visible,
.view-toggle-btn:focus-visible,
.nexus-nav-tab:focus-visible,
.create-card:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.form-input:focus-visible,
.form-select:focus-visible,
.log-source-select:focus-visible,
.log-search:focus-visible,
.nexus-search input:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
    outline: none;
}

/* ============ Drag Handle ============ */
.card-drag-handle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity var(--transition-base);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    border: none;
    background: transparent;
    padding: 0;
}

.site-card:hover .card-drag-handle {
    opacity: 0.35;
}

.card-drag-handle:hover {
    opacity: 0.7 !important;
    background: var(--bg-elevated);
}

.card-drag-handle:active {
    cursor: grabbing;
    opacity: 1 !important;
}

@media (hover: none) {
    .card-drag-handle {
        opacity: 0.3;
    }
}

/* ============ Empty States ============ */
.state-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    gap: var(--space-3);
}

.state-message-icon {
    width: 44px;
    height: 44px;
    color: var(--text-muted);
    opacity: 0.35;
    margin-bottom: var(--space-2);
}

.state-message-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-secondary);
    line-height: var(--leading-tight);
}

.state-message-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 320px;
    line-height: var(--leading-relaxed);
}

.state-message .btn {
    margin-top: var(--space-2);
}

.state-message a {
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}

.state-message a:hover {
    text-decoration: underline;
}

/* ============ Skip Link ============ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--accent);
    color: var(--accent-fg);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    z-index: 10001;
    border-radius: 0 0 var(--radius-md) 0;
    transition: top var(--transition-base);
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ============ Group Delete Two-Step ============ */
.btn-danger.confirming {
    background: var(--danger);
    color: var(--accent-fg);
    border-color: var(--danger);
    animation: btn-pulse 0.5s ease;
}

@keyframes btn-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* ============ Form Select (Styled) ============ */
.form-select {
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: 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 24 24' fill='none' stroke='%237d8590' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    transition: border-color var(--transition-base),
                box-shadow var(--transition-base);
    min-height: 36px;
}

.form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

/* ============ AI Analysis Panel ============ */
.ai-analysis-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    animation: ai-panel-in var(--transition-base) ease-out;
}

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

.ai-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.ai-analysis-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
}

.ai-loading-indicator {
    display: inline-flex;
    align-items: center;
}

.ai-loading-indicator .spinner-sm {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.ai-close-btn {
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-analysis-body {
    padding: var(--space-3) var(--space-4);
    max-height: 40vh;
    overflow-y: auto;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}

.ai-analysis-body h1,
.ai-analysis-body h2,
.ai-analysis-body h3 {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
    margin: var(--space-3) 0 var(--space-1) 0;
}

.ai-analysis-body h1:first-child,
.ai-analysis-body h2:first-child,
.ai-analysis-body h3:first-child {
    margin-top: 0;
}

.ai-analysis-body p {
    margin: var(--space-2) 0;
}

.ai-analysis-body ul,
.ai-analysis-body ol {
    padding-left: var(--space-5);
    margin: var(--space-2) 0;
}

.ai-analysis-body li {
    margin: var(--space-1) 0;
}

.ai-analysis-body code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--code-bg);
    color: var(--code-text);
    padding: 1px var(--space-1);
    border-radius: var(--radius-sm);
}

.ai-analysis-body pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-2) 0;
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
}

.ai-analysis-body pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

.ai-analysis-body strong {
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.ai-analysis-placeholder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-muted);
}

.ai-analysis-placeholder .spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.ai-analysis-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--warning-bg);
    color: var(--danger);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-subtle);
}

/* -- AI Toolbar Controls -- */
.btn-ai {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border: 1px solid var(--accent);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    min-height: 28px;
    white-space: nowrap;
}

.btn-ai:hover {
    background: var(--accent);
    color: var(--accent-fg);
}

.btn-ai-loading {
    border-color: var(--text-muted);
    color: var(--text-muted);
}

.btn-ai-loading:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border);
}

.btn-ai .spinner-sm {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-ai-label {
    display: inline;
}

.ai-model-select {
    padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px;
    min-height: 28px;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ai-model-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-subtle);
}

@media (max-width: 767px) {
    .btn-ai-label {
        display: none;
    }
}

/* ============ PHP Version Badge (Site Card) ============ */
.card-php-badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    white-space: nowrap;
}

.card-php-nondefault {
    color: var(--warning);
    font-weight: var(--weight-semibold);
}

/* ============ PHP Version Dashboard ============ */
.php-version-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}

.php-version-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--bg-elevated);
    transition: border-color var(--transition-base);
}

.php-version-default {
    border-color: var(--accent);
    border-width: 2px;
}

.php-version-unavailable {
    opacity: 0.5;
}

.php-version-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.php-version-number {
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--text-heading);
}

.php-version-badge {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    background: var(--accent-subtle);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.php-version-badge-warn {
    background: var(--warning-bg);
    color: var(--warning);
}

.php-version-sites {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    line-height: 1;
}

.php-version-sites-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.php-version-extensions {
    margin-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--space-2);
}

.php-version-extensions summary {
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.php-version-extensions summary:hover {
    color: var(--text-primary);
}

.php-ext-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: var(--space-2);
}

.php-ext-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--weight-medium);
    background: var(--bg-input);
    color: var(--text-secondary);
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

/* ============ Notification Panel ============ */

.notification-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.notification-header:hover {
    background: var(--bg-elevated);
}

.notification-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.notification-bell {
    color: var(--text-muted);
    flex-shrink: 0;
}

.notification-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    background: var(--danger);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: 10px;
    line-height: var(--leading-none);
}

.notification-header-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: var(--weight-medium);
}

.notification-chevron {
    color: var(--text-muted);
    transition: transform var(--transition-base);
    flex-shrink: 0;
}

.notification-chevron.collapsed {
    transform: rotate(-90deg);
}

.notification-dismiss-all {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--text-xs);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.notification-dismiss-all:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.notification-list {
    display: flex;
    flex-direction: column;
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid transparent;
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.notification-card:last-child {
    border-bottom: none;
}

.notification-card:hover {
    background: var(--bg-elevated);
}

.notification-critical {
    border-left-color: var(--danger);
}

.notification-warning {
    border-left-color: var(--warning);
}

.notification-info {
    border-left-color: var(--info);
}

.notification-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
}

.notification-critical .notification-icon {
    color: var(--danger);
}

.notification-warning .notification-icon {
    color: var(--warning);
}

.notification-info .notification-icon {
    color: var(--info);
}

.notification-body {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.notification-message {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-top: 1px;
}

.notification-action {
    flex-shrink: 0;
    align-self: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--btn-text);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.notification-action:hover {
    background: var(--btn-hover-bg);
    border-color: var(--btn-hover-border);
}

.notification-close {
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.notification-close:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .notification-card {
        padding: var(--space-2) var(--space-3);
        gap: var(--space-2);
    }

    .notification-action {
        display: none;
    }

    .notification-header-label {
        display: none;
    }
}

/* ============ Error Boundary ============ */
.error-boundary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-6);
    background: var(--bg-body);
}

.error-boundary-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    max-width: 420px;
    padding: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.error-boundary-content svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.error-boundary-content h2 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
}

.error-boundary-content p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
    word-break: break-word;
}

/* ============ PHP Extensions Modal ============ */

/* -- Manage button inside PHP version card -- */
.php-ext-manage-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-2);
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: color var(--transition-fast),
                background var(--transition-fast);
    line-height: var(--leading-normal);
}

.php-ext-manage-btn:hover {
    color: var(--text-primary);
    background: var(--bg-input);
}

.php-ext-manage-btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.php-ext-manage-btn svg {
    flex-shrink: 0;
    color: inherit;
}

/* -- Error alert bar -- */
.ext-error {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .ext-error {
    background: #2d1215;
    border-color: #5c2327;
}

/* -- Extension list -- */
.ext-list {
    display: flex;
    flex-direction: column;
}

/* -- Extension row -- */
.ext-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    min-height: 40px;
}

.ext-row:last-child {
    border-bottom: none;
}

/* -- Extension info (left side) -- */
.ext-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    flex: 1;
}

/* -- Extension name -- */
.ext-name {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Zend badge -- */
.ext-badge-zend {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
    flex-shrink: 0;
}

/* -- Toggle switch (extension-specific) -- */
.ext-toggle {
    position: relative;
    display: inline-flex;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}

.ext-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ext-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--toggle-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-base),
                border-color var(--transition-base);
}

.ext-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--toggle-knob);
    border-radius: 50%;
    transition: transform var(--transition-base);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.ext-toggle input:checked + .ext-toggle-slider {
    background: var(--toggle-active);
    border-color: var(--toggle-active);
}

.ext-toggle input:checked + .ext-toggle-slider::before {
    transform: translateX(18px);
}

.ext-toggle input:focus-visible + .ext-toggle-slider {
    box-shadow: var(--focus-ring);
}

/* -- Toggling state: subtle feedback while saving -- */
.ext-toggling {
    opacity: 0.55;
    pointer-events: none;
}

.ext-toggling .ext-toggle-slider {
    animation: ext-toggle-pulse 0.8s ease-in-out infinite;
}

@keyframes ext-toggle-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

/* -- Mobile: ensure comfortable touch targets -- */
@media (max-width: 767px) {
    .ext-row {
        min-height: 44px;
        padding: var(--space-2) 0;
    }

    .ext-toggle {
        width: 44px;
        height: 24px;
    }

    .ext-toggle-slider::before {
        width: 18px;
        height: 18px;
        left: 2px;
        bottom: 2px;
    }

    .ext-toggle input:checked + .ext-toggle-slider::before {
        transform: translateX(20px);
    }
}

/* ============ Changelog Modal ============ */
.changelog-body {
    max-height: 60vh;
    overflow-y: auto;
}

.changelog-release {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle, var(--border));
}
.changelog-release:last-child {
    border-bottom: none;
}
.changelog-latest {
    padding-top: 0;
}

.changelog-release-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.changelog-version {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.changelog-current {
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: var(--accent-fg);
}

.changelog-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-left: auto;
}

.changelog-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.changelog-item {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
}

.changelog-tag {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    min-width: 52px;
    text-align: center;
}
.changelog-tag-added {
    background: var(--success-bg, #dcfce7);
    color: var(--success-text, #166534);
}
.changelog-tag-fixed {
    background: #dbeafe;
    color: #1e40af;
}
.changelog-tag-improved {
    background: #fef3c7;
    color: #92400e;
}
.changelog-tag-removed {
    background: #fee2e2;
    color: #991b1b;
}

/* Dark mode overrides for changelog tags */
[data-theme="dark"] .changelog-tag-added {
    background: #14532d;
    color: #86efac;
}
[data-theme="dark"] .changelog-tag-fixed {
    background: #1e3a5f;
    color: #93c5fd;
}
[data-theme="dark"] .changelog-tag-improved {
    background: #451a03;
    color: #fcd34d;
}
[data-theme="dark"] .changelog-tag-removed {
    background: #450a0a;
    color: #fca5a5;
}

/* ============ Monitoring View ============ */
.monitoring-view {
    padding: var(--space-4);
}

.monitoring-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.monitoring-title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.monitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

/* -- Monitor Card -- */
.monitor-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border-left: 4px solid var(--border);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.monitor-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.monitor-status-up    { border-left-color: var(--success); }
.monitor-status-down  { border-left-color: var(--danger); }
.monitor-status-paused { border-left-color: var(--text-muted); }
.monitor-status-pending { border-left-color: var(--warning); }

.monitor-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

.monitor-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

.badge-up {
    background: var(--success-bg);
    color: var(--success);
}

.badge-down {
    background: #fee2e2;
    color: var(--danger);
}

.badge-paused {
    background: var(--bg-elevated);
    color: var(--text-muted);
}

.badge-pending {
    background: var(--warning-bg);
    color: var(--warning);
}

[data-theme="dark"] .badge-down {
    background: #450a0a;
    color: #fca5a5;
}

[data-theme="dark"] .badge-paused {
    background: var(--bg-elevated);
}

[data-theme="dark"] .badge-pending {
    background: #451a03;
    color: #fcd34d;
}

.monitor-actions {
    display: flex;
    gap: var(--space-1);
}

.monitor-actions .btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.monitor-actions .btn-sm:hover {
    background: var(--btn-hover-bg);
    color: var(--text-primary);
    border-color: var(--btn-hover-border);
}

.monitor-actions .btn-danger-subtle:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.monitor-card-body {
    padding: var(--space-3) var(--space-4);
    flex: 1;
}

.monitor-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-1);
}

.monitor-url {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.monitor-url:hover {
    color: var(--accent);
    text-decoration: underline;
}

.monitor-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.monitor-stats {
    display: flex;
    gap: var(--space-3);
}

.monitor-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.monitor-stat svg {
    color: var(--text-muted);
}

.monitor-interval {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* -- Empty state -- */
.monitoring-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

.monitoring-empty svg {
    margin-bottom: var(--space-4);
    opacity: 0.4;
}

.monitoring-empty h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.monitoring-empty p {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
    max-width: 320px;
}

/* -- Skeleton cards -- */
.monitor-skeleton {
    pointer-events: none;
}

.skeleton-pill {
    display: block;
    width: 48px;
    height: 20px;
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-line {
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-name {
    width: 60%;
    height: 16px;
    margin-bottom: var(--space-2);
}

.skeleton-url {
    width: 80%;
    height: 12px;
}

.skeleton-stats {
    width: 40%;
    height: 12px;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* -- Clickable card -- */
.monitor-card.monitor-card-clickable {
    cursor: pointer;
}

.monitor-card.monitor-card-clickable:hover .monitor-name {
    color: var(--accent);
}

/* -- Last check time in footer -- */
.monitor-last-check {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* -- Monitor Detail Modal -- */
.monitor-detail-modal {
    max-width: 600px;
}

.monitor-detail-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.monitor-detail-url {
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-decoration: none;
    word-break: break-all;
}

.monitor-detail-url:hover {
    color: var(--accent);
    text-decoration: underline;
}

.monitor-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.monitor-detail-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.monitor-detail-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: 2px;
}

.monitor-detail-stat-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}

.monitor-detail-section {
    margin-bottom: var(--space-4);
}

.monitor-detail-section-title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.monitor-detail-empty {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--space-3) 0;
}

.monitor-detail-loading {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: var(--space-2) 0;
}

/* -- Heartbeat Timeline -- */
.heartbeat-timeline {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 32px;
    padding: var(--space-1) 0;
}

.heartbeat-bar {
    flex: 1;
    min-width: 4px;
    max-width: 12px;
    height: 100%;
    border-radius: 2px;
    transition: opacity var(--transition-fast);
}

.heartbeat-bar:hover {
    opacity: 0.7;
}

.heartbeat-up {
    background: var(--success);
}

.heartbeat-down {
    background: var(--danger);
}

.heartbeat-pending {
    background: var(--warning);
}

/* -- Ping History -- */
.ping-history {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.ping-history-header {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
}

.ping-history-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}

.ping-history-row:last-child {
    border-bottom: none;
}

.ping-history-time {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.ping-history-ping {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.ping-history-row .monitor-status-badge {
    font-size: 10px;
    padding: 1px 6px;
    width: fit-content;
}

@media (max-width: 768px) {
    .monitor-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- Error banner for add monitor modal -- */
.form-error-banner {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .form-error-banner {
    background: #2d1215;
    border-color: #5c2327;
}

/* -- Mobile responsive -- */
@media (max-width: 768px) {
    .monitoring-view {
        padding: var(--space-3);
    }

    .monitor-grid {
        grid-template-columns: 1fr;
    }

    .monitoring-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }
}

/* ============ Auth Page ============ */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: var(--space-4);
    background: var(--bg-body);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    padding: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    color: var(--text-heading);
}

.auth-brand h1 {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
}

.auth-brand svg {
    color: var(--accent);
    flex-shrink: 0;
}

.auth-subtitle {
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: left;
}

.auth-submit {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-2);
}

.auth-error {
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
    text-align: left;
}

[data-theme="dark"] .auth-error {
    background: #2d1215;
    border-color: #5c2327;
}

.auth-link {
    display: inline-block;
    margin-top: var(--space-4);
    padding: 0;
    border: none;
    background: none;
    color: var(--accent);
    font-size: var(--text-sm);
    cursor: pointer;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

/* Auth loading spinner */
.auth-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg-body);
}

.auth-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: auth-spin 0.7s linear infinite;
}

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

/* ============ Lazy Loading Fallback ============ */
.lazy-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    min-height: 120px;
}

.lazy-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
}

/* ============ User Menu (Sidebar) ============ */
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
    line-height: 1;
}

.user-avatar-sm {
    width: 24px;
    height: 24px;
    font-size: 11px;
}


.user-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left;
}

.user-menu-item:hover {
    background: var(--sidebar-hover);
}

.user-menu-item svg {
    flex-shrink: 0;
    color: var(--text-muted);
}

.user-menu-logout {
    border-top: 1px solid var(--border-subtle);
}

.user-menu-logout:hover {
    color: var(--danger);
}

.user-menu-logout:hover svg {
    color: var(--danger);
}

/* ============ Header User Menu ============ */
.header-user-menu {
    position: relative;
}

.header-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.header-user-btn:hover {
    border-color: var(--border);
    background: var(--sidebar-hover);
}

.header-user-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
}

.header-user-menu .user-menu-dropdown {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    min-width: 180px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-1) 0;
    z-index: 100;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

[data-theme="dark"] .header-user-menu .user-menu-dropdown {
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.header-user-menu.open .user-menu-dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============ User Settings Modal ============ */
.user-settings-toggles {
    display: flex;
    flex-direction: column;
}

.user-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
}

.user-settings-toggle:last-child {
    border-bottom: none;
}

.user-settings-toggle.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.user-settings-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-settings-toggle-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.user-settings-toggle-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.user-settings-smtp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.user-settings-smtp-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.user-settings-smtp-result {
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.user-settings-smtp-result.success {
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid #bbf7d0;
}

.user-settings-smtp-result.error {
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .user-settings-smtp-result.success {
    background: #14532d;
    border-color: #166534;
}

[data-theme="dark"] .user-settings-smtp-result.error {
    background: #2d1215;
    border-color: #5c2327;
}

@media (max-width: 768px) {
    .auth-card {
        padding: var(--space-5);
    }
}

/* ============ Site Type Badges ============ */
.card-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
    line-height: 1.6;
    white-space: nowrap;
}

.badge-wordpress {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

[data-theme="dark"] .badge-wordpress {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #2563eb;
}

[data-theme="calm"] .badge-wordpress {
    background: #e0ece1;
    color: #3d6640;
    border: 1px solid #a8cfa8;
}

[data-theme="calm-dark"] .badge-wordpress {
    background: #2a3328;
    color: #8ab490;
    border-color: #4a6449;
}

.badge-dev {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}

.badge-prod {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

[data-theme="dark"] .badge-prod {
    background: #1e3a5f;
    color: #93c5fd;
    border-color: #2563eb;
}

.badge-static {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #86efac;
}

[data-theme="dark"] .badge-static {
    background: #14532d;
    color: #86efac;
    border-color: #22c55e;
}

.badge-custom {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

[data-theme="dark"] .badge-custom {
    background: #78350f;
    color: #fcd34d;
    border-color: #f59e0b;
}

.badge-silverstripe {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #a5b4fc;
}

[data-theme="dark"] .badge-silverstripe {
    background: #312e81;
    color: #a5b4fc;
    border-color: #6366f1;
}

/* -- Calm theme badge variants -- */
[data-theme="calm"] .badge-prod {
    background: #e0dfd5;
    color: #5a5040;
    border: 1px solid #c0b5a8;
}
[data-theme="calm-dark"] .badge-prod {
    background: #332a18;
    color: #d4a044;
    border-color: #554e44;
}
[data-theme="calm"] .badge-static {
    background: #e0ece1;
    color: #3d6640;
    border: 1px solid #a8cfa8;
}
[data-theme="calm-dark"] .badge-static {
    background: #2a3328;
    color: #7db882;
    border-color: #4a6449;
}
[data-theme="calm"] .badge-custom {
    background: #f5ecd6;
    color: #7a5c28;
    border: 1px solid #d4c4a0;
}
[data-theme="calm-dark"] .badge-custom {
    background: #332a18;
    color: #d4a044;
    border-color: #554e44;
}
[data-theme="calm"] .badge-silverstripe {
    background: #e6e0f0;
    color: #5a4080;
    border: 1px solid #bdb0d0;
}
[data-theme="calm-dark"] .badge-silverstripe {
    background: #2a2538;
    color: #b0a0d0;
    border-color: #4a4060;
}

/* ============ CMS Type Selector ============ */
.cms-type-selector {
    min-width: 100%;
}

/* ============ Segmented Control (Dev/Prod toggle) ============ */
.segmented-control {
    display: inline-flex;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 2px;
    gap: 2px;
    width: 100%;
}

.segment {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    text-align: center;
}

.segment:hover {
    color: var(--text-primary);
}

.segment.active {
    background: var(--bg-card);
    color: var(--text-heading);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: var(--weight-semibold);
}

/* ============ DNS Status Indicator ============ */
.dns-status {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.dns-ok {
    color: var(--success);
    background: var(--success-bg);
    border: 1px solid #bbf7d0;
}

.dns-warn {
    color: var(--warning);
    background: var(--warning-bg);
    border: 1px solid #fde68a;
}

.dns-error {
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
}

[data-theme="dark"] .dns-ok {
    background: #14532d;
    border-color: #166534;
}

[data-theme="dark"] .dns-warn {
    background: #451a03;
    border-color: #92400e;
}

[data-theme="dark"] .dns-error {
    background: #2d1215;
    border-color: #5c2327;
}

/* ============ Docs View ============ */
.docs-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
}

/* ── TOC (Table of Contents) ─────────────────────────────────────────── */
.docs-toc {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-card);
    overflow-y: auto;
    overflow-x: hidden;
}

.docs-toc-header {
    padding: var(--space-4) var(--space-4) var(--space-2);
}

.docs-toc-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0;
}

.docs-toc-search {
    padding: 0 var(--space-3) var(--space-3);
    position: relative;
}

.docs-toc-search-input {
    width: 100%;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-8);
    font-size: var(--text-xs);
    font-family: var(--font-family);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-base);
    min-height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8590' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%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: var(--space-2) center;
    background-size: 12px;
}

.docs-toc-search-input:focus {
    border-color: var(--accent);
}

.docs-toc-search-input::placeholder {
    color: var(--text-muted);
}

.docs-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.docs-toc-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    font-weight: var(--weight-normal);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
    text-align: left;
    min-height: 36px;
    line-height: var(--leading-snug);
}

.docs-toc-item:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.docs-toc-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    border-left-color: var(--accent);
    font-weight: var(--weight-semibold);
}

.docs-toc-item:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.docs-toc-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.docs-toc-item.active .docs-toc-icon {
    color: var(--sidebar-active-text);
}

.docs-toc-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.docs-toc-empty {
    padding: var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: center;
}

/* ── Mobile TOC toggle (hidden on desktop) ───────────────────────────── */
.docs-toc-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.docs-toc-toggle:hover {
    background: var(--bg-elevated);
}

.docs-toc-toggle:focus-visible {
    box-shadow: var(--focus-ring-inset);
    outline: none;
}

.docs-toc-toggle-chevron {
    margin-left: auto;
    transition: transform var(--transition-base);
    color: var(--text-muted);
}

.docs-toc-toggle-chevron.open {
    transform: rotate(180deg);
}

/* ── Mobile TOC backdrop ─────────────────────────────────────────────── */
.docs-toc-backdrop {
    display: none;
}

/* ── Main content area ───────────────────────────────────────────────── */
.docs-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    scroll-behavior: smooth;
}

/* ── Section ─────────────────────────────────────────────────────────── */
.docs-section {
    max-width: 720px;
    margin-bottom: var(--space-10);
    scroll-margin-top: var(--space-4);
}

.docs-section:last-child {
    margin-bottom: var(--space-16);
}

.docs-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5) 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.docs-section-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}

/* ── Typography within docs sections ─────────────────────────────────── */
.docs-section-body {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.docs-section-body p {
    margin: 0 0 var(--space-4) 0;
}

.docs-section-body p:last-child {
    margin-bottom: 0;
}

.docs-section-body h3 {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-snug);
    margin: var(--space-6) 0 var(--space-3) 0;
}

.docs-section-body h3:first-child {
    margin-top: 0;
}

.docs-section-body ul,
.docs-section-body ol {
    margin: 0 0 var(--space-4) 0;
    padding-left: var(--space-6);
}

.docs-section-body li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
}

.docs-section-body li:last-child {
    margin-bottom: 0;
}

.docs-section-body li ul,
.docs-section-body li ol {
    margin-top: var(--space-2);
    margin-bottom: var(--space-2);
}

.docs-section-body code {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--code-bg);
    color: var(--code-text);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
}

.docs-section-body kbd {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 2px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 var(--border);
}

.docs-section-body strong {
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.docs-section-body a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.docs-section-body a:hover {
    text-decoration: underline;
}

/* ── Code block ──────────────────────────────────────────────────────── */
.docs-code {
    background: var(--code-bg);
    color: var(--code-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    overflow-x: auto;
    margin: var(--space-3) 0;
}

.docs-code code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

/* ── Version badge ──────────────────────────────────────────────────── */
.docs-version-badge {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: var(--badge-bg);
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    margin-left: var(--space-2);
    font-weight: var(--weight-medium);
}

/* ── Search clear button ────────────────────────────────────────────── */
.docs-search-clear {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--space-1);
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast);
}

.docs-search-clear:hover {
    color: var(--text-primary);
}

/* ── Markdown h2 headings ──────────────────────────────────────────── */
.docs-section-body h2 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-5) 0;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

/* ── Markdown tables ───────────────────────────────────────────────── */
.docs-section-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-4) 0;
    font-size: var(--text-xs);
}

.docs-section-body th,
.docs-section-body td {
    padding: var(--space-2) var(--space-3);
    text-align: left;
    border: 1px solid var(--border);
}

.docs-section-body th {
    background: var(--bg-elevated);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
}

.docs-section-body tr:nth-child(even) td {
    background: var(--bg-elevated);
}

/* ── Markdown blockquotes ──────────────────────────────────────────── */
.docs-section-body blockquote {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--accent);
    background: var(--accent-subtle);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.docs-section-body blockquote p {
    margin: 0;
}

/* ── Markdown fenced code blocks ───────────────────────────────────── */
.docs-section-body pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: var(--leading-relaxed);
    overflow-x: auto;
    margin: var(--space-3) 0 var(--space-4) 0;
}

.docs-section-body pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

/* ── Markdown horizontal rule ──────────────────────────────────────── */
.docs-section-body hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: var(--space-6) 0;
}

/* ── Empty search state ──────────────────────────────────────────────── */
.docs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-16) var(--space-8);
    gap: var(--space-3);
    color: var(--text-muted);
}

.docs-empty svg {
    opacity: 0.35;
}

.docs-empty p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.docs-empty strong {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

/* ── Tablet (< 1024px): Docs content reduced padding ────────────────── */
@media (max-width: 1023px) {
    .docs-content {
        padding: var(--space-4) var(--space-5);
    }
}

/* ── Mobile (< 768px) ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .docs-content {
        padding: var(--space-4);
    }

    .docs-section-title {
        font-size: var(--text-md);
    }

    .docs-section-body {
        font-size: var(--text-sm);
    }

    .docs-section-body ul,
    .docs-section-body ol {
        padding-left: var(--space-5);
    }
}

/* ============ Settings View ============ */
.settings-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    position: relative;
}

/* ── Loading state ──────────────────────────────────────────────────── */
.settings-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-16) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ── Navigation sidebar ─────────────────────────────────────────────── */
.settings-nav {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-subtle);
    background: var(--bg-card);
    overflow-y: auto;
    overflow-x: hidden;
}

.settings-nav-header {
    padding: var(--space-4) var(--space-4) var(--space-2);
}

.settings-nav-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0;
}

.settings-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    font-weight: var(--weight-normal);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
    text-align: left;
    min-height: 36px;
    line-height: var(--leading-snug);
}

.settings-nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.settings-nav-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    border-left-color: var(--accent);
    font-weight: var(--weight-semibold);
}

.settings-nav-item:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

.settings-nav-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.settings-nav-item.active .settings-nav-icon {
    color: var(--sidebar-active-text);
}

.settings-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-nav-actions {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.settings-clear-btn {
    width: 100%;
    font-size: var(--text-xs);
}

.settings-clear-confirm {
    animation: ext-toggle-pulse 0.8s ease-in-out infinite;
}

/* ── Mobile nav toggle (hidden on desktop) ───────────────────────────── */
.settings-nav-toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.settings-nav-toggle:hover {
    background: var(--bg-elevated);
}

.settings-nav-toggle:focus-visible {
    box-shadow: var(--focus-ring-inset);
    outline: none;
}

.settings-nav-toggle-chevron {
    margin-left: auto;
    transition: transform var(--transition-base);
    color: var(--text-muted);
}

.settings-nav-toggle-chevron.open {
    transform: rotate(180deg);
}

/* ── Mobile nav backdrop ─────────────────────────────────────────────── */
.settings-nav-backdrop {
    display: none;
}

/* ── Main content area ───────────────────────────────────────────────── */
.settings-content {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    scroll-behavior: smooth;
}

/* ── Section ─────────────────────────────────────────────────────────── */
.settings-section {
    max-width: 640px;
    margin-bottom: var(--space-8);
    scroll-margin-top: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.settings-section:last-child {
    margin-bottom: var(--space-16);
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}

.settings-section-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}

.settings-section-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    line-height: var(--leading-tight);
}

.settings-section-body {
    padding: var(--space-3) var(--space-5);
}

.settings-section-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}

/* ── Field ───────────────────────────────────────────────────────────── */
.settings-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-field:last-child {
    border-bottom: none;
}

.settings-field-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.settings-field-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: var(--leading-snug);
}

.settings-field-desc {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-normal);
}

.settings-field-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.settings-number-input {
    width: 100px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.settings-text-input {
    width: 180px;
}

.settings-reset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background var(--transition-fast);
}

.settings-reset-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--bg-elevated);
}

.settings-reset-btn:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* ── Tablet (< 1024px): Settings content reduced padding ────────────── */
@media (max-width: 1023px) {
    .settings-content {
        padding: var(--space-4) var(--space-5);
    }
}

/* ── Mobile (< 768px) ────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .settings-content {
        padding: var(--space-4);
    }

    .settings-section-header {
        padding: var(--space-3) var(--space-4);
    }

    .settings-section-body {
        padding: var(--space-2) var(--space-4);
    }

    .settings-section-footer {
        padding: var(--space-2) var(--space-4);
    }

    .settings-field {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .settings-field-control {
        width: 100%;
    }

    .settings-number-input,
    .settings-text-input {
        width: 100%;
    }
}

/* ============ GitHub Settings ============ */

.github-connection-control {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.github-connected-user {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

.github-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--bg-elevated);
}

.github-username {
    font-weight: var(--weight-medium);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.github-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--dot-offline);
}

.github-status-dot.connected {
    background: var(--dot-online);
}

.github-status-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.github-oauth-input {
    width: 240px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.github-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) 0;
}

@media (max-width: 767px) {
    .github-connection-field {
        flex-direction: column;
        align-items: flex-start;
    }

    .github-connection-control {
        width: 100%;
    }

    .github-oauth-input {
        width: 100%;
    }
}

/* ============ Repository Picker ============ */

.repo-search-wrapper {
    position: relative;
    margin-bottom: var(--space-3);
}

.repo-search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    display: flex;
}

.repo-search-input {
    padding-left: var(--space-8) !important;
    padding-right: var(--space-8) !important;
}

.repo-search-clear {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-md);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.repo-search-clear:hover {
    color: var(--text-primary);
    background: var(--bg-elevated);
}

.repo-list {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
}

.repo-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    font-size: var(--text-sm);
    transition: background var(--transition-fast);
    min-height: 44px;
}

.repo-item:last-child {
    border-bottom: none;
}

.repo-item:hover {
    background: var(--sidebar-hover);
}

.repo-item:focus-visible {
    box-shadow: var(--focus-ring-inset);
    outline: none;
    z-index: 1;
    position: relative;
}

.repo-item-selected {
    background: var(--accent-subtle);
}

.repo-item-selected:hover {
    background: var(--accent-subtle);
}

.repo-item-radio {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: border-color var(--transition-fast);
}

.repo-item-selected .repo-item-radio {
    border-color: var(--accent);
}

.repo-item-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.repo-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.repo-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.repo-item-name {
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repo-item-visibility {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--text-xs);
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    line-height: var(--leading-snug);
    flex-shrink: 0;
}

.repo-private {
    color: var(--warning);
    background: var(--warning-bg);
}

.repo-public {
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
}

.repo-item-desc {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.repo-item-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.repo-item-lang {
    font-weight: var(--weight-medium);
}

.repo-list-message {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.repo-list-message strong {
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
}

.repo-list-error {
    color: var(--danger);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.repo-load-more {
    display: block;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: none;
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    font-family: var(--font-family);
    cursor: pointer;
    text-align: center;
    transition: background var(--transition-fast);
}

.repo-load-more:hover {
    background: var(--sidebar-hover);
}

.github-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    background: var(--accent-subtle);
    border: 1px solid var(--accent);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.github-selected-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.github-selected-chip-remove {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    padding: 0;
    flex-shrink: 0;
}

.github-selected-chip-remove:hover {
    background: var(--accent);
    color: var(--accent-fg);
}

@media (max-width: 767px) {
    .repo-list {
        max-height: 220px;
    }

    .repo-item {
        padding: var(--space-2) var(--space-3);
    }

    .repo-item-desc {
        display: none;
    }

    .github-selected-chip-name {
        max-width: 180px;
    }
}

/* ============ Sidebar Context Components ============ */

/* ── Shared sidebar nav item pattern ───────────────────────────────── */
.sidebar-docs-item,
.sidebar-settings-item,
.sidebar-account-item,
.sidebar-log-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-family: var(--font-family);
    font-weight: var(--weight-normal);
    color: var(--text-secondary);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                border-color var(--transition-fast);
    text-align: left;
    min-height: 32px;
    line-height: var(--leading-snug);
}

.sidebar-docs-item:hover,
.sidebar-settings-item:hover,
.sidebar-account-item:hover,
.sidebar-log-item:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.sidebar-docs-item.active,
.sidebar-settings-item.active,
.sidebar-account-item.active,
.sidebar-log-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
    border-left-color: var(--accent);
    font-weight: var(--weight-semibold);
}

.sidebar-docs-item:focus-visible,
.sidebar-settings-item:focus-visible,
.sidebar-account-item:focus-visible,
.sidebar-log-item:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
}

/* ── Sidebar Docs TOC ───────────────────────────────────────────────── */
.sidebar-docs-toc { display: flex; flex-direction: column; }

.sidebar-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.sidebar-docs-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar-docs-version {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: var(--weight-medium);
}

.sidebar-docs-search {
    padding: 0 var(--space-3) var(--space-2);
    position: relative;
}

.sidebar-docs-search-input {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-family);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-base);
    min-height: 28px;
}

.sidebar-docs-search-input:focus { border-color: var(--accent); }
.sidebar-docs-search-input::placeholder { color: var(--text-muted); }

.sidebar-docs-search-clear {
    position: absolute;
    right: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 2px;
    display: flex;
    align-items: center;
}

.sidebar-docs-search-clear:hover { color: var(--text-primary); }

.sidebar-docs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-docs-empty {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

/* ── Sidebar Settings Nav ───────────────────────────────────────────── */
.sidebar-settings-nav { display: flex; flex-direction: column; }

.sidebar-settings-header {
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.sidebar-settings-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar-settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-settings-icon,
.sidebar-account-icon,
.sidebar-log-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-muted);
}

.sidebar-settings-item.active .sidebar-settings-icon,
.sidebar-account-item.active .sidebar-account-icon,
.sidebar-log-item.active .sidebar-log-icon {
    color: var(--sidebar-active-text);
}

.sidebar-settings-label,
.sidebar-account-label,
.sidebar-log-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-settings-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-2);
}

.sidebar-settings-clear-btn {
    width: 100%;
    font-size: var(--text-xs);
}

.sidebar-settings-clear-confirm {
    animation: ext-toggle-pulse 0.8s ease-in-out infinite;
}

/* ── Sidebar Account Nav ────────────────────────────────────────────── */
.sidebar-account-nav { display: flex; flex-direction: column; }

.sidebar-account-header {
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.sidebar-account-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar-account-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ── Sidebar Log Sources ────────────────────────────────────────────── */
.sidebar-log-sources { display: flex; flex-direction: column; }

.sidebar-log-group {
    padding-top: var(--space-2);
}

.sidebar-log-group-header {
    padding: var(--space-1) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar-log-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-log-empty {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
}

.sidebar-log-site-search {
    padding: var(--space-1) var(--space-3);
}

.sidebar-log-site-search input {
    width: 100%;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-family);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    color: var(--text-primary);
    outline: none;
    transition: border-color var(--transition-base);
    min-height: 26px;
}

.sidebar-log-site-search input:focus { border-color: var(--accent); }
.sidebar-log-site-search input::placeholder { color: var(--text-muted); }

.sidebar-log-controls {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-2);
}

.sidebar-log-control-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-family: var(--font-family);
    font-weight: var(--weight-medium);
    color: var(--text-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    justify-content: center;
    min-height: 28px;
}

.sidebar-log-control-btn:hover {
    background: var(--sidebar-hover);
    color: var(--text-primary);
}

.sidebar-log-control-btn.active {
    background: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent);
}

.sidebar-log-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ── Sidebar Monitoring Nav ─────────────────────────────────────────── */
.sidebar-monitoring-nav { display: flex; flex-direction: column; }

.sidebar-monitoring-header {
    padding: var(--space-3) var(--space-4) var(--space-2);
}

.sidebar-monitoring-title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.sidebar-monitoring-overview {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4) var(--space-3);
    flex-wrap: wrap;
}

.sidebar-monitoring-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
}

.sidebar-monitoring-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-monitoring-dot.up { background: var(--success); }
.sidebar-monitoring-dot.down { background: var(--danger); }
.sidebar-monitoring-dot.pending { background: var(--warning); }
.sidebar-monitoring-dot.paused { background: var(--text-muted); }

.sidebar-monitoring-count {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.sidebar-monitoring-label {
    color: var(--text-muted);
}

/* ============ Log Source Label ============ */
.log-source-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    flex-shrink: 0;
}

/* ============ Account View ============ */
.account-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-6) var(--space-8);
    scroll-behavior: smooth;
}

.account-section {
    margin-bottom: var(--space-6);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
}

.account-smtp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.account-smtp-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.account-smtp-result {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.account-smtp-result.success {
    background: var(--success-subtle, rgba(46, 160, 67, 0.1));
    color: var(--success);
}

.account-smtp-result.error {
    background: var(--danger-subtle, rgba(248, 81, 73, 0.1));
    color: var(--danger);
}

.account-smtp-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.account-smtp-hint code {
    font-family: var(--font-mono);
    background: var(--bg-elevated);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

/* ── Mobile responsive for account view ─────────────────────────────── */
@media (max-width: 767px) {
    .account-view {
        padding: var(--space-4);
    }

}

/* ============ Command Palette ============ */
.cmd-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--modal-backdrop);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 140px);
    animation: cmdFadeIn 0.12s ease-out;
}

@keyframes cmdFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cmdSlideIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.cmd-palette {
    width: 560px;
    max-width: calc(100vw - 32px);
    max-height: min(480px, 70vh);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cmdSlideIn 0.15s ease-out;
}

.cmd-palette-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
}

.cmd-palette-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
    font-family: inherit;
    line-height: 1.4;
}

.cmd-palette-input::placeholder {
    color: var(--text-muted);
}

.cmd-palette-kbd {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0;
}

.cmd-palette-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.cmd-palette-group {
    margin-bottom: 2px;
}

.cmd-palette-group-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 8px 10px 4px;
}

.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
    text-align: left;
    line-height: 1.4;
    transition: background 0.08s;
}

.cmd-palette-item:hover,
.cmd-palette-item.active {
    background: var(--sidebar-hover);
}

.cmd-palette-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-active-text);
}

.cmd-palette-item-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--text-muted);
}

.cmd-palette-item.active .cmd-palette-item-icon {
    color: var(--sidebar-active-text);
}

.cmd-palette-item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmd-palette-item-hint {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
}

.cmd-palette-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

.cmd-palette-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
}

.cmd-palette-footer-hint {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
}

.cmd-palette-footer-hint kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 5px;
    font-size: 11px;
    font-family: inherit;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-right: 3px;
}

/* Header trigger button */
.cmd-palette-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    flex: 1;
    max-width: 320px;
    min-width: 160px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.cmd-palette-trigger:hover {
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.cmd-palette-trigger svg {
    flex-shrink: 0;
}

.cmd-palette-trigger-text {
    color: var(--text-muted);
}

.cmd-palette-trigger kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 4px;
    font-size: 10px;
    font-family: inherit;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 3px;
    margin-left: 2px;
}

/* ── Command Palette Mobile ─────────────────────────────────────── */
@media (max-width: 767px) {
    .cmd-palette-backdrop {
        padding-top: 48px;
    }

    .cmd-palette {
        max-height: 75vh;
        border-radius: 10px;
    }

    .cmd-palette-trigger-text,
    .cmd-palette-trigger kbd {
        display: none;
    }

    .cmd-palette-trigger {
        padding: 5px 7px;
    }
}