/* ============================================================
   SilverDOCK — Command Deck Theme
   Complete CSS rewrite with @layer architecture
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anybody:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ── Layer Order ── */
@layer reset, tokens, base, layout, components, pages, utilities, animations;

/* ============================================================
   LAYER: reset
   ============================================================ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    img, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    ul, ol { list-style: none; }
    table { border-collapse: collapse; }
}

/* ============================================================
   LAYER: tokens
   ============================================================ */
@layer tokens {
    :root {
        /* Backgrounds */
        --bg-base:       #080C14;
        --bg-surface:    #0E1420;
        --bg-elevated:   #151D2B;
        --bg-recessed:   #060A10;

        /* Borders */
        --border-default: #1E2A3A;
        --border-focus:   #E5A00D;

        /* Accent */
        --accent:         #E5A00D;
        --accent-hover:   #C98A00;
        --accent-subtle:  rgba(229, 160, 13, 0.12);

        /* Status */
        --status-online:   #00BFA5;
        --status-danger:   #F44336;
        --status-building: #42A5F5;
        --status-warning:  #E5A00D;
        --status-stopped:  #4A5568;

        /* Text */
        --text-primary:   #D4DAE3;
        --text-secondary: #7A8699;

        /* Typography */
        --font-heading: 'Anybody', sans-serif;
        --font-body:    'IBM Plex Sans', sans-serif;
        --font-mono:    'IBM Plex Mono', monospace;

        /* Radii */
        --radius: 2px;

        /* Shadows */
        --glow-accent: 0 0 0 1px var(--accent);
        --glow-online: 0 0 6px rgba(0, 191, 165, 0.6);

        /* Legacy aliases for compat */
        --primary-color:  #E5A00D;
        --primary-hover:  #C98A00;
        --danger-color:   #F44336;
        --danger-hover:   #D32F2F;
        --success-color:  #00BFA5;
        --warning-color:  #E5A00D;
        --bg-color:       #080C14;
        --card-bg:        #0E1420;
        --border-color:   #1E2A3A;
        --text-color:     #D4DAE3;
        --text-muted:     #7A8699;
    }
}

/* ============================================================
   LAYER: base
   ============================================================ */
@layer base {
    html, body {
        margin: 0;
        padding: 0;
        font-family: var(--font-body);
        background-color: var(--bg-base);
        color: var(--text-primary);
        min-height: 100vh;
    }

    /* Scan-line texture + radial vignette */
    body::before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9990;
        background:
            repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 0, 0, 0.03) 2px,
                rgba(0, 0, 0, 0.03) 4px
            );
    }

    body::after {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 9989;
        background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
    }

    h1, h2, h3, h4 {
        font-family: var(--font-heading);
        font-weight: 600;
        margin-top: 0;
        color: var(--text-primary);
    }

    h1:focus { outline: none; }

    a {
        color: var(--accent);
        transition: color 0.2s;
    }

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

    code, pre {
        font-family: var(--font-mono);
    }

    /* Form Elements */
    input, select, textarea {
        background-color: var(--bg-elevated);
        border: 1px solid var(--border-default);
        color: var(--text-primary);
        padding: 0.625rem 0.875rem;
        border-radius: var(--radius);
        font-size: 0.9375rem;
        font-family: var(--font-body);
        width: 100%;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--border-focus);
        box-shadow: 0 0 0 1px var(--accent);
    }

    input[type="checkbox"] {
        width: auto;
        margin-right: 0.5rem;
        accent-color: var(--accent);
    }

    label {
        display: block;
        margin-bottom: 0.375rem;
        color: var(--text-secondary);
        font-size: 0.8125rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: var(--font-body);
    }

    /* Buttons */
    button {
        background-color: var(--accent);
        color: var(--bg-base);
        border: 1px solid var(--accent);
        padding: 0.625rem 1.25rem;
        border-radius: var(--radius);
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 600;
        font-family: var(--font-body);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: box-shadow 0.2s, background-color 0.2s, border-color 0.2s;
    }

    button:hover:not(:disabled) {
        box-shadow: var(--glow-accent);
        background-color: var(--accent-hover);
        border-color: var(--accent-hover);
    }

    button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    button.secondary {
        background-color: transparent;
        color: var(--accent);
        border: 1px solid var(--accent);
    }

    button.secondary:hover:not(:disabled) {
        background-color: var(--accent-subtle);
        box-shadow: var(--glow-accent);
    }

    button.danger {
        background-color: var(--status-danger);
        color: #fff;
        border-color: var(--status-danger);
    }

    button.danger:hover:not(:disabled) {
        background-color: var(--danger-hover);
        border-color: var(--danger-hover);
        box-shadow: 0 0 0 1px var(--status-danger);
    }

    button.small {
        padding: 0.3rem 0.625rem;
        font-size: 0.75rem;
    }

    button.large {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }

    button.primary {
        background-color: var(--accent);
        color: var(--bg-base);
        border-color: var(--accent);
    }

    /* Validation */
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid var(--status-online);
    }

    .invalid {
        outline: 1px solid var(--status-danger);
    }

    .validation-message {
        color: var(--status-danger);
        font-size: 0.8125rem;
        margin-top: 0.25rem;
    }

    /* Blazor error boundary */
    .blazor-error-boundary {
        background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--status-danger);
        padding: 1rem 1rem 1rem 3.7rem;
        color: white;
        border-radius: var(--radius);
    }

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

    /* Loading */
    .loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 50vh;
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }

    /* Status Messages */
    .error-message {
        background-color: rgba(244, 67, 54, 0.08);
        border: 1px solid var(--status-danger);
        color: var(--status-danger);
        padding: 0.875rem;
        border-radius: var(--radius);
        margin: 1rem 0;
        font-size: 0.875rem;
    }

    .status-message {
        padding: 0.875rem;
        border-radius: var(--radius);
        margin: 1rem 0;
        font-size: 0.875rem;
    }

    .status-message.info {
        background-color: rgba(66, 165, 245, 0.08);
        border: 1px solid var(--status-building);
        color: var(--status-building);
    }

    .status-message.success {
        background-color: rgba(0, 191, 165, 0.08);
        border: 1px solid var(--status-online);
        color: var(--status-online);
    }

    .status-message.warning {
        background-color: var(--accent-subtle);
        border: 1px solid var(--accent);
        color: var(--accent);
    }

    .status-message.error {
        background-color: rgba(244, 67, 54, 0.08);
        border: 1px solid var(--status-danger);
        color: var(--status-danger);
    }

    .mono { font-family: var(--font-mono); }

    .help-text {
        color: var(--text-secondary);
        font-size: 0.75rem;
        display: block;
        margin-top: 0.25rem;
    }
}

/* ============================================================
   LAYER: layout
   ============================================================ */
@layer layout {
    /* Sidebar Layout */
    .deck-layout {
        display: flex;
        min-height: 100vh;
    }

    .deck-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 56px;
        background-color: var(--bg-surface);
        border-right: 1px solid var(--border-default);
        display: flex;
        flex-direction: column;
        z-index: 100;
        transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
    }

    .sidebar-expanded .deck-sidebar {
        width: 220px;
    }

    .sidebar-brand {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        height: 56px;
        border-bottom: 1px solid var(--border-default);
        flex-shrink: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    .brand-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        color: var(--accent);
    }

    .brand-text {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 0.9375rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        opacity: 0;
        transition: opacity 0.2s;
    }

    .sidebar-expanded .brand-text {
        opacity: 1;
    }

    .sidebar-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 0.5rem;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .nav-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem;
        border-radius: var(--radius);
        color: var(--text-secondary);
        transition: color 0.15s, background-color 0.15s;
        white-space: nowrap;
        overflow: hidden;
        text-decoration: none;
    }

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

    .nav-item.active {
        color: var(--accent);
        background-color: var(--accent-subtle);
    }

    .nav-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .nav-label {
        font-size: 0.8125rem;
        font-weight: 500;
        opacity: 0;
        transition: opacity 0.2s;
    }

    .sidebar-expanded .nav-label {
        opacity: 1;
    }

    .deck-main {
        flex: 1;
        margin-left: 56px;
        transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        min-height: 100vh;
    }

    .sidebar-expanded .deck-main {
        margin-left: 220px;
    }
}

/* ============================================================
   LAYER: components
   ============================================================ */
