/* ============================================================================
   RESUME ENGINE PRO - GLOBAL STYLES
   ============================================================================ */

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

:root {
    --primary: #0099ff;
    --primary-dark: #0066ff;
    --secondary: #00d9ff;
    --success: #00cc00;
    --danger: #ff3232;
    --warning: #ffaa00;
    --dark-bg: #0a0a14;
    --card-bg: #1a1a2e;
    --border: rgba(100, 200, 255, 0.2);
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #808080;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #0a0a14 0%, #0d0d1a 100%);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* ============================================================================
   NAVBAR
   ============================================================================ */

.navbar {
    background: rgba(10, 10, 20, 0.95);
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #00d9ff, #0099ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-display {
    background: rgba(100, 200, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #00d9ff;
}

/* Settings Menu Dropdown */
.settings-menu {
    position: absolute;
    top: 60px;
    right: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    z-index: 1001;
    overflow: hidden;
}

.settings-menu a,
.settings-menu button {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.95rem;
    transition: background 0.2s ease;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
}

.settings-menu a:hover,
.settings-menu button:hover {
    background: rgba(0, 153, 255, 0.1);
    color: #00d9ff;
}

.btn-logout {
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 0.75rem 1rem;
    color: #ff6b6b;
}

.btn-logout:hover {
    background: rgba(255, 50, 50, 0.1);
    color: #ff8888;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.btn-primary {
    background: linear-gradient(135deg, #0099ff, #0066ff);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 153, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 153, 255, 0.4);
}

.btn-secondary {
    background: rgba(100, 100, 120, 0.3);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: rgba(100, 200, 255, 0.2);
}

.btn-success {
    background: linear-gradient(135deg, #00cc00, #00aa00);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 204, 0, 0.3);
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 204, 0, 0.4);
}

.btn-danger {
    background: linear-gradient(135deg, #ff3232, #cc0000);
    color: white;
}

.btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 50, 50, 0.4);
}

.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1;
}

.btn-icon:hover {
    background: rgba(100, 200, 255, 0.1);
}

.btn.large {
    padding: 1rem 3rem;
    font-size: 1.1rem;
}

.button-group {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

/* ============================================================================
   CONTAINER & PAGES
   ============================================================================ */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
    flex: 1 0 auto;
}

.page {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page.active {
    display: block;
}

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

/* ============================================================================
   LOGIN PAGE
   ============================================================================ */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

.login-box {
    background: rgba(30, 30, 50, 0.8);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 3rem;
    max-width: 500px;
    text-align: center;
    backdrop-filter: blur(10px);
}

.login-box h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #00d9ff, #0099ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-box > p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.login-features {
    background: rgba(0, 153, 255, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    text-align: left;
}

.feature {
    padding: 0.5rem 0;
    color: #00d9ff;
    font-size: 0.95rem;
}

.privacy-note {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ============================================================================
   TABS
   ============================================================================ */

.main-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
    overflow-x: auto;
    flex-wrap: wrap;
}

.main-tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.main-tab-btn.active {
    color: #00d9ff;
    border-bottom-color: #00d9ff;
}

.main-tab-btn:hover {
    color: #00d9ff;
}

.main-tab-content {
    display: none !important;
    animation: fadeIn 0.3s ease;
}

.main-tab-content.active {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================================
   ANTI-FLASH BOOT STATE
   Driven by the inline boot script in index.html (sets data-boot / data-tab on
   <html>). Shows the correct page + last-used tab on the very first paint so a
   refresh no longer flashes the login/dashboard before the async session check
   restores your tab. Only applies until script.js adds <html class="js-ready">,
   after which the normal .active rules take over (so tab switching still works).
   ============================================================================ */
html:not(.js-ready)[data-boot="login"] #appPage { display: none !important; }
html:not(.js-ready)[data-boot="app"] #loginPage { display: none !important; }
html:not(.js-ready)[data-boot="app"] #appPage { display: block !important; }
html:not(.js-ready)[data-boot="app"] .main-tab-content { display: none !important; }
html:not(.js-ready)[data-boot="app"][data-tab="dashboard"] #dashboard,
html:not(.js-ready)[data-boot="app"][data-tab="profiles"] #profiles,
html:not(.js-ready)[data-boot="app"][data-tab="generator"] #generator,
html:not(.js-ready)[data-boot="app"][data-tab="applications"] #applications,
html:not(.js-ready)[data-boot="app"][data-tab="history"] #history,
html:not(.js-ready)[data-boot="app"][data-tab="settings"] #settings { display: block !important; }

.main-tab-content h2 {
    margin-bottom: 1.5rem;
    color: #00d9ff;
    font-size: 1.8rem;
}

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 1rem;
}

.tab-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 0.6rem 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.tab-btn.active {
    color: #00d9ff;
    border-bottom-color: #0099ff;
}

/* ============================================================================
   FORMS
   ============================================================================ */

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #00d9ff;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #0099ff;
    background: rgba(0, 153, 255, 0.05);
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.2);
}

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

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.checkbox:hover {
    background: rgba(0, 153, 255, 0.1);
}

.checkbox input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
    accent-color: #0099ff;
}

.radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.radio input[type="radio"] {
    accent-color: #0099ff;
}

