/* ============================================
   NOPROXi — Component Library
   Smooth, shadow-driven, borderless enterprise
   ============================================ */

/* --- Buttons --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 8px 18px;
    border: none; border-radius: var(--radius-md);
    font-family: var(--font); font-size: 13px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: all 0.2s var(--ease);
    text-decoration: none; line-height: 1;
    position: relative;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--canvas-950);
    color: var(--canvas-100);
    box-shadow: 0 1px 3px rgba(19,19,20,0.08);
}
.btn-primary:hover {
    background: var(--canvas-800);
    box-shadow: 0 4px 12px rgba(19,19,20,0.15);
    transform: translateY(-1px);
}

/* Ready/glow state — applied to primary buttons when their associated form field is valid */
.btn-primary.btn-ready {
    background: var(--terra);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(217,119,87,0.18), 0 4px 16px rgba(217,119,87,0.28);
    transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-primary.btn-ready:hover {
    background: var(--terra-600);
    box-shadow: 0 0 0 4px rgba(217,119,87,0.22), 0 6px 20px rgba(217,119,87,0.38);
    transform: translateY(-1px);
}
[data-theme="dark"] .btn-primary.btn-ready {
    box-shadow: 0 0 0 3px rgba(224,124,88,0.22), 0 4px 20px rgba(224,124,88,0.35);
}

.btn-accent {
    background: var(--terra);
    color: var(--white);
    box-shadow: 0 1px 3px rgba(217,119,87,0.15);
}
.btn-accent:hover {
    background: var(--terra-600);
    box-shadow: 0 4px 16px rgba(217,119,87,0.25);
    transform: translateY(-1px);
}

.btn-outline-dark {
    background: var(--white);
    color: var(--canvas-700);
    box-shadow: var(--shadow-sm);
}
.btn-outline-dark:hover {
    background: var(--terra-50);
    color: var(--terra-700);
    box-shadow: var(--shadow-md), var(--shadow-glow);
}

.btn-ghost { background: transparent; color: var(--canvas-600); }
.btn-ghost:hover { background: var(--canvas-100); color: var(--canvas-800); }

.btn-danger {
    background: var(--red-50);
    color: var(--red-500);
    box-shadow: 0 0 0 1px rgba(239,68,68,0.08);
}
.btn-danger:hover { background: var(--red-500); color: var(--white); box-shadow: 0 4px 12px rgba(239,68,68,0.2); }

.btn-xl { padding: 11px 22px; font-size: 13px; border-radius: var(--radius-lg); }
.btn-sm { padding: 6px 14px; font-size: 13.5px; }
.btn-full { width: 100%; }
.btn-icon-only { width: 40px; height: 40px; padding: 0; border-radius: var(--radius-md); }

/* --- Inputs --- */
.input-group { margin-bottom: 20px; }
.input-group label,
.input-group .label,
.form-group .label {
    display: block; font-size: 13.5px; font-weight: 600;
    color: var(--canvas-700); margin-bottom: 7px;
}
.input-group input,
.input-group textarea {
    width: 100%; padding: 12px 16px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font); font-size: 13.5px;
    color: var(--text-primary);
    background: var(--canvas-50);
    box-shadow: inset 0 0 0 1.5px var(--canvas-200);
    transition: box-shadow 0.2s ease, background 0.2s ease;
    line-height: 1.5;
}
/* Hide native selects that are enhanced — keep unenhanced selects styled */
.input-group select:not([data-enhanced]) {
    width: 100%; padding: 12px 16px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font); font-size: 13.5px;
    color: var(--text-primary);
    background: var(--canvas-50);
    box-shadow: inset 0 0 0 1.5px var(--canvas-200);
    appearance: none; -webkit-appearance: none;
    transition: box-shadow 0.2s ease;
    line-height: 1.5;
}
.input-group input:focus,
.input-group textarea:focus {
    outline: none;
    background: var(--white);
    box-shadow: inset 0 0 0 1.5px var(--terra), 0 0 0 4px rgba(217,119,87,0.08);
}
.input-group input::placeholder,
.input-group textarea::placeholder {
    color: var(--canvas-400);
}

/* --- Custom Select (.csel) ---
   Replaces native <select> with a fully-styled, animated dropdown */
.csel {
    position: relative;
    width: 100%;
}
.csel-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font); font-size: 13.5px;
    color: var(--text-primary);
    background: var(--canvas-50);
    box-shadow: inset 0 0 0 1.5px var(--canvas-200);
    cursor: pointer;
    text-align: left;
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.csel-trigger:hover { box-shadow: inset 0 0 0 1.5px var(--canvas-400); }
.csel.csel-open .csel-trigger {
    background: var(--white);
    box-shadow: inset 0 0 0 1.5px var(--terra), 0 0 0 4px rgba(217,119,87,0.08);
}
.csel-val { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csel-arrow {
    color: var(--canvas-500);
    flex-shrink: 0;
    transition: transform 0.22s var(--ease);
}
.csel.csel-open .csel-arrow { transform: rotate(180deg); }
.csel-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    z-index: 200;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl), 0 0 0 1px var(--border-strong);
    padding: 5px;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s var(--ease);
    max-height: 240px;
    overflow-y: auto;
}
.csel.csel-open .csel-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}
.csel-item {
    display: flex; align-items: center;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font); font-size: 14.5px;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease;
    gap: 10px;
}
.csel-item:hover { background: var(--canvas-100); }
.csel-item.csel-selected {
    color: var(--terra);
    font-weight: 600;
    background: var(--terra-50);
}
.csel-item.csel-selected::after {
    content: '';
    margin-left: auto;
    width: 6px; height: 6px;
    background: var(--terra);
    border-radius: 50%;
    flex-shrink: 0;
}
.csel-placeholder { color: var(--canvas-400); }

/* Open upward when near bottom of scrollable parent */
.csel.csel-up .csel-menu {
    top: auto;
    bottom: calc(100% + 6px);
    transform-origin: bottom center;
    transform: translateY(6px) scale(0.98);
}
.csel.csel-up.csel-open .csel-menu {
    transform: translateY(0) scale(1);
}

/* --- Settings Theme Card ---
   A single clickable card in Settings → Appearance */
.settings-theme-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--canvas-50);
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    width: 100%;
    max-width: 340px;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}
.settings-theme-card:hover {
    background: var(--canvas-100);
    box-shadow: var(--shadow-md);
}
.stc-icon-wrap {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    color: var(--terra);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.18s ease;
}
.stc-icon-wrap.tcb-spin {
    transform: rotate(180deg) scale(0.5);
    opacity: 0;
}
.stc-info { flex: 1; }
.stc-info strong {
    display: block;
    font-size: 13.5px; font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.stc-info span { font-size: 12.5px; color: var(--text-muted); }
.stc-cycle { color: var(--canvas-500); flex-shrink: 0; }
.input-group textarea { resize: vertical; }
.input-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; display: block; }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* --- Modal --- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(19,19,20,0.4);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.25s ease;
}
.modal {
    background: var(--white);
    border-radius: var(--radius-2xl);
    width: 520px; max-width: 92vw;
    max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 32px 80px rgba(19,19,20,0.12), 0 8px 24px rgba(19,19,20,0.06), 0 0 0 1px rgba(0,0,0,0.03);
    animation: modalIn 0.35s var(--spring);
    overflow: hidden;
}
.modal.modal-sm { width: 420px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0;
}
.modal-head h3 {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 700; color: var(--canvas-950);
}
.modal-close {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: var(--canvas-100);
    border-radius: var(--radius-sm); cursor: pointer;
    color: var(--canvas-500); transition: all 0.2s var(--ease);
}
.modal-close:hover { background: var(--canvas-200); color: var(--canvas-900); transform: rotate(90deg); }
.modal-body { padding: 18px 24px; overflow-y: auto; flex: 1; }
.modal-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.7; }
.modal-foot {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 14px 24px;
    background: linear-gradient(180deg, var(--canvas-50), var(--canvas-100));
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* --- Contact Sales / Payment Modal Form --- */
.payment-modal { max-width: 440px; }
.payment-modal .form-group {
    margin-bottom: 14px;
}
.payment-modal label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
}
.payment-modal .form-input {
    width: 100%;
    font-family: var(--font);
    font-size: 13.5px;
    padding: 9px 12px;
    background: var(--canvas-50);
    border: 1px solid var(--canvas-200);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.payment-modal .form-input:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(217,119,87,0.1);
}
.payment-modal .form-input::placeholder {
    color: var(--text-muted);
    font-size: 13px;
}
.payment-modal textarea.form-input {
    resize: vertical;
    min-height: 70px;
    line-height: 1.6;
}
.payment-modal .custom-select .cs-trigger {
    font-size: 13.5px;
    padding: 9px 12px;
}
.payment-modal .cs-option {
    font-size: 13.5px;
    padding: 8px 12px;
}
.payment-modal .btn-primary {
    font-size: 13.5px;
    padding: 10px 18px;
}
[data-theme="dark"] .payment-modal .form-input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: #fff;
}
[data-theme="dark"] .payment-modal .form-input:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(217,119,87,0.12);
}
[data-theme="dark"] .payment-modal .form-input::placeholder {
    color: #555;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Wizard Modal --- */
.modal.modal-wizard { width: 580px; }
.wizard-steps {
    display: flex; align-items: center; gap: 0;
    margin-left: auto; margin-right: 16px;
}
.wizard-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 700;
    background: var(--canvas-100); color: var(--text-muted);
    transition: all 0.25s var(--ease);
}
.wizard-dot.active {
    background: var(--canvas-900); color: #fff;
}
.wizard-dot.done {
    background: var(--accent); color: #fff;
}
.wizard-line {
    width: 32px; height: 2px;
    background: var(--canvas-200);
    margin: 0 4px;
}
.wizard-step {
    animation: fadeIn 0.2s ease;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
    padding-bottom: 24px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--canvas-200) transparent;
}
.wizard-step::-webkit-scrollbar { width: 6px; }
.wizard-step::-webkit-scrollbar-track { background: transparent; }
.wizard-step::-webkit-scrollbar-thumb { background: var(--canvas-200); border-radius: 100px; }

/* Inline upload row */
.inline-upload-row {
    margin-top: 8px;
}
.btn-sm {
    padding: 6px 12px; font-size: 13.5px;
    gap: 6px; display: inline-flex; align-items: center;
}

/* --- Session mode toggle (Free / Real) --- */
.session-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.session-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    border: 1.5px solid var(--canvas-200);
    border-radius: var(--radius-lg);
    background: var(--white);
    cursor: pointer;
    transition: all 0.25s var(--ease);
    font-family: var(--font);
    text-align: center;
}
.session-mode-btn svg {
    color: var(--canvas-400);
    transition: color 0.2s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.session-mode-btn span {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--canvas-700);
}
.session-mode-btn small {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}
.session-mode-btn:hover {
    border-color: var(--canvas-400);
    background: var(--canvas-50);
}
.session-mode-btn.active {
    border-color: var(--terra);
    background: var(--terra-50);
    box-shadow: 0 0 0 1px var(--terra);
}
.session-mode-btn.active svg {
    color: var(--terra);
    transform: scale(1.15);
}
.session-mode-btn.active span {
    color: var(--terra-700);
}
.session-mode-btn.active small {
    color: var(--terra-600);
}
[data-theme="dark"] .session-mode-btn.active {
    border-color: #e07c58;
    background: rgba(224,124,88,0.1);
    box-shadow: 0 0 0 1px #e07c58;
}
[data-theme="dark"] .session-mode-btn.active svg { color: #e07c58; }
[data-theme="dark"] .session-mode-btn.active span { color: #f0a07a; }
[data-theme="dark"] .session-mode-btn.active small { color: #d89070; }

/* --- Session mode badges (table + live topbar) --- */
.session-mode-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}
.mode-free {
    background: rgba(99,102,241,0.1);
    color: #6366f1;
}
.mode-real {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}
[data-theme="dark"] .mode-free {
    background: rgba(99,102,241,0.15);
    color: #818cf8;
}
[data-theme="dark"] .mode-real {
    background: rgba(16,185,129,0.15);
    color: #34d399;
}

/* Live session badge */
.live-session-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    margin-top: 1px;
    width: fit-content;
}

/* --- Model selection grid --- */
.model-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.model-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--canvas-200);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    background: var(--white);
}
.model-card:hover {
    border-color: var(--canvas-300);
    background: var(--canvas-50);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.model-card.selected {
    border-color: var(--terra);
    background: var(--terra-50);
    box-shadow: 0 0 0 1px var(--terra), 0 2px 8px rgba(217,119,87,0.1);
}
.model-card.selected .model-name { color: var(--terra-700); }
.model-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--canvas-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--canvas-500);
    transition: all 0.2s var(--ease);
}
.model-card-icon.icon-openai { color: #10a37f; background: rgba(16,163,127,0.08); }
.model-card-icon.icon-anthropic { color: #cc7744; background: rgba(204,119,68,0.08); }
.model-card-icon.icon-meta { color: #0081FB; background: rgba(0,129,251,0.08); }
.model-card-icon.icon-mistral { color: #F54E42; background: rgba(245,78,66,0.08); }
.model-card-icon.icon-deepseek { color: #4D6BFE; background: rgba(77,107,254,0.08); }
.model-card-icon.icon-qwen { color: #6F42C1; background: rgba(111,66,193,0.08); }
.model-card-icon.icon-google { color: #4285F4; background: rgba(66,133,244,0.08); }
.model-card-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.model-name {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--canvas-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.model-tier {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.model-card-tag {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 6px;
}
.tag-recommended { background: var(--terra-50); color: var(--terra); }
.tag-fast { background: var(--canvas-100); color: var(--canvas-500); }
.tag-free { background: rgba(16,163,127,0.08); color: #10a37f; }

/* --- Auto-answer toggle --- */
.auto-answer-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px;
    margin-top: 12px;
    background: var(--canvas-50);
    border-radius: var(--radius-lg);
    border: 1px solid var(--canvas-100);
}
.auto-answer-label {
    font-size: 13.5px; font-weight: 600; color: var(--canvas-900);
    display: block;
}
.auto-answer-desc {
    font-size: 12.5px; color: var(--text-muted);
    display: block; margin-top: 2px;
}
.toggle-switch {
    position: relative; display: inline-block;
    width: 40px; height: 22px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
    position: absolute; cursor: pointer;
    inset: 0; background: var(--canvas-200);
    border-radius: 22px; transition: 0.25s var(--ease);
}
.toggle-slider::before {
    content: '';
    position: absolute; width: 16px; height: 16px;
    left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%;
    transition: 0.25s var(--ease);
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-switch input:checked + .toggle-slider {
    background: var(--canvas-900);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(18px);
}

/* --- Data Table — modern card-style rows --- */
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 4px;
    background: transparent;
}
.data-table thead th {
    text-align: left;
    padding: 6px 16px 8px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    background: transparent;
}
.data-table tbody tr {
    background: var(--canvas-50);
    border-radius: var(--radius-lg);
    transition: all 0.2s var(--ease);
    box-shadow: var(--shadow-xs);
}
.data-table tbody tr:hover {
    box-shadow: var(--shadow-md), var(--shadow-glow);
    transform: translateY(-1px);
}
.data-table tbody td {
    padding: 11px 16px;
    font-size: 13px;
    vertical-align: middle;
    background: inherit;
}
/* Round the first and last cells in each row */
.data-table tbody td:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.data-table tbody td:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

.table-actions { display: flex; gap: 6px; }
.table-btn {
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--canvas-50);
    font-family: var(--font);
    font-size: 13.5px; font-weight: 500;
    color: var(--canvas-600); cursor: pointer;
    transition: all 0.2s var(--ease);
}
.table-btn:hover { background: var(--canvas-200); color: var(--canvas-900); }
.table-btn.primary {
    background: var(--canvas-950); color: var(--white);
    box-shadow: 0 1px 3px rgba(19,19,20,0.08);
}
.table-btn.primary:hover { background: var(--canvas-800); }
.table-btn.danger { color: var(--red-500); }
.table-btn.danger:hover { background: var(--red-50); color: var(--red-500); }

/* Icon-only action buttons */
.table-icon-btn {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--radius-sm);
    background: var(--canvas-50);
    color: var(--canvas-500);
    cursor: pointer;
    transition: all 0.2s var(--ease);
    position: relative;
}
.table-icon-btn:hover {
    background: var(--canvas-200);
    color: var(--canvas-900);
}
.table-icon-btn.primary {
    background: var(--canvas-950); color: var(--white);
    box-shadow: 0 1px 3px rgba(19,19,20,0.08);
}
.table-icon-btn.primary:hover { background: var(--canvas-800); color: var(--white); }
.table-icon-btn.danger { color: var(--canvas-400); }
.table-icon-btn.danger:hover { background: var(--red-50); color: var(--red-500); }
.table-icon-btn.disabled,
.table-icon-btn[disabled] {
    opacity: 0.25;
    cursor: not-allowed !important;
    pointer-events: none;
}

.file-link {
    color: var(--terra-600); text-decoration: none; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px;
    transition: color 0.15s ease;
}
.file-link:hover { color: var(--terra); text-decoration: underline; }

/* --- Empty State --- */
.empty-state {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 72px 24px;
    text-align: center; color: var(--text-muted);
}
.empty-state p { font-size: 13.5px; font-weight: 500; margin-top: 14px; color: var(--text-secondary); }
.empty-state span { font-size: 13.5px; margin-top: 6px; }
/* Dark mode: boost icon visibility (SVG opacity attr is 0.2 — too faint on dark bg) */
[data-theme="dark"] .empty-state svg { opacity: 0.42 !important; }

/* Upload Zone */
.upload-zone {
    border: 2px dashed var(--canvas-300);
    border-radius: var(--radius-2xl);
    padding: 36px 28px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    position: relative;
    background: var(--canvas-50);
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--terra);
    background: var(--terra-50);
    border-style: solid;
    box-shadow: var(--shadow-glow);
}
.upload-zone h3 { font-size: 13.5px; font-weight: 600; margin: 10px 0 4px; color: var(--canvas-900); }
.upload-zone p { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; }

/* File Info Bar */
.file-info-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--canvas-50);
    border-radius: var(--radius-md);
    font-size: 13.5px; color: var(--canvas-600);
    margin-top: 14px;
    box-shadow: var(--shadow-xs);
}
.file-info-bar svg { color: var(--terra); flex-shrink: 0; }
#upload-file-size { color: var(--text-muted); margin-left: auto; }

/* --- Toggle --- */
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; cursor: pointer; font-size: 13px; color: var(--canvas-700);
    position: relative;
}
/* Soft gradient separator between toggle rows */
.toggle-row + .toggle-row::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--canvas-200), transparent);
}
.toggle-row input { display: none; }
.toggle {
    position: relative; width: 32px; height: 18px;
    background: var(--canvas-300); border-radius: 9px;
    transition: background 0.2s ease; flex-shrink: 0;
}
.toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 14px; height: 14px; background: var(--white);
    border-radius: 50%; transition: transform 0.2s var(--spring);
    box-shadow: 0 1px 3px rgba(19,19,20,0.08);
}
.toggle-row input:checked + .toggle { background: var(--terra); }
.toggle-row input:checked + .toggle::after { transform: translateX(14px); }

/* --- Radio Card --- */
.settings-options { display: flex; flex-direction: column; gap: 10px; }
.radio-card {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px;
    background: var(--canvas-50);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer; transition: all 0.2s var(--ease);
    box-shadow: var(--shadow-xs);
}
.radio-card:hover { box-shadow: var(--shadow-sm); background: var(--white); }
.radio-card:has(input:checked) {
    background: var(--terra-50);
    box-shadow: 0 0 0 2px var(--terra), var(--shadow-sm);
}
.radio-card input { accent-color: var(--terra); }
.radio-card div { display: flex; flex-direction: column; }
.radio-card strong { font-size: 13.5px; color: var(--canvas-900); }
.radio-card span { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }

