/* Re:Tint - Console design system
 * Tokens follow design_handoff_retintai_redesign/design-tokens.md.
 * Existing custom-property names retained for back-compat with inline style="..." in PHP. */

:root {
    /* Console surfaces */
    --bg:        #0e1012;   /* page background */
    --panel:     #15181b;   /* cards, sidebar, top bar, modal bodies, input fields */
    --panel-hi:  #191d22;   /* hover/focused panel, slightly lifted cards */
    --rule:      #23272d;   /* default 1px borders and dividers */
    --rule-hi:   #2e3239;   /* hover/focused border */

    /* Console text */
    --text:      #dde2e8;   /* body, headings, primary */
    --text-mid:  #9aa4ae;   /* secondary text, labels */
    --text-dim:  #5e676f;   /* captions, timestamps, placeholders */

    /* Console accent (used sparingly) */
    --accent:     #7ec5cb;  /* active nav, primary CTAs, focus rings, links */
    --accent-dim: rgba(126, 197, 203, 0.10);
    --accent-hover: #9bd3d8;

    /* Console status palette */
    --good:    #7ec48a;
    --warn:    #d7a44c;
    --bad:     #e07a72;
    --archive: #6b7077;
    --good-dim: rgba(126, 196, 138, 0.10);
    --warn-dim: rgba(215, 164, 76, 0.10);
    --bad-dim:  rgba(224, 122, 114, 0.10);

    /* Back-compat aliases (existing CSS still references these names) */
    --bg-primary:    var(--bg);
    --bg-secondary:  var(--panel);
    --bg-tertiary:   var(--panel-hi);
    --bg-input:      var(--panel);
    --bg-hover:      var(--panel-hi);
    --bg-other:      #666c63;
    --border:        var(--rule);
    --border-focus:  var(--rule-hi);
    --text-primary:   var(--text);
    --text-secondary: var(--text-mid);
    --text-muted:     var(--text-dim);
    --danger:         var(--bad);
    --danger-hover:   #ea918a;
    --success:        var(--good);

    /* Corners: zero on most surfaces (Console is intentionally square) */
    --radius:    0;
    --radius-lg: 0;

    /* Fonts */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Geist Mono", monospace;

    /* Motion */
    --transition: 100ms ease;
}

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

/* Enforce [hidden] over any display rule set by component classes (e.g. .btn sets inline-flex). */
[hidden] { display: none !important; }

html, body {
    height: 100%;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

/* ============================================
   AUTH PAGES (login, register, verify)
   ============================================ */

.auth-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
}

.auth-logo {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 8px;
}

.auth-logo span {
    color: var(--accent);
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 32px;
}

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

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-mid);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.form-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 13px;
    transition: border-color var(--transition);
    outline: none;
}

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

.form-input::placeholder {
    color: var(--text-dim);
}

/* Mono input for IDs, keys, and other monospaced data. */
input.form-input-key,
input[type="password"].form-input {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
}

.btn-primary {
    width: 100%;
    background: var(--accent);
    color: #fff;
}

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

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    padding: 8px 12px;
    font-size: 13px;
}

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

.btn-danger {
    background: var(--danger);
    color: #fff;
}

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

.alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 20px;
}

.alert-error {
    background: var(--bad-dim);
    border: 1px solid var(--bad);
    color: var(--bad);
}

.alert-success {
    background: var(--good-dim);
    border: 1px solid var(--good);
    color: var(--good);
}

.alert-info {
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    color: var(--text);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 13px;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--accent);
}

/* Password show/hide toggle */
.password-wrap {
    position: relative;
}

.password-wrap .form-input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 0;
    display: flex;
    align-items: center;
    transition: color var(--transition);
}

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

.password-toggle .icon-hide {
    display: none;
}

.password-toggle.shown .icon-show {
    display: none;
}

.password-toggle.shown .icon-hide {
    display: inline;
}

/* 2FA code input */
.code-input {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 24px;
    letter-spacing: 0.3em;
    padding: 14px;
}

/* ============================================
   APP SHELL + CHAT
   ============================================ */

.app-shell {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar */
.sidebar {
    width: 260px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-brand {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sidebar-brand span {
    color: var(--accent);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.sidebar-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-footer .user-info {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Conversation list items */
.convo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--transition);
    margin-bottom: 2px;
}

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

.convo-item.active {
    background: var(--accent-dim);
}

.convo-item .convo-title {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-item.active .convo-title {
    color: var(--text-primary);
}

.convo-item .convo-actions {
    display: none;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 8px;
}

.convo-item:hover .convo-actions {
    display: flex;
}

.convo-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 0;
    display: flex;
    align-items: center;
    transition: all var(--transition);
}

.convo-action-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.convo-action-btn.delete:hover {
    color: var(--danger);
}

/* Main content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
    position: relative;
}

.empty-icon {
    margin-bottom: 8px;
    opacity: 0.4;
}

.message {
    padding: 16px 24px;
    max-width: 800px;
    margin: 0 auto 8px;
    width: 100%;
}

.message-role {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.message.user .message-role {
    color: var(--accent);
}

.message.assistant .message-role {
    color: var(--success);
}

/* Message action buttons (edit/retry) */
.msg-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: 10px;
    opacity: 0;
    transition: opacity var(--transition);
}

.message:hover .msg-actions {
    opacity: 1;
}

.msg-action-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition);
}

.msg-action-btn:hover {
    color: var(--accent);
    background: var(--accent-dim);
}

/* Inline edit */
.edit-wrap {
    margin-top: 8px;
}

.edit-textarea {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.edit-btn-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.message-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

.message-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    margin-top: 10px;
}

.image-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2px;
}

.message-images img {
    max-width: 100%;
    max-height: 320px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color var(--transition);
    object-fit: contain;
    background: var(--bg-tertiary);
}

.message-images img:hover {
    border-color: var(--accent);
}

/* Loading indicator */
.message.loading .message-content::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    margin-left: 4px;
    animation: blink 1.2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 1; }
}

.input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    max-width: 800px;
    margin: 0 auto;
}

.upload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition);
    flex-shrink: 0;
}

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

.prompt-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    resize: none;
    outline: none;
    max-height: 150px;
    transition: border-color var(--transition);
}

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

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

.send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition);
}

.send-btn:hover:not(:disabled) {
    background: var(--accent-hover);
}

.send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Upload preview */
.upload-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 800px;
    margin: 0 auto 12px;
    padding: 0;
}

.upload-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}

.upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-thumb .remove-thumb {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Drop overlay */
.drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: var(--accent-dim);
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.drop-overlay.active {
    display: flex;
}

.drop-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--accent);
    font-size: 15px;
    font-weight: 500;
}

/* Image lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--radius);
}

/* ============================================
   SCROLLBAR
   ============================================ */

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-focus);
}

/* ============================================
   SETTINGS PAGE
   ============================================ */

/* Legacy /settings page wrapper (used by /settings/2fa-setup standalone too) */
.settings-wrapper {
    min-height: 100vh;
    background: var(--bg);
    padding: 28px 20px;
}

.settings-container {
    max-width: 1120px;
    margin: 0 auto;
}

.settings-header {
    margin-bottom: 22px;
}

.settings-header .btn-ghost {
    margin-bottom: 16px;
}

.settings-header .kicker { margin: 0 0 4px 0; }

.settings-title {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--text);
}

.settings-section {
    background: var(--panel);
    border: 1px solid var(--rule);
    padding: 22px 24px;
    margin-bottom: 14px;
}

.section-heading {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 16px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--rule);
    color: var(--text);
    letter-spacing: -0.005em;
}

.storage-bar {
    width: 100%;
    height: 12px;
    background: var(--bg-tertiary, #2a2a2a);
    border-radius: 0;
    overflow: hidden;
    margin: 8px 0;
}

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

.storage-bar-fill.storage-bar-warning {
    background: #d99a00;
}

.storage-warning {
    color: #d99a00;
    margin-top: 8px;
}

.form-hint {
    font-size: 11px;
    color: var(--text-mid);
    margin-top: 6px;
    margin-bottom: 6px;
    line-height: 1.5;
}

.form-hint a {
    color: var(--accent);
}

.drive-import-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
    padding: 5px 0 5px 20px;
    border-bottom: 1px solid var(--border);
}

.form-static-value {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 8px;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    color: var(--text);
    margin: 0;
    user-select: all;
    word-break: break-all;
}

.form-divider {
    height: 1px;
    background: var(--border);
    margin: 24px 0;
}

.btn-sm {
    width: auto;
    padding: 8px 20px;
    font-size: 13px;
}

.btn-xs {
    padding: 4px 10px;
    font-size: 12px;
}
button.btn.btn-ghost.btn-xs {
    color: var(--danger);
}
.btn-text-danger {
    color: var(--danger);
}

.btn-text-danger:hover {
    color: var(--danger-hover);
    background: var(--bad-dim);
}

.key-toggle {
    margin-top: 6px;
}

.text-muted {
    color: var(--text-muted);
    font-size: 13px;
}

/* Conversation management table */
.convo-table {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.convo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: var(--radius);
    transition: background var(--transition);
}

.convo-row:hover {
    background: var(--bg-hover);
}

.convo-row.archived {
    opacity: 0.6;
}

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

.convo-row-title {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.convo-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.convo-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: 12px;
}

.badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
}

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

/* Drive status */
.drive-status {
    padding-top: 4px;
}

.drive-connected, .drive-disconnected {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    font-weight: 400;
    border: 1px solid var(--rule);
    background: var(--panel-hi);
}
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.status-connected {
    color: var(--good);
    border-color: var(--good);
}
.status-disconnected {
    color: var(--bad);
    border-color: var(--bad);
}

.code-inline {
    display: inline-block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-secondary);
    word-break: break-all;
    margin-top: 4px;
}

/* Send to Drive button on images */
.drive-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 11px;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 4px;
}

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

.drive-btn.sent {
    color: var(--success);
    border-color: var(--success);
    cursor: default;
}

.drive-btn-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition);
    margin-top: 10px;
}

.drive-btn-all:hover:not(.sent):not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--accent-dim);
}