@layer components {

    /* ── Deck Card ── */
    .deck-card {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
    }

    .deck-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid var(--border-default);
    }

    /* ── Status Dots ── */
    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--status-stopped);
        flex-shrink: 0;
    }

    .status-dot--online {
        background-color: var(--status-online);
        box-shadow: var(--glow-online);
        animation: status-glow 2s ease-in-out infinite;
    }

    .status-dot--danger {
        background-color: var(--status-danger);
    }

    .status-dot--building {
        background-color: var(--status-building);
        animation: pulse 1.2s ease-in-out infinite;
    }

    .status-dot--stopped {
        background-color: var(--status-stopped);
    }

    /* ── Toast Notifications ── */
    .toast-container {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        max-width: 400px;
    }

    .toast {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        border-radius: var(--radius);
        background-color: var(--bg-elevated);
        border: 1px solid var(--border-default);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        animation: toast-slide-in 0.3s ease-out;
        position: relative;
        overflow: hidden;
    }

    /* 4px left-edge color strip */
    .toast::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
    }

    .toast-success::before { background-color: var(--status-online); }
    .toast-error::before   { background-color: var(--status-danger); }
    .toast-warning::before { background-color: var(--accent); }
    .toast-info::before    { background-color: var(--status-building); }

    /* Auto-dismiss progress bar */
    .toast::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background-color: var(--text-secondary);
        animation: toast-progress 5s linear forwards;
        opacity: 0.4;
    }

    .toast-removing {
        animation: toast-slide-out 0.3s ease-in forwards;
    }

    .toast-icon {
        font-size: 1.25rem;
        flex-shrink: 0;
    }

    .toast-success .toast-icon { color: var(--status-online); }
    .toast-error .toast-icon   { color: var(--status-danger); }
    .toast-warning .toast-icon { color: var(--accent); }
    .toast-info .toast-icon    { color: var(--status-building); }

    .toast-success { border-color: rgba(0, 191, 165, 0.3); }
    .toast-error   { border-color: rgba(244, 67, 54, 0.3); }
    .toast-warning { border-color: rgba(229, 160, 13, 0.3); }
    .toast-info    { border-color: rgba(66, 165, 245, 0.3); }

    .toast-content { flex: 1; }

    .toast-title {
        font-weight: 600;
        margin-bottom: 0.125rem;
        font-size: 0.875rem;
    }

    .toast-message {
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }

    .toast-close {
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 1.25rem;
        padding: 0;
        cursor: pointer;
        line-height: 1;
        text-transform: none;
        letter-spacing: 0;
    }

    .toast-close:hover {
        color: var(--text-primary);
        background: transparent;
        box-shadow: none;
    }

    /* ── Loading Overlay & Spinner ── */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(8, 12, 20, 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9998;
        backdrop-filter: blur(2px);
    }

    .loading-overlay.fullscreen {
        background-color: var(--bg-base);
    }

    .spinner-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
    }

    /* Triple concentric ring spinner */
    .spinner {
        width: 48px;
        height: 48px;
        position: relative;
    }

    .spinner::before,
    .spinner::after,
    .spinner {
        border-radius: 50%;
    }

    .spinner {
        border: 3px solid transparent;
        border-top-color: var(--accent);
        animation: spin 1s linear infinite;
    }

    .spinner::before {
        content: '';
        position: absolute;
        inset: 4px;
        border: 2px solid transparent;
        border-top-color: var(--status-online);
        border-radius: 50%;
        animation: spin 1.5s linear infinite reverse;
    }

    .spinner::after {
        content: '';
        position: absolute;
        inset: 10px;
        border: 2px solid transparent;
        border-top-color: var(--status-building);
        border-radius: 50%;
        animation: spin 2s linear infinite;
    }

    .spinner-message {
        color: var(--text-secondary);
        font-size: 0.9375rem;
        font-family: var(--font-mono);
    }

    .loading-spinner {
        text-align: center;
        padding: 2rem;
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }

    /* ── Modal ── */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 1rem;
    }

    .modal {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        width: 100%;
        max-width: 500px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        animation: deck-appear 0.2s ease-out;
    }

    .modal.modal-large  { max-width: 700px; }
    .modal.modal-confirm { max-width: 400px; }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-default);
        border-top: 2px solid var(--accent);
    }

    .modal-header h3 {
        margin: 0;
        font-family: var(--font-heading);
    }

    .modal-close {
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 1.5rem;
        padding: 0;
        cursor: pointer;
        line-height: 1;
        text-transform: none;
        letter-spacing: 0;
    }

    .modal-close:hover {
        color: var(--text-primary);
        background: transparent;
        box-shadow: none;
    }

    .modal-body {
        padding: 1.25rem;
        overflow-y: auto;
        flex: 1;
    }

    .modal-body .warning {
        color: var(--accent);
        font-size: 0.875rem;
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 0.5rem;
        padding: 0.875rem 1.25rem;
        border-top: 1px solid var(--border-default);
    }

    .modal-description {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    /* ── Form Groups ── */
    .form-group {
        margin-bottom: 1.25rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .checkbox-group {
        margin-top: 0.5rem;
    }

    /* ── Password Input ── */
    .password-input {
        display: flex;
        gap: 0.5rem;
    }

    .password-input input {
        flex: 1;
    }

    .toggle-password {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        background-color: var(--bg-elevated);
        border: 1px solid var(--border-default);
        color: var(--text-secondary);
        flex-shrink: 0;
    }

    .toggle-password:hover:not(:disabled) {
        background-color: var(--bg-surface);
        color: var(--text-primary);
        border-color: var(--accent);
    }

    /* ── Back Button ── */
    .back-button {
        background-color: var(--bg-elevated);
        border-color: var(--border-default);
        color: var(--text-secondary);
    }

    .back-button:hover:not(:disabled) {
        border-color: var(--accent);
        color: var(--accent);
        background-color: var(--accent-subtle);
    }

    /* ── Empty States ── */
    .empty-state {
        text-align: center;
        padding: 2.5rem;
    }

    .empty-state h2 { margin-bottom: 0.5rem; }
    .empty-state p  { color: var(--text-secondary); margin-bottom: 1.5rem; }

    .action-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }

    /* ── Toggle Switch ── */
    .toggle-switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        cursor: pointer;
    }

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

    .toggle-slider {
        position: absolute;
        inset: 0;
        background-color: var(--border-default);
        border-radius: 24px;
        transition: background-color 0.2s;
    }

    .toggle-slider::before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: var(--text-primary);
        border-radius: 50%;
        transition: transform 0.2s;
    }

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

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

/* ============================================================
   LAYER: pages
   ============================================================ */