/* --- Pill Group --- */
.pill-group { display: flex; gap: 5px; flex-wrap: wrap; }
.pill-btn {
    padding: 5px 12px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--canvas-100);
    font-family: var(--font);
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer;
    transition: all 0.2s var(--ease);
    line-height: 1.3;
}
.pill-btn:hover { background: var(--canvas-200); color: var(--canvas-800); }
.pill-btn.active {
    background: var(--canvas-950); color: var(--white);
    box-shadow: 0 2px 8px rgba(19,19,20,0.1);
}

/* --- Toast --- */
.toast {
    position: fixed; bottom: 24px; right: 24px;
    padding: 10px 18px;
    background: var(--canvas-950); color: var(--canvas-200);
    border-radius: var(--radius-lg);
    font-size: 13px; font-weight: 500;
    box-shadow: 0 16px 48px rgba(19,19,20,0.15), 0 4px 12px rgba(19,19,20,0.06);
    z-index: 2000;
    animation: toastIn 0.35s var(--ease), toastOut 0.3s 2.5s ease forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* --- Confirm Action Dialog --- */
.confirm-action-card {
    width: 360px;
    max-width: 90vw;
    padding: 24px 22px 18px;
    text-align: center;
    animation: modalIn 0.25s var(--ease);
}
.confirm-action-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
}
.confirm-action-icon.icon-danger {
    background: var(--red-50);
    color: var(--red-400);
}
.confirm-action-icon.icon-info {
    background: var(--terra-50);
    color: var(--terra);
}
.confirm-action-icon.icon-logout {
    background: var(--canvas-100);
    color: var(--canvas-600);
}
.confirm-action-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 6px;
}
.confirm-action-msg {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 18px;
}
.confirm-action-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.confirm-action-btns .btn {
    min-width: 90px;
}
.confirm-action-card .input {
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font);
    font-size: 13.5px;
    border: 1.5px solid var(--canvas-200);
    border-radius: var(--radius-md);
    background: var(--canvas-50);
    color: var(--canvas-900);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.confirm-action-card .input:hover { border-color: var(--canvas-300); }
.confirm-action-card .input:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(217,119,87,0.1);
    background: var(--white);
}
.confirm-action-card .input::placeholder { color: var(--canvas-400); }
[data-theme="dark"] .confirm-action-card .input {
    background: var(--canvas-100);
    border-color: var(--canvas-300);
    color: var(--dark-text);
}
[data-theme="dark"] .confirm-action-card .input:hover { border-color: var(--canvas-400); }
[data-theme="dark"] .confirm-action-card .input:focus {
    border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(217,119,87,0.15);
}

/* --- Pulse Dot --- */
.pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red-500);
    animation: pulse 2s ease-in-out infinite;
}
.pulse-dot.green { background: var(--emerald-400); }
.pulse-dot.small { width: 6px; height: 6px; }

/* --- Share Options --- */
.share-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.share-option {
    display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 24px 14px 20px;
    background: var(--white);
    border: 1.5px solid var(--canvas-150);
    border-radius: var(--radius-xl);
    cursor: pointer; text-align: center;
    transition: all 0.2s var(--ease); color: var(--canvas-400);
}
.share-option .share-option-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--canvas-50);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s var(--ease);
}
.share-option:hover {
    border-color: var(--terra);
    background: var(--terra-50);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(217,119,87,0.12);
}
.share-option:hover .share-option-icon {
    background: var(--terra-100);
    color: var(--terra);
}
.share-option strong { font-size: 13.5px; font-weight: 600; color: var(--canvas-900); }
.share-option span { font-size: 11px; color: var(--canvas-400); line-height: 1.4; }
.share-option:hover strong { color: var(--terra-700); }

/* --- Stat Cards --- */
.analytics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.2vw, 16px); margin-bottom: clamp(16px, 1.4vw, 22px); }
.stat-card {
    padding: clamp(16px, 1.4vw, 22px) clamp(14px, 1.2vw, 18px);
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: all 0.25s var(--ease);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.stat-card::before {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--terra), var(--terra-300));
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.stat-card:hover {
    box-shadow: var(--shadow-md), var(--shadow-glow);
    transform: translateY(-3px);
}
.stat-card:hover::before { transform: scaleX(1); }
.stat-icon {
    width: clamp(32px, 2.4vw, 38px); height: clamp(32px, 2.4vw, 38px);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-icon.stat-icon-illustrative {
    width: auto; height: auto;
    background: none !important;
    color: var(--terra);
    border-radius: 0;
    margin-bottom: 0;
}
.stat-icon-illustrative svg {
    width: 32px; height: 32px;
}

.stat-num {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.4vw, 22px); font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--canvas-900);
    line-height: 1;
}
.stat-lbl { font-size: clamp(12px, 0.78vw, 13px); color: var(--text-muted); font-weight: 500; }

/* --- Activity Heatmap --- */
.heatmap-section {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: clamp(14px, 1.2vw, 20px);
    margin-bottom: clamp(14px, 1.2vw, 20px);
}
.heatmap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.heatmap-title {
    font-size: clamp(14.5px, 1vw, 17px);
    font-weight: 700;
    color: var(--canvas-900);
    margin: 0;
}
.heatmap-tabs {
    display: flex;
    gap: 2px;
    background: var(--canvas-100);
    border-radius: 8px;
    padding: 2px;
}
.heatmap-tab {
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.heatmap-tab:hover { color: var(--canvas-700); }
.heatmap-tab.active {
    background: var(--white);
    color: var(--canvas-900);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
/* Year navigation (appears only when previous years exist) */
.heatmap-year-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--canvas-100);
    border-radius: 8px;
    padding: 2px;
}
.heatmap-year-btn {
    font-size: 16px;
    font-weight: 600;
    padding: 3px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}
.heatmap-year-btn:hover { color: var(--canvas-700); background: var(--white); }
.heatmap-year-btn:disabled { opacity: 0.25; cursor: default; background: transparent; }
.heatmap-year-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--canvas-900);
    padding: 0 4px;
    min-width: 36px;
    text-align: center;
}
.heatmap-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.heatmap-grid-wrap {
    display: flex;
    gap: 4px;
    min-width: fit-content;
}
.heatmap-day-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 20px;
}
.heatmap-day-labels span {
    height: 11px;
    font-size: 10px;
    line-height: 11px;
    color: var(--text-muted);
    text-align: right;
    width: 26px;
}
.heatmap-grid {
    display: flex;
    gap: 3px;
}
.heatmap-week {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.heatmap-month-label {
    font-size: 10px;
    color: var(--text-muted);
    height: 16px;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
}
.heatmap-cell {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--canvas-200);
    transition: background 0.1s;
}
.heatmap-cell.level-0 { background: var(--canvas-200); }
.heatmap-cell.level-1 { background: rgba(194,120,62,0.2); }
.heatmap-cell.level-2 { background: rgba(194,120,62,0.4); }
.heatmap-cell.level-3 { background: rgba(194,120,62,0.65); }
.heatmap-cell.level-4 { background: rgba(194,120,62,0.9); }
.heatmap-cell[data-count]:hover {
    outline: 1.5px solid var(--canvas-400);
    outline-offset: -0.5px;
}
.heatmap-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 3px;
}
.heatmap-legend-label {
    font-size: 10px;
    color: var(--text-muted);
    margin: 0 2px;
}
.heatmap-legend .heatmap-cell {
    width: 10px;
    height: 10px;
    cursor: default;
}
.heatmap-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 1vw, 16px);
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--canvas-100);
}
.heatmap-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.heatmap-stat-val {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.1vw, 19px);
    font-weight: 800;
    color: var(--canvas-900);
    letter-spacing: -0.02em;
}
.heatmap-stat-lbl {
    font-size: clamp(10.5px, 0.72vw, 12.5px);
    color: var(--text-muted);
    font-weight: 500;
}

/* Heatmap tooltip */
.heatmap-tooltip {
    position: fixed;
    background: var(--canvas-900);
    color: #fff;
    font-size: 12.5px;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s;
}
.heatmap-tooltip.visible { opacity: 1; }

/* Dark theme */
[data-theme="dark"] .heatmap-section {
    background: var(--dark-card);
    box-shadow: var(--dark-shadow-sm);
}
[data-theme="dark"] .heatmap-title { color: var(--dark-text); }
[data-theme="dark"] .heatmap-tabs { background: var(--dark-border); }
[data-theme="dark"] .heatmap-tab { color: var(--dark-muted); }
[data-theme="dark"] .heatmap-tab:hover { color: var(--dark-text-secondary); }
[data-theme="dark"] .heatmap-tab.active {
    background: var(--dark-card);
    color: var(--dark-text);
}
[data-theme="dark"] .heatmap-cell.level-0 { background: var(--dark-border); }
[data-theme="dark"] .heatmap-stat-val { color: var(--dark-text); }
[data-theme="dark"] .heatmap-stats { border-top-color: var(--dark-border); }
[data-theme="dark"] .heatmap-year-nav { background: var(--dark-border); }
[data-theme="dark"] .heatmap-year-btn { color: var(--dark-muted); }
[data-theme="dark"] .heatmap-year-btn:hover { color: var(--dark-text-secondary); background: var(--dark-card); }
[data-theme="dark"] .heatmap-year-label { color: var(--dark-text); }

/* --- Analytics Empty State --- */
.analytics-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}
.analytics-empty-icon { margin-bottom: 16px; color: var(--text-muted); }
.analytics-empty h3 {
    font-family: var(--font-display);
    font-size: clamp(14.5px, 1vw, 17px); font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 8px;
}
.analytics-empty p {
    font-size: 14.5px; color: var(--text-secondary);
    max-width: 400px; margin: 0 auto 20px;
    line-height: 1.6;
}

/* --- Analytics Panels --- */
.analytics-panel {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}
.analytics-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 3px;
}
.analytics-panel-header h3 {
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 700;
    color: var(--canvas-900);
    margin-right: auto;
}
.analytics-panel-badge {
    font-size: 11px; font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: var(--terra-50);
    color: var(--terra);
}
.analytics-panel-sub {
    font-size: 12.5px;
    color: var(--text-muted);
    font-weight: 500;
}
.analytics-panel-desc {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 18px;
    line-height: 1.5;
}
.analytics-panel-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 12px;
    padding: 6px 8px;
    background: var(--canvas-50);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--canvas-200);
}
[data-theme="dark"] .analytics-panel-hint { background: var(--canvas-100); border-left-color: var(--canvas-300); }

/* --- Your Coach Panel --- */
.coach-panel { }

/* Scope tabs — Recent / Last 10 / All time */
.coach-scope-tabs {
    display: flex;
    gap: 2px;
    background: var(--canvas-100);
    border-radius: var(--radius-full);
    padding: 2px;
}
.coach-scope-tab {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}
.coach-scope-tab.active {
    background: var(--white);
    color: var(--canvas-900);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.coach-scope-tab:hover:not(.active) {
    color: var(--canvas-700);
}

.coach-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
    margin-top: 18px;
}

/* ── Intel Hero — score ring + trend ── */
.intel-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--canvas-50);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    position: relative;
}
.intel-score-ring {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.intel-ring-svg {
    width: 100%;
    height: 100%;
}
#intel-ring-fill {
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}
.intel-score-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--canvas-900);
    letter-spacing: -0.5px;
}
.intel-hero-body {
    flex: 1;
    min-width: 0;
}
.intel-hero-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.intel-hero-trend {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--canvas-800);
    margin-bottom: 6px;
    line-height: 1.4;
}
.intel-hero-trend .trend-up { color: var(--emerald-600); }
.intel-hero-trend .trend-down { color: var(--red-500); }
.intel-hero-trend .trend-flat { color: var(--text-muted); }
.intel-hero-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
}
.intel-spark-bar {
    width: 6px;
    border-radius: 2px;
    background: var(--canvas-200);
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
    min-height: 3px;
}
.intel-spark-bar.current {
    background: var(--canvas-700);
}
.intel-hero > .analytics-panel-badge {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* ── Signal bars — STAR / Language Power / Naturalness ── */
.intel-signals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.intel-signal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--canvas-50);
    border-radius: var(--radius-md);
}
.intel-signal-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--canvas-100);
}
.intel-signal-icon svg {
    width: 16px;
    height: 16px;
    color: var(--canvas-600);
}
.intel-signal-body {
    flex: 1;
    min-width: 0;
}
.intel-signal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.intel-signal-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--canvas-900);
}
.intel-signal-val {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--canvas-700);
}
.intel-signal-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--canvas-100);
    overflow: hidden;
}
.intel-signal-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}
.intel-signal-fill.fill-strong { background: var(--canvas-800); }
.intel-signal-fill.fill-mid { background: var(--canvas-500); }
.intel-signal-fill.fill-weak { background: var(--canvas-300); }
.intel-signal-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* ── Intel Alerts — pattern detection ── */
.intel-alerts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 6px;
}
.intel-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--canvas-100);
    background: var(--white);
}
.intel-alert-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12.5px;
}
.intel-alert-icon.alert-positive { background: rgba(16,185,129,0.1); color: var(--emerald-600); }
.intel-alert-icon.alert-warning { background: rgba(245,158,11,0.1); color: var(--amber-500); }
.intel-alert-icon.alert-critical { background: rgba(239,68,68,0.1); color: var(--red-500); }
.intel-alert-body {
    flex: 1;
    min-width: 0;
}
.intel-alert-title {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 2px;
}
.intel-alert-desc {
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-secondary);
}

/* In Your Words — transcript highlights */
.coach-transcript-section {
    border-top: 1px solid var(--canvas-100);
    padding-top: 4px;
}
.coach-transcript {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--canvas-700);
    padding: 12px 14px;
    background: var(--canvas-50);
    border-radius: var(--radius-md);
    max-height: 160px;
    overflow-y: auto;
}
.coach-transcript .ct-strong {
    font-weight: 700;
    color: var(--canvas-900);
}
.coach-transcript .ct-filler {
    color: var(--canvas-400);
    text-decoration: line-through;
    text-decoration-color: var(--canvas-300);
}
.coach-transcript .ct-metric {
    font-weight: 700;
    color: var(--canvas-900);
    text-decoration: underline;
    text-decoration-color: var(--canvas-300);
    text-underline-offset: 2px;
}
.coach-transcript-legend {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}
.ct-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
}
.ct-legend-swatch {
    font-size: 11px;
    font-weight: 600;
}
.ct-legend-swatch.ct-strong {
    font-weight: 700;
    color: var(--canvas-900);
}
.ct-legend-swatch.ct-filler {
    color: var(--canvas-400);
    text-decoration: line-through;
    text-decoration-color: var(--canvas-300);
}
.ct-legend-swatch.ct-metric {
    font-weight: 700;
    color: var(--canvas-900);
    text-decoration: underline;
    text-decoration-color: var(--canvas-300);
    text-underline-offset: 2px;
}

/* Next Time, Try This — before/after rewrites */
.coach-rewrites-section {
    border-top: 1px solid var(--canvas-100);
    padding-top: 4px;
}
.coach-rewrites {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.coach-rewrite-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--canvas-50);
    border-radius: var(--radius-md);
}
.coach-rewrite-before {
    font-size: 13.5px;
    color: var(--canvas-400);
    text-decoration: line-through;
    text-decoration-color: var(--canvas-300);
    flex: 1;
}
.coach-rewrite-arrow {
    flex-shrink: 0;
    color: var(--canvas-400);
    display: flex;
    align-items: center;
}
.coach-rewrite-after {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--canvas-900);
    flex: 1;
}

/* Tips section */
.coach-tips {
    border-top: 1px solid var(--canvas-100);
    padding-top: 4px;
}
.coach-tip {
    padding: 10px 0;
    border-bottom: 1px solid var(--canvas-50);
}
.coach-tip:last-child { border-bottom: none; }
.coach-tip-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 3px;
}
.coach-tip-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Dark theme — intelligence section */
[data-theme="dark"] .intel-hero { background: var(--canvas-100); }
[data-theme="dark"] .intel-score-num { color: var(--dark-text); }
[data-theme="dark"] .intel-signal { background: var(--canvas-100); }
[data-theme="dark"] .intel-signal-name { color: var(--dark-text); }
[data-theme="dark"] .intel-alert { background: var(--canvas-100); border-color: var(--canvas-200); }
[data-theme="dark"] .intel-alert-title { color: var(--dark-text); }
[data-theme="dark"] .coach-transcript { background: var(--canvas-100); }
[data-theme="dark"] .coach-rewrite-row { background: var(--canvas-100); }
[data-theme="dark"] .coach-tip-title { color: var(--dark-text); }
[data-theme="dark"] .coach-rewrite-after { color: var(--dark-text); }

@media (max-width: 600px) {
    .intel-hero { padding: 12px; gap: 12px; }
    .intel-score-ring { width: 60px; height: 60px; }
    .intel-score-num { font-size: 19px; }
    .intel-signal { padding: 8px 10px; gap: 8px; }
    .intel-signal-icon { width: 26px; height: 26px; }
    .intel-signal-icon svg { width: 14px; height: 14px; }
    .intel-signal-name { font-size: 12px; }
    .intel-signal-val { font-size: 12px; }
    .intel-alert { padding: 8px 10px; }
    .intel-alert-title { font-size: 12px; }
    .intel-alert-desc { font-size: 11px; }
    .coach-tip-title { font-size: 12.5px; }
    .coach-tip-text { font-size: 12px; }
}

/* --- Session History List --- */
.session-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}
.session-history-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    background: var(--canvas-50);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.session-history-item:hover {
    background: var(--terra-50);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
}
/* Company icon avatar */
.session-history-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: visible;
}
.session-history-icon svg { width: 20px; height: 20px; }
.session-history-icon .sh-score-badge {
    position: absolute; bottom: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 9px; font-weight: 800;
    color: #fff; border: 1.5px solid var(--white);
}
.sh-score-badge.score-high { background: var(--emerald-500); }
.sh-score-badge.score-mid { background: var(--amber-400); }
.sh-score-badge.score-low { background: var(--red-400); }
[data-theme="dark"] .sh-score-badge { border-color: var(--dark-card); }
.session-history-info { flex: 1; min-width: 0; }
.session-history-title {
    font-size: 13.5px; font-weight: 600;
    color: var(--canvas-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.session-history-meta {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    gap: 12px;
}
.session-history-tags {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.session-history-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-full);
}
.session-history-tag.verbatim { background: rgba(239,68,68,0.1); color: var(--red-500); }
.session-history-tag.good { background: var(--emerald-50); color: var(--emerald-600); }
.session-history-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.session-history-item:hover .session-history-arrow { opacity: 1; color: var(--terra); }

/* --- Analytics Session Detail --- */
.analytics-session-detail {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    margin-top: 14px;
}
.analytics-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.analytics-detail-header h3 {
    font-family: var(--font-display);
    font-size: 14.5px; font-weight: 700;
    color: var(--canvas-900);
}
.btn-sm { padding: 6px 14px; font-size: 12.5px; }

/* --- Per-Question Cards --- */
.analytics-q-card {
    padding: 20px;
    border-radius: var(--radius-md);
    background: var(--canvas-50);
    margin-bottom: 12px;
}
.analytics-q-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.analytics-q-num {
    width: 26px; height: 26px;
    border-radius: var(--radius-sm);
    background: var(--canvas-200);
    color: var(--canvas-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800;
    flex-shrink: 0;
}
.analytics-q-question {
    font-size: 14.5px; font-weight: 600;
    color: var(--canvas-900);
    line-height: 1.4;
    flex: 1;
}
.analytics-q-verdict {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}
.analytics-q-verdict.verdict-strong {
    background: var(--canvas-200);
    color: var(--canvas-900);
}
.analytics-q-verdict.verdict-mid {
    background: var(--canvas-100);
    color: var(--canvas-700);
}
.analytics-q-verdict.verdict-weak {
    background: var(--canvas-100);
    color: var(--canvas-500);
}

/* Section labels inside question cards */
.aq-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.aq-section-hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.45;
    margin-bottom: 10px;
    font-style: italic;
}

/* Key points to remember */
.aq-keypoints {
    margin-bottom: 16px;
}
.aq-keypoints-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.aq-keypoint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--canvas-100);
}
.aq-keypoint:last-child { border-bottom: none; }
.aq-kp-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--canvas-200);
    color: var(--canvas-700);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.aq-kp-text {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--canvas-900);
    font-weight: 500;
}