.drive-btn-all.sent {
    color: var(--success);
    border-color: var(--success);
    cursor: default;
}

/* Drive input button (next to upload button) */
.drive-input-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text-muted);
    transition: all var(--transition);
    flex-shrink: 0;
}

.drive-input-btn:hover:not(.disabled) {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.drive-input-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Drive browser modal */
.drive-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.drive-modal-content {
    width: 100%;
    max-width: 960px;
    height: 80vh;
    max-height: 720px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.drive-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}

.drive-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.drive-breadcrumb .crumb {
    cursor: pointer;
    color: var(--accent);
    transition: color var(--transition);
}

.drive-breadcrumb .crumb:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.drive-breadcrumb .crumb.current {
    color: var(--text-primary);
    cursor: default;
}

.drive-breadcrumb .crumb.current:hover {
    text-decoration: none;
}

.drive-breadcrumb .separator {
    color: var(--text-muted);
}

.drive-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

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

.drive-modal-search {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.drive-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.drive-loading, .drive-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 14px;
}

.drive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.drive-item {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-tertiary);
    transition: all var(--transition);
}

.drive-item:hover {
    border-color: var(--border-focus);
}

.drive-item.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.drive-item.folder {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    color: var(--text-secondary);
}

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

.drive-item.folder svg {
    opacity: 0.7;
}

.drive-item .item-name {
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.drive-item.image {
    aspect-ratio: 1;
}

.drive-item.image .thumb-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.drive-item.image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.drive-item.image .image-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drive-item .check-mark {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.drive-item.selected .check-mark {
    display: flex;
}

.drive-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-top: 1px solid var(--border);
}

.drive-selection-count {
    font-size: 13px;
    color: var(--text-muted);
}

.sidebar.sidebar-right {
    border-right: none;
    border-left: 1px solid var(--border);
}

.sidebar-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* ============================================
   LEFT NAVIGATION (shared across pages)
   ============================================ */

/* ============================================
   LEFT NAV (Console 56px icon-only sidebar)
   ============================================ */
.left-nav {
    width: 56px;
    background: var(--panel);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
}

.left-nav-brand {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text);
    border-bottom: 1px solid var(--rule);
}
/* Hide the "AI" span in the brand on icon-only sidebar */
.left-nav-brand span { display: none; }

.left-nav-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 0;
    width: 100%;
}

/* In Console, the middle block (filters / detail-actions) lives in the
 * top bar / detail header, not in the left nav. Hide if present so existing
 * pages that still emit the block don't break the layout. */
.left-nav-middle { display: none; }

.nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 0;
    color: var(--text-mid);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    position: relative;
}
.nav-item:hover {
    background: var(--panel-hi);
    color: var(--text);
}
.nav-item.active {
    background: var(--accent-dim);
    color: var(--accent);
}
/* Hide the text label in icon-only sidebar - browser tooltip from title= handles label */
.nav-item > span:not(.gemini-health-nav-dot) {
    display: none;
}

.left-nav-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    width: 100%;
}

.nav-item.logout {
    color: var(--text-mid);
}
.nav-item.logout:hover {
    background: var(--panel-hi);
    color: var(--bad);
}

/* gemini health dot footer item (anchored bottom; existing #gemini-health-nav-dot
 * span placement is updated by the JS) */
.gemini-health-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
    display: inline-block;
}
.gemini-health-nav-dot.good { background: var(--good); }
.gemini-health-nav-dot.warn { background: var(--warn); }
.gemini-health-nav-dot.bad  { background: var(--bad); }

/* ============================================
   JOBS PAGE
   ============================================ */

.jobs-content {
    overflow-y: auto;
    padding: 0 32px 28px 32px;
}

.jobs-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.jobs-header h1 {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.storage-indicator {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.85em;
}

.storage-bar-mini {
    width: 160px;
    height: 6px;
    border-radius: 0;
    background: #444444;
    overflow: hidden;
    position: relative;
}

.storage-bar-mini-fill {
    height: 100%;
    background: #00a207;
    transition: width 0.3s ease-out, background-color 0.2s ease-out;
}

.storage-bar-mini-fill.storage-bar-mini-warn {
    background: #ff9800;
}

.storage-banner {
    background: #4a3a1a;
    color: var(--text);
    border: 1px solid #8a6a2a;
    border-radius: 0;
    padding: 10px 14px;
    margin: 0 0 12px;
    font-size: 0.9em;
}

/* Console jobs controls: horizontal topbar (was vertical in legacy left-rail). */
.jobs-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 1;
}

.jobs-controls-item {
    padding: 0;
}

.jobs-controls-item--push-right { margin-left: auto; }

.jobs-search {
    min-width: 320px;
}

.jobs-select {
    min-width: 130px;
    max-width: 100%;
}

select.jobs-select[multiple] {
    min-height: 38px;
    height: 128px;
    padding: 8px 10px;
}

/* Status filter chips, horizontal. Old vertical-stack styling is replaced. */
.status-checkboxes {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0;
}

.status-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 11px;
    color: var(--text-mid);
    background: transparent;
    border: none;
    transition: background var(--transition), color var(--transition);
    user-select: none;
}

.status-check + .status-check {
    border-left: 1px solid var(--rule);
}

.status-check:hover {
    background: var(--panel-hi);
    color: var(--text);
}

.status-checkboxes .status-check:last-child {
    border-right: none;
}

.status-check input[type="checkbox"] {
    display: none;
}

.status-check::before {
    content: '';
    width: 13px;
    height: 13px;
    border-radius: 0;
    border: 1.5px solid var(--border-focus);
    flex-shrink: 0;
    transition: all var(--transition);
}

.status-check:has(input:checked) { color: var(--text-secondary); }
.status-check.pending:has(input:checked)::before   { background: var(--text-muted);    border-color: var(--text-muted); }
.status-check.processing:has(input:checked)::before { background: var(--accent);        border-color: var(--accent); }
.status-check.completed:has(input:checked)::before  { background: var(--success);       border-color: var(--success); }
.status-check.failed:has(input:checked)::before     { background: var(--danger);        border-color: var(--danger); }
.status-check.archived:has(input:checked)::before   { background: var(--border-focus);  border-color: var(--border-focus); }
.status-check.stopped:has(input:checked)::before    { background: var(--archive);              border-color: var(--archive); }
.status-check.draft:has(input:checked)::before      { background: var(--text-mid);              border-color: var(--text-mid); }

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Console rows share borders; no gap between them */
}

.jobs-loading,
.jobs-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 20px;
    font-size: 14px;
}

.job-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 16px;
}

.task-output-wrap {
    display: block;
    width: 100%;
}

/* Console: status is shown via .status mark glyph + colour, never a thick left bar.
 * Archived rows retain the dim treatment. */
.job-card.status-archived { opacity: 0.7; }

.job-card-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 12px;
    font-size: 13px;
}

.job-row-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    cursor: pointer;
    border-radius: var(--radius);
    padding: 3px 6px;
    margin: -3px -6px;
}

.job-row-left:hover {
    background: rgba(255, 255, 255, 0.05);
}