/* ============================================================================
   DASHBOARD
   ============================================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: start;
}
.dashboard-card--full { grid-column: 1 / -1; }
.dash-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.dash-card-head h3 { margin: 0; }
.dash-pill {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00e08a;
    background: rgba(0, 224, 138, 0.12);
    border: 1px solid rgba(0, 224, 138, 0.35);
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* Compact, grouped AI engine chips (dashboard) */
.ai-engine-groups { display: flex; flex-direction: column; gap: 1rem; }
.ai-engine-empty { color: var(--text-muted); font-size: 0.9rem; }
.ai-engine-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.ai-engine-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}
.ai-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.ai-chip:hover { transform: translateY(-1px); border-color: rgba(0, 217, 255, 0.5); background: rgba(0, 217, 255, 0.06); }
.ai-chip-dot {
    width: 9px; height: 9px; border-radius: 50%;
    flex: 0 0 auto;
    background: #4b5563;
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.18);
}
.ai-chip.on { border-color: rgba(0, 224, 138, 0.4); }
.ai-chip.on .ai-chip-dot { background: #00e08a; box-shadow: 0 0 0 3px rgba(0, 224, 138, 0.2); }
.ai-chip.err { border-color: rgba(255, 92, 92, 0.45); }
.ai-chip.err .ai-chip-dot { background: #ff5c5c; box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.22); }
.ai-chip.err .ai-chip-meta { color: #ff9a9a; }
.ai-chip-body { display: flex; flex-direction: column; min-width: 0; }
.ai-chip-name { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-chip-meta { font-size: 0.68rem; color: var(--text-muted); }
.ai-chip.on .ai-chip-meta { color: #7fe9c0; }
.ai-engine-foot {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ai-engine-foot a { color: #00d9ff; }

.dashboard-card {
    background: rgba(30, 30, 50, 0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.dashboard-card:hover {
    background: rgba(30, 30, 50, 0.8);
    border-color: rgba(0, 153, 255, 0.5);
}

.dashboard-card h3 {
    color: #00d9ff;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(100, 200, 255, 0.1);
}

.stat-value {
    font-weight: 700;
    color: #00d9ff;
}

.ai-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(0, 153, 255, 0.05);
    border-radius: 6px;
    font-size: 0.9rem;
}

.ai-status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.ai-status-item.ai-off { opacity: 0.7; }
.ai-status-item.ai-ok .ai-status-badge { color: #00e08a; }
.ai-status-item.ai-off .ai-status-badge { color: var(--text-muted); }

.ai-status-foot {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ai-status-foot a { color: #00d9ff; }

/* Credits & Usage card */
.usage-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.usage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: rgba(0, 153, 255, 0.05);
    border-radius: 6px;
    font-size: 0.88rem;
}

.usage-name { font-weight: 600; }

.usage-meta {
    color: var(--text-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
}

.usage-free { color: #00e08a; font-weight: 600; }

.usage-total {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border);
    font-size: 0.88rem;
}

.usage-note {
    margin-top: 0.5rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.badge-connected {
    background: rgba(0, 204, 0, 0.2);
    color: #00cc00;
}

.badge-disconnected {
    background: rgba(255, 50, 50, 0.2);
    color: #ff3232;
}

/* ============================================================================
   PROFILES
   ============================================================================ */

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

.profile-form {
    background: rgba(30, 30, 50, 0.4);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

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

.profile-card {
    background: rgba(30, 30, 50, 0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.profile-card:hover {
    background: rgba(30, 30, 50, 0.8);
    border-color: rgba(0, 153, 255, 0.5);
}

.profile-card h4 {
    color: #00d9ff;
    margin-bottom: 0.5rem;
}

.profile-card .profile-detail {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.profile-card-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.profile-card-buttons button {
    flex: 1;
    padding: 0.5rem;
    font-size: 0.85rem;
}

/* ============================================================================
   GENERATOR
   ============================================================================ */

.mode-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.mode-btn {
    background: rgba(30, 30, 50, 0.6);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.mode-btn:hover {
    background: rgba(30, 30, 50, 0.8);
    border-color: rgba(0, 153, 255, 0.5);
}

.mode-btn.active {
    background: rgba(0, 153, 255, 0.15);
    border-color: #0099ff;
}

.mode-icon {
    font-size: 2rem;
}

.mode-name {
    font-weight: 700;
    color: #00d9ff;
}

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

.generator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.generator-step {
    background: rgba(30, 30, 50, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
}

.generator-step h3 {
    color: #00d9ff;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.input-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.input-tab {
    flex: 1;
    padding: 0.5rem;
    background: rgba(100, 100, 120, 0.2);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.input-tab.active {
    background: rgba(0, 153, 255, 0.3);
    color: #00d9ff;
    border-color: #0099ff;
}

.jd-input {
    display: none;
}

.jd-input.active {
    display: block;
}

/* Step 2 combined inputs: helper text + side-by-side link row */
.step-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.step-hint code {
    background: rgba(0, 153, 255, 0.12);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    color: #00d9ff;
}

label .optional {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.jd-url-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.jd-url-row input {
    flex: 1;
    min-width: 0;
}

.jd-url-row .btn {
    white-space: nowrap;
    flex: 0 0 auto;
}

.bulk-job-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem;
    margin-bottom: 0.75rem;
    background: rgba(18, 20, 38, 0.45);
}

.bulk-job-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.bulk-job-num {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.bulk-job-remove {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 6px;
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-job-remove:hover {
    border-color: #ff5a7a;
    color: #ff5a7a;
}

.bulk-job-card .jd-url-row {
    margin-bottom: 0.5rem;
}

.cost-box {
    background: rgba(0, 153, 255, 0.05);
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius: 6px;
    padding: 1rem;
    color: #00d9ff;
    font-weight: 600;
}

/* ============================================================================
   GENERATOR FORM CONTROLS — unified dark theme for all selects/inputs/textareas
   (these live outside .form-group so they need explicit styling)
   ============================================================================ */

.generator-step select,
.generator-step input,
.generator-step textarea,
.jd-input select,
.jd-input input,
.jd-input textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: rgba(18, 20, 38, 0.95);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.generator-step select,
.jd-input select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%2300d9ff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
}

/* Dropdown option list — force dark so it isn't white-on-white */
.generator-step select option,
.jd-input select option,
.form-group select option,
select option {
    background: #14162a;
    color: #e6e6e6;
}

.generator-step select:focus,
.generator-step input:focus,
.generator-step textarea:focus,
.jd-input select:focus,
.jd-input input:focus,
.jd-input textarea:focus {
    outline: none;
    border-color: #0099ff;
    box-shadow: 0 0 8px rgba(0, 153, 255, 0.25);
}

/* JD paste box: resize vertically only, never overflow into other columns */
#jdText,
#bulkJDs {
    resize: vertical;
    min-height: 180px;
    max-height: 600px;
    max-width: 100%;
    line-height: 1.45;
}

/* URL field: keep button on one line, let input flex and show full link */
#urlJD {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

#urlJD input {
    flex: 1;
    min-width: 0;
    text-overflow: ellipsis;
}

#urlJD .btn,
#urlJD button {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================================
   HISTORY
   ============================================================================ */

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

.history-card {
    background: rgba(30, 30, 50, 0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.history-card:hover {
    background: rgba(30, 30, 50, 0.8);
    transform: translateY(-4px);
    border-color: rgba(0, 153, 255, 0.5);
}

.history-card h4 {
    color: #00d9ff;
    margin-bottom: 0.5rem;
}

.history-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Generation History table */
.hist-table-wrap {
    grid-column: 1 / -1;
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(30, 30, 50, 0.5);
}
.hist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    min-width: 760px;
}
.hist-table thead th {
    text-align: left;
    padding: 0.75rem 0.9rem;
    color: #00d9ff;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    background: rgba(0, 217, 255, 0.05);
}
.hist-table tbody td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    vertical-align: top;
}
.hist-table tbody tr:hover {
    background: rgba(0, 153, 255, 0.06);
}
.hist-status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.hist-ok { background: rgba(0, 204, 0, 0.15); color: #5ee65e; border: 1px solid rgba(0, 204, 0, 0.4); }
.hist-fail { background: rgba(255, 60, 60, 0.15); color: #ff7a7a; border: 1px solid rgba(255, 60, 60, 0.4); }
.hist-run { background: rgba(255, 193, 7, 0.15); color: #ffd24a; border: 1px solid rgba(255, 193, 7, 0.4); }
.hist-muted { background: rgba(160, 160, 160, 0.15); color: #b8b8b8; border: 1px solid rgba(160, 160, 160, 0.35); }
.hist-details { max-width: 320px; }
.hist-err { color: #ff9a9a; }
.hist-actions { white-space: nowrap; }
.hist-actions .action-btn { margin: 0.1rem; }
.hist-link { color: #38e0ff; font-weight: 600; text-decoration: none; }
.hist-link:hover { text-decoration: underline; }

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

.settings-section {
    background: rgba(30, 30, 50, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.settings-section h3 {
    color: #00d9ff;
    margin-bottom: 1rem;
}

.ai-providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.ai-provider-card {
    background: rgba(30, 30, 50, 0.6);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.ai-provider-card:hover {
    border-color: rgba(0, 217, 255, 0.35);
}

/* Full-width banner row + the richer (Ollama / Custom) cards span all columns */
.ai-providers-grid > .ai-keys-privacy,
.ai-providers-grid > .settings-section-label,
.ai-providers-grid > .pk-chain-note,
.ai-provider-card--wide {
    grid-column: 1 / -1;
}

/* Step-by-step section headers in Settings */
.settings-section-label {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 1rem;
    font-weight: 700;
    color: #00d9ff;
    margin: 0.6rem 0 0.2rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.settings-section-label:first-of-type { border-top: none; padding-top: 0; }
.ssl-note {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}
.pk-chain-note {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    background: rgba(0, 217, 255, 0.06);
    border: 1px solid rgba(0, 217, 255, 0.25);
    border-radius: 10px;
    padding: 0.7rem 0.9rem;
}

/* Compact key-provider card with saved indicator + age */
.pk-card { padding: 1rem 1.1rem; }
.pk-card.pk-on { border-color: rgba(0, 224, 138, 0.4); background: rgba(0, 224, 138, 0.05); }
.pk-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.pk-dot {
    width: 9px; height: 9px; border-radius: 50%;
    flex: 0 0 auto;
    background: #4b5563;
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.18);
}
.pk-card.pk-on .pk-dot { background: #00e08a; box-shadow: 0 0 0 3px rgba(0, 224, 138, 0.22); }
/* Standalone dot state classes (used in card headings + key cards) */
.pk-dot.on { background: #00e08a; box-shadow: 0 0 0 3px rgba(0, 224, 138, 0.22); }
.pk-dot.err { background: #ff5c5c; box-shadow: 0 0 0 3px rgba(255, 92, 92, 0.25); }
.pk-card.pk-err { border-color: rgba(255, 92, 92, 0.5); background: rgba(255, 92, 92, 0.05); }
.ai-provider-card h4 .pk-dot { display: inline-block; vertical-align: middle; margin-right: 7px; }
.pk-status-err { color: #ff9a9a !important; white-space: normal !important; }
.pk-health-note { color: #ff9a9a; font-size: 0.8rem; margin-top: 0.4rem; }
.pk-name { font-weight: 700; font-size: 0.95rem; }
.pk-badge {
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pk-free { color: #00e08a; background: rgba(0, 224, 138, 0.12); border: 1px solid rgba(0, 224, 138, 0.35); }
.pk-paid { color: #ffcf5a; background: rgba(255, 193, 7, 0.12); border: 1px solid rgba(255, 193, 7, 0.4); }
.pk-status { font-size: 0.72rem; color: #7fe9c0; margin-left: auto; white-space: nowrap; }
.pk-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
.pk-row input { flex: 1 1 200px; min-width: 0; }
.pk-remove {
    background: rgba(220, 38, 38, 0.14);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: #ff9a9a;
}
.pk-remove:hover { background: rgba(220, 38, 38, 0.25); }

.ai-provider-card h4 {
    color: #00d9ff;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Links inside provider cards need a bright, readable color on the dark card */
.ai-provider-card a {
    color: #38e0ff;
    text-decoration: underline;
    font-weight: 600;
}
.ai-provider-card a:hover {
    color: #8af3ff;
}

/* Tidy, aligned layout for the Ollama cloud card (and the others) */
.ai-provider-card p {
    line-height: 1.55;
    margin-bottom: 0.75rem;
}
.ai-provider-card .form-group {
    margin-bottom: 0.9rem;
}
.ai-provider-card .form-group label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    color: #cfe9ff;
}
.ai-provider-card .form-row {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.9rem;
}
.ai-provider-card input,
.ai-provider-card select {
    width: 100%;
    box-sizing: border-box;
}
.ai-provider-card .btn {
    margin: 0.25rem 0.5rem 0.25rem 0;
    vertical-align: middle;
}
.ai-provider-card small {
    display: block;
    margin-top: auto;
    padding-top: 0.85rem;
    color: #9fb3c8;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Short "Get your API key ↗" link so long provider URLs never overflow the card */
.pk-keylink {
    display: inline-block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    white-space: nowrap;
}

/* Actionable failure card for the Ollama cloud generator */
.cloud-error {
    color: #f3d9d9;
    line-height: 1.6;
}
.cloud-error a {
    color: #38e0ff;
    font-weight: 600;
    text-decoration: underline;
}
.cloud-error-steps {
    margin: 0.4rem 0 0.6rem 1.1rem;
    padding: 0;
    color: #e6e6e6;
}
.cloud-error-steps li {
    margin-bottom: 0.5rem;
}
.cloud-error-cost {
    background: rgba(0, 204, 0, 0.08);
    border: 1px solid rgba(0, 204, 0, 0.25);
    border-radius: 6px;
    padding: 0.7rem 0.9rem;
    color: #cfeccf;
    margin-top: 0.6rem;
}

.provider-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3232;
}

.status-indicator.connected {
    background: #00cc00;
}

/* ============================================================================
   STATUS BOX & DOWNLOADS
   ============================================================================ */

.status-box {
    background: rgba(0, 153, 255, 0.05);
    border: 1px solid rgba(0, 153, 255, 0.2);
    border-radius: 8px;
    padding: 1.5rem;
}

.status-box.success {
    background: rgba(0, 204, 0, 0.05);
    border-color: rgba(0, 204, 0, 0.2);
}

.status-box.error {
    background: rgba(255, 50, 50, 0.05);
    border-color: rgba(255, 50, 50, 0.2);
}

#statusContent {
    color: #00d9ff;
    line-height: 1.8;
}

/* Ollama cloud generator — live progress card */
.cloud-progress {
    background: rgba(0, 217, 255, 0.05);
    border: 1px solid rgba(0, 217, 255, 0.25);
    border-radius: 10px;
    padding: 1.25rem 1.4rem;
    color: #e6e6e6;
}
.cloud-progress-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #00d9ff;
    font-size: 0.98rem;
    margin-bottom: 0.5rem;
}
.cloud-progress-msg {
    margin: 0.25rem 0 0.75rem;
    color: #cfe9ff;
    font-size: 0.95rem;
}
.cloud-progress-track {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    height: 10px;
    width: 100%;
    overflow: hidden;
}
.cloud-progress-fill {
    background: linear-gradient(90deg, #00b3ff, #00d9ff);
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width 0.5s ease;
}
.cloud-progress small {
    display: block;
    margin-top: 0.75rem;
    color: #9fb3c8;
    line-height: 1.5;
}
.cloud-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 217, 255, 0.3);
    border-top-color: #00d9ff;
    border-radius: 50%;
    display: inline-block;
    animation: cloud-spin 0.8s linear infinite;
}
@keyframes cloud-spin {
    to { transform: rotate(360deg); }
}

.download-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.download-item {
    background: rgba(0, 204, 0, 0.05);
    border: 1px solid rgba(0, 204, 0, 0.3);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.download-item h4 {
    color: #00d9ff;
    margin-bottom: 0.5rem;
}

.download-item a {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #00cc00, #00aa00);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.download-item a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 204, 0, 0.3);
}

/* ============================================================================
   MODAL
   ============================================================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: rgba(30, 30, 50, 0.95);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    backdrop-filter: blur(10px);
}

.modal-close {
    float: right;
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s ease;
}

.modal-close:hover {
    color: #00d9ff;
}

/* ============================================================================
   COLLAPSIBLE & UTILITY
   ============================================================================ */

.collapsible-section {
    background: rgba(30, 30, 50, 0.4);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(100, 100, 120, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0099ff, #00d9ff);
    width: 0%;
    transition: width 0.3s ease;
}

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

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

/* ============================================================================
   FOOTER
   ============================================================================ */

.footer {
    background: rgba(10, 10, 20, 0.95);
    border-top: 1px solid var(--border);
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    margin-top: 0;
    flex-shrink: 0;
}

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

@media (max-width: 768px) {
    .nav-container {
        padding: 0 1rem;
    }

    .logo {
        font-size: 1.2rem;
    }

    .nav-right {
        gap: 0.5rem;
    }

    .container {
        padding: 1rem;
    }

    .main-tabs {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .main-tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    .generator-grid,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .button-group {
        flex-direction: column;
    }

    .button-group .btn {
        width: 100%;
    }

    .login-box {
        padding: 2rem;
        margin: 1rem;
    }

    .modal-content {
        width: 95%;
    }
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.text-center {
    text-align: center;
}

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

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* ============================================================================
   JOB TRACKER STYLES
   ============================================================================ */

.tracker-container {
    max-width: 1200px;
    margin: 0 auto;
}

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

.tracker-header h2 {
    margin: 0;
    color: var(--primary);
}

.tracker-controls {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.last-updated {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.tracker-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border);
}

.tracker-tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
}

.tracker-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tracker-tab-btn:hover {
    color: var(--primary);
}

.tracker-tab-content {
    display: none;
}

.tracker-tab-content.active {
    display: block;
}

/* Toolbar */
.tracker-toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-input,
.filter-select {
    padding: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
}

.search-input {
    flex: 1;
    min-width: 200px;
}

.filter-select {
    min-width: 150px;
}

/* Statistics */
.app-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-badge {
    padding: 1rem;
    background: var(--card-bg);
    border-left: 4px solid var(--primary);
    border-radius: 6px;
    text-align: center;
}

.stat-badge-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary);
}

.stat-badge-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

/* Applications Table */
.applications-table-wrapper {
    background: var(--card-bg);
    border-radius: 8px;
    overflow: hidden;
}

.applications-table {
    width: 100%;
    border-collapse: collapse;
}

.applications-table th {
    background: rgba(0, 200, 255, 0.1);
    padding: 1rem;
    text-align: left;
    color: var(--primary);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
    cursor: pointer;
}

.applications-table th:hover {
    background: rgba(0, 200, 255, 0.15);
}

.applications-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.applications-table tr:hover {
    background: rgba(100, 200, 255, 0.05);
}

.status-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============================================================================
   GITHUB TOKEN MODAL
   ============================================================================ */

.github-token-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(5px);
}

.github-token-modal.visible {
    opacity: 1;
}

.github-token-modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2.5rem;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: slideUp 0.3s ease;
    position: relative;
}

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

.github-token-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.github-token-modal-close:hover {
    color: var(--primary);
}

.github-token-modal-content h2 {
    color: var(--primary);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.github-token-modal-content > p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.github-token-input-group {
    margin-bottom: 1.5rem;
}

.github-token-input-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.github-token-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(100, 200, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.github-token-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(100, 200, 255, 0.1);
    box-shadow: 0 0 0 3px rgba(0, 153, 255, 0.1);
}

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

.github-token-help {
    background: rgba(0, 200, 255, 0.05);
    border-left: 4px solid var(--secondary);
    padding: 1.2rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.github-token-help p {
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
}

.github-token-help p:first-child {
    font-weight: 600;
    color: var(--text-primary);
}

.github-token-help ol {
    margin-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.github-token-help li {
    margin-bottom: 0.4rem;
}

.github-token-help a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.github-token-help a:hover {
    text-decoration: underline;
}

.github-token-help code {
    background: rgba(100, 200, 255, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    color: var(--secondary);
}

.github-token-privacy {
    margin: 1rem 0 1.25rem;
    padding: 0.75rem 0.9rem;
    background: rgba(0, 224, 138, 0.08);
    border: 1px solid rgba(0, 224, 138, 0.25);
    border-radius: 6px;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.github-token-privacy strong {
    color: #00e08a;
}

.ai-keys-privacy {
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    background: rgba(0, 224, 138, 0.08);
    border: 1px solid rgba(0, 224, 138, 0.25);
    border-radius: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.ai-keys-privacy strong {
    color: #00e08a;
}

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

.github-token-submit,
.github-token-cancel {
    flex: 1;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

/* ============================================================================
   PHASE 8: MULTI-PHONE + VOICE RECORDING STYLES
   ============================================================================ */

.contact-phone {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.contact-phone a {
    color: var(--secondary);
    text-decoration: none;
}

.contact-phone a:hover {
    text-decoration: underline;
}

.resume-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: rgba(0, 204, 0, 0.15);
    color: var(--success);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.voice-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: rgba(0, 153, 255, 0.15);
    color: var(--primary);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

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

#voiceRecordBtn.recording {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        background: #ff3232;
        box-shadow: 0 0 0 0 rgba(255, 50, 50, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 50, 50, 0);
    }
}

#voiceTimer {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--secondary);
    min-width: 60px;
    font-family: 'Courier New', monospace;
}

audio {
    border-radius: 6px;
}

.btn.btn-info {
    background: rgba(0, 153, 255, 0.2);
    color: var(--secondary);
    border: 1px solid var(--secondary);
}

.btn.btn-info:hover {
    background: var(--primary);
    color: white;
}

.btn.btn-danger {
    background: #ff3232;
    color: white;
}

.btn.btn-danger:hover {
    background: #dd0000;
    transform: translateY(-1px);
}
    cursor: pointer;
    transition: all 0.2s;
}

.github-token-submit {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
}

.github-token-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 153, 255, 0.3);
}

.github-token-submit:active {
    transform: translateY(0);
}

.github-token-cancel {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.github-token-cancel:hover {
    background: rgba(100, 200, 255, 0.05);
    color: var(--text-primary);
}

.status-applied {
    background: rgba(0, 153, 255, 0.2);
    color: #00d9ff;
}

.status-interviewing {
    background: rgba(255, 170, 0, 0.2);
    color: #ffaa00;
}

.status-offered {
    background: rgba(0, 204, 0, 0.2);
    color: #00cc00;
}

.status-rejected {
    background: rgba(255, 50, 50, 0.2);
    color: #ff3232;
}

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

.action-btn {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s;
}

.action-btn:hover {
    color: var(--secondary);
    transform: scale(1.2);
}

/* Contacts Grid */
.contacts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.contact-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
    transition: all 0.3s;
}

.contact-card:hover {
    box-shadow: 0 8px 24px rgba(0, 200, 255, 0.1);
    transform: translateY(-4px);
}

.contact-card h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.contact-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
}

.contact-info a {
    color: var(--primary);
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Portfolio Guide */
.portfolio-guide-section {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.portfolio-item {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 8px;
    border-top: 4px solid var(--primary);
}

.portfolio-item h3 {
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.portfolio-count {
    display: inline-block;
    background: var(--primary);
    color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-left: 0.5rem;
}

.portfolio-link {
    display: block;
    color: var(--secondary);
    text-decoration: none;
    margin-top: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* ========================================================================
   Extraction preview · Profile preview · JD match card
   ======================================================================== */
.extraction-preview,
.profile-preview {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
}
.pp-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}
.pp-contact { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 0.5rem; }
.pp-muted, .pp-exp .pp-muted { color: var(--text-muted); }
.pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.pill-ok { background: rgba(46, 160, 67, 0.18); color: #4ade80; border: 1px solid rgba(46, 160, 67, 0.4); }
.pill-warn { background: rgba(210, 153, 34, 0.18); color: #fbbf24; border: 1px solid rgba(210, 153, 34, 0.4); }
.pp-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin: 0.4rem 0 0.6rem;
    font-size: 0.82rem;
}
.px { font-weight: 800; }
.px-ok { color: #4ade80; }
.px-no { color: var(--text-muted); }
.pp-sec { margin-top: 0.55rem; }
.pp-label, .mc-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.pp-text { margin: 0; line-height: 1.45; }
.pp-exp { margin-bottom: 0.4rem; line-height: 1.4; }
.pp-empty-note {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.7rem;
    background: rgba(210, 153, 34, 0.1);
    border: 1px solid rgba(210, 153, 34, 0.3);
    border-radius: 8px;
    font-size: 0.83rem;
    line-height: 1.45;
}
.pp-raw { margin-top: 0.6rem; }
.pp-raw summary { cursor: pointer; color: var(--text-muted); font-size: 0.82rem; }
.pp-raw pre {
    margin-top: 0.4rem;
    max-height: 240px;
    overflow: auto;
    padding: 0.6rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.78rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip {
    font-size: 0.76rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(100, 200, 255, 0.12);
    border: 1px solid var(--border);
}
.chip-miss { background: rgba(229, 83, 75, 0.14); border-color: rgba(229, 83, 75, 0.4); color: #fca5a5; }
.chip-hit { background: rgba(46, 160, 67, 0.14); border-color: rgba(46, 160, 67, 0.4); color: #86efac; }

.match-card {
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.mc-top { display: flex; align-items: center; gap: 1rem; }
.mc-ring {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    flex: 0 0 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-ring-inner {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.05rem;
}
.mc-title { font-weight: 700; }
.mc-sub { font-weight: 600; font-size: 0.85rem; margin: 0.1rem 0; }
.mc-meta { color: var(--text-muted); font-size: 0.82rem; }
.mc-sec { margin-top: 0.7rem; }
.mc-foot { margin: 0.7rem 0 0; color: var(--text-muted); font-size: 0.76rem; line-height: 1.4; }

/* Learning resources list (missing-skill → free links) */
.learn-box { margin-top: 0.7rem; }
.learn-box > summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: #7dd3fc;
    padding: 0.2rem 0;
}
.learn-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.learn-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border);
}
.learn-list li:first-child { border-top: none; }
.learn-kw {
    font-weight: 700;
    min-width: 140px;
    text-transform: capitalize;
}
.learn-links { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.learn-links a {
    font-size: 0.74rem;
    padding: 0.12rem 0.5rem;
    border-radius: 6px;
    background: rgba(100, 200, 255, 0.1);
    border: 1px solid var(--border);
    color: #9fd3ff;
    text-decoration: none;
    white-space: nowrap;
}
.learn-links a:hover { background: rgba(100, 200, 255, 0.22); }
.result-card { border-color: rgba(100, 200, 255, 0.45); }

/* Step 4 two-column layout (file options | résumé template gallery) */
.generator-step--full { grid-column: 1 / -1; }
.step4-cols { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.6fr); gap: 1.3rem; align-items: start; }
@media (max-width: 760px) { .step4-cols { grid-template-columns: 1fr; } }
.step4-right > label { display: block; margin-bottom: 0.4rem; }
.resume-filter {
    width: 100%;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.55rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: inherit;
    font-size: 0.85rem;
}
.resume-gallery-scroll {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.3rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.18);
}

/* Résumé template "zoomed" live preview */
.resume-preview {
    margin: 0.5rem 0 0.6rem;
    padding: 0.7rem 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    text-align: center;
}
.rtp-head {
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
}
.rtp-eye { font-size: 0.68rem; color: var(--text-muted); }
.rtp-name { font-size: 0.95rem; font-weight: 700; }
.rtp-tags { font-size: 0.7rem; color: var(--text-muted); }
.rtp-stage { display: flex; justify-content: center; }
.rtp-stage svg.rc-thumb {
    width: 270px;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}
.rtp-desc { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.55rem; }

/* Résumé template VISUAL gallery (rendered thumbnails, like Word/Docs) */
.resume-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.6rem;
}
.resume-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    padding: 0.45rem 0.4rem 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: transform .08s ease, border-color .1s ease, box-shadow .1s ease;
}
.resume-card:hover { transform: translateY(-2px); border-color: rgba(100, 200, 255, 0.55); }
.resume-card.selected { border-color: #4ade80; box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4); }
.rc-thumb-wrap { width: 100%; display: block; }
.rc-thumb { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.4); }
.rc-name { font-size: 0.74rem; font-weight: 600; text-align: center; line-height: 1.15; }
.rc-tags { font-size: 0.62rem; color: var(--text-muted); text-align: center; }
.rc-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    background: #1a73e8;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    z-index: 1;
}
.rc-badge-custom { background: #7c3aed; }

/* Custom résumé builder (layout + accent palette) */
.resume-custom-builder {
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid rgba(124, 58, 237, 0.5);
    border-radius: 10px;
}
.rcb-title { font-weight: 700; margin-bottom: 0.5rem; font-size: 0.9rem; }
.rcb-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.35rem 0; flex-wrap: wrap; }
.rcb-label { font-size: 0.75rem; color: var(--text-muted); min-width: 56px; }
.rcb-opts { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.rcb-chip {
    font-size: 0.74rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(100, 200, 255, 0.1);
    border: 1px solid var(--border);
    color: inherit;
    cursor: pointer;
}
.rcb-chip.on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.rcb-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
}
.rcb-swatch.on { border-color: #fff; box-shadow: 0 0 0 2px #7c3aed; }
.rcb-pick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-weight: 700;
    position: relative;
    overflow: hidden;
}
.rcb-pick input[type="color"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Density + photo extra options (Step 4) */
.resume-extra-opts {
    margin-top: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.reo-row { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0; flex-wrap: wrap; }
.reo-label { font-size: 0.75rem; color: var(--text-muted); min-width: 56px; font-weight: 600; }
.reo-radio { font-size: 0.78rem; display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; white-space: nowrap; }
.reo-two { display: inline-block; line-height: 1.15; }
.reo-file { font-size: 0.74rem; max-width: 230px; }
.reo-hint { font-size: 0.72rem; color: var(--text-muted); }
.reo-clear {
    font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.4);
    color: inherit;
    cursor: pointer;
}

/* Dark dropdown group headers (portfolio template select) so the bright
   default optgroup labels don't clash with the dark theme. */
#portfolioTemplate optgroup {
    background: #0f1420;
    color: #8b97a8;
    font-weight: 700;
    font-style: normal;
}
#portfolioTemplate option {
    background: #161c28;
    color: #e6e9ef;
    font-weight: 400;
}


.modal.active {
    display: flex;
}

#settingsModal {
    display: none !important;
}

.modal-content {
    background: var(--card-bg);
    padding: 2rem;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

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

.modal-header h3 {
    margin: 0;
    color: var(--primary);
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

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

.modal-form .form-group {
    margin-bottom: 1rem;
}

.modal-form label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.modal-form input,
.modal-form textarea,
.modal-form select {
    width: 100%;
    padding: 0.75rem;
    background: var(--dark-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
}

.modal-form input:focus,
.modal-form textarea:focus,
.modal-form select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 8px rgba(0, 200, 255, 0.2);
}

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

.modal-footer .btn {
    flex: 1;
}

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

.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 240px;
    max-width: 360px;
    padding: 0.85rem 1.1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
}

.toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.toast-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.toast-message {
    flex: 1;
}

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

@media (max-width: 768px) {
    .toast-container {
        top: auto;
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
    }
    .toast {
        min-width: 0;
        max-width: none;
    }
}

/* ============================================================================
   LIGHT THEME — toggled from the navbar (☀️/🌙). data-theme="light" on <html>,
   set before first paint by the boot script. Overrides the CSS variables plus
   the surfaces/accents that hard-code dark values.
   ============================================================================ */
html[data-theme="light"] {
    --primary: #0066d6;
    --primary-dark: #0050b0;
    --secondary: #0a7ea4;
    --dark-bg: #eef1f6;
    --card-bg: #ffffff;
    --border: rgba(20, 40, 80, 0.14);
    --text-primary: #1a2230;
    --text-secondary: #4a5568;
    --text-muted: #6b7280;
}

html[data-theme="light"] body {
    background: linear-gradient(135deg, #eef1f6 0%, #e6ecf5 100%);
    color: var(--text-primary);
}

html[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.92);
}

/* Surfaces that hard-code a dark rgba background */
html[data-theme="light"] .login-box,
html[data-theme="light"] .dashboard-card,
html[data-theme="light"] .ai-provider-card,
html[data-theme="light"] .settings-section,
html[data-theme="light"] .cost-box,
html[data-theme="light"] .status-box,
html[data-theme="light"] .generator-step,
html[data-theme="light"] .github-token-modal-content,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .settings-menu {
    background: #ffffff;
    border-color: var(--border);
}

html[data-theme="light"] .ai-provider-card { background: #f8fafc; }

/* Form controls */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
    background: #ffffff !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #9aa3b0; }

/* Accent text that was hard-coded cyan (#00d9ff) for the dark background */
html[data-theme="light"] .dashboard-card h3,
html[data-theme="light"] .ai-provider-card h4,
html[data-theme="light"] .generator-step h3,
html[data-theme="light"] .stat-value,
html[data-theme="light"] .main-tab-btn.active,
html[data-theme="light"] .main-tab-btn:hover,
html[data-theme="light"] .settings-menu a:hover,
html[data-theme="light"] .settings-menu button:hover,
html[data-theme="light"] .ai-status-foot a {
    color: var(--primary);
}
html[data-theme="light"] .main-tab-btn.active { border-bottom-color: var(--primary); }

/* Secondary/icon buttons rely on dark/transparent backgrounds */
html[data-theme="light"] .btn-secondary {
    background: #eef2f7;
    color: var(--text-primary);
    border: 1px solid var(--border);
}
html[data-theme="light"] .btn-icon { color: var(--text-primary); }

/* Generic dark code/preview surfaces */
html[data-theme="light"] .code-block,
html[data-theme="light"] pre {
    background: #f4f6f8;
    color: #1f2630;
    border-color: var(--border);
}

/* Headings/body text default to the readable primary text colour */
html[data-theme="light"] .main-tab-content h2,
html[data-theme="light"] .settings-section h3,
html[data-theme="light"] .modal h2,
html[data-theme="light"] .modal h3 {
    color: var(--text-primary);
}

/* The navbar theme button should read on both themes */
html[data-theme="light"] #themeToggleBtn { color: #1a2230; }

/* ============================================================================
   ONBOARDING: getting-started banner, inline notes, Help FAB + Help/FAQ modal
   ============================================================================ */
.getting-started {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.getting-started h3 { color: var(--primary); margin-bottom: 1rem; }
.gs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.gs-head h3 { margin-bottom: 0; }
.gs-tour-btn {
    font-size: 0.82rem; font-weight: 600;
    padding: 0.4rem 0.95rem; border-radius: 999px; cursor: pointer;
    color: #38e0ff; background: rgba(56, 224, 255, 0.1);
    border: 1px solid rgba(56, 224, 255, 0.45);
    white-space: nowrap;
    transition: background .12s ease, transform .08s ease;
}
.gs-tour-btn:hover { background: rgba(56, 224, 255, 0.2); transform: translateY(-1px); }
.gs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-top: 1rem; }
.gs-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.gs-num {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    background: var(--primary); color: #fff; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem;
}
.gs-body strong { display: block; margin-bottom: 0.25rem; color: var(--text-primary); }
.gs-body p { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.6rem; line-height: 1.45; }
.gs-help { margin-top: 1rem; font-size: 0.85rem; color: var(--text-secondary); }
.getting-started a { color: var(--primary); }

/* ============================================================================
   GUIDED TOUR ("Rae") — spotlight overlay + coach-mark bubble
   ============================================================================ */
.tour-overlay { position: fixed; inset: 0; z-index: 100000; }
.tour-spot {
    position: fixed;
    border-radius: 12px;
    border: 2px solid #38e0ff;
    box-shadow: 0 0 0 9999px rgba(3, 6, 20, 0.72), 0 0 22px rgba(56, 224, 255, 0.55);
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
    pointer-events: none;
}
.tour-bubble {
    position: fixed;
    width: min(360px, 92vw);
    display: flex;
    gap: 0.8rem;
    background: #141a2b;
    border: 1px solid rgba(56, 224, 255, 0.4);
    border-radius: 14px;
    padding: 1rem 1.1rem 0.9rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    z-index: 100001;
}
.tour-bubble--center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); }
.tour-mascot {
    flex: 0 0 auto; width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; line-height: 1;
    background: radial-gradient(circle at 50% 40%, rgba(56, 224, 255, 0.28), rgba(56, 224, 255, 0.05));
    border-radius: 50%;
    animation: tourBob 1.8s ease-in-out infinite;
}
@keyframes tourBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tour-body { min-width: 0; flex: 1 1 auto; }
.tour-title { font-weight: 700; font-size: 1rem; color: #eaf2ff; margin-bottom: 0.28rem; }
.tour-text { font-size: 0.86rem; color: #b9c4d6; line-height: 1.5; }
/* Stack dots above the buttons so a long tour (many dots) never pushes the
   Skip/Back/Next controls outside the bubble. */
.tour-foot { display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem; margin-top: 0.85rem; }
.tour-dots { display: flex; flex-wrap: wrap; gap: 5px; }
.tour-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); flex: 0 0 auto; }
.tour-dot.on { background: #38e0ff; }
.tour-btns { display: flex; gap: 0.4rem; justify-content: flex-end; flex-wrap: wrap; }
.tour-btns button {
    font-size: 0.8rem; padding: 0.34rem 0.72rem; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: inherit;
}
.tour-btns .tour-next { background: #1a73e8; border-color: #1a73e8; color: #fff; font-weight: 600; }
.tour-btns .tour-next:hover { background: #1665d8; }
.tour-btns .tour-skip { color: #9aa7bd; }


.inline-note {
    margin-top: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 6px;
    font-size: 0.85rem; line-height: 1.5; border: 1px solid var(--border);
}
.inline-note code { background: rgba(127,127,127,0.18); padding: 0.1rem 0.35rem; border-radius: 3px; }
.inline-note--info { background: rgba(0,153,255,0.08); border-color: rgba(0,153,255,0.3); }
.inline-note--ok { background: rgba(0,224,138,0.08); border-color: rgba(0,224,138,0.3); }
.inline-note--warn { background: rgba(255,170,0,0.10); border-color: rgba(255,170,0,0.35); }

/* Small ⓘ helper button next to a form label + its togglable explanation */
.field-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; margin-left: 4px; padding: 0;
    border: 1px solid rgba(0,153,255,0.5); border-radius: 50%;
    background: rgba(0,153,255,0.12); color: #4db8ff;
    font-size: 0.72rem; line-height: 1; cursor: pointer;
    vertical-align: middle; transition: background 0.15s, color 0.15s;
}
.field-i:hover { background: rgba(0,153,255,0.28); color: #fff; }
.field-info-note {
    margin: 0.4rem 0 0.55rem; padding: 0.6rem 0.75rem;
    background: rgba(0,153,255,0.08); border: 1px solid rgba(0,153,255,0.28);
    border-radius: 8px; font-size: 0.82rem; line-height: 1.55; color: var(--text);
}
.field-info-note code { background: rgba(127,127,127,0.20); padding: 0.08rem 0.3rem; border-radius: 3px; }

.help-fab {
    position: fixed; right: 20px; bottom: 20px; z-index: 1200;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.65rem 1rem 0.65rem 0.85rem; border: none; border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif;
    box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.15s ease, filter 0.15s ease;
}
.help-fab:hover { filter: brightness(1.08); transform: translateY(-1px); }
.help-fab-q {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.25); font-size: 1rem;
}
@media (max-width: 600px) { .help-fab-label { display: none; } .help-fab { padding: 0.7rem; } }

/* "Tour this page" FAB — sits just above the Help FAB */
.tour-fab {
    position: fixed; right: 20px; bottom: 74px; z-index: 1200;
    display: none; align-items: center; gap: 0.45rem;
    padding: 0.6rem 1rem 0.6rem 0.8rem; border: 1px solid rgba(56, 224, 255, 0.5);
    border-radius: 999px;
    background: rgba(20, 26, 43, 0.95);
    color: #cdeffb; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, background 0.15s ease;
}
.tour-fab:hover { background: rgba(56, 224, 255, 0.18); transform: translateY(-1px); }
.tour-fab-ico { font-size: 1.05rem; line-height: 1; }
@media (max-width: 600px) { .tour-fab-label { display: none; } .tour-fab { padding: 0.6rem; bottom: 70px; } }

.help-modal {
    position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.6);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 4vh 1rem; overflow: auto;
}
.help-modal-box {
    position: relative; background: var(--card-bg); color: var(--text-primary);
    border: 1px solid var(--border); border-radius: 12px; max-width: 760px; width: 100%;
    padding: 2rem 2rem 2.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.help-modal-box h2 { color: var(--primary); margin-bottom: 0.75rem; }
.help-modal-box h3 { color: var(--secondary); margin: 1.5rem 0 0.5rem; font-size: 1.05rem; }
.help-modal-box p, .help-modal-box li { color: var(--text-secondary); line-height: 1.6; font-size: 0.92rem; }
.help-modal-box ol, .help-modal-box ul { padding-left: 1.4rem; margin: 0.4rem 0; }
.help-modal-box li { margin-bottom: 0.35rem; }
.help-modal-box a { color: var(--primary); }
.help-modal-box code { background: rgba(127,127,127,0.18); padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.85em; }
.help-lead { background: rgba(0,224,138,0.08); border: 1px solid rgba(0,224,138,0.25); border-radius: 8px; padding: 0.75rem 0.9rem; }
.help-tip { background: rgba(0,153,255,0.08); border: 1px solid rgba(0,153,255,0.25); border-radius: 8px; padding: 0.6rem 0.8rem; }
.help-foot { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.help-modal-close {
    position: absolute; top: 0.75rem; right: 0.75rem; background: none;
    border: 1px solid var(--border); color: var(--text-primary);
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
}
.help-modal-close:hover { color: var(--primary); border-color: var(--primary); }
.help-shot {
    display: block; max-width: 100%; height: auto; margin: 0.6rem 0 0.4rem;
    border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}