/* How to deliver it */
.aq-delivery {
    margin-bottom: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--canvas-100);
}
.aq-delivery-tip {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    padding: 6px 0;
    border-bottom: 1px solid var(--canvas-50);
}
.aq-delivery-tip:last-child { border-bottom: none; }

/* Collapsed reference — what you actually said */
.aq-reference {
    padding-top: 10px;
    border-top: 1px solid var(--canvas-100);
}
.aq-ref-toggle {
    background: none;
    border: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}
.aq-ref-toggle:hover { color: var(--canvas-900); }
.aq-ref-text {
    font-size: 13px;
    line-height: 1.65;
    color: var(--canvas-600);
    padding: 10px 0 0;
}

/* Dark theme */
[data-theme="dark"] .analytics-q-card { background: var(--canvas-100); }
[data-theme="dark"] .aq-kp-text { color: var(--dark-text); }
[data-theme="dark"] .analytics-q-verdict.verdict-strong { color: var(--dark-text); }
[data-theme="dark"] .aq-ref-toggle:hover { color: var(--dark-text); }

/* --- Atlas AI — Full Immersive Chat --- */
.atlas-chat {
    display: flex;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--white);
}

/* --- Chat History Drawer --- */
.atlas-history {
    width: 0;
    min-width: 0;
    overflow: hidden;
    background: var(--canvas-100);
    display: flex;
    flex-direction: column;
    transition: width 0.35s var(--ease), min-width 0.35s var(--ease), opacity 0.25s var(--ease);
    flex-shrink: 0;
    position: relative;
    opacity: 0;
}
.atlas-history.open {
    width: 220px;
    min-width: 220px;
    opacity: 1;
}
/* Sidebar header — logo + new chat */
.atlas-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 8px;
    flex-shrink: 0;
}

/* Logo button */
.atlas-sidebar-logo-wrapper {
    position: relative;
}
.atlas-sidebar-logo-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--radius-full);
    color: var(--canvas-700);
    cursor: pointer;
    transition: all 0.18s var(--ease);
}
.atlas-sidebar-logo-btn:hover {
    background: var(--canvas-200);
    color: var(--canvas-900);
}

/* Sidebar nav dropdown (from logo) */
.atlas-sidebar-nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 48px rgba(19,19,20,0.14), 0 0 0 1px rgba(0,0,0,0.03);
    padding: 6px;
    min-width: 180px;
    z-index: 300;
    animation: atlasDrop 0.15s var(--ease);
}
.atlas-sidebar-nav-dropdown.open {
    display: flex;
    flex-direction: column;
}

/* New chat pencil button */
.atlas-sidebar-newchat {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--radius-full);
    color: var(--canvas-500);
    cursor: pointer;
    transition: all 0.18s var(--ease);
}
.atlas-sidebar-newchat:hover {
    background: var(--canvas-200);
    color: var(--canvas-800);
}

/* Search input */
.atlas-history-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 10px 8px;
    padding: 7px 12px;
    background: var(--canvas-200);
    border-radius: var(--radius-full);
    transition: background 0.15s var(--ease);
    flex-shrink: 0;
}
.atlas-history-search-wrap:focus-within {
    background: var(--white);
    box-shadow: 0 0 0 1.5px var(--canvas-300);
}
.atlas-history-search-icon {
    flex-shrink: 0;
    color: var(--canvas-400);
    opacity: 0.7;
}
.atlas-history-search {
    border: none;
    background: transparent;
    font-family: var(--font);
    font-size: 14px;
    color: var(--canvas-800);
    outline: none;
    width: 100%;
}
.atlas-history-search::placeholder {
    color: var(--canvas-400);
}

/* Bottom clear-all */
.atlas-history-bottom {
    flex-shrink: 0;
    padding: 8px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Atlas sidebar appearance row */
.atlas-stt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
}
.atlas-stt-label {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--canvas-500);
    white-space: nowrap;
}
.atlas-history-clear-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--canvas-400);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.atlas-history-clear-btn:hover {
    background: var(--canvas-200);
    color: var(--red-500);
}
.atlas-history-clear-btn svg {
    flex-shrink: 0;
    opacity: 0.6;
}
.atlas-history-clear-btn:hover svg {
    opacity: 1;
}
.atlas-history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Subtle scrollbar */
.atlas-history-list::-webkit-scrollbar { width: 4px; }
.atlas-history-list::-webkit-scrollbar-track { background: transparent; }
.atlas-history-list::-webkit-scrollbar-thumb { background: var(--canvas-200); border-radius: 2px; }
.atlas-history-list::-webkit-scrollbar-thumb:hover { background: var(--canvas-300); }

.atlas-history-row {
    display: flex;
    align-items: center;
    border-radius: var(--radius-lg);
    transition: background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.atlas-history-row:hover {
    background: var(--canvas-200);
}
.atlas-history-row.active {
    background: var(--white);
    box-shadow: 0 1px 4px rgba(19,19,20,0.06);
}
.atlas-history-item {
    padding: 9px 12px;
    border-radius: var(--radius-lg);
    font-size: 13.5px;
    color: var(--canvas-600);
    cursor: pointer;
    transition: color 0.15s var(--ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    background: transparent;
    text-align: left;
    flex: 1;
    min-width: 0;
    font-family: var(--font);
    line-height: 1.4;
}
.atlas-history-row:hover .atlas-history-item {
    color: var(--canvas-900);
}
.atlas-history-row.active .atlas-history-item {
    color: var(--canvas-950);
    font-weight: 600;
}
.atlas-history-dots {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    color: var(--canvas-400);
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transition: all 0.18s var(--ease);
    margin-right: 6px;
}
.atlas-history-row:hover .atlas-history-dots {
    opacity: 1;
}
.atlas-history-dots:hover {
    background: var(--canvas-200);
    color: var(--canvas-700);
}
/* Mobile: dots always visible (no hover on touch) */
body.is-capacitor .atlas-history-dots {
    opacity: 1;
    color: var(--text-muted);
    width: 36px;
    height: 36px;
}
body.is-capacitor .atlas-history-dots:active {
    background: rgba(217,119,87,0.1);
    color: var(--terra);
}
/* Dark mode dots color fix (canvas-400 is a dark surface in dark mode) */
[data-theme="dark"] .atlas-history-dots {
    color: var(--text-muted);
}
[data-theme="dark"] .atlas-history-dots:hover {
    background: var(--bg-lifted);
    color: var(--text-secondary);
}

/* ── New chat transition animations ── */
@keyframes atlas-msgs-exit {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(24px) scale(0.97); }
}
@keyframes atlas-empty-enter {
    0%   { opacity: 0; transform: translateY(-16px) scale(0.95); }
    60%  { opacity: 1; transform: translateY(4px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
#atlas-messages-area.atlas-clearing {
    animation: atlas-msgs-exit 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    pointer-events: none;
}
#atlas-empty.atlas-new-enter {
    animation: atlas-empty-enter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Chat context menu dropdown — appended to body with position:fixed */
.atlas-chat-menu {
    position: fixed;
    z-index: 9999;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(19,19,20,0.14), 0 0 0 1px rgba(0,0,0,0.03);
    padding: 5px;
    min-width: 170px;
    animation: atlasDrop 0.15s var(--ease);
    backdrop-filter: blur(12px);
}
.atlas-chat-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--canvas-600);
    cursor: pointer;
    transition: all 0.15s var(--ease);
    text-align: left;
    width: 100%;
    white-space: nowrap;
}
.atlas-chat-menu-item:hover {
    background: var(--canvas-50);
    color: var(--canvas-900);
}
.atlas-chat-menu-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}
.atlas-chat-menu-item:hover svg {
    opacity: 1;
}
.atlas-chat-menu-item.danger {
    color: var(--red-500);
}
.atlas-chat-menu-item.danger:hover {
    background: var(--red-50);
    color: var(--red-500);
}

/* Clear all — inline confirmation card */
.atlas-clear-card {
    margin: 0 8px 12px;
    padding: 18px;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 16px rgba(239,68,68,0.08), 0 0 0 1px rgba(239,68,68,0.06);
    animation: atlasDrop 0.2s var(--ease);
    flex-shrink: 0;
}
.atlas-clear-warn {
    font-size: 14px;
    font-weight: 600;
    color: var(--red-500);
    line-height: 1.5;
    margin-bottom: 12px;
}
.atlas-clear-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--canvas-500);
    margin-bottom: 6px;
}
.atlas-clear-input {
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--canvas-50);
    box-shadow: inset 0 0 0 1.5px var(--canvas-200);
    font-family: var(--font);
    font-size: 13.5px;
    color: var(--text-primary);
    outline: none;
    transition: box-shadow 0.2s ease, background 0.2s ease;
    margin-bottom: 12px;
}
.atlas-clear-input:focus {
    background: var(--white);
    box-shadow: inset 0 0 0 1.5px var(--red-400);
}
.atlas-clear-input::placeholder {
    color: var(--canvas-400);
    font-style: italic;
}
.atlas-clear-btns {
    display: flex;
    gap: 8px;
}
.atlas-clear-cancel {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--canvas-100);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--canvas-600);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.atlas-clear-cancel:hover {
    background: var(--canvas-200);
    color: var(--canvas-800);
}
.atlas-clear-delete {
    flex: 1;
    padding: 8px 0;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--red-500);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--white);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.atlas-clear-delete:disabled {
    background: var(--canvas-200);
    color: var(--canvas-400);
    cursor: not-allowed;
}
.atlas-clear-delete:not(:disabled):hover {
    background: var(--red-400);
    box-shadow: 0 2px 8px rgba(239,68,68,0.25);
}

.atlas-history-date {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--canvas-400);
    padding: 16px 12px 6px;
}
.atlas-history-date:first-child {
    padding-top: 4px;
}

/* --- Main Chat Area --- */
.atlas-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
}
/* Curve the left edge when history sidebar is open */
.atlas-history.open ~ .atlas-main {
    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
}

/* Top bar — always visible, integrated with chat area */
.atlas-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    flex-shrink: 0;
    position: relative;
    min-height: 44px;
    background: var(--white);
}
.atlas-topbar-left {
    display: flex;
    align-items: center;
    gap: 4px;
}
.atlas-topbar-title {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--canvas-800);
    padding: 0 8px;
}

/* Model selector */
.atlas-model-wrapper {
    position: relative;
}
.atlas-model-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--canvas-800);
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.atlas-model-btn:hover {
    background: var(--canvas-50);
}
.atlas-model-arrow {
    opacity: 0.4;
    transition: transform 0.2s var(--ease), opacity 0.15s var(--ease);
}
.atlas-model-btn:hover .atlas-model-arrow {
    opacity: 0.7;
}
.atlas-model-dropdown.open ~ .atlas-model-btn .atlas-model-arrow,
.atlas-model-wrapper:has(.atlas-model-dropdown.open) .atlas-model-arrow {
    transform: rotate(180deg);
    opacity: 0.7;
}

/* Model dropdown */
.atlas-model-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 300;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 48px rgba(19,19,20,0.14), 0 0 0 1px rgba(0,0,0,0.03);
    padding: 4px;
    width: clamp(200px, 22vw, 260px);
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: atlasDrop 0.15s var(--ease);
}
.atlas-model-dropdown::-webkit-scrollbar { display: none; }
.atlas-model-dropdown.open {
    display: block;
}
.atlas-model-dropdown-head {
    font-size: clamp(10px, 0.7vw, 11px);
    font-weight: 600;
    color: var(--canvas-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 10px 4px;
}
.atlas-model-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.12s var(--ease);
    text-align: left;
}
.atlas-model-option:hover {
    background: var(--canvas-50);
}
.atlas-model-option.active {
    background: var(--terra-50);
}
.atlas-model-option-info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: hidden;
}
.atlas-model-option-name {
    font-family: var(--font);
    font-size: clamp(12.5px, 0.85vw, 14px);
    font-weight: 600;
    color: var(--canvas-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atlas-model-option.active .atlas-model-option-name {
    color: var(--terra-700);
}
.atlas-model-option-desc {
    font-family: var(--font);
    font-size: clamp(10.5px, 0.72vw, 12px);
    font-weight: 400;
    color: var(--canvas-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.atlas-model-option-logo {
    width: clamp(22px, 1.8vw, 28px);
    height: clamp(22px, 1.8vw, 28px);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.atlas-model-option-logo.icon-openai { color: #10a37f; background: rgba(16,163,127,0.08); }
.atlas-model-option-logo.icon-anthropic { color: #cc7744; background: rgba(204,119,68,0.08); }
.atlas-model-option-logo.icon-meta { color: #0081FB; background: rgba(0,129,251,0.08); }
.atlas-model-option-logo.icon-mistral { color: #F54E42; background: rgba(245,78,66,0.08); }
.atlas-model-option-logo.icon-deepseek { color: #4D6BFE; background: rgba(77,107,254,0.08); }
.atlas-model-option-logo.icon-qwen { color: #6F42C1; background: rgba(111,66,193,0.08); }
.atlas-model-option-logo.icon-google { color: #4285F4; background: rgba(66,133,244,0.08); }
.atlas-model-option.active .atlas-model-option-logo {
    background: var(--terra-100);
    color: var(--terra-700);
}
.atlas-model-icon {
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.atlas-model-icon svg { width: 12px; height: 12px; }

/* Nav grid button + dropdown */
.atlas-nav-wrapper {
    position: relative;
}
.atlas-nav-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--radius-full);
    color: var(--canvas-400);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.atlas-nav-btn:hover {
    background: var(--canvas-100);
    color: var(--canvas-700);
}
.atlas-nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: 0 12px 48px rgba(19,19,20,0.14), 0 0 0 1px rgba(0,0,0,0.03);
    padding: 6px;
    min-width: 180px;
    z-index: 100;
    animation: atlasDrop 0.2s var(--ease);
}
.atlas-nav-dropdown.open {
    display: flex;
    flex-direction: column;
}
@keyframes atlasDrop {
    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.atlas-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--canvas-600);
    cursor: pointer;
    transition: all 0.12s var(--ease);
    text-align: left;
    width: 100%;
}
.atlas-nav-item:hover {
    background: var(--canvas-50);
    color: var(--canvas-900);
}
.atlas-nav-item svg {
    flex-shrink: 0;
    opacity: 0.6;
}
.atlas-nav-item:hover svg {
    opacity: 1;
}

/* History toggle (sidebar panel icon) */
.atlas-history-toggle {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--radius-full);
    color: var(--canvas-400);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.atlas-history-toggle svg {
    transition: transform 0.3s var(--ease);
}
.atlas-history-toggle:hover {
    background: var(--canvas-100);
    color: var(--canvas-700);
}
.atlas-history-toggle.active {
    background: var(--terra-50);
    color: var(--terra);
    box-shadow: 0 0 0 1px rgba(217,119,87,0.1);
}
/* Flip icon when sidebar is open — line moves from left to right */
.atlas-history-toggle.active svg {
    transform: scaleX(-1);
}

/* Nav wrapper: positions the dropdown relative to the atom button */
.atlas-topbar-nav-wrapper { position: relative; }

/* Topbar menu button — NOPROXi logo, visible when sidebar is closed */
.atlas-topbar-menu-btn {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--radius-full);
    color: var(--canvas-500);
    cursor: pointer;
    transition: all 0.2s var(--ease);
    flex-shrink: 0;
}
.atlas-topbar-menu-btn:hover {
    background: var(--canvas-100);
    color: var(--canvas-800);
}

/* Hide topbar menu button when sidebar is open (it "moves" to sidebar logo) */
.atlas-history.open ~ .atlas-main .atlas-topbar-menu-btn {
    display: none;
}

/* Hide topbar "New" button when history drawer is open (avoids duplication) */
.atlas-history.open ~ .atlas-main .atlas-new-chat-btn {
    display: none;
}

.atlas-topbar-right {
    display: flex;
    align-items: center;
    gap: 1px;
}
.atlas-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--canvas-500);
    cursor: pointer;
    transition: all 0.15s var(--ease);
    white-space: nowrap;
}
.atlas-action-btn:hover {
    background: var(--canvas-100);
    color: var(--canvas-700);
}
.atlas-action-btn svg {
    flex-shrink: 0;
}

/* Empty state — push welcome toward lower-center like ChatGPT */
.atlas-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 24px 0;
    min-height: 0;
    overflow-y: auto;
}
.atlas-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 640px;
    width: 100%;
    padding-bottom: 0;
}
.atlas-welcome-icon {
    margin-bottom: clamp(8px, 1.2vh, 16px);
    animation: atlasWelcomeIn 0.6s ease-out;
}
.atlas-welcome-icon svg {
    width: clamp(36px, 4vh, 48px);
    height: clamp(36px, 4vh, 48px);
}
@keyframes atlasWelcomeIn {
    from { opacity: 0; transform: scale(0.6); }
    40% { opacity: 1; transform: scale(1.05); }
    to { opacity: 1; transform: scale(1); }
}
/* Welcome atom: one-time draw at 1.75x speed, stays visible */
.atlas-welcome-atom .atlas-r1 { animation: atlasWelcomeR1 1.2s ease-out forwards; }
.atlas-welcome-atom .atlas-r2 { animation: atlasWelcomeR2 1.2s ease-out 0.35s forwards; }
.atlas-welcome-atom .atlas-r3 { animation: atlasWelcomeR3 1.2s ease-out 0.7s forwards; }
@keyframes atlasWelcomeR1 {
    0% { stroke-dashoffset: 44; opacity: 0; }
    15% { opacity: 0.7; }
    100% { stroke-dashoffset: 0; opacity: 0.5; }
}
@keyframes atlasWelcomeR2 {
    0% { stroke-dashoffset: 44; opacity: 0; }
    15% { opacity: 0.7; }
    100% { stroke-dashoffset: 0; opacity: 0.5; }
}
@keyframes atlasWelcomeR3 {
    0% { stroke-dashoffset: 44; opacity: 0; }
    15% { opacity: 0.7; }
    100% { stroke-dashoffset: 0; opacity: 0.5; }
}
.atlas-welcome h2 {
    font-family: var(--font-display);
    font-size: clamp(17px, 1.2vw, 20px);
    font-weight: 800;
    color: var(--canvas-950);
    letter-spacing: -0.03em;
    margin-bottom: clamp(4px, 0.8vh, 10px);
}
.atlas-welcome p {
    font-size: clamp(12.5px, 0.85vw, 13.5px);
    color: var(--text-secondary);
    margin-bottom: clamp(16px, 3vh, 40px);
    max-width: 480px;
    line-height: 1.6;
}
.atlas-suggestions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(6px, 0.8vh, 10px);
    width: 100%;
    max-width: 520px;
}
.atlas-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1.2vw, 18px);
    border: none;
    border-radius: var(--radius-full);
    background: var(--canvas-50);
    font-family: var(--font);
    font-size: clamp(12.5px, 0.85vw, 13.5px);
    font-weight: 500;
    color: var(--canvas-600);
    cursor: pointer;
    transition: all 0.2s var(--ease);
    text-align: left;
}
.atlas-chip svg {
    flex-shrink: 0;
    opacity: 0.5;
}
.atlas-chip:hover {
    background: var(--terra-50);
    color: var(--terra-700);
    transform: translateY(-1px);
}
.atlas-chip:hover svg {
    opacity: 1;
    color: var(--terra);
}

/* Active messages area */
.atlas-messages-area {
    flex: 1;
    overflow-y: auto;
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.atlas-messages {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 768px;
    width: 100%;
    margin: 0 auto;
}

/* Message bubbles */
.atlas-msg {
    font-size: 13.5px;
    line-height: 1.7;
    animation: atlasMsgIn 0.4s var(--ease);
    white-space: pre-line;
    word-wrap: break-word;
}
@keyframes atlasMsgIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.atlas-msg.user {
    background: var(--canvas-100);
    color: var(--canvas-900);
    align-self: flex-end;
    max-width: 80%;
    padding: 0;
    border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xs) var(--radius-xl);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    position: relative;
}
.atlas-user-text {
    padding: 10px 16px;
    width: 100%;
    box-sizing: border-box;
}
.atlas-user-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px 6px 6px;
    opacity: 0;
    transition: opacity 0.15s var(--ease);
}
.atlas-msg.user:hover .atlas-user-actions {
    opacity: 1;
}
.atlas-user-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--canvas-500);
    cursor: pointer;
    transition: all 0.15s var(--ease);
    white-space: nowrap;
}
.atlas-user-action-btn:hover {
    background: var(--canvas-200);
    color: var(--canvas-800);
}
.atlas-user-action-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.atlas-user-action-btn:hover svg {
    opacity: 1;
}
.atlas-msg.ai {
    color: var(--text-primary);
    align-self: flex-start;
    max-width: 100%;
    padding: 4px 0;
    position: relative;
}
.atlas-msg.ai .ai-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--terra);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.atlas-msg.ai .ai-label::before {
    display: none;
}
.atlas-msg.ai .ai-label svg {
    flex-shrink: 0;
}
.atlas-msg .ai-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--canvas-800);
}