.job-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-folder-name {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 260px;
    max-width: 340px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-task-count {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 0 4px;
    flex-shrink: 0;
}

.job-prompt-short {
    flex: 1;
    color: var(--text-secondary);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-swatch-thumb {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 0;
    border: 1px solid var(--border);
}

.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.status-pill.status-pending    { color: var(--text-mid); }
.status-pill.status-processing { color: var(--warn); }
.status-pill.status-completed  { color: var(--good); }
.status-pill.status-failed     { color: var(--bad); }
.status-pill.status-archived   { color: var(--archive); }
.status-pill.status-stopped    { color: var(--archive); }
.status-pill.status-stopping   { color: var(--warn); }
.status-pill.status-draft      { color: var(--text-mid); }

.job-card-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.job-error {
    background: var(--bad-dim);
    border: 1px solid var(--bad);
    color: var(--bad);
    padding: 8px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    margin-bottom: 10px;
    word-break: break-word;
}

.job-full-prompt {
    background: var(--bg-tertiary);
    padding: 10px 12px;
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.job-tasks {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.task-row {
    display: block;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
}

.task-label {
    color: var(--text-secondary);
    font-size: 12px;
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-model-used {
    color: var(--text-muted);
    font-size: 11px;
    padding: 0 10px 6px 10px;
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Grid wrapper: two equal columns for input + output */
.task-thumbnail-list {
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 8px;
    padding: 0 10px;
    align-items: center;
}

/* Each thumb cell */
.task-thumbnails {
    display: block;
    width: 100%;
}

/* Images fill their cell with square aspect ratio */
.task-thumb {
    width: 100%;
    height: auto;
    border-radius: 0;
    border: 1px solid var(--border);
}

.task-thumb-placeholder {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
}

.task-output-wrap > .task-thumb,
.task-output-wrap > .task-thumb-placeholder {
    width: 100%;
}

/* Action row: status pill + buttons */
.task-action-list {
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.task-error {
    color: var(--bad);
    font-size: 11px;
    width: 100%;
    word-break: break-word;
}

.task-error a,
.job-error a {
    color: var(--accent);
    text-decoration: underline;
}

.task-error a:hover,
.job-error a:hover {
    opacity: 0.8;
}

.jobs-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

.page-indicator {
    font-size: 12px;
    color: var(--text-muted);
}

/* ============================================
   ONBOARDING WIZARD
   ============================================ */

.onboarding-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 40px 20px;
}

.onboarding-card {
    width: 100%;
    max-width: 600px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.onboarding-brand {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 32px;
}

.onboarding-brand span {
    color: var(--accent);
}

.onboarding-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 40px;
}

.onboarding-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border-focus);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-primary);
    transition: all var(--transition);
}

.onboarding-step.active .step-dot {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.onboarding-step.done .step-dot {
    border-color: var(--success);
    color: var(--success);
    background: var(--good-dim);
}

.step-label {
    font-size: 10.5px;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.onboarding-step.active .step-label,
.onboarding-step.done .step-label {
    color: var(--text-secondary);
}

.step-connector {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 13px 6px 0;
    transition: background var(--transition);
}

.step-connector.filled {
    background: var(--success);
}

.onboarding-step-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.onboarding-description {
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Numbered instruction steps */
.setup-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.setup-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.setup-step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-top: 2px;
}

.setup-step-body {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.setup-step-body a { color: var(--accent); }
.setup-step-body strong { color: var(--text-primary); font-weight: 500; }

.inline-code {
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 2px 6px;
    color: var(--text-primary);
    word-break: break-all;
}

/* Choice option cards */
.onboarding-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.onboarding-option {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition);
    color: var(--text-primary);
    font-family: var(--font-sans);
}

.onboarding-option:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.onboarding-option-muted {
    background: transparent;
}

.onboarding-option-muted:hover {
    border-color: var(--border-focus);
    background: var(--bg-hover);
}

.option-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.option-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* TOTP setup */
.totp-setup {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 20px;
}

.totp-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.totp-secret {
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: 0.12em;
    word-break: break-all;
    margin-bottom: 8px;
    user-select: all;
}

.totp-hint {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 10px;
    line-height: 1.5;
}

.totp-uri {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    word-break: break-all;
    user-select: all;
    margin-top: 6px;
}

.totp-qr {
    display: block;
    width: 180px;
    height: 180px;
    border-radius: var(--radius);
    background: #fff;
    padding: 8px;
}

/* Footer links */
.onboarding-footer-links {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.onboarding-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Reminder page */
.onboarding-remind-card {
    max-width: 520px;
}

.remind-heading {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 8px;
}

.remind-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 10px;
}

.remind-section-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.remind-section-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

/* ============================================
   MOBILE BOTTOM NAV + RIGHT DRAWER
   (FAB + backdrop + close button shown on mobile via media query)
   ============================================ */

.mobile-nav {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    z-index: 100;
}

.sidebar-fab {
    display: none;
    position: fixed;
    bottom: 72px;
    right: 14px;
    z-index: 90;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 9px 16px;
    color: var(--text-primary);
    cursor: pointer;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

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

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.sidebar-close {
    display: none;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 0;
    margin-left: auto;
    align-items: center;
}

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

.mobile-nav-brand {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-nav-brand span {
    color: var(--accent);
}

.mobile-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10.5px;
    transition: color var(--transition);
}

.mobile-nav-item:hover {
    color: var(--text-secondary);
}

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

/* ============================================
   RECENT PROMPTS CHIP LIST
   ============================================ */

.prompt-recent {
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.prompt-recent-label {
    color: var(--text-muted);
    font-size: 0.85em;
    flex-shrink: 0;
    margin-top: 6px;
}

.prompt-recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.prompt-recent-chip {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.85em;
    cursor: pointer;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease-out;
    font-family: var(--font-sans);
}

.prompt-recent-chip:hover {
    background: var(--bg-hover);
}

.prompt-recent-chip:active {
    background: var(--accent);
    color: #fff;
}

/* ============================================
   MANUAL JOB MODAL
   ============================================ */

.manual-job-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    pointer-events: none;
}
.manual-job-modal.open {
    pointer-events: auto;
}

.manual-job-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 250ms ease-out;
}
.manual-job-modal.open .manual-job-modal-backdrop {
    opacity: 1;
}

.manual-job-modal-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(25vw - 260px);
    right: 0;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 250ms ease-out;
    overflow-y: auto;
    padding: 24px 32px;
}
.manual-job-modal.open .manual-job-modal-panel {
    transform: translateX(0);
}

.manual-job-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}
.manual-job-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}
.manual-job-modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius);
    transition: color 150ms ease, background 150ms ease;
}
.manual-job-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.manual-job-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease;
    color: var(--text-secondary);
    font-size: 14px;
}
.manual-job-dropzone p { margin: 0; }
.manual-job-dropzone.dragover {
    border-color: var(--accent);
    background: var(--accent-dim);
}
.manual-job-dropzone:hover {
    border-color: var(--text-secondary);
}

.manual-job-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.manual-job-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.manual-job-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.manual-job-thumb .thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.manual-job-form-error {
    background: var(--bad-dim);
    border: 1px solid var(--bad);
    color: var(--bad);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin-top: 12px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}

.form-hint-inline {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: left;
}
.btn-manual-job {
    width: 33%;
}
#manual-job-cancel,
#edit-job-cancel,
#dialog-cancel {
    background: #b43a3a;
    color: #fff;
}
#dialog-ok-secondary,
#open-drive-picker,
#manual-job-submit-draft,
#edit-job-submit-draft {
    background: #272626;
    color: #fff;
}

#btn-stop-all {
    background: #aa3838;
    color: #fff;
}

#btn-stop-all:hover,
#open-drive-picker:hover,
#manual-job-submit-draft:hover,
#edit-job-submit-draft:hover {
    background: #636363;
}
#btn-add-job,
#btn-stop-all {
    text-align: center;
    padding: 10px 20px;
}
#dialog-cancel {
    width: 20%;
}
#dialog-ok-secondary,
#dialog-ok {
    width: 40%;
}
.auth-shell button.btn {
    text-align: center;
}
form.members-invite-form {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    align-items: center;
}
.member-row td {
    position: relative;
}


@media (max-width: 768px) {
    .manual-job-modal-panel {
        left: 0;
    }
}

/* Edit modal additions */
.edit-notice {
    background: var(--accent-dim);
    border: 1px solid var(--accent-dim);
    color: var(--text-secondary);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    margin: 0 0 4px;
}

.edit-job-swatch-existing {
    margin-bottom: 8px;
    width: 96px;
}

.task-thumb-existing.removed {
    opacity: 0.35;
}

.task-thumb-existing.removed img {
    filter: grayscale(60%);
}

.task-thumb-existing.removed .thumb-remove {
    background: var(--bad-dim);
}

.thumb-label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80px;
    margin-top: 4px;
}

/* ============================================
   JOBS LIST HEADER / BULK CONTROLS
   ============================================ */

.job-select {
    display: inline-flex;
    align-items: center;
    padding: 0 4px 0 0;
    cursor: pointer;
}
.job-select-checkbox {
    cursor: pointer;
}

.jobs-list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 12px;
    border: none;
}

.jobs-list-header .bulk-spacer { flex: 1; }
.jobs-list-header .bulk-count { color: var(--text-muted); font-size: 0.875rem; }
.jobs-list-header .bulk-action[disabled] { opacity: 0.4; cursor: not-allowed; }

.jobs-select-all {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.jobs-select-all-checkbox {
    cursor: pointer;
}

.jobs-select-all-caret {
    background: none;
    border: none;
    padding: 0 4px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.75em;
    line-height: 1;
}

.jobs-select-all-caret:hover {
    color: var(--text-primary);
}

.jobs-select-all-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    min-width: 200px;
    padding: 4px 0;
}

.jobs-select-all-option {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.jobs-select-all-option:hover {
    background: rgba(255,255,255,0.06);
}

.form-group.drive-sync-toggle .toggle-row,
.form-group.drive-sync-as-drafts-toggle .toggle-row {
    display: grid;
    grid-template-columns: 50% 30% 20%
}

.onboarding-body button.btn.btn-ghost.btn-sm {
    display: block;
    width: 100%;
    padding: 16px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Nav: swap left rail for fixed bottom bar */
    .left-nav { display: none; }
    .mobile-nav { display: flex; }

    /* Right side panel becomes a slide-in drawer */
    .sidebar.sidebar-right {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        z-index: 200;
        transform: translateX(100%);
        transition: transform var(--transition);
        border-left: 1px solid var(--border);
        border-right: none;
        background: var(--bg-secondary);
    }

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

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

    .sidebar-fab {
        display: inline-flex;
    }

    .sidebar-close {
        display: inline-flex;
    }

    /* Main content gets clearance for the fixed bottom nav */
    /* Jobs page */
    .jobs-content {
        padding: 20px 14px 0;
    }
    .jobs-header h1 {
        font-size: 19px;
    }
    .job-card {
        padding: 12px;
    }
    .job-card-row {
        grid-template-columns: 1fr;
        gap: 6px 0;
    }
    .job-row-left {
        margin: -3px -3px;
        padding: 3px 3px;
    }
    .job-folder-name {
        min-width: 0;
        max-width: 100%;
        width: 50%;
    }
    .job-prompt-short {
        flex: 1 1 100%;
    }

    /* Settings page */
    .settings-wrapper {
        padding: 24px 14px;
    }
    .settings-title {
        font-size: 20px;
    }
    .settings-container {
        max-width: 100%;
    }
    .settings-section {
        padding: 20px;
    }
    .convo-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .convo-row-actions {
        margin-left: 0;
    }

    /* Auth + onboarding */
    .auth-card {
        padding: 32px 24px;
    }
    .onboarding-wrapper {
        padding: 16px;
    }
    .onboarding-card {
        padding: 28px 20px;
    }
    .onboarding-steps {
        margin-bottom: 24px;
    }
    .step-label {
        font-size: 9.5px;
    }
    .main-content {
        padding-bottom: 120px;
    }
}

/* ============================================
   ERROR PAGES
   ============================================ */

/* Console error pages (Phase 14): huge code number, kicker, title, body,
 * request-id footer, two CTAs. */
.error-page {
    display: grid;
    place-items: center;
    min-height: 70vh;
    padding: 40px 24px;
}

.error-page-inner {
    max-width: 540px;
    text-align: left;
    display: grid;
    gap: 12px;
}

.error-status {
    font-family: var(--font-mono);
    font-size: 96px;
    font-weight: 400;
    color: var(--text-dim);
    margin: 0;
    line-height: 1;
    letter-spacing: 0.04em;
}

.error-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0;
}

.error-title {
    font-size: 22px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}

.error-body {
    color: var(--text-mid);
    line-height: 1.6;
    margin: 0;
    font-size: 13px;
}

.error-actions {
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;
}

.error-request-id {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
}

/* Kind tinting via left border on the error block. */
.error-page--bad .error-status { color: var(--bad); }
.error-page--warn .error-status { color: var(--warn); }
.error-page--archive .error-status { color: var(--archive); }