@layer pages {

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SETUP PAGE
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .setup-container {
        max-width: 500px;
        margin: 2rem auto;
        padding: 1.5rem;
        background-color: var(--bg-surface);
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
    }

    .setup-container h1 {
        margin-bottom: 0.5rem;
    }

    .setup-container p {
        color: var(--text-secondary);
        margin-bottom: 1.5rem;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       WIZARD PAGE
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .wizard-container {
        max-width: 900px;
        margin: 2rem auto;
        padding: 1rem;
    }

    .wizard-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .wizard-header h1 {
        margin-bottom: 0.5rem;
        font-family: var(--font-heading);
    }

    .wizard-header .subtitle {
        color: var(--text-secondary);
        font-size: 1rem;
    }

    .wizard-step {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .step-header {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border: 2px solid var(--accent);
        color: var(--accent);
        border-radius: var(--radius);
        font-weight: 700;
        font-family: var(--font-mono);
        flex-shrink: 0;
    }

    .step-header h2 {
        margin-bottom: 0.25rem;
        font-size: 1.15rem;
    }

    .step-header p {
        color: var(--text-secondary);
        margin: 0;
    }

    .wizard-step h2 {
        margin-bottom: 0.5rem;
        font-size: 1.15rem;
    }

    .wizard-step > p {
        color: var(--text-secondary);
        margin-bottom: 1rem;
    }

    .step-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .wizard-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        padding-top: 1rem;
    }

    .wizard-footer {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        bottom: 1rem;
    }

    .selection-summary {
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-family: var(--font-mono);
    }

    .footer-actions {
        display: flex;
        gap: 1rem;
    }

    /* Project List (wizard) */
    .project-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .project-card {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 0.875rem;
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
    }

    .project-card:hover {
        border-color: var(--accent);
    }

    .project-card.selected {
        border-color: var(--accent);
        background-color: var(--accent-subtle);
    }

    .project-checkbox { padding-top: 0.125rem; }

    .project-checkbox input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        cursor: pointer;
    }

    .project-info {
        flex: 1;
        display: flex;
        gap: 1rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
        flex-wrap: wrap;
    }

    .project-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .project-name {
        font-weight: 600;
        flex: 1;
        color: var(--text-primary);
    }

    .project-type {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius);
        background-color: var(--bg-elevated);
        font-family: var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    .project-type.type-web     { background-color: rgba(66, 165, 245, 0.2); color: var(--status-building); }
    .project-type.type-api     { background-color: rgba(0, 191, 165, 0.2); color: var(--status-online); }
    .project-type.type-blazor  { background-color: rgba(229, 160, 13, 0.15); color: var(--accent); }
    .project-type.type-worker  { background-color: rgba(229, 160, 13, 0.2); color: var(--accent); }
    .project-type.type-console { background-color: var(--bg-elevated); color: var(--text-secondary); }

    .project-details {
        display: flex;
        gap: 1rem;
        font-size: 0.875rem;
        color: var(--text-secondary);
        flex-wrap: wrap;
    }

    /* Config Grid (wizard step 3) */
    .config-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }

    .project-config-card {
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1rem;
    }

    .config-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.875rem;
        padding-bottom: 0.625rem;
        border-bottom: 1px solid var(--border-default);
    }

    .config-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .config-type {
        font-size: 0.65rem;
        padding: 0.15rem 0.375rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .config-type.type-web     { background-color: rgba(66, 165, 245, 0.2); color: var(--status-building); }
    .config-type.type-api     { background-color: rgba(0, 191, 165, 0.2); color: var(--status-online); }
    .config-type.type-blazor  { background-color: rgba(229, 160, 13, 0.15); color: var(--accent); }
    .config-type.type-worker  { background-color: rgba(229, 160, 13, 0.2); color: var(--accent); }
    .config-type.type-console { background-color: var(--bg-elevated); color: var(--text-secondary); }

    .config-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 0.625rem;
        margin-bottom: 0.875rem;
    }

    .config-field {
        flex: 1;
        min-width: 80px;
    }

    .config-field label {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }

    .config-field input,
    .config-field select {
        padding: 0.4rem 0.5rem;
        font-size: 0.8125rem;
    }

    .config-field.inline {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .config-field.inline label {
        margin-bottom: 0;
        white-space: nowrap;
    }

    .config-field.inline input { width: auto; }

    .config-field-wide { flex-basis: 100%; }

    .config-options {
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-default);
    }

    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

    .checkbox-label.large {
        font-size: 1rem;
        color: var(--text-primary);
    }

    .checkbox-label input[type="checkbox"] {
        width: 1rem;
        height: 1rem;
    }

    .auto-update-options {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .update-config {
        padding-left: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       DASHBOARD PAGE
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .dashboard-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.5rem;
    }

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

    .dashboard-header h1 {
        margin: 0;
        font-family: var(--font-heading);
        letter-spacing: 0.04em;
    }

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

    /* Command Strip — replaces header button bar */
    .command-strip {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.5rem;
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        margin-bottom: 1.25rem;
        flex-wrap: wrap;
    }

    .command-strip .cmd-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius);
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-family: var(--font-body);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .command-strip .cmd-btn:hover:not(:disabled) {
        color: var(--accent);
        border-color: var(--border-default);
        background: var(--accent-subtle);
    }

    .command-strip .cmd-btn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .command-strip .cmd-btn.cmd-danger {
        color: var(--status-danger);
    }

    .command-strip .cmd-btn.cmd-danger:hover:not(:disabled) {
        background: rgba(244, 67, 54, 0.1);
        border-color: rgba(244, 67, 54, 0.3);
    }

    .command-strip .cmd-btn svg {
        width: 14px;
        height: 14px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        flex-shrink: 0;
    }

    .command-strip .cmd-divider {
        width: 1px;
        height: 24px;
        background: var(--border-default);
        margin: 0 0.25rem;
    }

    .command-strip .dev-tools-label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 0 0.5rem;
    }

    /* Git Status Section */
    .git-status-section {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .git-status-section h2 {
        margin-bottom: 0.875rem;
        font-size: 1.15rem;
    }

    .git-status-section h3 {
        margin-top: 1.25rem;
        margin-bottom: 0.625rem;
        font-size: 0.9375rem;
        color: var(--text-secondary);
    }

    .git-status-card {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        font-family: var(--font-mono);
        font-size: 0.875rem;
    }

    .status-item {
        display: flex;
        gap: 0.5rem;
    }

    .status-item .label {
        color: var(--text-secondary);
    }

    .status-item.update-available {
        color: var(--accent);
        font-weight: 600;
    }

    .commits-list {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .commit-item {
        display: flex;
        gap: 1rem;
        padding: 0.5rem 0.625rem;
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        font-size: 0.8125rem;
        font-family: var(--font-mono);
        flex-wrap: wrap;
        border-left: 2px solid var(--border-default);
    }

    .commit-hash {
        color: var(--accent);
        font-family: var(--font-mono);
    }

    .commit-message {
        flex: 1;
        min-width: 200px;
        color: var(--text-primary);
    }

    .commit-author, .commit-date {
        color: var(--text-secondary);
    }

    /* Projects Section */
    .projects-section {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
    }

    .projects-section h2 {
        margin-bottom: 0.875rem;
        font-size: 1.15rem;
    }

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
    }

    .projects-section .project-card {
        cursor: default;
    }

    .projects-section .project-card:hover {
        border-color: var(--border-default);
    }

    .project-status {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        border-radius: var(--radius);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: var(--font-mono);
    }

    .project-status.running {
        background-color: rgba(0, 191, 165, 0.15);
        color: var(--status-online);
    }

    .project-status.starting, .project-status.building {
        background-color: rgba(66, 165, 245, 0.15);
        color: var(--status-building);
    }

    .project-status.stopping {
        background-color: var(--accent-subtle);
        color: var(--accent);
    }

    .project-status.failed {
        background-color: rgba(244, 67, 54, 0.12);
        color: var(--status-danger);
    }

    .project-status.stopped {
        background-color: var(--bg-elevated);
        color: var(--text-secondary);
    }

    .project-error {
        background-color: rgba(244, 67, 54, 0.08);
        border: 1px solid var(--status-danger);
        color: var(--status-danger);
        padding: 0.5rem;
        border-radius: var(--radius);
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
        font-family: var(--font-mono);
    }

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

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ENDPOINTS CARD
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .endpoints-card {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .endpoints-card h2 {
        margin-bottom: 0.875rem;
        font-size: 1.15rem;
    }

    .no-endpoints {
        color: var(--text-secondary);
        text-align: center;
        padding: 1rem;
        font-family: var(--font-mono);
    }

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

    .endpoint-header,
    .endpoint-row {
        display: grid;
        grid-template-columns: 1fr 2fr auto;
        gap: 1rem;
        padding: 0.625rem 0.75rem;
        align-items: center;
    }

    .endpoint-header {
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border-default);
        font-family: var(--font-heading);
    }

    .endpoint-row {
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        margin-top: 0.375rem;
    }

    .endpoint-col-service {
        font-weight: 500;
        color: var(--text-primary);
    }

    .endpoint-col-url a {
        color: var(--accent);
        text-decoration: none;
        font-family: var(--font-mono);
        font-size: 0.8125rem;
    }

    .endpoint-col-url a:hover {
        text-decoration: underline;
    }

    .endpoint-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-family: var(--font-mono);
    }

    .endpoint-status.online .status-dot {
        background-color: var(--status-online);
        box-shadow: var(--glow-online);
    }

    .endpoint-status.starting .status-dot {
        background-color: var(--status-building);
        animation: pulse 1s infinite;
    }

    .endpoint-status.offline .status-dot,
    .endpoint-status.failed .status-dot {
        background-color: var(--status-danger);
    }

    .endpoint-ui-badge {
        font-size: 0.65rem;
        padding: 0.1rem 0.35rem;
        background-color: var(--accent);
        color: var(--bg-base);
        border-radius: var(--radius);
        margin-left: 0.5rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .endpoint-row.endpoint-ui {
        border-left: 3px solid var(--accent);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       LOGS PAGE
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .logs-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        height: calc(100vh - 2rem);
    }

    .logs-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .logs-header h1 {
        flex: 1;
        margin: 0;
        font-size: 1.375rem;
    }

    .status-bar {
        display: flex;
        gap: 1rem;
        padding: 0.625rem 0.875rem;
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius) var(--radius) 0 0;
        font-size: 0.8125rem;
        font-family: var(--font-mono);
    }

    .status-bar .status { font-weight: 600; }
    .status-bar .status.running   { color: var(--status-online); }
    .status-bar .status.building,
    .status-bar .status.starting  { color: var(--status-building); }
    .status-bar .status.failed    { color: var(--status-danger); }
    .status-bar .status.stopped   { color: var(--text-secondary); }

    .log-viewer {
        flex: 1;
        background-color: var(--bg-recessed);
        background-image: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(229, 160, 13, 0.01) 2px,
            rgba(229, 160, 13, 0.01) 4px
        );
        border: 1px solid var(--border-default);
        border-top: none;
        border-radius: 0 0 var(--radius) var(--radius);
        padding: 0.75rem;
        overflow-y: auto;
        font-family: var(--font-mono);
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .no-logs {
        color: var(--text-secondary);
        text-align: center;
        padding: 2rem;
        font-family: var(--font-mono);
    }

    .log-entry {
        display: flex;
        gap: 0.75rem;
        padding: 0.125rem 0;
    }

    .log-entry .timestamp {
        color: var(--accent);
        white-space: nowrap;
    }

    .log-entry .level {
        width: 60px;
        text-align: center;
        font-weight: 600;
    }

    .log-entry.info .level    { color: var(--status-building); }
    .log-entry.warning .level { color: var(--accent); }
    .log-entry.error .level   { color: var(--status-danger); }
    .log-entry.debug .level   { color: var(--text-secondary); }

    .log-entry .message {
        flex: 1;
        word-break: break-all;
    }

    /* ── Host Logs Section ── */
    .host-logs-section {
        background-color: var(--bg-surface);
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
        overflow: hidden;
    }

    .host-logs-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.875rem 1.25rem;
        cursor: pointer;
        user-select: none;
        transition: background-color 0.15s;
    }

    .host-logs-header:hover {
        background-color: rgba(229, 160, 13, 0.04);
    }

    .host-logs-header h2 {
        margin: 0;
        font-size: 1.15rem;
    }

    .host-logs-header .collapse-icon {
        color: var(--text-secondary);
        font-size: 0.875rem;
    }

    .host-logs-card {
        border-top: 1px solid var(--border-default);
    }

    .log-filters {
        display: flex;
        gap: 0.375rem;
        padding: 0.625rem 0.875rem;
        background-color: var(--bg-recessed);
        border-bottom: 1px solid var(--border-default);
    }

    .log-filter-btn {
        padding: 0.3rem 0.625rem;
        font-size: 0.75rem;
        background-color: transparent;
        border: 1px solid var(--border-default);
        color: var(--text-secondary);
        border-radius: var(--radius);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .log-filter-btn:hover:not(:disabled) {
        background-color: var(--bg-elevated);
        border-color: var(--text-secondary);
    }

    .log-filter-btn.active {
        background-color: var(--accent);
        border-color: var(--accent);
        color: var(--bg-base);
    }

    .log-clear-btn {
        margin-left: auto;
        padding: 0.3rem 0.625rem;
        font-size: 0.75rem;
        background-color: transparent;
        border: 1px solid var(--status-danger);
        color: var(--status-danger);
        border-radius: var(--radius);
    }

    .log-clear-btn:hover:not(:disabled) {
        background-color: var(--status-danger);
        color: white;
    }

    .host-logs-card .log-viewer {
        max-height: 300px;
        min-height: 150px;
        border: none;
        border-radius: 0;
        padding: 0.5rem;
    }

    .host-logs-card .log-entry {
        display: flex;
        gap: 0.5rem;
        padding: 0.2rem 0.5rem;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .host-logs-card .log-entry:hover {
        background-color: rgba(229, 160, 13, 0.03);
    }

    .host-logs-card .log-time {
        color: var(--accent);
        white-space: nowrap;
    }

    .host-logs-card .log-level {
        width: 36px;
        text-align: center;
        font-weight: 600;
    }

    .host-logs-card .log-category {
        color: var(--text-secondary);
        white-space: nowrap;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .host-logs-card .log-message {
        flex: 1;
        word-break: break-word;
    }

    .host-logs-card .log-entry.log-info .log-level    { color: var(--status-building); }
    .host-logs-card .log-entry.log-warning .log-level  { color: var(--accent); }
    .host-logs-card .log-entry.log-error .log-level    { color: var(--status-danger); }
    .host-logs-card .log-entry.log-debug .log-level    { color: var(--text-secondary); }

    .log-empty {
        color: var(--text-secondary);
        text-align: center;
        padding: 2rem;
        font-size: 0.875rem;
        font-family: var(--font-mono);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       HOME / LANDING PAGE (migrated from inline)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .landing-container {
        min-height: 100vh;
        padding: 2rem;
        color: var(--text-primary);
    }

    .landing-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-default);
    }

    .landing-title h1 {
        margin: 0;
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        font-family: var(--font-heading);
        color: var(--accent);
    }

    .landing-subtitle {
        display: block;
        font-size: 0.85rem;
        color: var(--text-secondary);
        margin-top: 0.25rem;
        font-family: var(--font-mono);
        letter-spacing: 0.02em;
    }

    .dashboard-link {
        display: inline-flex;
        align-items: center;
        padding: 0.625rem 1.25rem;
        background: var(--accent);
        color: var(--bg-base);
        text-decoration: none;
        border-radius: var(--radius);
        font-weight: 600;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        transition: box-shadow 0.2s, background-color 0.2s;
        border: 1px solid var(--accent);
    }

    .dashboard-link:hover {
        box-shadow: var(--glow-accent);
        background-color: var(--accent-hover);
    }

    /* Summary Bar */
    .summary-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        padding: 1.25rem;
        border: 1px solid var(--accent);
        border-radius: var(--radius);
        margin-bottom: 2rem;
        background-color: var(--bg-surface);
    }

    .summary-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    .summary-value {
        font-size: 2rem;
        font-weight: 700;
        font-family: var(--font-heading);
        color: var(--accent);
    }

    .summary-item.running .summary-value {
        color: var(--status-online);
    }

    .summary-item.stopped .summary-value {
        color: var(--text-secondary);
    }

    .summary-label {
        font-size: 0.75rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-family: var(--font-mono);
    }

    .summary-divider {
        width: 1px;
        height: 40px;
        background: var(--border-default);
    }

    /* Project Cards (landing) */
    .landing-projects {
        margin-bottom: 2rem;
    }

    .landing-card {
        display: flex;
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        overflow: hidden;
        transition: border-color 0.2s, transform 0.15s;
    }

    .landing-card:hover {
        border-color: var(--accent);
        transform: translateY(-1px);
    }

    .card-status-indicator {
        width: 3px;
        flex-shrink: 0;
    }

    .landing-card.running .card-status-indicator  { background: var(--status-online); }
    .landing-card.stopped .card-status-indicator  { background: var(--status-stopped); }
    .landing-card.starting .card-status-indicator { background: var(--accent); animation: pulse 1.5s ease-in-out infinite; }
    .landing-card.failed .card-status-indicator   { background: var(--status-danger); }

    .card-content {
        flex: 1;
        padding: 0.875rem 1rem;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
    }

    .card-name {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        font-family: var(--font-heading);
    }

    .card-status-text {
        font-size: 0.7rem;
        padding: 0.15rem 0.5rem;
        border-radius: var(--radius);
        font-weight: 600;
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .landing-card.running .card-status-text  { background: rgba(0, 191, 165, 0.12); color: var(--status-online); }
    .landing-card.stopped .card-status-text  { background: var(--bg-elevated); color: var(--text-secondary); }
    .landing-card.starting .card-status-text { background: var(--accent-subtle); color: var(--accent); }
    .landing-card.failed .card-status-text   { background: rgba(244, 67, 54, 0.12); color: var(--status-danger); }

    .card-details {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .card-detail {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
    }

    .detail-label {
        font-size: 0.65rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-family: var(--font-mono);
    }

    .detail-value {
        font-size: 0.85rem;
        color: var(--text-primary);
        font-family: var(--font-mono);
    }

    .detail-value.muted { color: var(--status-stopped); }

    /* Landing Footer */
    .landing-footer {
        display: flex;
        justify-content: center;
        padding-top: 1.25rem;
        border-top: 1px solid var(--border-default);
    }

    .footer-item {
        display: flex;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-family: var(--font-mono);
    }

    .footer-label  { color: var(--text-secondary); }
    .footer-value  { color: var(--text-primary); }
    .footer-value.warning { color: var(--accent); font-size: 0.75rem; }

    .footer-divider {
        width: 1px;
        height: 16px;
        background: var(--border-default);
        margin: 0 0.5rem;
    }

    /* Credentials Section (setup/home) */
    .credentials-section {
        margin-top: 1.25rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-default);
    }

    .credentials-section h3 {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 0.75rem 0;
        font-family: var(--font-heading);
    }

    .lock-badge {
        display: inline-block;
        padding: 0.25rem 0.625rem;
        background: var(--accent-subtle);
        border: 1px solid rgba(229, 160, 13, 0.3);
        border-radius: var(--radius);
        font-size: 0.75rem;
        color: var(--accent);
        margin-bottom: 0.5rem;
        font-family: var(--font-mono);
    }

    .lock-hint {
        color: var(--accent);
        font-style: italic;
        font-size: 0.8125rem;
    }

    .status-badge.configured {
        color: var(--status-online);
        font-weight: 600;
    }

    .auto-init-status {
        text-align: center;
        padding: 2rem;
    }

    .auto-init-status h2 {
        color: var(--accent);
        margin-bottom: 0.5rem;
    }

    .auto-init-status p {
        color: var(--text-secondary);
    }

    /* Dev Tools Bar */
    .dev-tools-bar {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.875rem 1rem;
        background: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        margin-bottom: 1.5rem;
    }

    .dev-tools-label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 600;
        font-family: var(--font-mono);
    }

    .dev-tools-links {
        display: flex;
        gap: 0.625rem;
    }

    .dev-tool-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.35rem 0.875rem;
        border-radius: var(--radius);
        font-size: 0.8125rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.15s;
        font-family: var(--font-mono);
    }

    .dev-tool-pill .pill-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .dev-tool-pill.ide {
        background: rgba(0, 191, 165, 0.08);
        border: 1px solid rgba(0, 191, 165, 0.3);
        color: var(--status-online);
    }

    .dev-tool-pill.ide .pill-dot {
        background: var(--status-online);
        box-shadow: 0 0 6px rgba(0, 191, 165, 0.5);
    }

    .dev-tool-pill.ide:hover {
        background: rgba(0, 191, 165, 0.15);
        border-color: var(--status-online);
    }

    .dev-tool-pill.chat {
        background: rgba(66, 165, 245, 0.08);
        border: 1px solid rgba(66, 165, 245, 0.3);
        color: var(--status-building);
    }

    .dev-tool-pill.chat .pill-dot {
        background: var(--status-building);
        box-shadow: 0 0 6px rgba(66, 165, 245, 0.5);
    }

    .dev-tool-pill.chat:hover {
        background: rgba(66, 165, 245, 0.15);
        border-color: var(--status-building);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       TERMINAL PAGE (migrated from inline)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .terminal-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        background: var(--bg-base);
    }

    .terminal-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0.875rem 1.25rem;
        background: var(--bg-surface);
        border-bottom: 1px solid var(--border-default);
    }

    .terminal-header h1 {
        flex: 1;
        margin: 0;
        font-size: 1.15rem;
        font-family: var(--font-heading);
    }

    .working-dir {
        font-family: var(--font-mono);
        font-size: 0.8125rem;
        color: var(--text-secondary);
        background: var(--bg-elevated);
        padding: 0.2rem 0.625rem;
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
    }

    .terminal-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: var(--bg-recessed);
        background-image: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(229, 160, 13, 0.01) 2px,
            rgba(229, 160, 13, 0.01) 4px
        );
        margin: 0.75rem;
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
        overflow: hidden;
        font-family: var(--font-mono);
        font-size: 14px;
    }

    .terminal-output {
        flex: 1;
        overflow-y: auto;
        padding: 0.875rem;
        color: var(--text-primary);
    }

    .terminal-line {
        display: flex;
        gap: 0.5rem;
        line-height: 1.6;
        white-space: pre-wrap;
        word-break: break-all;
    }

    .terminal-line.command {
        color: var(--status-building);
        margin-top: 0.5rem;
    }

    .terminal-line.command .prompt {
        color: var(--accent);
        font-weight: bold;
    }

    .terminal-line.output {
        color: var(--text-primary);
    }

    .terminal-line.error {
        color: var(--status-danger);
    }

    .terminal-line.system {
        color: var(--accent);
        font-style: italic;
    }

    .terminal-line.executing {
        color: var(--status-building);
    }

    .terminal-line .spinner {
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 2px solid var(--status-building);
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .terminal-input-wrapper {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 0.875rem;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-default);
    }

    .terminal-input-wrapper .prompt {
        color: var(--accent);
        font-weight: bold;
    }

    .terminal-input {
        flex: 1;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(229, 160, 13, 0.3);
        color: var(--text-primary);
        font-family: inherit;
        font-size: inherit;
        outline: none;
        caret-color: var(--accent);
        padding: 0.25rem 0;
        border-radius: 0;
        width: auto;
    }

    .terminal-input:focus {
        border-bottom-color: var(--accent);
        box-shadow: none;
    }

    .terminal-input::placeholder {
        color: var(--status-stopped);
    }

    .terminal-input:disabled {
        opacity: 0.5;
    }

    .terminal-help {
        padding: 0.625rem 1.25rem;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-default);
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    .terminal-help p {
        margin: 0.2rem 0;
    }

    .terminal-help code {
        background: var(--bg-elevated);
        padding: 0.1rem 0.375rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        color: var(--accent);
    }

    .terminal-help kbd {
        background: var(--bg-elevated);
        padding: 0.1rem 0.4rem;
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
        font-family: inherit;
        font-size: 0.7rem;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SETTINGS PAGE
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .settings-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 1.5rem;
    }

    .settings-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .settings-header h1 {
        flex: 1;
        margin: 0;
    }

    .active-project-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.3rem 0.75rem;
        background: var(--accent-subtle);
        border: 1px solid rgba(229, 160, 13, 0.3);
        border-radius: var(--radius);
        font-size: 0.85rem;
        color: var(--accent);
    }

    .settings-section {
        margin-bottom: 1.5rem;
    }

    .settings-section h2 {
        margin-bottom: 0.875rem;
        font-size: 1.15rem;
        color: var(--accent);
        border-bottom: 1px solid var(--border-default);
        padding-bottom: 0.5rem;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.875rem;
    }

    .section-header h2 { margin: 0; }

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

    .settings-card {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
    }

    .setting-row {
        margin-bottom: 0.875rem;
    }

    .setting-row:last-child { margin-bottom: 0; }

    .setting-row.inline {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .setting-row.inline label {
        margin-bottom: 0;
        color: var(--text-primary);
        text-transform: none;
    }

    .setting-row.inline input { width: auto; }

    .setting-row .label {
        color: var(--text-secondary);
        font-size: 0.8125rem;
    }

    .projects-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .no-projects {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 2rem;
        text-align: center;
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }

    .no-projects p { margin: 0 0 0.5rem 0; }

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

    .settings-footer {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-default);
    }

    /* Project Editor */
    .project-editor {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        overflow: hidden;
    }

    .editor-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.875rem;
        cursor: pointer;
        transition: background-color 0.15s;
    }

    .editor-header:hover {
        background-color: rgba(229, 160, 13, 0.04);
    }

    .editor-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .editor-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .expand-icon {
        color: var(--text-secondary);
        margin-left: 0.5rem;
    }

    .editor-content {
        padding: 1rem;
        border-top: 1px solid var(--border-default);
        background-color: var(--bg-recessed);
    }

    .editor-summary {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }

    .summary-item {
        display: flex;
        gap: 0.5rem;
        font-size: 0.8125rem;
    }

    .summary-item .label {
        color: var(--text-secondary);
    }

    .project-type-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .project-type-badge.type-web     { background-color: rgba(66, 165, 245, 0.2); color: var(--status-building); }
    .project-type-badge.type-api     { background-color: rgba(0, 191, 165, 0.2); color: var(--status-online); }
    .project-type-badge.type-blazor  { background-color: rgba(229, 160, 13, 0.15); color: var(--accent); }
    .project-type-badge.type-worker  { background-color: rgba(229, 160, 13, 0.2); color: var(--accent); }
    .project-type-badge.type-console { background-color: var(--bg-elevated); color: var(--text-secondary); }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       SSH PAGE
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .ssh-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 1.5rem;
    }

    .ssh-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .ssh-header h1 {
        flex: 1;
        margin: 0;
    }

    .header-status {
        display: flex;
        align-items: center;
    }

    .sshd-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        padding: 0.3rem 0.625rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .sshd-status::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .sshd-status.online {
        background-color: rgba(0, 191, 165, 0.08);
        color: var(--status-online);
    }

    .sshd-status.online::before {
        background-color: var(--status-online);
        box-shadow: var(--glow-online);
        animation: status-glow 2s ease-in-out infinite;
    }

    .sshd-status.offline {
        background-color: rgba(244, 67, 54, 0.08);
        color: var(--status-danger);
    }

    .sshd-status.offline::before {
        background-color: var(--status-danger);
    }

    .ssh-section {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .ssh-section h2 {
        margin-bottom: 0.875rem;
        font-size: 1.15rem;
        color: var(--accent);
    }

    .ssh-section .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.875rem;
    }

    .ssh-section .section-header h2 { margin: 0; }

    .section-desc {
        color: var(--text-secondary);
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    /* Connection Card */
    .connection-card {
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        padding: 1rem;
        border: 1px solid var(--border-default);
    }

    .connection-grid {
        display: flex;
        gap: 2rem;
        flex-wrap: wrap;
        margin-bottom: 1rem;
    }

    .connection-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .connection-item .label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: var(--font-mono);
    }

    .connection-item .value {
        font-weight: 600;
        font-family: var(--font-mono);
        color: var(--text-primary);
    }

    .connection-command {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem 0.875rem;
        background-color: var(--bg-surface);
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
    }

    .connection-command code {
        flex: 1;
        font-family: var(--font-mono);
        font-size: 0.875rem;
        color: var(--accent);
    }

    /* Password Card */
    .password-card {
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        padding: 1rem;
        border: 1px solid var(--border-default);
    }

    .password-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 400px;
    }

    /* Keys Card */
    .keys-card {
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        padding: 1rem;
        border: 1px solid var(--border-default);
    }

    .no-keys {
        text-align: center;
        padding: 2rem 1rem;
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }

    .no-keys p { margin: 0; }

    .no-keys .hint {
        font-size: 0.8125rem;
        margin-top: 0.5rem;
    }

    .keys-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
    }

    .key-item {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 1rem;
        align-items: center;
        padding: 0.875rem;
        background-color: var(--bg-surface);
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
    }

    .key-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .key-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .key-type {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        background-color: var(--bg-elevated);
        border-radius: var(--radius);
        font-family: var(--font-mono);
        color: var(--accent);
    }

    .key-details {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .key-fingerprint {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--text-secondary);
    }

    .key-date {
        font-size: 0.7rem;
        color: var(--text-secondary);
    }

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

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       BUILD PAGE
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .build-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1.5rem;
    }

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

    .build-header .header-left {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .build-header h1 { margin: 0; }

    .build-section {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .build-section h2 {
        margin-bottom: 0.875rem;
        font-size: 1.15rem;
    }

    .build-section h3 {
        margin-top: 1.25rem;
        margin-bottom: 0.625rem;
        font-size: 0.9375rem;
        color: var(--text-secondary);
    }

    /* Docker Warning */
    .docker-warning {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        background: rgba(229, 160, 13, 0.06);
        border: 1px solid rgba(229, 160, 13, 0.3);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .docker-warning .warning-icon {
        font-size: 2rem;
        flex-shrink: 0;
        color: var(--accent);
    }

    .docker-warning .warning-content { flex: 1; }

    .docker-warning .warning-content strong {
        color: var(--accent);
        font-size: 1rem;
        display: block;
        margin-bottom: 0.5rem;
        font-family: var(--font-heading);
    }

    .docker-warning .warning-content p {
        margin: 0.5rem 0;
        color: var(--text-secondary);
    }

    .docker-warning .warning-content .hint { font-size: 0.875rem; }

    .docker-warning .warning-content code {
        display: inline-block;
        background: var(--bg-recessed);
        padding: 0.4rem 0.875rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        font-size: 0.8125rem;
        color: var(--accent);
        margin-top: 0.5rem;
        border: 1px solid var(--border-default);
    }

    .docker-warning button {
        flex-shrink: 0;
        align-self: center;
    }

    /* Registry Config */
    .registry-config {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .config-row {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .config-row .form-group {
        flex: 1;
        min-width: 200px;
    }

    .config-row .form-group.inline-check {
        flex: 0 0 auto;
        min-width: auto;
    }

    .registry-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.625rem;
        border-radius: var(--radius);
        font-size: 0.8125rem;
        width: fit-content;
        font-family: var(--font-mono);
    }

    .registry-status .status-dot { width: 8px; height: 8px; border-radius: 50%; }

    .registry-status.online {
        background-color: rgba(0, 191, 165, 0.08);
        color: var(--status-online);
    }

    .registry-status.online .status-dot {
        background-color: var(--status-online);
        box-shadow: var(--glow-online);
    }

    .registry-status.offline {
        background-color: rgba(244, 67, 54, 0.08);
        color: var(--status-danger);
    }

    .registry-status.offline .status-dot {
        background-color: var(--status-danger);
    }

    /* Build Mode Selector */
    .build-mode-selector {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .radio-option {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.875rem;
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
        flex: 1;
        min-width: 200px;
    }

    .radio-option:hover { border-color: var(--accent); }

    .radio-option.selected {
        border-color: var(--accent);
        background-color: var(--accent-subtle);
    }

    .radio-option input[type="radio"] { display: none; }

    .radio-label {
        font-weight: 600;
        color: var(--text-primary);
        font-family: var(--font-heading);
    }

    .radio-desc {
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }

    /* Projects Build List */
    .projects-build-list {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        margin-bottom: 1.25rem;
    }

    .project-build-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 1rem;
        align-items: center;
        padding: 0.875rem;
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
    }

    .project-build-item:hover { border-color: var(--accent); }

    .project-build-item.selected {
        border-color: var(--accent);
        background-color: var(--accent-subtle);
    }

    .project-build-info {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .project-build-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .project-build-details {
        display: flex;
        gap: 1rem;
        font-size: 0.75rem;
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }

    .project-image-name {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
    }

    .project-image-name .label { color: var(--text-secondary); }

    .project-image-name code {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        background-color: var(--bg-elevated);
        padding: 0.2rem 0.4rem;
        border-radius: var(--radius);
        color: var(--accent);
    }

    .build-actions {
        display: flex;
        justify-content: flex-end;
        gap: 1rem;
    }

    /* Build Progress */
    .build-progress-section { border-color: var(--accent); }

    .build-progress-list {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .build-progress-card {
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 0.875rem;
    }

    .build-progress-card.completed { border-color: var(--status-online); }
    .build-progress-card.failed    { border-color: var(--status-danger); }
    .build-progress-card.in-progress { border-color: var(--accent); }

    .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
    }

    .progress-name {
        font-weight: 600;
        color: var(--text-primary);
    }

    .progress-phase {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
        border-radius: var(--radius);
        background-color: var(--bg-elevated);
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .build-progress-card.completed .progress-phase  { background-color: rgba(0, 191, 165, 0.15); color: var(--status-online); }
    .build-progress-card.failed .progress-phase      { background-color: rgba(244, 67, 54, 0.15); color: var(--status-danger); }
    .build-progress-card.in-progress .progress-phase { background-color: var(--accent-subtle); color: var(--accent); }

    .progress-bar {
        height: 6px;
        background-color: var(--bg-elevated);
        border-radius: var(--radius);
        overflow: hidden;
        margin-bottom: 0.5rem;
    }

    .progress-fill {
        height: 100%;
        background-color: var(--accent);
        transition: width 0.3s ease;
    }

    .build-progress-card.completed .progress-fill { background-color: var(--status-online); }
    .build-progress-card.failed .progress-fill    { background-color: var(--status-danger); }

    .progress-details {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-bottom: 0.5rem;
        font-family: var(--font-mono);
    }

    .progress-log {
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        padding: 0.625rem;
        font-family: var(--font-mono);
        font-size: 0.7rem;
        max-height: 150px;
        overflow-y: auto;
        margin-top: 0.625rem;
        border: 1px solid var(--border-default);
    }

    .progress-log .log-line {
        padding: 0.1rem 0;
        word-break: break-all;
    }

    .progress-error {
        background-color: rgba(244, 67, 54, 0.08);
        border: 1px solid var(--status-danger);
        color: var(--status-danger);
        padding: 0.625rem;
        border-radius: var(--radius);
        font-size: 0.8125rem;
        margin-top: 0.625rem;
        font-family: var(--font-mono);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       IMAGE GROUPS
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .groups-list {
        display: flex;
        flex-direction: column;
        gap: 0.875rem;
    }

    .group-card {
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 0.875rem;
    }

    .group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
    }

    .group-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .group-icon { font-size: 1.25rem; }

    .group-name {
        font-weight: 600;
        font-size: 1rem;
        font-family: var(--font-heading);
        color: var(--text-primary);
    }

    .group-count {
        font-size: 0.75rem;
        color: var(--text-secondary);
        padding: 0.1rem 0.4rem;
        background-color: var(--bg-elevated);
        border-radius: var(--radius);
        font-family: var(--font-mono);
    }

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

    .group-projects {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        margin-bottom: 0.625rem;
    }

    .group-project-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.3rem 0.625rem;
        background-color: var(--bg-surface);
        border-radius: var(--radius);
        font-size: 0.8125rem;
        border: 1px solid var(--border-default);
    }

    .group-project-item .project-port {
        color: var(--text-secondary);
        font-size: 0.7rem;
        font-family: var(--font-mono);
    }

    .group-meta {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding-top: 0.625rem;
        border-top: 1px solid var(--border-default);
        font-size: 0.75rem;
    }

    .group-meta code {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--accent);
    }

    .group-meta .last-build { color: var(--text-secondary); }

    .no-groups {
        text-align: center;
        padding: 2rem;
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }

    .no-groups p { margin: 0; }
    .no-groups .hint { font-size: 0.8125rem; margin-top: 0.5rem; }

    .ungrouped-section {
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--border-default);
    }

    .ungrouped-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .ungrouped-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.625rem;
        background-color: var(--bg-surface);
        border-radius: var(--radius);
        font-size: 0.8125rem;
        border: 1px solid var(--border-default);
    }

    /* Group Editor Modal */
    .group-projects-editor {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 0.875rem;
    }

    .available-projects,
    .group-projects-selected {
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        padding: 0.875rem;
        border: 1px solid var(--border-default);
    }

    .available-projects h4,
    .group-projects-selected h4 {
        margin: 0 0 0.625rem 0;
        font-size: 0.8125rem;
        color: var(--text-secondary);
        font-family: var(--font-heading);
    }

    .project-selector-list {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        max-height: 300px;
        overflow-y: auto;
    }

    .project-selector-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.4rem 0.625rem;
        background-color: var(--bg-surface);
        border-radius: var(--radius);
        cursor: pointer;
        transition: background-color 0.15s;
        font-size: 0.8125rem;
        border: 1px solid var(--border-default);
    }

    .project-selector-item:hover {
        background-color: var(--accent-subtle);
        border-color: var(--accent);
    }

    .project-selector-item.selected {
        background-color: var(--accent-subtle);
        border-color: var(--accent);
    }

    .add-icon    { color: var(--status-online); font-weight: bold; }
    .remove-icon { color: var(--status-danger); font-weight: bold; }

    .no-available {
        text-align: center;
        padding: 0.875rem;
        color: var(--text-secondary);
        font-size: 0.8125rem;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       DISCOVERED PROJECTS
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .discovered-list {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-top: 0.875rem;
    }

    .discovered-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem;
        background-color: var(--bg-recessed);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        cursor: pointer;
        transition: border-color 0.2s, background-color 0.2s;
    }

    .discovered-item:hover:not(.already-added) {
        border-color: var(--accent);
    }

    .discovered-item.selected {
        border-color: var(--accent);
        background-color: var(--accent-subtle);
    }

    .discovered-item.already-added {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .discovered-info {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
    }

    .discovered-name {
        font-weight: 500;
        color: var(--text-primary);
    }

    .discovered-type {
        font-size: 0.65rem;
        padding: 0.15rem 0.35rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .discovered-type.type-web     { background-color: rgba(66, 165, 245, 0.2); color: var(--status-building); }
    .discovered-type.type-api     { background-color: rgba(0, 191, 165, 0.2); color: var(--status-online); }
    .discovered-type.type-blazor  { background-color: rgba(229, 160, 13, 0.15); color: var(--accent); }
    .discovered-type.type-worker  { background-color: rgba(229, 160, 13, 0.2); color: var(--accent); }
    .discovered-type.type-console { background-color: var(--bg-elevated); color: var(--text-secondary); }

    .discovered-port {
        font-size: 0.65rem;
        padding: 0.15rem 0.35rem;
        border-radius: var(--radius);
        background-color: rgba(0, 191, 165, 0.15);
        color: var(--status-online);
        font-family: var(--font-mono);
    }

    .discovered-port.undetected {
        background-color: var(--bg-elevated);
        color: var(--text-secondary);
        font-style: italic;
    }

    .discovered-path {
        color: var(--text-secondary);
        font-size: 0.7rem;
        font-family: var(--font-mono);
    }

    .already-added-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        background-color: var(--bg-elevated);
        border-radius: var(--radius);
        color: var(--text-secondary);
        font-family: var(--font-mono);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ENVIRONMENT VARIABLES EDITOR
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .env-vars-editor {
        margin-top: 0.875rem;
        padding-top: 0.875rem;
        border-top: 1px solid var(--border-default);
    }

    .env-vars-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
    }

    .env-vars-header span {
        font-weight: 500;
        color: var(--text-primary);
    }

    .no-vars {
        color: var(--text-secondary);
        font-size: 0.8125rem;
        padding: 0.5rem 0;
        font-family: var(--font-mono);
    }

    .env-vars-list {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-bottom: 0.875rem;
    }

    .env-var-row {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        gap: 0.375rem;
    }

    .env-var-row input {
        padding: 0.4rem 0.5rem;
        font-size: 0.8125rem;
        font-family: var(--font-mono);
    }

    .env-var-row input.invalid {
        border-color: var(--status-danger);
    }

    .common-presets {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border-default);
    }

    .preset-label {
        font-size: 0.7rem;
        color: var(--text-secondary);
        font-family: var(--font-mono);
        text-transform: uppercase;
    }

    .preset-btn {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
        background-color: var(--bg-elevated);
        border: 1px solid var(--border-default);
        color: var(--text-secondary);
    }

    .preset-btn:hover:not(:disabled) {
        border-color: var(--accent);
        color: var(--accent);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       HOSTNAME ROUTING
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .hostname-list {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        margin-top: 0.875rem;
    }

    .hostname-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
        padding: 0.625rem;
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        border: 1px solid var(--border-default);
    }

    .hostname-name {
        font-weight: 500;
        min-width: 120px;
        color: var(--text-primary);
    }

    .hostname-input {
        padding: 0.4rem 0.5rem;
        font-size: 0.8125rem;
        flex: 1;
        min-width: 150px;
        font-family: var(--font-mono);
    }

    .hostname-port {
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-family: var(--font-mono);
    }

    .routing-mode-select {
        padding: 0.35rem 0.4rem;
        font-size: 0.75rem;
        border-radius: var(--radius);
        background: var(--bg-elevated);
        border: 1px solid var(--border-default);
        color: var(--text-primary);
        width: 5.5rem;
    }

    .external-port-input {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.8125rem;
    }

    .external-port-input .port-label {
        color: var(--text-secondary);
        white-space: nowrap;
        font-family: var(--font-mono);
    }

    .external-port-input input[type="number"] {
        padding: 0.25rem 0.35rem;
        font-size: 0.75rem;
        width: 5rem;
        font-family: var(--font-mono);
    }

    .hostname-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-family: var(--font-mono);
    }

    .hostname-status.online   { color: var(--status-online); }
    .hostname-status.starting,
    .hostname-status.building { color: var(--status-building); }
    .hostname-status.stopping { color: var(--accent); }
    .hostname-status.failed   { color: var(--status-danger); }
    .hostname-status.offline  { color: var(--text-secondary); }

    .hostname-link { font-weight: 500; }

    /* Nginx Status */
    .nginx-status-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1.25rem;
        padding-top: 0.875rem;
        border-top: 1px solid var(--border-default);
    }

    .nginx-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .nginx-label {
        color: var(--text-secondary);
        font-family: var(--font-mono);
        font-size: 0.8125rem;
    }

    .nginx-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        font-family: var(--font-mono);
    }

    .nginx-status.online  { color: var(--status-online); }
    .nginx-status.offline { color: var(--status-danger); }

    .nginx-reload-time {
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-family: var(--font-mono);
    }

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

    .nginx-config-content {
        background-color: var(--bg-recessed);
        padding: 0.875rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
        max-height: 400px;
        overflow-y: auto;
        border: 1px solid var(--border-default);
        color: var(--text-primary);
    }

    /* Save & Commit */
    .save-card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .save-actions {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .save-action {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .save-action small {
        color: var(--text-secondary);
        font-size: 0.7rem;
        font-family: var(--font-mono);
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       API DOCUMENTATION
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .api-documentation-card {
        background-color: var(--bg-surface);
        border: 1px solid var(--border-default);
        border-radius: var(--radius);
        padding: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .api-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .api-header h2 {
        margin: 0;
        font-size: 1.15rem;
    }

    .api-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.4rem;
        background-color: var(--accent);
        color: var(--bg-base);
        border-radius: var(--radius);
        font-weight: 600;
        text-transform: uppercase;
        font-family: var(--font-mono);
    }

    .api-description {
        color: var(--text-secondary);
        margin-bottom: 0.875rem;
        font-size: 0.8125rem;
    }

    .api-auth-info {
        background-color: var(--bg-recessed);
        border-radius: var(--radius);
        padding: 0.875rem;
        margin-bottom: 0.875rem;
        border: 1px solid var(--border-default);
    }

    .api-auth-info h4 {
        margin: 0 0 0.375rem 0;
        font-size: 0.8125rem;
        color: var(--text-primary);
    }

    .api-auth-info p {
        margin: 0 0 0.375rem 0;
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

    .api-auth-info code {
        background-color: var(--bg-surface);
        padding: 0.2rem 0.4rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        font-size: 0.7rem;
        color: var(--accent);
    }

    .api-header-example { display: block; margin: 0.375rem 0; }

    .api-note {
        font-style: italic;
        color: var(--text-secondary);
        font-size: 0.7rem !important;
    }

    .api-endpoints-list h4 {
        margin: 0 0 0.625rem 0;
        font-size: 0.8125rem;
    }

    .api-endpoint-group { margin-bottom: 0.875rem; }

    .api-endpoint-group h5 {
        margin: 0 0 0.375rem 0;
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-family: var(--font-mono);
    }

    .api-endpoint {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.3rem 0;
        font-size: 0.75rem;
    }

    .api-endpoint .method {
        font-size: 0.6rem;
        font-weight: 700;
        padding: 0.15rem 0.35rem;
        border-radius: var(--radius);
        min-width: 36px;
        text-align: center;
        font-family: var(--font-mono);
    }

    .api-endpoint .method.get  { background-color: rgba(0, 191, 165, 0.2); color: var(--status-online); }
    .api-endpoint .method.post { background-color: rgba(66, 165, 245, 0.2); color: var(--status-building); }

    .api-endpoint code {
        font-family: var(--font-mono);
        color: var(--text-primary);
        font-size: 0.75rem;
    }

    .api-endpoint .desc {
        color: var(--text-secondary);
        font-size: 0.7rem;
    }

    .api-example {
        margin-top: 0.875rem;
        padding-top: 0.875rem;
        border-top: 1px solid var(--border-default);
    }

    .api-example h4 {
        margin: 0 0 0.375rem 0;
        font-size: 0.8125rem;
    }

    .api-curl {
        display: block;
        background-color: var(--bg-recessed);
        padding: 0.4rem 0.625rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        font-size: 0.7rem;
        overflow-x: auto;
        color: var(--accent);
        border: 1px solid var(--border-default);
    }

    .api-details {
        margin-top: 0.875rem;
        padding-top: 0.875rem;
        border-top: 1px solid var(--border-default);
    }

    .api-details h4 {
        margin: 0.875rem 0 0.375rem 0;
        font-size: 0.8125rem;
    }

    .api-details h4:first-child { margin-top: 0; }

    .api-params-table {
        width: 100%;
        font-size: 0.75rem;
        border-collapse: collapse;
    }

    .api-params-table td {
        padding: 0.3rem 0.375rem;
        border-bottom: 1px solid var(--border-default);
    }

    .api-params-table td:first-child { width: 100px; }

    .api-params-table code {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        background-color: var(--bg-recessed);
        padding: 0.1rem 0.3rem;
        border-radius: var(--radius);
        color: var(--accent);
    }

    .api-json {
        background-color: var(--bg-recessed);
        padding: 0.625rem;
        border-radius: var(--radius);
        font-family: var(--font-mono);
        font-size: 0.7rem;
        overflow-x: auto;
        white-space: pre;
        margin: 0;
        border: 1px solid var(--border-default);
        color: var(--text-primary);
    }

    .api-toggle-btn {
        margin-top: 0.875rem;
        background-color: var(--bg-elevated);
        border: 1px solid var(--border-default);
        color: var(--text-secondary);
        padding: 0.4rem 0.875rem;
        font-size: 0.8125rem;
    }

    .api-toggle-btn:hover:not(:disabled) {
        border-color: var(--accent);
        color: var(--accent);
        background-color: var(--accent-subtle);
    }
}

/* ============================================================
   LAYER: utilities
   ============================================================ */
@layer utilities {
    .mono { font-family: var(--font-mono); }
    .text-accent { color: var(--accent); }
    .text-muted { color: var(--text-secondary); }
    .text-danger { color: var(--status-danger); }
    .text-online { color: var(--status-online); }
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
}

/* ============================================================
   LAYER: animations
   ============================================================ */
@layer animations {
    /* Page reveal stagger */
    @keyframes deck-appear {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Status glow pulse for online indicators */
    @keyframes status-glow {
        0%, 100% {
            box-shadow: 0 0 4px rgba(0, 191, 165, 0.4);
        }
        50% {
            box-shadow: 0 0 8px rgba(0, 191, 165, 0.8);
        }
    }

    /* General pulse */
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    /* Spinner rotation */
    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    /* Terminal cursor blink */
    @keyframes cursor-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }

    /* Toast slide in */
    @keyframes toast-slide-in {
        from {
            transform: translateX(100%) scale(0.95);
            opacity: 0;
        }
        to {
            transform: translateX(0) scale(1);
            opacity: 1;
        }
    }

    /* Toast slide out */
    @keyframes toast-slide-out {
        from {
            transform: translateX(0) scale(1);
            opacity: 1;
        }
        to {
            transform: translateX(100%) scale(0.95);
            opacity: 0;
        }
    }

    /* Toast auto-dismiss progress */
    @keyframes toast-progress {
        from { width: 100%; }
        to { width: 0%; }
    }

    /* Modal entry */
    @keyframes modal-enter {
        from {
            opacity: 0;
            transform: scale(0.95);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ============================================================
   LAYER: utilities — Accessibility & Responsive
   ============================================================ */
@layer utilities {

    /* ── Skip Navigation ── */
    .skip-nav {
        position: absolute;
        top: -100%;
        left: 1rem;
        z-index: 10000;
        padding: 0.75rem 1.25rem;
        background: var(--accent);
        color: var(--bg-base);
        font-weight: 600;
        border-radius: var(--radius);
        text-decoration: none;
        transition: top 0.2s;
    }

    .skip-nav:focus {
        top: 1rem;
    }

    /* ── Status indicators — text labels alongside color dots ── */
    .project-status::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 0.375rem;
        vertical-align: middle;
    }

    .project-status.running::before { background-color: var(--status-online); }
    .project-status.failed::before { background-color: var(--status-danger); }
    .project-status.building::before { background-color: var(--status-building); }
    .project-status.starting::before, .project-status.stopping::before { background-color: var(--status-warning); }
    .project-status.stopped::before { background-color: var(--status-stopped); }

    /* ── Toast aria-live region ── */
    .toast-container {
        /* Already positioned fixed from components layer */
    }

    /* ── Reduced Motion ── */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }

        /* Remove scan-line effect entirely */
        body::before,
        body::after {
            display: none !important;
        }
    }

    /* ── Mobile Breakpoints ── */
    @media (max-width: 768px) {
        /* Force sidebar collapsed on mobile */
        .sidebar-expanded .deck-sidebar {
            width: 56px;
        }

        .sidebar-expanded .deck-main {
            margin-left: 56px;
        }

        .sidebar-expanded .brand-text,
        .sidebar-expanded .nav-label {
            opacity: 0;
        }

        /* Stack form rows */
        .form-row {
            grid-template-columns: 1fr !important;
        }

        /* Endpoint grid stacks */
        .endpoint-header,
        .endpoint-row {
            grid-template-columns: 1fr !important;
            gap: 0.375rem;
        }

        .endpoint-header {
            display: none;
        }

        .endpoint-col-url a {
            word-break: break-all;
            font-size: 0.75rem;
        }

        /* Connection grid stacks */
        .connection-grid {
            grid-template-columns: 1fr !important;
        }

        /* Modal full-width on mobile */
        .modal {
            max-width: calc(100vw - 2rem);
            margin: 1rem;
        }

        /* Toast narrower on mobile */
        .toast-container {
            max-width: calc(100vw - 2rem);
            right: 1rem;
            left: 1rem;
        }

        /* Command strip wraps */
        .command-strip {
            flex-wrap: wrap;
        }

        /* Projects grid single column */
        .projects-grid {
            grid-template-columns: 1fr !important;
        }

        /* Settings page sections */
        .settings-form .form-row,
        .config-grid {
            grid-template-columns: 1fr !important;
        }

        /* Dashboard header */
        .dashboard-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        /* General page padding */
        .dashboard-container,
        .terminal-container,
        .ssh-container,
        .settings-container,
        .build-container,
        .logs-container {
            padding: 1rem !important;
        }
    }

    @media (max-width: 480px) {
        /* Very small screens — hide sidebar entirely */
        .deck-sidebar {
            width: 0;
            border-right: none;
        }

        .deck-main {
            margin-left: 0 !important;
        }

        /* Show mobile menu toggle in top-right */
        .sidebar-expanded .deck-sidebar {
            width: 220px;
            position: fixed;
            z-index: 200;
            box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5);
        }

        .sidebar-expanded .deck-main {
            margin-left: 0;
        }

        /* Overlay for sidebar open state */
        .sidebar-expanded .deck-main::before {
            content: '';
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 150;
        }

        /* Command strip scrollable */
        .command-strip {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .cmd-btn {
            white-space: nowrap;
            flex-shrink: 0;
        }
    }
}