/* Inline action toolbar under each AI response */
.ai-msg-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    padding-top: 4px;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
}
.atlas-msg.ai:hover .ai-msg-actions {
    opacity: 1;
}
.ai-msg-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 500;
    color: var(--canvas-400);
    cursor: pointer;
    transition: all 0.15s var(--ease);
    white-space: nowrap;
}
.ai-msg-action-btn:hover {
    background: var(--canvas-100);
    color: var(--canvas-700);
}
.ai-msg-action-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}
.ai-msg-action-btn:hover svg {
    opacity: 1;
}

/* Atlas signature atom at bottom of AI responses */
.atlas-signature {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 12px;
    padding-top: 8px;
    color: var(--terra);
    opacity: 0.35;
}
.atlas-signature .atlas-sig-atom .atlas-ring {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.5;
    animation: none;
}

/* Generating indicator */
.atlas-gen-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--terra);
    font-size: 12.5px;
    font-weight: 500;
    opacity: 0.7;
}
.atlas-gen-indicator .atlas-atom {
    color: var(--terra);
}
.atlas-gen-indicator span {
    animation: atlas-gen-pulse 1.5s ease-in-out infinite;
}
@keyframes atlas-gen-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* --- Rate-limit cooldown warning bar --- */
#atlas-ratelimit-bar {
    width: 100%;
    max-width: 768px;
    margin: 0 auto 8px;
    padding: 8px 16px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    font-size: 12px;
    color: #c2410c;
    line-height: 1.5;
    animation: atlasBarFadeIn 0.2s ease;
    box-sizing: border-box;
}
#atlas-ratelimit-bar .atlas-ratelimit-icon {
    font-style: normal;
    margin-right: 2px;
}
@keyframes atlasBarFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Input Bar --- */
.atlas-input-bar {
    padding: clamp(6px, 0.8vh, 10px) 24px clamp(12px, 1.5vh, 20px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    box-shadow: none;
}
.atlas-compose {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 768px;
    padding: 6px 6px 6px 6px;
    background: var(--canvas-50);
    border-radius: var(--radius-full);
    box-shadow: 0 0 0 1px var(--canvas-300), var(--shadow-sm);
    transition: box-shadow 0.25s ease, background 0.25s ease;
}
.atlas-compose:focus-within {
    background: var(--white);
    box-shadow: 0 0 0 1.5px var(--terra),
                0 0 0 5px rgba(217,119,87,0.12),
                0 0 24px rgba(217,119,87,0.1),
                var(--shadow-md);
}
.atlas-attach-btn,
.atlas-voice-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    border-radius: var(--radius-md);
    color: var(--canvas-400);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s var(--ease);
}
.atlas-attach-btn:hover,
.atlas-voice-btn:hover {
    background: var(--canvas-200);
    color: var(--canvas-700);
}
.atlas-voice-btn.active {
    background: var(--terra-100);
    color: var(--terra);
}
.atlas-compose-input {
    flex: 1;
    border: none !important;
    background: none !important;
    font-family: var(--font);
    font-size: 14.5px;
    color: var(--text-primary);
    padding: 10px 4px;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-width: 0;
}
.atlas-compose-input:focus {
    border: none !important;
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
}
#atlas-file-input {
    display: none !important;
}
.atlas-compose-input::placeholder { color: var(--canvas-400); }
.atlas-send-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--canvas-950);
    color: var(--white);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s var(--ease);
}
.atlas-send-btn:hover {
    background: var(--canvas-800);
    transform: scale(1.06);
}
.atlas-input-hint {
    font-size: 12.5px;
    color: var(--canvas-400);
    margin-top: 8px;
}

/* --- Voice Mode Overlay --- */
.atlas-voice-overlay {
    position: absolute;
    inset: 0;
    background: rgba(19,19,20,0.92);
    backdrop-filter: blur(32px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    animation: fadeIn 0.35s var(--ease);
}
.atlas-voice-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    position: relative;
}
.atlas-voice-close {
    position: absolute;
    top: -60px; right: -60px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--canvas-400);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.atlas-voice-close:hover {
    background: rgba(255,255,255,0.2);
    color: var(--white);
}
.atlas-voice-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.voice-bars {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 60px;
}
.voice-bar {
    width: 4px;
    height: var(--bar-h);
    background: var(--terra);
    border-radius: 2px;
    transition: height 0.15s var(--ease);
}
.voice-bars.listening .voice-bar {
    animation: voiceBarPulse 1s ease-in-out infinite;
}
.voice-bars.listening .voice-bar:nth-child(1) { animation-delay: 0s; }
.voice-bars.listening .voice-bar:nth-child(2) { animation-delay: 0.15s; }
.voice-bars.listening .voice-bar:nth-child(3) { animation-delay: 0.3s; }
.voice-bars.listening .voice-bar:nth-child(4) { animation-delay: 0.15s; }
.voice-bars.listening .voice-bar:nth-child(5) { animation-delay: 0s; }
@keyframes voiceBarPulse {
    0%, 100% { transform: scaleY(1); opacity: 0.5; }
    50% { transform: scaleY(1.8); opacity: 1; }
}
.voice-status {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--canvas-400);
    letter-spacing: -0.01em;
}
.voice-status.active { color: var(--terra-300); }
.atlas-voice-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}
.voice-mic-btn {
    width: 72px; height: 72px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--terra);
    color: var(--white);
    cursor: pointer;
    transition: all 0.2s var(--ease);
    box-shadow: 0 0 0 0 rgba(217,119,87,0.3);
}
.voice-mic-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 30px rgba(217,119,87,0.3);
}
.voice-mic-btn.listening {
    animation: micPulse 1.5s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217,119,87,0.3); }
    50% { box-shadow: 0 0 0 20px rgba(217,119,87,0); }
}
.voice-end-btn {
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-full);
    background: rgba(239,68,68,0.15);
    color: var(--red-400);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.voice-end-btn:hover {
    background: var(--red-500);
    color: var(--white);
}

/* Settings */
.settings-body { max-width: 640px; }
.settings-section { margin-bottom: 24px; }

/* Profile card */
.settings-profile-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius-xl);
    background: var(--canvas-50); border: 1px solid var(--canvas-100);
    position: relative;
}
.settings-profile-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--terra); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 16px; font-weight: 700;
    flex-shrink: 0; overflow: hidden;
}
.settings-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-profile-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-profile-name { font-weight: 600; font-size: 14px; color: var(--canvas-900); }
.settings-profile-email { font-size: 12.5px; color: var(--text-muted); }
.settings-profile-edit-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 1px solid var(--canvas-200);
    background: var(--white); color: var(--canvas-500); cursor: pointer;
    border-radius: var(--radius-md); flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.settings-profile-edit-btn:hover { background: var(--canvas-50); color: var(--terra); border-color: var(--terra-light); }
[data-theme="dark"] .settings-profile-card { background: var(--canvas-100); border-color: var(--canvas-200); }
[data-theme="dark"] .settings-profile-edit-btn { background: var(--canvas-200); border-color: var(--canvas-300); color: var(--canvas-400); }
[data-theme="dark"] .settings-profile-edit-btn:hover { color: var(--terra); border-color: var(--terra-light); }

/* Profile Edit Modal */
.profile-edit-modal { width: 380px; padding: 0; overflow: hidden; }
.profile-edit-modal .pm-close {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 28px; height: 28px; border-radius: var(--radius-sm);
    background: var(--canvas-100); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--canvas-500); transition: all 0.2s ease;
}
.profile-edit-modal .pm-close:hover { background: var(--canvas-200); color: var(--canvas-900); transform: rotate(90deg); }
.profile-edit-header {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 24px 14px; border-bottom: 1px solid var(--canvas-100);
}
.profile-edit-header h3 { font-size: 16px; font-weight: 700; margin: 0; color: var(--canvas-900); font-family: var(--font-display); }
.profile-edit-avatar-wrap { position: relative; }
.profile-edit-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--terra); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    overflow: hidden;
}
.profile-edit-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-edit-avatar-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--white); border: 1.5px solid var(--canvas-200);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--canvas-500);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.profile-edit-avatar-badge:hover { background: var(--terra); color: var(--white); border-color: var(--terra); }
.profile-edit-avatar-remove {
    position: absolute; top: -2px; right: -2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--white); border: 1.5px solid var(--canvas-200);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--canvas-400);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.profile-edit-avatar-remove:hover { background: #ef4444; color: var(--white); border-color: #ef4444; }
[data-theme="dark"] .profile-edit-avatar-remove { background: var(--canvas-200); border-color: var(--canvas-300); }
[data-theme="dark"] .profile-edit-avatar-remove:hover { background: #ef4444; border-color: #ef4444; }
.profile-edit-body {
    padding: 12px 22px; display: flex; flex-direction: column; gap: 8px;
    overflow-y: auto; max-height: calc(90vh - 200px);
    scrollbar-width: none; -ms-overflow-style: none;
}
.profile-edit-body::-webkit-scrollbar { display: none; }
.profile-edit-field { display: flex; flex-direction: column; gap: 2px; }
.profile-edit-field label { font-size: 10px; font-weight: 600; color: var(--canvas-500); text-transform: uppercase; letter-spacing: 0.5px; }
.profile-edit-field .input {
    font-size: 13px; padding: 7px 10px;
    border: 1px solid var(--canvas-200); border-radius: var(--radius-md);
    background: var(--canvas-50); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-edit-field .input:hover { border-color: var(--canvas-300); }
.profile-edit-field .input:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(217,119,87,0.1); outline: none; }
.profile-edit-divider { height: 1px; background: var(--canvas-100); margin: 2px 0; }
.profile-edit-pw-toggle {
    display: flex; align-items: center; gap: 5px;
    background: none; border: none; cursor: pointer;
    font-size: 12.5px; font-weight: 500; color: var(--canvas-600);
    padding: 2px 0; transition: color 0.15s ease;
}
.profile-edit-pw-toggle:hover { color: var(--terra); }
.profile-edit-pw-chevron { transition: transform 0.2s ease; margin-left: auto; }
.profile-edit-pw-chevron.open { transform: rotate(180deg); }
.profile-edit-pw-fields { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.profile-edit-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 24px; border-top: 1px solid var(--canvas-100);
}
[data-theme="dark"] .profile-edit-header { border-color: var(--canvas-200); }
[data-theme="dark"] .profile-edit-divider { background: var(--canvas-200); }
[data-theme="dark"] .profile-edit-footer { border-color: var(--canvas-200); }
[data-theme="dark"] .profile-edit-avatar-badge { background: var(--canvas-200); border-color: var(--canvas-300); }
[data-theme="dark"] .profile-edit-modal .pm-close { background: var(--canvas-200); color: var(--canvas-500); }
[data-theme="dark"] .profile-edit-modal .pm-close:hover { background: var(--canvas-300); color: var(--canvas-900); }
[data-theme="dark"] .profile-edit-field .input { background: var(--canvas-100); border-color: var(--canvas-300); }
[data-theme="dark"] .profile-edit-field .input:hover { border-color: var(--canvas-400); }
[data-theme="dark"] .profile-edit-field .input:focus { border-color: var(--terra); box-shadow: 0 0 0 3px rgba(217,119,87,0.15); }

/* Settings rows */
.settings-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; gap: 12px;
}
.settings-row-label { font-size: 13px; color: var(--canvas-700); white-space: nowrap; }
.settings-row-label-danger { color: #ef4444; }
.settings-danger-btn { color: #ef4444 !important; border-color: rgba(239,68,68,0.2) !important; }
.settings-danger-btn:hover { background: rgba(239,68,68,0.06) !important; }
[data-theme="dark"] .settings-row-label { color: var(--text-muted); }

/* Keyboard shortcuts */
.settings-shortcuts { display: flex; flex-direction: column; gap: 0; }
.settings-shortcut {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; font-size: 13px; color: var(--canvas-700);
    border-bottom: 1px solid var(--canvas-100);
}
.settings-shortcut:last-child { border-bottom: none; }
.shortcut-keys { display: flex; align-items: center; gap: 4px; }
kbd {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 6px; font-size: 11px;
    font-family: var(--font-display); font-weight: 600;
    background: var(--canvas-50); border: 1px solid var(--canvas-150, var(--canvas-200));
    border-radius: 5px; color: var(--canvas-600);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    line-height: 1; min-width: 20px; min-height: 20px;
}
[data-theme="dark"] kbd { background: var(--bg-elevated); border-color: var(--canvas-300); color: var(--text-secondary); box-shadow: 0 1px 0 var(--canvas-300); }
[data-theme="dark"] .settings-shortcut { color: var(--text-muted); border-bottom-color: var(--canvas-300); }

/* About section */
.settings-about { display: flex; flex-direction: column; gap: 0; }
.settings-about-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; font-size: 13px; color: var(--canvas-700);
    border-bottom: 1px solid var(--canvas-100);
}
.settings-about-row:last-child { border-bottom: none; }
.settings-about-val { font-weight: 600; color: var(--canvas-500); font-size: 12.5px; }
.settings-about-link { color: var(--terra); font-weight: 600; font-size: 12.5px; text-decoration: none; }
.settings-about-link:hover { text-decoration: underline; }
[data-theme="dark"] .settings-about-row { color: var(--text-muted); border-bottom-color: var(--canvas-300); }

/* ── Dark mode: Atlas chat + session cards ── */
[data-theme="dark"] .atlas-msg.user {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
[data-theme="dark"] .atlas-msg.user:hover .atlas-user-actions { opacity: 1; }
[data-theme="dark"] .atlas-msg .ai-content { color: var(--text-secondary); }
[data-theme="dark"] .session-history-item { background: var(--bg-elevated); }
[data-theme="dark"] .session-history-item:hover { background: var(--bg-lifted); }
[data-theme="dark"] .session-history-title { color: var(--text-primary); }

/* Password change form */
.settings-password-form {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--canvas-100);
}
.settings-password-form .input-sm {
    padding: 7px 10px; font-size: 13px;
    border: 1px solid var(--canvas-200); border-radius: var(--radius-md);
    background: var(--canvas-50); color: var(--canvas-900);
    outline: none; transition: border-color 0.15s ease; width: 100%;
}
.settings-password-form .input-sm:focus { border-color: var(--terra); }
.settings-password-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
[data-theme="dark"] .settings-password-form .input-sm { background: var(--canvas-100); border-color: var(--canvas-300); color: var(--canvas-900); }

/* Payment methods */
.settings-pm-empty {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; font-size: 13px; color: var(--canvas-400);
}
.settings-pm-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--canvas-100);
}
.settings-pm-card:last-child { border-bottom: none; }
.settings-pm-brand {
    width: 36px; height: 24px; border-radius: 4px;
    background: var(--canvas-50); border: 1px solid var(--canvas-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--canvas-500);
    text-transform: uppercase; flex-shrink: 0;
}
.settings-pm-info { flex: 1; }
.settings-pm-num { font-size: 13px; font-weight: 600; color: var(--canvas-800); font-family: var(--font-display); }
.settings-pm-exp { font-size: 12px; color: var(--canvas-400); margin-top: 1px; }
.settings-pm-default {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    color: var(--terra); background: var(--terra-50);
    padding: 2px 6px; border-radius: var(--radius-sm);
}
.settings-pm-remove {
    border: none; background: none; color: var(--canvas-400);
    cursor: pointer; padding: 4px; border-radius: var(--radius-sm);
    opacity: 0; transition: opacity 0.15s ease;
}
.settings-pm-card:hover .settings-pm-remove { opacity: 1; }
.settings-pm-remove:hover { color: #ef4444; background: rgba(239,68,68,0.06); }

/* Plan usage summary */
.plan-usage-row { margin-bottom: 24px; }
.plan-usage-card {
    padding: 16px 20px; border-radius: var(--radius-xl);
    background: var(--white); border: 1px solid var(--canvas-200);
}
.plan-usage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.plan-usage-title { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--canvas-900); }
.plan-usage-period { font-size: 12.5px; color: var(--canvas-400); }
.plan-usage-stats { display: flex; align-items: center; gap: 0; margin-bottom: 14px; }
.plan-usage-stat { flex: 1; text-align: center; }
.plan-usage-num { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--canvas-900); }
.plan-usage-label { display: block; font-size: 12px; color: var(--canvas-400); margin-top: 2px; }
.plan-usage-divider { width: 1px; height: 32px; background: var(--canvas-200); flex-shrink: 0; }
.plan-usage-bar-wrap { height: 6px; background: var(--canvas-100); border-radius: 3px; overflow: hidden; }
.plan-usage-bar { height: 100%; background: var(--terra); border-radius: 3px; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.plan-usage-footer { font-size: 12.5px; color: var(--canvas-400); margin-top: 10px; }
[data-theme="dark"] .plan-usage-card { background: var(--canvas-100); border-color: var(--canvas-200); }
[data-theme="dark"] .plan-usage-bar-wrap { background: var(--canvas-200); }

.settings-section h3 {
    font-family: var(--font-display);
    font-size: 12.5px; font-weight: 700; margin-bottom: 10px;
    color: var(--canvas-900);
    padding-bottom: 6px;
    position: relative;
}
/* Underline removed per design review */
.settings-section h3::after {
    display: none;
}

/* --- Theme Switcher (Appearance control) --- */
.theme-switcher {
    position: relative;
    display: inline-flex;
    background: var(--canvas-100);
    border-radius: 14px;
    padding: 4px;
    gap: 2px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04);
}
.theme-indicator {
    position: absolute;
    top: 4px; bottom: 4px; left: 4px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
    pointer-events: none;
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1), width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-opt {
    position: relative; z-index: 1;
    display: flex; align-items: center; gap: 7px;
    padding: 9px 20px;
    border: none; background: transparent;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.25s ease;
    white-space: nowrap;
    user-select: none;
}
.theme-opt.active { color: var(--text-primary); }
.theme-opt svg { flex-shrink: 0; transition: opacity 0.25s ease; }
.theme-opt:not(.active) svg { opacity: 0.6; }
.settings-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 12px;
    line-height: 1.5;
}

/* Dark mode: indicator needs to be lighter than the pill bg */
[data-theme="dark"] .theme-switcher {
    background: var(--canvas-200);
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05);
}
[data-theme="dark"] .theme-indicator {
    background: var(--canvas-300);
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
[data-theme="dark"] .theme-opt.active { color: var(--canvas-950); }

/* ============================================
   Plan & Credits Tab
   ============================================ */

/* Enterprise plan hero card */
.plan-hero {
    display: flex;
    gap: 0;
    margin-bottom: 32px;
    border-radius: 16px;
    border: 1px solid var(--canvas-200);
    background: var(--white);
    min-height: 160px;
    position: relative;
}
.plan-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(217,119,87,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.plan-hero-left {
    flex: 1;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: relative;
}
.plan-hero-left::after {
    content: '';
    position: absolute;
    right: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: var(--canvas-150);
}
.plan-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #16a34a;
    margin-bottom: 4px;
}
.plan-hero-pulse {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,0.4);
    animation: pulse-dot 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}