/* Static error pages (no left-nav) need to fill the whole viewport */
.error-static-body {
    margin: 0;
    background: var(--bg-primary, #0a0a0a);
    color: var(--text-primary, #f3f4f6);
    font-family: var(--font-sans, system-ui, sans-serif);
    min-height: 100vh;
}

.error-page-static {
    /* Override .error-page min-height: 70vh since there's no nav */
    min-height: 100vh;
}

main.error-page.error-page-static {
    max-width: 600px;
    display: block;
    position: relative;
    margin: 0 auto;
    text-align: center;
    padding: 100px;
}


/* ============ WIKI ============ */
.wiki-main {
    overflow-y: auto;
    padding: 32px 40px;
}

.wiki-content {
    max-width: 100%;
    margin: 0 auto;
}

.wiki-content h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.wiki-content h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 36px 0 12px;
    color: var(--text-primary);
    scroll-margin-top: 24px;
}

.wiki-content h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 24px 0 10px;
    color: var(--text-primary);
    scroll-margin-top: 24px;
}

.wiki-content p {
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.wiki-content ul,
.wiki-content ol {
    line-height: 1.7;
    color: var(--text-secondary);
    padding-left: 24px;
    margin-bottom: 16px;
}

.wiki-content li {
    margin-bottom: 4px;
}

.wiki-content code {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.88em;
    color: var(--text-primary);
}

.wiki-content pre {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    padding: 16px;
    border-radius: 0;
    overflow-x: auto;
    margin: 16px 0;
}

.wiki-content pre code {
    background: transparent;
    padding: 0;
    font-size: 0.875em;
}

.wiki-content blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 16px;
    margin: 16px 0;
    color: var(--text-secondary);
    font-style: italic;
}

.wiki-content a {
    color: var(--accent);
    text-decoration: underline;
}

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

.wiki-content img {
    max-width: 100%;
    border-radius: 0;
    margin: 16px 0;
    display: block;
}

.wiki-screenshot-placeholder {
    background: rgba(251, 146, 60, 0.08);
    border: 2px dashed rgba(251, 146, 60, 0.45);
    color: rgba(251, 146, 60, 0.85);
    padding: 32px;
    text-align: center;
    border-radius: 0;
    margin: 16px 0;
    font-family: var(--font-mono);
    font-size: 0.85em;
}

.wiki-right {
    overflow-y: auto;
}

.wiki-right .sidebar-content {
    padding: 20px;
}

.wiki-pages h3,
.wiki-toc h3 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.wiki-pages ul,
.wiki-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiki-pages li,
.wiki-toc li {
    margin-bottom: 2px;
}

.wiki-pages a,
.wiki-toc a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    display: block;
    padding: 4px 8px;
    border-radius: 0;
    line-height: 1.4;
    transition: all var(--transition);
}

.wiki-pages a:hover,
.wiki-toc a:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.wiki-pages a.active {
    color: var(--accent);
    background: var(--accent-dim);
}

.wiki-toc {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.wiki-toc ul ul {
    padding-left: 12px;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .wiki-main {
        padding: 20px 16px;
    }

    .wiki-right {
        display: none;
    }
}

/* ============================================================
   JOB DETAIL PAGE
   ============================================================ */

.job-detail-main {
    padding: 24px 28px;
}

.job-detail-back {
    margin-bottom: 20px;
}

.job-detail-header {
    margin-bottom: 28px;
}

.job-detail-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 10px 0;
}

.job-detail-prompt {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.job-detail-tasks-heading {
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.job-detail-tasks-heading h2 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0;
}

.detail-task-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.detail-task-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.detail-task-img-cell {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.detail-task-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: zoom-in;
    display: block;
}

.detail-task-img:hover {
    opacity: 0.85;
}

.detail-task-img-placeholder {
    color: var(--text-muted);
    font-size: 12px;
    text-align: center;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.detail-task-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}

.detail-task-filename {
    color: var(--text-secondary);
    word-break: break-all;
    min-width: 0;
}

.detail-task-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.detail-task-error {
    margin-top: 10px;
}

/* Console job detail layout (Phase 4). The legacy .job-detail-toolbar from
 * Phase 3a is retired; its contents are reflowed into the breadcrumb header
 * (actions) and the summary band (swatch + status). */
.job-detail-toolbar { display: none; }

.detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--rule);
    margin-bottom: 12px;
    font-size: 12px;
}
.detail-breadcrumb__back {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mid);
    text-decoration: none;
    transition: color var(--transition);
}
.detail-breadcrumb__back:hover { color: var(--accent); }
.detail-breadcrumb__sep {
    color: var(--text-dim);
    margin: 0 2px;
}
.detail-breadcrumb__title {
    flex: 1;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.detail-breadcrumb__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid var(--rule);
    padding-left: 16px;
}
.detail-breadcrumb__actions .job-detail-actions {
    display: inline-flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0;
}

/* 3-col summary band. Collapses to 1-col on narrow viewports. */
.detail-summary {
    display: grid;
    grid-template-columns: 160px auto 420px 120px;
    gap: 16px;
    padding: 16px;
    background: var(--panel);
    border: 1px solid var(--rule);
    margin-bottom: 12px;
}
@media (max-width: 900px) {
    .detail-summary { grid-template-columns: 1fr; }
}

.detail-summary__swatch {
    width: 160px;
    height: 160px;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.detail-summary__swatch img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}
.detail-summary__swatch-content {
    text-align: center;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 10px;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
}

.detail-summary__main { min-width: 0; }
.detail-summary__title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.2;
    word-break: break-word;
}
.detail-summary__prompt {
    margin: 0 0 12px 0;
    color: var(--text-mid);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 8em;
    overflow: auto;
}
.detail-summary__meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    margin: 0;
}
.detail-summary__meta dt {
    align-self: center;
    margin: 0;
}
.detail-summary__meta dd {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
}

.detail-summary__progress {
    border-left: 1px solid var(--rule);
    padding-left: 16px;
}
.detail-summary__progress-card {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 12px;
    margin-top: 8px;
}
.detail-progress__row {
    display: contents;
}
.detail-progress__key {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    align-self: center;
}
.detail-progress__val {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
    text-align: right;
}

/* All-failed banner */
.detail-all-failed-banner {
    padding: 12px 16px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--bad);
    margin-bottom: 12px;
}
.detail-all-failed-banner__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.detail-all-failed-banner__actions {
    display: inline-flex;
    gap: 6px;
}
.detail-all-failed-banner__diagnosis {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mid);
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
}
.detail-all-failed-banner__diagnosis .key { color: var(--text-dim); }
.detail-all-failed-banner__diagnosis .val { color: var(--text); text-align: right; }

/* Tasks list */
.detail-tasks-section {
    background: transparent;
    border: none;
}
.detail-tasks-heading {
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule);
}
.detail-tasks { display: flex; flex-direction: column; }
.detail-task-row + .detail-task-row {
    border-top: 1px solid var(--rule);
}

/* Keep .job-detail-actions usable for legacy DOM (it sits inside the breadcrumb actions slot). */
.job-detail-actions {
    display: inline-flex;
    flex-direction: row;
    gap: 6px;
    flex-wrap: wrap;
}
/* Compress action buttons inside the breadcrumb header. */
.detail-breadcrumb__actions .btn,
.job-detail-actions .btn {
    padding: 4px 10px;
    font-size: 11px;
}

/* Lightbox gallery (Phase 111) */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: stretch;
}

.lightbox-overlay.lightbox-hidden {
    display: none;
}

.lightbox-stage {
    display: grid;
    place-items: center;
    overflow: hidden;
    overflow-y: auto;
    padding: 24px 80px;
}

.lightbox-overlay img#lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.lightbox-close {
    position: fixed;
    top: 14px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    opacity: 0.8;
}

.lightbox-close:hover {
    opacity: 1;
}

.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 40px;
    line-height: 1;
    width: 48px;
    height: 64px;
    cursor: pointer;
    z-index: 1001;
    opacity: 0.6;
    transition: opacity 120ms ease, background 120ms ease;
    display: grid;
    place-items: center;
    user-select: none;
}

.lightbox-nav:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-nav--prev { left: 16px; }
.lightbox-nav--next { right: 16px; }

.lightbox-thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
    justify-content: safe center;
    min-height: 80px;
}

.lightbox-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    overflow: hidden;
    border-radius: 2px;
    transition: border-color 120ms ease, opacity 120ms ease;
    opacity: 0.7;
}

.lightbox-thumb:hover { opacity: 1; }

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lightbox-thumb--active {
    border-color: var(--accent, #6cc);
    opacity: 1;
}

.job-detail-swatch-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.job-detail-swatch-img {
    width: 100%;
    max-width: 140px;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 0;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    cursor: zoom-in;
    display: block;
}

.job-detail-swatch-img:hover {
    opacity: 0.85;
}

.job-detail-swatch-filename {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

@media (max-width: 768px) {
    .job-detail-main {
        padding: 16px 14px;
    }

    .detail-task-img-grid {
        gap: 8px;
    }
}

/* ================================================================
   TOAST NOTIFICATIONS
   ================================================================ */

/* Console toasts (Phase 15): kind-coloured 2px left border + glyph + title +
 * optional secondary line + inline actions + dismiss. */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
    pointer-events: none;
    max-width: calc(100vw - 48px);
}

.toast {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--text-mid);
    border-radius: 0;
    padding: 10px 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: max-content 1fr auto max-content;
    align-items: center;
    gap: 10px;
    min-width: 360px;
    max-width: 460px;
    animation: toast-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.toast--good { border-left-color: var(--good); }
.toast--warn { border-left-color: var(--warn); }
.toast--bad  { border-left-color: var(--bad); }
.toast--info { border-left-color: var(--accent); }

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

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

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

.toast-glyph {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1;
    color: var(--text-mid);
}
.toast--good .toast-glyph { color: var(--good); }
.toast--warn .toast-glyph { color: var(--warn); animation: status-pulse 1.6s ease-in-out infinite; }
.toast--bad  .toast-glyph { color: var(--bad); }
.toast--info .toast-glyph { color: var(--accent); }

.toast-text { min-width: 0; }
.toast-message {
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
}
.toast-secondary {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 2px;
}

.toast-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.toast-undo,
.toast-action {
    background: transparent;
    border: 1px solid transparent;
    color: var(--accent);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 11px;
    padding: 4px 8px;
    transition: background var(--transition);
}
.toast-undo:hover,
.toast-action:hover { background: var(--accent-dim); }

.toast-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 4px;
}
.toast-close:hover { color: var(--text); }

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--text-mid);
    animation: toast-progress linear forwards;
}
.toast-progress--good { background: var(--good); }
.toast-progress--warn { background: var(--warn); }
.toast-progress--bad  { background: var(--bad); }
.toast-progress--info { background: var(--accent); }

@keyframes toast-progress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ============ DRIVE SYNC TOGGLE ============ */

/* Row layout: label | switch | status */
.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.toggle-row-label {
    flex: 1 1 auto;
}

.toggle-row-status {
    font-size: 13px;
    color: var(--text-muted);
    min-width: 80px;
}

.toggle-row-status.is-saving { color: var(--text-muted); }
.toggle-row-status.is-ok     { color: var(--success); }
.toggle-row-status.is-error  { color: var(--danger); }

/* iOS-style sliding switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
}

.toggle-switch input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}

.toggle-switch input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.toggle-switch-track {
    position: absolute;
    inset: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: background var(--transition), border-color var(--transition);
}

.toggle-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--text-primary);
    border-radius: 50%;
    transition: transform var(--transition), background var(--transition);
}

/* On state */
.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-track {
    background: var(--success);
    border-color: var(--success);
}

.toggle-switch input[type="checkbox"]:checked ~ .toggle-switch-track .toggle-switch-thumb {
    transform: translateX(20px);
    background: #ffffff;
}

/* Focus ring for keyboard users */
.toggle-switch input[type="checkbox"]:focus-visible ~ .toggle-switch-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Disabled state (Drive not connected) */
.toggle-switch.is-disabled,
.toggle-switch input[type="checkbox"]:disabled ~ .toggle-switch-track {
    opacity: 0.5;
}

/* ============ DRIVE FOLDER PICKER ============ */

.modal[hidden] { display: none; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.modal-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    z-index: 1;
    max-width: 92vw;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 { margin: 0; font-size: 18px; }

.modal-close {
    background: transparent;
    border: 0;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.modal-body { padding: 16px 20px; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

/* Picker stacks above the Create-Job modal (z-index 1100). */
.drive-picker-modal { z-index: 1200; }

.drive-picker-content {
    width: min(640px, 92vw);
    max-height: 80vh;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
}

.drive-picker-search {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
}

.drive-picker-breadcrumb {
    padding: 8px 20px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.drive-picker-breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.drive-picker-breadcrumb a:hover { text-decoration: underline; }

.drive-picker-breadcrumb a + a::before {
    content: " / ";
    color: var(--text-muted);
    margin-right: 4px;
}

.drive-picker-list {
    margin: 0;
    padding: 12px 20px;
    overflow-y: auto;
    min-height: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    user-select: none;
}

.drive-picker-folder {
    padding: 12px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius);
    background: transparent;
    transition: background var(--transition);
    text-align: center;
    overflow: hidden;
}

.drive-picker-folder:hover,
.drive-picker-folder:focus-visible {
    background: var(--bg-tertiary);
    outline: none;
}

.drive-picker-folder.is-selected {
    background: var(--bg-tertiary);
    color: var(--accent);
    font-weight: 600;
}

.drive-picker-folder-icon {
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    color: var(--accent);
    transition: fill var(--transition);
}

.drive-picker-folder:hover .drive-picker-folder-icon,
.drive-picker-folder.is-selected .drive-picker-folder-icon {
    fill: var(--accent);
}

.drive-picker-folder-name {
    font-size: 13px;
    line-height: 1.3;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.drive-picker-folder-path {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.drive-picker-empty {
    grid-column: 1 / -1;
    padding: 24px 20px;
    color: var(--text-muted);
    text-align: center;
}

/* Staging indicator inside the Create-Job modal */
.staging-indicator {
    color: var(--text-muted);
    font-size: 13px;
    margin: 8px 0;
}

/* "Import from Drive" button when Drive is not connected */
#open-drive-picker:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============ FAILED IMPORT BANNER ============ */

.flash {
    padding: 10px 16px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    font-size: 14px;
}

.flash-error {
    background: var(--bad-dim);
    border: 1px solid var(--bad);
    color: var(--text-primary);
}

.flash.flash-error[data-import-id] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.flash-dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: 18px;
    padding: 0 8px;
    flex-shrink: 0;
}

/* Staged thumbs (Drive import) get a subtle accent border so the user can
   see at a glance which images came from Drive vs locally uploaded. */
.manual-job-thumb-staged {
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* ============ JOBS COUNT TOAST ============ */
/* ============ DIALOG MODAL ============ */

/* Top-center placement: overrides the centered .modal-content default. */
.dialog-modal { z-index: 1300; }

.dialog-modal .modal-content {
    align-self: flex-start;
    margin-top: 2px;
    width: min(560px, 92vw);
}

.dialog-modal .modal-body p {
    margin: 0 0 8px 0;
}

.dialog-modal .modal-body p:last-child {
    margin-bottom: 0;
}

/* Console additions for the structured dialog modal (Phase 8). */
.dialog-modal .dialog-kicker {
    padding: 14px 22px 0 22px;
}
.dialog-modal .dialog-plan-rows {
    margin: 0 22px 14px 22px;
}
.dialog-modal .dialog-danger-ack {
    margin: 0 22px 14px 22px;
}

/* Simple bottom-right notification for new-job arrivals from polling.
   z-index 1300 keeps it above all modals (1000-1200).
   Follow-up: unify with a project-wide toast framework if one lands. */
.jobs-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-other);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1300;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition);
    pointer-events: none;
    text-align: center;
    width: 200px;
}

.jobs-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* ============ GEMINI HEALTH ============ */

.gemini-health-banners {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.gemini-health-banner {
    padding: 10px 14px;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.4;
    display: block;
    gap: 8px;
    align-items: center;
}

.gemini-health-banner[hidden] {
    display: none;
}

.gemini-health-banner-global {
    background: #4a1d1d;
    color: #fff5f5;
    border: 1px solid #7a2c2c;
}

.gemini-health-banner-user {
    background: #4a3a1d;
    color: #fff8e8;
    border: 1px solid #7a5e2c;
}

.gemini-health-banner a {
    color: inherit;
    text-decoration: underline;
}

.gemini-health-nav-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d54e4e;
    margin-left: 6px;
    flex-shrink: 0;
}

.gemini-health-nav-dot[hidden] {
    display: none;
}

#btn-add-job:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.gemini-health-panel {
    display: grid;
    gap: 12px;
    margin-top: 8px;
}

.gemini-health-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 12px;
    align-items: start;
}

.gemini-health-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.gemini-health-value {
    display: grid;
    gap: 4px;
}

.gemini-health-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--rule);
    background: var(--panel-hi);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    font-weight: 400;
}
.gemini-health-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-mid);
}
.gemini-health-pill[data-state="up"] {
    color: var(--good);
    border-color: var(--good);
}
.gemini-health-pill[data-state="up"]::before { background: var(--good); }
.gemini-health-pill[data-state="down"] {
    color: var(--bad);
    border-color: var(--bad);
}
.gemini-health-pill[data-state="down"]::before { background: var(--bad); }

.gemini-health-detail {
    font-size: 13px;
    color: var(--text-secondary, #888);
}

.gemini-health-meta {
    font-size: 12px;
    color: var(--text-tertiary, #6a6a6a);
}

.gemini-health-failures {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.gemini-health-failures th,
.gemini-health-failures td {
    padding: 4px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
}

.gemini-health-failures th {
    color: var(--text-secondary, #888);
    font-weight: 600;
}
#drive-picker-import-loader {
    display: grid;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1299;
    background: rgb(24 24 24 / 60%);
    align-items: center;
    text-align: center;
    font-size: 20px;
}

@media (max-width: 720px) {
    .gemini-health-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CONSOLE ADDITIONS (Phase 1+ of the design redesign)
   New components: status mark, task dots, swatch chip, topbar,
   diff lines, plan rows, kicker label, count chip, banners.
   ============================================================ */

/* --- kicker / caps label --- */
.kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* --- count chip (next to a tab or page title) --- */
.count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-mid);
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    border-radius: 7px;
}

/* --- status mark (glyph + label, replaces coloured backgrounds) --- */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-mid);
}
.status__glyph { font-size: 11px; line-height: 1; }
.status__label { letter-spacing: 0.02em; }

.status--good     { color: var(--good); }
.status--warn     { color: var(--warn); }
.status--bad      { color: var(--bad); }
.status--archive  { color: var(--archive); }
.status--neutral  { color: var(--text-mid); }

/* Pulse animation for in-flight status */
.status--warn .status__glyph {
    animation: status-pulse 1.6s ease-in-out infinite;
}
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* --- task dots: one 7×4 rect per task, coloured by status --- */
.task-dots {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 8px;
}
.task-dot {
    display: inline-block;
    width: 7px;
    height: 4px;
    background: var(--archive);
    border-radius: 0;
}
.task-dot--good { background: var(--good); }
.task-dot--warn { background: var(--warn); animation: status-pulse 1.6s ease-in-out infinite; }
.task-dot--bad  { background: var(--bad); }
.task-dot--dim  { background: var(--rule-hi); }

/* --- swatch chip (small colour chip next to a job row) --- */
.swatch-chip {
    display: inline-block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
    border-radius: 0;
    flex-shrink: 0;
    background-position: center;
    background-size: cover;
}

/* --- top bar (new global page chrome above main content) --- */
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 48px;
    padding: 0 24px;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
}
.topbar__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}
.topbar__tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}
.topbar__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-mid);
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.topbar__tab:hover { color: var(--text); }
.topbar__tab.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
.topbar__tab .count-chip {
    margin-left: 2px;
}
.topbar__search {
    flex: 1;
    max-width: 320px;
}
.topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* --- inline diff lines (used in edit-job modal) --- */
.diff-line {
    display: block;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.diff-minus {
    background: var(--bad-dim);
    color: var(--bad);
    border-left: 2px solid var(--bad);
}
.diff-plus {
    background: var(--good-dim);
    color: var(--good);
    border-left: 2px solid var(--good);
}
.diff-context {
    color: var(--text-mid);
    border-left: 2px solid transparent;
}

/* --- plan rows (modal structured metadata) --- */
.plan-rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    padding: 12px 14px;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
}
.plan-rows__key {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    align-self: center;
}
.plan-rows__val {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text);
}