.plan-hero-name {
    font-family: var(--font-display);
    font-size: clamp(18px, 1.3vw, 22px);
    font-weight: 800;
    color: var(--canvas-900);
    line-height: 1.1;
}
.plan-hero-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.plan-hero-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.plan-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    color: var(--canvas-600);
}
.plan-hero-right {
    width: 240px;
    flex-shrink: 0;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
}
.plan-hero-perks {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.plan-hero-perk {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--canvas-700);
}
.plan-hero-perk svg { color: #16a34a; flex-shrink: 0; }
.plan-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.plan-hero-manage-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--terra);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.plan-hero-manage-btn:hover { background: var(--terra-700); box-shadow: 0 3px 12px rgba(217,119,87,0.3); }
.plan-hero-manage-btn svg { transition: transform 0.2s ease; }
.plan-manage-wrap { position: relative; }
.plan-manage-menu {
    display: none; position: absolute; bottom: calc(100% + 6px); right: 0;
    min-width: 200px; background: var(--white); border: 1px solid var(--canvas-200);
    border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px; z-index: 50;
    animation: planMenuIn 0.15s ease-out;
}
@keyframes planMenuIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.plan-manage-menu.open { display: block; }
.plan-manage-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 12px; border: none; background: none;
    font-size: 14.5px; color: var(--canvas-700); border-radius: var(--radius-md);
    cursor: pointer; transition: background 0.15s ease;
}
.plan-manage-item:hover { background: var(--canvas-50); }
.plan-manage-item svg { flex-shrink: 0; color: var(--canvas-400); }
.plan-manage-danger { color: #ef4444; }
.plan-manage-danger svg { color: #ef4444; }
.plan-manage-danger:hover { background: rgba(239,68,68,0.06); }
.plan-manage-sep { height: 1px; background: var(--canvas-100); margin: 4px 8px; }
[data-theme="dark"] .plan-manage-menu { background: var(--canvas-100); border-color: var(--canvas-300); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
[data-theme="dark"] .plan-manage-item { color: var(--canvas-500); }
[data-theme="dark"] .plan-manage-item:hover { background: var(--canvas-200); }
[data-theme="dark"] .plan-manage-item svg { color: var(--canvas-400); }
.plan-hero-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    background: transparent;
    color: var(--canvas-500);
    border: 1px solid var(--canvas-200);
    border-radius: var(--radius-lg);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.plan-hero-cancel-btn:hover { color: var(--red-500); border-color: var(--red-200); background: var(--red-50); }

/* Renew button */
.plan-hero-renew-btn {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px 14px; background: var(--terra); color: #fff;
    border: none; border-radius: var(--radius-lg);
    font-size: 13.5px; font-weight: 600; font-family: var(--font);
    cursor: pointer; transition: all 0.15s;
}
.plan-hero-renew-btn:hover { background: var(--terra-700); box-shadow: 0 3px 12px rgba(217,119,87,0.3); }

/* Cancelled status */
.plan-hero-status-cancelled .plan-hero-pulse { background: #ef4444 !important; box-shadow: 0 0 0 0 rgba(239,68,68,0.4) !important; animation: none !important; }
.plan-hero-status-cancelled { color: #ef4444 !important; }

/* Cancelled hero card — muted border */
.plan-hero.plan-hero-cancelled { border-color: var(--canvas-200); opacity: 0.9; }
.plan-hero.plan-hero-cancelled::before { background: linear-gradient(135deg, rgba(239,68,68,0.04) 0%, transparent 60%); }

/* Lifetime variant — special glow */
.plan-hero.plan-hero-lifetime { border-color: rgba(217,119,87,0.25); }
.plan-hero.plan-hero-lifetime::before { background: linear-gradient(135deg, rgba(217,119,87,0.1) 0%, rgba(196,97,63,0.04) 60%); }
.plan-hero.plan-hero-lifetime .plan-hero-name { background: linear-gradient(135deg, var(--terra), #c4613f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.plan-hero.plan-hero-lifetime .plan-hero-cancel-btn { display: none !important; }

/* Annual variant */
.plan-hero.plan-hero-annual::before { background: linear-gradient(135deg, rgba(139,92,246,0.05) 0%, transparent 60%); }

/* Free row — original stat cards */
.plan-free-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 32px;
}

/* Legacy compat */
.plan-balance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 32px;
}
[data-theme="dark"] .plan-hero { background: var(--canvas-50); border-color: var(--canvas-200); }
[data-theme="dark"] .plan-hero::before { background: linear-gradient(135deg, rgba(224,124,88,0.08) 0%, transparent 60%); }
[data-theme="dark"] .plan-hero-left::after { background: var(--canvas-200); }
[data-theme="dark"] .plan-hero-name { color: var(--canvas-900); }
[data-theme="dark"] .plan-hero.plan-hero-lifetime::before { background: linear-gradient(135deg, rgba(224,124,88,0.12) 0%, rgba(196,97,63,0.05) 60%); }
[data-theme="dark"] .plan-hero-cancel-btn { border-color: var(--canvas-300); color: var(--canvas-500); }
[data-theme="dark"] .plan-hero-cancel-btn:hover { color: #ef6b6b; border-color: rgba(239,107,107,0.3); background: rgba(239,107,107,0.08); }
[data-theme="dark"] .plan-hero-renew-btn { background: var(--terra); }
[data-theme="dark"] .plan-hero.plan-hero-cancelled { border-color: var(--canvas-300); }

.plan-balance-card .stat-num { color: var(--terra); font-size: 16px; }
.plan-balance-card .stat-lbl { font-size: 12px; }
.plan-balance-card, .plan-trial-card { padding: 18px; }
/* Active card gets the highlight gradient */
.plan-card-active { background: linear-gradient(135deg, var(--terra-50), var(--white)); }
[data-theme="dark"] .plan-card-active { background: linear-gradient(135deg, rgba(224,124,88,0.08), var(--canvas-50)); }
.plan-trial-icon { color: var(--terra); }
.plan-trial-icon svg { width: 22px; height: 22px; }
.plan-trial-card.used .plan-trial-icon { color: var(--canvas-400); }
.plan-trial-card.used .stat-lbl { color: var(--canvas-400); }
.plan-trial-card.used { opacity: 0.6; }

/* Plan mode tabs */
.plan-mode-tabs {
    display: flex;
    gap: 4px;
    background: var(--canvas-100);
    border-radius: var(--radius-lg);
    padding: 4px;
    margin-bottom: 24px;
    width: fit-content;
}
.plan-mode-tab {
    padding: 8px 20px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--canvas-500);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.plan-mode-tab:hover { color: var(--canvas-700); }
.plan-mode-tab.active {
    background: var(--white);
    color: var(--terra);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .plan-mode-tabs { background: var(--canvas-100); }
[data-theme="dark"] .plan-mode-tab.active { background: var(--canvas-200); color: #e07c58; }

.plan-mode-content { display: none; }
.plan-mode-content.active { display: block; }

/* Pricing grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}
.pricing-grid-4 { grid-template-columns: repeat(4, 1fr); }

.pricing-card {
    position: relative;
    padding: 18px 16px;
    background: var(--white);
    border: 1.5px solid var(--canvas-200);
    border-radius: var(--radius-xl);
    text-align: center;
    transition: all 0.25s var(--ease);
}
.pricing-card:hover {
    border-color: var(--terra-200);
    box-shadow: 0 4px 20px rgba(217,119,87,0.1);
}
.pricing-popular { border-color: var(--terra-200); padding-top: 28px; }
.pricing-popular:hover { border-color: var(--terra); }
.pricing-best { border-color: var(--terra-300); padding-top: 34px; }
.pricing-best:hover { border-color: var(--terra); }
.pricing-lifetime { border-color: var(--canvas-300); background: linear-gradient(135deg, var(--canvas-50), var(--white)); padding-top: 28px; }

.pricing-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    background: var(--terra);
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}
.pricing-best .pricing-badge { background: linear-gradient(135deg, var(--terra), var(--terra-700)); }
.pricing-lifetime .pricing-badge { background: var(--canvas-700); }

.pricing-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    border-radius: var(--radius-xl);
    background: var(--canvas-50);
    color: var(--canvas-600);
    transition: color 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.pricing-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(217,119,87,0.07);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.4s ease;
    z-index: -1;
}
.pricing-card:hover .pricing-icon::before {
    transform: scaleY(1);
}
.pricing-card:hover .pricing-icon { color: var(--terra); }
.pricing-icon-pop, .pricing-icon-best, .pricing-icon-lifetime { /* no pre-fill — same base as default */ }
[data-theme="dark"] .pricing-icon { background: var(--canvas-100); color: var(--canvas-400); }
[data-theme="dark"] .pricing-icon::before { background: rgba(224,124,88,0.08); }
[data-theme="dark"] .pricing-card:hover .pricing-icon { color: #e07c58; }
[data-theme="dark"] .pricing-icon-pop,
[data-theme="dark"] .pricing-icon-best,
[data-theme="dark"] .pricing-icon-lifetime { /* no pre-fill in dark mode either */ }
.pricing-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 3px;
}
.pricing-credits {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.pricing-price {
    font-family: var(--font-display);
    font-size: 14.5px;
    font-weight: 800;
    color: var(--canvas-950);
    line-height: 1;
    margin-bottom: 2px;
}
.pricing-interval {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--canvas-400);
}
.pricing-per {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.pricing-buy {
    width: 100%;
    padding: 8px 14px;
    background: var(--terra);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.pricing-buy:hover {
    background: var(--terra-700);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(217,119,87,0.3);
}

[data-theme="dark"] .pricing-card { background: var(--canvas-50); border-color: var(--canvas-200); }
[data-theme="dark"] .pricing-card:hover { border-color: rgba(224,124,88,0.4); box-shadow: 0 4px 20px rgba(224,124,88,0.1); }
[data-theme="dark"] .pricing-popular { border-color: rgba(224,124,88,0.3); }
[data-theme="dark"] .pricing-best { border-color: rgba(224,124,88,0.4); }
[data-theme="dark"] .pricing-lifetime { background: linear-gradient(135deg, var(--canvas-100), var(--canvas-50)); border-color: var(--canvas-300); }
[data-theme="dark"] .pricing-buy { background: #e07c58; }
[data-theme="dark"] .pricing-buy:hover { background: #c46a4a; box-shadow: 0 2px 8px rgba(224,124,88,0.3); }

/* Details button — hidden on desktop */
.pricing-details-btn { display: none; }
[data-theme="dark"] .pricing-details-btn { color: #e07c58; }
[data-theme="dark"] .pricing-details-btn::after { border-color: #e07c58; }
[data-theme="dark"] .pricing-details { border-top-color: var(--canvas-200); }

/* Info box */
.plan-info-box {
    padding: 20px 24px;
    background: var(--canvas-50);
    border-radius: var(--radius-xl);
    border: 1px solid var(--canvas-150);
    margin-bottom: 24px;
}
.plan-info-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--canvas-800);
    margin-bottom: 8px;
}
.plan-info-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.plan-info-items span {
    font-size: 13.5px;
    color: var(--text-secondary);
    padding: 4px 12px;
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--canvas-150);
}
.plan-info-note {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 8px;
}
[data-theme="dark"] .plan-info-box { background: var(--canvas-100); border-color: var(--canvas-200); }
[data-theme="dark"] .plan-info-items span { background: var(--canvas-50); border-color: var(--canvas-200); }


/* Current plan indicator on pricing card */
.pricing-card.is-current-plan {
    border-color: var(--terra);
    box-shadow: 0 0 0 1px var(--terra), 0 4px 20px rgba(217,119,87,0.15);
}
.pricing-card.is-current-plan .pricing-buy { display: none; }
.pricing-card.is-current-plan .pricing-current-badge { display: flex !important; }
.pricing-current-badge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--terra);
    background: var(--terra-50);
    border-radius: var(--radius-lg);
    margin-top: 4px;
}
[data-theme="dark"] .pricing-card.is-current-plan {
    border-color: #e07c58;
    box-shadow: 0 0 0 1px #e07c58, 0 4px 20px rgba(224,124,88,0.15);
}
[data-theme="dark"] .pricing-current-badge {
    color: #e07c58;
    background: rgba(224,124,88,0.1);
}

/* Downgrade blocked state */
.pricing-card.is-lower-plan .pricing-buy {
    background: var(--canvas-200);
    color: var(--canvas-500);
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--canvas-200);
}
.pricing-card.is-lower-plan .pricing-buy::after { content: none; }
[data-theme="dark"] .pricing-card.is-lower-plan .pricing-buy {
    background: var(--canvas-200);
    color: var(--canvas-500);
    border-color: var(--canvas-300);
}

/* Plan Guard Modal */
.plan-guard-modal {
    width: 400px;
    max-width: 92vw;
    max-height: 95vh;
    padding: 18px 20px 14px;
    text-align: center;
    position: relative;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.plan-guard-modal::-webkit-scrollbar { display: none; }
.plan-guard-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin: 0 auto 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.plan-guard-icon.icon-upgrade {
    background: var(--terra-50);
    color: var(--terra);
}
.plan-guard-icon.icon-warning {
    background: #FEF3C7;
    color: #D97706;
}
.plan-guard-icon.icon-block {
    background: var(--red-50);
    color: var(--red-400);
}
.plan-guard-title {
    font-family: var(--font-display);
    font-size: clamp(16px, 1.05vw, 18px);
    font-weight: 700;
    color: var(--canvas-900);
    margin-bottom: 4px;
}
.plan-guard-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 14px;
}
.plan-guard-breakdown {
    background: var(--canvas-50);
    border: 1px solid var(--canvas-150);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 20px;
    text-align: left;
}
.plan-guard-row {
    display: flex;
    justify-content: space-between;
    font-size: 14.5px;
    color: var(--text-secondary);
    padding: 4px 0;
}
.plan-guard-row.total {
    border-top: 1px solid var(--canvas-150);
    margin-top: 8px;
    padding-top: 10px;
    font-weight: 700;
    color: var(--canvas-900);
}
.plan-guard-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
}
#modal-sub-confirm .plan-guard-actions {
    flex-direction: row;
    gap: 10px;
    margin-top: 8px;
}
.plan-guard-actions .btn-guard-primary {
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    background: var(--terra);
    color: white;
    transition: all 0.2s var(--ease);
}
.plan-guard-actions .btn-guard-primary:hover { background: var(--terra-700); }
.plan-guard-actions .btn-guard-secondary {
    padding: 8px 20px;
    font-size: 13.5px;
    font-weight: 500;
    border-radius: var(--radius-lg);
    border: 1px solid var(--canvas-200);
    cursor: pointer;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.2s var(--ease);
}
.plan-guard-actions .btn-guard-secondary:hover { background: var(--canvas-50); }
/* Subscription confirm modal buttons */
.plan-guard-btn {
    display: inline-block;
    padding: 8px 20px; font-size: 13.5px; font-weight: 600;
    border-radius: var(--radius-lg); border: none;
    cursor: pointer; font-family: var(--font);
    transition: all 0.2s var(--ease);
}
.plan-guard-btn-primary { background: var(--terra); color: white; }
.plan-guard-btn-primary:hover { background: var(--terra-700); box-shadow: 0 3px 12px rgba(217,119,87,0.3); }
.plan-guard-btn-danger { background: #ef4444; color: white; }
.plan-guard-btn-danger:hover { background: #dc2626; box-shadow: 0 3px 12px rgba(239,68,68,0.3); }
.plan-guard-btn-ghost { background: transparent; color: var(--canvas-500); font-weight: 500; border: 1px solid var(--canvas-200); padding: 8px 20px; font-size: 13.5px; }
.plan-guard-btn-ghost:hover { background: var(--canvas-50); color: var(--canvas-700); }
.plan-guard-btn-danger-text { color: #ef4444; border-color: transparent; }
.plan-guard-btn-danger-text:hover { color: #dc2626; background: rgba(239,68,68,0.05); }
[data-theme="dark"] .plan-guard-btn-ghost { color: var(--canvas-500); }
[data-theme="dark"] .plan-guard-btn-ghost:hover { color: var(--canvas-600); background: transparent; }

/* Close button on light modals */
.plan-guard-modal .pm-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--canvas-100);
    color: var(--canvas-500);
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
}
.plan-guard-modal .pm-close:hover {
    background: var(--canvas-200);
    color: var(--canvas-900);
}

[data-theme="dark"] .plan-guard-modal { background: var(--canvas-100); }
[data-theme="dark"] .plan-guard-modal .pm-close { background: var(--canvas-200); color: var(--canvas-500); }
[data-theme="dark"] .plan-guard-modal .pm-close:hover { background: var(--canvas-300); color: var(--canvas-900); }
[data-theme="dark"] .plan-guard-icon.icon-upgrade { background: rgba(224,124,88,0.12); }
[data-theme="dark"] .plan-guard-icon.icon-warning { background: rgba(217,119,6,0.12); color: #FBBF24; }
[data-theme="dark"] .plan-guard-icon.icon-block { background: rgba(239,68,68,0.12); }
[data-theme="dark"] .plan-guard-breakdown { background: var(--canvas-50); border-color: var(--canvas-200); }
[data-theme="dark"] .plan-guard-row.total { border-color: var(--canvas-200); }
[data-theme="dark"] .plan-guard-actions .btn-guard-secondary { border-color: var(--canvas-300); color: var(--canvas-600); }

/* Transaction History */
.plan-transactions { margin-top: 32px; }
.plan-section-title {
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--canvas-800);
    margin-bottom: 12px;
}
.plan-txn-list {
    border-radius: var(--radius-xl);
    border: 1px solid var(--canvas-150);
    overflow: hidden;
}
.plan-txn-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13.5px;
}
.plan-txn-row {
    display: grid;
    grid-template-columns: 100px 90px 80px 1fr;
    gap: 12px;
    padding: 12px 16px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--canvas-100);
    align-items: center;
}
.plan-txn-row:last-child { border-bottom: none; }
.plan-txn-date { color: var(--text-muted); font-size: 13.5px; }
.plan-txn-type {
    font-weight: 500;
    text-transform: capitalize;
}
.plan-txn-type.purchase { color: var(--green-500, #10b981); }
.plan-txn-type.subscription { color: var(--terra); }
.plan-txn-type.usage { color: var(--red-500, #ef4444); }
.plan-txn-type.trial { color: var(--canvas-500); }
.plan-txn-amount { font-weight: 600; font-family: var(--font-display); }
.plan-txn-amount.positive { color: var(--green-500, #10b981); }
.plan-txn-amount.negative { color: var(--red-500, #ef4444); }
.plan-txn-desc { color: var(--text-secondary); }

[data-theme="dark"] .plan-txn-list { border-color: var(--canvas-200); }
[data-theme="dark"] .plan-txn-row { border-bottom-color: var(--canvas-200); }

/* Data table — fit all columns on narrow/vertical screens */
@media (max-width: 1200px) {
    .data-table thead th { padding: 5px 8px; font-size: 10px; }
    .data-table tbody td { padding: 9px 8px; font-size: 12px; }
    /* Hide Resume column */
    .data-table thead th:nth-child(5),
    .data-table tbody td:nth-child(5) { display: none; }
    .table-actions { gap: 3px; }
    .table-icon-btn { width: 25px; height: 25px; }
    .table-icon-btn svg { width: 12px; height: 12px; }
    .session-mode-badge { font-size: 10px; padding: 2px 7px; }
    .session-status-badge { font-size: 10px; padding: 2px 7px; }
}

@media (max-width: 768px) {
    /* Heatmap — responsive for tablet */
    .heatmap-section { padding: clamp(10px, 2vw, 16px); }
    .heatmap-header { flex-wrap: wrap; gap: 8px; }
    .heatmap-title { font-size: 13.5px; }
    .heatmap-tab { font-size: 11px; padding: 3px 8px; }
    .heatmap-year-btn { font-size: 13.5px; padding: 2px 6px; }
    .heatmap-year-label { font-size: 11px; min-width: 32px; }
    .heatmap-cell { width: 10px; height: 10px; }
    .heatmap-month-label { font-size: 9px; height: 14px; line-height: 14px; }
    .heatmap-day-labels span { font-size: 9px; height: 10px; line-height: 10px; width: 22px; }
    .heatmap-day-labels { padding-top: 14px; }
    .heatmap-grid { gap: 2px; }
    .heatmap-week { gap: 2px; }
    .heatmap-grid-wrap { gap: 3px; }
    .heatmap-stats { gap: clamp(6px, 2vw, 12px); margin-top: 10px; padding-top: 10px; }
    .heatmap-stat-val { font-size: clamp(13.5px, 1.5vw, 17px); }
    .heatmap-stat-lbl { font-size: clamp(9.5px, 1vw, 11px); }
    .heatmap-legend-label { font-size: 9px; }
    .heatmap-legend .heatmap-cell { width: 9px; height: 9px; }
    .plan-balance-row { grid-template-columns: 1fr; }
    /* 3 columns for 3-card grids, 2x2 for 4-card grids */
    .pricing-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .pricing-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .plan-mode-tabs { width: 100%; }
    .plan-mode-tab { flex: 1; text-align: center; }
    /* Pricing cards — compact mini cards */
    .pricing-card { padding: 10px 8px 12px; border-radius: 12px; }
    .pricing-popular,
    .pricing-lifetime { padding-top: 18px; }
    .pricing-best { padding-top: 24px; }
    .pricing-icon { width: 30px; height: 30px; margin-bottom: 6px; border-radius: 8px; }
    .pricing-icon svg { width: 22px; height: 22px; }
    .pricing-badge { font-size: 9px; padding: 2px 7px; top: -7px; letter-spacing: 0.02em; }
    .pricing-name { font-size: 11px; margin-bottom: 2px; }
    .pricing-price { font-size: 13px; margin-bottom: 4px; }
    .pricing-interval { font-size: 10px; }
    /* Hide details by default, show via expand */
    .pricing-details {
        display: none;
        padding-top: 8px;
        margin-top: 6px;
        border-top: 1px solid var(--canvas-100);
    }
    .pricing-details.open { display: block; }
    .pricing-credits { font-size: 10px; margin-bottom: 4px; color: var(--text-muted); }
    .pricing-per { font-size: 9.5px; margin-bottom: 8px; }
    .pricing-buy { padding: 6px 8px; font-size: 10.5px; border-radius: 7px; }
    .pricing-current-badge { font-size: 10px; padding: 4px 8px; gap: 4px; }
    /* Details toggle button */
    .pricing-details-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        background: none;
        border: none;
        color: var(--terra);
        font-family: var(--font);
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        padding: 2px 0;
        letter-spacing: 0.01em;
        transition: opacity 0.15s ease;
    }
    .pricing-details-btn:hover { opacity: 0.7; }
    .pricing-details-btn::after {
        content: '';
        display: inline-block;
        width: 8px; height: 8px;
        border-right: 1.5px solid var(--terra);
        border-bottom: 1.5px solid var(--terra);
        transform: rotate(45deg);
        margin-top: -2px;
        transition: transform 0.2s ease;
    }
    .pricing-details-btn.open::after { transform: rotate(-135deg); margin-top: 2px; }
    /* Info box compact */
    .plan-info-box { padding: 12px 14px; margin-top: 12px; border-radius: 10px; }
    .plan-info-title { font-size: 11px; margin-bottom: 6px; }
    .plan-info-items { gap: 5px; }
    .plan-info-items span { font-size: 10px; padding: 4px 8px; }
    .plan-info-note { font-size: 10px; margin-top: 6px; }
    /* Transaction History — compact card rows */
    .plan-section-title { font-size: 12px; margin-bottom: 8px; }
    .plan-txn-empty { padding: 16px; font-size: 12px; }
    .plan-txn-row {
        grid-template-columns: auto 1fr auto;
        gap: 2px 8px;
        padding: 8px 10px;
        font-size: 12px;
    }
    .plan-txn-date { font-size: 11px; grid-row: 1; grid-column: 1; }
    .plan-txn-type { font-size: 10.5px; grid-row: 1; grid-column: 2; text-transform: capitalize; }
    .plan-txn-amount { font-size: 12px; grid-row: 1; grid-column: 3; text-align: right; }
    .plan-txn-desc { font-size: 10px; grid-row: 2; grid-column: 1 / -1; color: var(--text-muted); line-height: 1.4; }
    .plan-transactions { margin-top: 16px; }
}

/* ============================================
   Completed Session Styles
   ============================================ */

/* --- Status badges --- */
.session-status-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}
.status-ready {
    background: rgba(16,185,129,0.1);
    color: #10b981;
}
.status-completed {
    background: rgba(107,114,128,0.1);
    color: #6b7280;
}
[data-theme="dark"] .status-ready {
    background: rgba(16,185,129,0.15);
    color: #34d399;
}
[data-theme="dark"] .status-completed {
    background: rgba(156,163,175,0.12);
    color: #9ca3af;
}

/* --- Completed session row --- */
.session-completed {
    opacity: 0.55;
    transition: opacity 0.2s;
}
.session-completed:hover {
    opacity: 0.8;
}
.session-completed td { color: var(--text-muted) !important; }
.session-completed strong { color: var(--text-secondary) !important; }

/* Dark mode — all text white, table headers white, completed row buttons visible */
[data-theme="dark"] .data-table thead th {
    color: #fff;
}
[data-theme="dark"] .data-table tbody td {
    color: #fff;
}
[data-theme="dark"] .data-table tbody td strong {
    color: #fff;
}
[data-theme="dark"] .session-completed td {
    color: #aaa !important;
}
[data-theme="dark"] .session-completed strong {
    color: #bbb !important;
}
/* Duplicate & Delete buttons on completed sessions — keep them bright */
[data-theme="dark"] .session-completed .table-icon-btn:not(.disabled):not([disabled]) {
    color: #fff;
    opacity: 1;
}
[data-theme="dark"] .table-icon-btn {
    color: #ccc;
}
[data-theme="dark"] .table-icon-btn:hover {
    color: #fff;
}
[data-theme="dark"] .table-icon-btn.primary {
    color: #111;
}
[data-theme="dark"] .table-icon-btn.primary:hover {
    background: var(--canvas-900);
    color: #111;
}

/* --- Disabled action buttons --- */
.btn-icon[disabled],
.btn-icon.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* --- Session Detail Modal --- */
.modal.modal-lg { width: 720px; max-width: 92vw; }

.session-detail-modal .modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 22px 12px;
}

.detail-header h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.detail-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.detail-stats-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 22px 12px;
    border-bottom: 1px solid var(--canvas-100);
}

.detail-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

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

/* Tabs */
.detail-tabs {
    display: flex;
    gap: 0;
    padding: 0 28px;
    border-bottom: 1px solid var(--canvas-100);
}

.detail-tab-btn {
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.detail-tab-btn.active {
    color: var(--canvas-950);
    border-bottom-color: var(--canvas-950);
}

.detail-tab-btn:hover:not(.active) {
    color: var(--text-secondary);
}

/* Body */
.detail-body {
    padding: 16px 22px 22px;
    max-height: 55vh;
    overflow-y: auto;
}

/* Conversation blocks */
.detail-q-block {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--canvas-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--canvas-300);
}

.detail-a-block {
    margin-bottom: 20px;
    padding: 12px 14px;
    background: rgba(16,185,129,0.04);
    border-radius: var(--radius-md);
    border-left: 3px solid #10b981;
}

.detail-speaker {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.detail-speaker.interviewer { color: var(--canvas-600); }
.detail-speaker.ai { color: #10b981; }

.detail-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--canvas-800);
}

.detail-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-bullets li {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--canvas-800);
    padding: 3px 0 3px 14px;
    position: relative;
}

.detail-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #10b981;
}

.detail-full-answer {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--canvas-200);
}

.detail-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    align-items: center;
}

.detail-tips-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-right: 2px;
}

.detail-tip {
    font-size: 11px;
    padding: 2px 8px;
    background: rgba(16,185,129,0.08);
    color: #059669;
    border-radius: var(--radius-full);
}

.detail-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13.5px;
}

/* Insights grid */
.detail-insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.detail-insight-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    background: var(--canvas-50);
    border-radius: var(--radius-md);
    text-align: center;
}

.detail-insight-card svg { color: var(--text-muted); }

.detail-insight-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--canvas-950);
    font-family: var(--font-display);
}