/* --- danger acknowledgement checkbox (in confirm modal) --- */
.danger-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--rule);
    border-left: 2px solid var(--bad);
    background: var(--panel-hi);
    font-size: 12px;
    color: var(--text-mid);
    cursor: pointer;
}
.danger-ack input[type=checkbox] {
    margin-top: 2px;
}

/* --- console banners (full-width inside content area) --- */
.console-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--text-mid);
    font-size: 12px;
    color: var(--text);
}
.console-banner--good { border-left-color: var(--good); }
.console-banner--warn { border-left-color: var(--warn); }
.console-banner--bad  { border-left-color: var(--bad); }
.console-banner__title { font-weight: 500; }
.console-banner__detail { color: var(--text-mid); }
.console-banner__actions { margin-left: auto; display: flex; gap: 8px; }

/* --- Console job row 9-column grid (used in Phase 3) --- */
.job-row-grid {
    display: grid;
    grid-template-columns:
        24px /* 1: checkbox */
        34px /* 2: swatch chip */
        260px /* 3: title + id */
        730px /* 4: prompt preview */
        40px /* 5: task dots + count */
        /* 120px 6: model */
        260px /* 7: status mark */
        /* 40px 8: age */
        auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--panel);
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text);
    transition: background var(--transition);
    text-decoration: none;
}
.job-row-grid:last-child { margin-bottom: 0; }
.job-row-grid:hover {
    background: var(--panel-hi);
}
.job-row-grid.selected {
    background: var(--accent-dim);
}
/* Override the legacy .job-card padding/margin so the grid lays out cleanly. */
.job-row-grid.job-card {
    padding: 0 16px;
    margin: 0;
    background: transparent;
    border: none;
}
.job-row-grid.job-card:hover {
    background: #1b1b1b;
}

.job-row-grid.job-card > * {
    padding-top: 16px;
    padding-bottom: 16px;
}

.job-row-grid__title {
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}
.job-row-grid__title:hover { color: var(--accent); }
.job-row-grid__id {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-left: 8px;
    letter-spacing: 0.04em;
}
.job-row-grid__prompt {
    color: var(--text-mid);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-row-grid__model {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.job-row-grid__age {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    text-align: right;
    white-space: nowrap;
}
.job-row-grid__open {
    color: var(--text-dim);
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
}

/* Task dots + count in the same cell. */
.job-task-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.job-task-count__n {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
}
.task-dots__more {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    margin-left: 2px;
}

/* Row actions: hidden by default, revealed on row hover. */
.job-row-grid__actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}
.job-row-grid:hover .job-row-grid__actions,
.job-row-grid.selected .job-row-grid__actions {
    opacity: 1;
}
/* Tighten action button size inside row */
.job-row-grid__actions .btn {
    padding: 4px 8px;
    font-size: 11px;
}

/* Console row select checkbox */
.job-row-grid .job-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.job-row-grid .job-select-checkbox {
    accent-color: var(--accent);
    cursor: pointer;
}

/* When the status pill span (legacy id="job-status-{id}") contains the Console
 * .status mark, the wrapping span should not show its own pill styles. */
.job-row-grid .status-pill .status { display: inline-flex; }
.job-row-grid .status-pill:has(.status) {  background: transparent; }

/* --- Console mono input override (most data is monospaced) --- */
.input-mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* --- focus ring shared --- */
.input:focus,
.form-input:focus,
input:focus,
textarea:focus,
select:focus,
.btn:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

/* --- Console primary button: accent on dark, dark text --- */
.btn-primary {
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* --- Console danger button --- */
.btn-danger {
    background: var(--bad);
    color: #ffffff;
    border: 1px solid var(--bad);
}
.btn-danger:hover { background: #ea918a; border-color: #ea918a; }

/* --- console outline btn (secondary actions) --- */
.btn-outline {
    background: var(--panel);
    color: var(--text);
    border: 1px solid var(--rule);
}
.btn-outline:hover { background: var(--panel-hi); border-color: var(--rule-hi); }

.jobs-empty.empty-pane .btn-primary {
    width: 60%;
}
.jobs-empty.empty-pane .btn-outline {
    width: 40%;
}

/* --- modal kind borders (accent / warn / bad top edge) --- */
.modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.modal-content--accent { border-top: 2px solid var(--accent); }
.modal-content--warn   { border-top: 2px solid var(--warn); }
.modal-content--bad    { border-top: 2px solid var(--bad); }

/* --- settings sub-nav (200px column inside settings page) --- */
.settings-shell {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    min-height: 100vh;
}
.settings-subnav {
    background: var(--panel);
    border-right: 1px solid var(--rule);
    padding: 20px 0;
}
.settings-subnav__item {
    display: block;
    padding: 8px 20px;
    color: var(--text-mid);
    font-size: 13px;
    border-left: 2px solid transparent;
    transition: color var(--transition), background var(--transition);
}
.settings-subnav__item:hover {
    color: var(--text);
    background: var(--panel-hi);
}
.settings-subnav__item.active {
    color: var(--accent);
    background: var(--accent-dim);
    border-left-color: var(--accent);
}


/* ============================================================
   KEYBOARD SHORTCUTS MODAL (Phase 16)
   ============================================================ */
.shortcuts-modal { z-index: 1300; }
.shortcuts-modal .shortcuts-content {
    width: min(640px, 92vw);
    align-self: flex-start;
    margin-top: 64px;
    background: var(--panel);
    border: 1px solid var(--rule);
}
.shortcuts-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--rule);
}
.shortcuts-header h2 {
    margin: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}
.shortcuts-close {
    font-size: 16px;
    line-height: 1;
}
.shortcuts-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    padding: 16px 22px 18px 22px;
}
@media (max-width: 720px) {
    .shortcuts-body { grid-template-columns: 1fr; }
}
.shortcuts-group__head {
    margin: 0 0 8px 0;
}
.shortcuts-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
}
.shortcuts-list dt {
    align-self: center;
    display: inline-flex;
    gap: 4px;
}
.shortcuts-list dd {
    margin: 0;
    color: var(--text-mid);
    font-size: 12px;
}
.shortcuts-list kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    color: var(--text);
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    border-radius: 0;
}

/* Keyboard focus ring on a job row / task row, driven by arrow navigation. */
.job-row-grid.kbd-focus,
.detail-task-row.kbd-focus {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* ============================================================
   EMPTY STATES (Phase 17)
   ============================================================ */
.empty-pane {
    text-align: left;
    width: 720px;
    margin: 64px auto 40px auto;
    padding: 28px 32px;
    background: var(--panel);
    border: 1px solid var(--rule);
    display: grid;
    gap: 10px;
}
.empty-pane__title {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--text);
}
.empty-pane__body {
    margin: 0;
    color: var(--text-mid);
    font-size: 13px;
    line-height: 1.5;
}
.empty-pane__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.empty-pane__suggestions {
    margin-top: 8px;
}
.empty-suggestions__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.empty-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.empty-suggestion:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
}
.empty-suggestion__hits {
    font-size: 10px;
    color: var(--text-dim);
}

/* ============================================================
   SETTINGS SUB-PAGE LAYOUT (Phase 9)
   ============================================================ */
/* The settings page renders main-content > [settings-shell with .settings-subnav + .settings-content] */
.settings-shell { padding: 0; }
.settings-content { padding: 28px 32px; min-width: 0; }
.settings-subnav__kicker {
    padding: 0 20px 8px 20px;
    margin: 0;
}

/* ============================================================
   CREATE / EDIT JOB MODAL - Console two-column layout (Phase 5/6)
   ============================================================ */
.manual-job-modal-panel--accent { border-top: 2px solid var(--accent); }
.manual-job-modal-panel--warn   { border-top: 2px solid var(--warn); }

.manual-job-modal-header {
    align-items: flex-start;
    gap: 12px;
}
.manual-job-modal-header__titlewrap {
    flex: 1;
    min-width: 0;
}
.manual-job-modal-header__titlewrap .kicker {
    margin: 0 0 4px 0;
}
.manual-job-modal-header h2 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

.manual-job-warn-banner {
    margin: 0 0 18px 0;
}

/* 2-col grid inside the modal body. Collapses to 1-col under 760px. */
.modal-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 24px;
    margin-bottom: 18px;
}
@media (max-width: 760px) {
    .modal-cols { grid-template-columns: 1fr; }
}
.modal-col { min-width: 0; }
.modal-col--side { display: flex; flex-direction: column; gap: 16px; }

/* Swatch dropzone is more compact in the side rail. */
.manual-job-dropzone--swatch {
    padding: 16px 12px;
    font-size: 12px;
}

/* Run plan summary card */
.run-plan-card,
.changes-card,
.output-location-card {
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    padding: 12px 14px;
}
.run-plan-card .kicker,
.changes-card .kicker,
.output-location-card .kicker { margin: 0 0 8px 0; }

.run-plan-card__rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
}
.run-plan-card__rows dt {
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-transform: lowercase;
}
.run-plan-card__rows dd {
    margin: 0;
    color: var(--text);
    text-align: right;
}

.output-location-card__path {
    margin: 0;
    font-size: 11px;
    color: var(--text-mid);
    word-break: break-all;
}
.output-location-card__path code {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text);
}
.output-location-card__path + .output-location-card__path { margin-top: 4px; }

/* Edit-modal diff card */
.changes-card__body {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    max-height: 240px;
    overflow: auto;
}
.changes-card__body .form-hint {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--text-dim);
}
.changes-card__body .diff-line { padding: 2px 6px; }

/* ============================================================
   DRIVE PICKER - Console restyle (Phase 7)
   ============================================================ */
.drive-picker-header__titlewrap .kicker { margin: 0 0 4px 0; }
.drive-picker-header__titlewrap h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.drive-picker-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}
.drive-picker-footer__selection {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    font-size: 11px;
    color: var(--text);
}
.drive-picker-footer__selection .kicker { margin: 0; }
.drive-picker-footer__name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.drive-picker-footer__detail {
    margin-left: auto;
    color: var(--text-mid);
    font-family: var(--font-mono);
    font-size: 10px;
}
.drive-picker-footer__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Classification badge (chip-style). data-kind drives the colour. */
.drive-classification-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    color: var(--text-mid);
    white-space: nowrap;
}
.drive-classification-badge[data-kind="matrix"] {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-dim);
}
.drive-classification-badge[data-kind="product"],
.drive-classification-badge[data-kind="images"],
.drive-classification-badge[data-kind="prompted"] {
    color: var(--good);
    border-color: var(--good);
    background: var(--good-dim);
}
.drive-classification-badge[data-kind="empty"] {
    color: var(--text-dim);
}

/* Inline badge appears on the right side of each folder row. */
.drive-classification-badge--inline {
    margin-left: auto;
    align-self: center;
}

/* ============================================================
   STORAGE BREAKDOWN (Phase 22)
   ============================================================ */
.storage-segmented { margin-top: 12px; }
.storage-segmented__bar {
    display: flex;
    height: 12px;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    overflow: hidden;
}
.storage-segment {
    display: block;
    height: 100%;
    transition: width 200ms ease-out;
}
.storage-segment--inputs  { background: var(--accent); }
.storage-segment--outputs { background: var(--good); }
.storage-segment--cache   { background: var(--warn); }
.storage-segment--archive { background: var(--archive); }

.storage-segmented__legend {
    display: grid;
    grid-template-columns: max-content 1fr max-content 1fr;
    gap: 6px 14px;
    margin: 14px 0 0 0;
    font-family: var(--font-mono);
    font-size: 11px;
}
.storage-segmented__legend dt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-mid);
    text-transform: lowercase;
}
.storage-segmented__legend dd {
    margin: 0;
    color: var(--text);
    text-align: right;
}
.storage-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid var(--rule);
}

/* ============================================================
   SETTINGS shared header rule (formerly grouped with audit)
   ============================================================ */
.settings-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Autoclean toggle row */
.autoclean-form .toggle-row { gap: 10px; flex-wrap: wrap; }
.autoclean-days { width: 80px; padding: 6px 8px; font-size: 12px; }

/* ============================================================
   AUTH PAGES (Phase 11) - small Console touches
   ============================================================ */
.auth-kicker { text-align: center; margin: 0 0 8px 0; }
.auth-card.modal-content--accent,
.auth-card.modal-content--warn,
.auth-card.modal-content--bad { /* top-border kind tinting via shared modal mixin */ }

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 12px;
}
.auth-footer__sep { color: var(--text-dim); }

/* Password strength meter (register page) */
.password-strength { margin-top: 8px; }
.password-strength__bar {
    height: 2px;
    background: var(--rule);
    overflow: hidden;
}
.password-strength__bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--bad);
    transition: width 150ms ease;
}
.password-strength__label {
    margin: 4px 0 0 0;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
}

/* ============================================================
   ONBOARDING WIZARD (Phase 12) - Console 2-col layout
   ============================================================ */
.onboarding-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
    background: var(--bg);
}
@media (max-width: 760px) {
    .onboarding-shell { grid-template-columns: 1fr; }
    .onboarding-rail__steps { display: flex; gap: 12px; }
}
.onboarding-rail {
    background: var(--panel);
    border-right: 1px solid var(--rule);
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
}
.onboarding-rail .onboarding-brand {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 6px 0;
}
.onboarding-rail .onboarding-brand span { color: var(--accent); }
.onboarding-rail__kicker { margin: 0 0 20px 0; }

.onboarding-rail__steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.onboarding-rail__step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dim);
    font-size: 12px;
}
.onboarding-rail__step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--panel-hi);
}
.onboarding-rail__step.active { color: var(--text); }
.onboarding-rail__step.active .onboarding-rail__step-dot {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}
.onboarding-rail__step.done { color: var(--text-mid); }
.onboarding-rail__step.done .onboarding-rail__step-dot {
    border-color: var(--good);
    color: var(--good);
}

.onboarding-rail__foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.onboarding-rail__exit {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    text-decoration: none;
}
.onboarding-rail__exit:hover { color: var(--bad); }

.onboarding-body {
    padding: 56px 56px;
    max-width: 720px;
    width: 100%;
}
@media (max-width: 760px) {
    .onboarding-body { padding: 28px 24px; }
}

/* ============================================================
   ACTIVE SESSIONS (Phase 21)
   ============================================================ */
.auth-sessions {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rule);
    background: var(--panel);
}
.auth-session-row {
    display: grid;
    grid-template-columns: 1fr max-content;
    gap: 4px 16px;
    padding: 12px 16px;
}
.auth-session-row + .auth-session-row {
    border-top: 1px solid var(--rule);
}
.auth-session-row.is-current {
    background: var(--accent-dim);
    border-left: 2px solid var(--accent);
    padding-left: 14px;
}
.auth-session-row__head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-session-row__device {
    font-weight: 500;
    color: var(--text);
    font-size: 13px;
}
.auth-session-row__current { color: var(--accent); }
.auth-session-row__meta {
    grid-column: 1 / 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--text-mid);
    font-family: var(--font-mono);
    font-size: 10px;
}
.auth-session-row__id { color: var(--text-dim); }
.auth-session-row__revoke {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: center;
}
.auth-sessions__footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

/* ============================================================
   2FA SETUP + RECOVERY CODES (Phase 13)
   ============================================================ */
.totp-stepper {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--rule);
    background: var(--panel);
}
.totp-stepper__step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--text-dim);
    font-size: 11px;
    font-family: var(--font-mono);
    flex: 1;
}
.totp-stepper__step + .totp-stepper__step {
    border-left: 1px solid var(--rule);
}
.totp-stepper__step.active {
    background: var(--accent-dim);
    color: var(--accent);
}
.totp-stepper__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid currentColor;
    font-size: 10px;
}
.totp-stepper__label { font-family: var(--font-sans); font-size: 12px; }

.totp-uri-details {
    margin-top: 14px;
    border: 1px solid var(--rule);
    background: var(--panel-hi);
}
.totp-uri-details summary {
    cursor: pointer;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mid);
}
.totp-uri-details .totp-uri {
    padding: 8px 12px;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text);
    word-break: break-all;
}
.totp-form { margin-top: 18px; }
.totp-form__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recovery-codes-section { padding: 18px; }
.recovery-codes {
    list-style: none;
    margin: 0 0 14px 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 6px;
}
.recovery-code {
    display: block;
    padding: 8px 12px;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
    color: var(--text);
    user-select: all;
}
.recovery-codes__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   MATRIX IMPORT (Phase 20)
   ============================================================ */
.matrix-import-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--accent);
    margin: 0 0 12px 0;
    font-size: 12px;
}
.matrix-import-banner .kicker { margin: 0; }
.matrix-import-banner__name {
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.matrix-import-banner__progress {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mid);
}

.matrix-grid-wrap {
    background: var(--panel);
    border: 1px solid var(--rule);
    padding: 16px;
}
.matrix-grid-wrap .kicker { margin: 0 0 12px 0; }

.matrix-table {
    display: grid;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.matrix-table__cell {
    background: var(--panel);
    padding: 6px 8px;
    font-size: 11px;
    color: var(--text);
    min-height: 28px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.matrix-table__head {
    background: var(--panel-hi);
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-mid);
    text-transform: lowercase;
    letter-spacing: 0.04em;
}
.matrix-table__head--row {
    justify-content: flex-start;
    text-align: left;
}
.matrix-table__cell--corner { background: var(--panel-hi); }

.matrix-cell {
    transition: background var(--transition);
    cursor: pointer;
}
.matrix-cell:hover { outline: 1px solid var(--accent); outline-offset: -1px; }
.matrix-cell--good    { background: var(--good); }
.matrix-cell--warn    { background: var(--warn); }
.matrix-cell--bad     { background: var(--bad); }
.matrix-cell--dim     { background: var(--archive); }
.matrix-cell--missing { background: var(--panel); border: 1px dashed var(--rule); }

/* Phase 90: per-cell key marker. The matrix grid is too dense for
 * inline text, so a snapshotted (overridden) cell gets a small corner
 * dot. The actual key label is in the cell's title tooltip; the dot
 * is a visual cue that this row diverges from the org default. */
.matrix-cell__key { position: relative; }
.matrix-cell__key--snapshot::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.85;
}

/* ============================================================
   AUTH SHELL split-screen layout (Phase 72)
   ============================================================ */
.auth-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background: var(--bg);
}

.auth-shell__visual {
    background: var(--panel);
    border-right: 1px solid var(--rule);
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.auth-shell__brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.auth-shell__mark {
    width: 28px;
    height: 28px;
    background: var(--text);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
}
.auth-shell__brandname {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}
.auth-shell__kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.auth-shell__mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 40px 0;
}

.auth-shell__visual-foot {
    min-height: 1px;
}

.auth-shell__form {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-shell__form-inner {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
}

.auth-step__kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
}
.auth-step__title {
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.01em;
    margin: 0 0 28px 0;
    color: var(--text);
}
.auth-step__subtitle {
    font-size: 13px;
    color: var(--text-mid);
    margin: 0 0 20px 0;
}
.auth-step__error {
    background: rgba(224, 122, 114, 0.08);
    border-left: 2px solid var(--bad);
    color: var(--text);
    padding: 10px 12px;
    font-size: 12px;
    margin: 0 0 16px 0;
}

.form-label-caps {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 6px 0;
}

.btn-block { display: block; width: 100%; }