.detail-insight-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Dark mode overrides */
[data-theme="dark"] .detail-q-block {
    background: rgba(255,255,255,0.03);
    border-left-color: var(--canvas-400);
}
[data-theme="dark"] .detail-a-block {
    background: rgba(16,185,129,0.06);
}
[data-theme="dark"] .detail-text,
[data-theme="dark"] .detail-bullets li { color: var(--canvas-300); }
[data-theme="dark"] .detail-full-answer { color: var(--canvas-400); border-top-color: var(--canvas-600); }
[data-theme="dark"] .detail-tip { background: rgba(16,185,129,0.12); color: #34d399; }
[data-theme="dark"] .detail-insight-card { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .detail-insight-value { color: var(--canvas-100); }
[data-theme="dark"] .detail-tab-btn.active { color: var(--canvas-100); border-bottom-color: var(--canvas-100); }
[data-theme="dark"] .detail-stats-bar { border-bottom-color: var(--canvas-700); }
[data-theme="dark"] .detail-tabs { border-bottom-color: var(--canvas-700); }

/* --- Ask Atlas Feedback Tab --- */
.detail-feedback-intro {
    padding: 12px 0;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.detail-feedback-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.detail-suggest-btn {
    background: var(--canvas-50);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: var(--radius-full);
    padding: 6px 14px;
    font-family: var(--font);
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.detail-suggest-btn:hover {
    background: var(--canvas-100);
    color: var(--canvas-950);
    border-color: var(--canvas-300);
}

.detail-feedback-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    max-height: 32vh;
    overflow-y: auto;
}

.detail-fb-msg {
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    line-height: 1.6;
    max-width: 88%;
    animation: fadeSlideUp 0.25s ease;
}

.detail-fb-msg.user {
    align-self: flex-end;
    background: var(--canvas-900);
    color: var(--white);
    border-radius: 14px 14px 4px 14px;
}

.detail-fb-msg.ai {
    align-self: flex-start;
    background: var(--canvas-50);
    color: var(--canvas-800);
    border-radius: 14px 14px 14px 4px;
    border: 1px solid var(--canvas-100);
}

.detail-fb-msg.ai p { margin: 0 0 6px; }
.detail-fb-msg.ai p:last-child { margin-bottom: 0; }
.detail-fb-score { font-weight: 700; color: #10b981; }
.detail-fb-verdict { font-style: italic; color: var(--text-muted); font-size: 12.5px; }

.detail-feedback-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.detail-feedback-input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--canvas-200);
    border-radius: var(--radius-full);
    font-family: var(--font);
    font-size: 13.5px;
    background: var(--white);
    color: var(--canvas-950);
    outline: none;
    transition: border-color 0.2s;
}
.detail-feedback-input:focus {
    border-color: var(--canvas-400);
}

.detail-feedback-send {
    padding: 8px 12px !important;
    border-radius: var(--radius-full) !important;
    min-width: 36px;
}

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

/* Dark mode */
[data-theme="dark"] .detail-suggest-btn {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--canvas-400);
}
[data-theme="dark"] .detail-suggest-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--canvas-200);
}
[data-theme="dark"] .detail-fb-msg.user {
    background: var(--canvas-800);
}
[data-theme="dark"] .detail-fb-msg.ai {
    background: rgba(255,255,255,0.04);
    color: var(--canvas-300);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .detail-feedback-input {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: var(--canvas-200);
}

@media (max-width: 600px) {
    .detail-insights-grid { grid-template-columns: 1fr; }
    .detail-stats-bar { flex-wrap: wrap; gap: 10px; }
    .detail-feedback-suggestions { gap: 6px; }
}

/* ============================================
   Payment Modal — Single Column, Compact
   ============================================ */

.pm {
    width: 460px; max-width: 94vw; padding: 0 !important;
    display: flex; flex-direction: column; border-radius: 14px !important;
    overflow: hidden; max-height: 92vh;
}
.pm .modal-head, .pm .modal-foot { display: none; }

/* Top strip — order summary (compact) */
.pm-sidebar {
    padding: 16px 20px; display: flex; flex-wrap: wrap;
    align-items: center; gap: 6px;
    background: var(--canvas-950); color: #fff;
}
.pm-brand {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-size: 14px; font-weight: 700;
    color: #fff;
}
.pm-plan-label { display: none; }
.pm-plan-name {
    font-family: var(--font-display); font-size: 14.5px; font-weight: 600;
    color: rgba(255,255,255,0.7); margin-bottom: 0;
}
.pm-price-block {
    display: flex; align-items: baseline; gap: 4px; margin-bottom: 0;
}
.pm-price {
    font-family: var(--font-display); font-size: clamp(19px, 1.3vw, 22px); font-weight: 800;
    letter-spacing: -0.02em; color: #fff;
}
.pm-price-note {
    font-size: 12.5px; color: rgba(255,255,255,0.4);
}
.pm-divider, .pm-summary-row, .pm-secure { display: none; }

/* Form area */
.pm-form-side {
    flex: 1; padding: 16px 20px 20px; overflow-y: auto;
    position: relative; background: var(--white);
}
.pm-close {
    margin-left: auto;
    background: rgba(255,255,255,0.1); border: none; cursor: pointer;
    color: rgba(255,255,255,0.6); padding: 6px;
    border-radius: 8px; transition: all 0.15s; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.pm-close:hover { background: rgba(255,255,255,0.2); color: #fff; }

/* Method tabs */
.pm-tabs {
    display: flex; gap: 0; margin-bottom: 18px;
    background: var(--canvas-50); border-radius: 10px; padding: 3px;
}
.pm-tab {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 10px; background: none; border: none;
    font-family: var(--font); font-size: 14px; font-weight: 500;
    color: var(--text-secondary); cursor: pointer;
    border-radius: 8px; transition: all 0.2s; border-bottom: none; margin-bottom: 0;
}
.pm-tab:hover { color: var(--text-primary); background: rgba(0,0,0,0.03); }
.pm-tab.active {
    color: var(--text-primary); background: var(--white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); font-weight: 600;
}
.pm-tab.active svg { color: var(--text-primary); }
.pm-tab svg { width: 15px; height: 15px; }

/* Form fields */
.pm-field { margin-bottom: 12px; }
.pm-field label {
    display: block; font-size: 13.5px; font-weight: 600;
    color: var(--text-primary); margin-bottom: 4px;
}
.pm-field input, .pm-field select {
    width: 100%; padding: 9px 11px;
    border: 1.5px solid var(--canvas-200); border-radius: 8px;
    font-family: var(--font); font-size: 14.5px; color: var(--text-primary);
    background: var(--white); transition: all 0.15s;
    box-sizing: border-box; -webkit-appearance: none;
}
.pm-field select { cursor: pointer; padding-right: 28px; }
.pm-field input:focus, .pm-field select:focus {
    outline: none; border-color: var(--terra);
    box-shadow: 0 0 0 3px rgba(217,119,87,0.08);
}
.pm-field input::placeholder { color: var(--canvas-400); }
.pm-field input.pm-invalid {
    border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.08);
}
.pm-field-row { display: flex; gap: 8px; }
.pm-field-row .pm-field { flex: 1; }

/* Card number with brand icons */
.pm-card-input-wrap { position: relative; }
.pm-card-input-wrap input { padding-right: 120px; }
.pm-card-brands {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    display: flex; gap: 3px; align-items: center;
}
.pm-card-brands svg { border-radius: 3px; opacity: 0.3; transition: opacity 0.2s; }
.pm-card-brands svg.pm-brand-detected { opacity: 1; }

.pm-billing-label {
    font-size: 12.5px; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin: 14px 0 10px; padding-top: 12px;
    border-top: 1px solid var(--canvas-100);
}

/* Error */
.pm-error {
    padding: 8px 12px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca;
    color: #dc2626; font-size: 13.5px; margin-bottom: 10px;
}

/* Pay button */
.pm-pay-btn {
    width: 100%; padding: 9px 16px;
    background: var(--terra); color: white;
    border: none; border-radius: 8px;
    font-family: var(--font); font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 4px;
}
.pm-pay-btn:hover {
    background: var(--terra-700); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(217,119,87,0.3);
}
.pm-pay-btn:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none;
}

/* Apple Pay section */
.pm-apple-prompt {
    text-align: center; padding: 24px 16px 16px;
    display: flex; flex-direction: column; align-items: center;
}
.pm-apple-icon { display: none; }
.pm-apple-prompt h4 { display: none; }
.pm-apple-prompt p {
    font-size: 14.5px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5;
}
.pm-apple-btn {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 16px; background: #000; color: #fff;
    border: none; border-radius: 8px; font-size: 14.5px; font-weight: 600;
    font-family: var(--font); cursor: pointer; transition: all 0.2s;
}
.pm-apple-btn:hover { background: #1a1a1a; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.25); }
.pm-apple-footer {
    display: flex; align-items: center; gap: 5px; margin-top: 12px;
    font-size: 12.5px; color: var(--text-muted);
}

/* Bank / Plaid section */
.pm-plaid-prompt { padding: 4px 0 0; }
.pm-plaid-logo {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px;
}
.pm-plaid-logo svg { color: var(--text-primary); }
.pm-plaid-logo span {
    font-family: var(--font-display); font-size: 18px; font-weight: 900;
    color: var(--text-primary); letter-spacing: 0.12em;
}
.pm-plaid-prompt > p {
    font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px;
}
.pm-plaid-banks {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.pm-bank-chip {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 6px;
    background: var(--canvas-50); border: 1px solid var(--canvas-150);
    font-size: 12.5px; color: var(--text-secondary); font-weight: 500;
}
.pm-bank-chip svg { border-radius: 3px; flex-shrink: 0; }
.pm-bank-more {
    background: none; border-style: dashed;
    color: var(--text-muted); font-style: italic; font-size: 11px;
}
.pm-plaid-btn {
    width: 100%; padding: 9px 16px;
    background: var(--canvas-900); color: white;
    border: none; border-radius: 8px;
    font-family: var(--font); font-size: 14.5px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pm-plaid-btn svg { border-radius: 2px; }
.pm-plaid-btn:hover { background: var(--canvas-700); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Plaid connected */
.pm-plaid-connected {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    margin-bottom: 12px;
}
.pm-plaid-check {
    width: 26px; height: 26px; border-radius: 50%;
    background: #dcfce7; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pm-plaid-connected strong { font-size: 14.5px; color: var(--text-primary); display: block; }
.pm-plaid-connected span { font-size: 12.5px; color: var(--text-secondary); }
.pm-plaid-change {
    background: none; border: none;
    font-size: 13.5px; color: var(--terra); font-weight: 600;
    cursor: pointer; font-family: var(--font);
}
.pm-plaid-change:hover { text-decoration: underline; }
.pm-plaid-remove { color: var(--canvas-500); font-weight: 500; }
.pm-plaid-remove:hover { color: #dc2626; text-decoration: underline; }
.pm-bank-pay-btn { margin-top: 0; }

/* Responsive */
@media (max-width: 500px) {
    .pm { width: 96vw; max-width: 96vw; border-radius: 12px !important; max-height: 90vh; overflow-y: auto; }
    .pm-sidebar { padding: 10px 12px; gap: 4px; }
    .pm-brand { font-size: 12.5px; gap: 5px; }
    .pm-brand svg { width: 16px; height: 16px; }
    .pm-plan-name { font-size: 12.5px; }
    .pm-price { font-size: 18px; }
    .pm-price-note { font-size: 11px; }
    .pm-close { padding: 5px; }
    .pm-close svg { width: 12px; height: 12px; }
    .pm-form-side { padding: 12px 14px 16px; }
    .pm-tabs { padding: 3px; border-radius: 8px; margin-bottom: 12px; }
    .pm-tab { font-size: 12px; padding: 6px 10px; gap: 5px; border-radius: 6px; }
    .pm-tab svg { width: 12px; height: 12px; }
    .pm-field { margin-bottom: 10px; }
    .pm-field label { font-size: 12px; margin-bottom: 5px; }
    .pm-field input, .pm-field select { font-size: 13px; padding: 8px 10px; border-radius: 7px; }
    .pm-field-row { gap: 6px; }
    .pm-card-brands { gap: 3px; right: 8px; }
    .pm-card-brands svg { width: 28px; height: 18px; }
    .pm-billing-label { font-size: 11px; padding-top: 10px; margin-top: 10px; margin-bottom: 8px; }
    .pm-pay-btn { font-size: 12.5px; padding: 10px; border-radius: 8px; margin-top: 10px; }
    .pm-error { font-size: 11px; padding: 8px 10px; }
    .pm-apple-prompt p { font-size: 12px; }
    .pm-apple-btn { padding: 8px 14px; font-size: 12.5px; border-radius: 7px; gap: 6px; }
    .pm-apple-btn svg { width: 14px; height: 17px; }
    .pm-apple-footer { font-size: 10px; }
    .pm-plaid-prompt > p { font-size: 12px; }
    .pm-plaid-btn { font-size: 12.5px; padding: 9px 16px; }
    .pm-bank-chip { font-size: 12px; padding: 5px 8px; }
    /* Contact Sales modal */
    .payment-modal { max-width: 94vw; }
    .payment-modal .modal-head h3 { font-size: 13.5px; }
    .payment-modal .modal-desc { font-size: 12px; margin-bottom: 12px; }
    .payment-modal .form-group { margin-bottom: 10px; }
    .payment-modal label { font-size: 12px; font-weight: 600; margin-bottom: 5px; display: block; }
    .payment-modal .form-input { font-size: 12.5px; padding: 8px 10px; }
    .payment-modal textarea.form-input { font-size: 12.5px; }
    .payment-modal .custom-select .cs-trigger { font-size: 12.5px; padding: 8px 10px; }
    .payment-modal .cs-option { font-size: 12.5px; padding: 7px 10px; }
    .payment-modal .btn-primary { font-size: 12.5px; padding: 9px 14px; }
    /* Link bar compact */
    .link-bar { margin-bottom: 10px; }
    .link-bar-login, .link-bar-top { padding: 6px 8px; border-radius: 8px; }
    .link-bar-email { font-size: 12.5px; }
    .link-bar-badge { font-size: 11px; padding: 3px 6px; gap: 3px; }
    .link-bar-badge svg { width: 10px; height: 10px; }
    .link-bar-dots { width: 24px; height: 24px; }
    /* Plan guard modals (cancel / renew / upgrade / feedback) — compact */
    .plan-guard-modal { width: 340px; max-width: 90vw; padding: 14px 16px 12px; }
    .plan-guard-icon { width: 28px; height: 28px; margin-bottom: 5px; }
    .plan-guard-icon svg { width: 18px; height: 18px; }
    .plan-guard-title { font-size: 14.5px; margin-bottom: 3px; }
    .plan-guard-desc { font-size: 12px; margin-bottom: 10px; line-height: 1.5; }
    .plan-guard-breakdown { padding: 10px 14px; margin-bottom: 14px; border-radius: 10px; }
    .plan-guard-row { font-size: 12.5px; padding: 3px 0; }
    .plan-guard-row.total { margin-top: 6px; padding-top: 8px; }
    .plan-guard-actions { gap: 8px; }
    .plan-guard-actions .btn-guard-primary { padding: 7px 16px; font-size: 12.5px; border-radius: 8px; }
    .plan-guard-actions .btn-guard-secondary { padding: 7px 16px; font-size: 12.5px; border-radius: 8px; }
    .plan-guard-btn { padding: 7px 16px; font-size: 12.5px; border-radius: 8px; }
    .plan-guard-btn-ghost { padding: 7px 16px; font-size: 12.5px; }
    .plan-guard-modal .pm-close { width: 26px; height: 26px; top: 10px; right: 10px; }
    .plan-guard-modal .pm-close svg { width: 13px; height: 13px; }
    /* Cancel survey form — compact */
    .plan-guard-modal label { font-size: 12.5px; }
    .plan-guard-modal input[type="radio"] { width: 14px; height: 14px; }
    .plan-guard-modal textarea { font-size: 12px; padding: 8px 10px; }
    /* Profile edit modal — compact */
    .profile-edit-modal { width: 320px; max-width: 90vw; }
    .profile-edit-header { padding: 14px 16px 10px; gap: 6px; }
    .profile-edit-header h3 { font-size: 13.5px; }
    .profile-edit-avatar { width: 42px; height: 42px; font-size: 17px; }
    .profile-edit-avatar-badge { width: 18px; height: 18px; bottom: -1px; right: -1px; }
    .profile-edit-avatar-badge svg { width: 8px; height: 8px; }
    .profile-edit-avatar-remove { width: 16px; height: 16px; top: -1px; right: -1px; }
    .profile-edit-avatar-remove svg { width: 7px; height: 7px; }
    .profile-edit-body { padding: 10px 16px; gap: 6px; }
    .profile-edit-field label { font-size: 9.5px; letter-spacing: 0.4px; }
    .profile-edit-field .input { font-size: 12.5px; padding: 6px 9px; }
    .profile-edit-pw-toggle { font-size: 11px; }
    .profile-edit-pw-fields { gap: 5px; }
    .profile-edit-footer { padding: 10px 16px; gap: 6px; }
    .profile-edit-footer .btn { font-size: 12px; padding: 6px 14px; }
    .profile-edit-modal .pm-close { width: 24px; height: 24px; top: 10px; right: 10px; }
    .profile-edit-modal .pm-close svg { width: 12px; height: 12px; }
}

/* ---- Dark theme ---- */
[data-theme="dark"] .pm-sidebar { background: #0a0a0a; }
[data-theme="dark"] .pm-form-side { background: #141414; }
/* Tabs */
[data-theme="dark"] .pm-tabs { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .pm-tab { color: #999; }
[data-theme="dark"] .pm-tab:hover { color: #ddd; background: rgba(255,255,255,0.04); }
[data-theme="dark"] .pm-tab.active {
    color: #fff; background: rgba(255,255,255,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .pm-tab.active svg { color: #fff; }
/* Fields */
[data-theme="dark"] .pm-field label { color: #ccc; }
[data-theme="dark"] .pm-field input,
[data-theme="dark"] .pm-field select {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #fff;
}
[data-theme="dark"] .pm-field input:focus,
[data-theme="dark"] .pm-field select:focus {
    border-color: var(--terra); box-shadow: 0 0 0 3px rgba(217,119,87,0.15);
    background: rgba(255,255,255,0.08);
}
[data-theme="dark"] .pm-field input::placeholder { color: #666; }
[data-theme="dark"] .pm-field select option { background: #1a1a1a; color: #eee; }
[data-theme="dark"] .pm-billing-label { color: #bbb; border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .pm-error { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.25); color: #f87171; }
[data-theme="dark"] .pm-pay-btn { background: var(--terra); }
[data-theme="dark"] .pm-pay-btn:hover { background: var(--terra-700); }
/* Card brands */
[data-theme="dark"] .pm-card-brands svg { opacity: 0.5; }
[data-theme="dark"] .pm-card-brands svg.pm-brand-detected { opacity: 1; }
/* Apple Pay */
[data-theme="dark"] .pm-apple-prompt p { color: #aaa; }
[data-theme="dark"] .pm-apple-btn { background: #fff; color: #000; }
[data-theme="dark"] .pm-apple-btn:hover { background: #eee; }
[data-theme="dark"] .pm-apple-btn svg { fill: #000; }
[data-theme="dark"] .pm-apple-footer { color: #666; }
/* Plaid */
[data-theme="dark"] .pm-plaid-logo svg { color: #ddd; }
[data-theme="dark"] .pm-plaid-logo span { color: #eee; }
[data-theme="dark"] .pm-plaid-prompt > p { color: #aaa; }
[data-theme="dark"] .pm-bank-chip {
    background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #ccc;
}
[data-theme="dark"] .pm-bank-more { color: #777; }
[data-theme="dark"] .pm-plaid-btn { background: #eee; color: #111; }
[data-theme="dark"] .pm-plaid-btn:hover { background: #fff; }
[data-theme="dark"] .pm-plaid-btn svg path { fill: #111; }
[data-theme="dark"] .pm-plaid-connected { background: rgba(22,163,106,0.1); border-color: rgba(22,163,106,0.25); }
[data-theme="dark"] .pm-plaid-connected strong { color: #eee; }
[data-theme="dark"] .pm-plaid-connected span { color: #999; }

/* ---- Link (inline in Card tab) ---- */
.link-bar { margin-bottom: 14px; }
.link-bar-login, .link-bar-top {
    display: flex; align-items: center;
    padding: 8px 12px; border: 1.5px solid var(--canvas-200);
    border-radius: 8px; background: var(--canvas-50);
    position: relative; gap: 6px;
}
.link-bar-email {
    flex: 1; border: none !important; background: none !important;
    font-family: var(--font); font-size: 14.5px; color: var(--text-primary);
    padding: 2px 0; outline: none !important; box-shadow: none !important;
    min-width: 0;
}
.link-bar-email::placeholder { color: var(--canvas-400); }
.link-bar-badge {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer;
    font-family: var(--font); font-size: 13.5px; font-weight: 600;
    color: var(--canvas-500); white-space: nowrap;
    padding: 3px 6px; border-radius: 4px;
    transition: background 0.15s ease;
}
.link-bar-badge:hover { background: rgba(0,214,111,0.08); }
.link-bar-badge span { color: #00D66F; }
.link-bar-dots {
    width: 22px; height: 22px; display: flex; align-items: center;
    justify-content: center; border: none; background: none;
    color: var(--canvas-400); cursor: pointer; border-radius: 4px;
    flex-shrink: 0;
}
.link-bar-dots:hover { background: var(--canvas-100); color: var(--canvas-600); }
.link-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    background: var(--white); border: 1px solid var(--canvas-200);
    border-radius: 8px; box-shadow: var(--shadow-md);
    min-width: 140px; z-index: 10; overflow: hidden;
}
.link-menu button {
    display: block; width: 100%; padding: 8px 14px; border: none;
    background: none; text-align: left; font-size: 13.5px; font-weight: 500;
    color: var(--text-primary); cursor: pointer; font-family: var(--font);
}
.link-menu button:hover { background: var(--canvas-50); }
.link-bar-email-display {
    flex: 1; font-size: 14.5px; color: var(--text-primary);
    font-weight: 500; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.link-bar-logout {
    background: none; border: none; color: #2563eb; font-size: 13.5px;
    font-weight: 500; cursor: pointer; white-space: nowrap;
    font-family: var(--font);
}
.link-bar-logout:hover { text-decoration: underline; }
.link-saved-card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1.5px solid var(--canvas-200);
    border-radius: 8px; margin-top: 8px; background: var(--white);
}
.link-saved-card-brand {
    width: 36px; height: 24px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; overflow: hidden;
}
.link-saved-card-info { flex: 1; min-width: 0; }
.link-saved-card-name { font-size: 14px; font-weight: 600; color: var(--text-primary); display: block; }
.link-saved-card-num { font-size: 12.5px; color: var(--text-secondary); }
.link-saved-change {
    background: none; border: none; color: #2563eb; font-size: 13.5px;
    font-weight: 500; cursor: pointer; font-family: var(--font);
}
.link-saved-change:hover { text-decoration: underline; }
/* OTP overlay */
.link-otp-overlay { padding: 14px 0 4px; text-align: center; }
.link-otp-overlay p { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 12px; }
.link-otp-overlay p strong { color: var(--text-primary); }
.link-otp-inputs {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-bottom: 8px;
}
.link-otp-digit {
    width: 36px; height: 42px; border: 1.5px solid var(--canvas-200);
    border-radius: 8px; text-align: center; font-size: 19px; font-weight: 700;
    font-family: var(--font-mono, monospace); color: var(--text-primary);
    background: var(--white); outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.link-otp-digit:focus { border-color: #00D66F; box-shadow: 0 0 0 3px rgba(0,214,111,0.15); }
.link-otp-dash { font-size: 16px; color: var(--canvas-300); margin: 0 2px; }
.link-resend {
    background: none; border: none; color: #00D66F; font-size: 13px;
    font-weight: 500; cursor: pointer; text-align: center; padding: 4px;
    font-family: var(--font);
}
.link-resend:hover { text-decoration: underline; }
/* Card selector list (Link) */
.link-cards-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.link-card-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1.5px solid var(--canvas-200);
    border-radius: 8px; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.link-card-item:hover { background: var(--canvas-50); }
.link-card-item.selected { border-color: #00D66F; background: rgba(0,214,111,0.04); }
.link-card-brand {
    width: 36px; height: 24px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.link-card-brand.visa { background: #1A1F71; }
.link-card-brand.mastercard { background: #EB001B; }
.link-card-brand.amex { background: #2E77BC; }
.link-card-brand.discover { background: #FF6000; }
.link-card-brand.default { background: var(--canvas-400); }
.link-card-info { flex: 1; min-width: 0; }
.link-card-num { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.link-card-exp { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.link-card-check {
    width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--canvas-300); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.link-card-item.selected .link-card-check { background: #00D66F; border-color: #00D66F; }
.link-add-card-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; color: #00D66F; font-size: 13.5px;
    font-weight: 500; cursor: pointer; padding: 4px 0; font-family: var(--font);
}
.link-add-card-btn:hover { text-decoration: underline; }
/* Dark theme Link */
[data-theme="dark"] .link-bar-login,
[data-theme="dark"] .link-bar-top { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .link-bar-email { color: #eee; }
[data-theme="dark"] .link-bar-email::placeholder { color: #666; }
[data-theme="dark"] .link-saved-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .link-otp-digit { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); color: #fff; }
[data-theme="dark"] .link-otp-digit:focus { border-color: #00D66F; box-shadow: 0 0 0 3px rgba(0,214,111,0.15); }
[data-theme="dark"] .link-menu { background: #1a1a1a; border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .link-menu button { color: #ddd; }
[data-theme="dark"] .link-menu button:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .link-card-item { border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .link-card-item:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .link-card-item.selected { border-color: #00D66F; background: rgba(0,214,111,0.08); }
[data-theme="dark"] .link-card-check { border-color: #555; }

/* ============================================
   Global Mobile Responsive Fixes
   ============================================ */

/* Tablet (768px) */
@media (max-width: 768px) {
    .input-row { grid-template-columns: 1fr; }
    .modal { width: 92vw; }
    .modal-head { padding: 16px 18px 0; }
    .modal-body { padding: 14px 18px; }
    .modal-foot { padding: 12px 18px; }
    .settings-row-label { white-space: normal; }
    .settings-shortcut { flex-wrap: wrap; gap: 6px; }
    /* Settings compact for tablet */
    .settings-section { margin-bottom: 16px; }
    .settings-section h3 { font-size: 11px; margin-bottom: 6px; padding-bottom: 4px; }
    .settings-hint { font-size: 11px; margin-bottom: 8px; }
    .settings-row { padding: 6px 0; gap: 8px; }
    .settings-row-label { font-size: 12px; }
    .toggle-row { font-size: 12px; padding: 7px 0; }
    .toggle { width: 28px; height: 16px; border-radius: 8px; }
    .toggle::after { width: 12px; height: 12px; }
    .toggle-row input:checked + .toggle::after { transform: translateX(12px); }
    .pill-btn { font-size: 12px; padding: 4px 10px; }
    .pill-group { gap: 4px; }
    .settings-shortcut { padding: 6px 0; font-size: 12px; }
    kbd { font-size: 10px; padding: 2px 5px; min-width: 18px; min-height: 18px; }
    .settings-about-row { padding: 6px 0; font-size: 12px; }
    .settings-about-val, .settings-about-link { font-size: 11px; }
    .settings-profile-avatar { width: 32px; height: 32px; font-size: 13.5px; }
    .settings-profile-name { font-size: 13px; }
    .settings-profile-email { font-size: 11px; }
    .settings-profile-card { padding: 10px 12px; gap: 10px; }
    .settings-profile-edit-btn { width: 26px; height: 26px; }
    .theme-opt { padding: 7px 14px; font-size: 12.5px; gap: 5px; }
    .theme-switcher { padding: 3px; border-radius: 12px; }
    .settings-theme-card { padding: 10px 12px; gap: 8px; max-width: 280px; border-radius: 12px; }
    .stc-icon-wrap { width: 30px; height: 30px; border-radius: 8px; }
    .stc-icon-wrap svg { width: 15px; height: 15px; }
    .stc-info strong { font-size: 12.5px; }
    .stc-info span { font-size: 10.5px; }
    .stc-cycle svg { width: 14px; height: 14px; }
    .settings-password-form .input-sm { padding: 6px 9px; font-size: 12px; }
    .settings-pm-card { font-size: 12.5px; }
    /* Plan tab compact */
    .plan-hero { margin-bottom: 20px; min-height: auto; flex-direction: column; }
    .plan-hero-left { padding: 14px 16px; }
    .plan-hero-left::after { display: none; }
    .plan-hero-right { width: 100%; padding: 0 16px 14px; gap: 8px; }
    .plan-hero-name { font-size: 16px; }
    .plan-hero-status { font-size: 10px; gap: 5px; letter-spacing: 0.6px; }
    .plan-hero-pulse { width: 6px; height: 6px; }
    .plan-hero-desc { font-size: 12px; }
    .plan-hero-meta { gap: 12px; }
    .plan-hero-meta-item { font-size: 12px; gap: 4px; }
    .plan-hero-perks { gap: 5px; }
    .plan-hero-perk { font-size: 11px; gap: 5px; }
    .plan-hero-manage-btn { font-size: 12.5px; padding: 6px 12px; }
    .plan-hero-cancel-btn { font-size: 11px; padding: 4px 12px; }
    .plan-usage-row { margin-bottom: 16px; }
    .plan-usage-card { padding: 12px 14px; }
    .plan-usage-title { font-size: 12px; }
    .plan-usage-period { font-size: 10.5px; }
    .plan-usage-num { font-size: 16px; }
    .plan-usage-label { font-size: 10.5px; }
    .plan-usage-header { margin-bottom: 8px; }
    .plan-usage-stats { margin-bottom: 10px; }
    .plan-usage-footer { font-size: 10.5px; margin-top: 8px; }
    .plan-balance-row, .plan-free-row { gap: 10px; margin-bottom: 20px; }
    .plan-balance-card, .plan-trial-card { padding: 12px; }
    .plan-balance-card .stat-num { font-size: 13.5px; }
    .plan-balance-card .stat-lbl { font-size: 10.5px; }
    .plan-mode-tabs { margin-bottom: 16px; }
    .plan-mode-tab { padding: 6px 14px; font-size: 12px; }
    .plan-manage-item { font-size: 12.5px; padding: 7px 10px; gap: 8px; }
    .share-options { grid-template-columns: 1fr; gap: 6px; margin-top: 6px; }
    .share-option {
        flex-direction: row; text-align: left;
        padding: 10px 12px; gap: 8px;
        border-radius: 10px;
    }
    .share-option .share-option-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
    .share-option .share-option-icon svg { width: 16px; height: 16px; }
    .share-option strong { font-size: 12px; }
    .share-option span { font-size: 10px; }
    /* Hide desktop-only share options on mobile */
    .share-option-desktop { display: none; }
    .radio-card { padding: 14px 16px; }
    .file-info-bar { flex-wrap: wrap; }
    .session-history-item { gap: 10px; padding: 12px 14px; }
    /* Data table — extra compact at tablet, also hide Created column */
    .data-table thead th { padding: 4px 6px; font-size: 9.5px; }
    .data-table tbody td { padding: 8px 6px; font-size: 11px; }
    .data-table thead th:nth-child(6),
    .data-table tbody td:nth-child(6) { display: none; }
    /* Resumes table has only 6 cols — nth-child(6) is Actions; restore it */
    #tab-resumes .data-table thead th:nth-child(6),
    #tab-resumes .data-table tbody td:nth-child(6) { display: table-cell; }
    .table-icon-btn { width: 24px; height: 24px; }
    .table-icon-btn svg { width: 11px; height: 11px; }
    /* Create/Edit Session wizard — compact */
    .modal.modal-wizard { width: 92vw; }
    .wizard-dot { width: 22px; height: 22px; font-size: 11px; }
    .wizard-line { width: 24px; }
    .session-mode-toggle { gap: 8px; margin-bottom: 14px; }
    .session-mode-btn { padding: 12px 10px; }
    .session-mode-btn svg { width: 22px; height: 22px; }
    .session-mode-btn span { font-size: 12.5px; }
    .session-mode-btn small { font-size: 11px; }
    .model-grid { gap: 6px; }
    .model-card { padding: 10px 12px; gap: 8px; }
    .model-card-icon { width: 30px; height: 30px; border-radius: 7px; }
    .model-card-icon svg { width: 18px; height: 18px; }
    .model-name { font-size: 12.5px; }
    .model-tier { font-size: 10px; }
    .model-card-tag { font-size: 8.5px; top: 5px; right: 6px; padding: 1px 5px; }
    .auto-answer-row { padding: 12px; margin-top: 10px; }
    .auto-answer-label { font-size: 12.5px; }
    .auto-answer-desc { font-size: 11px; }
    /* Confirm action dialogs — compact */
    .confirm-action-card { width: 320px; padding: 18px 18px 14px; }
    .confirm-action-icon { width: 34px; height: 34px; margin-bottom: 10px; }
    .confirm-action-icon svg { width: 18px; height: 18px; }
    .confirm-action-title { font-size: 14.5px; margin-bottom: 4px; }
    .confirm-action-msg { font-size: 12.5px; margin-bottom: 14px; line-height: 1.5; }
    .confirm-action-btns .btn { min-width: 80px; font-size: 12.5px; padding: 7px 14px; }
    /* Custom select dropdown — compact on mobile */
    .csel-trigger { padding: 8px 12px; font-size: 13px; }
    .csel-item { padding: 8px 12px; font-size: 13px; gap: 8px; }
    .csel-menu { padding: 4px; }
}

/* Small phone (480px) */
@media (max-width: 480px) {
    /* Heatmap — compact for small phones */
    .heatmap-section { padding: 10px; }
    .heatmap-header { flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
    .heatmap-title { font-size: 13px; width: 100%; }
    .heatmap-tabs { order: 2; }
    .heatmap-year-nav { order: 1; }
    .heatmap-tab { font-size: 10.5px; padding: 3px 7px; }
    .heatmap-year-btn { font-size: 12.5px; padding: 2px 5px; }
    .heatmap-year-label { font-size: 10.5px; min-width: 30px; }
    .heatmap-cell { width: 9px; height: 9px; border-radius: 1.5px; }
    .heatmap-month-label { font-size: 8px; height: 12px; line-height: 12px; }
    .heatmap-day-labels span { font-size: 8px; height: 9px; line-height: 9px; width: 18px; }
    .heatmap-day-labels { padding-top: 12px; gap: 2px; }
    .heatmap-grid { gap: 2px; }
    .heatmap-week { gap: 2px; }
    .heatmap-grid-wrap { gap: 2px; }
    .heatmap-stats { gap: 8px; margin-top: 8px; padding-top: 8px; }
    .heatmap-stat-val { font-size: 13.5px; }
    .heatmap-stat-lbl { font-size: 9.5px; }
    .heatmap-legend-label { font-size: 8px; }
    .heatmap-legend .heatmap-cell { width: 8px; height: 8px; }
    .heatmap-footer { margin-top: 6px; }
    .btn { font-size: 12.5px; padding: 7px 14px; }
    .modal { max-width: 100vw; border-radius: var(--radius-xl) !important; }
    .modal-desc { font-size: 11px; margin-bottom: 10px; line-height: 1.5; }
    .modal.modal-sm { width: 96vw; }
    .modal-head h3 { font-size: 13.5px; }
    .modal-body { padding: 12px 16px; }
    .modal-foot { padding: 10px 16px; gap: 6px; }
    .modal-foot .btn { flex: 1; }
    .analytics-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
    .stat-card {
        padding: 14px 10px 12px;
        gap: 4px;
        border-radius: var(--radius-lg);
    }
    .stat-card:hover { transform: none; box-shadow: var(--shadow-sm); }
    .stat-icon-illustrative svg { width: 26px; height: 26px; }
    .stat-num { font-size: 18px; }
    .stat-lbl { font-size: 12px; }
    .upload-zone { padding: 20px; }
    .toggle-row { font-size: 12.5px; }
    .settings-row { flex-wrap: wrap; padding: 5px 0; }
    .settings-section { margin-bottom: 12px; }
    .settings-section h3 { font-size: 10.5px; margin-bottom: 5px; }
    .settings-hint { font-size: 10.5px; margin-bottom: 6px; }
    .settings-row-label { font-size: 11px; }
    .toggle-row { font-size: 11px; padding: 6px 0; }
    .toggle { width: 26px; height: 15px; border-radius: 8px; }
    .toggle::after { width: 11px; height: 11px; }
    .toggle-row input:checked + .toggle::after { transform: translateX(11px); }
    .pill-btn { font-size: 11px; padding: 4px 9px; }
    .pill-group { gap: 3px; }
    .settings-shortcut { padding: 5px 0; font-size: 11px; }
    kbd { font-size: 9.5px; padding: 2px 4px; min-width: 16px; min-height: 16px; border-radius: 4px; }
    .settings-about-row { padding: 5px 0; font-size: 11px; }
    .settings-about-val, .settings-about-link { font-size: 10.5px; }
    .settings-profile-avatar { width: 28px; height: 28px; font-size: 12.5px; }
    .settings-profile-name { font-size: 12.5px; }
    .settings-profile-email { font-size: 10.5px; }
    .settings-profile-card { padding: 8px 10px; gap: 8px; }
    .theme-opt { padding: 6px 12px; font-size: 12px; }
    .settings-theme-card { padding: 8px 10px; gap: 7px; max-width: 240px; border-radius: 10px; }
    .stc-icon-wrap { width: 26px; height: 26px; border-radius: 7px; }
    .stc-icon-wrap svg { width: 13px; height: 13px; }
    .stc-info strong { font-size: 12px; }
    .stc-info span { font-size: 10px; }
    .stc-cycle svg { width: 12px; height: 12px; }
    .radio-card { padding: 10px 12px; }
    .radio-card strong { font-size: 12.5px; }
    .radio-card span { font-size: 11px; }
    .settings-password-form .input-sm { padding: 5px 8px; font-size: 11px; }
    .coach-scope-tabs { width: 100%; }
    .coach-scope-tab { flex: 1; text-align: center; }
    .session-history-item { gap: 8px; padding: 10px 12px; }
    .session-history-item .sh-score { display: none; }
    /* Create/Edit Session wizard — extra compact */
    .modal.modal-wizard { width: 96vw; }
    .wizard-step { max-height: calc(85vh - 120px); padding-bottom: 16px !important; }
    .wizard-dot { width: 20px; height: 20px; font-size: 10px; }
    .wizard-line { width: 20px; margin: 0 3px; }
    .session-mode-toggle { gap: 6px; margin-bottom: 12px; }
    .session-mode-btn { padding: 10px 8px; border-radius: 10px; }
    .session-mode-btn svg { width: 20px; height: 20px; }
    .session-mode-btn span { font-size: 14px; }
    .session-mode-btn small { font-size: 12px; }
    .session-mode-badge { font-size: 9.5px; padding: 2px 8px; }
    .model-grid { gap: 8px; grid-template-columns: 1fr; }
    .model-card { padding: 8px 10px; gap: 7px; border-radius: 10px; }
    .model-card-icon { width: 26px; height: 26px; border-radius: 6px; }
    .model-card-icon svg { width: 16px; height: 16px; }
    .model-name { font-size: 14px; }
    .model-tier { font-size: 12px; }
    .model-card-tag { font-size: 10px; top: 4px; right: 5px; padding: 2px 6px; border-radius: 4px; }
    .auto-answer-row { padding: 10px; margin-top: 8px; border-radius: 10px; }
    .auto-answer-label { font-size: 12px; }
    .auto-answer-desc { font-size: 10.5px; }
    .toggle-switch { width: 34px; height: 19px; }
    .toggle-slider::before { width: 14px; height: 14px; left: 2.5px; bottom: 2.5px; }
    .toggle-switch input:checked + .toggle-slider::before { transform: translateX(15px); }
    .input-group label { font-size: 12.5px !important; margin-bottom: 4px !important; }
    .input-group input, .input-group select, .input-group textarea { font-size: 12.5px !important; padding: 8px 10px !important; }
    .csel-trigger { padding: 7px 10px; font-size: 12.5px; }
    .csel-item { padding: 7px 10px; font-size: 12.5px; gap: 6px; }
    .csel-menu { padding: 3px; }
    .inline-upload-row .btn-sm { font-size: 11px; padding: 5px 10px; }
    /* Confirm action dialogs — extra compact */
    .confirm-action-card { width: 290px; padding: 16px 16px 12px; }
    .confirm-action-icon { width: 30px; height: 30px; margin-bottom: 8px; }
    .confirm-action-icon svg { width: 16px; height: 16px; }
    .confirm-action-title { font-size: 13.5px; margin-bottom: 3px; }
    .confirm-action-msg { font-size: 12px; margin-bottom: 12px; line-height: 1.45; }
    .confirm-action-btns { gap: 6px; }
    .confirm-action-btns .btn { min-width: 72px; font-size: 12px; padding: 6px 12px; }
    .confirm-action-card .input { font-size: 12.5px; padding: 7px 10px; }
    /* Plan tab — extra compact */
    .plan-hero { margin-bottom: 16px; border-radius: 12px; }
    .plan-hero-left { padding: 12px 14px; }
    .plan-hero-right { padding: 0 14px 12px; }
    .plan-hero-name { font-size: 14.5px; }
    .plan-hero-status { font-size: 9.5px; }
    .plan-hero-desc { font-size: 11px; }
    .plan-hero-meta-item { font-size: 11px; }
    .plan-hero-perk { font-size: 10.5px; }
    .plan-hero-manage-btn { font-size: 12px; padding: 5px 10px; border-radius: 8px; }
    .plan-hero-cancel-btn { font-size: 10.5px; }
    .plan-usage-card { padding: 10px 12px; }
    .plan-usage-title { font-size: 11px; }
    .plan-usage-num { font-size: 14.5px; }
    .plan-usage-label { font-size: 10px; }
    .plan-balance-row, .plan-free-row { gap: 8px; margin-bottom: 14px; }
    .plan-balance-card, .plan-trial-card { padding: 10px; }
    .plan-balance-card .stat-num { font-size: 12.5px; }
    .plan-mode-tab { padding: 5px 12px; font-size: 11px; }
    .plan-mode-tabs { margin-bottom: 12px; }
    /* Pricing cards — extra compact */
    .pricing-card { padding: 8px 6px 10px; border-radius: 10px; }
    .pricing-popular,
    .pricing-lifetime { padding-top: 16px; }
    .pricing-best { padding-top: 20px; }
    .pricing-icon { width: 26px; height: 26px; margin-bottom: 4px; border-radius: 7px; }
    .pricing-icon svg { width: 20px; height: 20px; }
    .pricing-badge { font-size: 8.5px; padding: 1.5px 6px; top: -6px; }
    .pricing-name { font-size: 10.5px; }
    .pricing-price { font-size: 12px; margin-bottom: 3px; }
    .pricing-interval { font-size: 9.5px; }
    .pricing-details-btn { font-size: 9.5px; }
    .pricing-details-btn::after { width: 7px; height: 7px; }
    .pricing-details { padding-top: 6px; margin-top: 4px; }
    .pricing-credits { font-size: 9.5px; margin-bottom: 3px; }
    .pricing-per { font-size: 9px; margin-bottom: 6px; }
    .pricing-buy { padding: 5px 6px; font-size: 10px; border-radius: 6px; }
    .pricing-current-badge { font-size: 9.5px; padding: 3px 6px; }
    /* Info box — extra compact */
    .plan-info-box { padding: 10px 12px; margin-top: 10px; border-radius: 8px; }
    .plan-info-title { font-size: 10.5px; margin-bottom: 5px; }
    .plan-info-items { gap: 4px; }
    .plan-info-items span { font-size: 9.5px; padding: 3px 7px; }
    .plan-info-note { font-size: 9.5px; margin-top: 5px; }
    /* Transaction — extra compact */
    .plan-section-title { font-size: 12px; margin-bottom: 6px; }
    .plan-txn-empty { padding: 16px; font-size: 12px; }
    .plan-txn-row { padding: 7px 8px; gap: 2px 6px; }
    .plan-txn-date { font-size: 10.5px; }
    .plan-txn-type { font-size: 10px; }
    .plan-txn-amount { font-size: 11px; }
    .plan-txn-desc { font-size: 9.5px; }
    .plan-transactions { margin-top: 14px; }
    /* Data table — responsive */
    .data-table { display: block; }
    .data-table thead { display: none; }
    .data-table tbody { display: flex; flex-direction: column; gap: 8px; }
    .data-table tbody tr {
        display: flex; flex-wrap: wrap; gap: 6px 12px;
        padding: 12px 14px;
        background: var(--canvas-50);
        border-radius: var(--radius-md);
    }
    .data-table tbody td { padding: 0; font-size: 12.5px; border: none; }
    .data-table tbody td:first-child { width: 100%; font-weight: 600; }
    /* Resumes: restore Actions cell hidden by 768px nth-child(6) rule */
    #tab-resumes .data-table tbody td:nth-child(6) { display: block; width: 100%; }
    /* Answer toolbar wrap */
    .answer-toolbar { flex-wrap: wrap; }
}

/* Ultra-small (320px — iPhone SE) */
@media (max-width: 360px) {
    /* Heatmap — ultra compact */
    .heatmap-section { padding: 8px; }
    .heatmap-header { gap: 4px; margin-bottom: 6px; }
    .heatmap-title { font-size: 12px; }
    .heatmap-tab { font-size: 9.5px; padding: 2px 6px; }
    .heatmap-year-btn { font-size: 11px; padding: 2px 4px; }
    .heatmap-year-label { font-size: 10px; min-width: 28px; }
    .heatmap-cell { width: 7px; height: 7px; border-radius: 1px; }
    .heatmap-month-label { font-size: 7px; height: 10px; line-height: 10px; }
    .heatmap-day-labels span { font-size: 7px; height: 7px; line-height: 7px; width: 14px; }
    .heatmap-day-labels { padding-top: 10px; gap: 2px; }
    .heatmap-grid { gap: 1.5px; }
    .heatmap-week { gap: 1.5px; }
    .heatmap-grid-wrap { gap: 1.5px; }
    .heatmap-stats { gap: 6px; margin-top: 6px; padding-top: 6px; }
    .heatmap-stat-val { font-size: 12.5px; }
    .heatmap-stat-lbl { font-size: 8.5px; }
    .heatmap-legend-label { font-size: 7px; }
    .heatmap-legend .heatmap-cell { width: 7px; height: 7px; }
    .analytics-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px 8px 10px; }
    .stat-icon-illustrative svg { width: 22px; height: 22px; }
    .stat-num { font-size: 17px; }
    .stat-lbl { font-size: 11px; }
    .modal-head { padding: 14px 14px 0; }
    .modal-body { padding: 10px 14px; }
    .modal-foot { padding: 10px 14px; }
    .csel-trigger { padding: 6px 8px; font-size: 12px; }
    .csel-item { padding: 6px 8px; font-size: 12px; gap: 5px; }
    .csel-menu { padding: 3px; }
    .plan-txn-row { padding: 6px 6px; gap: 1px 5px; }
    /* Ultra-small: keep 3 cols but tighter */
    .pricing-grid { gap: 5px; }
    .pricing-grid-4 { gap: 5px; }
    .pricing-card { padding: 6px 4px 8px; }
    .pricing-popular,
    .pricing-lifetime { padding-top: 12px; }
    .pricing-best { padding-top: 16px; }
    .pricing-icon { width: 22px; height: 22px; margin-bottom: 3px; }
    .pricing-icon svg { width: 17px; height: 17px; }
    .pricing-name { font-size: 9.5px; }
    .pricing-price { font-size: 10.5px; }
    .pricing-interval { font-size: 9px; }
    .pricing-badge { font-size: 8px; padding: 1px 5px; }
    .pricing-details-btn { font-size: 9px; }
    /* Session wizard — ultra compact */
    .session-mode-btn { padding: 8px 6px; }
    .session-mode-btn svg { width: 18px; height: 18px; }
    .session-mode-btn span { font-size: 11px; }
    .session-mode-btn small { font-size: 10px; }
    .model-card { padding: 7px 8px; gap: 6px; }
    .model-card-icon { width: 22px; height: 22px; }
    .model-card-icon svg { width: 14px; height: 14px; }
    .model-name { font-size: 11px; }
    .model-tier { font-size: 9px; }
    /* Confirm dialogs — ultra compact */
    .confirm-action-card { width: 260px; padding: 14px 14px 10px; }
    .confirm-action-icon { width: 26px; height: 26px; margin-bottom: 6px; }
    .confirm-action-title { font-size: 13px; }
    .confirm-action-msg { font-size: 11px; margin-bottom: 10px; }
    .confirm-action-btns .btn { min-width: 64px; font-size: 11px; padding: 5px 10px; }
}

/* ── Social Login Buttons ─────────────────────────────────────────────────── */
.social-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border: 1.5px solid var(--canvas-200);
    border-radius: var(--radius-md);
    background: var(--white);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    font-family: var(--font);
}
.btn-social:hover {
    background: var(--canvas-50);
    border-color: var(--canvas-300);
    transform: translateY(-1px);
}
.btn-social:active { transform: translateY(0); }
.btn-social svg { flex-shrink: 0; }
[data-theme="dark"] .btn-social {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
    color: var(--dark-text, #f0ede8);
}
[data-theme="dark"] .btn-social:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.20);
}
/* Auth divider — "or continue with email" */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 0 16px;
    color: var(--text-muted);
    font-size: 12.5px;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--canvas-200);
}
[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after { background: rgba(255,255,255,0.10); }

/* Capacitor: larger touch targets */
body.is-capacitor .btn-social {
    padding: 14px 18px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    min-height: 52px !important;
    gap: 12px !important;
}
body.is-capacitor .social-btns { gap: 12px !important; margin-bottom: 20px !important; }
body.is-capacitor .auth-divider { font-size: 14px !important; margin: 4px 0 18px !important; }

/* ── Accessibility: focus-visible overrides for inputs that suppress outline ── */
/* Atlas history search — no :focus visual indicator defined, add one */
.atlas-history-search:focus-visible {
    outline: 2px solid var(--terra, #D97757);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Atlas compose input — outline suppressed on both base and :focus; restore for keyboard */
.atlas-compose-input:focus-visible {
    outline: 2px solid var(--terra, #D97757) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}
/* Link bar email inline input — no :focus visual indicator defined */
.link-bar-email:focus-visible {
    outline: 2px solid var(--terra, #D97757) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}