.bag-tile {
    --bag-fill: #c8854a;
    --bag-dark: #8a5a2c;
    --bag-bg:   #1a1d20;
    --bag-stroke: var(--rule);

    height: 220px;
    background: var(--bag-bg);
    background-image: repeating-linear-gradient(135deg,
        transparent 0 8px, rgba(255,255,255,0.02) 8px 9px);
    border: 1px solid var(--bag-stroke);
    position: relative;
    overflow: hidden;
}
.bag-tile::before {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    top: 28%;
    bottom: 14%;
    background: var(--bag-fill);
    border-top: 2px solid var(--bag-dark);
}
.bag-tile::after {
    content: "";
    position: absolute;
    left: 32%;
    right: 32%;
    top: 14%;
    height: 14%;
    border: 2px solid var(--bag-dark);
    border-bottom: none;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.bag-tile--tan       { --bag-fill: #c8854a; --bag-dark: #8a5a2c; }
.bag-tile--cognac    { --bag-fill: #9b5a30; --bag-dark: #5e3514; }
.bag-tile--bluestone { --bag-fill: #56707a; --bag-dark: #2d4047; }
.bag-tile--espresso  { --bag-fill: #3e2a1c; --bag-dark: #1f1410; }
.bag-tile--gold      { --bag-fill: #c9a064; --bag-dark: #856934; }
.bag-tile--rose      { --bag-fill: #a86c66; --bag-dark: #6a3d39; }

@media (max-width: 720px) {
    .auth-shell { grid-template-columns: 1fr; min-height: auto; }
    .auth-shell__visual { display: none; }
    .auth-shell__form { padding: 40px 24px; }
}

/* ============================================================
   ORG SWITCHER (Phase 77) - fitted to the 56px icon-only sidebar
   ============================================================ */
.left-nav-switcher {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.org-switcher-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--panel-hi);
    border: 1px solid var(--rule);
    color: var(--text);
    cursor: pointer;
    position: relative;
    font: inherit;
}
.org-switcher-button:hover {
    background: var(--panel);
    border-color: var(--rule-hi);
}

.org-switcher-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    line-height: 1;
}
.org-switcher-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    padding: 1px 5px;
    line-height: 1.4;
    border-radius: 2px;
}

.org-switcher-email {
    padding: 10px 12px 8px 12px;
    border-bottom: 1px solid var(--rule);
    font-size: 12px;
    color: var(--text-mid);
    overflow: hidden;
}
.org-switcher-email-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-switcher-menu {
    position: absolute;
    bottom: 0;
    left: calc(100% + 4px);
    background: var(--panel);
    border: 1px solid var(--rule);
    z-index: 100;
    min-width: 240px;
    max-width: 320px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.org-switcher-section { padding: 6px 0; }
.org-switcher-section-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 12px 4px 12px;
}
.org-switcher-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.org-switcher-item {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-align: left;
}
.org-switcher-item:hover {
    background: var(--panel-hi);
}
.org-switcher-item.is-active {
    background: var(--accent-dim);
    color: var(--accent);
    cursor: default;
}
.org-switcher-item:disabled {
    opacity: 0.5;
    cursor: progress;
}
.org-switcher-item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.org-switcher-item-role {
    color: var(--text-dim);
    flex-shrink: 0;
}
.org-switcher-footer {
    padding: 8px 12px;
    border-top: 1px solid var(--rule);
    font-size: 11px;
}
.org-switcher-footer a {
    color: var(--accent);
    text-decoration: none;
}
.org-switcher-footer a:hover { color: var(--accent-hover); }

.org-name-form .form-input { max-width: 320px; }

/* ============================================================
   MEMBERS PAGE (Phase 78) - admin members list + invite forms
   ============================================================ */
.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.members-table th,
.members-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
}
.members-table thead th {
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: lowercase;
    letter-spacing: 0.04em;
    color: var(--text-mid);
    border-bottom-color: var(--rule);
    background: var(--panel-hi);
}
.members-table tbody tr:last-child td { border-bottom: 0; }
.members-table tbody tr:hover { background: var(--bg-hover); }

.members-invite-form .form-input { max-width: 100%; }
.members-revoke-form { display: inline; margin: 0; padding: 0; }

.members-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.members-toolbar .section-heading { margin: 0; }

.member-row--owner {
    background: var(--panel-hi);
}
.member-row--revoked td { color: var(--text-mid); }
.member-row--revoked .kicker { color: var(--text-mid); }
.member-row__you {
    margin-left: 6px;
    color: var(--text-mid);
}
.member-role-select {
    max-width: 180px;
    padding: 4px 8px;
    font-size: 12px;
}
.members-table__empty {
    text-align: center;
    color: var(--text-mid);
    font-style: italic;
}

.member-role-status {
    display: none;
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-mid);
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    align-items: center;
    text-align: center;
    background: rgba(24, 24, 24, 0.9);
}
.member-role-status.is-saving {
    display: grid;
    color: var(--accent);
}

/* ============================================================
   MEMBER SUSPENSION (Phase 85)
   ============================================================ */
.badge--suspended {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--panel-hi);
    color: var(--text-mid);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.member-row--suspended td { color: var(--text-mid); }
.member-row--suspended .kicker { color: var(--text-mid); }

.org-switcher-item.is-suspended {
    opacity: 0.55;
    cursor: default;
    background: transparent;
}
.org-switcher-item.is-suspended:hover { background: transparent; }
.org-switcher-item.is-suspended .org-switcher-item-role { color: var(--text-mid); }

/* ============================================================
   GEMINI KEYS TABLE (Phase 87)
   ============================================================ */
.gemini-keys-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
}
.gemini-keys-table th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.gemini-keys-table td {
    padding: 10px 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
.gemini-keys-label { font-weight: 500; }
.gemini-keys-id {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 6px;
}
.gemini-keys-default-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.gemini-keys-table th.gemini-keys-actions,
.gemini-keys-table td.gemini-keys-actions {
    text-align: right;
    white-space: nowrap;
}
.gemini-keys-actions .inline-form {
    display: inline-block;
    margin-left: 6px;
}
.gemini-keys-edit-row td {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}
.gemini-keys-edit-form { padding: 12px 0; }
.gemini-keys-edit-form .form-group { margin-bottom: 8px; }

.gemini-keys-empty {
    padding: 14px;
    background: var(--bg-tertiary);
    border-left: 2px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    margin: 12px 0;
}

.gemini-keys-add { margin-top: 12px; }
.gemini-keys-add summary {
    cursor: pointer;
    list-style: none;
    display: inline-block;
}
.gemini-keys-add summary::-webkit-details-marker { display: none; }
.gemini-keys-add[open] summary { margin-bottom: 12px; }
.gemini-keys-add-form {
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 4px;
}
.gemini-keys-add-form .form-group { margin-bottom: 12px; }

.gemini-keys-download {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gemini-keys-download .form-hint { margin: 0; }

/* ============================================================
   TOAST NOTIFICATIONS (Phase 90)
   ============================================================ */
.toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast-notification {
    pointer-events: auto;
    background: var(--panel);
    color: var(--text);
    padding: 10px 14px;
    border-radius: 4px;
    border: 1px solid var(--border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    line-height: 1.4;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.16s, transform 0.16s;
    max-width: 320px;
}
.toast-notification--visible {
    opacity: 1;
    transform: translateX(0);
}
.toast-notification--success { border-left: 3px solid var(--accent); }
.toast-notification--error   { border-left: 3px solid var(--bad); }
.toast-notification--info    { border-left: 3px solid var(--border); }

/* ============================================================
   WORKSPACES PAGE (Phase 91)
   ============================================================ */
.workspaces-table .workspaces-row__name {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    font: inherit;
}
.workspaces-table .workspaces-row__name--inert {
    color: var(--text-mid);
    cursor: default;
    text-decoration: none;
}
.workspaces-row--current { background: var(--panel-hi); }
.workspaces-row--suspended { opacity: 0.6; }
.workspaces-row--invitation .badge--pending {
    background: var(--accent-dim);
    color: var(--accent);
}

/* Audit section */
.audit-filters {
    margin-bottom: 12px;
    padding: 12px;
    background: var(--panel-hi);
    border-radius: 4px;
}
.audit-filters .form-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.audit-filters .form-group {
    flex: 1 1 auto;
    min-width: 140px;
    margin-bottom: 0;
}
.audit-filters .form-group--actions { flex: 0 0 auto; }
.audit-table { width: 100%; }
.audit-table th {
    font-size: 11px;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.audit-table td {
    font-size: 13px;
    vertical-align: top;
    padding: 8px 12px;
    border-bottom: 1px solid var(--rule);
}
.audit-kind {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.audit-kind--ok   { background: var(--panel-hi); color: var(--text-mid); }
.audit-kind--warn { background: rgba(255, 180, 50, 0.15); color: #b87a14; }
.audit-kind--bad  { background: rgba(220, 50, 50, 0.15); color: #b00020; }
.audit-pagination {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    justify-content: flex-end;
}

/* ============================================================
   2FA RESET BANNER (Phase 98)
   ============================================================ */
.banner-2fa-reset {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 180, 50, 0.92);
    color: #2a1b00;
    border-bottom: 1px solid rgba(120, 80, 0, 0.6);
    font-size: 14px;
    line-height: 1.4;
    position: sticky;
    top: 0;
    z-index: 1000;
}
.banner-2fa-reset__body a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}
.banner-2fa-reset__dismiss {
    appearance: none;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.banner-2fa-reset__dismiss:hover {
    background: rgba(0, 0, 0, 0.06);
}

/* ============================================================
   RETINT.ONLINE CUTOVER BANNER (Phase 118)
   ============================================================ */
.banner-redirect-uri-migration {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(80, 150, 220, 0.92);
    color: #061a30;
    border-bottom: 1px solid rgba(20, 60, 120, 0.6);
    font-size: 14px;
    line-height: 1.4;
    position: sticky;
    top: 0;
    z-index: 999;
}
.banner-redirect-uri-migration__body a,
.banner-redirect-uri-migration__body code {
    color: inherit;
    font-weight: 600;
}
.banner-redirect-uri-migration__body a {
    text-decoration: underline;
}
.banner-redirect-uri-migration__body code {
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 1px 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
}
.banner-redirect-uri-migration__dismiss {
    appearance: none;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.banner-redirect-uri-migration__dismiss:hover {
    background: rgba(0, 0, 0, 0.06);
}