/* /Components/AI/PromptCoach.razor.rz.scp.css */
/* Prompt Coach Component Styles */
.prompt-coach[b-34iynua9g9] {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.prompt-coach.collapsed[b-34iynua9g9] {
    max-height: 48px;
}

.prompt-coach.expanded[b-34iynua9g9] {
    max-height: 2000px;
}

/* Toggle Button */
.coach-toggle[b-34iynua9g9] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: #fcd34d;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.coach-toggle:hover[b-34iynua9g9] {
    background: rgba(252, 211, 77, 0.1);
}

.toggle-icon[b-34iynua9g9] {
    font-size: 1.2rem;
}

.toggle-text[b-34iynua9g9] {
    flex: 1;
    text-align: left;
}

.toggle-arrow[b-34iynua9g9] {
    font-size: 0.7rem;
    opacity: 0.6;
    transition: transform 0.2s;
}

/* Coach Content */
.coach-content[b-34iynua9g9] {
    padding: 0 16px 16px;
    animation: slideDown-b-34iynua9g9 0.3s ease;
}

@keyframes slideDown-b-34iynua9g9 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Styles */
.tips-section[b-34iynua9g9],
.analysis-section[b-34iynua9g9],
.improvements-section[b-34iynua9g9],
.examples-section[b-34iynua9g9],
.mistakes-section[b-34iynua9g9] {
    margin-bottom: 20px;
}

.coach-content h4[b-34iynua9g9] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Tips List */
.tips-list[b-34iynua9g9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tip-item[b-34iynua9g9] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(252, 211, 77, 0.05);
    border: 1px solid rgba(252, 211, 77, 0.1);
    border-radius: 8px;
    transition: all 0.2s;
}

.tip-item:hover[b-34iynua9g9] {
    background: rgba(252, 211, 77, 0.1);
    border-color: rgba(252, 211, 77, 0.2);
}

.tip-icon[b-34iynua9g9] {
    font-size: 1rem;
    flex-shrink: 0;
}

.tip-content[b-34iynua9g9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tip-title[b-34iynua9g9] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #e2e8f0;
}

.tip-desc[b-34iynua9g9] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Analysis Section */
.analysis-content[b-34iynua9g9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.analysis-item[b-34iynua9g9] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
}

.analysis-item.warning[b-34iynua9g9] {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.analysis-item.info[b-34iynua9g9] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.analysis-item.good[b-34iynua9g9] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.analysis-icon[b-34iynua9g9] {
    font-size: 1rem;
    flex-shrink: 0;
}

.analysis-details[b-34iynua9g9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.analysis-issue[b-34iynua9g9] {
    font-size: 0.85rem;
    font-weight: 500;
    color: #e2e8f0;
}

.analysis-fix[b-34iynua9g9] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Improvements Section */
.improvement-chips[b-34iynua9g9] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.improvement-chip[b-34iynua9g9] {
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    color: #c4b5fd;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.improvement-chip:hover[b-34iynua9g9] {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
}

/* Examples Section */
.examples-list[b-34iynua9g9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.example-item[b-34iynua9g9] {
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.example-item:hover[b-34iynua9g9] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(139, 92, 246, 0.3);
}

.example-header[b-34iynua9g9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.example-type[b-34iynua9g9] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
}

.example-badge[b-34iynua9g9] {
    font-size: 0.65rem;
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-radius: 10px;
}

.example-prompt[b-34iynua9g9] {
    font-size: 0.8rem;
    color: #e2e8f0;
    margin: 0;
    line-height: 1.4;
}

.example-hint[b-34iynua9g9] {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.65rem;
    color: #64748b;
    opacity: 0;
    transition: opacity 0.2s;
}

.example-item:hover .example-hint[b-34iynua9g9] {
    opacity: 1;
}

/* Mistakes Section */
.mistakes-list[b-34iynua9g9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mistake-item[b-34iynua9g9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.mistake-wrong[b-34iynua9g9],
.mistake-right[b-34iynua9g9] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.8rem;
}

.mistake-wrong[b-34iynua9g9] {
    color: #f87171;
    text-decoration: line-through;
    opacity: 0.8;
}

.mistake-right[b-34iynua9g9] {
    color: #34d399;
}

.mistake-icon[b-34iynua9g9] {
    flex-shrink: 0;
    font-size: 0.75rem;
}

/* ============================================
   LIGHT THEME (Cloud)
   ============================================ */
.theme-cloud.prompt-coach[b-34iynua9g9] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

.theme-cloud .coach-toggle[b-34iynua9g9] {
    color: #d97706;
}

.theme-cloud .coach-toggle:hover[b-34iynua9g9] {
    background: rgba(217, 119, 6, 0.1);
}

.theme-cloud .coach-content h4[b-34iynua9g9] {
    color: #64748b;
    border-bottom-color: #e2e8f0;
}

.theme-cloud .tip-item[b-34iynua9g9] {
    background: rgba(252, 211, 77, 0.08);
    border-color: rgba(252, 211, 77, 0.2);
}

.theme-cloud .tip-title[b-34iynua9g9],
.theme-cloud .analysis-issue[b-34iynua9g9],
.theme-cloud .example-prompt[b-34iynua9g9] {
    color: #1e293b;
}

.theme-cloud .tip-desc[b-34iynua9g9],
.theme-cloud .analysis-fix[b-34iynua9g9] {
    color: #64748b;
}

.theme-cloud .improvement-chip[b-34iynua9g9] {
    background: rgba(139, 92, 246, 0.08);
    color: #7c3aed;
}

.theme-cloud .example-item[b-34iynua9g9] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.theme-cloud .example-item:hover[b-34iynua9g9] {
    background: #f1f5f9;
}
/* /Components/AiSuggestButton.razor.rz.scp.css */
/* SUGGEST-EVERYWHERE-1 (2026-06-29): self-contained, theme-aware "✨ Suggest" pill.
   Deliberately NOT built on .nts-btn so it reads as a light AI affordance next to the
   field label rather than a competing action button. Accent-tinted, compact, rounded. */

.ai-suggest-btn[b-o35cbc6es6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--theme-accent, var(--theme-primary));
    background: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb)), 0.10);
    border: 1px solid rgba(var(--theme-accent-rgb, var(--theme-primary-rgb)), 0.30);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.ai-suggest-btn:hover:not(:disabled)[b-o35cbc6es6] {
    background: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb)), 0.18);
    border-color: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb)), 0.50);
    box-shadow: 0 1px 4px rgba(var(--theme-accent-rgb, var(--theme-primary-rgb)), 0.18);
}

.ai-suggest-btn:active:not(:disabled)[b-o35cbc6es6] {
    transform: translateY(1px);
}

.ai-suggest-btn:disabled[b-o35cbc6es6] {
    cursor: default;
    opacity: 0.6;
}

.ai-suggest-btn.is-busy[b-o35cbc6es6] {
    opacity: 0.85;
}

/* Tiny spinner shown while a suggestion is generating. */
.ai-suggest-spinner[b-o35cbc6es6] {
    width: 0.7rem;
    height: 0.7rem;
    border: 2px solid rgba(var(--theme-accent-rgb, var(--theme-primary-rgb)), 0.30);
    border-top-color: var(--theme-accent, var(--theme-primary));
    border-radius: 50%;
    animation: ai-suggest-spin-b-o35cbc6es6 0.6s linear infinite;
}

@keyframes ai-suggest-spin-b-o35cbc6es6 {
    to { transform: rotate(360deg); }
}
/* /Components/AIUsageIndicator.razor.rz.scp.css */
/* AIUsageIndicator - Usage tracking display */

.ai-usage-indicator[b-ljzkhcojn8] {
    font-size: 0.85rem;
}

.ai-usage-indicator.compact[b-ljzkhcojn8] {
    display: inline-flex;
    align-items: center;
}

.spinner-small[b-ljzkhcojn8] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-ljzkhcojn8 0.8s linear infinite;
}

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

.usage-compact[b-ljzkhcojn8] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    cursor: default;
}

.status-icon[b-ljzkhcojn8] {
    fill: currentColor;
}

.status-icon.text-success[b-ljzkhcojn8] {
    color: var(--theme-text-success, #22c55e);
}

.status-icon.text-warning[b-ljzkhcojn8] {
    color: var(--theme-text-warning, #f59e0b);
}

.status-icon.text-danger[b-ljzkhcojn8] {
    color: var(--theme-text-danger, #ef4444);
}

.status-icon.text-secondary[b-ljzkhcojn8] {
    color: var(--theme-text-secondary, #64748b);
}

.usage-count[b-ljzkhcojn8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.usage-full[b-ljzkhcojn8] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0;
    padding: 16px;
}

.usage-header[b-ljzkhcojn8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--theme-text-primary);
}

.usage-header svg[b-ljzkhcojn8] {
    fill: currentColor;
}

.usage-row[b-ljzkhcojn8] {
    display: grid;
    grid-template-columns: 90px 1fr 90px;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.usage-label[b-ljzkhcojn8] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.usage-bar-container[b-ljzkhcojn8] {
    height: 6px;
    background: var(--theme-border, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}

.usage-bar[b-ljzkhcojn8] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.usage-bar.bg-success[b-ljzkhcojn8] {
    background: var(--theme-text-success, #22c55e);
}

.usage-bar.bg-info[b-ljzkhcojn8] {
    background: var(--theme-text-info, #0ea5e9);
}

.usage-bar.bg-warning[b-ljzkhcojn8] {
    background: var(--theme-text-warning, #f59e0b);
}

.usage-bar.bg-danger[b-ljzkhcojn8] {
    background: var(--theme-text-danger, #ef4444);
}

.usage-value[b-ljzkhcojn8] {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
    color: var(--theme-text-primary);
}

.alert[b-ljzkhcojn8] {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.alert-warning[b-ljzkhcojn8] {
    background: var(--theme-bg-warning);
    color: var(--theme-text-warning);
}

.alert-warning a[b-ljzkhcojn8] {
    color: inherit;
    font-weight: 600;
}

.alert-error[b-ljzkhcojn8] {
    background: var(--theme-bg-danger);
    color: var(--theme-text-danger);
}

.reset-info[b-ljzkhcojn8] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.reset-info svg[b-ljzkhcojn8] {
    fill: currentColor;
}

/* Dark theme variants */
.theme-space .usage-full[b-ljzkhcojn8],
.theme-winter .usage-full[b-ljzkhcojn8],
.theme-nature .usage-full[b-ljzkhcojn8],
.theme-ocean .usage-full[b-ljzkhcojn8],
.theme-mystic .usage-full[b-ljzkhcojn8],
.theme-tron .usage-full[b-ljzkhcojn8] {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 0;
    padding: 16px;
}

.theme-space .usage-compact[b-ljzkhcojn8],
.theme-winter .usage-compact[b-ljzkhcojn8],
.theme-nature .usage-compact[b-ljzkhcojn8],
.theme-ocean .usage-compact[b-ljzkhcojn8] {
    background: rgba(255, 255, 255, 0.1);
}
/* /Components/AppThemeToggle.razor.rz.scp.css */
.theme-toggle[b-2rzro6739u] {
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.theme-toggle-btn[b-2rzro6739u] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.theme-toggle-btn.cloud[b-2rzro6739u] {
    background: rgba(255, 255, 255, 0.95);
    color: #1e3a5f;
    border: 1px solid rgba(30, 58, 95, 0.15);
}

.theme-toggle-btn.cloud:hover[b-2rzro6739u] {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(30, 58, 95, 0.25);
}

.theme-toggle-btn.space[b-2rzro6739u] {
    background: rgba(30, 27, 75, 0.8);
    color: #a855f7;
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.3);
}

.theme-toggle-btn.space:hover[b-2rzro6739u] {
    background: rgba(50, 45, 100, 0.9);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4);
}

.theme-toggle-btn.winter[b-2rzro6739u] {
    background: rgba(255, 255, 255, 0.85);
    color: #0891b2;
    box-shadow: 0 2px 12px rgba(8, 145, 178, 0.2);
}

.theme-toggle-btn.winter:hover[b-2rzro6739u] {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3);
}

.theme-toggle-btn.nature[b-2rzro6739u] {
    background: rgba(34, 83, 52, 0.85);
    color: #86efac;
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.25);
}

.theme-toggle-btn.nature:hover[b-2rzro6739u] {
    background: rgba(34, 83, 52, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.35);
}

.theme-toggle-btn.ocean[b-2rzro6739u] {
    background: rgba(6, 78, 108, 0.85);
    color: #67e8f9;
    box-shadow: 0 2px 12px rgba(14, 165, 233, 0.3);
}

.theme-toggle-btn.ocean:hover[b-2rzro6739u] {
    background: rgba(6, 78, 108, 0.95);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.4);
}

.theme-label[b-2rzro6739u] {
    white-space: nowrap;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .theme-toggle-btn[b-2rzro6739u] {
        padding: 6px 10px;
        font-size: 0.75rem;
    }
}

@media (max-width: 400px) {
    .theme-toggle-btn[b-2rzro6739u] {
        padding: 5px 8px;
        font-size: 0.7rem;
        gap: 4px;
    }
}
/* /Components/Assistant/InstallNudgeCard.razor.rz.scp.css */
/* ICON-SLEEVE-1 (2026-10-18): the Home Screen install nudge. See InstallNudgeCard.razor. */
.install-nudge[b-x12lgjql4i] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px dashed var(--theme-border, rgba(148, 163, 184, 0.45));
    background: var(--theme-surface-secondary, rgba(99, 102, 241, 0.06));
}

/* A faux home-screen tile: the real 180px PNG at 60px with iOS's corner radius, the label under it. */
.install-nudge-tile[b-x12lgjql4i] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 72px;
}
.install-nudge-icon[b-x12lgjql4i] {
    width: 60px;
    height: 60px;
    border-radius: 13.5px;          /* 22.5% - the iOS squircle, near enough */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    display: block;
}
.install-nudge-label[b-x12lgjql4i] {
    font-size: 0.7rem;
    line-height: 1.1;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--theme-text-primary);
}

.install-nudge-text[b-x12lgjql4i] { min-width: 0; flex: 1 1 auto; }
.install-nudge-text strong[b-x12lgjql4i] { display: block; font-size: 0.95rem; color: var(--theme-text-primary); }
.install-nudge-text p[b-x12lgjql4i] { margin: 0.25rem 0 0.6rem; font-size: 0.85rem; line-height: 1.45; color: var(--theme-text-secondary); }

.install-nudge-kbd[b-x12lgjql4i] {
    display: inline-block;
    padding: 0 0.4em;
    border-radius: 5px;
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.5));
    font-weight: 600;
    white-space: nowrap;
}

.install-nudge-actions[b-x12lgjql4i] { display: flex; align-items: center; gap: 0.75rem; }

/* MOBILE-A11Y: 44px targets. */
.install-nudge-btn[b-x12lgjql4i] {
    border: none;
    border-radius: 8px;
    min-height: 44px;
    padding: 0 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--theme-primary, #6366f1);
    color: #fff;
}
.install-nudge-btn:disabled[b-x12lgjql4i] { opacity: 0.6; cursor: default; }
.install-nudge-link[b-x12lgjql4i] {
    background: transparent;
    border: none;
    min-height: 44px;
    padding: 0 6px;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    cursor: pointer;
}
/* /Components/Assistant/SleevePicker.razor.rz.scp.css */
/* YOUR-AI-1: lifted from ManageAccount.razor.css (AVATAR-SPLIT-1 tiles) so the picker carries
   its own look wherever it is hosted. */
.avatar-grid[b-c06tuh67gq] { display: flex; gap: 12px; flex-wrap: wrap; }

.theme-card[b-c06tuh67gq] {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-surface, #ffffff);
}
.theme-card:hover[b-c06tuh67gq] { border-color: #94a3b8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.theme-card.selected[b-c06tuh67gq] { border-color: var(--theme-primary, #6366f1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.theme-card:disabled[b-c06tuh67gq] { cursor: default; transform: none; }
.theme-card-icon[b-c06tuh67gq] { font-size: 2rem; line-height: 1; }

.avatar-card[b-c06tuh67gq] { position: relative; width: 120px; height: 120px; align-items: center; justify-content: center; padding: 0; }
/* YOUR-AI-2 (2026-10-18, QA on Slate): the Appearance tile hard-coded `background: white`,
   so the robot's slate ink always had contrast. The tile now sits on --theme-surface, which
   is DARK on Slate/Space/etc., and the robot (currentColor) vanished into it. The mark takes
   the theme's text ink - the colour each theme guarantees readable on its own surface. The
   halo paints itself (HALO-1e) and is unaffected. */
.avatar-card-mark[b-c06tuh67gq] { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: visible; color: var(--theme-text-primary, #334155); }
/* ROBOT-FACE-1 (2026-10-18, Josh's crop on a dark theme): the robot's eyes and mouth default to #fff,
   which was right while the head was always slate - but YOUR-AI-2 made the head the text ink, LIGHT on
   dark themes, and the white face vanished into it. Same cut-out the hub tab does: the face is the
   surface behind the head (white on light themes, so nothing changes there). */
.avatar-card-mark[b-c06tuh67gq]  .pro-bot-eye,
.avatar-card-mark[b-c06tuh67gq]  .pro-bot-mouth { fill: var(--theme-surface, #ffffff); }
/* Reserves the mark's footprint while the companion loads - blank, not a spinner. */
.avatar-card-placeholder[b-c06tuh67gq] { display: block; width: 56px; height: 56px; }
.avatar-card-badge[b-c06tuh67gq] { position: absolute; top: 6px; right: 8px; font-size: 0.8rem; line-height: 1; color: var(--theme-primary-ink, var(--theme-primary, #6366f1)); }

/* YOUR-AI-3 (mobile QA at 390px): three tiles fit in a row at 96px; 120px wrapped 2+1. */
@media (max-width: 480px) {
    .avatar-card[b-c06tuh67gq] { width: 96px; height: 96px; }
}

/* WISP-2: admin-only preview tile - a dashed edge says "not for everyone yet". */
.avatar-card--admin[b-c06tuh67gq] { border-style: dashed; }

/* FLAGSHIP-2 (2026-10-20): the flagship sleeve's tile leads the row. Order, not markup - the grid is
   flex, so this is the whole change; with no flagship configured no tile carries the class. */
.avatar-card--flagship[b-c06tuh67gq] { order: -1; }
/* /Components/Assistant/VoicePicker.razor.rz.scp.css */
/* VOICE-CARDS-1 (2026-10-18): voice tiles, same family as the Sleeve tiles (SleevePicker.razor.css). */
.voice-grid[b-at0pru6rpy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}

.voice-card[b-at0pru6rpy] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
    padding: 12px 40px 12px 14px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-surface, #ffffff);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.voice-card:hover:not(:disabled)[b-at0pru6rpy] { border-color: #94a3b8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.voice-card.selected[b-at0pru6rpy] { border-color: var(--theme-primary, #6366f1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.voice-card:disabled[b-at0pru6rpy] { cursor: default; opacity: 0.7; }
.voice-card:focus-visible[b-at0pru6rpy] { outline: 2px solid var(--theme-primary, #6366f1); outline-offset: 2px; }

.voice-card-head[b-at0pru6rpy] { display: flex; align-items: center; gap: 6px; }
.voice-card-name[b-at0pru6rpy] { font-weight: 600; color: var(--theme-text-primary, inherit); }
.voice-card-badge[b-at0pru6rpy] { font-size: 0.8rem; color: var(--theme-primary-ink, var(--theme-primary, #6366f1)); }
.voice-card-desc[b-at0pru6rpy] { font-size: 0.82rem; line-height: 1.35; color: var(--theme-text-secondary, #64748b); }

/* The per-card ▶: a small round control in the top-right. A span with role=button inside the
   card button (nested <button>s are invalid HTML); stopPropagation keeps a preview from choosing. */
.voice-card-play[b-at0pru6rpy] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 10%, transparent);
    transition: background 0.15s ease, transform 0.15s ease;
}
.voice-card-play:hover[b-at0pru6rpy] { background: color-mix(in srgb, var(--theme-primary, #6366f1) 20%, transparent); transform: scale(1.08); }
.voice-card-play:focus-visible[b-at0pru6rpy] { outline: 2px solid var(--theme-primary, #6366f1); outline-offset: 2px; }
/* /Components/Audio/ListenCard.razor.rz.scp.css */
/* SHARED-LC-1 (2026-05-19): Listen card styles, scoped to the shared component.
   Verbatim port of the .view-listen-* / .view-pill / .view-play-btn / .view-prepare-btn /
   .view-stop-btn / .view-voice-select rules from ViewDailyBriefing.razor.css so the
   component renders identically across every consuming page (Daily Briefing, Daily
   Progress, future digest / recap surfaces). Source-of-truth for these rules now
   lives here; the Briefing's scoped sheet retains them only until SHARED-LC-3 (Briefing
   migration) lands and removes the duplicates. */

.view-listen-card[b-jcz8bv0dx9] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0;
    padding: 18px 22px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.view-listen-header[b-jcz8bv0dx9] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.view-listen-icon[b-jcz8bv0dx9] {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--theme-primary, #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-listen-headings[b-jcz8bv0dx9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.view-listen-title[b-jcz8bv0dx9] {
    font-size: 17px;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.view-listen-subtitle[b-jcz8bv0dx9] {
    font-size: 13px;
    color: var(--theme-text-muted, #64748b);
    margin: 0;
}

.view-listen-controls[b-jcz8bv0dx9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.view-listen-row[b-jcz8bv0dx9] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.view-listen-row-label[b-jcz8bv0dx9] {
    font-size: 12px;
    font-weight: 600;
    color: var(--theme-text-muted, #64748b);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    min-width: 70px;
}

.view-pill-group[b-jcz8bv0dx9] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.view-pill[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--theme-border, #e2e8f0);
    /* THEME-VAR (2026-06-22): use --theme-surface-secondary, NOT phantom --theme-bg
       (undefined → falls back to light #f8fafc → white pills on dark themes like Space). */
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-primary, #1e293b);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-pill:hover:not(:disabled):not(.is-active)[b-jcz8bv0dx9] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.view-pill.is-active[b-jcz8bv0dx9] {
    background: var(--theme-primary, #6366f1);
    border-color: var(--theme-primary, #6366f1);
    color: #fff;
}

.view-pill:disabled[b-jcz8bv0dx9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.view-pill-tag[b-jcz8bv0dx9] {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}

.view-pill:not(.is-active) .view-pill-tag[b-jcz8bv0dx9] {
    background: rgba(99, 102, 241, 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.view-listen-transport[b-jcz8bv0dx9] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px dashed var(--theme-border, #e2e8f0);
}

.view-play-btn[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-primary-hover, #4f46e5));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}

.view-play-btn:hover:not(:disabled)[b-jcz8bv0dx9] {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.view-play-btn:disabled[b-jcz8bv0dx9] {
    opacity: 0.55;
    cursor: wait;
}

.view-play-cost[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.view-play-cost-ready[b-jcz8bv0dx9] {
    background: rgba(34, 197, 94, 0.28);
    color: #ffffff;
}

.view-prepare-btn[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    padding: 8px 14px;
    border: 1px solid var(--theme-primary);
    border-radius: 999px;
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.view-prepare-btn:hover:not(:disabled)[b-jcz8bv0dx9] {
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}

.view-prepare-btn:disabled[b-jcz8bv0dx9] {
    opacity: 0.55;
    cursor: wait;
}

.view-voice-select[b-jcz8bv0dx9] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border-color, rgba(99, 102, 241, 0.25));
    border-radius: 8px;
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #1f2937);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease;
    max-width: 480px;
}

.view-voice-select:hover:not(:disabled)[b-jcz8bv0dx9] {
    border-color: var(--theme-primary);
}

.view-voice-select:disabled[b-jcz8bv0dx9] {
    opacity: 0.55;
    cursor: not-allowed;
}

.view-stop-btn[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-primary, #1e293b);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-stop-btn:hover[b-jcz8bv0dx9] {
    border-color: #ef4444;
    color: #ef4444;
}

/* ─────────────────────────────────────────────────────────────
   SHARED-LC-v2 (2026-05-19): polish features.
   ───────────────────────────────────────────────────────────── */

/* AUDIO-TTS-UX: inline hint right of the voice picker — "Out of credits — top up". */
.view-pill-hint[b-jcz8bv0dx9] {
    margin-left: 10px;
    font-size: 12px;
    color: rgba(99, 102, 241, 0.85);
    align-self: center;
}

.view-pill-hint-action[b-jcz8bv0dx9] {
    text-decoration: none;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.view-pill-hint-action:hover[b-jcz8bv0dx9] {
    border-bottom-color: var(--theme-primary);
}

.view-save-voice-btn[b-jcz8bv0dx9] {
    background: none;
    border: none;
    padding: 0 0 1px 0;
    cursor: pointer;
}

.view-save-voice-btn:disabled[b-jcz8bv0dx9] {
    opacity: 0.55;
    cursor: wait;
}

/* AUDIO-SKIP: icon-only previous/next segment buttons that flank Pause. */
.view-skip-btn[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-skip-btn:hover:not(:disabled)[b-jcz8bv0dx9] {
    border-color: var(--theme-primary, #667eea);
    color: var(--theme-primary-ink, var(--theme-primary, #667eea));
}

.view-skip-btn:disabled[b-jcz8bv0dx9] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* AUDIO-POLISH: now-playing row (companion sphere + label) — right side of transport. */
.view-now-playing[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    color: var(--theme-text-muted, #64748b);
    font-size: 13px;
    font-weight: 500;
}

.view-companion-sphere[b-jcz8bv0dx9] {
    position: relative;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
        color-mix(in srgb, var(--theme-primary, #6366f1) 60%, white 40%),
        var(--theme-primary, #6366f1) 70%,
        color-mix(in srgb, var(--theme-primary, #6366f1) 80%, black 20%) 100%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view-companion-sphere-inner[b-jcz8bv0dx9] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--theme-primary, #6366f1);
    opacity: 0;
    pointer-events: none;
}

.view-companion-sphere.is-speaking .view-companion-sphere-inner[b-jcz8bv0dx9] {
    animation: view-companion-glow-b-jcz8bv0dx9 1.6s ease-in-out infinite;
}

@keyframes view-companion-glow-b-jcz8bv0dx9 {
    0%, 100% { opacity: 0; transform: scale(0.85); }
    50%      { opacity: 0.5; transform: scale(1.1); }
}

.view-now-playing-text[b-jcz8bv0dx9] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}

.view-now-playing-eyebrow[b-jcz8bv0dx9] {
    font-size: 10px;
    font-weight: 700;
    color: var(--theme-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.7px;
}

.view-now-playing-label[b-jcz8bv0dx9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

/* ARTICLE-FOLLOW-1 (2026-09-08): the headline being read, under the topic label.
   Linked to the source when we have a URL; clamps to one line so the transport row
   keeps its height on long headlines. */
.view-now-playing-article[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    max-width: 320px;
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
    line-height: 1.3;
}

.view-now-playing-article:hover .view-now-playing-article-title[b-jcz8bv0dx9] {
    text-decoration: underline;
}

.view-now-playing-article-static[b-jcz8bv0dx9] {
    color: var(--theme-text-muted, #64748b);
}

.view-now-playing-article-title[b-jcz8bv0dx9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.view-now-playing-article-arrow[b-jcz8bv0dx9] {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: 0.8;
}

/* AUDIO-TALK: 3 equalizer-style bars overlay the sphere when speaking. */
.view-talk-bars[b-jcz8bv0dx9] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.view-companion-sphere.is-speaking .view-talk-bars[b-jcz8bv0dx9] {
    opacity: 0.92;
}

.view-talk-bar[b-jcz8bv0dx9] {
    width: 2.5px;
    height: 12px;
    background: #ffffff;
    border-radius: 2px;
    transform-origin: center;
    transform: scaleY(0.3);
}

.view-companion-sphere.is-speaking .view-talk-bar:nth-child(1)[b-jcz8bv0dx9] {
    animation: view-talk-1-b-jcz8bv0dx9 0.42s ease-in-out infinite alternate;
}
.view-companion-sphere.is-speaking .view-talk-bar:nth-child(2)[b-jcz8bv0dx9] {
    animation: view-talk-2-b-jcz8bv0dx9 0.58s ease-in-out infinite alternate;
}
.view-companion-sphere.is-speaking .view-talk-bar:nth-child(3)[b-jcz8bv0dx9] {
    animation: view-talk-3-b-jcz8bv0dx9 0.49s ease-in-out infinite alternate;
}

@keyframes view-talk-1-b-jcz8bv0dx9 {
    0%   { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}
@keyframes view-talk-2-b-jcz8bv0dx9 {
    0%   { transform: scaleY(0.8); }
    100% { transform: scaleY(0.35); }
}
@keyframes view-talk-3-b-jcz8bv0dx9 {
    0%   { transform: scaleY(0.5); }
    100% { transform: scaleY(0.95); }
}

/* VOICE-LEVEL-1 (2026-08-10): when real amplitude is driving (audioBriefing.js sets
   --nts-voice-level and the nts-voice-amp class on <html>), the bars stop being a
   canned loop and become an actual voice meter — the SAME signal that drives the
   Spark companion's mouth. This is what gives Professional mode presence while the
   briefing reads: no character, no mascot, just the player showing it's alive.

   The three bars read the one level with different gains + floors so they move as a
   set rather than in lockstep (a single shared scale reads as one fat bar blinking).
   Keyframes above stay as the fallback: the speechSynthesis path yields no amplitude,
   the class never lands, and the old animation plays exactly as before.
   Height is 12px, so scaleY 0.28→1 keeps motion inside the sphere. */
:global(html.nts-voice-amp) .view-companion-sphere.is-speaking .view-talk-bar[b-jcz8bv0dx9] {
    animation: none !important;
    transition: transform 70ms linear;
}

:global(html.nts-voice-amp) .view-companion-sphere.is-speaking .view-talk-bar:nth-child(1)[b-jcz8bv0dx9] {
    transform: scaleY(calc(0.30 + (var(--nts-voice-level, 0) * 0.62)));
}

:global(html.nts-voice-amp) .view-companion-sphere.is-speaking .view-talk-bar:nth-child(2)[b-jcz8bv0dx9] {
    transform: scaleY(calc(0.34 + (var(--nts-voice-level, 0) * 0.66)));
}

:global(html.nts-voice-amp) .view-companion-sphere.is-speaking .view-talk-bar:nth-child(3)[b-jcz8bv0dx9] {
    transform: scaleY(calc(0.28 + (var(--nts-voice-level, 0) * 0.55)));
}

/* Accessibility: a meter that tracks speech is motion. Users who asked for less of it
   get the resting state, not a strobe. */
@media (prefers-reduced-motion: reduce) {
    :global(html.nts-voice-amp) .view-companion-sphere.is-speaking .view-talk-bar[b-jcz8bv0dx9] {
        transition: none;
        transform: scaleY(0.55);
    }
}

/* AUDIO-POLISH: thin progress bar at card bottom (bleeds to card edges). */
.view-progress-track[b-jcz8bv0dx9] {
    margin: 12px -22px -18px -22px;
    height: 3px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 0;
    overflow: hidden;
}

.view-progress-fill[b-jcz8bv0dx9] {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary, #6366f1), var(--theme-primary-hover, #4f46e5));
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* BRIEF-ASSIST-1 (2026-10-09): Compact - the host card owns the surface. No border, no padding,
   no background; transport first, the voice row (when opened) underneath it. */
.view-listen-card.is-compact[b-jcz8bv0dx9] {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}

.view-listen-card.is-compact .view-listen-voice-row[b-jcz8bv0dx9] {
    order: 2;
}

.view-listen-card.is-compact .view-listen-transport[b-jcz8bv0dx9] {
    padding-top: 0;
    border-top: none;
    gap: 8px;
}

.view-listen-card.is-compact .view-progress-track[b-jcz8bv0dx9] {
    margin: 4px 0 0;
    border-radius: 2px;
}

.view-voice-toggle[b-jcz8bv0dx9] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #64748b);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
}

.view-voice-toggle:hover[b-jcz8bv0dx9] {
    color: var(--theme-text-primary, #1e293b);
    background: color-mix(in srgb, var(--theme-text-primary, #1e293b) 6%, transparent);
}

/* Mobile — scope-label rows wrap a little differently */
@media (max-width: 640px) {
    .view-listen-row[b-jcz8bv0dx9] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .view-listen-row-label[b-jcz8bv0dx9] {
        min-width: 0;
    }

    /* LISTEN-SELECT-1 (2026-10-09, Josh's phone): in the stacked (column) row, flex:1 1 auto and
       min-width:0 act on HEIGHT, and align-items:flex-start sizes the select to its longest
       option ("Nova — Warm, female, executive-coach register.") - so it ran past the card's
       right edge. Fill the row instead; the closed select clips its own text. */
    .view-voice-select[b-jcz8bv0dx9] {
        align-self: stretch;
        width: 100%;
        max-width: 100%;
    }

    .view-now-playing[b-jcz8bv0dx9] {
        margin-left: 0;
        width: 100%;
    }
}
/* /Components/BlazorTourOverlay.razor.rz.scp.css */
/* ============================================
   BlazorTourOverlay.razor.css
   Scoped styles for the pure Blazor tour component
   ============================================ */

.blazor-tour-overlay[b-5dyb2kn7pv] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}

/* ============================================
   Backdrop & Spotlight
   ============================================ */

.tour-backdrop[b-5dyb2kn7pv] {
    position: fixed;
    inset: 0;
    background: transparent;
    pointer-events: all;
    transition: opacity 0.3s ease;
}

.tour-spotlight[b-5dyb2kn7pv] {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px transparent;
    background: transparent;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* ============================================
   Step Popup - Base Styles
   ============================================ */

.tour-step[b-5dyb2kn7pv] {
    position: fixed;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.4);
    pointer-events: all;
    z-index: 10001;
    animation: tourStepFadeIn-b-5dyb2kn7pv 0.3s ease;
    overflow: hidden;
}

@keyframes tourStepFadeIn-b-5dyb2kn7pv {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tour-step-centered[b-5dyb2kn7pv] {
    animation: tourStepFadeInCentered-b-5dyb2kn7pv 0.3s ease;
}

@keyframes tourStepFadeInCentered-b-5dyb2kn7pv {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ============================================
   Step Header
   ============================================ */

.tour-step-header[b-5dyb2kn7pv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.tour-step-title[b-5dyb2kn7pv] {
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.tour-close-btn[b-5dyb2kn7pv] {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.tour-close-btn:hover[b-5dyb2kn7pv] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.tour-close-btn .material-symbols-rounded[b-5dyb2kn7pv] {
    font-size: 20px;
}

/* ============================================
   Step Content
   ============================================ */

.tour-step-content[b-5dyb2kn7pv] {
    padding: 20px;
    color: white;
    font-size: 1rem;
    line-height: 1.7;
}

.tour-step-content p[b-5dyb2kn7pv] {
    margin: 0 0 12px 0;
    color: white;
}

.tour-step-content p:last-child[b-5dyb2kn7pv] {
    margin-bottom: 0;
}

.tour-step-content a[b-5dyb2kn7pv] {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.tour-step-content a:hover[b-5dyb2kn7pv] {
    color: white;
}

/* ============================================
   Step Footer & Buttons
   ============================================ */

.tour-step-footer[b-5dyb2kn7pv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: rgba(0, 0, 0, 0.15);
}

.tour-progress[b-5dyb2kn7pv] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
}

.tour-buttons[b-5dyb2kn7pv] {
    display: flex;
    gap: 12px;
}

.tour-btn[b-5dyb2kn7pv] {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.tour-btn-primary[b-5dyb2kn7pv] {
    background: white;
    color: #764ba2;
}

.tour-btn-primary:hover[b-5dyb2kn7pv] {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.tour-btn-secondary[b-5dyb2kn7pv] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.tour-btn-secondary:hover[b-5dyb2kn7pv] {
    background: rgba(255, 255, 255, 0.25);
}

/* ============================================
   Position-specific arrows (optional visual)
   ============================================ */

.tour-step-top[b-5dyb2kn7pv]::after,
.tour-step-bottom[b-5dyb2kn7pv]::before,
.tour-step-left[b-5dyb2kn7pv]::after,
.tour-step-right[b-5dyb2kn7pv]::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: rotate(45deg);
}

.tour-step-bottom[b-5dyb2kn7pv]::before {
    top: -6px;
    left: 50%;
    margin-left: -6px;
}

.tour-step-top[b-5dyb2kn7pv]::after {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
}

.tour-step-right[b-5dyb2kn7pv]::before {
    left: -6px;
    top: 50%;
    margin-top: -6px;
}

.tour-step-left[b-5dyb2kn7pv]::after {
    right: -6px;
    top: 50%;
    margin-top: -6px;
}

/* ============================================
   Theme Overrides - Dark Themes
   ============================================ */

.theme-space .tour-step[b-5dyb2kn7pv],
.theme-winter .tour-step[b-5dyb2kn7pv],
.theme-nature .tour-step[b-5dyb2kn7pv],
.theme-ocean .tour-step[b-5dyb2kn7pv],
.theme-mystic .tour-step[b-5dyb2kn7pv],
.theme-tron .tour-step[b-5dyb2kn7pv] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.95) 0%, rgba(118, 75, 162, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Space theme - blue accent */
.theme-space .tour-step[b-5dyb2kn7pv] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(99, 102, 241, 0.95) 100%);
    box-shadow: 0 10px 40px rgba(59, 130, 246, 0.3);
}

/* Winter theme - cool blue */
.theme-winter .tour-step[b-5dyb2kn7pv] {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.95) 0%, rgba(59, 130, 246, 0.95) 100%);
    box-shadow: 0 10px 40px rgba(56, 189, 248, 0.3);
}

/* Nature theme - green accent */
.theme-nature .tour-step[b-5dyb2kn7pv] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95) 0%, rgba(21, 128, 61, 0.95) 100%);
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.3);
}

.theme-nature .tour-btn-primary[b-5dyb2kn7pv] {
    color: #15803d;
}

/* Ocean theme - teal accent */
.theme-ocean .tour-step[b-5dyb2kn7pv] {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.95) 0%, rgba(6, 182, 212, 0.95) 100%);
    box-shadow: 0 10px 40px rgba(20, 184, 166, 0.3);
}

.theme-ocean .tour-btn-primary[b-5dyb2kn7pv] {
    color: #0d9488;
}

/* Mystic theme - purple accent */
.theme-mystic .tour-step[b-5dyb2kn7pv] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.95) 0%, rgba(192, 132, 252, 0.95) 100%);
    box-shadow: 0 10px 40px rgba(168, 85, 247, 0.3);
}

/* Tron theme - cyan glow */
.theme-tron .tour-step[b-5dyb2kn7pv] {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.15) 0%, rgba(0, 200, 200, 0.2) 100%);
    border: 2px solid rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 20px rgba(0, 255, 255, 0.1);
}

.theme-tron .tour-step-header[b-5dyb2kn7pv] {
    background: rgba(0, 255, 255, 0.1);
    border-bottom-color: rgba(0, 255, 255, 0.3);
}

.theme-tron .tour-step-title[b-5dyb2kn7pv] {
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.theme-tron .tour-step-content[b-5dyb2kn7pv] {
    color: rgba(255, 255, 255, 0.9);
}

.theme-tron .tour-btn-primary[b-5dyb2kn7pv] {
    background: #00ffff;
    color: #0a1628;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

.theme-tron .tour-btn-primary:hover[b-5dyb2kn7pv] {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
}

.theme-tron .tour-btn-secondary[b-5dyb2kn7pv] {
    border-color: rgba(0, 255, 255, 0.5);
    color: #00ffff;
}

.theme-tron .tour-progress[b-5dyb2kn7pv] {
    color: rgba(0, 255, 255, 0.7);
}

.theme-tron .tour-step-footer[b-5dyb2kn7pv] {
    background: transparent;
}

/* ============================================
   Mobile Responsive
   ============================================ */

@media (max-width: 480px) {
    .tour-step[b-5dyb2kn7pv] {
        width: calc(100vw - 24px);
        max-width: none;
        left: 12px !important;
        right: 12px;
        transform: none !important;
    }

    .tour-step-centered[b-5dyb2kn7pv] {
        top: auto !important;
        bottom: 20px !important;
        left: 12px !important;
        transform: none !important;
    }

    .tour-step-footer[b-5dyb2kn7pv] {
        flex-direction: column;
        gap: 12px;
    }

    .tour-progress[b-5dyb2kn7pv] {
        order: 2;
    }

    .tour-buttons[b-5dyb2kn7pv] {
        order: 1;
        width: 100%;
        justify-content: stretch;
    }

    .tour-btn[b-5dyb2kn7pv] {
        flex: 1;
    }
}
/* /Components/Briefing/BriefingAssistantCard.razor.rz.scp.css */
/* BRIEF-ASSIST-1 / BRIEF-ASSIST-2 (2026-10-09): the top of the briefing view, built to read like
   /home (Josh: "was thinking it would look more like the home screen").
   - Hero: Home.razor.css .welcome-avatar-section / .hero-section / .hero-title / .gradient-text,
     re-declared here because those rules are scoped to Home and cannot be shared.
   - Pin: TodaysWorkCard.razor.css .todays-work-focus (red left rule, red label, #475569 reason ink
     pinned to the light card per FOCUS-INK-1).
   - Card: TodaysWorkCard's .todays-work-card surface.
   Theme tokens only, --theme-primary-ink for primary-coloured TEXT (Slate). */

.bac[b-kz4231gxly] {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px;
}

/* ── Back ── */
.bac-back[b-kz4231gxly] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 4px;
    margin: 0 0 4px -4px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--theme-text-muted, #64748b);
}

.bac-back:hover[b-kz4231gxly] {
    color: var(--theme-text-primary, #1e293b);
    background: color-mix(in srgb, var(--theme-text-primary, #1e293b) 6%, transparent);
}

/* -- Hero (Home's shape, the pick as the headline - BRIEF-ASSIST-3) -- */
.bac-hero[b-kz4231gxly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto 20px;
    max-width: 760px;
    animation: bac-fade-up-b-kz4231gxly 0.6s ease-out;
}

/* Keeps the hero's height while the mark is staged (position:fixed) during a read. */
.bac-hero-mark-slot[b-kz4231gxly] {
    min-height: 120px;
    display: grid;
    place-items: center;
}

.bac-hero-mark[b-kz4231gxly] {
    display: grid;
    place-items: center;
    /* BRIEF-ASSIST-4 (Josh: "the AI is awfully small"): the orb's Small (120px canvas) / the
       88px robot and halo - the FAB's size, where the assistant is recognisable at arm's length. */
    min-width: 120px;
    min-height: 120px;
    /* BRIEF-ASSIST-5 (Josh): the mark sits BETWEEN the briefing line and "Start with" - the
       page names itself first, then the assistant, then what it says. */
    margin: 0 0 6px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    overflow: visible;
    color: var(--theme-text-primary, #1e293b);
    /* Same ink rule as the FAB and Home hero (HALO-1j). */
    --nts-halo-ink: color-mix(in srgb,
            var(--theme-primary, #6366f1) 55%,
            var(--theme-text-primary, #1e293b) 45%);
    transition: transform 0.2s ease;
}

.bac-hero-mark:hover[b-kz4231gxly] {
    transform: translateY(-2px);
}

.bac-hero-mark:focus-visible[b-kz4231gxly] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 4px;
    border-radius: 50%;
}

.bac-eyebrow[b-kz4231gxly] {
    margin: 4px 0 2px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-muted, #64748b);
}

.bac-hero-sep[b-kz4231gxly] {
    margin: 0 6px;
}

.bac-hero-title[b-kz4231gxly] {
    margin: 0;
    /* BRIEF-ASSIST-4 (Josh: "the start with title is pretty big"): a task name is a sentence,
       not a greeting - h3 weight, so the assistant is the biggest thing above the fold. */
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--theme-text-primary, #1e293b);
    overflow-wrap: anywhere;
}

/* "Start with" - Home's pin label, scaled to the headline: small caps in the pin's red. */
.bac-hero-lead[b-kz4231gxly] {
    display: block;
    margin-bottom: 2px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.bac-hero-lead--overdue[b-kz4231gxly] {
    color: var(--theme-error, #dc2626);
}

.bac-gradient[b-kz4231gxly] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-size: 200% 200%;
    animation: bac-gradient-shift-b-kz4231gxly 8s ease infinite;
}

.bac-hero-reason[b-kz4231gxly] {
    margin: 6px 0 0;
    max-width: 520px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--theme-text-primary, #1e293b);
    opacity: 0.8;
}

.bac-hero-actions[b-kz4231gxly] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
}

/* The compact ListenCard as Home's "Hear why" pill. Its markup is another component's, so
   ::deep reaches into it. Theme tokens here: this sits on the page, not on a light pin. */
.bac-listen[b-kz4231gxly]  .view-play-btn {
    padding: 6px 14px;
    min-height: 0;
    border: 1px solid var(--theme-border, #cbd5e1);
    border-radius: 999px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #334155);
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 600;
    gap: 6px;
}

.bac-listen[b-kz4231gxly]  .view-play-btn:hover:not(:disabled) {
    border-color: var(--theme-primary, #94a3b8);
    transform: none;
    box-shadow: none;
}

.bac-listen[b-kz4231gxly]  .view-play-btn svg {
    width: 12px;
    height: 12px;
}

.bac-listen[b-kz4231gxly]  .view-play-cost {
    background: color-mix(in srgb, var(--theme-text-primary, #1e293b) 10%, transparent);
    color: var(--theme-text-primary, #334155);
}

.bac-listen[b-kz4231gxly]  .view-play-cost-ready {
    background: #dcfce7;
    color: #166534;
}

.bac-listen[b-kz4231gxly]  .view-voice-toggle {
    color: var(--theme-text-muted, #64748b);
}

.bac-open[b-kz4231gxly] {
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--theme-text-primary, #334155);
}

.bac-open:hover[b-kz4231gxly] {
    text-decoration: underline;
}

.bac-pin-skeleton[b-kz4231gxly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.bac-pin-skeleton span[b-kz4231gxly] {
    display: block;
    height: 14px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--theme-text-primary, #1e293b) 8%, transparent);
    animation: bac-pulse-b-kz4231gxly 1.2s ease-in-out infinite;
}

.bac-pin-skeleton span:first-child[b-kz4231gxly] { width: 55%; height: 24px; }
.bac-pin-skeleton span:last-child[b-kz4231gxly] { width: 75%; }

/* ── Card (Today's Work's) ── */
.bac-card[b-kz4231gxly] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.06));
}

/* ── What changed since it was sent (replaces the drift banner) ── */
.bac-change[b-kz4231gxly] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 13px;
    color: var(--theme-text-muted, #64748b);
}

.bac-refresh[b-kz4231gxly] {
    padding: 0;
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    cursor: pointer;
}

.bac-refresh:disabled[b-kz4231gxly] {
    opacity: 0.6;
    cursor: wait;
}

@keyframes bac-pulse-b-kz4231gxly {
    50% { opacity: 0.5; }
}

@keyframes bac-fade-up-b-kz4231gxly {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

    50%[b-kz4231gxly] { background-position: 100% 50%; }
}

@keyframes bac-gradient-shift-b-kz4231gxly {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (max-width: 600px) {
    .bac-hero-title[b-kz4231gxly] {
        font-size: 1.125rem;
    }

    .bac-card[b-kz4231gxly] {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bac-hero[b-kz4231gxly],
    .bac-gradient[b-kz4231gxly],
    .bac-pin-skeleton span[b-kz4231gxly] {
        animation: none;
    }
}
/* /Components/Briefing/NewsFeed.razor.rz.scp.css */
/* BRIEF-NEWS-ALL-1 (2026-10-17): "Your news" on /news-topics. Mirrors DailyBriefing.razor.css
   (.db-section-title, .db-history-list, .db-chip) because those rules are scoped to that page and
   cannot reach a child component. Theme tokens only; --theme-primary-ink for primary-coloured TEXT.
   Dark themes put .is-dark on <html> (AppThemeService), so `.is-dark .x` works from scoped CSS. */

.nf[b-fgn6p057vr] {
    margin-bottom: 28px;
}

.nf-title[b-fgn6p057vr] {
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nf-title svg[b-fgn6p057vr] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    opacity: 0.75;
    flex-shrink: 0;
}

/* ── Chips ── */
.nf-chips[b-fgn6p057vr] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 14px;
}

.nf-chip[b-fgn6p057vr] {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid rgba(100, 116, 139, 0.25);
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
    cursor: pointer;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nf-chip:hover[b-fgn6p057vr] {
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.1);
}

.nf-chip.is-active[b-fgn6p057vr] {
    background: var(--theme-primary, #6366f1);
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-btn-text, #ffffff);
}

.nf-chip.is-former:not(.is-active)[b-fgn6p057vr] {
    font-style: italic;
}

.nf-chip:focus-visible[b-fgn6p057vr],
.nf-more:focus-visible[b-fgn6p057vr],
.nf-link-btn:focus-visible[b-fgn6p057vr] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

/* ── List ── */
.nf-list[b-fgn6p057vr] {
    background: white;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.nf-day + .nf-day[b-fgn6p057vr] {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.nf-day-head[b-fgn6p057vr] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 12px 20px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #64748b;
}

.nf-day-date[b-fgn6p057vr] {
    color: #0f172a;
}

.nf-day-count[b-fgn6p057vr] {
    font-weight: 600;
}

.nf-day-link[b-fgn6p057vr] {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    text-decoration: none;
}

.nf-day-link:hover[b-fgn6p057vr] {
    text-decoration: underline;
}

.nf-item[b-fgn6p057vr] {
    padding: 10px 20px 12px;
}

.nf-item + .nf-item[b-fgn6p057vr] {
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.nf-item-title[b-fgn6p057vr] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    color: #0f172a;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.nf-item-title:hover[b-fgn6p057vr] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    text-decoration: underline;
}

.nf-item-meta[b-fgn6p057vr] {
    margin: 3px 0 0;
    font-size: 0.75rem;
    color: #64748b;
}

.nf-item-summary[b-fgn6p057vr] {
    margin: 5px 0 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #475569;
}

.nf-empty[b-fgn6p057vr] {
    margin: 0;
    padding: 16px 20px;
    font-size: 0.85rem;
    color: #64748b;
}

.nf-link-btn[b-fgn6p057vr] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    cursor: pointer;
    text-decoration: underline;
}

/* ── Show older ── */
.nf-more-row[b-fgn6p057vr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.nf-more-row .nf-empty[b-fgn6p057vr] {
    padding: 0;
}

.nf-more[b-fgn6p057vr] {
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid rgba(100, 116, 139, 0.25);
    background: white;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
}

.nf-more:hover:not(:disabled)[b-fgn6p057vr] {
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.06);
}

.nf-more:disabled[b-fgn6p057vr] {
    opacity: 0.6;
    cursor: default;
}

/* ── Phones: clamp summaries so a day stays scannable ── */
@media (max-width: 600px) {
    .nf-day-head[b-fgn6p057vr],
    .nf-item[b-fgn6p057vr] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nf-day-link[b-fgn6p057vr] {
        margin-left: 0;
        flex-basis: 100%;
    }

    .nf-item-summary[b-fgn6p057vr] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ── Dark themes (same values as DailyBriefing.razor.css's dark block) ── */
.is-dark .nf-list[b-fgn6p057vr],
.is-dark .nf-more[b-fgn6p057vr] {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.is-dark .nf-title[b-fgn6p057vr],
.is-dark .nf-item-summary[b-fgn6p057vr],
.is-dark .nf-more[b-fgn6p057vr] {
    color: #cbd5e1;
}

.is-dark .nf-day-date[b-fgn6p057vr],
.is-dark .nf-item-title[b-fgn6p057vr] {
    color: #f1f5f9;
}

.is-dark .nf-day-head[b-fgn6p057vr],
.is-dark .nf-item-meta[b-fgn6p057vr],
.is-dark .nf-empty[b-fgn6p057vr] {
    color: #94a3b8;
}

.is-dark .nf-day + .nf-day[b-fgn6p057vr],
.is-dark .nf-item + .nf-item[b-fgn6p057vr] {
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .nf-chip:not(.is-active)[b-fgn6p057vr] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}

.is-dark .nf-chip.is-active[b-fgn6p057vr] {
    filter: brightness(1.15);
}

.is-dark .nf-day-link[b-fgn6p057vr],
.is-dark .nf-link-btn[b-fgn6p057vr],
.is-dark .nf-item-title:hover[b-fgn6p057vr] {
    color: #c7d2fe;
}
/* /Components/Chat/ActionCard.razor.rz.scp.css */
/* AGENTIC-UI-1 step 1 (2026-10-14): the action card under a reply that ran a tool.
   Sits inside the assistant bubble, so it borrows the bubble's type scale and the
   "Open it" pill from .answer-offer-btn.primary - a card is a receipt, not a second
   message, and must not out-shout the prose above it. */
.action-card[b-c31xy9a4v0] {
    margin: 10px 0 0 0;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.22);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 100%;
}

.action-card.failed[b-c31xy9a4v0] {
    border-color: rgba(220, 38, 38, 0.3);
    background: rgba(220, 38, 38, 0.06);
}

.action-card-head[b-c31xy9a4v0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

.action-card-icon[b-c31xy9a4v0] {
    display: inline-flex;
    color: var(--theme-text-success, #16a34a);
    flex: 0 0 auto;   /* GOTCHAS #323 */
}

.action-card.failed .action-card-icon[b-c31xy9a4v0] {
    color: var(--theme-text-danger, #dc2626);
}

.action-card-title[b-c31xy9a4v0] {
    font-weight: 600;
    color: var(--theme-text-primary, inherit);
}

.action-card-status[b-c31xy9a4v0] {
    margin-left: auto;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.action-card-body[b-c31xy9a4v0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}

.action-card-primary[b-c31xy9a4v0] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--theme-text-primary, inherit);
}

.action-card-secondary[b-c31xy9a4v0] {
    color: var(--theme-text-secondary, #64748b);
}

.action-card-error[b-c31xy9a4v0] {
    color: var(--theme-text-danger, #dc2626);
}

.action-card-facts[b-c31xy9a4v0] {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.action-card-fact[b-c31xy9a4v0] {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.18);
    color: var(--theme-text-secondary, #64748b);
}

.action-card-fact.billable[b-c31xy9a4v0] {
    color: var(--theme-text-success, #16a34a);
    border-color: rgba(22, 163, 74, 0.3);
    background: rgba(22, 163, 74, 0.08);
}

.action-card-actions[b-c31xy9a4v0] {
    display: flex;
    gap: 8px;
}

.action-card-open[b-c31xy9a4v0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--theme-primary, #6366f1);
    background: var(--theme-primary, #6366f1);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.action-card-open:hover[b-c31xy9a4v0] { filter: brightness(1.08); }

/* AGENTIC-APPROVE-1: Reject is the outlined twin of Approve - one choice with a default,
   not two competing buttons (same pairing as .answer-offer-btn). */
.action-card-reject[b-c31xy9a4v0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--theme-primary, #6366f1);
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.action-card-reject:hover[b-c31xy9a4v0] {
    background: var(--theme-primary, #6366f1);
    color: #fff;
}

.action-card-open:disabled[b-c31xy9a4v0],
.action-card-reject:disabled[b-c31xy9a4v0] {
    opacity: 0.6;
    cursor: default;
    filter: none;
}

.action-card.pending[b-c31xy9a4v0] {
    border-style: dashed;
}

.action-card.pending .action-card-icon[b-c31xy9a4v0],
.action-card.approved .action-card-icon[b-c31xy9a4v0] {
    color: var(--theme-text-warning, #d97706);
}

.action-card.rejected[b-c31xy9a4v0] {
    opacity: 0.6;
}

.action-card.rejected .action-card-icon[b-c31xy9a4v0] {
    color: var(--theme-text-muted, #94a3b8);
}
.action-card-open:active[b-c31xy9a4v0] { transform: scale(0.97); }
.action-card-open svg[b-c31xy9a4v0] { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .action-card-open[b-c31xy9a4v0] { transition: none; }
}

/* WEB-SEARCH-1: source chips on a "Searched the web" card are links. Ink, not fill (INK-1). */
a.action-card-link[b-c31xy9a4v0] {
    text-decoration: none;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

a.action-card-link:hover[b-c31xy9a4v0],
a.action-card-link:focus-visible[b-c31xy9a4v0] {
    text-decoration: underline;
}
/* /Components/Chat/AssistantNotices.razor.rz.scp.css */
/* NOTICE-1 (2026-10-20): the "While you were away" strip at the top of the chat. System register: a quiet
   bordered block, not a bubble - no avatar, no persona. Cards are one line of icon + title/message/time +
   a verb, with a dismiss that only shows on hover (and always on touch, where there is no hover). */
.assistant-notices[b-uzz0d152tu] {
    margin: 0 0 4px;
    padding: 10px 12px 8px;
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.25));
    border-radius: 12px;
    background: var(--theme-surface, #ffffff);
}

.assistant-notices-title[b-uzz0d152tu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-secondary, #475569);
}

.assistant-notices-count[b-uzz0d152tu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.68rem;
    letter-spacing: 0;
    color: var(--theme-primary-contrast, #ffffff);
    background: var(--theme-primary, #6366f1);
}

.assistant-notices-all[b-uzz0d152tu] {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--theme-text-tertiary, #94a3b8);
    text-decoration: none;
}

.assistant-notices-all:hover[b-uzz0d152tu] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: underline;
}

.assistant-notices-list[b-uzz0d152tu] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.assistant-notice[b-uzz0d152tu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 2px;
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.18));
}

.assistant-notice:first-child[b-uzz0d152tu] {
    border-top: 0;
}

.assistant-notice-icon[b-uzz0d152tu] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 10%, transparent);
}

.assistant-notice--info .assistant-notice-icon[b-uzz0d152tu] {
    color: var(--theme-info, #0284c7);
    background: color-mix(in srgb, var(--theme-info, #0284c7) 10%, transparent);
}

.assistant-notice--good .assistant-notice-icon[b-uzz0d152tu] {
    color: var(--theme-success, #16a34a);
    background: color-mix(in srgb, var(--theme-success, #16a34a) 10%, transparent);
}

.assistant-notice--attention .assistant-notice-icon[b-uzz0d152tu] {
    color: var(--theme-warning, #d97706);
    background: color-mix(in srgb, var(--theme-warning, #d97706) 12%, transparent);
}

.assistant-notice--warning .assistant-notice-icon[b-uzz0d152tu] {
    color: var(--theme-error, #dc2626);
    background: color-mix(in srgb, var(--theme-error, #dc2626) 10%, transparent);
}

.assistant-notice-text[b-uzz0d152tu] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.assistant-notice-heading[b-uzz0d152tu] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
    overflow-wrap: anywhere;
}

.assistant-notice-message[b-uzz0d152tu] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #475569);
    overflow-wrap: anywhere;
}

.assistant-notice-time[b-uzz0d152tu] {
    font-size: 0.72rem;
    color: var(--theme-text-tertiary, #94a3b8);
}

.assistant-notice-actions[b-uzz0d152tu] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.assistant-notice-action[b-uzz0d152tu] {
    padding: 5px 10px;
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.35));
    border-radius: 999px;
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.assistant-notice-action:hover[b-uzz0d152tu] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
    border-color: var(--theme-primary, #6366f1);
}

.assistant-notice-dismiss[b-uzz0d152tu] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--theme-text-tertiary, #94a3b8);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}

.assistant-notice:hover .assistant-notice-dismiss[b-uzz0d152tu],
.assistant-notice-dismiss:focus-visible[b-uzz0d152tu] {
    opacity: 1;
}

.assistant-notice-dismiss:hover[b-uzz0d152tu] {
    background: var(--theme-surface-hover, rgba(148, 163, 184, 0.14));
    color: var(--theme-text-primary, #0f172a);
}

.assistant-notice-action:focus-visible[b-uzz0d152tu],
.assistant-notice-dismiss:focus-visible[b-uzz0d152tu] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

@media (hover: none) {
    .assistant-notice-dismiss[b-uzz0d152tu] { opacity: 1; }
}

.is-dark .assistant-notices[b-uzz0d152tu] {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .assistant-notice[b-uzz0d152tu] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.is-dark .assistant-notice-heading[b-uzz0d152tu] { color: #f1f5f9; }
.is-dark .assistant-notice-message[b-uzz0d152tu] { color: #cbd5e1; }
.is-dark .assistant-notice-dismiss:hover[b-uzz0d152tu] { background: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
/* /Components/Chat/ChatHeader.razor.rz.scp.css */
/* ============================================
   CHAT HEADER COMPONENT
   AI-D-8 / AI-D-9 (2026-05): full theme-token migration. Pre-fix the
   header gradient was set inline from C# (GetHeaderStyle) with only 5 of
   8 themes covered, and the model menu hardcoded white / slate / purple
   throughout. Now the header background flows through theme tokens for
   all 8 themes via per-theme rules below, and every menu rule consumes
   --theme-* tokens so light/dark themes calibrate automatically.
   ============================================ */

.chatbot-header[b-u0lo56r76g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: var(--theme-btn-text, white);
    border-radius: 12px 12px 0 0;
    /* Default — uses the theme's CTA gradient. Per-theme overrides below
       apply richer color stops for themes that look better with a bespoke
       dual-tone header. */
    background: var(--theme-cta-gradient);
}

/* AI-D-9: per-theme header gradients — all 8 themes covered, replacing the
   inline GetHeaderStyle switch that missed Executive / Mystic / Tron. */
.chat-header-executive[b-u0lo56r76g] {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
}

.chat-header-cloud[b-u0lo56r76g] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
}

.chat-header-space[b-u0lo56r76g] {
    background: linear-gradient(135deg, #2d1b69 0%, #4c1d95 100%);
}

.chat-header-winter[b-u0lo56r76g] {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
}

.chat-header-nature[b-u0lo56r76g] {
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
}

.chat-header-ocean[b-u0lo56r76g] {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
}

.chat-header-mystic[b-u0lo56r76g] {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
}

.chat-header-tron[b-u0lo56r76g] {
    background: linear-gradient(135deg, #082f49 0%, #0e7490 100%);
}

.header-left[b-u0lo56r76g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon-btn[b-u0lo56r76g] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.header-icon-btn:hover[b-u0lo56r76g] {
    background: rgba(255, 255, 255, 0.2);
}

.header-icon-btn svg[b-u0lo56r76g] {
    width: 24px;
    height: 24px;
}

.header-icon[b-u0lo56r76g] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon svg[b-u0lo56r76g] {
    width: 24px;
    height: 24px;
}

.header-title[b-u0lo56r76g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.header-title-text[b-u0lo56r76g] {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
}

.header-subtitle[b-u0lo56r76g] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.header-actions[b-u0lo56r76g] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Model Selector Dropdown */
.model-selector[b-u0lo56r76g] {
    position: relative;
}

.model-selector-btn[b-u0lo56r76g] {
    width: 32px;
    height: 32px;
}

.model-selector-btn svg[b-u0lo56r76g] {
    width: 20px;
    height: 20px;
}

/* AI-D-8 (2026-05): model menu fully theme-aware. Pre-fix every property
   hardcoded a light-theme color (white surface, slate text, purple selected
   state, amber cost, emerald check). Now flows through theme tokens so the
   menu paints correctly on every theme without per-theme overrides. */
.model-menu[b-u0lo56r76g] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--theme-shadow-color, rgba(0, 0, 0, 0.2));
    min-width: 280px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 100;
}

.model-menu-header[b-u0lo56r76g] {
    padding: 12px 16px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    border-bottom: 1px solid var(--theme-border);
}

.model-menu-item[b-u0lo56r76g] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
    font-family: inherit;
}

.model-menu-item:hover[b-u0lo56r76g] {
    background: var(--theme-secondary, #f1f5f9);
}

.model-menu-item.active[b-u0lo56r76g] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
}

.model-icon[b-u0lo56r76g] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--theme-secondary, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary, #64748b);
    flex-shrink: 0;
}

.model-menu-item.active .model-icon[b-u0lo56r76g] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 15%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
}

.model-icon svg[b-u0lo56r76g] {
    width: 20px;
    height: 20px;
}

.model-info[b-u0lo56r76g] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.model-name[b-u0lo56r76g] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

.model-menu-item.active .model-name[b-u0lo56r76g] {
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
}

.model-desc[b-u0lo56r76g] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.model-cost[b-u0lo56r76g] {
    font-size: 0.7rem;
    color: var(--theme-text-warning, #f59e0b);
    font-weight: 500;
}

/* "Free" label flows through success token so it reads as positive across themes. */
.model-cost.free[b-u0lo56r76g] {
    color: var(--theme-text-success, #16a34a);
}

.model-emoji-icon[b-u0lo56r76g] {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.model-emoji[b-u0lo56r76g] {
    font-size: 1.2rem;
}

.check-icon[b-u0lo56r76g] {
    color: var(--theme-text-success, #22c55e);
    flex-shrink: 0;
}

/* AI-D-8 (2026-05): per-theme hover glows collapsed to a single rule that
   consumes --theme-primary-rgb, replacing the four hardcoded RGB tuples.
   Picks up future theme additions automatically. */
:is(.chat-header-space, .chat-header-winter, .chat-header-nature,
    .chat-header-ocean, .chat-header-mystic, .chat-header-tron) .header-icon-btn:hover[b-u0lo56r76g] {
    box-shadow: 0 0 12px rgba(var(--theme-primary-rgb, 168, 85, 247), 0.4);
}

/* Responsive */
@media (max-width: 900px) {
    .chatbot-header[b-u0lo56r76g] {
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .chatbot-header[b-u0lo56r76g] {
        padding: 10px 12px;
    }

    .header-icon[b-u0lo56r76g] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .header-title-text[b-u0lo56r76g] {
        font-size: 0.9375rem;
    }

    .header-subtitle[b-u0lo56r76g] {
        font-size: 0.6875rem;
    }
}

@media (max-width: 480px) {
    .chatbot-header[b-u0lo56r76g] {
        padding: 10px 8px;
    }

    .header-icon[b-u0lo56r76g] {
        width: 32px;
        height: 32px;
    }

    .header-title-text[b-u0lo56r76g] {
        font-size: 1rem;
    }

    .model-menu[b-u0lo56r76g] {
        min-width: 240px;
        right: -60px;
    }
}
/* /Components/Chat/ChatHelpPanel.razor.rz.scp.css */
/* ============================================
   CHAT HELP PANEL COMPONENT
   AI-V-7 (2026-05): full theme-token migration so the expanded
   help renders cleanly across all 8 themes — replaces the old
   light/dark split with token-driven styles + per-theme cleanup.
   ============================================ */

.help-panel[b-8n1vjjhgsd] {
    background: var(--theme-surface-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    color: var(--theme-text-primary);
}

.help-title[b-8n1vjjhgsd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0 0 14px 0;
}

.help-title svg[b-8n1vjjhgsd] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.help-section[b-8n1vjjhgsd] {
    margin-bottom: 14px;
}

.help-section:last-of-type[b-8n1vjjhgsd] {
    margin-bottom: 8px;
}

.help-section-title[b-8n1vjjhgsd] {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

.help-list[b-8n1vjjhgsd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-item[b-8n1vjjhgsd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-item code[b-8n1vjjhgsd] {
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.82rem;
    color: var(--theme-primary-ink, var(--theme-primary));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.help-item span[b-8n1vjjhgsd] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary);
}

.help-tip[b-8n1vjjhgsd] {
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-left: 3px solid var(--theme-primary);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .help-panel[b-8n1vjjhgsd] {
        padding: 12px;
    }

    .help-item[b-8n1vjjhgsd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .help-item code[b-8n1vjjhgsd] {
        min-width: auto;
        font-size: 0.75rem;
    }
}
/* /Components/Chat/ChatInput.razor.rz.scp.css */
/* ============================================
   CHAT INPUT COMPONENT - Enhanced UI/UX
   All enhancements for tool search experience
   ============================================ */

/* Wrapper for absolute positioning of dropdown */
.chat-input-wrapper[b-djccm9pouv] {
    position: relative;
    z-index: 50;
}

/* ============================================
   TOOL SUGGESTIONS DROPDOWN - ENHANCED
   ============================================ */
.tool-suggestions-dropdown[b-djccm9pouv] {
    position: absolute;
    bottom: 100%;
    left: 12px;
    right: 12px;
    margin-bottom: 8px;
    background: var(--theme-surface, rgba(30, 41, 59, 0.98));
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.2));
    border-radius: 16px;
    box-shadow: 0 -8px 32px transparent, 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    z-index: 1000;
    animation: dropdown-appear-b-djccm9pouv 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(20px);
    max-height: min(280px, 40vh);
    overflow-y: auto;
}

.tool-suggestions-dropdown.loading[b-djccm9pouv] {
    min-height: 80px;
}

/* Browse mode - taller dropdown for browsing all tools.
   AI-Hotfix (2026-05): clamped to 45% of the parent floating chat dialog (when
   nested) instead of 55vh — the floating chat is ~580px tall, so 55vh on a
   1440p display was bigger than the whole dialog and overlaid the message
   list. Using `min(360px, 45cqh)` with a container query falls back gracefully
   to vh for browsers without containment, but keeps the dropdown roughly
   half the chat area when nested. The parent component should also pass
   SuppressEmptyStateSuggestions=true once messages exist (renamed from
   SuppressToolSuggestions on 2026-05-03 — the rename narrows the scope to
   the browse-all/favorites panels only, leaving typing-state autocomplete
   intact mid-thread). */
.tool-suggestions-dropdown.browse-mode[b-djccm9pouv] {
    max-height: min(360px, 45vh);
}

@keyframes dropdown-appear-b-djccm9pouv {
    from { 
        opacity: 0; 
        transform: translateY(8px) scale(0.98);
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1);
    }
}

/* Sections */
.suggestions-section[b-djccm9pouv] {
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
}

.suggestions-section:last-of-type[b-djccm9pouv] {
    border-bottom: none;
}

/* Headers */
.suggestions-header[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-primary-ink, var(--theme-primary, #a855f7));
}

.suggestions-header.recent[b-djccm9pouv] {
    color: #3b82f6;
}

.suggestions-header.recent svg[b-djccm9pouv] {
    fill: #3b82f6;
}

.suggestions-header.favorites[b-djccm9pouv] {
    color: #f59e0b;
}

.suggestions-header.favorites svg[b-djccm9pouv] {
    fill: #f59e0b;
}

.suggestions-header.packages[b-djccm9pouv] {
    color: #10b981;
}

.suggestions-header.packages svg[b-djccm9pouv] {
    fill: #10b981;
}

.suggestions-header.browse-category[b-djccm9pouv] {
    color: var(--theme-text-secondary, #94a3b8);
}

.manage-favorites-btn[b-djccm9pouv] {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.manage-favorites-btn:hover[b-djccm9pouv] {
    background: var(--theme-hover, rgba(168, 85, 247, 0.1));
    color: var(--theme-primary-ink, var(--theme-primary, #a855f7));
}

.suggestions-header svg[b-djccm9pouv] {
    fill: currentColor;
    opacity: 0.8;
}

/* Favorites & Recent Pills Section */
.favorites-section[b-djccm9pouv],
.recent-section[b-djccm9pouv] {
    padding-bottom: 10px;
}

.favorites-pills[b-djccm9pouv] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 14px 8px;
}

.favorite-pill-compact[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 5px;
    background: var(--theme-surface-secondary, rgba(248, 250, 252, 0.8));
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.2));
    border-radius: 16px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    cursor: pointer;
    transition: all 0.15s ease;
}

.favorite-pill-compact:hover[b-djccm9pouv] {
    background: var(--theme-hover, rgba(168, 85, 247, 0.1));
    border-color: var(--theme-primary, #a855f7);
    transform: translateY(-1px);
}

.favorite-icon-tiny[b-djccm9pouv] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

.suggestions-header .results-count[b-djccm9pouv] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--theme-text-muted, #64748b);
    text-transform: none;
    letter-spacing: normal;
}

/* Tool Items - Enhanced */
.tool-suggestion-item[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    border-left: 3px solid transparent;
}

.tool-suggestion-item:hover[b-djccm9pouv],
.tool-suggestion-item.selected[b-djccm9pouv] {
    background: var(--theme-hover, rgba(124, 58, 237, 0.12));
    border-left-color: var(--theme-primary, #a855f7);
}

.tool-suggestion-item.selected[b-djccm9pouv] {
    background: var(--theme-hover, rgba(124, 58, 237, 0.18));
}

/* Tool Icon */
.tool-icon-small[b-djccm9pouv] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.tool-icon-small .material-symbols-rounded[b-djccm9pouv] {
    font-size: 16px;
    color: white;
}

/* Tool Info */
.tool-info-small[b-djccm9pouv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.tool-name-row[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-name-small[b-djccm9pouv] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, white);
}

.tool-name-small mark[b-djccm9pouv] {
    background: rgba(var(--theme-accent-rgb), 0.3);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.tool-desc-small[b-djccm9pouv] {
    font-size: 0.72rem;
    color: var(--theme-text-secondary, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none; /* Hide description to save space */
}

.tool-category-small[b-djccm9pouv] {
    font-size: 0.68rem;
    color: var(--theme-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Role Badge */
.role-badge[b-djccm9pouv] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(251, 146, 60, 0.2);
    color: #fb923c;
    white-space: nowrap;
}

/* Tool Arrow */
.tool-arrow[b-djccm9pouv] {
    fill: var(--theme-text-muted, #64748b);
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.tool-suggestion-item:hover .tool-arrow[b-djccm9pouv],
.tool-suggestion-item.selected .tool-arrow[b-djccm9pouv] {
    opacity: 1;
    transform: translateX(0);
}

/* Loading State */
.search-loading[b-djccm9pouv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--theme-text-secondary, #94a3b8);
    font-size: 0.85rem;
}

.spinner-small[b-djccm9pouv] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--theme-border, rgba(148, 163, 184, 0.3));
    border-top-color: var(--theme-primary, #a855f7);
    border-radius: 50%;
    animation: spin-b-djccm9pouv 0.8s linear infinite;
}

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

/* No Results State - Subtle inline hint */
.no-results[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    text-align: left;
}

.no-results svg[b-djccm9pouv] {
    fill: var(--theme-text-muted, #64748b);
    opacity: 0.4;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.no-results span[b-djccm9pouv] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
}

.no-results strong[b-djccm9pouv] {
    color: var(--theme-text-secondary, #94a3b8);
    font-weight: 500;
}

.no-results small[b-djccm9pouv] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
    margin-left: auto;
    white-space: nowrap;
}

/*
 * Full-catalog footer link — sits above the keyboard hints inside the suggestions
 * dropdown. Discrete tertiary affordance ("I can't find what I want here"); styled
 * quieter than tool/package pills so it doesn't compete with Recent/Favorites.
 */
.suggestions-footer-link[b-djccm9pouv] {
    display: flex;
    justify-content: center;
    padding: 6px 12px 8px;
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.35));
}

.browse-catalog-link[b-djccm9pouv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary));
    transition: background 120ms ease, color 120ms ease;
}

.browse-catalog-link:hover[b-djccm9pouv] {
    background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
    color: var(--theme-primary-hover, var(--theme-primary));
}

.browse-catalog-link:focus-visible[b-djccm9pouv] {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* Keyboard Hints */
.keyboard-hints[b-djccm9pouv] {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.5));
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
}

.keyboard-hints .hint[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: var(--theme-text-muted, #64748b);
}

.keyboard-hints kbd[b-djccm9pouv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 0.6rem;
    font-family: inherit;
    background: var(--theme-surface, rgba(30, 41, 59, 0.8));
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.2));
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================
   QUICK COMMANDS BAR
   ============================================ */
.quick-commands-bar[b-djccm9pouv] {
    display: flex;
    gap: 6px;
    padding: 6px 12px;
}

.command-chip[b-djccm9pouv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.command-chip svg[b-djccm9pouv] {
    width: 14px;
    height: 14px;
}

.command-chip-primary[b-djccm9pouv] {
    color: var(--theme-primary-ink, var(--theme-primary));
    border-color: var(--theme-primary);
}

.command-chip-primary:hover[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.command-chip-history[b-djccm9pouv] {
    color: #64748b;
    border-color: rgba(148, 163, 184, 0.4);
}

.command-chip-history:hover[b-djccm9pouv] {
    background: rgba(100, 116, 139, 0.1);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.6);
}

/* History icon button - standalone style */
.history-btn[b-djccm9pouv] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    margin-right: 4px;
}

.command-chip-secondary[b-djccm9pouv] {
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}

.command-chip-secondary:hover[b-djccm9pouv] {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.command-chip-tertiary[b-djccm9pouv] {
    color: #f59e0b;
    border-color: #f59e0b;
}

.command-chip-tertiary:hover[b-djccm9pouv] {
    background: rgba(245, 158, 11, 0.1);
}

/* Spacer between pills and icon buttons */
.commands-spacer[b-djccm9pouv] {
    flex: 1;
}

/* ============================================
   MODEL SELECTOR - Inline in quick commands bar
   ============================================ */
.model-selector-inline[b-djccm9pouv] {
    position: relative;
}

/* Model Chip Button - shows emoji + name */
.model-chip[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 8px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: transparent;
    color: var(--theme-text-primary, #e2e8f0);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
}

.model-chip:hover[b-djccm9pouv] {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.5);
}

/* AI-D-10 (2026-05): Free / Knowledge Base styling flows through the success
   token so the "no credits" semantic stays consistent across themes. Pre-fix
   the hardcoded #22c55e clashed on Nature (already a green theme — KB chip
   merged into the surface) and felt foreign on Mystic / Tron. */
.model-chip.free-mode[b-djccm9pouv] {
    border-color: color-mix(in srgb, var(--theme-text-success, #16a34a) 40%, transparent);
}

.model-chip.free-mode:hover[b-djccm9pouv] {
    background: color-mix(in srgb, var(--theme-text-success, #16a34a) 10%, transparent);
    border-color: color-mix(in srgb, var(--theme-text-success, #16a34a) 60%, transparent);
}

.free-badge[b-djccm9pouv] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--theme-text-success, #16a34a) 20%, transparent);
    color: var(--theme-text-success, #22c55e);
    letter-spacing: 0.3px;
}

.model-chip-emoji[b-djccm9pouv] {
    font-size: 1rem;
    line-height: 1;
}

.model-chip-name[b-djccm9pouv] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #94a3b8);
}

.model-chip-chevron[b-djccm9pouv] {
    fill: var(--theme-text-muted, #64748b);
    transition: transform 0.2s ease;
}

.model-chip:hover .model-chip-chevron[b-djccm9pouv] {
    fill: var(--theme-text-secondary, #94a3b8);
}

/* Legacy styles - keep for compatibility */
.model-btn[b-djccm9pouv] {
    font-size: 1.1rem;
}

.model-emoji[b-djccm9pouv] {
    font-size: 1.1rem;
    line-height: 1;
}

/* Backdrop for click-outside close */
.model-backdrop[b-djccm9pouv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

.model-menu-dropdown[b-djccm9pouv] {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: var(--theme-surface, rgba(30, 41, 59, 0.98));
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.2));
    border-radius: 10px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
    min-width: 190px;
    max-height: 60vh;
    z-index: 1000;
    overflow-y: auto;
    animation: dropdown-appear-b-djccm9pouv 0.2s ease-out;
}

.model-menu-dropdown[b-djccm9pouv]::-webkit-scrollbar {
    width: 6px;
}

.model-menu-dropdown[b-djccm9pouv]::-webkit-scrollbar-track {
    background: transparent;
}

.model-menu-dropdown[b-djccm9pouv]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

.model-menu-dropdown[b-djccm9pouv]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.model-menu-header[b-djccm9pouv] {
    padding: 6px 10px 5px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-primary-ink, var(--theme-primary, #a855f7));
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
}

/* Category Headers in Model Dropdown */
.model-category-header[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px 3px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-muted, #64748b);
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.08));
    margin-top: 2px;
}

.model-category-header:first-of-type[b-djccm9pouv] {
    border-top: none;
    margin-top: 0;
}

.category-icon[b-djccm9pouv] {
    font-size: 0.75rem;
    opacity: 0.9;
}

.model-menu-item[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
    font-family: inherit;
}

.model-menu-item:hover[b-djccm9pouv] {
    background: var(--theme-hover, rgba(124, 58, 237, 0.12));
}

.model-menu-item.active[b-djccm9pouv] {
    background: var(--theme-hover, rgba(124, 58, 237, 0.18));
}

.model-emoji-icon[b-djccm9pouv] {
    font-size: 0.95rem;
    flex-shrink: 0;
}

.model-info[b-djccm9pouv] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.model-name[b-djccm9pouv] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-primary, white);
}

.model-cost[b-djccm9pouv] {
    font-size: 0.62rem;
    color: var(--theme-text-muted, #64748b);
}

.model-cost.free[b-djccm9pouv] {
    color: var(--theme-text-success, #22c55e);
    font-weight: 600;
}

/* Knowledge Base item — highlighted via success token so it reads as "free"
   semantically across themes (AI-D-10 / 2026-05). */
.model-menu-item.knowledge-base-item[b-djccm9pouv] {
    background: color-mix(in srgb, var(--theme-text-success, #16a34a) 8%, transparent);
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
    padding-bottom: 8px;
    margin-bottom: 2px;
}

.model-menu-item.knowledge-base-item:hover[b-djccm9pouv] {
    background: color-mix(in srgb, var(--theme-text-success, #16a34a) 15%, transparent);
}

.model-menu-item.knowledge-base-item.active[b-djccm9pouv] {
    background: color-mix(in srgb, var(--theme-text-success, #16a34a) 20%, transparent);
}

.model-menu-item.knowledge-base-item .check-icon[b-djccm9pouv] {
    fill: var(--theme-text-success, #22c55e);
}

.model-menu-item .check-icon[b-djccm9pouv] {
    fill: var(--theme-primary, #a855f7);
    flex-shrink: 0;
}

/* Pro AI item styling */
.model-menu-item.pro-item[b-djccm9pouv] {
    background: rgba(168, 85, 247, 0.06);
}

.model-menu-item.pro-item:hover[b-djccm9pouv] {
    background: rgba(168, 85, 247, 0.14);
}

.model-menu-item.pro-item.active[b-djccm9pouv] {
    background: rgba(168, 85, 247, 0.2);
}

/* PRO badge */
.pro-badge[b-djccm9pouv] {
    display: inline-block;
    font-size: 0.5rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--theme-primary, #a855f7), var(--theme-accent, #6366f1));
    color: white;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Model description in dropdown */
.model-desc[b-djccm9pouv] {
    font-size: 0.6rem;
    color: var(--theme-text-muted, #64748b);
    line-height: 1.2;
}

/* Coming Soon disabled item */
.coming-soon-item[b-djccm9pouv] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.coming-soon-badge[b-djccm9pouv] {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--theme-text-muted, #94a3b8);
    color: white;
    margin-left: 4px;
    vertical-align: middle;
}

/* Icon-only buttons in command bar */
.command-icon-btn[b-djccm9pouv] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.command-icon-btn svg[b-djccm9pouv] {
    width: 18px;
    height: 18px;
}

.command-icon-btn:hover[b-djccm9pouv] {
    background: rgba(148, 163, 184, 0.1);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.5);
}

.command-icon-btn.active[b-djccm9pouv] {
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-accent);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
}

.command-icon-btn.continuous-active[b-djccm9pouv] {
    color: var(--theme-text-success, #22c55e);
    border-color: color-mix(in srgb, var(--theme-text-success, #16a34a) 40%, transparent);
}

.command-icon-btn .continuous-indicator[b-djccm9pouv] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--theme-text-success, #22c55e);
    border-radius: 50%;
    animation: pulse-b-djccm9pouv 2s infinite;
}

@keyframes pulse-b-djccm9pouv {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   INPUT CONTAINER
   ============================================ */
.chatbot-input[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

/* History icon button - standalone to the left of input */
.history-icon-btn[b-djccm9pouv] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--theme-text-secondary, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.history-icon-btn:hover[b-djccm9pouv] {
    background: rgba(148, 163, 184, 0.15);
    color: var(--theme-text-primary, #e2e8f0);
}

.history-icon-btn svg[b-djccm9pouv] {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* History Badge - unread count indicator */
.history-badge[b-djccm9pouv] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--theme-accent);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* CI-V-1 (2026-05-08): switched from a flat row of [textarea + clear + attach +
   voice + send] to a stacked column of [textarea row][actions row]. The row
   layout pinched the textarea down to ~50% of the input width when the user
   typed a long prompt — multi-line wraps would show a scrollbar with only
   3-4 lines visible because the buttons were eating the horizontal space.
   Stacked layout matches modern chat-UI pattern (Claude.ai, ChatGPT) and
   gives the textarea full width regardless of how cramped the parent panel is. */
.input-container[b-djccm9pouv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    background: var(--theme-input-bg, rgba(30, 41, 59, 0.8));
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.2));
    border-radius: 12px;
    padding: 10px 10px 8px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

/* Top row: textarea (full width) + inline clear chip when content is present.
   align-items: flex-start so the clear button anchors to the top of long
   wrapped textarea content rather than vertical-centering against it. */
.input-textarea-row[b-djccm9pouv] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}

/* Bottom row: attach + voice on the left, send pushed to the right via the
   send button's margin-left: auto (defined alongside the .send-button rules
   later in this file). align-items: center keeps the icons vertically
   centered against the 36px button baseline. */
.input-actions-row[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.input-container:focus-within[b-djccm9pouv] {
    border-color: var(--theme-input-focus, #a855f7);
    box-shadow: 0 2px 16px rgba(var(--theme-primary-rgb), 0.2);
}

/* History button inside input container */
.input-history-btn[b-djccm9pouv] {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border: none;
    border-radius: 10px;
    background: rgba(30, 41, 59, 0.8);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.input-history-btn:hover[b-djccm9pouv] {
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}

.input-history-btn svg[b-djccm9pouv] {
    width: 20px;
    height: 20px;
}

/* AI-V-20 (2026-05): Input starts at a single line and grows with content.
   - rows="1" sets the initial single-line baseline (was rows="2").
   - field-sizing: content auto-resizes the textarea to fit its value (Chromium
     123+, Firefox 130+, Safari 17.4+) — covers Brave / Edge / Chrome cleanly.
   - max-height caps growth at ~6 lines before the textarea starts scrolling.
   - Removed the previous min-height: 48px which forced a permanent two-line
     box even when empty. */
.message-input[b-djccm9pouv] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    resize: none;
    field-sizing: content;
    min-height: 28px;
    max-height: 150px;
    background: transparent;
    color: var(--theme-input-text, #f1f5f9);
    padding: 4px 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* Textarea scrollbar styling */
.message-input[b-djccm9pouv]::-webkit-scrollbar {
    width: 6px;
}

.message-input[b-djccm9pouv]::-webkit-scrollbar-track {
    background: transparent;
}

.message-input[b-djccm9pouv]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

.message-input[b-djccm9pouv]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Hide scrollbar buttons (up/down arrows) */
.message-input[b-djccm9pouv]::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
}

.message-input[b-djccm9pouv]::placeholder {
    color: var(--theme-text-muted, #64748b);
}

.message-input:disabled[b-djccm9pouv] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* AI-V-19 (2026-05): All four input-row buttons (clear / attach / voice / send)
   normalized to 36×36 + border-radius 10px so they share a baseline at the bottom
   of the textarea row. Previously: clear=28 round, attach=36 r8, voice=40 r10,
   send=40 r10 — each with different margin-bottom hacks compensating for the
   size mismatch, which still left them visually misaligned (round vs square,
   large vs small). Send keeps its gradient fill; the other three keep transparent
   backgrounds so the send button still reads as the primary action. */
.send-button[b-djccm9pouv] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    /* CI-V-1: pushes the send button to the right of the .input-actions-row
       so attach + voice cluster on the left and send anchors on the right. */
    margin-left: auto;
}

.send-button:hover:not(:disabled)[b-djccm9pouv] {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.4);
}

.send-button:disabled[b-djccm9pouv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-button svg[b-djccm9pouv] {
    width: 18px;
    height: 18px;
}

/* Clear Input Button */
.clear-input-button[b-djccm9pouv] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--theme-text-secondary, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.clear-input-button:hover[b-djccm9pouv] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.clear-input-button svg[b-djccm9pouv] {
    width: 18px;
    height: 18px;
}

/* ============================================
   IMAGE ATTACHMENT PREVIEW
   ============================================ */

.input-container.has-attachment[b-djccm9pouv] {
    flex-wrap: wrap;
}

.image-preview-strip[b-djccm9pouv] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-radius: 8px;
    margin-bottom: 4px;
    animation: slideInPreview-b-djccm9pouv 0.2s ease-out;
}

@keyframes slideInPreview-b-djccm9pouv {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.image-preview-thumbnail[b-djccm9pouv] {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    flex-shrink: 0;
}

.image-preview-info[b-djccm9pouv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.image-preview-name[b-djccm9pouv] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-primary, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.image-preview-size[b-djccm9pouv] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #64748b);
}

.image-preview-remove[b-djccm9pouv] {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.image-preview-remove:hover[b-djccm9pouv] {
    background: rgba(239, 68, 68, 0.2);
    transform: scale(1.1);
}

/* Attach Button */
.attach-button[b-djccm9pouv] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.attach-button:hover:not(:disabled)[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #a855f7));
}

.attach-button:disabled[b-djccm9pouv] {
    opacity: 0.4;
    cursor: not-allowed;
}

.attach-button svg[b-djccm9pouv],
.voice-button svg[b-djccm9pouv] {
    width: 18px;
    height: 18px;
}

/* Voice Button */
.voice-button[b-djccm9pouv] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.voice-button:hover:not(:disabled)[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #a855f7));
}

.voice-button:disabled[b-djccm9pouv] {
    opacity: 0.4;
    cursor: not-allowed;
}

.voice-button.listening[b-djccm9pouv] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    animation: pulse-voice-b-djccm9pouv 1s ease-in-out infinite;
}

.voice-button.listening svg[b-djccm9pouv] {
    fill: #ef4444;
}

@keyframes pulse-voice-b-djccm9pouv {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
    }
}

.message-input.voice-active[b-djccm9pouv] {
    color: var(--theme-primary-ink, var(--theme-primary, #a855f7));
}

.input-hint[b-djccm9pouv] {
    display: block;
    font-size: 0.75rem;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.5));
    margin-top: 8px;
    text-align: center;
}

/* ============================================
   LIGHT THEME (Cloud) OVERRIDES
   ============================================ */
:global(.theme-cloud) .tool-suggestions-dropdown[b-djccm9pouv] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(30, 58, 95, 0.15);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
}

:global(.theme-cloud) .suggestions-header[b-djccm9pouv] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

:global(.theme-cloud) .suggestions-header.recent[b-djccm9pouv] {
    color: #d97706;
}

:global(.theme-cloud) .tool-suggestion-item:hover[b-djccm9pouv],
:global(.theme-cloud) .tool-suggestion-item.selected[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-left-color: var(--theme-primary);
}

:global(.theme-cloud) .tool-name-small[b-djccm9pouv] {
    color: #1e3a5f;
}

:global(.theme-cloud) .tool-name-small mark[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.2);
}

:global(.theme-cloud) .tool-desc-small[b-djccm9pouv] {
    color: #475569;
}

:global(.theme-cloud) .tool-category-small[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-cloud) .no-results span[b-djccm9pouv] {
    color: #475569;
}

:global(.theme-cloud) .no-results strong[b-djccm9pouv] {
    color: #1e3a5f;
}

:global(.theme-cloud) .keyboard-hints[b-djccm9pouv] {
    background: rgba(241, 245, 249, 0.8);
}

:global(.theme-cloud) .keyboard-hints kbd[b-djccm9pouv] {
    background: white;
    border-color: rgba(30, 58, 95, 0.2);
}

:global(.theme-cloud) .quick-commands-bar[b-djccm9pouv] {
    background: transparent;
    border-color: rgba(30, 58, 95, 0.15);
}

:global(.theme-cloud) .model-menu-dropdown[b-djccm9pouv] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(30, 58, 95, 0.15);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}

:global(.theme-cloud) .model-menu-header[b-djccm9pouv] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

:global(.theme-cloud) .model-menu-item:hover[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.08);
}

:global(.theme-cloud) .model-menu-item.active[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.12);
}

:global(.theme-cloud) .model-name[b-djccm9pouv] {
    color: #1e3a5f;
}

:global(.theme-cloud) .model-cost[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-cloud) .input-container[b-djccm9pouv] {
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.2);
}

:global(.theme-cloud) .input-container:focus-within[b-djccm9pouv] {
    border-color: var(--theme-primary);
    box-shadow: 0 2px 16px rgba(var(--theme-primary-rgb), 0.15);
}

:global(.theme-cloud) .history-icon-btn[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-cloud) .history-icon-btn:hover[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

:global(.theme-cloud) .message-input[b-djccm9pouv] {
    color: #1e293b;
}

:global(.theme-cloud) .message-input[b-djccm9pouv]::placeholder {
    color: #6b7280;
}

:global(.theme-cloud) .input-hint[b-djccm9pouv] {
    color: #4b5563;
}

:global(.theme-cloud) .voice-button[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-cloud) .voice-button:hover:not(:disabled)[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

:global(.theme-cloud) .voice-button.listening[b-djccm9pouv] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* ============================================
   LIGHT THEME (Executive) OVERRIDES
   ============================================ */
:global(.theme-executive) .tool-suggestions-dropdown[b-djccm9pouv] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
}

:global(.theme-executive) .suggestions-header[b-djccm9pouv] {
    color: #475569;
}

:global(.theme-executive) .suggestions-header.recent[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-executive) .tool-suggestion-item:hover[b-djccm9pouv],
:global(.theme-executive) .tool-suggestion-item.selected[b-djccm9pouv] {
    background: rgba(51, 65, 85, 0.06);
    border-left-color: #475569;
}

:global(.theme-executive) .tool-name-small[b-djccm9pouv] {
    color: #0f172a;
}

:global(.theme-executive) .tool-name-small mark[b-djccm9pouv] {
    background: rgba(51, 65, 85, 0.15);
}

:global(.theme-executive) .tool-desc-small[b-djccm9pouv] {
    color: #475569;
}

:global(.theme-executive) .tool-category-small[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-executive) .no-results span[b-djccm9pouv] {
    color: #475569;
}

:global(.theme-executive) .no-results strong[b-djccm9pouv] {
    color: #0f172a;
}

:global(.theme-executive) .keyboard-hints[b-djccm9pouv] {
    background: rgba(241, 245, 249, 0.8);
}

:global(.theme-executive) .keyboard-hints kbd[b-djccm9pouv] {
    background: white;
    border-color: rgba(15, 23, 42, 0.15);
}

:global(.theme-executive) .quick-commands-bar[b-djccm9pouv] {
    background: transparent;
    border-color: rgba(15, 23, 42, 0.08);
}

:global(.theme-executive) .model-menu-dropdown[b-djccm9pouv] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}

:global(.theme-executive) .model-menu-header[b-djccm9pouv] {
    color: #475569;
}

:global(.theme-executive) .model-menu-item:hover[b-djccm9pouv] {
    background: rgba(51, 65, 85, 0.06);
}

:global(.theme-executive) .model-menu-item.active[b-djccm9pouv] {
    background: rgba(51, 65, 85, 0.08);
}

:global(.theme-executive) .model-name[b-djccm9pouv] {
    color: #0f172a;
}

:global(.theme-executive) .model-cost[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-executive) .input-container[b-djccm9pouv] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

:global(.theme-executive) .input-container:focus-within[b-djccm9pouv] {
    border-color: #475569;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

:global(.theme-executive) .history-icon-btn[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-executive) .history-icon-btn:hover[b-djccm9pouv] {
    background: rgba(51, 65, 85, 0.08);
    color: #334155;
}

:global(.theme-executive) .message-input[b-djccm9pouv] {
    color: #0f172a;
}

:global(.theme-executive) .message-input[b-djccm9pouv]::placeholder {
    color: #94a3b8;
}

:global(.theme-executive) .input-hint[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-executive) .voice-button[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-executive) .voice-button:hover:not(:disabled)[b-djccm9pouv] {
    background: rgba(51, 65, 85, 0.08);
    color: #334155;
}

:global(.theme-executive) .voice-button.listening[b-djccm9pouv] {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

/* Light theme image preview overrides */
:global(.theme-executive) .image-preview-strip[b-djccm9pouv],
:global(.theme-cloud) .image-preview-strip[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.06);
}

:global(.theme-executive) .image-preview-name[b-djccm9pouv],
:global(.theme-cloud) .image-preview-name[b-djccm9pouv] {
    color: var(--theme-text-primary, #0f172a);
}

:global(.theme-executive) .attach-button[b-djccm9pouv],
:global(.theme-cloud) .attach-button[b-djccm9pouv] {
    color: #64748b;
}

:global(.theme-executive) .attach-button:hover:not(:disabled)[b-djccm9pouv],
:global(.theme-cloud) .attach-button:hover:not(:disabled)[b-djccm9pouv] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* ============================================
   DARK THEMES OVERRIDES
   ============================================ */
:global(.theme-space) .quick-commands-bar[b-djccm9pouv],
:global(.theme-winter) .quick-commands-bar[b-djccm9pouv],
:global(.theme-nature) .quick-commands-bar[b-djccm9pouv],
:global(.theme-ocean) .quick-commands-bar[b-djccm9pouv],
:global(.theme-mystic) .quick-commands-bar[b-djccm9pouv],
:global(.theme-tron) .quick-commands-bar[b-djccm9pouv] {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.2);
}

:global(.theme-space) .input-container[b-djccm9pouv],
:global(.theme-winter) .input-container[b-djccm9pouv],
:global(.theme-nature) .input-container[b-djccm9pouv],
:global(.theme-ocean) .input-container[b-djccm9pouv],
:global(.theme-mystic) .input-container[b-djccm9pouv],
:global(.theme-tron) .input-container[b-djccm9pouv] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.2);
}

:global(.theme-space) .input-container:focus-within[b-djccm9pouv],
:global(.theme-winter) .input-container:focus-within[b-djccm9pouv],
:global(.theme-nature) .input-container:focus-within[b-djccm9pouv],
:global(.theme-ocean) .input-container:focus-within[b-djccm9pouv],
:global(.theme-mystic) .input-container:focus-within[b-djccm9pouv],
:global(.theme-tron) .input-container:focus-within[b-djccm9pouv] {
    border-color: var(--theme-accent);
}

:global(.theme-space) .message-input[b-djccm9pouv],
:global(.theme-winter) .message-input[b-djccm9pouv],
:global(.theme-nature) .message-input[b-djccm9pouv],
:global(.theme-ocean) .message-input[b-djccm9pouv],
:global(.theme-mystic) .message-input[b-djccm9pouv],
:global(.theme-tron) .message-input[b-djccm9pouv] {
    color: #f1f5f9;
}

/* Dark theme favorites */
:global(.theme-space) .favorite-pill-compact[b-djccm9pouv],
:global(.theme-winter) .favorite-pill-compact[b-djccm9pouv],
:global(.theme-nature) .favorite-pill-compact[b-djccm9pouv],
:global(.theme-ocean) .favorite-pill-compact[b-djccm9pouv],
:global(.theme-mystic) .favorite-pill-compact[b-djccm9pouv],
:global(.theme-tron) .favorite-pill-compact[b-djccm9pouv] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

:global(.theme-space) .favorite-pill-compact:hover[b-djccm9pouv],
:global(.theme-winter) .favorite-pill-compact:hover[b-djccm9pouv],
:global(.theme-nature) .favorite-pill-compact:hover[b-djccm9pouv],
:global(.theme-ocean) .favorite-pill-compact:hover[b-djccm9pouv],
:global(.theme-mystic) .favorite-pill-compact:hover[b-djccm9pouv],
:global(.theme-tron) .favorite-pill-compact:hover[b-djccm9pouv] {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--theme-accent, #a855f7);
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
.tool-suggestions-dropdown[b-djccm9pouv]::-webkit-scrollbar {
    width: 6px;
}

.tool-suggestions-dropdown[b-djccm9pouv]::-webkit-scrollbar-track {
    background: transparent;
}

.tool-suggestions-dropdown[b-djccm9pouv]::-webkit-scrollbar-thumb {
    background: var(--theme-border, rgba(148, 163, 184, 0.3));
    border-radius: 3px;
}

.tool-suggestions-dropdown[b-djccm9pouv]::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted, rgba(148, 163, 184, 0.5));
}

/* Send Button - Theme Specific */
:global(.theme-cloud) .send-button[b-djccm9pouv] {
    background: linear-gradient(135deg, #1e3a5f 0%, #3b5998 100%) !important;
}

:global(.theme-space) .send-button[b-djccm9pouv] {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%) !important;
}

:global(.theme-winter) .send-button[b-djccm9pouv] {
    background: linear-gradient(135deg, #155e75 0%, #0891b2 100%) !important;
}

:global(.theme-nature) .send-button[b-djccm9pouv] {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%) !important;
}

:global(.theme-ocean) .send-button[b-djccm9pouv] {
    background: linear-gradient(135deg, #075985 0%, #0284c7 100%) !important;
}

:global(.theme-mystic) .send-button[b-djccm9pouv] {
    background: linear-gradient(135deg, #9a3412 0%, #f97316 100%) !important;
}

:global(.theme-tron) .send-button[b-djccm9pouv] {
    background: linear-gradient(135deg, #0077b6 0%, #00d4ff 100%) !important;
}

/* Input Hint - Dark Themes */
:global(.theme-space) .input-hint[b-djccm9pouv],
:global(.theme-winter) .input-hint[b-djccm9pouv],
:global(.theme-nature) .input-hint[b-djccm9pouv],
:global(.theme-ocean) .input-hint[b-djccm9pouv],
:global(.theme-mystic) .input-hint[b-djccm9pouv],
:global(.theme-tron) .input-hint[b-djccm9pouv] {
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   💠 TRON THEME - Specific Overrides
   ============================================ */
:global(.theme-tron) .input-container[b-djccm9pouv] {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(0, 212, 255, 0.3);
}

:global(.theme-tron) .input-container:focus-within[b-djccm9pouv] {
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15), 0 2px 16px rgba(0, 212, 255, 0.1);
}

:global(.theme-tron) .message-input[b-djccm9pouv]::placeholder {
    color: rgba(0, 212, 255, 0.4);
}

:global(.theme-tron) .voice-button[b-djccm9pouv] {
    color: rgba(0, 212, 255, 0.5);
}

:global(.theme-tron) .voice-button:hover:not(:disabled)[b-djccm9pouv] {
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
}

:global(.theme-tron) .history-icon-btn[b-djccm9pouv] {
    color: rgba(0, 212, 255, 0.5);
}

:global(.theme-tron) .history-icon-btn:hover[b-djccm9pouv] {
    background: rgba(0, 212, 255, 0.1);
    color: #00ffff;
}

:global(.theme-tron) .model-chip[b-djccm9pouv] {
    border-color: rgba(0, 212, 255, 0.3);
}

:global(.theme-tron) .model-chip:hover[b-djccm9pouv] {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.5);
}

:global(.theme-tron) .model-chip-name[b-djccm9pouv] {
    color: #7dd3fc;
}

:global(.theme-tron) .command-icon-btn[b-djccm9pouv] {
    border-color: rgba(0, 212, 255, 0.25);
    color: rgba(0, 212, 255, 0.5);
}

:global(.theme-tron) .command-icon-btn:hover[b-djccm9pouv] {
    background: rgba(0, 212, 255, 0.08);
    color: #00d4ff;
    border-color: rgba(0, 212, 255, 0.5);
}

:global(.theme-tron) .model-menu-dropdown[b-djccm9pouv] {
    background: rgba(0, 0, 0, 0.95);
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 -4px 30px rgba(0, 212, 255, 0.15);
}

:global(.theme-tron) .model-menu-item:hover[b-djccm9pouv] {
    background: rgba(0, 212, 255, 0.1);
}

:global(.theme-tron) .model-menu-item.active[b-djccm9pouv] {
    background: rgba(0, 212, 255, 0.15);
}

:global(.theme-tron) .model-name[b-djccm9pouv] {
    color: #e0f7ff;
}

:global(.theme-tron) .tool-suggestions-dropdown[b-djccm9pouv] {
    background: rgba(0, 0, 0, 0.95);
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 0 -8px 32px rgba(0, 212, 255, 0.1);
}

:global(.theme-tron) .tool-suggestion-item:hover[b-djccm9pouv],
:global(.theme-tron) .tool-suggestion-item.selected[b-djccm9pouv] {
    background: rgba(0, 212, 255, 0.1);
    border-left-color: #00d4ff;
}

:global(.theme-tron) .tool-name-small[b-djccm9pouv] {
    color: #e0f7ff;
}

:global(.theme-tron) .send-button:hover:not(:disabled)[b-djccm9pouv] {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

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

@media (max-width: 768px) {
    .quick-commands-bar[b-djccm9pouv] {
        padding: 8px 12px;
        gap: 6px;
    }

    .chatbot-input[b-djccm9pouv] {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
    }

    .input-container[b-djccm9pouv] {
        padding: 4px 4px 4px 12px;
    }

    .input-hint[b-djccm9pouv] {
        display: none;
    }
}

/* GLITCH-PHONE-1 (2026-10-13): the <=768px safe-area padding clears the iPhone home indicator for the
   floating sheet, which sits on the screen's bottom edge. Docked in Home's Glitch tab the input sits
   inside the card, so that padding was ~34px of dead white under it. The ancestor is outside this
   component; scoped CSS only stamps the rightmost selector, so the ancestor test still works. */
@media (max-width: 768px) {
    .floating-chat-dialog.is-docked .chatbot-input[b-djccm9pouv] {
        padding-bottom: 8px;
    }
}
/* /Components/Chat/ChatMessageBubble.razor.rz.scp.css */
/* ============================================
   CHAT MESSAGE BUBBLE - Scoped CSS
   ============================================ */

.message-wrapper[b-4fcsknod5e] {
    display: flex;
    gap: 12px;
    max-width: 85%;
}

.message-wrapper.user[b-4fcsknod5e] {
    align-self: flex-end;
    flex-direction: row;
}

.message-wrapper.assistant[b-4fcsknod5e] {
    align-self: flex-start;
}

.avatar-container[b-4fcsknod5e] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* PRO-BOT-2 (2026-08-13): the in-message assistant avatar was a HARDCODED purple
   gradient, so in Professional/executive theme it rendered a purple orb while the FAB,
   hero and peek were all the theme's dark slate — read as "still the Spark companion"
   (it was actually the ProBot on a purple disc; same one-question-two-answers as
   PUB-FAB-UNIFY-1). Now the same --theme-cta-gradient every other AI mark uses. A
   circle is correct HERE — message-list avatars are a strong convention and the disc
   separates a 20px mark from the bubble — this is the "bubble" treatment (white head,
   dark face), not the bare-mark treatment of the hero/FAB. `color: #fff` makes the
   ProBot HEAD white via currentColor; the bot is given FaceColor in the markup so the
   face reads dark on the white head (else white-head + white-face = a featureless
   blob, the currentColor trap of #300). */
.assistant-avatar[b-4fcsknod5e] {
    background: var(--theme-cta-gradient, linear-gradient(135deg, #7c3aed 0%, #a855f7 100%));
    color: #fff;
    /* HALO-1k (2026-08-21, Josh: the mark in the message history read as a solid disc):
       this container paints its OWN background - the CTA gradient - so it is the same kind
       of host as .chat-fab, and it has to say so. Without this the halo falls through to
       --theme-gradient-text, which is dark slate on the light themes: a dark ring on an
       indigo disc, i.e. invisible. `color: #fff` above does NOT reach it, because the mark
       sets its own color (HALO-1e) and an ancestor's colour cannot out-specify that - the
       variable is the ONLY channel a host has. Same lesson as HALO-1i, opposite direction:
       there the host had no background and white was wrong; here it has one and white is
       right. The robot is unaffected - it reads currentColor. */
    --nts-halo-ink: #ffffff;
}

.entity-avatar[b-4fcsknod5e] {
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.user-avatar[b-4fcsknod5e] {
    background: #6366f1;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.message-content[b-4fcsknod5e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.message-sender[b-4fcsknod5e] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    padding-left: 4px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.message-actions[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.message-action-btn[b-4fcsknod5e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.15s ease;
}

.message-action-btn:hover[b-4fcsknod5e] {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
    opacity: 1;
}

/* Action separator between reaction and regenerate */
.action-separator[b-4fcsknod5e] {
    width: 1px;
    height: 16px;
    background: rgba(148, 163, 184, 0.3);
    margin: 0 2px;
}

/* Regenerate button */
.regenerate-btn[b-4fcsknod5e] {
    opacity: 0.5;
}

.regenerate-btn:hover[b-4fcsknod5e] {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    opacity: 1;
}

.regenerate-btn.active[b-4fcsknod5e] {
    opacity: 1;
    color: #0ea5e9;
}

.regenerate-btn:disabled[b-4fcsknod5e] {
    cursor: not-allowed;
    opacity: 0.3;
}

/* Spinning animation for regenerate loading */
@keyframes spin-b-4fcsknod5e {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.regenerate-btn .spinning[b-4fcsknod5e] {
    animation: spin-b-4fcsknod5e 1s linear infinite;
}

/* Regeneration count badge in message footer */
.regeneration-badge[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

.message-bubble[b-4fcsknod5e] {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.9375rem;
    line-height: 1.5;
    word-wrap: break-word;
    overflow: visible;
    min-width: 0;
}

.message-bubble:has(.image-message)[b-4fcsknod5e] {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.user-bubble[b-4fcsknod5e] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

/* User message copy button in footer */
.user-copy-btn[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    opacity: 0;
    transition: all 0.15s ease;
}

.message-wrapper.user:hover .user-copy-btn[b-4fcsknod5e],
.user-copy-btn.copied[b-4fcsknod5e] {
    opacity: 1;
}

.user-copy-btn:hover[b-4fcsknod5e] {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.user-copy-btn.copied[b-4fcsknod5e] {
    color: #22c55e;
}

/* BUBBLE-TOKEN-1 (2026-10-02, ticket #1079): the assistant bubble was the one
   piece of the panel with hard-coded light colours. Under an OS-level inversion
   (iOS Smart Invert / Increase Contrast, Chrome force-dark) the white background
   flips while #1e293b text does not - unreadable. Theme tokens flip with the
   surface; the welcome state already uses them. Fallbacks = the old values. */
.assistant-bubble[b-4fcsknod5e] {
    background: var(--theme-surface, white);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-bottom-left-radius: 4px;
}

.message-time[b-4fcsknod5e] {
    font-size: 0.7rem;
    color: #94a3b8;
    padding-left: 4px;
}

.message-text[b-4fcsknod5e] {
    white-space: pre-wrap;
}

/* ASSIST-ACT-1 (2026-09-01): the user's own words when they send text WITH an attached
   image. Sits under the thumbnail, separated from it, and inherits the bubble's colour
   so it reads as part of the same message rather than a caption on the picture. */
.image-caption[b-4fcsknod5e] {
    display: block;
    margin-top: 8px;
}

/* Typing animation cursor */
.typing-cursor[b-4fcsknod5e] {
    display: inline;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    font-weight: 300;
    font-size: 1em;
    animation: cursorBlink-b-4fcsknod5e 0.7s ease-in-out infinite;
    margin-left: 1px;
}

@keyframes cursorBlink-b-4fcsknod5e {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.15; }
}

/* Footer hidden during typing animation */
.footer-hidden[b-4fcsknod5e] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: none;
}

/* Footer slides in after typing completes */
.footer-reveal[b-4fcsknod5e] {
    animation: footerReveal-b-4fcsknod5e 0.5s ease-out;
}

@keyframes footerReveal-b-4fcsknod5e {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Image Message - Full-width prominent display */
/* IMG-D-1 (2026-05): image bubble surface flows through theme primary
   gradient + theme shadow so the "your generated image" frame picks up the
   active theme's accent instead of always being purple. */
.image-message[b-4fcsknod5e] {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #7c3aed) 10%, transparent) 0%,
        color-mix(in srgb, var(--theme-accent, #a855f7) 10%, transparent) 100%);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 4px 24px var(--theme-shadow-color, rgba(0, 0, 0, 0.15));
}

.image-message img[b-4fcsknod5e] {
    width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-message img:hover[b-4fcsknod5e] {
    box-shadow: 0 8px 30px var(--theme-shadow-color, rgba(0, 0, 0, 0.25));
}

/* IMG-D-1: prompt readout flows through surface-secondary so it reads as a
   recessed strip on every theme — not a "10% black" tint that disappears on
   darker theme surfaces. */
.image-prompt[b-4fcsknod5e] {
    padding: 6px 10px;
    background: var(--theme-surface-secondary);
    border-radius: 8px;
    margin-top: 6px;
    font-size: 0.72rem;
}

.prompt-label[b-4fcsknod5e] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 600;
    margin-right: 4px;
}

.prompt-text[b-4fcsknod5e] {
    color: var(--theme-text-primary, #475569);
    font-style: italic;
}

.image-footer[b-4fcsknod5e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 2px 2px;
    gap: 6px;
    flex-wrap: wrap;
}

/* IMG-Hotfix-1 (2026-05): inline notice when the orchestrator fell back from
   the user's picked image model to PrimaryImageModel. Uses the warning token
   ramp so it reads as a heads-up, not an error — the user got an image, just
   not from the model they asked for. Matches the AI-V-8 verification chip
   palette so the affordance graph stays consistent. */
.image-fallback-notice[b-4fcsknod5e] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--theme-text-warning, #f59e0b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-text-warning, #f59e0b) 25%, transparent);
    border-radius: 8px;
    font-size: 0.72rem;
    color: var(--theme-text-secondary, #475569);
    line-height: 1.35;
}

.image-fallback-notice strong[b-4fcsknod5e] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
}

/* AI-D-12 (2026-05): image-attribution chip flows through theme primary so it
   reads correctly across all 8 themes instead of always being purple. */
.image-model-badge[b-4fcsknod5e] {
    font-size: 0.65rem;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    background: color-mix(in srgb, var(--theme-primary, #7c3aed) 10%, transparent);
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* AI-D-13 (2026-05): text-message model attribution chip. Pre-fix this class
   carried zero rules — the badge rendered as default inline text and disappeared
   into dark theme backgrounds. Mirrors .response-time-badge / .credits-badge
   styling but tinted via theme primary. */
.model-badge[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: color-mix(in srgb, var(--theme-primary, #7c3aed) 10%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    white-space: nowrap;
}

.image-actions[b-4fcsknod5e] {
    display: flex;
    gap: 4px;
}

/* IMG-D-1: image-action buttons (copy / download / share / open) flow through
   theme tokens — surface-secondary backplate, theme-primary on hover. */
.image-action[b-4fcsknod5e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: var(--theme-surface-secondary);
    border-radius: 8px;
    cursor: pointer;
    color: var(--theme-text-secondary, #64748b);
    transition: all 0.2s ease;
}

.image-action svg[b-4fcsknod5e] {
    width: 15px;
    height: 15px;
}

.image-action:hover[b-4fcsknod5e] {
    background: color-mix(in srgb, var(--theme-primary, #7c3aed) 15%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 124, 58, 237), 0.2);
}

/* IMG-D-1: image error placeholder uses surface tokens + theme border so the
   "image no longer available" stub reads correctly across themes. */
.image-error-placeholder[b-4fcsknod5e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: var(--theme-surface-secondary);
    border: 2px dashed var(--theme-border);
    border-radius: 12px;
    text-align: center;
    min-width: 300px;
    min-height: 200px;
    gap: 8px;
    color: var(--theme-text-muted, #94a3b8);
}

/* JSON Message */
.json-message[b-4fcsknod5e] {
    background: #1e1e1e;
    border-radius: 8px;
    overflow: hidden;
}

.json-header[b-4fcsknod5e] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #2d2d2d;
    color: #9cdcfe;
    font-size: 0.75rem;
    font-weight: 600;
}

.json-message pre[b-4fcsknod5e] {
    margin: 0;
    padding: 12px;
    overflow-x: auto;
    font-size: 0.8rem;
    line-height: 1.5;
}

.json-message code[b-4fcsknod5e] {
    color: #ce9178;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* ============================================
   AI-V-1 (2026-05): RAG CITATION CHIPS
   Small "Sources: 📄 doc-name" row beneath KB-backed AI replies.
   Quiet visual weight — informational, not interactive (yet).
   All colors flow through theme tokens so light/dark themes
   keep contrast without per-theme overrides.
   ============================================ */

.rag-citations[b-4fcsknod5e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 2px;
    font-size: 0.7rem;
    line-height: 1.3;
}

.rag-citations-label[b-4fcsknod5e] {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.62rem;
}

.rag-citation-chip[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    color: var(--theme-text-secondary, #64748b);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.18);
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 500;
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.rag-citation-chip:hover[b-4fcsknod5e] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.14);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

.rag-citation-more[b-4fcsknod5e] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
    cursor: help;
}

/* ============================================
   POWER UP BUTTON
   ============================================ */

.power-up-bar[b-4fcsknod5e] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px 4px;
}

.power-up-btn[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    color: #7c3aed;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.power-up-btn:hover[b-4fcsknod5e] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
    border-color: rgba(124, 58, 237, 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}

.power-up-btn svg[b-4fcsknod5e] {
    color: #a855f7;
}

.power-up-hint[b-4fcsknod5e] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* Dark theme */
.is-dark .power-up-btn[b-4fcsknod5e] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-color: rgba(168, 85, 247, 0.3);
    color: #c4b5fd;
}

.is-dark .power-up-btn:hover[b-4fcsknod5e] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.35) 0%, rgba(168, 85, 247, 0.3) 100%);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 2px 12px rgba(124, 58, 237, 0.3);
}

.is-dark .power-up-hint[b-4fcsknod5e] {
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */

.is-dark .action-separator[b-4fcsknod5e] {
    background: rgba(255, 255, 255, 0.15);
}

.is-dark .regenerate-btn:hover[b-4fcsknod5e] {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}

.is-dark .regeneration-badge[b-4fcsknod5e] {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}

.is-dark .assistant-bubble[b-4fcsknod5e] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.is-dark .message-sender[b-4fcsknod5e] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .message-time[b-4fcsknod5e] {
    color: rgba(255, 255, 255, 0.5);
}

/* IMG-D-1 (2026-05): image-* dark-theme override block removed — base rules
   for .image-message, .image-prompt, .prompt-label, .prompt-text, .image-action,
   .image-error-placeholder all flow through theme tokens now, so each theme
   paints its own correct surface/text/accent. The override block patched
   symptoms on Space (the original target theme) but left Tron / Nature / Ocean
   clashing. AI-D-12 removed the .image-model-badge override; this closes out
   the rest of the image-bubble graph. */

/* IMG-D-1: .image-action dark override removed — base rule flows through
   --theme-surface-secondary / --theme-text-secondary / --theme-primary, so
   each theme paints correctly. */

/* User Bubble - Theme Specific */
.theme-cloud .user-bubble[b-4fcsknod5e] {
    background: linear-gradient(135deg, #1e3a5f 0%, #3b5998 100%);
}

.theme-space .user-bubble[b-4fcsknod5e] {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
}

.theme-winter .user-bubble[b-4fcsknod5e] {
    background: linear-gradient(135deg, #155e75 0%, #0891b2 100%);
}

.theme-nature .user-bubble[b-4fcsknod5e] {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
}

.theme-ocean .user-bubble[b-4fcsknod5e] {
    background: linear-gradient(135deg, #075985 0%, #0284c7 100%);
}

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

@media (max-width: 768px) {
    .message-wrapper[b-4fcsknod5e] {
        max-width: 92%;
    }

    .avatar-container[b-4fcsknod5e] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .message-bubble[b-4fcsknod5e] {
        padding: 10px 12px;
        font-size: 1rem; /* BUBBLE-TOKEN-1: was 0.875rem */
    }

    .image-message[b-4fcsknod5e] {
        min-width: 0;
        max-width: 100%;
    }

    .image-message img[b-4fcsknod5e] {
        min-height: 200px;
        max-height: 350px;
    }

    .image-error-placeholder[b-4fcsknod5e] {
        min-width: 200px;
        min-height: 150px;
        padding: 20px 16px;
    }

    .json-message pre[b-4fcsknod5e] {
        font-size: 0.7rem;
        max-height: 200px;
    }
}

@media (max-width: 400px) {
    .message-wrapper[b-4fcsknod5e] {
        max-width: 95%;
        gap: 8px;
    }

    .avatar-container[b-4fcsknod5e] {
        width: 28px;
        height: 28px;
    }

    .message-bubble[b-4fcsknod5e] {
        padding: 8px 10px;
        font-size: 1rem; /* BUBBLE-TOKEN-1: was 0.8125rem */
        border-radius: 12px;
    }
}

/* Save Prompt button in message footer */
.save-prompt-btn[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    margin-left: 0.25rem;
}

.save-prompt-btn:hover[b-4fcsknod5e] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35);
}

.is-dark .save-prompt-btn[b-4fcsknod5e] {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.25);
    color: #c4b5fd;
}

.is-dark .save-prompt-btn:hover[b-4fcsknod5e] {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(124, 58, 237, 0.4);
}

/* READ-WAIT-1 (2026-08-21): the read-aloud button's THIRD state — building the
   studio voice. Three dots breathing in sequence rather than a spinner: this is
   the assistant drawing breath, not a system busy-wait, and the distinction is
   the whole point of having a voice at all. */
.message-action-btn.preparing[b-4fcsknod5e] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    opacity: 1;
    cursor: default;
}

.read-prep-dots[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: 14px;
    height: 14px;
    justify-content: center;
}

.read-prep-dots span[b-4fcsknod5e] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    animation: read-prep-breathe-b-4fcsknod5e 1.1s ease-in-out infinite;
}

.read-prep-dots span:nth-child(2)[b-4fcsknod5e] { animation-delay: 0.16s; }
.read-prep-dots span:nth-child(3)[b-4fcsknod5e] { animation-delay: 0.32s; }

@keyframes read-prep-breathe-b-4fcsknod5e {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-2px); }
}

/* TOUR-2 / ASK-LINK-2-retired (2026-08-22): the two OFFERS under a what's-new answer -
   "Hear it" (primary) and "Show me" (secondary). Both are doors the user can ignore.
   The primary carries fill so the eye lands on it first; the secondary is outlined, so
   the pair reads as one choice with a default rather than two competing buttons. */
.answer-offers[b-4fcsknod5e] {
    margin: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;      /* narrow bubbles on a phone stack instead of overflowing */
    gap: 8px;
}

.answer-offer-btn[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--theme-primary, #6366f1);
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.answer-offer-btn:hover[b-4fcsknod5e] {
    background: var(--theme-primary, #6366f1);
    color: #fff;
}

.answer-offer-btn:active[b-4fcsknod5e] {
    transform: scale(0.97);
}

.answer-offer-btn svg[b-4fcsknod5e] {
    flex: 0 0 auto;   /* GOTCHAS #323: an <svg> has min-content width 0 in a flex row */
}

/* The primary door: filled, so "Hear it" wins the glance against "Show me". */
.answer-offer-btn.primary[b-4fcsknod5e] {
    background: var(--theme-primary, #6366f1);
    color: #fff;
}

.answer-offer-btn.primary:hover[b-4fcsknod5e] {
    filter: brightness(1.08);
}

/* While reading, the primary becomes Stop - same button, honest label (READ-WAIT-1's
   lesson: a control with two states cannot describe three, so the third state gets
   its own visible treatment). */
.answer-offer-btn.primary.is-reading[b-4fcsknod5e] {
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.answer-offer-btn:disabled[b-4fcsknod5e] {
    opacity: 0.75;
    cursor: default;
}

@media (prefers-reduced-motion: reduce) {
    .answer-offer-btn[b-4fcsknod5e] {
        transition: none;
    }
}

/* GEM38-3 (2026-09-04): retry-with-another-model chips on a failed reply.
   Deliberately quieter than a CTA — this is a recovery path, not a promotion.
   Cost is always on the chip: switching models spends credits and the user
   should see the price before the click, not after. */
.retry-model-options[b-4fcsknod5e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.retry-model-label[b-4fcsknod5e] {
    font-size: 0.72rem;
    color: var(--theme-text-secondary, #475569);
}

.retry-model-chip[b-4fcsknod5e] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.15);
    background: rgba(15, 23, 42, 0.04);
    color: #1e293b;
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.retry-model-chip:hover[b-4fcsknod5e] {
    border-color: var(--theme-accent-color, #6366f1);
    background: color-mix(in srgb, var(--theme-accent-color, #6366f1) 10%, transparent);
}

.retry-chip-cost[b-4fcsknod5e] {
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
}

/* Slate / dark themes — the light-theme chip was white-on-white here. The house
   pattern in this file is an explicit .is-dark pair (see .power-up-btn), not a
   theme var: --theme-bg-elevated is referenced in three components and defined
   in none, so its #fff fallback was what actually rendered. */
.is-dark .retry-model-label[b-4fcsknod5e] {
    color: rgba(255, 255, 255, 0.55);
}

.is-dark .retry-model-chip[b-4fcsknod5e] {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .retry-model-chip:hover[b-4fcsknod5e] {
    border-color: rgba(168, 85, 247, 0.6);
    background: rgba(124, 58, 237, 0.22);
}
/* /Components/Chat/ChatSidebar.razor.rz.scp.css */
/* ============================================
   CHAT SIDEBAR COMPONENT - Native CSS
   ============================================ */

.conversation-sidebar[b-a3o06hx2ta] {
    width: 300px;
    height: 100%;
    background: white;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    transition: width 0.3s ease, opacity 0.2s ease;
    position: relative;
    z-index: 50;
}

/* When sidebar is closed, hide it completely */
.conversation-sidebar:not(.open)[b-a3o06hx2ta] {
    width: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* When sidebar is open */
.conversation-sidebar.open[b-a3o06hx2ta] {
    width: 300px;
    opacity: 1;
    pointer-events: auto;
}

.sidebar-header[b-a3o06hx2ta] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    background: #f8fafc;
}

.sidebar-title[b-a3o06hx2ta] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* Cloud theme - ensure sidebar title is readable */
:global(.theme-cloud) .sidebar-title[b-a3o06hx2ta] {
    color: #1e293b !important;
}

.sidebar-actions[b-a3o06hx2ta] {
    display: flex;
    gap: 4px;
}

.sidebar-btn[b-a3o06hx2ta] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-btn:hover[b-a3o06hx2ta] {
    background: #f1f5f9;
    color: #1e293b;
}

.sidebar-btn:first-child[b-a3o06hx2ta] {
    color: #7c3aed;
}

.sidebar-btn:first-child:hover[b-a3o06hx2ta] {
    background: rgba(124, 58, 237, 0.1);
}

.sidebar-usage[b-a3o06hx2ta] {
    padding: 14px 16px 16px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* Who's Online Section */
.sidebar-section[b-a3o06hx2ta] {
    border-bottom: 1px solid #e2e8f0;
}

.section-toggle[b-a3o06hx2ta] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.section-toggle:hover[b-a3o06hx2ta] {
    background: #f1f5f9;
    color: #1e293b;
}

.section-toggle .chevron[b-a3o06hx2ta] {
    margin-left: auto;
    transition: transform 0.2s;
}

.section-toggle .chevron.open[b-a3o06hx2ta] {
    transform: rotate(180deg);
}

.online-section-content[b-a3o06hx2ta] {
    padding: 0 8px 12px;
}

/* Compact version of WhosOnlinePanel inside sidebar */
.online-section-content .whos-online-panel[b-a3o06hx2ta] {
    border: none;
    box-shadow: none;
    border-radius: 8px;
    background: #f8fafc;
}

.online-section-content .panel-header[b-a3o06hx2ta] {
    padding: 10px 12px;
}

.online-section-content .panel-content[b-a3o06hx2ta] {
    max-height: 200px;
    padding: 8px;
}

.sidebar-loading[b-a3o06hx2ta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 12px;
    color: #64748b;
    font-size: 0.85rem;
}

.spinner[b-a3o06hx2ta] {
    width: 24px;
    height: 24px;
    border: 3px solid #e2e8f0;
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: spin-b-a3o06hx2ta 1s linear infinite;
}

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

.sidebar-empty[b-a3o06hx2ta] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    flex: 1;
}

.empty-icon[b-a3o06hx2ta] {
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-title[b-a3o06hx2ta] {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 4px;
}

.empty-desc[b-a3o06hx2ta] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.conversation-list[b-a3o06hx2ta] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.conversation-list[b-a3o06hx2ta]::-webkit-scrollbar {
    width: 6px;
}

.conversation-list[b-a3o06hx2ta]::-webkit-scrollbar-track {
    background: transparent;
}

.conversation-list[b-a3o06hx2ta]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.conversation-list[b-a3o06hx2ta]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.conversation-item[b-a3o06hx2ta] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    background: transparent;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.conversation-item:last-child[b-a3o06hx2ta] {
    border-bottom: none;
}

.conversation-item:hover[b-a3o06hx2ta] {
    background: rgba(241, 245, 249, 0.8);
}

.conversation-item.active[b-a3o06hx2ta] {
    background: rgba(124, 58, 237, 0.08);
    border-left: 3px solid #7c3aed;
    padding-left: 11px;
}

.conversation-item.pinned[b-a3o06hx2ta] {
    background: rgba(245, 158, 11, 0.05);
}

.conversation-item.pinned.active[b-a3o06hx2ta] {
    background: rgba(124, 58, 237, 0.08);
    border-left: 3px solid #7c3aed;
}

/* Conversation type icon */
.conversation-icon[b-a3o06hx2ta] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.conversation-icon.image-type[b-a3o06hx2ta] {
    background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
    color: white;
}

.conversation-icon.chat-type[b-a3o06hx2ta] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
}

.conversation-info[b-a3o06hx2ta] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.conversation-header[b-a3o06hx2ta] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pin-icon[b-a3o06hx2ta] {
    color: #f59e0b;
    flex-shrink: 0;
}

.conversation-title[b-a3o06hx2ta] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.conversation-date[b-a3o06hx2ta] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.conversation-actions[b-a3o06hx2ta] {
    position: relative;
    flex-shrink: 0;
}

.menu-btn[b-a3o06hx2ta] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}

.conversation-item:hover .menu-btn[b-a3o06hx2ta] {
    opacity: 1;
}

.menu-btn:hover[b-a3o06hx2ta] {
    background: #e2e8f0;
    color: #64748b;
}

.context-menu[b-a3o06hx2ta] {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 120px;
    overflow: hidden;
}

.menu-item[b-a3o06hx2ta] {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 0.85rem;
    color: #1e293b;
    cursor: pointer;
    transition: background 0.2s ease;
    font-family: inherit;
}

.menu-item:hover[b-a3o06hx2ta] {
    background: #f1f5f9;
}

.menu-item-danger[b-a3o06hx2ta] {
    color: #ef4444;
}

.menu-item-danger:hover[b-a3o06hx2ta] {
    background: rgba(239, 68, 68, 0.1);
}

/* Dark theme support */
/* Dark theme support - NTS theme classes */
.is-dark .conversation-sidebar[b-a3o06hx2ta] {
        background: rgba(30, 41, 59, 0.95);
        border-color: rgba(148, 163, 184, 0.15);
        backdrop-filter: blur(12px);
    }

.is-dark .sidebar-header[b-a3o06hx2ta] {
        border-color: rgba(148, 163, 184, 0.15);
        background: rgba(15, 23, 42, 0.5);
    }

.is-dark .sidebar-title[b-a3o06hx2ta] {
        color: #f1f5f9;
    }

.is-dark .sidebar-btn:hover[b-a3o06hx2ta] {
        background: rgba(148, 163, 184, 0.1);
        color: #f1f5f9;
    }

.is-dark .sidebar-usage[b-a3o06hx2ta] {
        border-color: rgba(148, 163, 184, 0.15);
    }

.is-dark .conversation-item[b-a3o06hx2ta] {
        background: transparent;
        border-bottom-color: rgba(148, 163, 184, 0.15);
    }

.is-dark .conversation-item:hover[b-a3o06hx2ta] {
        background: rgba(148, 163, 184, 0.1);
    }

.is-dark .conversation-item.active[b-a3o06hx2ta] {
        background: rgba(168, 85, 247, 0.15);
        border-left: 3px solid #a855f7;
    }

.is-dark .conversation-item.pinned[b-a3o06hx2ta] {
        background: rgba(245, 158, 11, 0.08);
    }

.is-dark .conversation-item.pinned.active[b-a3o06hx2ta] {
        background: rgba(168, 85, 247, 0.15);
        border-left: 3px solid #a855f7;
    }

.theme-winter .conversation-item.active[b-a3o06hx2ta] {
    background: rgba(56, 189, 248, 0.15);
    border-left-color: #38bdf8;
}

.theme-nature .conversation-item.active[b-a3o06hx2ta] {
    background: rgba(74, 222, 128, 0.15);
    border-left-color: #4ade80;
}

.theme-ocean .conversation-item.active[b-a3o06hx2ta] {
    background: rgba(34, 211, 238, 0.15);
    border-left-color: #22d3ee;
}
    
.is-dark .conversation-title[b-a3o06hx2ta] {
        color: #f1f5f9;
    }
    
.is-dark .conversation-date[b-a3o06hx2ta] {
        color: #94a3b8;
    }
    
.is-dark .context-menu[b-a3o06hx2ta] {
        background: #334155;
        border-color: rgba(148, 163, 184, 0.2);
    }
    
.is-dark .menu-item[b-a3o06hx2ta] {
        color: #f1f5f9;
    }
    
.is-dark .menu-item:hover[b-a3o06hx2ta] {
            background: rgba(148, 163, 184, 0.1);
        }

    /* ============================================
       RESPONSIVE - Mobile Sidebar
       ============================================ */
    @media (max-width: 900px) {
        .conversation-sidebar[b-a3o06hx2ta] {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            z-index: 1000;
            border-radius: 0;
            transform: translateX(-100%);
            width: 85%;
            max-width: 320px;
        }

        .conversation-sidebar.open[b-a3o06hx2ta] {
            transform: translateX(0);
            box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
        }
    }

    @media (max-width: 768px) {
        .conversation-sidebar[b-a3o06hx2ta] {
            height: 100vh;
        }

        .conversation-sidebar:not(.open)[b-a3o06hx2ta] {
            opacity: 1;
        }

        .sidebar-header[b-a3o06hx2ta] {
            background: white;
        }

        .is-dark .sidebar-header[b-a3o06hx2ta] {
            background: rgba(15, 23, 42, 0.95);
        }
    }
/* /Components/Chat/ChatThinkingDisplay.razor.rz.scp.css */
/* ============================================
   CHAT THINKING DISPLAY - Gemini-style
   ============================================ */

.thinking-display[b-7gwf1erl66] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0.5rem 0 0.25rem 3rem;
    max-width: 420px;
    animation: fadeInUp-b-7gwf1erl66 0.25s ease-out;
}

@keyframes fadeInUp-b-7gwf1erl66 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toggle button */
.thinking-toggle[b-7gwf1erl66] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #64748b);
    transition: background 0.15s ease, color 0.15s ease;
    width: fit-content;
}

.thinking-toggle:hover[b-7gwf1erl66] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Sparkle icon */
.thinking-icon[b-7gwf1erl66] {
    font-size: 1rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    display: inline-block;
    line-height: 1;
}

.thinking-icon.spinning[b-7gwf1erl66] {
    animation: sparkle-spin-b-7gwf1erl66 1.5s linear infinite;
}

@keyframes sparkle-spin-b-7gwf1erl66 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Label text */
.thinking-label[b-7gwf1erl66] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}

.thinking-display.active .thinking-label[b-7gwf1erl66] {
    color: var(--theme-text-secondary, #64748b);
}

.thinking-display.complete .thinking-label[b-7gwf1erl66] {
    color: var(--theme-text-muted, #94a3b8);
}

/* Chevron */
.thinking-chevron[b-7gwf1erl66] {
    font-size: 0.625rem;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

/* Expanded step list */
.thinking-steps[b-7gwf1erl66] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.25rem 0 0.25rem 1.75rem;
    border-left: 2px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    margin-left: 0.9375rem;
    animation: fadeInUp-b-7gwf1erl66 0.2s ease-out;
}

.thinking-step[b-7gwf1erl66] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    padding: 0.125rem 0;
    color: var(--theme-text-secondary, #64748b);
}

.thinking-step .step-icon[b-7gwf1erl66] {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.6875rem;
}

.thinking-step.completed .step-icon[b-7gwf1erl66] {
    color: var(--theme-success, #22c55e);
}

.thinking-step.inprogress .step-icon[b-7gwf1erl66] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    animation: pulse-b-7gwf1erl66 1s ease-in-out infinite;
}

.thinking-step.skipped .step-icon[b-7gwf1erl66] {
    color: var(--theme-text-muted, #94a3b8);
}

.thinking-step.skipped .step-label[b-7gwf1erl66] {
    text-decoration: line-through;
    opacity: 0.6;
}

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

/* ============================================
   DARK THEMES
   ============================================ */

.is-dark .thinking-toggle[b-7gwf1erl66] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .thinking-toggle:hover[b-7gwf1erl66] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .thinking-step[b-7gwf1erl66] {
    color: rgba(255, 255, 255, 0.45);
}

.is-dark .thinking-steps[b-7gwf1erl66] {
    border-left-color: rgba(255, 255, 255, 0.1);
}

.is-dark .thinking-display.complete .thinking-label[b-7gwf1erl66] {
    color: rgba(255, 255, 255, 0.35);
}
/* /Components/Chat/ChatTypingIndicator.razor.rz.scp.css */
/* ============================================
   CHAT TYPING INDICATOR - Scoped CSS
   ============================================ */

.typing-indicator[b-xjvoqdeq5j] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 16px 20px;
}

.typing-indicator span[b-xjvoqdeq5j] {
    width: 8px;
    height: 8px;
    background: #7c3aed;
    border-radius: 50%;
    animation: typing-b-xjvoqdeq5j 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1)[b-xjvoqdeq5j] { animation-delay: 0s; }
.typing-indicator span:nth-child(2)[b-xjvoqdeq5j] { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3)[b-xjvoqdeq5j] { animation-delay: 0.4s; }

@keyframes typing-b-xjvoqdeq5j {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* Theme Specific */
.theme-cloud .typing-indicator span[b-xjvoqdeq5j] {
    background: #6366f1;
}

.theme-space .typing-indicator span[b-xjvoqdeq5j] {
    background: #a855f7;
}

.theme-winter .typing-indicator span[b-xjvoqdeq5j] {
    background: #38bdf8;
}

.theme-nature .typing-indicator span[b-xjvoqdeq5j] {
    background: #4ade80;
}

.theme-ocean .typing-indicator span[b-xjvoqdeq5j] {
    background: #22d3ee;
}
/* /Components/Chat/ChatWelcome.razor.rz.scp.css */
/* ============================================
   CHAT WELCOME COMPONENT - Native CSS
   ============================================ */

.welcome-container[b-rgr4ye68jj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.welcome-icon[b-rgr4ye68jj] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(168, 85, 247, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #7c3aed;
}

.welcome-icon svg[b-rgr4ye68jj] {
    width: 32px;
    height: 32px;
}

.welcome-title[b-rgr4ye68jj] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.welcome-subtitle[b-rgr4ye68jj] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

/* Suggestion Grid - Compact 2x2 */
.suggestion-grid[b-rgr4ye68jj] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

.suggestion-card[b-rgr4ye68jj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
}

.suggestion-card:hover[b-rgr4ye68jj] {
    border-color: #a855f7;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
    transform: translateY(-1px);
}

.suggestion-icon[b-rgr4ye68jj] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.suggestion-icon svg[b-rgr4ye68jj] {
    width: 18px;
    height: 18px;
}

.suggestion-icon-primary[b-rgr4ye68jj] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.suggestion-icon-secondary[b-rgr4ye68jj] {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.suggestion-icon-tertiary[b-rgr4ye68jj] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.suggestion-icon-info[b-rgr4ye68jj] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.suggestion-icon-support[b-rgr4ye68jj] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.suggestion-card-support:hover[b-rgr4ye68jj] {
    border-color: #10b981;
}

.suggestion-content[b-rgr4ye68jj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.suggestion-title[b-rgr4ye68jj] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
}

.suggestion-desc[b-rgr4ye68jj] {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive */
@media (max-width: 768px) {
    .suggestion-grid[b-rgr4ye68jj] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .suggestion-card[b-rgr4ye68jj] {
        padding: 12px;
    }

    .welcome-container[b-rgr4ye68jj] {
        padding: 16px 12px;
    }

    .welcome-icon[b-rgr4ye68jj] {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        margin-bottom: 16px;
    }
}

@media (max-width: 400px) {
    .suggestion-card[b-rgr4ye68jj] {
        padding: 10px;
    }

    .suggestion-title[b-rgr4ye68jj] {
        font-size: 0.8rem;
    }

    .suggestion-desc[b-rgr4ye68jj] {
        font-size: 0.7rem;
    }
}

/* Suggestion Hint */
.suggestion-hint[b-rgr4ye68jj] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 12px 0 0 0;
    font-style: italic;
}

/* Dark theme support */
.theme-space .welcome-icon[b-rgr4ye68jj],
.theme-winter .welcome-icon[b-rgr4ye68jj],
.theme-nature .welcome-icon[b-rgr4ye68jj],
.theme-ocean .welcome-icon[b-rgr4ye68jj] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(124, 58, 237, 0.15) 100%);
    color: #c4b5fd;
}

.theme-space .welcome-title[b-rgr4ye68jj],
.theme-winter .welcome-title[b-rgr4ye68jj],
.theme-nature .welcome-title[b-rgr4ye68jj],
.theme-ocean .welcome-title[b-rgr4ye68jj] {
    color: #f1f5f9;
}

.theme-space .welcome-subtitle[b-rgr4ye68jj],
.theme-winter .welcome-subtitle[b-rgr4ye68jj],
.theme-nature .welcome-subtitle[b-rgr4ye68jj],
.theme-ocean .welcome-subtitle[b-rgr4ye68jj] {
    color: #94a3b8;
}

.theme-space .suggestion-card[b-rgr4ye68jj],
.theme-winter .suggestion-card[b-rgr4ye68jj],
.theme-nature .suggestion-card[b-rgr4ye68jj],
.theme-ocean .suggestion-card[b-rgr4ye68jj] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.2);
}

.theme-space .suggestion-card:hover[b-rgr4ye68jj],
.theme-winter .suggestion-card:hover[b-rgr4ye68jj],
.theme-nature .suggestion-card:hover[b-rgr4ye68jj],
.theme-ocean .suggestion-card:hover[b-rgr4ye68jj] {
    border-color: #a855f7;
    background: rgba(30, 41, 59, 0.85);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.2);
}

.theme-space .suggestion-title[b-rgr4ye68jj],
.theme-winter .suggestion-title[b-rgr4ye68jj],
.theme-nature .suggestion-title[b-rgr4ye68jj],
.theme-ocean .suggestion-title[b-rgr4ye68jj] {
    color: #f1f5f9;
}

.theme-space .suggestion-desc[b-rgr4ye68jj],
.theme-winter .suggestion-desc[b-rgr4ye68jj],
.theme-nature .suggestion-desc[b-rgr4ye68jj],
.theme-ocean .suggestion-desc[b-rgr4ye68jj] {
    color: #94a3b8;
}

/* Cloud theme support - Enhanced Readability */
.theme-cloud .welcome-icon[b-rgr4ye68jj] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.12) 100%);
    color: #2563eb;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.15);
}

.theme-cloud .welcome-title[b-rgr4ye68jj] {
    color: #1e293b;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.theme-cloud .welcome-subtitle[b-rgr4ye68jj] {
    color: #374151;
    font-weight: 500;
}

.theme-cloud .suggestion-card[b-rgr4ye68jj] {
    background: #ffffff;
    border: 1px solid rgba(30, 58, 95, 0.2);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

.theme-cloud .suggestion-card:hover[b-rgr4ye68jj] {
    border-color: #3b82f6;
    background: #ffffff;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2);
    transform: translateY(-2px);
}

.theme-cloud .suggestion-title[b-rgr4ye68jj] {
    color: #1e293b;
    font-weight: 600;
}

.theme-cloud .suggestion-desc[b-rgr4ye68jj] {
    color: #4b5563;
}

.theme-cloud .suggestion-icon-primary[b-rgr4ye68jj] {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
}

.theme-cloud .suggestion-icon-secondary[b-rgr4ye68jj] {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.theme-cloud .suggestion-icon-tertiary[b-rgr4ye68jj] {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.theme-cloud .suggestion-icon-support[b-rgr4ye68jj] {
    background: rgba(16, 185, 129, 0.15);
    color: #047857;
}

.theme-cloud .suggestion-hint[b-rgr4ye68jj] {
    color: #4b5563;
    font-weight: 500;
}

.theme-space .suggestion-hint[b-rgr4ye68jj],
.theme-winter .suggestion-hint[b-rgr4ye68jj],
.theme-nature .suggestion-hint[b-rgr4ye68jj],
.theme-ocean .suggestion-hint[b-rgr4ye68jj] {
    color: #94a3b8;
}

/* ============================================
   🔮 MYSTIC THEME - Enhanced Readability
   ============================================ */
.theme-mystic .welcome-icon[b-rgr4ye68jj] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.25) 0%, rgba(124, 58, 237, 0.2) 100%);
    color: #f97316;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.3);
}

.theme-mystic .welcome-title[b-rgr4ye68jj] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #faf5ff;
    text-shadow: 0 2px 16px rgba(249, 115, 22, 0.4), 0 0 40px rgba(124, 58, 237, 0.3);
}

.theme-mystic .welcome-subtitle[b-rgr4ye68jj] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e9d5ff;
    text-shadow: 0 1px 8px transparent;
}

.theme-mystic .suggestion-card[b-rgr4ye68jj] {
    background: rgba(45, 27, 78, 0.8);
    border: 1px solid rgba(124, 58, 237, 0.3);
    box-shadow: 0 4px 16px transparent;
}

.theme-mystic .suggestion-card:hover[b-rgr4ye68jj] {
    border-color: #f97316;
    background: rgba(60, 35, 100, 0.9);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.25);
    transform: translateY(-2px);
}

.theme-mystic .suggestion-title[b-rgr4ye68jj] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #faf5ff;
    text-shadow: 0 1px 4px transparent;
}

.theme-mystic .suggestion-desc[b-rgr4ye68jj] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #c4b5fd;
}

.theme-mystic .suggestion-icon-primary[b-rgr4ye68jj] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.theme-mystic .suggestion-icon-secondary[b-rgr4ye68jj] {
    background: rgba(249, 115, 22, 0.2);
    color: #fb923c;
}

.theme-mystic .suggestion-icon-tertiary[b-rgr4ye68jj] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.theme-mystic .suggestion-icon-info[b-rgr4ye68jj] {
    background: rgba(56, 189, 248, 0.2);
    color: #7dd3fc;
}

.theme-mystic .suggestion-icon-support[b-rgr4ye68jj] {
    background: rgba(52, 211, 153, 0.2);
    color: #6ee7b7;
}

.theme-mystic .suggestion-hint[b-rgr4ye68jj] {
    color: #a78bfa;
    text-shadow: 0 1px 4px transparent;
}
/* /Components/Chat/CompanionAvatar.razor.rz.scp.css */
/* Companion Avatar - Animated Face */

.companion-avatar[b-lflq9ax8l0] {
    --avatar-size: 48px;
    --primary-color: #6366f1;
    --glow-color: rgba(99, 102, 241, 0.4);
    --eye-color: #1e293b;
    width: var(--avatar-size);
    height: var(--avatar-size);
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

.avatar-container[b-lflq9ax8l0] {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Glow effect */
.avatar-glow[b-lflq9ax8l0] {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow-b-lflq9ax8l0 3s ease-in-out infinite;
    pointer-events: none;
    display: none; /* Hidden by default — only shown on large/interactive */
}

/* Show glow only on large and interactive avatars where there's room */
.size-large .avatar-glow[b-lflq9ax8l0],
.is-interactive .avatar-glow[b-lflq9ax8l0] {
    display: block;
}

@keyframes pulse-glow-b-lflq9ax8l0 {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* The face container */
.avatar-face[b-lflq9ax8l0] {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), #818cf8);
    border-radius: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite;
    /* Smooth color morph when transitioning from egg to face */
    transition: background 1.2s ease, box-shadow 1.2s ease;
}

/* =============================================
   EGG MODE — plain glowing orb, no face
   ============================================= */
.is-egg .avatar-face[b-lflq9ax8l0] {
    background: radial-gradient(circle at 35% 35%,
        rgba(251, 191, 36, 0.9) 0%,
        rgba(245, 158, 11, 0.8) 40%,
        rgba(217, 119, 6, 0.7) 100%);
    box-shadow:
        0 4px 16px rgba(251, 191, 36, 0.3),
        inset 0 -4px 8px rgba(180, 83, 9, 0.2),
        inset 0 2px 6px rgba(255, 255, 255, 0.3);
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, egg-heartbeat-b-lflq9ax8l0 2s ease-in-out infinite;
}

.is-egg .avatar-glow[b-lflq9ax8l0] {
    --glow-color: rgba(251, 191, 36, 0.4);
    animation: pulse-glow-b-lflq9ax8l0 2.5s ease-in-out infinite;
}

/* Heartbeat — makes the egg feel alive */
@keyframes egg-heartbeat-b-lflq9ax8l0 {
    0%, 100% { box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3), inset 0 -4px 8px rgba(180, 83, 9, 0.2), inset 0 2px 6px rgba(255, 255, 255, 0.3); }
    15% { box-shadow: 0 4px 28px rgba(251, 191, 36, 0.55), inset 0 -4px 8px rgba(180, 83, 9, 0.2), inset 0 2px 10px rgba(255, 255, 255, 0.5); }
    25% { box-shadow: 0 4px 16px rgba(251, 191, 36, 0.3), inset 0 -4px 8px rgba(180, 83, 9, 0.2), inset 0 2px 6px rgba(255, 255, 255, 0.3); }
    35% { box-shadow: 0 4px 22px rgba(251, 191, 36, 0.45), inset 0 -4px 8px rgba(180, 83, 9, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.4); }
}

/* Eyes and mouth fade in when hatching */
.companion-avatar:not(.is-egg) .eyes[b-lflq9ax8l0],
.companion-avatar:not(.is-egg) .mouth[b-lflq9ax8l0] {
    animation: face-features-appear-b-lflq9ax8l0 0.8s ease both;
}

@keyframes face-features-appear-b-lflq9ax8l0 {
    from { opacity: 0; transform: scale(0.5); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes float-b-lflq9ax8l0 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Eyes container */
.eyes[b-lflq9ax8l0] {
    display: flex;
    gap: 8px;
    margin-top: -4px;
}

.eye[b-lflq9ax8l0] {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    position: relative;
    animation: blink-b-lflq9ax8l0 4s ease-in-out infinite;
}

.eye .pupil[b-lflq9ax8l0] {
    width: 5px;
    height: 5px;
    background: var(--eye-color);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: look-around-b-lflq9ax8l0 8s ease-in-out infinite;
}

.eye .highlight[b-lflq9ax8l0] {
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 2px;
}

@keyframes blink-b-lflq9ax8l0 {
    0%, 48%, 52%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

@keyframes look-around-b-lflq9ax8l0 {
    0%, 100% { transform: translate(-50%, -50%); }
    25% { transform: translate(-30%, -50%); }
    50% { transform: translate(-50%, -50%); }
    75% { transform: translate(-70%, -50%); }
}

/* Mouth variations */
.mouth[b-lflq9ax8l0] {
    width: 12px;
    height: 6px;
    margin-top: 4px;
    position: relative;
}

.mouth-neutral[b-lflq9ax8l0] {
    background: transparent;
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 0 0 6px 6px;
}

.mouth-smile[b-lflq9ax8l0] {
    background: transparent;
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 0 0 10px 10px;
    width: 14px;
    height: 8px;
}

.mouth-open[b-lflq9ax8l0] {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
}

.mouth-o[b-lflq9ax8l0] {
    width: 6px;
    height: 6px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 50%;
}

.mouth-wide[b-lflq9ax8l0] {
    width: 14px;
    height: 8px;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 0 0 10px 10px;
}

.mouth-speaking[b-lflq9ax8l0] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 10px;
    background: transparent;
}

.speaking-bars[b-lflq9ax8l0] {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 100%;
}

.speaking-bars span[b-lflq9ax8l0] {
    width: 3px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1px;
    animation: speak-bar-b-lflq9ax8l0 0.4s ease-in-out infinite;
}

.speaking-bars span:nth-child(1)[b-lflq9ax8l0] { animation-delay: 0s; }
.speaking-bars span:nth-child(2)[b-lflq9ax8l0] { animation-delay: 0.1s; }
.speaking-bars span:nth-child(3)[b-lflq9ax8l0] { animation-delay: 0.2s; }

@keyframes speak-bar-b-lflq9ax8l0 {
    0%, 100% { height: 3px; }
    50% { height: 8px; }
}

/* State-specific animations */
.is-listening .avatar-face[b-lflq9ax8l0] {
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, pulse-listen-b-lflq9ax8l0 1s ease-in-out infinite;
}

@keyframes pulse-listen-b-lflq9ax8l0 {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4); }
}

.listening-waves[b-lflq9ax8l0] {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.listening-waves span[b-lflq9ax8l0] {
    width: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    animation: wave-b-lflq9ax8l0 1s ease-in-out infinite;
}

.listening-waves span:nth-child(1)[b-lflq9ax8l0] { height: 6px; animation-delay: 0s; }
.listening-waves span:nth-child(2)[b-lflq9ax8l0] { height: 10px; animation-delay: 0.15s; }
.listening-waves span:nth-child(3)[b-lflq9ax8l0] { height: 6px; animation-delay: 0.3s; }

@keyframes wave-b-lflq9ax8l0 {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

.is-thinking .avatar-face[b-lflq9ax8l0] {
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, think-b-lflq9ax8l0 1.5s ease-in-out infinite;
}

@keyframes think-b-lflq9ax8l0 {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-2px) rotate(-2deg); }
    75% { transform: translateY(-2px) rotate(2deg); }
}

.is-thinking .eye .pupil[b-lflq9ax8l0] {
    animation: think-look-b-lflq9ax8l0 1.5s ease-in-out infinite;
}

@keyframes think-look-b-lflq9ax8l0 {
    0%, 100% { transform: translate(-50%, -60%); }
    50% { transform: translate(-30%, -60%); }
}

.thinking-sparkles[b-lflq9ax8l0] {
    position: absolute;
    top: -10px;
    right: -5px;
    display: flex;
    gap: 2px;
    font-size: 10px;
}

.thinking-sparkles span[b-lflq9ax8l0] {
    animation: sparkle-b-lflq9ax8l0 1s ease-in-out infinite;
}

.thinking-sparkles span:nth-child(1)[b-lflq9ax8l0] { animation-delay: 0s; }
.thinking-sparkles span:nth-child(2)[b-lflq9ax8l0] { animation-delay: 0.3s; }
.thinking-sparkles span:nth-child(3)[b-lflq9ax8l0] { animation-delay: 0.6s; }

@keyframes sparkle-b-lflq9ax8l0 {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

.is-speaking .avatar-face[b-lflq9ax8l0] {
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, speak-bounce-b-lflq9ax8l0 0.3s ease-in-out infinite;
}

@keyframes speak-bounce-b-lflq9ax8l0 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/* Stage-based color themes */
.stage-spark[b-lflq9ax8l0] {
    --primary-color: #818cf8;
    --glow-color: rgba(129, 140, 248, 0.3);
}

.stage-pulse[b-lflq9ax8l0] {
    --primary-color: #6366f1;
    --glow-color: rgba(99, 102, 241, 0.4);
}

.stage-nova[b-lflq9ax8l0] {
    --primary-color: #f59e0b;
    --glow-color: rgba(245, 158, 11, 0.4);
}

.stage-zenith[b-lflq9ax8l0] {
    --primary-color: #ec4899;
    --glow-color: rgba(236, 72, 153, 0.4);
}

.stage-ascendant[b-lflq9ax8l0] {
    --primary-color: #ef4444;
    --glow-color: rgba(239, 68, 68, 0.5);
}

.stage-ascendant .avatar-face[b-lflq9ax8l0] {
    background: linear-gradient(135deg, #ef4444, #f97316, #ef4444);
    background-size: 200% 200%;
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, fire-gradient-b-lflq9ax8l0 2s ease infinite;
}

@keyframes fire-gradient-b-lflq9ax8l0 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stage-transcendent[b-lflq9ax8l0] {
    --primary-color: #06b6d4;
    --glow-color: rgba(6, 182, 212, 0.5);
}

.stage-transcendent .avatar-face[b-lflq9ax8l0] {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6, #06b6d4);
    background-size: 200% 200%;
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, crystal-shimmer-b-lflq9ax8l0 3s ease infinite;
}

@keyframes crystal-shimmer-b-lflq9ax8l0 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.stage-legendary[b-lflq9ax8l0] {
    --primary-color: #fbbf24;
    --glow-color: rgba(251, 191, 36, 0.6);
}

.stage-legendary .avatar-face[b-lflq9ax8l0] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #fbbf24);
    background-size: 200% 200%;
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, legendary-pulse-b-lflq9ax8l0 2s ease infinite;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

@keyframes legendary-pulse-b-lflq9ax8l0 {
    0%, 100% { 
        background-position: 0% 50%; 
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
    }
    50% { 
        background-position: 100% 50%; 
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.8);
    }
}

/* Mood variations */
.mood-happy .eye[b-lflq9ax8l0] {
    transform: scaleY(0.8);
    border-radius: 50% 50% 40% 40%;
}

.mood-excited .avatar-face[b-lflq9ax8l0] {
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, excited-bounce-b-lflq9ax8l0 0.5s ease-in-out infinite;
}

@keyframes excited-bounce-b-lflq9ax8l0 {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-3deg); }
    75% { transform: translateY(-3px) rotate(3deg); }
}

.mood-curious .eye .pupil[b-lflq9ax8l0] {
    width: 6px;
    height: 6px;
}

.mood-curious .eye.left .pupil[b-lflq9ax8l0] {
    transform: translate(-30%, -50%);
}

.mood-sleepy .eye[b-lflq9ax8l0] {
    transform: scaleY(0.5);
}

.mood-sleepy .avatar-face[b-lflq9ax8l0] {
    animation: sleepy-bob-b-lflq9ax8l0 5s ease-in-out infinite;
}

@keyframes sleepy-bob-b-lflq9ax8l0 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

/* =============================================
   INTERACTIVE MODE — clickable, alive feel
   ============================================= */
.companion-avatar.is-interactive[b-lflq9ax8l0] {
    cursor: pointer;
    outline: none;
    overflow: visible; /* Allow sparkles/waves/glow on interactive avatars */
}

/* Subtle breathing animation at rest — feels alive */
.companion-avatar.is-interactive .avatar-face[b-lflq9ax8l0] {
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, breathe-b-lflq9ax8l0 3s ease-in-out infinite;
}

@keyframes breathe-b-lflq9ax8l0 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* Hover: gentle bounce + brighter glow */
.companion-avatar.is-interactive:hover .avatar-face[b-lflq9ax8l0] {
    animation: float-b-lflq9ax8l0 4s ease-in-out infinite, hover-bounce-b-lflq9ax8l0 0.6s ease-in-out infinite;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);
}

.companion-avatar.is-interactive:hover .avatar-glow[b-lflq9ax8l0] {
    opacity: 1;
    transform: scale(1.25);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Eyes track toward viewer on hover */
.companion-avatar.is-interactive:hover .eye .pupil[b-lflq9ax8l0] {
    animation: none;
    transform: translate(-50%, -55%) scale(1.15);
    transition: transform 0.3s ease;
}

/* Mouth smiles on hover */
.companion-avatar.is-interactive:hover .mouth[b-lflq9ax8l0] {
    border-bottom: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 0 0 10px 10px;
    width: 14px;
    height: 8px;
    transition: all 0.3s ease;
}

@keyframes hover-bounce-b-lflq9ax8l0 {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-4px) scale(1.06); }
    60% { transform: translateY(-1px) scale(1.02); }
}

/* Focus ring for accessibility */
.companion-avatar.is-interactive:focus-visible .avatar-face[b-lflq9ax8l0] {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
    border-radius: 50%;
}

/* Active press — squish */
.companion-avatar.is-interactive:active .avatar-face[b-lflq9ax8l0] {
    transform: scale(0.93);
    transition: transform 0.1s ease;
}

/* Responsive sizing */
.companion-avatar.size-small[b-lflq9ax8l0] {
    --avatar-size: 32px;
}

.companion-avatar.size-small .avatar-face[b-lflq9ax8l0] {
    animation: none; /* No float animation at small size — keeps it clean */
}

.companion-avatar.size-small .eyes[b-lflq9ax8l0] {
    gap: 5px;
    margin-top: -2px;
}

.companion-avatar.size-small .eye[b-lflq9ax8l0] {
    width: 7px;
    height: 7px;
    animation: none; /* No blinking — static icon in message bubbles */
}

.companion-avatar.size-small .eye .pupil[b-lflq9ax8l0] {
    width: 3px;
    height: 3px;
    animation: none; /* No looking around — static at center */
}

.companion-avatar.size-small .mouth[b-lflq9ax8l0] {
    width: 8px;
    height: 4px;
    margin-top: 2px;
}

.companion-avatar.size-large[b-lflq9ax8l0] {
    --avatar-size: 80px;
    overflow: visible; /* Allow sparkles/waves to show on large avatars */
}

.companion-avatar.size-large .eyes[b-lflq9ax8l0] {
    gap: 16px;
}

.companion-avatar.size-large .eye[b-lflq9ax8l0] {
    width: 16px;
    height: 16px;
}

.companion-avatar.size-large .eye .pupil[b-lflq9ax8l0] {
    width: 8px;
    height: 8px;
}

.companion-avatar.size-large .mouth[b-lflq9ax8l0] {
    width: 20px;
    height: 10px;
    margin-top: 8px;
}

/* =============================================
   PARALLAX AURA — cursor-following depth
   The avatar-glow slightly offsets against the viewport cursor so
   the companion reads as a 3D entity with depth, not a 2D sticker.
   Parent components set --cursor-offset-x / --cursor-offset-y as a
   normalized [-1,1] value; the transform below scales it to pixels.
   Falls back to centered when no parent provides the values.
   ============================================= */
.companion-avatar[b-lflq9ax8l0] {
    --cursor-offset-x: 0;
    --cursor-offset-y: 0;
}

.companion-avatar.is-interactive .avatar-glow[b-lflq9ax8l0] {
    transform:
        translate(
            calc(var(--cursor-offset-x) * 4px),
            calc(var(--cursor-offset-y) * 4px)
        );
    transition: transform 0.25s ease-out;
}

/* Hover enlarges the glow; combine with cursor-driven translate so
   the parallax continues during hover. */
.companion-avatar.is-interactive:hover .avatar-glow[b-lflq9ax8l0] {
    transform:
        translate(
            calc(var(--cursor-offset-x) * 6px),
            calc(var(--cursor-offset-y) * 6px)
        )
        scale(1.25);
}

/* =============================================
   REDUCED MOTION — accessibility gate
   Honors the OS-level prefers-reduced-motion request. Kills the
   always-on animations (float, breathe, pulse-glow, blink scan,
   fire-gradient, crystal-shimmer, legendary-pulse) while keeping
   color/tier identity so the avatar still reads as its stage.
   Event-driven animations (hover, active, evolution) are kept —
   they're meaningful feedback, not ambient motion.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .companion-avatar .avatar-face[b-lflq9ax8l0],
    .companion-avatar.is-interactive .avatar-face[b-lflq9ax8l0],
    .is-listening .avatar-face[b-lflq9ax8l0],
    .is-thinking .avatar-face[b-lflq9ax8l0],
    .is-speaking .avatar-face[b-lflq9ax8l0],
    .mood-excited .avatar-face[b-lflq9ax8l0],
    .mood-sleepy .avatar-face[b-lflq9ax8l0],
    .is-egg .avatar-face[b-lflq9ax8l0],
    .stage-ascendant .avatar-face[b-lflq9ax8l0],
    .stage-transcendent .avatar-face[b-lflq9ax8l0],
    .stage-legendary .avatar-face[b-lflq9ax8l0] {
        animation: none !important;
    }

    .companion-avatar .avatar-glow[b-lflq9ax8l0] {
        animation: none !important;
        opacity: 0.6;
    }

    .companion-avatar .eye[b-lflq9ax8l0],
    .companion-avatar .eye .pupil[b-lflq9ax8l0] {
        animation: none !important;
    }

    .companion-avatar .listening-waves span[b-lflq9ax8l0],
    .companion-avatar .thinking-sparkles span[b-lflq9ax8l0],
    .companion-avatar .speaking-bars span[b-lflq9ax8l0],
    .companion-avatar .is-thinking .eye .pupil[b-lflq9ax8l0] {
        animation: none !important;
    }

    /* Preserve focus indicator — accessibility over aesthetics */
    .companion-avatar.is-interactive:focus-visible .avatar-face[b-lflq9ax8l0] {
        outline: 2px solid var(--primary-color);
        outline-offset: 4px;
    }

    /* Drop parallax transitions — keep the avatar pinned */
    .companion-avatar.is-interactive .avatar-glow[b-lflq9ax8l0],
    .companion-avatar.is-interactive:hover .avatar-glow[b-lflq9ax8l0] {
        transition: none;
    }
}
/* /Components/Chat/CompanionChatDialog.razor.rz.scp.css */
/* CompanionChatDialog — focused companion conversation modal
   Theme-aware via CSS variables — zero dark overrides */

.companion-chat-overlay[b-e0q9z4dkel] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
    z-index: 1200;
    animation: companion-overlay-in-b-e0q9z4dkel 0.25s ease;
}

@keyframes companion-overlay-in-b-e0q9z4dkel {
    from { opacity: 0; }
    to { opacity: 1; }
}

.companion-chat-dialog[b-e0q9z4dkel] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    box-shadow: 0 16px 48px var(--theme-shadow-color, rgba(0, 0, 0, 0.18));
    border: 1px solid var(--theme-border, transparent);
    width: 400px;
    max-width: calc(100vw - 48px);
    height: 520px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    z-index: 1201;
    animation: companion-dialog-in-b-e0q9z4dkel 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}

/* CHAT-RESIZE-1 (2026-07-22): drag grip for the companion chat dialog.
   Dialog is position:fixed (its own positioning context) and anchored
   bottom-right; grip sits on the left edge below the ~60px header (the
   corner is owned by the peek orb). Dragging up/left grows the dialog.
   Behavior + persistence: js/chatResize.js (key nts-companion-chat-size). */
.chat-resize-handle[b-e0q9z4dkel] {
    position: absolute;
    top: 64px;
    left: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted, #94a3b8);
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    cursor: nwse-resize;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 3;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.companion-chat-dialog:hover .chat-resize-handle[b-e0q9z4dkel],
.companion-chat-dialog:focus-within .chat-resize-handle[b-e0q9z4dkel],
body.nts-chat-resizing .chat-resize-handle[b-e0q9z4dkel] {
    opacity: 0.75;
    transform: scale(1);
}

.chat-resize-handle:hover[b-e0q9z4dkel] {
    opacity: 1;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.chat-resize-handle svg[b-e0q9z4dkel] { pointer-events: none; display: block; }

@keyframes companion-dialog-in-b-e0q9z4dkel {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Companion peeking avatar — outside the dialog, top-left corner */
.companion-dialog-peek[b-e0q9z4dkel] {
    position: absolute;
    top: -28px;
    left: -16px;
    z-index: 1202;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    pointer-events: none;
    animation: companionPeekIn-b-e0q9z4dkel 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
               companionIdleFloat-b-e0q9z4dkel 3s ease-in-out 0.5s infinite;
}

@keyframes companionPeekIn-b-e0q9z4dkel {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.6) rotate(-12deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.05) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

@keyframes companionIdleFloat-b-e0q9z4dkel {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Header */
.companion-chat-header[b-e0q9z4dkel] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 10px 52px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 99, 102, 241), 0.05), rgba(var(--theme-accent-rgb, 139, 92, 246), 0.05));
    border-radius: 16px 16px 0 0;
}

.companion-header-left[b-e0q9z4dkel] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.companion-header-info[b-e0q9z4dkel] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.companion-header-name[b-e0q9z4dkel] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.3;
}

.companion-header-stage[b-e0q9z4dkel] {
    font-size: 0.72rem;
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 500;
}

.companion-profile-link[b-e0q9z4dkel] {
    font-size: 0.68rem;
    color: var(--theme-text-muted, #94a3b8);
    text-decoration: none;
    transition: color 0.2s;
    margin-top: 1px;
}

.companion-profile-link:hover[b-e0q9z4dkel] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.companion-close-btn[b-e0q9z4dkel] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.companion-close-btn:hover[b-e0q9z4dkel] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #334155);
}

/* Messages area */
.companion-chat-messages[b-e0q9z4dkel] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.companion-chat-messages[b-e0q9z4dkel]::-webkit-scrollbar {
    width: 8px;
}

.companion-chat-messages[b-e0q9z4dkel]::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.companion-chat-messages[b-e0q9z4dkel]::-webkit-scrollbar-thumb {
    background: var(--theme-border, rgba(148, 163, 184, 0.4));
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.companion-chat-messages[b-e0q9z4dkel]::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted, rgba(148, 163, 184, 0.6));
    border: 2px solid transparent;
    background-clip: padding-box;
}

.companion-msg[b-e0q9z4dkel] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    animation: companion-msg-in-b-e0q9z4dkel 0.3s ease;
}

@keyframes companion-msg-in-b-e0q9z4dkel {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.companion-msg-user[b-e0q9z4dkel] {
    justify-content: flex-end;
}

.companion-msg-ai[b-e0q9z4dkel] {
    justify-content: flex-start;
}

.companion-msg-avatar-mini[b-e0q9z4dkel] {
    flex-shrink: 0;
    margin-top: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.companion-msg-bubble[b-e0q9z4dkel] {
    max-width: 80%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.companion-msg-content[b-e0q9z4dkel] {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.companion-msg-content .companion-msg-bubble[b-e0q9z4dkel] {
    max-width: 100%;
}

.companion-msg-user .companion-msg-bubble[b-e0q9z4dkel] {
    background: var(--theme-primary, #6366f1);
    color: white;
    border-bottom-right-radius: 4px;
}

.companion-msg-ai .companion-msg-bubble[b-e0q9z4dkel] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
    border-bottom-left-radius: 4px;
}

/* Feedback rating buttons */
.companion-msg-feedback[b-e0q9z4dkel] {
    display: flex;
    gap: 2px;
    padding-top: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.companion-msg:hover .companion-msg-feedback[b-e0q9z4dkel],
.companion-msg-feedback:has(.active)[b-e0q9z4dkel] {
    opacity: 1;
}

.feedback-btn[b-e0q9z4dkel] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.feedback-btn:hover[b-e0q9z4dkel] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.feedback-btn.active[b-e0q9z4dkel] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.feedback-btn.negative:hover[b-e0q9z4dkel] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--theme-text-danger, #ef4444);
}

.feedback-btn.negative.active[b-e0q9z4dkel] {
    color: var(--theme-text-danger, #ef4444);
    background: rgba(239, 68, 68, 0.12);
}

/* Typing indicator */
.companion-typing[b-e0q9z4dkel] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
}

.typing-dot[b-e0q9z4dkel] {
    width: 6px;
    height: 6px;
    background: var(--theme-text-muted, #94a3b8);
    border-radius: 50%;
    animation: typing-bounce-b-e0q9z4dkel 1.2s ease-in-out infinite;
}

.typing-dot:nth-child(2)[b-e0q9z4dkel] { animation-delay: 0.15s; }
.typing-dot:nth-child(3)[b-e0q9z4dkel] { animation-delay: 0.3s; }

@keyframes typing-bounce-b-e0q9z4dkel {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Input area */
.companion-chat-input-area[b-e0q9z4dkel] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface-secondary, #fafbfc);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
}

.companion-chat-input[b-e0q9z4dkel] {
    flex: 1;
    border: 1px solid var(--theme-input-border, #e2e8f0) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem;
    background: var(--theme-input-bg, white) !important;
    color: var(--theme-input-text, #1e293b);
    transition: border-color 0.2s ease;
}

.companion-chat-input:focus[b-e0q9z4dkel] {
    border-color: var(--theme-input-focus, #6366f1) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.companion-send-btn[b-e0q9z4dkel] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .companion-chat-dialog[b-e0q9z4dkel] {
        bottom: 12px;
        right: 12px;
        left: 12px;
        width: auto;
        max-width: none;
        height: calc(100vh - 100px);
        max-height: none;
    }

    .companion-dialog-peek[b-e0q9z4dkel] {
        top: -24px;
        left: -8px;
        width: 56px;
        height: 56px;
    }

    .companion-chat-header[b-e0q9z4dkel] {
        padding-left: 44px;
    }
}

/* Dark theme glow on peeking companion */
.is-dark .companion-dialog-peek[b-e0q9z4dkel] {
    filter: drop-shadow(0 4px 16px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35));
}

/* Dark theme dialog border glow — matches floating chat */
.is-dark .companion-chat-dialog[b-e0q9z4dkel] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25),
                0 0 24px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}
/* /Components/Chat/CompanionEntity.razor.rz.scp.css */
.companion-entity[b-3u8pje5bnb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Allow the energy field to bleed beyond the logical size box */
    overflow: visible;
}

.companion-entity-canvas[b-3u8pje5bnb] {
    display: block;
    /* NO border-radius — energy must bleed beyond the core circle.
       The canvas is 1.6x the logical size to give particles/wisps/glow room. */
}

/* Size variants — these set the LOGICAL size of the companion.
   The canvas itself renders at 1.6x this size via JS for bleed room,
   then negative margins reclaim the space so layout isn't affected. */
.entity-mini[b-3u8pje5bnb] {
    width: 40px;
    height: 40px;
}

.entity-tiny[b-3u8pje5bnb] {
    width: 56px;
    height: 56px;
}

.entity-small[b-3u8pje5bnb] {
    width: 120px;
    height: 120px;
}

.entity-normal[b-3u8pje5bnb] {
    width: 80px;
    height: 80px;
}

.entity-large[b-3u8pje5bnb] {
    width: 160px;
    height: 160px;
}

.entity-hero[b-3u8pje5bnb] {
    width: 240px;
    height: 240px;
}

/* ============================================
   PEEK MODE — mobile-only adjustments for the
   CompanionEntity when it's rendered inside
   .companion-peek-avatar (the button that sits
   on top-left of Assistant.razor's floating
   chat dialog).

   These rules live in this file (not
   Assistant.razor.css) because .companion-entity
   is owned by this component — it carries the
   b-ccyi3mllr8 scope attribute. Writing
   `.companion-peek-avatar .companion-entity`
   here compiles to
   `.companion-peek-avatar .companion-entity[b-ccyi3mllr8]`
   which matches correctly. Writing the same
   selector in Assistant.razor.css would scope
   to b-p6zlg1y67t and never match, which is
   why the previous attempt in Assistant.razor.css
   silently did nothing (see
   CSS_ARCHITECTURE.md re: the ::deep ban).
   ============================================ */
/* Canvas-bleed click-through for the peek avatar — applies at ALL sizes.
   CompanionEntity renders its canvas at 1.6× the logical size with
   overflow:visible, so the canvas child extends far beyond the button's
   bounding box (~42px past on mobile at 56×56; ~48px past on desktop at
   Large 160×160). Without this rule, the canvas bleed was eating clicks
   meant for the dialog behind — the "AI" tab on desktop (ticket #669,
   2026-04), the Knowledge Base dropdown / + / history on mobile.

   Moved OUT of the @media (max-width: 768px) block in 2026-04 once the
   desktop case landed in a user ticket. The fix is identical at all
   sizes: IsInteractive is already false on the peek CompanionEntity
   (Assistant.razor ~line 117), so nothing inside needs to receive
   pointer events — the parent .companion-peek-avatar's ::before
   pseudo-element (in Assistant.razor.css) owns the navigation click
   region now. */
.companion-peek-avatar .companion-entity[b-3u8pje5bnb],
.companion-peek-avatar .companion-entity-canvas[b-3u8pje5bnb] {
    pointer-events: none;
}

@media (max-width: 768px) {
    /* Visually shrink the rendered canvas to something that fits
       the mobile header without dominating it. The Size prop is
       locked in at construction (JS side uses logicalSize = 160 for
       a Large peek → 256×256 canvas with negative margins that
       bleed way past the button). We can't change the JS-side size
       from CSS, but we CAN scale the rendered output via transform.
       scale(0.55) math:
         container 160 → 88 visual (lightly overflows the 56 button,
           preserving the desktop "peek above the dialog" aesthetic)
         canvas    256 → 141 visual (particle glow bleed extends
           ~42px past the button — acceptable since pointer-events
           above makes it click-through)
         core      ~40 → 22 visual (creature face stays recognizable;
           at an earlier 0.35 it was 14px and basically unreadable)
       transform-origin centers it on the button. */
    .companion-peek-avatar .companion-entity[b-3u8pje5bnb] {
        transform: scale(0.55);
        transform-origin: center center;
    }
}
/* /Components/Chat/CompanionEvolutionRitual.razor.rz.scp.css */
/*
 * Companion Evolution Ritual — full-screen celebration overlay.
 *
 * Phases (driven by a class on the backdrop + stage + rings + caption):
 *   phase-mount        → backdrop fades in, avatar lands at hero scale
 *   phase-transforming → aura rings pulse outward in tier color
 *   phase-revealed     → caption rises into view, stage name shimmers
 *   phase-fading       → everything fades out to return the UI
 *
 * Theme-aware — uses --theme-* custom properties with hard-coded
 * fallbacks so it renders safely under any of the 8 themes.
 * Reduced-motion users get a plain fade with no scaling/rings.
 */

[b-byqh04flb7] .evolution-ritual-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at center,
        rgba(15, 23, 42, 0.78) 0%,
        rgba(2, 6, 23, 0.95) 70%,
        rgba(0, 0, 0, 0.98) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    opacity: 0;
    animation: ritualBackdropIn-b-byqh04flb7 380ms ease-out forwards;
    cursor: pointer;
}

[b-byqh04flb7] .evolution-ritual-backdrop.is-fading-out {
    animation: ritualBackdropOut-b-byqh04flb7 380ms ease-in forwards;
    pointer-events: none;
}

@keyframes ritualBackdropIn-b-byqh04flb7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ritualBackdropOut-b-byqh04flb7 {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* Stage — holds the avatar, rings, and caption. */
[b-byqh04flb7] .evolution-ritual-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    max-width: min(560px, 92vw);
    cursor: default;
}

/* ────────────────────────────────────────────────────────
   AVATAR — scales up on mount, wobbles during transform,
   settles at full size on reveal.
   ──────────────────────────────────────────────────────── */
[b-byqh04flb7] .evolution-ritual-avatar {
    position: relative;
    z-index: 2;
    transform: scale(0.6);
    opacity: 0;
    filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.45));
    animation: ritualAvatarIn-b-byqh04flb7 420ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

[b-byqh04flb7] .evolution-ritual-avatar.phase-transforming {
    animation: ritualAvatarTransform-b-byqh04flb7 1700ms ease-in-out forwards;
}

[b-byqh04flb7] .evolution-ritual-avatar.phase-revealed {
    animation: ritualAvatarSettled-b-byqh04flb7 2800ms ease-in-out infinite;
}

@keyframes ritualAvatarIn-b-byqh04flb7 {
    0%   { transform: scale(0.55) translateY(20px); opacity: 0; }
    60%  { transform: scale(1.08) translateY(-4px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes ritualAvatarTransform-b-byqh04flb7 {
    0%   { transform: scale(1); filter: drop-shadow(0 0 40px rgba(99, 102, 241, 0.5)); }
    25%  { transform: scale(1.14) rotate(-2deg); filter: drop-shadow(0 0 60px rgba(255, 255, 255, 0.85)); }
    50%  { transform: scale(0.92) rotate(2deg);  filter: drop-shadow(0 0 80px rgba(255, 255, 255, 1)); }
    75%  { transform: scale(1.08) rotate(-1deg); filter: drop-shadow(0 0 70px rgba(255, 255, 255, 0.8)); }
    100% { transform: scale(1) rotate(0);        filter: drop-shadow(0 0 50px rgba(99, 102, 241, 0.6)); }
}

@keyframes ritualAvatarSettled-b-byqh04flb7 {
    0%, 100% { transform: scale(1)    translateY(0); filter: drop-shadow(0 0 50px rgba(99, 102, 241, 0.55)); }
    50%      { transform: scale(1.03) translateY(-6px); filter: drop-shadow(0 0 68px rgba(99, 102, 241, 0.75)); }
}

/* ────────────────────────────────────────────────────────
   AURA RINGS — three concentric rings pulse outward
   during the transform phase.
   ──────────────────────────────────────────────────────── */
[b-byqh04flb7] .evolution-ritual-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

[b-byqh04flb7] .evolution-ritual-rings .ritual-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.6);
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
}

[b-byqh04flb7] .evolution-ritual-rings.phase-transforming .ring-1 {
    animation: ritualRingExpand-b-byqh04flb7 1700ms ease-out forwards;
    animation-delay: 80ms;
}
[b-byqh04flb7] .evolution-ritual-rings.phase-transforming .ring-2 {
    animation: ritualRingExpand-b-byqh04flb7 1700ms ease-out forwards;
    animation-delay: 360ms;
    border-color: rgba(168, 85, 247, 0.55);
}
[b-byqh04flb7] .evolution-ritual-rings.phase-transforming .ring-3 {
    animation: ritualRingExpand-b-byqh04flb7 1700ms ease-out forwards;
    animation-delay: 640ms;
    border-color: rgba(236, 72, 153, 0.5);
}

[b-byqh04flb7] .evolution-ritual-rings.phase-revealed .ring-1 {
    animation: ritualRingOrbit-b-byqh04flb7 6s linear infinite;
    opacity: 0.25;
}
[b-byqh04flb7] .evolution-ritual-rings.phase-revealed .ring-2 {
    animation: ritualRingOrbit-b-byqh04flb7 8s linear infinite reverse;
    opacity: 0.18;
}
[b-byqh04flb7] .evolution-ritual-rings.phase-revealed .ring-3 {
    opacity: 0;
}

@keyframes ritualRingExpand-b-byqh04flb7 {
    0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; border-width: 4px; }
    30%  { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; border-width: 1px; }
}

@keyframes ritualRingOrbit-b-byqh04flb7 {
    0%   { transform: translate(-50%, -50%) scale(1.6) rotate(0deg); }
    100% { transform: translate(-50%, -50%) scale(1.6) rotate(360deg); }
}

/* ────────────────────────────────────────────────────────
   CAPTION — kicker, title, subtitle. Hidden until reveal.
   ──────────────────────────────────────────────────────── */
[b-byqh04flb7] .evolution-ritual-caption {
    position: relative;
    z-index: 3;
    text-align: center;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
    pointer-events: none;
    color: var(--theme-text-primary, #f8fafc);
}

[b-byqh04flb7] .evolution-ritual-caption.phase-mount,
[b-byqh04flb7] .evolution-ritual-caption.phase-transforming {
    opacity: 0;
    transform: translateY(24px);
}

[b-byqh04flb7] .evolution-ritual-caption.phase-revealed {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 120ms;
}

[b-byqh04flb7] .evolution-ritual-caption.phase-fading {
    opacity: 0;
    transform: translateY(-8px);
}

[b-byqh04flb7] .ritual-kicker {
    display: inline-block;
    padding: 4px 14px;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(248, 250, 252, 0.85);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35), rgba(168, 85, 247, 0.35));
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

[b-byqh04flb7] .ritual-title {
    margin: 0 0 12px 0;
    font-size: clamp(22px, 4.2vw, 34px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: rgba(248, 250, 252, 0.98);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

[b-byqh04flb7] .ritual-stage-name {
    display: inline-block;
    font-weight: 800;
    /* inline style overrides color for dynamic tier color */
    animation: ritualStageShimmer-b-byqh04flb7 2400ms ease-in-out infinite;
}

@keyframes ritualStageShimmer-b-byqh04flb7 {
    0%, 100% { filter: brightness(1)    saturate(1); }
    50%      { filter: brightness(1.25) saturate(1.25); }
}

[b-byqh04flb7] .ritual-subtitle {
    font-size: 14px;
    color: rgba(226, 232, 240, 0.75);
    letter-spacing: 0.5px;
}

[b-byqh04flb7] .ritual-stages-gained {
    margin-left: 6px;
    color: rgba(251, 191, 36, 0.95);
    font-weight: 700;
}

[b-byqh04flb7] .ritual-lineage {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    font-size: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(226, 232, 240, 0.9);
}

[b-byqh04flb7] .lineage-from {
    opacity: 0.55;
    text-decoration: line-through;
}

[b-byqh04flb7] .lineage-arrow {
    opacity: 0.6;
    font-weight: 700;
}

[b-byqh04flb7] .lineage-to {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
}

/* ────────────────────────────────────────────────────────
   DISMISS BUTTON — only visible after reveal.
   ──────────────────────────────────────────────────────── */
[b-byqh04flb7] .evolution-ritual-dismiss {
    position: relative;
    z-index: 3;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(248, 250, 252, 0.95);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms ease-out, transform 400ms ease-out,
                background-color 200ms ease, border-color 200ms ease;
    pointer-events: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

[b-byqh04flb7] .evolution-ritual-stage:has(.evolution-ritual-caption.phase-revealed) .evolution-ritual-dismiss {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 280ms;
}

[b-byqh04flb7] .evolution-ritual-dismiss:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
}

[b-byqh04flb7] .evolution-ritual-dismiss:focus-visible {
    outline: 2px solid var(--theme-accent-primary, rgba(99, 102, 241, 0.9));
    outline-offset: 3px;
}

/* ────────────────────────────────────────────────────────
   REDUCED MOTION — soft fade, no scale/wobble/rings.
   Users still see the new stage name and the new avatar,
   just without the cinematic choreography.
   ──────────────────────────────────────────────────────── */
[b-byqh04flb7] .evolution-ritual-backdrop.is-reduced .evolution-ritual-avatar,
[b-byqh04flb7] .evolution-ritual-backdrop.is-reduced .evolution-ritual-avatar.phase-transforming,
[b-byqh04flb7] .evolution-ritual-backdrop.is-reduced .evolution-ritual-avatar.phase-revealed {
    animation: none !important;
    transform: none;
    opacity: 1;
}

[b-byqh04flb7] .evolution-ritual-backdrop.is-reduced .evolution-ritual-rings {
    display: none;
}

[b-byqh04flb7] .evolution-ritual-backdrop.is-reduced .evolution-ritual-caption {
    transition: opacity 200ms linear;
    transform: none;
}

[b-byqh04flb7] .evolution-ritual-backdrop.is-reduced .ritual-stage-name {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    [b-byqh04flb7] .evolution-ritual-backdrop {
        animation: ritualBackdropIn-b-byqh04flb7 220ms linear forwards;
    }

    [b-byqh04flb7] .evolution-ritual-avatar,
    [b-byqh04flb7] .evolution-ritual-avatar.phase-transforming,
    [b-byqh04flb7] .evolution-ritual-avatar.phase-revealed {
        animation: none !important;
        transform: none;
        opacity: 1;
    }

    [b-byqh04flb7] .evolution-ritual-rings {
        display: none;
    }

    [b-byqh04flb7] .ritual-stage-name {
        animation: none;
    }

    [b-byqh04flb7] .evolution-ritual-caption {
        transition: opacity 200ms linear;
        transform: none;
    }
}
/* /Components/Chat/CompanionRewardBubble.razor.rz.scp.css */
/* ============================================
   CompanionRewardBubble.razor.css
   Speech bubble that appears above the companion FAB
   when progression rewards are earned.
   Positioned absolute so it rides with the FAB
   during the slide-up celebration animation.
   ============================================ */

.companion-reward-bubble-container[b-1vnybw3iru] {
    position: absolute;
    bottom: 80px;
    right: 0;
    z-index: 1;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    align-items: flex-end;
    pointer-events: none;
}

.companion-reward-bubble[b-1vnybw3iru] {
    pointer-events: auto;
    background: var(--theme-surface, #ffffff);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
    border-radius: 16px 16px 4px 16px;
    padding: 12px 16px;
    max-width: 280px;
    width: max-content;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08),
        0 0 20px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    animation: rewardBubbleIn-b-1vnybw3iru 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: bottom right;
    position: relative;
}

.companion-reward-bubble.exiting[b-1vnybw3iru] {
    animation: rewardBubbleOut-b-1vnybw3iru 0.35s ease-in forwards;
}

/* Tail pointing down toward the companion */
.reward-bubble-tail[b-1vnybw3iru] {
    position: absolute;
    bottom: -7px;
    right: 24px;
    width: 14px;
    height: 14px;
    background: var(--theme-surface, #ffffff);
    border-right: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
    border-bottom: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
    transform: rotate(45deg);
    border-radius: 0 0 3px 0;
}

.reward-bubble-content[b-1vnybw3iru] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reward-bubble-icon[b-1vnybw3iru] {
    font-size: 18px;
    flex-shrink: 0;
    line-height: 1;
}

.reward-bubble-text[b-1vnybw3iru] {
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.4;
}

/* Blinking cursor during typing */
.typing-cursor[b-1vnybw3iru] {
    display: inline;
    font-weight: 300;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    animation: cursorBlink-b-1vnybw3iru 0.6s step-end infinite;
    margin-left: 1px;
}

@keyframes cursorBlink-b-1vnybw3iru {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Type-specific accent glow */
.reward-xp[b-1vnybw3iru] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

.reward-level-up[b-1vnybw3iru] {
    border-color: rgba(234, 179, 8, 0.4);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(234, 179, 8, 0.15);
}

.reward-level-up .reward-bubble-tail[b-1vnybw3iru] {
    border-color: rgba(234, 179, 8, 0.4);
}

.reward-streak[b-1vnybw3iru] {
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(249, 115, 22, 0.15);
}

.reward-streak .reward-bubble-tail[b-1vnybw3iru] {
    border-color: rgba(249, 115, 22, 0.4);
}

.reward-theme[b-1vnybw3iru] {
    border-color: rgba(168, 85, 247, 0.4);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(168, 85, 247, 0.15);
}

.reward-theme .reward-bubble-tail[b-1vnybw3iru] {
    border-color: rgba(168, 85, 247, 0.4);
}

/* Animations */
@keyframes rewardBubbleIn-b-1vnybw3iru {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes rewardBubbleOut-b-1vnybw3iru {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.8) translateY(-10px);
    }
}

/* Dark theme support */
.is-dark .companion-reward-bubble[b-1vnybw3iru] {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(12px);
}

.is-dark .reward-bubble-tail[b-1vnybw3iru] {
    background: rgba(30, 41, 59, 0.95);
}

.is-dark .reward-bubble-text[b-1vnybw3iru] {
    color: #e2e8f0;
}
/* /Components/Chat/CompanionTierUpReward.razor.rz.scp.css */
/* CompanionTierUpReward (CE-V-3) — tier-up reskin reward modal.
   Solid card per the NTS dialog convention (#1e293b, no translucency / backdrop-filter).
   Theme-agnostic: it's a modal on a dim backdrop, so it reads on all 8 themes. */

.tierup-overlay[b-pyn5dx9tuk] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2, 6, 23, 0.66);
    animation: tierup-fade-in-b-pyn5dx9tuk 0.25s ease;
}

.tierup-card[b-pyn5dx9tuk] {
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 18px;
    border-top: 4px solid var(--tierup-accent, #667eea);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    padding: 28px 28px 24px;
    text-align: center;
    animation: tierup-pop-b-pyn5dx9tuk 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tierup-eyebrow[b-pyn5dx9tuk] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tierup-accent, #818cf8);
    margin-bottom: 6px;
}

.tierup-title[b-pyn5dx9tuk] {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: #f8fafc;
}

.tierup-sub[b-pyn5dx9tuk] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0 0 18px;
}

.tierup-preview[b-pyn5dx9tuk] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
    margin-bottom: 18px;
}

.tierup-group[b-pyn5dx9tuk] {
    text-align: left;
    margin-bottom: 16px;
}

.tierup-group-label[b-pyn5dx9tuk] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 8px;
}

.tierup-swatches[b-pyn5dx9tuk] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tierup-swatch[b-pyn5dx9tuk] {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, border-color 0.12s ease;
}

.tierup-swatch:hover[b-pyn5dx9tuk] {
    transform: scale(1.08);
}

.tierup-swatch.is-selected[b-pyn5dx9tuk] {
    border-color: #f8fafc;
    box-shadow: 0 0 0 2px var(--tierup-accent, #818cf8);
}

.tierup-shapes[b-pyn5dx9tuk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tierup-shape[b-pyn5dx9tuk] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid #334155;
    background: #0f172a;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, transform 0.12s ease;
}

.tierup-shape:hover[b-pyn5dx9tuk] {
    transform: translateY(-1px);
}

.tierup-shape.is-selected[b-pyn5dx9tuk] {
    border-color: var(--tierup-accent, #818cf8);
    background: #15233b;
}

.tierup-new[b-pyn5dx9tuk] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: var(--tierup-accent, #f59e0b);
    color: #0b1020;
    border-radius: 6px;
    padding: 1px 5px;
    line-height: 1.4;
}

/* NEW badge floats on the corner of a round color swatch */
.tierup-swatch .tierup-new[b-pyn5dx9tuk] {
    position: absolute;
    top: -8px;
    right: -10px;
}

.tierup-actions[b-pyn5dx9tuk] {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.tierup-btn[b-pyn5dx9tuk] {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    transition: filter 0.12s ease, opacity 0.12s ease;
}

.tierup-btn:disabled[b-pyn5dx9tuk] {
    opacity: 0.6;
    cursor: default;
}

.tierup-btn.ghost[b-pyn5dx9tuk] {
    background: transparent;
    border-color: #334155;
    color: #cbd5e1;
}

.tierup-btn.primary[b-pyn5dx9tuk] {
    background: var(--tierup-accent, #667eea);
    color: #0b1020;
}

.tierup-btn.primary:hover:not(:disabled)[b-pyn5dx9tuk] {
    filter: brightness(1.08);
}

@keyframes tierup-fade-in-b-pyn5dx9tuk {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tierup-pop-b-pyn5dx9tuk {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* /Components/Chat/CompanionToolsPanel.razor.rz.scp.css */
/* ============================================
   CompanionToolsPanel.razor.css
   Timer + Quick Notes inside the companion panel
   ============================================ */

.tools-panel[b-of1iyssf2x] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 12px;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

.tools-panel[b-of1iyssf2x]::-webkit-scrollbar {
    width: 5px;
}

.tools-panel[b-of1iyssf2x]::-webkit-scrollbar-track {
    background: transparent;
}

.tools-panel[b-of1iyssf2x]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.25);
    border-radius: 10px;
}

.tools-panel[b-of1iyssf2x]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.4);
}

/* ── Card Container ── */
.tools-card[b-of1iyssf2x] {
    display: flex;
    flex-direction: column;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.03);
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.15));
    border-radius: 14px;
    padding: 14px;
    gap: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tools-card:hover[b-of1iyssf2x] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.tools-card.timer-active[b-of1iyssf2x] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
    box-shadow: 0 0 16px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

/* ── Card Header ── */
.card-header[b-of1iyssf2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-title-row[b-of1iyssf2x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-icon[b-of1iyssf2x] {
    font-size: 1rem;
    line-height: 1;
}

.card-title[b-of1iyssf2x] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    letter-spacing: 0.01em;
}

/* ── Status Pills ── */
.status-pill[b-of1iyssf2x] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* TASK-TIMER-2: time-tracking pill is green ("tracking"), deliberately NOT the
   red "recording" treatment — that read too close to the screen recorder. */
.status-pill.tracking[b-of1iyssf2x] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.status-pill.paused[b-of1iyssf2x] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.tracking-dot[b-of1iyssf2x] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: trackPulse-b-of1iyssf2x 1.2s ease-in-out infinite;
}

@keyframes trackPulse-b-of1iyssf2x {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* TASK-TIMER-2: the task a running timer is tracking, + the start-picker select. */
.timer-task-link[b-of1iyssf2x] {
    display: block;
    width: 100%;
    margin: 2px 0 6px;
    padding: 0;
    border: none;
    background: none;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nts-accent, #10b981);
    cursor: pointer;
}

.timer-task-link:hover[b-of1iyssf2x] { text-decoration: underline; }

.timer-task-on[b-of1iyssf2x] {
    font-weight: 400;
    opacity: 0.6;
    margin-right: 2px;
}

.timer-task-select[b-of1iyssf2x] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    font-size: 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--nts-border, rgba(148, 163, 184, 0.3));
    background: var(--nts-surface, rgba(255, 255, 255, 0.04));
    color: inherit;
}

/* TASK-TIMER-2.1: Save entry button (teleports to /time save dialog). */
.timer-save-btn[b-of1iyssf2x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: #10b981;
    color: #fff;
    cursor: pointer;
}

.timer-save-btn:hover[b-of1iyssf2x] { background: #0ea372; }

/* ── Timer ── */
.timer-display[b-of1iyssf2x] {
    text-align: center;
    padding: 8px 0 4px;
}

.timer-digits[b-of1iyssf2x] {
    /* TR-V-TOOLS-POLISH (2026-05-17): dropped the monospace 'SF Mono / Fira /
       Cascadia' stack — the digital-clock face read as out-of-system. Now
       inherits the UI font and uses tabular-nums for column-aligned digits,
       which is what we actually wanted from the monospace in the first place. */
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    color: var(--theme-text-primary, #1e293b);
    font-family: inherit;
}

.timer-active .timer-digits[b-of1iyssf2x] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.timer-controls[b-of1iyssf2x] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

/* ── Timer Buttons ── */
.timer-btn[b-of1iyssf2x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.timer-btn.start[b-of1iyssf2x] {
    background: var(--theme-primary, #6366f1);
    color: var(--theme-btn-text, #fff);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
}

.timer-btn.start:hover[b-of1iyssf2x] {
    background: var(--theme-primary-hover, #4f46e5);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35);
    transform: translateY(-1px);
}

.timer-btn.pause[b-of1iyssf2x] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.timer-btn.pause:hover[b-of1iyssf2x] {
    background: rgba(245, 158, 11, 0.2);
}

.timer-btn.reset[b-of1iyssf2x] {
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.2));
}

.timer-btn.reset:hover[b-of1iyssf2x] {
    background: rgba(148, 163, 184, 0.08);
    color: var(--theme-text-secondary, #64748b);
}

/* ── Card Footer Link ── */
.card-footer-link[b-of1iyssf2x] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s ease, gap 0.15s ease;
}

.card-footer-link:hover[b-of1iyssf2x] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    gap: 6px;
}

.card-footer-link svg[b-of1iyssf2x] {
    transition: transform 0.15s ease;
}

.card-footer-link:hover svg[b-of1iyssf2x] {
    transform: translateX(2px);
}

/* ── Quick Note ──
   TR-V-TOOLS-POLISH (2026-05-17): note input now matches the chat composer
   pattern (see reference_chat_composer_pattern.md). The wrapper is the
   bordered shell that glows on :focus-within; the textarea inside is
   transparent + borderless and grows via field-sizing: content. */
.note-input-wrapper[b-of1iyssf2x] {
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 12px;
    padding: 8px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.note-input-wrapper:focus-within[b-of1iyssf2x] {
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 2px 12px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.note-input[b-of1iyssf2x] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--theme-input-text, #1e293b);
    resize: none;
    field-sizing: content;
    /* Note input wants notepad affordance — start ~3 lines tall so the empty
       state reads as "space to jot," unlike the chat composers which start at
       single-line and grow on input. */
    min-height: 64px;
    max-height: 200px;
    padding: 4px 0;
    overflow-y: auto;
    box-sizing: border-box;
}

.note-input[b-of1iyssf2x]::placeholder {
    color: var(--theme-text-muted, #94a3b8);
}

/* TR-V-TOOLS-POLISH-2 (2026-05-17): action row lives inside the wrapper
   (same pattern as the chat composer's .reply-actions-row). Save button
   is anchored right via margin-left: auto. */
.note-actions-row[b-of1iyssf2x] {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.note-save-btn[b-of1iyssf2x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #a855f7) 100%);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.15s ease;
}

.note-save-btn:hover:not(:disabled)[b-of1iyssf2x] {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb, 168, 85, 247), 0.35);
}

.note-save-btn:disabled[b-of1iyssf2x] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Footer link sits below the wrapper now (was inside .note-actions). */
.note-footer[b-of1iyssf2x] {
    display: flex;
    justify-content: flex-end;
}

/* Saving spinner */
.btn-spinner[b-of1iyssf2x] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-of1iyssf2x 0.6s linear infinite;
    display: inline-block;
}

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

/* ── Dark Theme ── */
.is-dark .tools-card[b-of1iyssf2x] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(148, 163, 184, 0.1);
}

.is-dark .tools-card:hover[b-of1iyssf2x] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
}

.is-dark .tools-card.timer-active[b-of1iyssf2x] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35);
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}

/* Dark themes — wrapper carries the border + bg (textarea inside is transparent).
   Mirrors the chat composer's dark-theme override (TR-V-COMPOSER-4). */
.is-dark .note-input-wrapper[b-of1iyssf2x] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.is-dark .note-input-wrapper:focus-within[b-of1iyssf2x] {
    border-color: rgba(var(--theme-primary-rgb, 168, 85, 247), 0.6);
    box-shadow: 0 2px 12px rgba(var(--theme-primary-rgb, 168, 85, 247), 0.2);
}

.is-dark .note-input[b-of1iyssf2x] {
    color: rgba(255, 255, 255, 0.92);
}

.is-dark .note-input[b-of1iyssf2x]::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.is-dark .timer-btn.pause[b-of1iyssf2x] {
    background: rgba(245, 158, 11, 0.15);
}

.is-dark .timer-btn.reset[b-of1iyssf2x] {
    border-color: rgba(148, 163, 184, 0.12);
    color: rgba(226, 232, 240, 0.5);
}

.is-dark .timer-btn.reset:hover[b-of1iyssf2x] {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.is-dark .card-footer-link[b-of1iyssf2x] {
    color: rgba(226, 232, 240, 0.4);
}

.is-dark .card-footer-link:hover[b-of1iyssf2x] {
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
}

.is-dark .status-pill.tracking[b-of1iyssf2x] {
    background: rgba(16, 185, 129, 0.18);
}

.is-dark .status-pill.paused[b-of1iyssf2x] {
    background: rgba(245, 158, 11, 0.15);
}

.is-dark .tools-panel[b-of1iyssf2x]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.15);
}

.is-dark .tools-panel[b-of1iyssf2x]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.3);
}
/* /Components/Chat/CompanionTransmitPanel.razor.rz.scp.css */
/* ============================================
   CompanionTransmitPanel.razor.css
   Compact messaging inside the companion panel
   ============================================ */

.transmit-panel[b-cgtaht6ktm] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Loading */
.transmit-loading[b-cgtaht6ktm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.85rem;
}

.spinner-small[b-cgtaht6ktm] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-cgtaht6ktm 0.8s linear infinite;
}

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

/* ── List Header (compose entry) ──
   TR-V-PARITY-1 (2026-05-23): pencil button above the conversation list.
   Navigates to /transmit?compose=1 — full compose flow lives there. */
.transmit-list-header[b-cgtaht6ktm] {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px 4px;
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.08));
    flex-shrink: 0;
}

.transmit-compose-btn[b-cgtaht6ktm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #a855f7) 100%);
    color: white;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.transmit-compose-btn:hover[b-cgtaht6ktm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb, 168, 85, 247), 0.35);
}

.transmit-compose-btn.empty-state-cta[b-cgtaht6ktm] {
    margin-top: 4px;
}

/* ── Conversation List ── */
.transmit-list[b-cgtaht6ktm] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.transmit-conversation[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
}

.transmit-conversation:hover[b-cgtaht6ktm] {
    background: var(--theme-hover, rgba(99, 102, 241, 0.06));
}

.transmit-conversation.unread[b-cgtaht6ktm] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04);
}

.transmit-conversation.unread .conv-name[b-cgtaht6ktm] {
    font-weight: 600;
}

/* Avatar */
.conv-avatar[b-cgtaht6ktm],
.thread-avatar[b-cgtaht6ktm] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.avatar-blue[b-cgtaht6ktm] { background: #3b82f6; }
.avatar-green[b-cgtaht6ktm] { background: #22c55e; }
.avatar-purple[b-cgtaht6ktm] { background: #8b5cf6; }
.avatar-amber[b-cgtaht6ktm] { background: #f59e0b; }
.avatar-rose[b-cgtaht6ktm] { background: #f43f5e; }
.avatar-teal[b-cgtaht6ktm] { background: #14b8a6; }
.avatar-gray[b-cgtaht6ktm] { background: #94a3b8; }

/* TR-G-FAB (2026-05): multi-avatar stack for group rows. Avatars overlap so
   the cluster reads as "a group" at a glance even at the FAB's compact size.
   Smaller per-avatar (24px) than the single 1-on-1 avatar so the stack of 2-3
   roughly fits the same total footprint. The 2px theme-surface border carves
   each avatar out of its neighbour so the stack reads as discrete circles
   rather than a blob. */
.conv-avatar-stack[b-cgtaht6ktm] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    /* Reserve roughly the same visual width as a single 36px avatar so the
       row layout doesn't shift between group and 1-on-1 rows. */
    min-width: 36px;
}

.conv-avatar-stack .conv-avatar[b-cgtaht6ktm] {
    border: 2px solid var(--theme-surface, #ffffff);
    margin-right: -10px;
    z-index: 1;
}

.conv-avatar-stack .conv-avatar:last-child[b-cgtaht6ktm] {
    margin-right: 0;
}

.conv-avatar.conv-avatar-small[b-cgtaht6ktm] {
    width: 24px;
    height: 24px;
    font-size: 0.65rem;
}

/* Group badge — small pill that sits inline with the conversation name so
   users can see "this is a group of N" without a hover. Same visual language
   as the MailBox header, sized down for the FAB context. */
.conv-group-badge[b-cgtaht6ktm] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 12%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Group thread header — title + member-count pill stack vertically so the
   long synthesized name ("Brittany Nemec, Corey Nemec") wraps cleanly at
   the FAB's narrow width without pushing the badge off-row. */
.thread-title[b-cgtaht6ktm] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 2px;
}

.thread-title .thread-name[b-cgtaht6ktm] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* Dark themes — the avatar stack border needs to match the elevated panel
   background so the carve-out keeps working when the surface is dark. */
.is-dark .conv-avatar-stack .conv-avatar[b-cgtaht6ktm] {
    border-color: var(--theme-bg-elevated, rgba(30, 41, 59, 0.95));
}

.conv-content[b-cgtaht6ktm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.conv-header-row[b-cgtaht6ktm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conv-name[b-cgtaht6ktm] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-time[b-cgtaht6ktm] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
    flex-shrink: 0;
}

.conv-preview[b-cgtaht6ktm] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-unread-badge[b-cgtaht6ktm] {
    background: var(--theme-primary, #6366f1);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    flex-shrink: 0;
}

/* ── Thread View ── */
.transmit-thread[b-cgtaht6ktm] {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.thread-header[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
    flex-shrink: 0;
}

.thread-back-btn[b-cgtaht6ktm] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: var(--theme-text-secondary, #64748b);
    display: flex;
    align-items: center;
    transition: all 0.15s ease;
}

.thread-back-btn:hover[b-cgtaht6ktm] {
    background: var(--theme-hover, rgba(99, 102, 241, 0.08));
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.thread-contact[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.thread-name[b-cgtaht6ktm] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.thread-messages[b-cgtaht6ktm] {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.thread-bubble[b-cgtaht6ktm] {
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.4;
    position: relative;
}

.thread-bubble.sent[b-cgtaht6ktm] {
    background: var(--theme-primary, #6366f1);
    color: white;
    border-bottom-right-radius: 4px;
}

.thread-bubble.received[b-cgtaht6ktm] {
    background: var(--theme-surface-elevated, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
    border-bottom-left-radius: 4px;
}

.bubble-text[b-cgtaht6ktm] {
    word-break: break-word;
}

.bubble-time[b-cgtaht6ktm] {
    font-size: 0.65rem;
    opacity: 0.6;
}

/* TR-G-FAB (2026-05): meta row holds bubble-time + (in groups) the
   "Read by N/M" receipt indicator, on a single right-aligned row.
   Time loses the block display because it's now a flex child. */
.bubble-meta[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

/* Sender label above received bubbles in group view. Only the first
   character is bold-weight to match the avatar-stack visual; full
   display name keeps the row scan-able even when 3+ people are talking. */
.bubble-sender-label[b-cgtaht6ktm] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    margin-bottom: 2px;
    margin-left: 4px;
}

/* "Read by N/M" — small inline checkmark + count next to bubble-time
   on the sender's own group messages. Faded by default; brightens to
   the success-tone when everyone's read it. */
.bubble-receipt[b-cgtaht6ktm] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.7;
    line-height: 1;
}

.bubble-receipt.all-read[b-cgtaht6ktm] {
    opacity: 1;
    color: #4ade80; /* green-400 — visible on the primary bubble background */
}

.bubble-receipt svg[b-cgtaht6ktm] {
    flex-shrink: 0;
}

.bubble-receipt-count[b-cgtaht6ktm] {
    line-height: 1;
}

/* Quick Reply
   TR-V-COMPOSER-4 (2026-05-17): mirrors the AI Chat composer (CI-V-1). One
   bordered container holds the textarea on top and the action row underneath.
   The container glows on :focus-within. Send button anchors right via
   margin-left: auto on .reply-send-btn. */
.thread-reply[b-cgtaht6ktm] {
    padding: 10px 14px;
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
    flex-shrink: 0;
}

.reply-container[b-cgtaht6ktm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 12px;
    padding: 8px 10px 6px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reply-container:focus-within[b-cgtaht6ktm] {
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 2px 12px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.reply-input[b-cgtaht6ktm] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--theme-input-text, #1e293b);
    /* Native auto-grow via field-sizing: content (Chromium 123+, Firefox 130+,
       Safari 17.4+) — mirrors AI Chat's AI-V-20 / no JS required. */
    resize: none;
    field-sizing: content;
    min-height: 24px;
    max-height: 140px;
    padding: 4px 0;
    overflow-y: auto;
}

.reply-input[b-cgtaht6ktm]::placeholder {
    color: var(--theme-text-muted, #94a3b8);
}

.reply-actions-row[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.reply-action-btn[b-cgtaht6ktm] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.reply-action-btn:hover:not(:disabled)[b-cgtaht6ktm] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.reply-action-btn:disabled[b-cgtaht6ktm] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Dark themes — explicit overrides because --theme-input-bg / --theme-input-border
   don't cascade per-theme (utilities.css hardcodes against .nts-input directly). */
.is-dark .reply-container[b-cgtaht6ktm] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.is-dark .reply-container:focus-within[b-cgtaht6ktm] {
    border-color: rgba(var(--theme-primary-rgb, 168, 85, 247), 0.6);
    box-shadow: 0 2px 12px rgba(var(--theme-primary-rgb, 168, 85, 247), 0.2);
}

.is-dark .reply-input[b-cgtaht6ktm] {
    color: rgba(255, 255, 255, 0.92);
}

.is-dark .reply-input[b-cgtaht6ktm]::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.is-dark .reply-action-btn[b-cgtaht6ktm] {
    color: rgba(148, 163, 184, 0.9);
}

.reply-send-btn[b-cgtaht6ktm] {
    /* TR-V-COMPOSER-4 (2026-05-17): match AI Chat's .send-button — 32×32
       rounded-square with primary→accent gradient, pinned to the right of
       the action row via margin-left: auto. */
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #a855f7) 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.15s ease;
}

.reply-send-btn:hover:not(:disabled)[b-cgtaht6ktm] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb, 168, 85, 247), 0.35);
}

.reply-send-btn:disabled[b-cgtaht6ktm] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Empty State ── */
.transmit-empty[b-cgtaht6ktm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    flex: 1;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.85rem;
    text-align: center;
}

/* ── Footer ── */
.transmit-footer[b-cgtaht6ktm] {
    padding: 8px 14px;
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
    flex-shrink: 0;
}

.transmit-open-full[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.transmit-open-full:hover[b-cgtaht6ktm] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

/* ── Dark Theme ── */
.is-dark .thread-bubble.received[b-cgtaht6ktm] {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
}

/* ── Message Row (bubble + reaction button) ── */
.thread-msg-row[b-cgtaht6ktm] {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    max-width: 85%;
}

.thread-msg-row.sent[b-cgtaht6ktm] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.thread-msg-row.received[b-cgtaht6ktm] {
    align-self: flex-start;
}

.thread-msg-row .add-reaction-btn[b-cgtaht6ktm] {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.thread-msg-row:hover .add-reaction-btn[b-cgtaht6ktm] {
    opacity: 1;
}

/* Reaction trigger button */
.add-reaction-btn[b-cgtaht6ktm] {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.15s ease;
}

.add-reaction-btn:hover[b-cgtaht6ktm] {
    background: var(--theme-hover, rgba(99, 102, 241, 0.08));
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Reaction pills under messages */
.bubble-reactions[b-cgtaht6ktm] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.reaction-pill[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: transparent;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.15s ease;
}

.reaction-pill:hover[b-cgtaht6ktm] {
    border-color: var(--theme-primary, #6366f1);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
}

.reaction-pill.reacted[b-cgtaht6ktm] {
    border-color: var(--theme-primary, #6366f1);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.reaction-emoji[b-cgtaht6ktm] {
    font-size: 0.8rem;
    line-height: 1;
}

.reaction-count[b-cgtaht6ktm] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
    font-size: 0.65rem;
}

.reaction-pill.reacted .reaction-count[b-cgtaht6ktm] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Emoji Picker */
.emoji-picker-overlay[b-cgtaht6ktm] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1300;
}

.emoji-picker[b-cgtaht6ktm] {
    display: flex;
    gap: 4px;
    padding: 8px 10px;
    background: var(--theme-surface, #ffffff);
    border-radius: 24px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
}

.emoji-btn[b-cgtaht6ktm] {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    padding: 0;
}

.emoji-btn:hover[b-cgtaht6ktm] {
    background: var(--theme-hover, rgba(99, 102, 241, 0.08));
    transform: scale(1.15);
}

/* Dark theme reactions */
.is-dark .emoji-picker[b-cgtaht6ktm] {
    background: #1e293b;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

.is-dark .reaction-count[b-cgtaht6ktm] {
    color: #94a3b8;
}

.is-dark .reaction-pill[b-cgtaht6ktm] {
    border-color: rgba(148, 163, 184, 0.2);
}

.is-dark .add-reaction-btn[b-cgtaht6ktm] {
    color: #64748b;
}

/* ── Image Preview Strip ──
   TR-V-PARITY-3.4 (2026-05-25): .uploading variant renders a spinner in the
   same footprint as the completed thumbnail row so the strip doesn't reflow
   when the upload finishes. */
.transmit-image-preview.uploading[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    color: var(--theme-text-muted, #94a3b8);
}

.transmit-image-preview.uploading .spinner-small[b-cgtaht6ktm] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--theme-border, rgba(148, 163, 184, 0.3));
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-cgtaht6ktm 0.7s linear infinite;
}

.transmit-image-preview[b-cgtaht6ktm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.1));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04);
    flex-shrink: 0;
}

.transmit-image-preview img[b-cgtaht6ktm] {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--theme-border, #e2e8f0);
    flex-shrink: 0;
}

.preview-info[b-cgtaht6ktm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.preview-name[b-cgtaht6ktm] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-size[b-cgtaht6ktm] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #94a3b8);
}

.preview-remove[b-cgtaht6ktm] {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.15s ease;
}

.preview-remove:hover[b-cgtaht6ktm] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* .reply-attach-btn retired in TR-V-COMPOSER-4 (2026-05-17) — the composer's
   attach + emoji buttons now use .reply-action-btn inside .reply-container,
   matching AI Chat's .attach-button / .input-actions-row pattern. */

/* ── Bubble Image ── */
.bubble-image[b-cgtaht6ktm] {
    margin-bottom: 4px;
}

.bubble-image img[b-cgtaht6ktm] {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    display: block;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.bubble-image img:hover[b-cgtaht6ktm] {
    opacity: 0.85;
    transform: scale(1.02);
}

.thread-bubble.sent .bubble-image img[b-cgtaht6ktm] {
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.thread-bubble.received .bubble-image img[b-cgtaht6ktm] {
    border: 1px solid var(--theme-border, #e2e8f0);
}

/* Dark theme image preview */
.is-dark .transmit-image-preview[b-cgtaht6ktm] {
    background: rgba(255, 255, 255, 0.04);
}

.is-dark .transmit-image-preview img[b-cgtaht6ktm] {
    border-color: rgba(148, 163, 184, 0.2);
}

.is-dark .preview-name[b-cgtaht6ktm] {
    color: #e2e8f0;
}

.is-dark .thread-bubble.received .bubble-image img[b-cgtaht6ktm] {
    border-color: rgba(148, 163, 184, 0.2);
}

/* ── Image Lightbox ── */
.transmit-lightbox-overlay[b-cgtaht6ktm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: lightbox-fade-in-b-cgtaht6ktm 0.15s ease;
    cursor: zoom-out;
    outline: none;
}

@keyframes lightbox-fade-in-b-cgtaht6ktm {
    from { opacity: 0; }
    to { opacity: 1; }
}

.transmit-lightbox-toolbar[b-cgtaht6ktm] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 10001;
}

.lightbox-action-btn[b-cgtaht6ktm] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease;
    backdrop-filter: blur(8px);
}

.lightbox-action-btn:hover[b-cgtaht6ktm] {
    background: rgba(255, 255, 255, 0.25);
}

.transmit-lightbox-content[b-cgtaht6ktm] {
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.transmit-lightbox-content img[b-cgtaht6ktm] {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Composer emoji picker — wider 6×4 grid that pops above the reply row.
   Distinct from .emoji-picker (the reaction picker) so the two can evolve
   independently and so the composer's wider palette doesn't push the
   reaction picker off-screen. Anchored bottom-right to align with the
   composer's emoji button rather than the screen center. */
.composer-emoji-overlay[b-cgtaht6ktm] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 1300;
}

.composer-emoji-picker[b-cgtaht6ktm] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: 8px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.2));
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    position: absolute;
    bottom: 64px;
    left: 14px;
    width: 240px;
}

.composer-emoji-btn[b-cgtaht6ktm] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, transform 0.12s ease;
    padding: 0;
}

.composer-emoji-btn:hover[b-cgtaht6ktm] {
    background: var(--theme-hover, rgba(99, 102, 241, 0.08));
    transform: scale(1.15);
}

/* Dark theme override matching .emoji-picker */
.is-dark .composer-emoji-picker[b-cgtaht6ktm] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}
/* /Components/Chat/EvolutionArrivalCelebration.razor.rz.scp.css */
/* Lightweight evolution-arrival celebration overlay.
   Sits above page content, click-anywhere-to-dismiss, ~4s auto-fade.
   Confetti pieces fall from above the viewport; banner anchors top-center. */

.evo-arrival-overlay[b-jrzgksdbh7] {
    position: fixed;
    inset: 0;
    z-index: 9000; /* above most content, below FAB chat (1200+) — celebration is bigger than FAB */
    pointer-events: auto; /* whole layer is click-to-dismiss */
    cursor: pointer;
    overflow: hidden;
    animation: evo-arrival-fade-in-b-jrzgksdbh7 240ms ease-out;
}

@keyframes evo-arrival-fade-in-b-jrzgksdbh7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Confetti ─────────────────────────────────────────────── */

.evo-arrival-confetti[b-jrzgksdbh7] {
    position: absolute;
    inset: 0;
    pointer-events: none; /* confetti shouldn't catch clicks */
}

.evo-arrival-confetti-piece[b-jrzgksdbh7] {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.9;
    animation-name: evo-arrival-confetti-fall-b-jrzgksdbh7;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: forwards;
    /* per-piece left / color / delay / duration set inline */
}

@keyframes evo-arrival-confetti-fall-b-jrzgksdbh7 {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

/* ── Banner ───────────────────────────────────────────────── */

.evo-arrival-banner[b-jrzgksdbh7] {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 540px;
    width: calc(100% - 32px);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1f2937);
    border-radius: 16px;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25),
        0 0 0 1px var(--evo-arrival-accent, #667eea),
        0 0 40px color-mix(in srgb, var(--evo-arrival-accent, #667eea) 35%, transparent);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: default; /* banner itself isn't click-to-dismiss; only the overlay around it */
    animation: evo-arrival-banner-drop-b-jrzgksdbh7 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes evo-arrival-banner-drop-b-jrzgksdbh7 {
    0% {
        transform: translateX(-50%) translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.evo-arrival-icon[b-jrzgksdbh7] {
    font-size: 2.4rem;
    line-height: 1;
    filter: drop-shadow(0 0 12px var(--evo-arrival-accent, #667eea));
    animation: evo-arrival-icon-pop-b-jrzgksdbh7 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms backwards;
}

@keyframes evo-arrival-icon-pop-b-jrzgksdbh7 {
    0%   { transform: scale(0.4) rotate(-30deg); opacity: 0; }
    60%  { transform: scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.evo-arrival-copy[b-jrzgksdbh7] {
    flex: 1;
    min-width: 0;
}

.evo-arrival-eyebrow[b-jrzgksdbh7] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--evo-arrival-accent, #667eea);
    margin-bottom: 2px;
}

.evo-arrival-headline[b-jrzgksdbh7] {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--theme-text-primary, #1f2937);
}

.evo-arrival-headline strong[b-jrzgksdbh7] {
    color: var(--evo-arrival-accent, #667eea);
    font-weight: 800;
}

.evo-arrival-tier[b-jrzgksdbh7] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #64748b);
    margin-top: 2px;
}

.evo-arrival-dismiss[b-jrzgksdbh7] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--theme-surface-subtle, rgba(0, 0, 0, 0.05));
    color: var(--theme-text-muted, #64748b);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms, color 120ms;
}

.evo-arrival-dismiss:hover[b-jrzgksdbh7] {
    background: var(--theme-surface-strong, rgba(0, 0, 0, 0.1));
    color: var(--theme-text-primary, #1f2937);
}

/* ── Reduced motion: kill the bouncy keyframes, keep the message readable ── */

@media (prefers-reduced-motion: reduce) {
    .evo-arrival-overlay[b-jrzgksdbh7],
    .evo-arrival-banner[b-jrzgksdbh7],
    .evo-arrival-icon[b-jrzgksdbh7],
    .evo-arrival-confetti-piece[b-jrzgksdbh7] {
        animation: none !important;
    }
    .evo-arrival-confetti[b-jrzgksdbh7] {
        display: none; /* confetti is pure decoration; safer to hide entirely */
    }
}
/* /Components/Chat/EvolutionSequenceOverlay.razor.rz.scp.css */
/* ============================================
   Evolution Sequence Overlay
   Cinematic fullscreen evolution experience
   ============================================ */

.evo-overlay[b-zne1q04000] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: evo-fade-in-b-zne1q04000 0.5s ease;
}

@keyframes evo-fade-in-b-zne1q04000 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.evo-backdrop[b-zne1q04000] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.evo-container[b-zne1q04000] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem 3rem;
    max-width: 480px;
    width: 90vw;
    text-align: center;
}

/* ── Header ── */
.evo-header[b-zne1q04000] {
    animation: evo-slide-down-b-zne1q04000 0.6s ease;
}

@keyframes evo-slide-down-b-zne1q04000 {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.evo-title[b-zne1q04000] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: -0.02em;
}

.evo-subtitle[b-zne1q04000] {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0.25rem 0 0;
}

/* ── Progress Track ── */
.evo-progress-track[b-zne1q04000] {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.evo-progress-fill[b-zne1q04000] {
    height: 100%;
    background: linear-gradient(90deg, #818cf8, #6366f1, #4f46e5);
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
}

.evo-progress-fill[b-zne1q04000]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
    animation: evo-shimmer-b-zne1q04000 1.5s ease-in-out infinite;
}

@keyframes evo-shimmer-b-zne1q04000 {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.evo-progress-label[b-zne1q04000] {
    position: absolute;
    right: 0;
    top: -20px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

/* ── Central Avatar Stage ── */
.evo-avatar-stage[b-zne1q04000] {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

/* Transition flash */
.evo-avatar-stage.evo-transitioning[b-zne1q04000] {
    animation: evo-pulse-grow-b-zne1q04000 0.6s ease;
}

@keyframes evo-pulse-grow-b-zne1q04000 {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Tier change extra drama */
.evo-avatar-stage.evo-tier-change[b-zne1q04000] {
    animation: evo-tier-burst-b-zne1q04000 1s ease;
}

@keyframes evo-tier-burst-b-zne1q04000 {
    0% { transform: scale(1); }
    20% { transform: scale(1.25); }
    40% { transform: scale(0.9); }
    60% { transform: scale(1.1); }
    80% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* ── Energy Ring ── */
.evo-energy-ring[b-zne1q04000] {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.4);
    box-shadow: 
        0 0 20px rgba(99, 102, 241, 0.2),
        inset 0 0 20px rgba(99, 102, 241, 0.1);
    animation: evo-ring-rotate-b-zne1q04000 8s linear infinite;
    transition: opacity 0.5s ease;
}

@keyframes evo-ring-rotate-b-zne1q04000 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── Particles ── */
.evo-particles[b-zne1q04000] {
    position: absolute;
    inset: -20px;
    pointer-events: none;
}

.evo-particle[b-zne1q04000] {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #818cf8;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.evo-particles.active .evo-particle[b-zne1q04000] {
    opacity: 1;
    animation: evo-particle-orbit-b-zne1q04000 1.2s ease-out forwards;
}

.evo-particle.p1[b-zne1q04000] { top: 0; left: 50%; background: #818cf8; animation-delay: 0s; }
.evo-particle.p2[b-zne1q04000] { top: 15%; right: 10%; background: #f59e0b; animation-delay: 0.05s; }
.evo-particle.p3[b-zne1q04000] { top: 50%; right: 0; background: #ec4899; animation-delay: 0.1s; }
.evo-particle.p4[b-zne1q04000] { bottom: 15%; right: 10%; background: #6366f1; animation-delay: 0.15s; }
.evo-particle.p5[b-zne1q04000] { bottom: 0; left: 50%; background: #06b6d4; animation-delay: 0.2s; }
.evo-particle.p6[b-zne1q04000] { bottom: 15%; left: 10%; background: #fbbf24; animation-delay: 0.25s; }
.evo-particle.p7[b-zne1q04000] { top: 50%; left: 0; background: #ef4444; animation-delay: 0.3s; }
.evo-particle.p8[b-zne1q04000] { top: 15%; left: 10%; background: #10b981; animation-delay: 0.35s; }

@keyframes evo-particle-orbit-b-zne1q04000 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    60% {
        opacity: 0.8;
    }
    100% {
        transform: translate(
            calc(var(--dx, 0) * 30px),
            calc(var(--dy, 0) * 30px)
        ) scale(0);
        opacity: 0;
    }
}

/* Unique directions for each particle */
.evo-particle.p1[b-zne1q04000] { --dx: 0; --dy: -1; }
.evo-particle.p2[b-zne1q04000] { --dx: 0.7; --dy: -0.7; }
.evo-particle.p3[b-zne1q04000] { --dx: 1; --dy: 0; }
.evo-particle.p4[b-zne1q04000] { --dx: 0.7; --dy: 0.7; }
.evo-particle.p5[b-zne1q04000] { --dx: 0; --dy: 1; }
.evo-particle.p6[b-zne1q04000] { --dx: -0.7; --dy: 0.7; }
.evo-particle.p7[b-zne1q04000] { --dx: -1; --dy: 0; }
.evo-particle.p8[b-zne1q04000] { --dx: -0.7; --dy: -0.7; }

/* ── Stage Info ── */
.evo-stage-info[b-zne1q04000] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.evo-stage-number[b-zne1q04000] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}

.evo-stage-number.evo-flash[b-zne1q04000] {
    animation: evo-number-flash-b-zne1q04000 0.5s ease;
}

@keyframes evo-number-flash-b-zne1q04000 {
    0%, 100% { color: #f1f5f9; transform: scale(1); }
    50% { color: #fbbf24; transform: scale(1.2); }
}

.evo-tier-name[b-zne1q04000] {
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    transition: all 0.5s ease;
}

/* Tier color badges */
.evo-tier-name.tier-spark[b-zne1q04000] {
    color: #818cf8;
    background: rgba(129, 140, 248, 0.15);
    border: 1px solid rgba(129, 140, 248, 0.3);
}

.evo-tier-name.tier-pulse[b-zne1q04000] {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.evo-tier-name.tier-nova[b-zne1q04000] {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.evo-tier-name.tier-zenith[b-zne1q04000] {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.evo-tier-name.tier-ascendant[b-zne1q04000] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.evo-tier-name.tier-transcendent[b-zne1q04000] {
    color: #06b6d4;
    background: rgba(6, 182, 212, 0.15);
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.evo-tier-name.tier-legendary[b-zne1q04000] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
}

/* ── Celebration ── */
.evo-celebration[b-zne1q04000] {
    animation: evo-celebration-pop-b-zne1q04000 0.6s ease;
}

@keyframes evo-celebration-pop-b-zne1q04000 {
    0% { opacity: 0; transform: scale(0.5) translateY(10px); }
    60% { transform: scale(1.1) translateY(-5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.evo-celebration-text[b-zne1q04000] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fbbf24;
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
}

/* ── Status Message ── */
.evo-message[b-zne1q04000] {
    min-height: 1.5rem;
}

.evo-message-text[b-zne1q04000] {
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.5;
}

/* ── Controls ── */
.evo-controls[b-zne1q04000] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}

/* ── Speed Badge ── */
.evo-speed-badge[b-zne1q04000] {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 0.75rem;
    color: #64748b;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .evo-container[b-zne1q04000] {
        padding: 1.5rem;
        gap: 1rem;
    }

    .evo-title[b-zne1q04000] {
        font-size: 1.2rem;
    }

    .evo-avatar-stage[b-zne1q04000] {
        width: 110px;
        height: 110px;
    }

    .evo-stage-number[b-zne1q04000] {
        font-size: 1.3rem;
    }
}
/* /Components/Chat/Eye.razor.rz.scp.css */
/* EYE-1 (2026-10-18): the watching-ball mark. See Eye.razor for the why and the NO BAND rule. */

.nts-eye[b-ewv2kb3b90] {
    flex: 0 0 auto;        /* GOTCHAS #323 */
    overflow: visible;     /* the rim light spills past the box */
    color: var(--nts-halo-ink, var(--theme-gradient-text, var(--theme-primary, #6366f1)));
}

.nts-eye-body[b-ewv2kb3b90]  { opacity: 0.92; }
.nts-eye-halo[b-ewv2kb3b90]  { opacity: 0.5; animation: nts-eye-breathe-b-ewv2kb3b90 5.2s ease-in-out infinite; }
.nts-eye-rim[b-ewv2kb3b90]   { opacity: 0; }                      /* JS: facing * (0.5 + level) */
.nts-eye-glow[b-ewv2kb3b90]  { opacity: 0.8; }
.nts-eye-iris[b-ewv2kb3b90]  { fill: var(--nts-eye-sclera, var(--theme-surface, #fff)); opacity: 0.6; }
.nts-eye-pupil[b-ewv2kb3b90] { opacity: 0.95; }
.nts-eye-lid[b-ewv2kb3b90]   { opacity: 0.96; }

.nts-eye--reading  .nts-eye-halo[b-ewv2kb3b90] { animation: none; opacity: calc(0.5 + var(--nts-voice-level, 0) * 0.4); }
.nts-eye--thinking .nts-eye-halo[b-ewv2kb3b90] { animation: none; opacity: 0.6; }

.nts-eye-ripple[b-ewv2kb3b90] { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.nts-eye--listening .nts-eye-ripple[b-ewv2kb3b90] { animation: nts-eye-ripple-b-ewv2kb3b90 1.8s ease-out infinite; }

/* Tiny hosts: ball + iris + pupil only. */
.nts-eye--tiny .nts-eye-halo[b-ewv2kb3b90], .nts-eye--tiny .nts-eye-rim[b-ewv2kb3b90] { display: none; }

@keyframes nts-eye-breathe-b-ewv2kb3b90 { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.58; } }
@keyframes nts-eye-ripple-b-ewv2kb3b90  { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
    .nts-eye-halo[b-ewv2kb3b90], .nts-eye-ripple[b-ewv2kb3b90] { animation: none; }
    .nts-eye--listening .nts-eye-ripple[b-ewv2kb3b90] { opacity: 0.35; transform: scale(1.3); }
}
/* /Components/Chat/Halo.razor.rz.scp.css */
/* HALO-1 (2026-08-21): the faceless ring mark. See Halo.razor for the why. */

.nts-halo[b-7h398sv40z] {
    /* GOTCHAS #323: an <svg> has min-content width 0 — without this a flex parent
       shrinks it and the Size parameter renders inert at every value. */
    flex: 0 0 auto;
    /* The speaking glow paints outside the box. */
    overflow: visible;

    /* HALO-1e (2026-08-21): the mark paints ITSELF instead of inheriting.
       Why: the host wrappers (.pro-hero-mark / .pro-peek-mark) set
       `color: var(--theme-fab-robot, #334155)` in SCOPED sheets, and a scoped rule
       compiles to `.pro-hero-mark[b-xxxxx]` — an extra attribute selector, so (0,2,0).
       The global override written for HALO-1c was `.pro-hero-mark--halo`, only (0,1,0),
       so it LOST silently and the ring kept painting dark slate on dark themes. An
       element that sets its own colour cannot be out-specified by an ancestor at all,
       which sidesteps the whole contest.
       Ink order: a host may set --nts-halo-ink (the FAB does, for white-on-gradient);
       otherwise --theme-gradient-text, which is the colour each theme uses for the
       hero's own name — legible on that theme BY CONSTRUCTION, which is exactly the
       property this mark needs. --theme-primary then a literal as last resorts. */
    color: var(--nts-halo-ink, var(--theme-gradient-text, var(--theme-primary, #6366f1)));
    /* HALO-LIFE-1: 5.5s -> 6.2s and the glow swells with the scale (see .nts-halo-arc).
       A pure scale breath at 3.5% is nearly subliminal; the glow is what makes it read
       as a breath rather than a rendering wobble. */
    animation: nts-halo-breathe-b-7h398sv40z 6.2s ease-in-out infinite;
}

/* HALO-LIFE-1: listening ripple, dormant until the state class lands. */
.nts-halo-ripple[b-7h398sv40z] {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* HALO-1c: 0.18 was tuned against a near-black ink on a white page. The mark now
   paints in the THEME ACCENT (see site.css), which is lighter, so the resting ring
   needs more presence to read as a ring rather than a smudge.
   HALO-1d (Josh: "let's make it pop"): 0.3 -> 0.45. The ring is the mark's BODY —
   under ~0.4 against a mid-tone theme it reads as a faint scratch rather than a
   deliberate shape, and the arc ends up floating with nothing to belong to. */
.nts-halo-ring[b-7h398sv40z] {
    opacity: 0.45;
}

/* HALO-1d: the arc is the SIGNAL — full opacity, plus a permanent soft bloom in its
   own colour so it separates from the ring at 20px (the message-bubble size) as well
   as at 88. The bloom is currentColor, so it stays theme-correct rather than adding a
   white rim that would repeat the PRO-PEEK-EDGE-1 problem on a thin stroke. */
.nts-halo-arc[b-7h398sv40z] {
    opacity: 1;
    filter: drop-shadow(0 0 var(--nts-halo-glow, 3px) currentColor);
    transition: stroke-width 0.12s linear, opacity 0.2s ease, filter 0.2s ease;
    /* HALO-LIFE-1: the glow breathes in step with the root scale (same period). */
    animation: nts-halo-glow-b-7h398sv40z 6.2s ease-in-out infinite;
}

/* HALO-LIFE-1: blink — the arc squashes to a dot and re-opens. stroke-dasharray is
   interpolable, so this is pure CSS; haloLife.js only toggles the class for ~420ms.
   The 60/154 numbers are the resting arc (HALO-1d); keep them in sync. */
.nts-halo--blink .nts-halo-arc[b-7h398sv40z] {
    animation: nts-halo-blink-b-7h398sv40z 0.42s cubic-bezier(0.4, 0, 0.2, 1) 1;
}

/* Idle sway lives HERE, never on .nts-halo-gaze — see the component comment.
   HALO-LIFE-1: was `nts-halo-drift 14s linear infinite` — a full revolution at
   constant speed, i.e. a spinner. Now a +/-9deg sway with a home position. */
.nts-halo-drift[b-7h398sv40z] {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: nts-halo-sway-b-7h398sv40z 9s ease-in-out infinite;
}

/* HALO-LIFE-1: thinking — two decisive half-turns, each landing and HOLDING before
   the next. The holds are the whole point: a turn that stops is "he did something",
   a turn that never stops is "the page is stuck". Net rotation per cycle is 360 so
   the sway resumes from home when the class is removed. */
.nts-halo--thinking .nts-halo-drift[b-7h398sv40z] {
    animation: nts-halo-think-b-7h398sv40z 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

/* HALO-LIFE-1: listening — rings expand outward from the body and fade. */
.nts-halo--listening .nts-halo-ripple[b-7h398sv40z] {
    animation: nts-halo-ripple-b-7h398sv40z 1.8s ease-out infinite;
}
.nts-halo--listening .nts-halo-drift[b-7h398sv40z] {
    animation-play-state: paused;
}

/* HALO-LIFE-1: when the pointer is being tracked the sway pauses so the aim is
   exact; haloLife.js sets this. */
.nts-halo--tracking .nts-halo-drift[b-7h398sv40z] {
    animation-play-state: paused;
}

/* JS-owned: audioBriefing.js writes an inline rotate() here while reading. */
.nts-halo-gaze[b-7h398sv40z] {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reading: the drift stops so the aim reads clean, and the arc rides real amplitude.
   --nts-voice-level (0..1) is published on the document root by VOICE-LEVEL-1. */
.nts-halo--reading .nts-halo-drift[b-7h398sv40z] {
    animation-play-state: paused;
}

.nts-halo--reading .nts-halo-arc[b-7h398sv40z] {
    /* HALO-LIFE-1: the idle glow breath is a `filter` ANIMATION and would outrank the
       amplitude-driven filter below (animations beat normal declarations). Off while reading. */
    animation: none;
    stroke-width: calc(11px + var(--nts-voice-level, 0) * 7px);
    opacity: 1;
    filter: drop-shadow(0 0 calc(var(--nts-halo-glow, 3px) + var(--nts-voice-level, 0) * 8px) currentColor);
}

.nts-halo--reading .nts-halo-ring[b-7h398sv40z] {
    opacity: calc(0.45 + var(--nts-voice-level, 0) * 0.2);
}

@keyframes nts-halo-breathe-b-7h398sv40z {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.035); }
}

@keyframes nts-halo-glow-b-7h398sv40z {
    0%, 100% { filter: drop-shadow(0 0 var(--nts-halo-glow, 3px) currentColor); }
    50%      { filter: drop-shadow(0 0 calc(var(--nts-halo-glow, 3px) * 2.2) currentColor); }
}

@keyframes nts-halo-sway-b-7h398sv40z {
    0%, 100% { transform: rotate(-9deg); }
    50%      { transform: rotate(9deg); }
}

@keyframes nts-halo-blink-b-7h398sv40z {
    0%, 100% { stroke-dasharray: 60 154; }
    45%, 55% { stroke-dasharray: 6 208; }
}

@keyframes nts-halo-think-b-7h398sv40z {
    0%        { transform: rotate(0deg); }
    32%, 50%  { transform: rotate(180deg); }
    82%, 100% { transform: rotate(360deg); }
}

@keyframes nts-halo-ripple-b-7h398sv40z {
    0%   { opacity: 0.55; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.75); }
}

/* Respect reduced motion: the mark still AIMS (that is information, not decoration),
   but stops spinning and breathing. */
@media (prefers-reduced-motion: reduce) {
    .nts-halo[b-7h398sv40z],
    .nts-halo-arc[b-7h398sv40z],
    .nts-halo-drift[b-7h398sv40z],
    .nts-halo-ripple[b-7h398sv40z] {
        animation: none;
    }
    /* Listening still needs a cue; a static faint outer ring says it without motion. */
    .nts-halo--listening .nts-halo-ripple[b-7h398sv40z] {
        opacity: 0.35;
        transform: scale(1.3);
    }
}
/* /Components/Chat/ImagePreviewDialog.razor.rz.scp.css */
/* ===========================
   Full-View Image Preview
   IMG-D-1 (2026-05): full theme-token migration. Pre-fix the dialog had a
   light-default block (white surface, slate text, indigo primary, emerald
   "saved") plus a dark-theme override block. Migrated to a single token-driven
   set of rules so all 8 themes paint correctly without per-theme overrides.
   This closes out the Image surface's theme-graph coverage — same playbook as
   AI-D-1 (Assistant.razor.css) and AI-D-8 (ChatHeader.razor.css).
   =========================== */

.image-preview-overlay[b-qlyxnbtb73] {
    position: fixed;
    inset: 0;
    /* Overlay scrim stays neutral dark — we want the user's eye on the image,
       not on a tinted backdrop. This is one of the cases where intentional
       black-on-color is correct regardless of theme. */
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-qlyxnbtb73 0.2s ease;
}

.image-preview-dialog[b-qlyxnbtb73] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    max-width: 900px;
    width: 92vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px var(--theme-shadow-color, rgba(0, 0, 0, 0.3));
    animation: slideUp-b-qlyxnbtb73 0.25s ease;
}

@keyframes fadeIn-b-qlyxnbtb73 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-qlyxnbtb73 {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.image-preview-header[b-qlyxnbtb73] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--theme-border);
}

.image-preview-header h2[b-qlyxnbtb73] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary);
}

.image-preview-header .close-btn[b-qlyxnbtb73] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: var(--theme-text-secondary);
    transition: all 0.15s ease;
}

.image-preview-header .close-btn:hover[b-qlyxnbtb73] {
    background: var(--theme-secondary);
    color: var(--theme-text-primary);
}

.image-preview-body[b-qlyxnbtb73] {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 24px;
    gap: 20px;
}

.image-preview-main[b-qlyxnbtb73] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Image-mat surface — slightly recessed from the dialog surface so the
       image reads as a framed plate. Uses surface-secondary so themes that
       differentiate primary/secondary surfaces get the recess. */
    background: var(--theme-surface-secondary);
    border-radius: 16px;
    overflow: hidden;
    min-height: 200px;
    position: relative;
}

.image-preview-main img[b-qlyxnbtb73] {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: 12px;
}

/* IMG-V-1 (2026-05): clickable preview state. The dialog crops tall images
   because the body has a constrained max-height; clicking the preview opens
   a viewport-sized lightbox so the full asset is visible. Mirrors
   MediaDetailDialog's .md-preview-clickable. */
.image-preview-clickable[b-qlyxnbtb73] {
    cursor: pointer;
    transition: filter 0.15s ease;
}

.image-preview-clickable:hover[b-qlyxnbtb73] {
    filter: brightness(1.05);
}

.image-preview-clickable:focus-visible[b-qlyxnbtb73] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

.image-preview-expand-hint[b-qlyxnbtb73] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.image-preview-clickable:hover .image-preview-expand-hint[b-qlyxnbtb73],
.image-preview-clickable:focus-visible .image-preview-expand-hint[b-qlyxnbtb73] {
    opacity: 1;
}

.image-preview-info[b-qlyxnbtb73] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.image-preview-section[b-qlyxnbtb73] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-preview-label[b-qlyxnbtb73] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
}

.image-preview-prompt[b-qlyxnbtb73] {
    font-size: 0.95rem;
    color: var(--theme-text-secondary);
    line-height: 1.5;
    font-style: italic;
    margin: 0;
    padding: 12px 16px;
    background: var(--theme-surface-secondary);
    border-radius: 10px;
    border-left: 3px solid var(--theme-primary, #6366f1);
}

.image-preview-meta[b-qlyxnbtb73] {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.image-preview-model[b-qlyxnbtb73],
.image-preview-time[b-qlyxnbtb73] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.image-preview-library-link[b-qlyxnbtb73] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: var(--theme-btn-text, white);
    border-radius: 10px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    width: fit-content;
}

.image-preview-library-link:hover[b-qlyxnbtb73] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
    filter: brightness(1.1);
}

/* "Auto-saved to library" confirmation flows through the success token so the
   green semantic stays consistent with KB / free-mode chips elsewhere. */
.image-preview-autosaved[b-qlyxnbtb73] {
    font-size: 0.8rem;
    color: var(--theme-text-success, #22c55e);
    font-weight: 500;
}

.image-preview-actions[b-qlyxnbtb73] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--theme-border);
}

/* IMG-D-1: dark-theme override block deleted entirely. Pre-fix it patched the
   dialog surface, header border, h2 color, close-btn hover, image-mat surface,
   prompt block, meta text, and actions border across all 6 dark themes — every
   one of those properties now flows through theme tokens that each theme
   already defines correctly. The override was patching symptoms; the base
   rules now treat the disease. */

/* IMG-V-1 (2026-05): fullscreen lightbox. Sits above the dialog overlay
   (z-index: 10001 vs the overlay's 10000) so clicking the constrained preview
   opens a viewport-sized view of the asset. Click on backdrop or the close
   button dismisses; the image itself stops propagation so clicking it doesn't
   collapse the overlay. Pattern mirrors MediaDetailDialog.razor.css's .md-lightbox.
   The neutral-dark backdrop is intentional — same logic as the parent overlay,
   we want focus on the artwork. */
.image-preview-lightbox[b-qlyxnbtb73] {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
    animation: image-preview-lightbox-in-b-qlyxnbtb73 0.2s ease-out;
    padding: 2rem;
}

@keyframes image-preview-lightbox-in-b-qlyxnbtb73 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.image-preview-lightbox-img[b-qlyxnbtb73] {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    animation: image-preview-lightbox-zoom-b-qlyxnbtb73 0.25s ease-out;
}

@keyframes image-preview-lightbox-zoom-b-qlyxnbtb73 {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.image-preview-lightbox-close[b-qlyxnbtb73] {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
    z-index: 1;
}

.image-preview-lightbox-close:hover[b-qlyxnbtb73] {
    background: rgba(255, 255, 255, 0.25);
}

.image-preview-lightbox-close:focus-visible[b-qlyxnbtb73] {
    outline: 2px solid white;
    outline-offset: 2px;
}

/* Responsive */
@media (max-width: 640px) {
    .image-preview-dialog[b-qlyxnbtb73] {
        width: 97vw;
        max-height: 95vh;
        border-radius: 16px;
    }

    .image-preview-body[b-qlyxnbtb73] {
        padding: 16px;
    }

    .image-preview-main img[b-qlyxnbtb73] {
        max-height: 45vh;
    }

    .image-preview-actions[b-qlyxnbtb73] {
        flex-direction: column;
    }

    .image-preview-actions .nts-btn[b-qlyxnbtb73] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Chat/ManageFavoritesDialog.razor.rz.scp.css */
.manage-favorites-dialog[b-kil4ixhlwd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

.manage-favorites-subtitle[b-kil4ixhlwd] {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin: 0;
}

.manage-favorites-loading[b-kil4ixhlwd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    color: var(--theme-text-muted);
    font-size: 0.85rem;
}

.manage-favorites-empty[b-kil4ixhlwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--theme-text-muted);
}

.manage-favorites-empty svg[b-kil4ixhlwd] {
    opacity: 0.4;
}

.empty-title[b-kil4ixhlwd] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.empty-hint[b-kil4ixhlwd] {
    font-size: 0.75rem;
}

/* Favorites List */
.favorites-list[b-kil4ixhlwd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.favorite-row[b-kil4ixhlwd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: var(--theme-surface-secondary);
    transition: all 0.15s ease;
    cursor: grab;
}

.favorite-row:hover[b-kil4ixhlwd] {
    background: var(--theme-hover);
    border-color: var(--theme-border);
}

.favorite-row.dragging[b-kil4ixhlwd] {
    opacity: 0.4;
}

.favorite-row.drag-over[b-kil4ixhlwd] {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.08);
}

/* Drag Handle */
.drag-handle[b-kil4ixhlwd] {
    display: flex;
    align-items: center;
    color: var(--theme-text-muted);
    cursor: grab;
    flex-shrink: 0;
}

.drag-handle:active[b-kil4ixhlwd] {
    cursor: grabbing;
}

/* Order Badge */
.favorite-order-badge[b-kil4ixhlwd] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--theme-primary);
    color: var(--theme-btn-text);
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon */
.favorite-row-icon[b-kil4ixhlwd] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Info */
.favorite-row-info[b-kil4ixhlwd] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.favorite-row-name[b-kil4ixhlwd] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.favorite-row-category[b-kil4ixhlwd] {
    font-size: 0.68rem;
    color: var(--theme-text-muted);
}

/* Actions */
.favorite-row-actions[b-kil4ixhlwd] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.move-btn[b-kil4ixhlwd],
.remove-btn[b-kil4ixhlwd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.move-btn:hover:not(:disabled)[b-kil4ixhlwd] {
    background: var(--theme-hover);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.move-btn:disabled[b-kil4ixhlwd] {
    opacity: 0.3;
    cursor: not-allowed;
}

.remove-btn:hover[b-kil4ixhlwd] {
    background: var(--theme-bg-danger);
    color: var(--theme-text-danger);
}

/* Footer */
.manage-favorites-footer[b-kil4ixhlwd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
}
/* /Components/Chat/ModelSwitchDivider.razor.rz.scp.css */
/* Model Switch Divider — shown when the AI model changes mid-conversation.
   AI-D-5 (2026-05): full theme-token migration. Pre-fix the divider hardcoded
   purple #7c3aed (light) and lavender #a78bfa (dark) — accidentally matched
   Mystic, clashed on Tron (cyan), Nature (green), Ocean (blue), Winter (cyan).
   Now flows through --theme-primary so each theme paints its own accent. */

.model-switch-divider[b-jafszq30r9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin: 8px 0;
}

.divider-line[b-jafszq30r9] {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        color-mix(in srgb, var(--theme-primary, #7c3aed) 30%, transparent),
        color-mix(in srgb, var(--theme-primary, #7c3aed) 30%, transparent),
        transparent
    );
}

.divider-text[b-jafszq30r9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: color-mix(in srgb, var(--theme-primary, #7c3aed) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #7c3aed) 18%, transparent);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    white-space: nowrap;
}

/* AI-D-5: dark-theme override block removed — base rule already adapts via
   var(--theme-primary). Each dark theme exposes its own primary token (Space's
   violet, Tron's cyan, Mystic's amethyst, etc.), so the override was both
   redundant on Space and wrong on the others. */

/* Fade in animation */
.fade-in[b-jafszq30r9] {
    animation: fadeIn-b-jafszq30r9 0.3s ease;
}

@keyframes fadeIn-b-jafszq30r9 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Chat/Mote.razor.rz.scp.css */
/* MOTE-1 (2026-10-18): the point-of-light mark. See Mote.razor for the why. */

.nts-mote[b-biu9w7h5j8] {
    flex: 0 0 auto;        /* GOTCHAS #323: an <svg> has min-content width 0 */
    overflow: visible;     /* the glow and the trail paint outside the box */
    /* HALO-1e: the mark paints ITSELF. Same ink chain as the halo so every host that already
       sets --nts-halo-ink (FAB, bubble, briefing card, hub tab) is correct for free. */
    color: var(--nts-halo-ink, var(--theme-gradient-text, var(--theme-primary, #6366f1)));
}

.nts-mote-core[b-biu9w7h5j8] {
    filter: drop-shadow(0 0 var(--nts-mote-glow, 3px) currentColor);
    transition: r 0.12s linear;
}

.nts-mote-glow[b-biu9w7h5j8] {
    opacity: 0.55;           /* MOTE-2: the gradient carries the fall-off; this is the overall level */
    animation: nts-mote-breathe-b-biu9w7h5j8 5.4s ease-in-out infinite;   /* idle life: the glow breathes */
    transition: r 0.15s linear;
}

.nts-mote-ripple[b-biu9w7h5j8] { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }

/* JS-owned translate lands here (haloLife.js / audioBriefing.js). Eased so a glance SWEEPS. */
.nts-mote-body[b-biu9w7h5j8] {
    transform-box: view-box;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reading: the core swells and the glow brightens with REAL amplitude (VOICE-LEVEL-1).
   `r` is a CSS property on SVG2 circles - px here are user units. The breath animation on the
   glow would outrank the amplitude rule (GOTCHAS #493), so it is off while reading. */
.nts-mote--reading .nts-mote-core[b-biu9w7h5j8] { r: calc(var(--nts-mote-core-r, 9px) + var(--nts-voice-level, 0) * 5px); filter: drop-shadow(0 0 calc(var(--nts-mote-glow, 3px) + var(--nts-voice-level, 0) * 6px) currentColor); }
.nts-mote--reading .nts-mote-glow[b-biu9w7h5j8] { animation: none; opacity: calc(0.55 + var(--nts-voice-level, 0) * 0.45); r: calc(var(--nts-mote-glow-r, 22px) + var(--nts-voice-level, 0) * 10px); }

/* Thinking: haloLife.js orbits the body; the glow holds a little brighter so it reads as working. */
.nts-mote--thinking .nts-mote-glow[b-biu9w7h5j8] { animation: none; opacity: 0.85; }

/* MOTE-2: tiny hosts (bubble 20px, hub tab 16px) are a solo core - see Mote.razor. */
.nts-mote--tiny .nts-mote-glow[b-biu9w7h5j8], .nts-mote--tiny .nts-mote-trail[b-biu9w7h5j8] { display: none; }
.nts-mote--tiny .nts-mote-core[b-biu9w7h5j8] { filter: none; }

/* Listening: rings expand outward from the body. */
.nts-mote--listening .nts-mote-ripple[b-biu9w7h5j8] { animation: nts-mote-ripple-b-biu9w7h5j8 1.8s ease-out infinite; }

/* MOTE-SAY-1 (2026-10-20): the arc - dormant until a state gives it a reason (see Mote.razor).
   The dash values are user units on a 188.5 circumference. Tiny hosts get a heavier stroke so it
   survives at 16px (a 3-unit stroke is half a pixel there). */
.nts-mote-arc[b-biu9w7h5j8] { opacity: 0; transform-box: view-box; transform-origin: 50px 50px; stroke-dasharray: 141 48;
                transition: opacity 0.5s ease, stroke-dasharray 0.6s ease; }
.nts-mote--tiny .nts-mote-arc[b-biu9w7h5j8] { stroke-width: 7; }

/* Something to say: a long open arc, slow turn, and the core gives one small pulse every ~6s. */
.nts-mote--say .nts-mote-arc[b-biu9w7h5j8]  { opacity: 0.9; animation: nts-mote-turn-b-biu9w7h5j8 9s linear infinite; }
.nts-mote--say .nts-mote-core[b-biu9w7h5j8] { filter: drop-shadow(0 0 calc(var(--nts-mote-glow, 3px) * 1.6) currentColor); animation: nts-mote-say-pulse-b-biu9w7h5j8 6s ease-in-out infinite; }
.nts-mote--tiny.nts-mote--say .nts-mote-core[b-biu9w7h5j8] { filter: none; }

/* Thinking: the orbit (haloLife.js) plus a SHORT arc turning fast - the loader read is fine here,
   because here it is true. */
.nts-mote--thinking .nts-mote-arc[b-biu9w7h5j8] { opacity: 0.75; stroke-dasharray: 52 136; animation: nts-mote-turn-b-biu9w7h5j8 1.7s linear infinite; }

/* Done (one-shot, haloLife.js done()): the arc closes to a full ring and dissolves outward. After
   --say in the cascade so it wins while it runs; --say comes back when the class is removed. */
.nts-mote--done .nts-mote-arc[b-biu9w7h5j8] { animation: nts-mote-close-out-b-biu9w7h5j8 1.15s cubic-bezier(0.2, 0.7, 0.2, 1) 1 forwards; }

/* Speaking and listening outrank the arc (the voice is the more immediate thing). */
.nts-mote--reading .nts-mote-arc[b-biu9w7h5j8], .nts-mote--listening .nts-mote-arc[b-biu9w7h5j8] { opacity: 0; animation: none; }
.nts-mote--reading .nts-mote-core[b-biu9w7h5j8] { animation: none; }

/* Blink: the core contracts to a point and re-opens (haloLife.js toggles the class ~440ms). */
.nts-mote--blink .nts-mote-core[b-biu9w7h5j8] { animation: nts-mote-blink-b-biu9w7h5j8 0.42s cubic-bezier(0.4, 0, 0.2, 1) 1; }

@keyframes nts-mote-breathe-b-biu9w7h5j8 { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.75; } }
@keyframes nts-mote-blink-b-biu9w7h5j8   { 0%, 100% { r: var(--nts-mote-core-r, 9px); } 45%, 55% { r: 2px; } }
@keyframes nts-mote-ripple-b-biu9w7h5j8  { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes nts-mote-turn-b-biu9w7h5j8      { to { transform: rotate(360deg); } }
@keyframes nts-mote-say-pulse-b-biu9w7h5j8 { 0%, 88%, 100% { r: var(--nts-mote-core-r, 9px); } 93% { r: calc(var(--nts-mote-core-r, 9px) + 2px); } }
@keyframes nts-mote-close-out-b-biu9w7h5j8 { 0% { opacity: 0.9; stroke-dasharray: 141 48; transform: scale(1); }
                                40% { opacity: 1; stroke-dasharray: 189 0; transform: scale(1); }
                                100% { opacity: 0; stroke-dasharray: 189 0; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
    .nts-mote-glow[b-biu9w7h5j8], .nts-mote-core[b-biu9w7h5j8], .nts-mote-ripple[b-biu9w7h5j8], .nts-mote-arc[b-biu9w7h5j8] { animation: none; }
    .nts-mote--listening .nts-mote-ripple[b-biu9w7h5j8] { opacity: 0.35; transform: scale(1.3); }
    /* MOTE-SAY-1: the arc is information - shown still, never turned. */
    .nts-mote--say .nts-mote-arc[b-biu9w7h5j8], .nts-mote--thinking .nts-mote-arc[b-biu9w7h5j8] { opacity: 0.8; }
    .nts-mote--done .nts-mote-arc[b-biu9w7h5j8] { opacity: 0; }
}
/* /Components/Chat/MyPromptsDropdown.razor.rz.scp.css */
.my-prompts-wrapper[b-b9kj227tcq] {
    position: relative;
}

.my-prompts-btn[b-b9kj227tcq] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.my-prompts-btn svg[b-b9kj227tcq] {
    width: 18px;
    height: 18px;
}

.my-prompts-btn:hover[b-b9kj227tcq] {
    background: rgba(148, 163, 184, 0.1);
    color: #e2e8f0;
    border-color: rgba(148, 163, 184, 0.5);
}

.my-prompts-btn.active[b-b9kj227tcq] {
    background: rgba(var(--theme-accent-rgb, 168, 85, 247), 0.15);
    color: var(--theme-accent, #a855f7);
    border-color: rgba(var(--theme-accent-rgb, 168, 85, 247), 0.4);
}

.my-prompts-btn.has-prompts[b-b9kj227tcq] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

.my-prompts-btn.has-prompts:hover[b-b9kj227tcq] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.5);
}

.prompts-count[b-b9kj227tcq] {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.6rem;
    font-weight: 700;
    background: var(--theme-primary, #6366f1);
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.my-prompts-overlay[b-b9kj227tcq] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.my-prompts-dropdown[b-b9kj227tcq] {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    width: 340px;
    max-height: 400px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: dropdownSlideUp-b-b9kj227tcq 0.15s ease-out;
}

@keyframes dropdownSlideUp-b-b9kj227tcq {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-header[b-b9kj227tcq] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.dropdown-title[b-b9kj227tcq] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
}

.dropdown-search[b-b9kj227tcq] {
    margin-top: 0.5rem;
}

.dropdown-search .search-input[b-b9kj227tcq] {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
}

.prompts-list[b-b9kj227tcq] {
    overflow-y: auto;
    max-height: 320px;
    padding: 0.25rem;
}

.section-label[b-b9kj227tcq] {
    padding: 0.4rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted, #94a3b8);
}

.prompt-item[b-b9kj227tcq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.prompt-item:hover[b-b9kj227tcq] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.prompt-info[b-b9kj227tcq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.prompt-name[b-b9kj227tcq] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--theme-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prompt-preview[b-b9kj227tcq] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.use-count[b-b9kj227tcq] {
    font-size: 0.68rem;
    color: var(--theme-text-muted, #94a3b8);
}

.prompt-actions[b-b9kj227tcq] {
    display: flex;
    gap: 0.15rem;
    opacity: 0;
    transition: opacity 0.12s ease;
    flex-shrink: 0;
}

.prompt-item:hover .prompt-actions[b-b9kj227tcq] {
    opacity: 1;
}

.prompt-action-btn[b-b9kj227tcq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.prompt-action-btn:hover[b-b9kj227tcq] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.prompt-action-btn.danger:hover[b-b9kj227tcq] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.prompt-action-btn.confirm[b-b9kj227tcq] {
    color: #22c55e;
}

.prompt-action-btn.confirm:hover[b-b9kj227tcq] {
    background: rgba(34, 197, 94, 0.12);
}

.rename-input[b-b9kj227tcq] {
    font-size: 0.82rem;
    padding: 0.3rem 0.5rem;
    width: 100%;
}

/* Empty state */
.empty-state[b-b9kj227tcq] {
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text-muted, #94a3b8);
}

.empty-title[b-b9kj227tcq] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #475569);
}

.empty-hint[b-b9kj227tcq] {
    font-size: 0.78rem;
    max-width: 240px;
    line-height: 1.5;
}

/* Dark theme support */
.is-dark .my-prompts-dropdown[b-b9kj227tcq] {
    background: rgba(15, 23, 42, 0.97);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.is-dark .dropdown-header[b-b9kj227tcq] {
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .dropdown-title[b-b9kj227tcq],
.is-dark .prompt-name[b-b9kj227tcq],
.is-dark .empty-title[b-b9kj227tcq] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .prompt-item:hover[b-b9kj227tcq] {
    background: rgba(255, 255, 255, 0.06);
}

/* Light theme adjustments (Executive + Cloud) */
:is(.theme-executive, .theme-cloud) .my-prompts-btn[b-b9kj227tcq] {
    border-color: rgba(148, 163, 184, 0.25);
    color: #94a3b8;
}

:is(.theme-executive, .theme-cloud) .my-prompts-btn:hover[b-b9kj227tcq] {
    background: rgba(99, 102, 241, 0.08);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: rgba(99, 102, 241, 0.3);
}

:is(.theme-executive, .theme-cloud) .my-prompts-btn.active[b-b9kj227tcq] {
    background: rgba(99, 102, 241, 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: rgba(99, 102, 241, 0.35);
}
/* /Components/Chat/ProBot.razor.rz.scp.css */
/* PRO-BOT-1 (2026-08-10): the robot's own behaviour, scoped to the component so it
   travels with the mark instead of living in whichever page happened to draw it first
   (these rules started in Assistant.razor.css when the FAB was the only robot). */

/* AVATAR-SIZE-1 (2026-08-17): the mark must never be SQUEEZED by a flex parent.
   .chat-fab is display:flex at 56x56, and an <svg>'s min-content width is 0, so the
   robot was silently shrunk to the button — which made ProBot's Size parameter INERT:
   75, 88, 120 and 150 all rendered at ~56px and every attempt to match the companion
   looked identical. The companion escapes the same container because its canvas carries
   an explicit inline width (192px + negative margins), which floors its min-content size;
   this gives the robot the same footing.
   Harmless everywhere else: flex-shrink only bites when the container is SMALLER than the
   mark, which is the FAB and nowhere else among the 12 call sites (20-150px).
   🔴 Lives HERE, not in Assistant.razor.css: `.pro-bot` carries THIS component's scope, so
   a host descendant selector cannot reach it — see the note at Assistant.razor.css ~2315
   and GOTCHAS #258. */
.pro-bot[b-gvjz5tj9b1] {
    flex: 0 0 auto;
}

/* The mouth's live value is written straight onto style.transform by audioBriefing.js
   (paintProBotMouth) rather than read from a CSS variable here — a scoped-CSS rule
   behind a :global() ancestor had three silent ways to not match (GOTCHAS #258).
   The rule below is only the RESTING state; JS overrides it while audio plays. */
.pro-bot-mouth[b-gvjz5tj9b1] {
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleY(0.3);
    transition: transform 70ms linear;
}

/* Idle life: an occasional blink so the robot reads as awake in silence. Staggered so
   the eyes don't fire in perfect lockstep (that reads mechanical). */
.pro-bot-eye[b-gvjz5tj9b1] {
    transform-box: fill-box;
    transform-origin: center;
    animation: proBotBlink-b-gvjz5tj9b1 6.5s ease-in-out infinite;
}

.pro-bot-eye--right[b-gvjz5tj9b1] {
    animation-delay: 0.06s;
}

@keyframes proBotBlink-b-gvjz5tj9b1 {
    0%, 93%, 100% { transform: scaleY(1); }
    96%           { transform: scaleY(0.12); }
}


/* ============================================================================
   ROBOT-LIFE-1 (2026-08-18) - idle life, ported from the companion orb's FEEL
   rather than its machinery. The orb is a canvas renderer (companionEntity.js):
   breathing is sin(time * breatheSpeed) * breatheAmt with amt 0.02-0.05, plus
   gaze, wisps and particles. The robot is an SVG in 8 hosts at 30-88px, so the
   translation is CSS on the parts PRO-BOT-1 built to act:
     breathe -> whole-mark bob+sway, ~2-3% amplitude to match the orb's band,
                4.8s period (the orb's breatheSpeed 0.6-1.1 rad/s ~= 5.7-10s;
                slightly quicker reads better on a rigid body than on a blob)
     gaze    -> occasional glance on .pro-bot-gaze, desynced from the blink
     energy  -> antenna-tip heartbeat (the robot's native "status light")
   Percentage transforms + transform-box: fill-box make every motion scale with
   Size automatically - the same keyframes are ~1px of travel at 30px and ~2.5px
   at 88px, so no per-host tuning.
   Periods are deliberately co-prime-ish (4.8 / 6.5 / 9s / 3.7) so the composite
   never visibly loops - the orb's aliveness comes from exactly that non-repetition.
   🔴 The MOUTH stays OUT of this block on purpose: audioBriefing.js writes the
   talking mouth straight onto style.transform, and a CSS ANIMATION (unlike the
   resting rule) would beat that inline style and silently mute the mouth.
   ============================================================================ */

.pro-bot--alive[b-gvjz5tj9b1] {
    animation: proBotBreathe-b-gvjz5tj9b1 4.8s ease-in-out infinite;
}

/* Bob with a whisper of sway and tilt - pure vertical reads as a metronome;
   the off-axis drift is what makes the orb feel organic. */
@keyframes proBotBreathe-b-gvjz5tj9b1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    30%      { transform: translate(0.6%, -2.6%) rotate(0.5deg); }
    50%      { transform: translate(0, -3%) rotate(0deg); }
    70%      { transform: translate(-0.6%, -1.8%) rotate(-0.5deg); }
}

/* Occasional glance: hold centre, look aside, drift back. Runs on the GROUP so it
   composes with the blink on the circles (two transform animations on one element
   would cancel - later wins). 9s vs the blink's 6.5s keeps them drifting apart. */
.pro-bot--alive .pro-bot-gaze[b-gvjz5tj9b1] {
    transform-box: fill-box;
    transform-origin: center;
    animation: proBotGlance-b-gvjz5tj9b1 9s ease-in-out infinite;
}

@keyframes proBotGlance-b-gvjz5tj9b1 {
    0%, 55%, 100% { transform: translateX(0); }
    62%, 78%      { transform: translateX(9%); }   /* ~1.1px of eye travel at 40vb */
    86%           { transform: translateX(-4%); }  /* small overshoot on the return */
}

/* Antenna heartbeat - the robot's equivalent of the orb's energy glow. Scale +
   slight fade, gentle enough to be subliminal at 30px. */
.pro-bot--alive .pro-bot-antenna-tip[b-gvjz5tj9b1] {
    transform-box: fill-box;
    transform-origin: center;
    animation: proBotPulse-b-gvjz5tj9b1 3.7s ease-in-out infinite;
}

@keyframes proBotPulse-b-gvjz5tj9b1 {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(0.82); opacity: 0.72; }
}

/* ROBOT-LIFE-2 v2 (2026-08-18): READING gaze, word-driven. audioBriefing.js toggles
   .pro-bot--reading via setCompanionTalking() (all play/pause/stop/end/error paths),
   and paintProBotGaze() writes the eyes' inline transform from the SAME word cursor
   that bolds the caption - so the eyes sit exactly as far across the line as the
   karaoke highlight, per word, on both audio paths. v1 was a free-running 2.6s CSS
   sweep (Josh: "not really following the words and moving too fast").
   🔴 NO animation on the gaze while reading - a CSS ANIMATION would beat the inline
   per-word writes and silently freeze the tracking (the PRO-MOUTH-1 / #258 trap).
   This rule only kills the idle glance (later-declared, equal specificity), rests the
   eyes at line start, and eases each word-step via the transition. */
.pro-bot--reading .pro-bot-gaze[b-gvjz5tj9b1] {
    animation: none;
    transform: translate(-13%, 11%);
    transition: transform 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .pro-bot-eye[b-gvjz5tj9b1] { animation: none; }
    .pro-bot-mouth[b-gvjz5tj9b1] { transition: none; transform: scaleY(0.55); }
    /* ROBOT-LIFE-1: every idle-life animation off; the mark rests at frame 0. */
    .pro-bot--alive[b-gvjz5tj9b1],
    .pro-bot--alive .pro-bot-gaze[b-gvjz5tj9b1],
    .pro-bot--alive .pro-bot-antenna-tip[b-gvjz5tj9b1] { animation: none; }
    /* ROBOT-LIFE-2: no reading scan either - rest the gaze at a static glance toward
       the caption so the robot still reads as attending, without motion. */
    .pro-bot--reading .pro-bot-gaze[b-gvjz5tj9b1] { animation: none; transition: none; }
}
/* /Components/Chat/SavePromptDialog.razor.rz.scp.css */
.save-prompt-form[b-y7swpm96py] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.save-prompt-label[b-y7swpm96py] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
}

.save-prompt-preview[b-y7swpm96py] {
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    font-size: 0.82rem;
    line-height: 1.5;
}

.preview-label[b-y7swpm96py] {
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--theme-text-muted, #64748b);
    margin-bottom: 0.25rem;
}

.preview-text[b-y7swpm96py] {
    color: var(--theme-text-primary, #334155);
    word-break: break-word;
}

.is-dark .save-prompt-label[b-y7swpm96py] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .preview-text[b-y7swpm96py] {
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .preview-label[b-y7swpm96py] {
    color: rgba(255, 255, 255, 0.5);
}
/* /Components/Chat/SuggestedPromptChips.razor.rz.scp.css */
/* ============================================
   SUGGESTED PROMPT CHIPS - Progressive companion suggestions
   ============================================ */

.prompt-chips[b-dk7ab5sren] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 0 8px 8px;
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
}

/* Fade transitions */
.prompt-chips.fade-in[b-dk7ab5sren] {
    animation: chipFadeIn-b-dk7ab5sren 0.3s ease-out forwards;
}

.prompt-chips.fade-out[b-dk7ab5sren] {
    animation: chipFadeOut-b-dk7ab5sren 0.2s ease-in forwards;
}

@keyframes chipFadeIn-b-dk7ab5sren {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes chipFadeOut-b-dk7ab5sren {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(4px); }
}

/* Individual chip buttons */
.prompt-chip[b-dk7ab5sren] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    border-radius: 20px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    color: var(--theme-text-primary, #334155);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.prompt-chip:hover[b-dk7ab5sren] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.14);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.prompt-chip:active[b-dk7ab5sren] {
    transform: translateY(0);
    box-shadow: none;
}

.chip-icon[b-dk7ab5sren] {
    font-size: 0.85rem;
    flex-shrink: 0;
}

.chip-text[b-dk7ab5sren] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   HORIZONTAL COMPACT LAYOUT (floating chat)
   ============================================ */
.prompt-chips.horizontal[b-dk7ab5sren] {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 6px;
    padding: 4px 8px;
    max-width: 100%;
    scrollbar-width: none;
}

.prompt-chips.horizontal[b-dk7ab5sren]::-webkit-scrollbar {
    display: none;
}

.prompt-chips.horizontal .prompt-chip[b-dk7ab5sren] {
    white-space: nowrap;
    font-size: 0.75rem;
    padding: 4px 10px;
    flex-shrink: 0;
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */
.is-dark .prompt-chip[b-dk7ab5sren] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .prompt-chip:hover[b-dk7ab5sren] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .prompt-chips[b-dk7ab5sren] {
        gap: 6px;
        padding: 0 4px 6px;
    }

    .prompt-chip[b-dk7ab5sren] {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}
/* /Components/Chat/Wisp.razor.rz.scp.css */
/* WISP-1 (2026-10-18): the soft-blob mark. See Wisp.razor for the why. */

.nts-wisp[b-3b10fe5otg] {
    flex: 0 0 auto;        /* GOTCHAS #323: an <svg> has min-content width 0 */
    overflow: visible;     /* the halo paints outside the box when it leans */
    /* HALO-1e: the mark paints ITSELF. Same ink chain as the halo and the mote. */
    color: var(--nts-halo-ink, var(--theme-gradient-text, var(--theme-primary, #6366f1)));
}

/* Everything that moves is JS-painted (haloLife.js). CSS owns only opacity and the ripple. */
.nts-wisp-body[b-3b10fe5otg] { opacity: 0.94; }
.nts-wisp-halo[b-3b10fe5otg] { opacity: 0.11; transition: opacity 0.2s linear; }   /* .14 read heavy on the Home page gradient */
.nts-wisp--reading  .nts-wisp-halo[b-3b10fe5otg] { opacity: calc(0.11 + var(--nts-voice-level, 0) * 0.2); }
.nts-wisp--thinking .nts-wisp-halo[b-3b10fe5otg] { opacity: 0.2; }

.nts-wisp-ripple[b-3b10fe5otg] { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.nts-wisp--listening .nts-wisp-ripple[b-3b10fe5otg] { animation: nts-wisp-ripple-b-3b10fe5otg 1.8s ease-out infinite; }

/* Tiny hosts (bubble 20px, hub tab 16px): solo body, no halo. */
.nts-wisp--tiny .nts-wisp-halo[b-3b10fe5otg] { display: none; }

@keyframes nts-wisp-ripple-b-3b10fe5otg { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

@media (prefers-reduced-motion: reduce) {
    .nts-wisp-ripple[b-3b10fe5otg] { animation: none; }
    .nts-wisp--listening .nts-wisp-ripple[b-3b10fe5otg] { opacity: 0.35; transform: scale(1.3); }
}
/* /Components/CommunityPulse.razor.rz.scp.css */
/* ============================================
   Community Pulse - Social Activity Feed
   ============================================ */

/* Loading animation */
.pulse-loading[b-9itc7yj18g] {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 2rem;
}

.pulse-loading-dot[b-9itc7yj18g] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    animation: pulseDot-b-9itc7yj18g 1.2s ease-in-out infinite;
}

.pulse-loading-dot:nth-child(2)[b-9itc7yj18g] { animation-delay: 0.2s; }
.pulse-loading-dot:nth-child(3)[b-9itc7yj18g] { animation-delay: 0.4s; }

@keyframes pulseDot-b-9itc7yj18g {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ============================================
   Opt-in Card
   ============================================ */
.community-pulse-optin[b-9itc7yj18g] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    max-width: 480px;
    margin: 1.5rem auto;
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.optin-icon[b-9itc7yj18g] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.optin-title[b-9itc7yj18g] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 0.5rem;
}

.optin-description[b-9itc7yj18g] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.optin-actions[b-9itc7yj18g] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ============================================
   Feed Container
   ============================================ */
.community-pulse[b-9itc7yj18g] {
    /* PULSE-MERGE Phase 3.2 (2026-05-14): widened 560 → 720px for desktop
       breathing room. Cap matches the page wrapper in CommunityPulse.razor.css
       (`.community-page`) so the page header + this component's feed cards
       align. Mobile @media block at the bottom of this file overrides for
       narrow screens. When the component embeds in a narrower context (e.g.
       the home hub card), the parent's width constrains it — this cap only
       kicks in on parents wider than 720px. */
    max-width: 720px;
    margin: 1.5rem auto;
    width: 100%;
}

.pulse-header[b-9itc7yj18g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.pulse-title[b-9itc7yj18g] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pulse-title-icon[b-9itc7yj18g] {
    font-size: 1.15rem;
}

.pulse-new-dot[b-9itc7yj18g] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    display: inline-block;
    animation: pulseDot-b-9itc7yj18g 2s ease-in-out infinite;
}

/* Filter tabs */
.pulse-filters[b-9itc7yj18g] {
    display: flex;
    gap: 0.35rem;
}

.pulse-filter-btn[b-9itc7yj18g] {
    background: transparent;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

/* PULSE-TRAP-1 (2026-08-12): the sharing-settings entry point sits in the filter
   row but is an ACTION, not a filter - it must never take the .active treatment
   and should read as a quiet affordance. Pushed to the end of the row so the
   real filters keep their left-to-right reading order. */
.pulse-settings-btn[b-9itc7yj18g] {
    margin-left: auto;
    padding: 4px 10px;
    line-height: 1;
    /* The filter pills are 0.8rem TEXT; this button is a single GLYPH, and at
       0.8rem it read as a speck of dust next to the pill rather than a control.
       Sized up and lifted out of the near-transparent range so it is legible as
       an affordance without competing with the filters for attention. */
    font-size: 0.95rem;
    opacity: 0.85;
}

.pulse-settings-btn:hover[b-9itc7yj18g] {
    opacity: 1;
}

.pulse-filter-btn:hover[b-9itc7yj18g] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.pulse-filter-btn.active[b-9itc7yj18g] {
    /* PC-D-1 (2026-05): heavier theme-tint background + crisper border so the
       active filter pill carries actual visual weight. Was previously a soft
       15%-tint that read almost like a hover state. */
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 22%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 55%, transparent);
    font-weight: 600;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
}

/* ============================================
   Empty State
   ============================================ */
.pulse-empty[b-9itc7yj18g] {
    text-align: center;
    padding: 2rem 1rem;
}

.pulse-empty-icon[b-9itc7yj18g] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.pulse-empty-title[b-9itc7yj18g] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.pulse-empty-desc[b-9itc7yj18g] {
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   Feed Cards
   ============================================ */
.pulse-feed[b-9itc7yj18g] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pulse-card[b-9itc7yj18g] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    padding: 1rem 1.15rem;
    /* PC-D-2 (2026-05): added transform to the transition so the hover lift
       animates smoothly with the shadow + border colour change. */
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pulse-card:hover[b-9itc7yj18g] {
    /* PC-D-2 (2026-05): 2px lift matches Goals/Tasks/Memories hover convention
       across the app — gives the surface a consistent "interactive surface"
       feel instead of feeling visually stuck. */
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--theme-shadow-color, rgba(0, 0, 0, 0.08));
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.pulse-card.own-event[b-9itc7yj18g] {
    border-left: 3px solid var(--theme-primary, #6366f1);
}

/* PC2-D-1 (2026-05): event-type accent border-left. Streak hits feel warm,
   evolutions feel primary, goals feel successful, achievements feel earned.
   Each accent is a 3px left border tinted from a semantic theme token, with
   a subtle background shimmer in the same hue so the differentiation reads
   without being loud. .own-event still wins via specificity for the user's
   own posts (theme-primary). */
.pulse-card.evt-evolution[b-9itc7yj18g] { border-left-color: var(--theme-primary, #6366f1); }
.pulse-card.evt-streak[b-9itc7yj18g]    { border-left: 3px solid var(--theme-warning, #f59e0b); }
.pulse-card.evt-goal[b-9itc7yj18g]      { border-left: 3px solid var(--theme-text-success, #10b981); }
.pulse-card.evt-achievement[b-9itc7yj18g] { border-left: 3px solid #fbbf24; /* gold; semantic */ }
.pulse-card.evt-tool[b-9itc7yj18g]      { border-left: 3px solid var(--theme-text-secondary, #64748b); }
.pulse-card.evt-awakening[b-9itc7yj18g] { border-left: 3px solid var(--theme-accent, #818cf8); }
.pulse-card.evt-update[b-9itc7yj18g]    { border-left: 3px solid var(--theme-primary, #6366f1); }

/* Subtle background tint per event type — barely-perceptible color bleed
   from the left edge so the card body picks up the event-type cue without
   the border being the only signal. */
.pulse-card.evt-streak[b-9itc7yj18g] {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--theme-warning, #f59e0b) 6%, var(--theme-surface, #ffffff)) 0%,
        var(--theme-surface, #ffffff) 25%);
}
.pulse-card.evt-goal[b-9itc7yj18g] {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--theme-text-success, #10b981) 6%, var(--theme-surface, #ffffff)) 0%,
        var(--theme-surface, #ffffff) 25%);
}
.pulse-card.evt-evolution[b-9itc7yj18g],
.pulse-card.evt-awakening[b-9itc7yj18g],
.pulse-card.evt-update[b-9itc7yj18g] {
    background: linear-gradient(to right,
        color-mix(in srgb, var(--theme-primary, #6366f1) 6%, var(--theme-surface, #ffffff)) 0%,
        var(--theme-surface, #ffffff) 25%);
}

/* PC2-V-1 (2026-05): manual share composer styling. Collapsed CTA is a
   soft theme-tinted button; expanded state shows textarea + char counter +
   Cancel/Post actions. Sits above the filter row so it's the first thing
   users see when they want to add something. */
.pulse-composer[b-9itc7yj18g] {
    margin-bottom: 1rem;
}

.pulse-composer-cta[b-9itc7yj18g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px dashed color-mix(in srgb, var(--theme-primary, #6366f1) 35%, var(--theme-border, #e2e8f0));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 4%, transparent);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}

.pulse-composer-cta:hover[b-9itc7yj18g] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 10%, transparent);
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.pulse-composer-icon[b-9itc7yj18g] {
    font-size: 1.1rem;
}

.pulse-composer.open[b-9itc7yj18g] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    padding: 0.75rem;
}

.pulse-composer-text[b-9itc7yj18g] {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--theme-text-primary, #1e293b);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 72px;
    outline: none;
}

.pulse-composer-text[b-9itc7yj18g]::placeholder {
    color: var(--theme-text-muted, #94a3b8);
}

.pulse-composer-footer[b-9itc7yj18g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.pulse-composer-count[b-9itc7yj18g] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.pulse-composer-count.near-limit[b-9itc7yj18g] {
    color: var(--theme-warning, #f59e0b);
    font-weight: 600;
}

.pulse-composer-actions[b-9itc7yj18g] {
    display: flex;
    gap: 0.5rem;
}

/* PC2-F-1 / PC2-F-2 (2026-05): pulse-new-dot upgraded from passive span to
   active button. Tappable — flips _hasNewActivity false and refreshes the
   feed. Same visual treatment, plus pointer cursor + focus ring. */
button.pulse-new-dot[b-9itc7yj18g] {
    border: none;
    padding: 0;
    cursor: pointer;
}

button.pulse-new-dot:focus-visible[b-9itc7yj18g] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

.pulse-card-header[b-9itc7yj18g] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.pulse-card-avatar[b-9itc7yj18g] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

/* PC-Hotfix-3 (2026-05): companion-snapshot avatar wrapper, slimmed from 44px
   → 36px. Wrapper is now a `<button>` so clicking the avatar toggles inline
   history when the user has more than one event. The button reset removes
   default browser styling so it looks identical to the prior `<div>` until
   you hover. */
.pulse-card-companion-wrap[b-9itc7yj18g] {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
    border-radius: 50%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pulse-card-companion-wrap.has-history[b-9itc7yj18g] {
    cursor: pointer;
}

.pulse-card-companion-wrap.has-history:hover[b-9itc7yj18g] {
    transform: scale(1.08);
}

.pulse-card-companion-wrap.has-history:focus-visible[b-9itc7yj18g] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 3px;
}

.pulse-card-companion-wrap.history-expanded[b-9itc7yj18g] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary, #6366f1) 40%, transparent);
}

.pulse-card-companion-wrap[b-9itc7yj18g]  .companion-entity,
.pulse-card-companion-wrap[b-9itc7yj18g]  .companion-avatar {
    width: 100%;
    height: 100%;
}

/* PC-Hotfix-3 (2026-05): event badge moved from over-the-companion absolute
   overlay to a margin-left chip just to the right of the avatar. Cleaner
   read at the smaller size — the prior bottom-right corner overlap looked
   like the badge was painted ON the companion. Now it's clearly a separate
   element, sized to match line-height of the surrounding meta. */
.pulse-card-event-badge[b-9itc7yj18g] {
    margin-left: 0.4rem;
    align-self: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--theme-surface-secondary, #f1f5f9);
    border: 1px solid var(--theme-border, #e2e8f0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    line-height: 1;
    flex-shrink: 0;
    pointer-events: none;
}

.pulse-card-meta[b-9itc7yj18g] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.pulse-card-name[b-9itc7yj18g] {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--theme-text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pulse-companion-badge[b-9itc7yj18g] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    padding: 1px 8px;
    border-radius: 10px;
}

.pulse-card-time[b-9itc7yj18g] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.pulse-species-badge[b-9itc7yj18g] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.pulse-card-body[b-9itc7yj18g] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #475569);
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

/* ============================================
   Reactions
   ============================================ */
.pulse-reactions[b-9itc7yj18g] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pulse-reaction-chip[b-9itc7yj18g] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.pulse-reaction-chip:hover[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.pulse-reaction-chip.reacted[b-9itc7yj18g] {
    border-color: var(--theme-primary, #6366f1);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.14);
}

.reaction-count[b-9itc7yj18g] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    font-weight: 600;
}

/* Reaction add button */
.pulse-reaction-picker-container[b-9itc7yj18g] {
    position: relative;
}

.pulse-reaction-add[b-9itc7yj18g] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px dashed var(--theme-border, #cbd5e1);
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-family: inherit;
}

.pulse-reaction-add:hover[b-9itc7yj18g] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
}

/* Reaction picker popover */
.pulse-reaction-picker[b-9itc7yj18g] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 6px 8px;
    display: flex;
    gap: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 100;
    animation: pickerFadeIn-b-9itc7yj18g 0.15s ease;
}

@keyframes pickerFadeIn-b-9itc7yj18g {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.pulse-reaction-option[b-9itc7yj18g] {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-reaction-option:hover[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    transform: scale(1.2);
}

.pulse-reaction-option.selected[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

/* ============================================
   See more / See less toggle
   ============================================ */
.pulse-toggle-btn[b-9itc7yj18g] {
    display: block;
    width: 100%;
    background: transparent;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    padding: 8px;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.pulse-toggle-btn:hover[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-color: var(--theme-primary, #6366f1);
}

/* ============================================
   Pending Approvals (Tier 2)
   ============================================ */
.pulse-pending-section[b-9itc7yj18g] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--theme-border, #e2e8f0);
}

.pulse-pending-label[b-9itc7yj18g] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 0.5rem;
}

.pulse-pending-card[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.5rem;
}

.pulse-pending-text[b-9itc7yj18g] {
    font-size: 0.88rem;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 0.6rem;
    line-height: 1.4;
}

.pulse-pending-actions[b-9itc7yj18g] {
    display: flex;
    gap: 0.5rem;
}

/* ============================================
   PULSE-MERGE Phase 2b (2026-05-14) — Comment thread + own-post kebab
   ============================================ */

.pulse-card-comments[b-9itc7yj18g] {
    margin-top: 0.75rem;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    padding-top: 0.6rem;
}

.pulse-comments-toggle[b-9itc7yj18g] {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 0.3rem;
    transition: background 100ms ease, color 100ms ease;
}

.pulse-comments-toggle:hover[b-9itc7yj18g] {
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
    color: var(--theme-text-primary, #1e293b);
}

.pulse-comments-thread[b-9itc7yj18g] {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pulse-comments-loading[b-9itc7yj18g],
.pulse-comments-empty[b-9itc7yj18g] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8rem;
    padding: 0.5rem 0.3rem;
    font-style: italic;
}

.pulse-comment[b-9itc7yj18g] {
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.03));
    border-radius: 0.5rem;
    padding: 0.5rem 0.65rem;
    font-size: 0.85rem;
}

.pulse-comment--reply[b-9itc7yj18g] {
    margin-left: 1.25rem;
    background: transparent;
    border-left: 2px solid var(--theme-border, rgba(0, 0, 0, 0.12));
    border-radius: 0;
    padding-left: 0.75rem;
}

.pulse-comment--deleted .pulse-comment-body[b-9itc7yj18g] {
    font-style: italic;
    color: var(--theme-text-secondary, #94a3b8);
}

.pulse-comment-header[b-9itc7yj18g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.pulse-comment-author[b-9itc7yj18g] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.82rem;
}

.pulse-comment-time[b-9itc7yj18g] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.72rem;
}

.pulse-comment-delete[b-9itc7yj18g] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--theme-text-secondary, #94a3b8);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0 0.3rem;
    border-radius: 0.25rem;
}

.pulse-comment-delete:hover[b-9itc7yj18g] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.pulse-comment-body[b-9itc7yj18g] {
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.pulse-comment-reply-btn[b-9itc7yj18g] {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    margin-top: 0.3rem;
    border-radius: 0.25rem;
}

.pulse-comment-reply-btn:hover[b-9itc7yj18g] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
}

.pulse-comment-replies[b-9itc7yj18g] {
    margin-top: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pulse-comment-composer[b-9itc7yj18g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--theme-border, rgba(0, 0, 0, 0.08));
}

.pulse-comment-replying-chip[b-9itc7yj18g] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    background: rgba(99, 102, 241, 0.12);
    color: var(--theme-text-primary, #1e293b);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

.pulse-comment-reply-cancel[b-9itc7yj18g] {
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0;
}

.pulse-comment-input[b-9itc7yj18g] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

.pulse-comment-composer button[b-9itc7yj18g] {
    align-self: flex-end;
}

/* Own-post kebab menu */
.pulse-card-kebab[b-9itc7yj18g] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.pulse-kebab-btn[b-9itc7yj18g] {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary, #64748b);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    line-height: 1;
}

.pulse-kebab-btn:hover[b-9itc7yj18g] {
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.06));
    color: var(--theme-text-primary, #1e293b);
}

.pulse-kebab-menu[b-9itc7yj18g] {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 140px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.45rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0.3rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.pulse-kebab-item[b-9itc7yj18g] {
    background: transparent;
    border: none;
    text-align: left;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.85rem;
    border-radius: 0.3rem;
}

.pulse-kebab-item:hover[b-9itc7yj18g] {
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.05));
}

.pulse-kebab-item--danger[b-9itc7yj18g] {
    color: #ef4444;
}

.pulse-kebab-item--danger:hover[b-9itc7yj18g] {
    background: rgba(239, 68, 68, 0.1);
}

.pulse-kebab-backdrop[b-9itc7yj18g] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 99;
}

/* Card needs position:relative for the absolute-positioned kebab. */
.pulse-card[b-9itc7yj18g] {
    position: relative;
}

/* Pinned + Edited badges */
.pulse-card-pinned-badge[b-9itc7yj18g],
.pulse-card-edited-badge[b-9itc7yj18g] {
    display: inline-block;
    margin-top: 0.4rem;
    margin-right: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
}

.pulse-card-pinned-badge[b-9itc7yj18g] {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.pulse-card-edited-badge[b-9itc7yj18g] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 400;
    font-style: italic;
    padding: 0;
}

/* Edit-modal form helpers */
.pulse-edit-form[b-9itc7yj18g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pulse-edit-textarea[b-9itc7yj18g] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.45rem;
    font-family: inherit;
    font-size: 0.95rem;
    resize: vertical;
    min-height: 120px;
}

.pulse-edit-counter[b-9itc7yj18g] {
    align-self: flex-end;
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

.pulse-edit-counter.near-limit[b-9itc7yj18g] {
    color: #d97706;
}

/* Dark-theme overrides for the new chrome (mirrors the existing
   :is(.theme-space, ...) block below). */
.is-dark .pulse-comment[b-9itc7yj18g] {
    background: rgba(255, 255, 255, 0.04);
}

.is-dark .pulse-comment--reply[b-9itc7yj18g] {
    background: transparent;
    border-left-color: rgba(255, 255, 255, 0.15);
}

.is-dark .pulse-comment-input[b-9itc7yj18g],
.is-dark .pulse-edit-textarea[b-9itc7yj18g] {
    background: rgba(15, 23, 42, 0.6);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .pulse-kebab-menu[b-9itc7yj18g] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.12);
}

.is-dark .pulse-kebab-item[b-9itc7yj18g] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .pulse-kebab-item:hover[b-9itc7yj18g] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .pulse-card-pinned-badge[b-9itc7yj18g] {
    background: rgba(245, 158, 11, 0.22);
    color: #fbbf24;
}

/* ============================================
   Dark Theme Support
   ============================================ */
.is-dark .community-pulse-optin[b-9itc7yj18g],
.is-dark .pulse-card[b-9itc7yj18g] {
    background: var(--theme-surface, #ffffff);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.is-dark .pulse-card:hover[b-9itc7yj18g] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
    box-shadow: 0 4px 16px var(--theme-shadow-color, rgba(0, 0, 0, 0.2));
}

.is-dark .pulse-filter-btn[b-9itc7yj18g] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    color: var(--theme-text-muted, #94a3b8);
}

.is-dark .pulse-reaction-picker[b-9itc7yj18g] {
    background: var(--theme-surface-secondary, #0a0a12);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.is-dark .pulse-reaction-chip[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
}

.is-dark .pulse-reaction-chip:hover[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.is-dark .pulse-reaction-add[b-9itc7yj18g] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    color: var(--theme-text-muted, #94a3b8);
}

.is-dark .pulse-toggle-btn[b-9itc7yj18g] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .pulse-toggle-btn:hover[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

.is-dark .pulse-pending-card[b-9itc7yj18g] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .pulse-pending-section[b-9itc7yj18g] {
    border-top-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

/* ============================================
   PC-V-1 / PC-V-2 / PC-F-5 (2026-05)
   Empty-state CTAs + quick-reactions + picker backdrop
   ============================================ */

/* Empty-state CTA cluster — gives the "It's quiet for now" panel real exits. */
.pulse-empty-actions[b-9itc7yj18g] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Quick-reaction one-tap buttons (top 3 emojis, surfaced inline). Visually
   distinct from the existing reaction-chips (which carry a count) — these
   are dashed-circle "tap to add" affordances so the user can tell the
   difference between an existing tally and a fresh-tap option. */
.pulse-reaction-quick[b-9itc7yj18g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    border-radius: 16px;
    border: 1px dashed color-mix(in srgb, var(--theme-primary, #6366f1) 25%, var(--theme-border, #e2e8f0));
    background: transparent;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    padding: 0;
    line-height: 1;
    font-family: inherit;
}

.pulse-reaction-quick:hover[b-9itc7yj18g] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 10%, transparent);
    border-color: var(--theme-primary, #6366f1);
    transform: scale(1.1);
}

/* Click-outside backdrop for the reaction picker. Transparent — its only
   purpose is to capture the off-picker click. Sits below the picker
   (z-index 100) but above the rest of the page chrome. */
.pulse-reaction-picker-backdrop[b-9itc7yj18g] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 50;
}

/* PC-Hotfix-3 (2026-05): inline history block — appears below a card when
   the user clicks the companion avatar. Quiet visual treatment (slightly
   indented, smaller text, dashed top divider) so the primary card stays
   the focal element and the history reads as supplementary timeline. */
.pulse-card-history[b-9itc7yj18g] {
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px dashed color-mix(in srgb, var(--theme-primary, #6366f1) 25%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pulse-history-row[b-9itc7yj18g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0.4rem;
    font-size: 0.82rem;
}

.pulse-history-emoji[b-9itc7yj18g] {
    flex-shrink: 0;
    font-size: 0.95rem;
    line-height: 1;
}

.pulse-history-text[b-9itc7yj18g] {
    flex: 1;
    color: var(--theme-text-secondary, #475569);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pulse-history-time[b-9itc7yj18g] {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 600px) {
    .community-pulse[b-9itc7yj18g],
    .community-pulse-optin[b-9itc7yj18g] {
        margin: 1rem 0.5rem;
    }

    .pulse-header[b-9itc7yj18g] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* PC2-D-2 (2026-05): tighten card chrome on narrow viewports — reactions
       row was crowding when count chips, quick-react buttons, and "+" all
       fought for space. Smaller gap + allow wrap so everything fits. */
    .pulse-card[b-9itc7yj18g] {
        padding: 0.85rem 0.9rem;
    }

    .pulse-reactions[b-9itc7yj18g] {
        gap: 0.25rem;
    }

    .pulse-reaction-quick[b-9itc7yj18g],
    .pulse-reaction-add[b-9itc7yj18g] {
        width: 28px;
        height: 26px;
    }

    /* Composer textarea breathes a bit less to keep the post button visible
       above the keyboard on small phones. */
    .pulse-composer-text[b-9itc7yj18g] {
        min-height: 60px;
        font-size: 0.9rem;
    }

    /* Companion wrapper + badge stack tighter so the meta row doesn't shove
       the time off-screen. The badge keeps its size — just less margin. */
    .pulse-card-event-badge[b-9itc7yj18g] {
        margin-left: 0.25rem;
        width: 20px;
        height: 20px;
        font-size: 0.7rem;
    }

    /* History row truncation has more room to breathe at smaller font. */
    .pulse-history-row[b-9itc7yj18g] {
        font-size: 0.78rem;
        gap: 0.4rem;
    }
}
/* /Components/Contacts/ContactSocialSection.razor.rz.scp.css */
/* ============================================
   CONTACT SOCIAL SECTION
   Uses CSS variables from theme-variables.css
   for automatic theme adaptation.
   ============================================ */

.contact-social-section[b-vbxai2bpxh] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    padding: 20px;
    /* Flat shadow matches the .detail-card sibling on this same page so the
       two cards visually rhyme. Previously used --theme-shadow-color which
       in the Mystic/Tron themes resolves to a strong purple, causing the
       Social Media card to glow more loudly than the Contact Information
       card next to it and pulling visual focus away from the contact's
       identity. See DECISIONS.md → "2026-04-29: CRM detail-pages polish
       arc → Contacts polish bundle". */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--theme-border, #e2e8f0);
}

/* Section Header */
.section-header[b-vbxai2bpxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.header-title[b-vbxai2bpxh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-title svg[b-vbxai2bpxh] {
    color: var(--theme-accent, #475569);
}

.header-title h2[b-vbxai2bpxh] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
}

.unread-badge[b-vbxai2bpxh] {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.btn-add[b-vbxai2bpxh] {
    padding: 6px;
    border-radius: 8px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border: none;
    cursor: pointer;
    color: var(--theme-text-secondary, #64748b);
    transition: all 0.2s;
}

.btn-add:hover[b-vbxai2bpxh] {
    background: var(--theme-border, #e2e8f0);
    color: var(--theme-text-primary, #1e293b);
}

/* Loading & Empty States */
.loading-state[b-vbxai2bpxh],
.empty-state[b-vbxai2bpxh] {
    text-align: center;
    padding: 24px;
    color: var(--theme-text-secondary, #64748b);
}

.loading-spinner-sm[b-vbxai2bpxh] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #334155);
    border-radius: 50%;
    animation: spin-b-vbxai2bpxh 1s linear infinite;
    margin: 0 auto 8px;
}

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

.empty-state p[b-vbxai2bpxh] {
    margin-bottom: 12px;
}

/* Social Profiles Row */
.profiles-row[b-vbxai2bpxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.profile-chip[b-vbxai2bpxh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.2s;
    position: relative;
}

.profile-chip .platform-icon[b-vbxai2bpxh] {
    font-size: 1rem;
}

.profile-chip .username[b-vbxai2bpxh] {
    color: inherit;
    font-weight: 500;
}

.profile-chip .verified-badge[b-vbxai2bpxh] {
    color: #3b82f6;
    font-size: 0.75rem;
}

.profile-chip .btn-remove[b-vbxai2bpxh] {
    display: none;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: #ef4444;
    color: white;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
}

.profile-chip:hover .btn-remove[b-vbxai2bpxh] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Platform-specific colors */
.profile-chip.linkedin[b-vbxai2bpxh] { background: #e8f4fc; color: #0077b5; }
.profile-chip.twitter[b-vbxai2bpxh] { background: #e8f4fc; color: #1da1f2; }
.profile-chip.instagram[b-vbxai2bpxh] { background: #fce7f3; color: #e4405f; }
.profile-chip.facebook[b-vbxai2bpxh] { background: #e8f0fe; color: #1877f2; }
.profile-chip.youtube[b-vbxai2bpxh] { background: #fee2e2; color: #ff0000; }
.profile-chip.tiktok[b-vbxai2bpxh] { background: #f3e8ff; color: #000000; }
.profile-chip.bluesky[b-vbxai2bpxh] { background: #dbeafe; color: #0085ff; }

.profile-chip:hover[b-vbxai2bpxh] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Activity Section */
.activity-section[b-vbxai2bpxh] {
    margin-bottom: 16px;
}

.activity-header[b-vbxai2bpxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.activity-header h3[b-vbxai2bpxh] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #475569);
    margin: 0;
}

.activity-list[b-vbxai2bpxh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item[b-vbxai2bpxh] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 8px;
    transition: all 0.2s;
}

.activity-item.unread[b-vbxai2bpxh] {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}

.activity-item.related[b-vbxai2bpxh] {
    border-left: 3px solid #10b981;
}

.activity-icon[b-vbxai2bpxh] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.activity-content[b-vbxai2bpxh] {
    flex: 1;
    min-width: 0;
}

.activity-summary[b-vbxai2bpxh] {
    display: block;
    font-size: 0.85rem;
    color: var(--theme-text-primary, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-meta[b-vbxai2bpxh] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
    margin-top: 4px;
}

.platform-badge[b-vbxai2bpxh] {
    font-size: 0.85rem;
}

.related-tag[b-vbxai2bpxh] {
    background: #d1fae5;
    color: #059669;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
}

.activity-link[b-vbxai2bpxh] {
    color: var(--theme-text-secondary, #64748b);
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.activity-link:hover[b-vbxai2bpxh] {
    background: var(--theme-border, #e2e8f0);
    color: var(--theme-text-primary, #1e293b);
}

/* Engagement Section */
.engagement-section[b-vbxai2bpxh] {
    padding-top: 12px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.engagement-section h3[b-vbxai2bpxh] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #475569);
    margin: 0 0 10px;
}

.engagement-list[b-vbxai2bpxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.engagement-item[b-vbxai2bpxh] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 4px;
    font-size: 0.8rem;
}

.engagement-type[b-vbxai2bpxh] {
    color: var(--theme-text-secondary, #475569);
}

.engagement-date[b-vbxai2bpxh] {
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.75rem;
}

/* Buttons */
.btn[b-vbxai2bpxh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-sm[b-vbxai2bpxh] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-xs[b-vbxai2bpxh] {
    padding: 4px 8px;
    font-size: 0.75rem;
}

.btn-primary[b-vbxai2bpxh] {
    background: var(--theme-primary, #334155);
    color: var(--theme-btn-text, white);
}

.btn-primary:hover[b-vbxai2bpxh] {
    opacity: 0.9;
}

.btn-outline[b-vbxai2bpxh] {
    background: transparent;
    border: 1px solid var(--theme-border, #e2e8f0);
    color: var(--theme-text-secondary, #475569);
}

.btn-outline:hover[b-vbxai2bpxh] {
    background: var(--theme-surface-secondary, #f1f5f9);
}

.btn-link[b-vbxai2bpxh] {
    background: none;
    border: none;
    color: var(--theme-accent, #475569);
    padding: 0;
}

.btn-link:hover[b-vbxai2bpxh] {
    text-decoration: underline;
}

/* Form Elements */
.form-group[b-vbxai2bpxh] {
    margin-bottom: 16px;
}

.form-group:last-child[b-vbxai2bpxh] {
    margin-bottom: 0;
}

.form-group label[b-vbxai2bpxh] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #475569);
    margin-bottom: 6px;
}

.form-group input[b-vbxai2bpxh],
.form-group select[b-vbxai2bpxh],
.form-group textarea[b-vbxai2bpxh] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-surface, #ffffff);
}

.form-group input:focus[b-vbxai2bpxh],
.form-group select:focus[b-vbxai2bpxh],
.form-group textarea:focus[b-vbxai2bpxh] {
    outline: none;
    border-color: var(--theme-primary, #334155);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 51, 65, 85), 0.1);
}

.help-text[b-vbxai2bpxh] {
    display: block;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
    margin-top: 4px;
}

/* ============================================
   DARK THEME OVERRIDES — All 6 dark themes
   ============================================ */
.is-dark .contact-social-section[b-vbxai2bpxh] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .section-header[b-vbxai2bpxh] {
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .btn-add[b-vbxai2bpxh] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .activity-item[b-vbxai2bpxh] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .activity-item.unread[b-vbxai2bpxh] {
    background: rgba(59, 130, 246, 0.15);
}

.is-dark .engagement-item[b-vbxai2bpxh] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .engagement-section[b-vbxai2bpxh] {
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .form-group input[b-vbxai2bpxh],
.is-dark .form-group select[b-vbxai2bpxh],
.is-dark .form-group textarea[b-vbxai2bpxh] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.2);
    color: white;
}
/* /Components/Contacts/JourneyTimeline.razor.rz.scp.css */
/* ============================================
   JOURNEY TIMELINE COMPONENT
   Uses CSS variables from theme-variables.css
   for automatic theme adaptation.
   ============================================ */

.journey-timeline[b-olmxmhmzcq] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    overflow: hidden;
}

/* Header */
.timeline-header[b-olmxmhmzcq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #ffffff);
}

.header-left[b-olmxmhmzcq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon[b-olmxmhmzcq] {
    width: 24px;
    height: 24px;
    color: var(--theme-accent, #475569);
}

.timeline-header h3[b-olmxmhmzcq] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.engagement-badge[b-olmxmhmzcq] {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.health-excellent[b-olmxmhmzcq] { background: linear-gradient(135deg, #10b981, #059669); }
.health-good[b-olmxmhmzcq] { background: linear-gradient(135deg, #22c55e, #16a34a); }
.health-warning[b-olmxmhmzcq] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.health-danger[b-olmxmhmzcq] { background: linear-gradient(135deg, #ef4444, #dc2626); }
.health-inactive[b-olmxmhmzcq] { background: linear-gradient(135deg, #94a3b8, #64748b); }

.header-actions[b-olmxmhmzcq] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-olmxmhmzcq] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--theme-text-secondary, #64748b);
}

.btn-icon:hover[b-olmxmhmzcq] {
    background: var(--theme-border, #e2e8f0);
    color: var(--theme-accent, #475569);
}

.btn-icon.active[b-olmxmhmzcq] {
    background: var(--theme-primary, #334155);
    color: var(--theme-btn-text, white);
}

.btn-icon svg[b-olmxmhmzcq] {
    width: 20px;
    height: 20px;
}

/* Engagement Summary */
.engagement-summary[b-olmxmhmzcq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.summary-stat[b-olmxmhmzcq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-value[b-olmxmhmzcq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.stat-label[b-olmxmhmzcq] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.type-breakdown[b-olmxmhmzcq] {
    flex-direction: row;
    gap: 12px;
}

.type-count[b-olmxmhmzcq] {
    font-size: 0.85rem;
}

.score-excellent[b-olmxmhmzcq] { color: #10b981; }
.score-good[b-olmxmhmzcq] { color: #22c55e; }
.score-fair[b-olmxmhmzcq] { color: #f59e0b; }
.score-low[b-olmxmhmzcq] { color: #94a3b8; }

/* Filter Bar */
.filter-bar[b-olmxmhmzcq] {
    display: flex;
    gap: 12px;
    padding: 12px 20px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.filter-select[b-olmxmhmzcq] {
    padding: 8px 12px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    background: var(--theme-surface, #ffffff);
    font-size: 0.875rem;
    color: var(--theme-text-primary, #374151);
    cursor: pointer;
}

.btn-text[b-olmxmhmzcq] {
    background: none;
    border: none;
    color: var(--theme-accent, #475569);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 8px 12px;
}

.btn-text:hover[b-olmxmhmzcq] {
    text-decoration: underline;
}

/* Add Form */
.add-touchpoint-form[b-olmxmhmzcq] {
    padding: 20px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.add-touchpoint-form h4[b-olmxmhmzcq] {
    margin: 0 0 16px;
    font-size: 1rem;
    color: var(--theme-text-primary, #1e293b);
}

.form-grid[b-olmxmhmzcq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group[b-olmxmhmzcq] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width[b-olmxmhmzcq] {
    grid-column: span 2;
}

.form-group label[b-olmxmhmzcq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input[b-olmxmhmzcq],
.form-group select[b-olmxmhmzcq],
.form-group textarea[b-olmxmhmzcq] {
    padding: 10px 12px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-surface, #ffffff);
}

.form-group input:focus[b-olmxmhmzcq],
.form-group select:focus[b-olmxmhmzcq],
.form-group textarea:focus[b-olmxmhmzcq] {
    outline: none;
    border-color: var(--theme-primary, #334155);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 51, 65, 85), 0.1);
}

.form-actions[b-olmxmhmzcq] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.btn-secondary[b-olmxmhmzcq] {
    padding: 10px 20px;
    border: 1px solid var(--theme-border, #d1d5db);
    background: var(--theme-surface, #ffffff);
    border-radius: 8px;
    font-size: 0.875rem;
    cursor: pointer;
    color: var(--theme-text-primary, #1e293b);
    transition: all 0.2s;
}

.btn-secondary:hover[b-olmxmhmzcq] {
    background: var(--theme-surface-secondary, #f1f5f9);
}

.btn-primary[b-olmxmhmzcq] {
    padding: 10px 20px;
    border: none;
    background: var(--theme-primary, #334155);
    color: var(--theme-btn-text, white);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover[b-olmxmhmzcq] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 51, 65, 85), 0.3);
}

.btn-primary:disabled[b-olmxmhmzcq] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Timeline Content */
.timeline-content[b-olmxmhmzcq] {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

.timeline-loading[b-olmxmhmzcq],
.timeline-empty[b-olmxmhmzcq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--theme-text-secondary, #64748b);
    gap: 12px;
}

.timeline-loading .loading-spinner[b-olmxmhmzcq],
.timeline-empty svg[b-olmxmhmzcq] {
    width: 48px;
    height: 48px;
    opacity: 0.5;
}

.loading-spinner[b-olmxmhmzcq] {
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #334155);
    border-radius: 50%;
    animation: spin-b-olmxmhmzcq 0.8s linear infinite;
}

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

/* Timeline List */
.timeline-list[b-olmxmhmzcq] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.timeline-date-group[b-olmxmhmzcq] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.date-header[b-olmxmhmzcq] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--theme-border, #e2e8f0);
}

.timeline-item[b-olmxmhmzcq] {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-left: 2px solid var(--theme-border, #e2e8f0);
    margin-left: 12px;
    padding-left: 20px;
    position: relative;
}

.timeline-marker[b-olmxmhmzcq] {
    position: absolute;
    left: -14px;
    width: 26px;
    height: 26px;
    background: var(--theme-surface, #ffffff);
    border: 2px solid var(--theme-border, #e2e8f0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.type-icon[b-olmxmhmzcq] {
    font-size: 0.875rem;
}

.timeline-content-item[b-olmxmhmzcq] {
    flex: 1;
    min-width: 0;
}

.item-header[b-olmxmhmzcq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.direction-icon[b-olmxmhmzcq] {
    font-size: 0.75rem;
}

.item-title[b-olmxmhmzcq] {
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    flex: 1;
}

.item-time[b-olmxmhmzcq] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.item-description[b-olmxmhmzcq] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 4px 0 8px;
    line-height: 1.5;
}

.item-footer[b-olmxmhmzcq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.item-channel[b-olmxmhmzcq],
.item-outcome[b-olmxmhmzcq],
.item-duration[b-olmxmhmzcq],
.item-score[b-olmxmhmzcq],
.auto-badge[b-olmxmhmzcq] {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}

.item-score[b-olmxmhmzcq] {
    font-weight: 600;
}

.score-high[b-olmxmhmzcq] { background: #dcfce7; color: #166534; }
.score-positive[b-olmxmhmzcq] { background: #f0fdf4; color: #15803d; }
.score-neutral[b-olmxmhmzcq] { background: var(--theme-surface-secondary, #f1f5f9); color: var(--theme-text-secondary, #64748b); }
.score-low[b-olmxmhmzcq] { background: #fef3c7; color: #92400e; }
.score-negative[b-olmxmhmzcq] { background: #fee2e2; color: #991b1b; }

.outcome-positive[b-olmxmhmzcq] { background: #dcfce7; color: #166534; }
.outcome-completed[b-olmxmhmzcq] { background: #dbeafe; color: #1e40af; }
.outcome-followupneeded[b-olmxmhmzcq] { background: #fef3c7; color: #92400e; }
.outcome-negative[b-olmxmhmzcq] { background: #fee2e2; color: #991b1b; }

.auto-badge[b-olmxmhmzcq] {
    background: #f0f9ff;
    color: #0369a1;
}

/* Type-specific styling */
.timeline-item.type-email .timeline-marker[b-olmxmhmzcq] { border-color: var(--theme-accent, #6366f1); }
.timeline-item.type-call .timeline-marker[b-olmxmhmzcq] { border-color: #22c55e; }
.timeline-item.type-meeting .timeline-marker[b-olmxmhmzcq] { border-color: #f59e0b; }
.timeline-item.type-invoice .timeline-marker[b-olmxmhmzcq] { border-color: #8b5cf6; }
.timeline-item.type-payment .timeline-marker[b-olmxmhmzcq] { border-color: #10b981; }

/* ============================================
   DARK THEME OVERRIDES — All 6 dark themes
   ============================================ */
.is-dark .journey-timeline[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
}

.is-dark .timeline-header[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .btn-icon[b-olmxmhmzcq] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .btn-icon:hover[b-olmxmhmzcq] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.is-dark .engagement-summary[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .filter-bar[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .filter-select[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.2);
    color: white;
}

.is-dark .add-touchpoint-form[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .form-group input[b-olmxmhmzcq],
.is-dark .form-group select[b-olmxmhmzcq],
.is-dark .form-group textarea[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(148, 163, 184, 0.2);
    color: white;
}

.is-dark .btn-secondary[b-olmxmhmzcq] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
    color: white;
}

.is-dark .timeline-marker[b-olmxmhmzcq] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(148, 163, 184, 0.2);
}

.is-dark .timeline-item[b-olmxmhmzcq] {
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .date-header[b-olmxmhmzcq] {
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .item-channel[b-olmxmhmzcq],
.is-dark .item-outcome[b-olmxmhmzcq],
.is-dark .item-duration[b-olmxmhmzcq] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 640px) {
    .engagement-summary[b-olmxmhmzcq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-grid[b-olmxmhmzcq] {
        grid-template-columns: 1fr;
    }

    .form-group.full-width[b-olmxmhmzcq] {
        grid-column: span 1;
    }
}
/* /Components/CreditBalanceIndicator.razor.rz.scp.css */
/* Credit Balance Indicator */
.credit-indicator[b-wacedkqsay] {
    position: relative;
    display: inline-flex;
}

.credit-balance-btn[b-wacedkqsay] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    font-family: inherit;
}

.credit-balance-btn:hover[b-wacedkqsay] {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.02);
}

.credit-balance-btn:focus[b-wacedkqsay] {
    outline: none;
}

.credit-icon[b-wacedkqsay] {
    width: 22px;
    height: 22px;
    color: #fcd34d;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.credit-amount[b-wacedkqsay] {
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 24px;
    text-align: center;
    color: #fff;
}

.credit-amount.loading[b-wacedkqsay] {
    opacity: 0.6;
}

.credit-amount.low-balance[b-wacedkqsay] {
    color: #fbbf24;
}

.dropdown-arrow[b-wacedkqsay] {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.dropdown-arrow.open[b-wacedkqsay] {
    transform: rotate(180deg);
}

/* Dropdown Overlay */
.credit-dropdown-overlay[b-wacedkqsay] {
    position: fixed;
    inset: 0;
    z-index: 999;
}

/* Dropdown */
.credit-dropdown[b-wacedkqsay] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 240px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
    animation: dropdownSlide-b-wacedkqsay 0.15s ease-out;
}

@keyframes dropdownSlide-b-wacedkqsay {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark theme dropdown.
   PRO-DARK-2 (2026-07-21): all dark groups in this file migrated from per-theme
   comma lists (which omitted Mystic, Tron, AND Slate) to the `is-dark` marker
   class on <html>. Never enumerate theme classes in new CSS. */
.is-dark .credit-dropdown[b-wacedkqsay] {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
}

/* Dropdown Header - Cloud Theme (light) */
.dropdown-header[b-wacedkqsay] {
    padding: 14px 16px;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    color: #1e40af;
    border-bottom: 1px solid #e0e7ff;
}

.balance-display[b-wacedkqsay] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.balance-label[b-wacedkqsay] {
    font-size: 0.7rem;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    color: #64748b;
}

.balance-row[b-wacedkqsay] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.balance-amount[b-wacedkqsay] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: #1e40af;
}

.monthly-usage[b-wacedkqsay] {
    font-size: 0.75rem;
    opacity: 0.8;
    color: #64748b;
}

/* Dark themes dropdown header */
.is-dark .dropdown-header[b-wacedkqsay] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-bottom: none;
}

.is-dark .balance-label[b-wacedkqsay] {
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .balance-amount[b-wacedkqsay] {
    color: white;
}

.is-dark .monthly-usage[b-wacedkqsay] {
    color: rgba(255, 255, 255, 0.8);
}

.balance-amount.low-balance[b-wacedkqsay] {
    color: #d97706;
}

/* Dark themes low balance */
.is-dark .balance-amount.low-balance[b-wacedkqsay] {
    color: #fef08a;
}

.low-balance-warning[b-wacedkqsay] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 6px 10px;
    background: rgba(217, 119, 6, 0.15);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #b45309;
}

/* Dark themes low balance warning */
.is-dark .low-balance-warning[b-wacedkqsay] {
    background: rgba(251, 191, 36, 0.2);
    color: #fef08a;
}

.low-balance-warning svg[b-wacedkqsay] {
    color: #d97706;
    flex-shrink: 0;
}

/* Dark themes low balance warning icon */
.is-dark .low-balance-warning svg[b-wacedkqsay] {
    color: #fbbf24;
}

/* Buy Credits Header Button - Cloud Theme */
.buy-credits-header-btn[b-wacedkqsay] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    background: #3b82f6;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.buy-credits-header-btn:hover[b-wacedkqsay] {
    background: #2563eb;
    border-color: #2563eb;
}

/* Dark themes buy credits button */
.is-dark .buy-credits-header-btn[b-wacedkqsay] {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.is-dark .buy-credits-header-btn:hover[b-wacedkqsay] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.buy-credits-header-btn svg[b-wacedkqsay] {
    flex-shrink: 0;
}

/* Dropdown Menu */
.dropdown-menu[b-wacedkqsay] {
    padding: 6px 0;
}

/* Dropdown Items */
.dropdown-item[b-wacedkqsay] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.dropdown-item:hover[b-wacedkqsay] {
    background: #f3f4f6;
}

.dropdown-item svg[b-wacedkqsay] {
    color: #6b7280;
    flex-shrink: 0;
}

.is-dark .dropdown-item[b-wacedkqsay] {
    color: #e2e8f0;
}

.is-dark .dropdown-item:hover[b-wacedkqsay] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .dropdown-item svg[b-wacedkqsay] {
    color: #94a3b8;
}

/* Buy Credits Button - Highlighted */
.dropdown-item.buy-credits[b-wacedkqsay] {
    color: #6366f1;
    font-weight: 600;
}

.dropdown-item.buy-credits svg[b-wacedkqsay] {
    color: #6366f1;
}

.dropdown-item.buy-credits:hover[b-wacedkqsay] {
    background: rgba(99, 102, 241, 0.1);
}

.is-dark .dropdown-item.buy-credits[b-wacedkqsay] {
    color: #a5b4fc;
}

.is-dark .dropdown-item.buy-credits svg[b-wacedkqsay] {
    color: #a5b4fc;
}

/* Responsive */
@media (max-width: 640px) {
    .credit-balance-btn[b-wacedkqsay] {
        padding: 6px 10px;
    }

    .credit-dropdown[b-wacedkqsay] {
        width: 220px;
        right: -10px;
    }
}

/* CREDITS-DISCOVER-1 (2026-07-16): self-serve "what are credits?" explainer.
   Theme-token colors with the same light/dark split the rest of this file
   uses (dark themes override below, mirroring the .credit-dropdown pattern). */
.credit-explainer[b-wacedkqsay] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.credit-explainer-title[b-wacedkqsay] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--theme-text-muted, #64748b);
    margin-bottom: 4px;
}

.credit-explainer-body[b-wacedkqsay] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--theme-text-secondary, #475569);
}

.is-dark .credit-explainer[b-wacedkqsay] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.is-dark .credit-explainer-body[b-wacedkqsay] {
    color: rgba(255, 255, 255, 0.75);
}
/* /Components/CreditMenuBalance.razor.rz.scp.css */
.menu-credit-balance[b-2x0bq48258] {
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #92400e;
    background: rgba(245, 158, 11, 0.14);
}

.menu-credit-balance.low[b-2x0bq48258] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.12);
}

/* Dark themes - the html element carries .is-dark (AppThemeService), Slate included. */
.is-dark .menu-credit-balance[b-2x0bq48258] {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.18);
}
/* /Components/Crm/CrmSubNav.razor.rz.scp.css */
/* ============================================
   CRM SUB-NAV — Primary tab strip for the CRM section
   Renders on every CRM page (/accounts, /leads, /opportunities,
   plus future /contacts) so the section feels cohesive. Mirrors
   FinanceSubNav structurally — same layout primitives, same active-
   state mechanics — but uses pipeline-flavored accents (cyan / teal /
   purple) so a user knows visually which family they're in.
   ============================================ */

.crm-subnav[b-i0898rs6k4] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.crm-subnav-tab[b-i0898rs6k4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.crm-subnav-tab:hover[b-i0898rs6k4] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
}

.crm-subnav-tab-icon[b-i0898rs6k4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* CRM-NAV-V-1.1 (2026-05-14): The SVG inside .crm-subnav-tab-icon is
   injected via @((MarkupString)tab.IconSvg) in CrmSubNav.razor. MarkupString
   bypasses Blazor's element processing, so the SVG element does NOT get
   the `b-XYZ` scoped-CSS attribute. A descendant selector like
   `.crm-subnav-tab-icon svg` becomes `.crm-subnav-tab-icon[b-XYZ] svg[b-XYZ]`
   under scoped-CSS, which won't match the unattributed SVG. The SVG then
   falls back to its viewBox-only intrinsic sizing (effectively 0x0 inside
   a flex parent with no width signal), and the icon renders as nothing.
   `::deep` tells Blazor to NOT add the attribute to the descendant —
   selector becomes `.crm-subnav-tab-icon[b-XYZ] svg`, which DOES match. */
.crm-subnav-tab-icon[b-i0898rs6k4]  svg {
    width: 100%;
    height: 100%;
}

.crm-subnav-tab-label[b-i0898rs6k4] {
    line-height: 1;
}

/* ----- Active state ----- */
.crm-subnav-tab.is-active[b-i0898rs6k4] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ----- Per-tab accent colors (active state only) ----- */
/* Accounts — cyan, matches FinanceSubNav's Accounts tab so /accounts and
 * /finance/accounts feel like siblings even across two different sub-navs. */
.crm-subnav-tab.accent-accounts.is-active[b-i0898rs6k4] {
    color: #06b6d4;
    border-color: rgba(6, 182, 212, 0.25);
    background: rgba(6, 182, 212, 0.08);
}

/* Contacts — indigo. Sits between Accounts (cyan) and Leads (teal) in the
 * tab order, and the indigo accent gives each tab its own visual identity
 * without leaving the cool-tone family. People-managing surface = restful
 * blue-purple; matches Settings / personal pages where the user is reviewing
 * their own data rather than acting on hot pipeline. */
.crm-subnav-tab.accent-contacts.is-active[b-i0898rs6k4] {
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.08);
}

/* Leads — teal, slightly different than Accounts cyan but in the same
 * cool-blue-green family. Matches the per-row .tag-cyan used in the
 * Lead row Type tag. */
.crm-subnav-tab.accent-leads.is-active[b-i0898rs6k4] {
    color: #0d9488;
    border-color: rgba(20, 184, 166, 0.25);
    background: rgba(20, 184, 166, 0.08);
}

/* Opportunities — purple-violet, escapes the cool family for visual punch.
 * Active deals feel high-energy / closing-soon, so a more saturated tone
 * communicates "this is where the urgent work lives." */
.crm-subnav-tab.accent-opportunities.is-active[b-i0898rs6k4] {
    color: #7c3aed;
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.08);
}

/* Invoices — amber, breaks fully out of the cool-tone family for the warm
 * "money / value" semantic. Gold-coin association signals "this is where
 * the financial transactions of CRM happen." Visually distinct from the
 * Opportunities purple so the two pipeline-end tabs don't blur together. */
.crm-subnav-tab.accent-invoices.is-active[b-i0898rs6k4] {
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.08);
}

/* CAMP-V-5 (2026-05-14): Campaigns — pink. The standard "marketing pink"
 * semantic that's everywhere in B2B design systems, distinct from any
 * other accent in this strip, and warm-toned to signal "outreach work"
 * versus the cool-toned pipeline-management family. */
.crm-subnav-tab.accent-campaigns.is-active[b-i0898rs6k4] {
    color: #db2777;
    border-color: rgba(236, 72, 153, 0.25);
    background: rgba(236, 72, 153, 0.08);
}

/* Subtle accent tint on hover when not active */
.crm-subnav-tab.accent-accounts:hover:not(.is-active)[b-i0898rs6k4] { color: #06b6d4; }
.crm-subnav-tab.accent-contacts:hover:not(.is-active)[b-i0898rs6k4] { color: #6366f1; }
.crm-subnav-tab.accent-leads:hover:not(.is-active)[b-i0898rs6k4] { color: #0d9488; }
.crm-subnav-tab.accent-opportunities:hover:not(.is-active)[b-i0898rs6k4] { color: #7c3aed; }
.crm-subnav-tab.accent-campaigns:hover:not(.is-active)[b-i0898rs6k4] { color: #db2777; }
.crm-subnav-tab.accent-invoices:hover:not(.is-active)[b-i0898rs6k4] { color: #d97706; }

/* ============================================
   DARK THEMES
   ============================================ */
.is-dark .crm-subnav[b-i0898rs6k4] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .crm-subnav-tab[b-i0898rs6k4] {
    color: rgba(255, 255, 255, 0.65);
}

.is-dark .crm-subnav-tab:hover[b-i0898rs6k4] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .crm-subnav-tab.is-active[b-i0898rs6k4] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Per-tab accent backgrounds get a touch more punch on dark themes */
.is-dark .crm-subnav-tab.accent-accounts.is-active[b-i0898rs6k4] {
    background: rgba(6, 182, 212, 0.18);
    color: #67e8f9;
}

.is-dark .crm-subnav-tab.accent-contacts.is-active[b-i0898rs6k4] {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

.is-dark .crm-subnav-tab.accent-leads.is-active[b-i0898rs6k4] {
    background: rgba(20, 184, 166, 0.18);
    color: #5eead4;
}

.is-dark .crm-subnav-tab.accent-opportunities.is-active[b-i0898rs6k4] {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
}

.is-dark .crm-subnav-tab.accent-campaigns.is-active[b-i0898rs6k4] {
    background: rgba(236, 72, 153, 0.18);
    color: #f9a8d4;
}

.is-dark .crm-subnav-tab.accent-invoices.is-active[b-i0898rs6k4] {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

/* ============================================
   RESPONSIVE — mirror FinanceSubNav so the two section navs feel
   the same on every screen size.

   • Tablet (≤768px): drop wrap and let the strip scroll horizontally
     so 5 tabs don't pile onto 2-3 stacked rows. Tighter padding +
     slightly smaller font keep more tabs visible at once.
   • Phone (≤480px): hide labels on inactive tabs (icons only), keep
     the active tab's label so the user always sees where they are.
     Critical for Opportunities — the longest label — which would
     otherwise force an awkward second row at narrow widths.

   Previously the section had no mobile rules at all, so a 390px
   viewport (iPhone 12 Pro) wrapped the 5 tabs onto 3 rows and ate
   ~120px of vertical real estate above the page header.
   ============================================ */
@media (max-width: 768px) {
    .crm-subnav[b-i0898rs6k4] {
        flex-wrap: nowrap;
        padding: 4px;
    }

    .crm-subnav-tab[b-i0898rs6k4] {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .crm-subnav-tab-label[b-i0898rs6k4] {
        display: none;
    }

    .crm-subnav-tab[b-i0898rs6k4] {
        padding: 0.55rem 0.7rem;
        /* CRM-NAV-V-1 (2026-05-14): flex-shrink:0 stops the inactive icon-only
           tabs from being squeezed to zero width when the active tab (which
           still renders its label, so it's wider) wins the flex contention.
           Without this, on iPhone-class viewports the inactive tabs would
           render at ~0px wide and read as missing entirely. The container
           is overflow-x:auto, so any "overflow" just becomes a horizontal
           scroll affordance — which is the right answer.
           Reported via screenshot showing only the active "Accounts" pill
           visible while the four inactive icons appeared blank. */
        flex-shrink: 0;
        min-width: 40px;
        justify-content: center;
    }

    /* CRM-NAV-V-1 (2026-05-14): Inactive icons need stronger contrast +
       button affordance at icon-only sizes. Three reinforcing changes:
       (1) bump color from --theme-text-secondary (medium gray, invisible
       against near-white container at 18px) to --theme-text-primary,
       (2) add a subtle border + background so each inactive tab reads
       as a distinct touch target, not just a floating glyph,
       (3) bump icon size from 18px → 22px.
       The border/background also doubles as a diagnostic: if the user
       deploys and sees clearly-outlined buttons, the scoped CSS is
       loading correctly; if not, the bundle didn't rebuild. */
    .crm-subnav-tab:not(.is-active)[b-i0898rs6k4] {
        color: var(--theme-text-primary, #1e293b);
        background: rgba(0, 0, 0, 0.03);
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .crm-subnav-tab-icon[b-i0898rs6k4] {
        width: 22px;
        height: 22px;
    }

    /* Active tab keeps its label so users always know which page
       they're on. Icon-only inactive tabs read as a tab strip
       rather than an opaque set of glyphs. */
    .crm-subnav-tab.is-active .crm-subnav-tab-label[b-i0898rs6k4] {
        display: inline;
    }
}

/* CRM-NAV-V-1 (2026-05-14): Dark themes need the inverse contrast bump
   for icon-only inactive tabs — the default rgba(255,255,255,0.65) is
   already plenty visible, but on the very dark themes (Space, Mystic,
   Tron) the icons can blur into the surface tint. Boost to 0.85. */
@media (max-width: 480px) {
    .is-dark .crm-subnav-tab:not(.is-active)[b-i0898rs6k4] {
        color: rgba(255, 255, 255, 0.85);
    }
}
/* /Components/CustomErrorBoundary.razor.rz.scp.css */
/* Custom Error Boundary - Theme-aware styling */
.error-boundary-container[b-ii1soggcff] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: 2rem;
}

.error-card[b-ii1soggcff] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
}

.error-icon[b-ii1soggcff] {
    fill: var(--theme-text-danger);
    margin-bottom: 1rem;
}

.error-title[b-ii1soggcff] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 0.5rem;
}

.error-message[b-ii1soggcff] {
    font-size: 1rem;
    color: var(--theme-text-secondary);
    margin: 0 0 1.5rem;
}

.error-details[b-ii1soggcff] {
    background: var(--theme-bg-danger);
    border: 1px solid var(--theme-text-danger);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.error-details code[b-ii1soggcff] {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--theme-text-danger);
    word-break: break-word;
}

.error-actions[b-ii1soggcff] {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.error-footer[b-ii1soggcff] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    margin-top: 1.5rem;
}

.error-footer a[b-ii1soggcff] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    font-weight: 500;
}

.error-footer a:hover[b-ii1soggcff] {
    text-decoration: underline;
}

/* Dark theme overrides */
.theme-space .error-card[b-ii1soggcff],
.theme-winter .error-card[b-ii1soggcff],
.theme-nature .error-card[b-ii1soggcff],
.theme-ocean .error-card[b-ii1soggcff] {
    background: rgba(30, 41, 59, 0.9);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}
/* /Components/Dashboard/RecentActivityTimeline.razor.rz.scp.css */
/* Recent Activity Timeline - Theme-aware styling */
.activity-section[b-qklx1ssbz4] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border);
}

.activity-header[b-qklx1ssbz4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.activity-title[b-qklx1ssbz4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-info);
}

.activity-title svg[b-qklx1ssbz4] { fill: var(--theme-text-info); }

.view-all-btn[b-qklx1ssbz4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-info);
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.view-all-btn:hover[b-qklx1ssbz4] { background: var(--theme-bg-info); text-decoration: none; }
.view-all-btn svg[b-qklx1ssbz4] { fill: currentColor; }

.loading-state[b-qklx1ssbz4], .empty-state[b-qklx1ssbz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem;
    text-align: center;
}

.spinner[b-qklx1ssbz4] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-qklx1ssbz4 0.8s linear infinite;
}

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

.loading-text[b-qklx1ssbz4] { color: var(--theme-text-secondary); font-size: 0.9rem; margin: 0; }
.empty-icon[b-qklx1ssbz4] { fill: var(--theme-text-secondary); opacity: 0.5; }
.empty-title[b-qklx1ssbz4] { font-size: 1.1rem; font-weight: 600; color: var(--theme-text-primary); margin: 0.5rem 0 0; }
.empty-text[b-qklx1ssbz4] { color: var(--theme-text-secondary); font-size: 0.9rem; margin: 0; }

/* Timeline */
.timeline[b-qklx1ssbz4] {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 1.5rem;
}

.timeline[b-qklx1ssbz4]::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--theme-border);
}

.timeline-item[b-qklx1ssbz4] {
    position: relative;
    padding-bottom: 1rem;
}

.timeline-item:last-child[b-qklx1ssbz4] { padding-bottom: 0; }

.timeline-dot[b-qklx1ssbz4] {
    position: absolute;
    left: -1.5rem;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--theme-border);
    border: 2px solid var(--theme-surface);
    z-index: 1;
}

.timeline-item.color-success .timeline-dot[b-qklx1ssbz4] { background: var(--theme-text-success); }
.timeline-item.color-error .timeline-dot[b-qklx1ssbz4] { background: var(--theme-text-danger); }
.timeline-item.color-warning .timeline-dot[b-qklx1ssbz4] { background: var(--theme-text-warning); }
.timeline-item.color-info .timeline-dot[b-qklx1ssbz4] { background: var(--theme-text-info); }
.timeline-item.color-primary .timeline-dot[b-qklx1ssbz4] { background: var(--theme-primary); }

.timeline-content[b-qklx1ssbz4] { display: flex; flex-direction: column; gap: 0.25rem; }

.timeline-header[b-qklx1ssbz4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.timeline-description[b-qklx1ssbz4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    flex: 1;
}

.timeline-time[b-qklx1ssbz4] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.timeline-details[b-qklx1ssbz4] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    margin: 0;
}

.timeline-date[b-qklx1ssbz4] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

/* Dark theme overrides */
.theme-space .activity-section[b-qklx1ssbz4],
.theme-winter .activity-section[b-qklx1ssbz4],
.theme-nature .activity-section[b-qklx1ssbz4],
.theme-ocean .activity-section[b-qklx1ssbz4] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .timeline-dot[b-qklx1ssbz4],
.theme-winter .timeline-dot[b-qklx1ssbz4],
.theme-nature .timeline-dot[b-qklx1ssbz4],
.theme-ocean .timeline-dot[b-qklx1ssbz4] {
    border-color: rgba(30, 41, 59, 0.9);
}
/* /Components/DesignVotingCard.razor.rz.scp.css */
/* DesignVotingCard - A/B comparison voting component */

.design-voting-card[b-zcoevwgf9b] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border);
}

/* Header */
.voting-header[b-zcoevwgf9b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.voting-title[b-zcoevwgf9b] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary);
}

.voting-description[b-zcoevwgf9b] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    margin: 0.25rem 0 0;
}

.voting-badges[b-zcoevwgf9b] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.category-badge[b-zcoevwgf9b] {
    padding: 0.25rem 0.625rem;
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--theme-text-info);
}

.votes-badge[b-zcoevwgf9b] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: var(--theme-primary);
    color: white;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.votes-badge svg[b-zcoevwgf9b] {
    fill: white;
}

/* Voting Options Grid */
.voting-options[b-zcoevwgf9b] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (max-width: 768px) {
    .voting-options[b-zcoevwgf9b] {
        grid-template-columns: 1fr;
    }

    .vs-divider[b-zcoevwgf9b] {
        display: none;
    }
}

/* Vote Cards */
.vote-card[b-zcoevwgf9b] {
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.vote-card.selected[b-zcoevwgf9b] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.card-label[b-zcoevwgf9b] {
    padding: 0.75rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid var(--theme-border);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
}

.card-image[b-zcoevwgf9b] {
    min-height: 200px;
    max-height: 400px;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    transition: transform 0.2s ease;
}

.card-image:hover[b-zcoevwgf9b] {
    transform: scale(1.02);
}

.card-image img[b-zcoevwgf9b] {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 400px;
}

.card-actions[b-zcoevwgf9b] {
    padding: 1rem;
}

/* Vote Buttons */
.vote-btn[b-zcoevwgf9b] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.vote-btn.outline[b-zcoevwgf9b] {
    background: transparent;
    border: 2px solid var(--theme-border);
    color: var(--theme-text-primary);
}

.vote-btn.outline:hover[b-zcoevwgf9b] {
    border-color: var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
    transform: translateY(-2px);
}

.vote-btn.selected.primary[b-zcoevwgf9b] {
    background: var(--theme-primary);
    color: white;
    border: 2px solid var(--theme-primary);
    animation: pulse-primary-b-zcoevwgf9b 0.3s ease;
}

.vote-btn.selected.secondary[b-zcoevwgf9b] {
    background: #9333ea;
    color: white;
    border: 2px solid #9333ea;
    animation: pulse-secondary-b-zcoevwgf9b 0.3s ease;
}

.vote-btn svg[b-zcoevwgf9b] {
    fill: currentColor;
}

.vote-btn:disabled[b-zcoevwgf9b] {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes pulse-primary-b-zcoevwgf9b {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes pulse-secondary-b-zcoevwgf9b {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* VS Divider */
.vs-divider[b-zcoevwgf9b] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-divider span[b-zcoevwgf9b] {
    background: var(--theme-text-secondary);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Results Display */
.results-display[b-zcoevwgf9b] {
    width: 100%;
}

.results-header[b-zcoevwgf9b] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.progress-bar[b-zcoevwgf9b] {
    height: 10px;
    background: var(--theme-border);
    border-radius: 5px;
    overflow: hidden;
}

.progress-fill[b-zcoevwgf9b] {
    height: 100%;
    background: var(--theme-text-secondary);
    border-radius: 5px;
    transition: width 0.5s ease;
}

.progress-fill.winning[b-zcoevwgf9b] {
    background: var(--theme-text-success);
    animation: winning-glow-b-zcoevwgf9b 1s ease-in-out;
}

@keyframes winning-glow-b-zcoevwgf9b {
    0% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
    50% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
    100% { box-shadow: 0 0 0 rgba(34, 197, 94, 0); }
}

.your-vote[b-zcoevwgf9b] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--theme-text-success);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    justify-content: center;
}

.your-vote svg[b-zcoevwgf9b] {
    fill: currentColor;
}

/* Comment Section */
.comment-section[b-zcoevwgf9b] {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    animation: slide-in-b-zcoevwgf9b 0.3s ease;
}

@keyframes slide-in-b-zcoevwgf9b {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-section textarea[b-zcoevwgf9b] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    resize: none;
    font-family: inherit;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
}

.comment-section textarea:focus[b-zcoevwgf9b] {
    outline: none;
    border-color: var(--theme-primary);
}

.comment-actions[b-zcoevwgf9b] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn-text[b-zcoevwgf9b] {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.btn-text:hover[b-zcoevwgf9b] {
    color: var(--theme-text-primary);
}

.spinner[b-zcoevwgf9b] {
    width: 16px;
    height: 16px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-zcoevwgf9b 1s linear infinite;
}

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

/* Comments List */
.divider[b-zcoevwgf9b] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 1rem 0;
}

.comments-title[b-zcoevwgf9b] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 0.75rem;
}

.comments-title svg[b-zcoevwgf9b] {
    fill: currentColor;
}

.comments-list[b-zcoevwgf9b] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.comment-card[b-zcoevwgf9b] {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 0.75rem;
}

.comment-header[b-zcoevwgf9b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.comment-vote-badge[b-zcoevwgf9b] {
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 500;
}

.comment-vote-badge.before[b-zcoevwgf9b] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.comment-vote-badge.after[b-zcoevwgf9b] {
    background: rgba(147, 51, 234, 0.15);
    color: #9333ea;
    border: 1px solid #9333ea;
}

.comment-date[b-zcoevwgf9b] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.comment-text[b-zcoevwgf9b] {
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    margin: 0;
}

/* Image Overlay */
.image-overlay[b-zcoevwgf9b] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fade-in-b-zcoevwgf9b 0.2s ease;
}

@keyframes fade-in-b-zcoevwgf9b {
    from { opacity: 0; }
    to { opacity: 1; }
}

.image-overlay img[b-zcoevwgf9b] {
    max-width: 95vw;
    max-height: 95vh;
    object-fit: contain;
    animation: zoom-in-b-zcoevwgf9b 0.3s ease;
}

@keyframes zoom-in-b-zcoevwgf9b {
    from { transform: scale(0.9); }
    to { transform: scale(1); }
}

/* Dark Theme Variants */
.theme-space .design-voting-card[b-zcoevwgf9b],
.theme-winter .design-voting-card[b-zcoevwgf9b],
.theme-nature .design-voting-card[b-zcoevwgf9b],
.theme-ocean .design-voting-card[b-zcoevwgf9b] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .vote-card[b-zcoevwgf9b],
.theme-winter .vote-card[b-zcoevwgf9b],
.theme-nature .vote-card[b-zcoevwgf9b],
.theme-ocean .vote-card[b-zcoevwgf9b] {
    background: rgba(15, 23, 42, 0.5);
}

.theme-space .card-image[b-zcoevwgf9b],
.theme-winter .card-image[b-zcoevwgf9b],
.theme-nature .card-image[b-zcoevwgf9b],
.theme-ocean .card-image[b-zcoevwgf9b] {
    background: rgba(15, 23, 42, 0.8);
}

.theme-space .comment-section[b-zcoevwgf9b],
.theme-winter .comment-section[b-zcoevwgf9b],
.theme-nature .comment-section[b-zcoevwgf9b],
.theme-ocean .comment-section[b-zcoevwgf9b] {
    background: rgba(255, 255, 255, 0.05);
}

.theme-space .comment-card[b-zcoevwgf9b],
.theme-winter .comment-card[b-zcoevwgf9b],
.theme-nature .comment-card[b-zcoevwgf9b],
.theme-ocean .comment-card[b-zcoevwgf9b] {
    background: rgba(255, 255, 255, 0.05);
}

/* Theme-specific accents */
.theme-space .vote-btn.selected.primary[b-zcoevwgf9b] {
    background: #a855f7;
    border-color: #a855f7;
}

.theme-winter .vote-btn.selected.primary[b-zcoevwgf9b] {
    background: #38bdf8;
    border-color: #38bdf8;
}

.theme-nature .vote-btn.selected.primary[b-zcoevwgf9b] {
    background: #4ade80;
    border-color: #4ade80;
}

.theme-ocean .vote-btn.selected.primary[b-zcoevwgf9b] {
    background: #22d3d1;
    border-color: #22d3d1;
}
/* /Components/Dialogs/BaseDialog.razor.rz.scp.css */
/* ============================================
   BASE DIALOG - UNIFIED DIALOG COMPONENT
   ============================================ */

/* Overlay */
/* Z-Index (2026-05-03): Bumped from 9999 to 100000 to sit ABOVE the
   FloatingRecorderControl (99998), easter-eggs (99999), and tron-effects
   (99999) layers. Stays BELOW the 999999 GlobalSceneOverlay tier
   (toasts/emergency prompts that should win against modals).

   Viewport-Lock (2026-05-03): Forced explicit width/height to viewport
   units with !important to defeat any ancestor that might be
   constraining the overlay's size — specifically the home page's
   .main-content.home-main-content with overflow:hidden + height:calc(100vh-56px),
   which was clipping the dialog's bottom portion on mobile (snooze
   footer was rendering below the visible area on iPhone-class viewports).
   100dvh accounts for the dynamic browser chrome on iOS Safari. */
.dialog-overlay[b-g58py70gbh] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: dialogFadeIn-b-g58py70gbh 0.15s ease-out;
}

@keyframes dialogFadeIn-b-g58py70gbh {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes dialogSlideIn-b-g58py70gbh {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Container */
.dialog-container[b-g58py70gbh] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 95%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: dialogSlideIn-b-g58py70gbh 0.2s ease-out;
    position: relative;
    overflow: hidden;
}

.dialog-container.dialog-full-height[b-g58py70gbh] {
    height: 90vh;
}

/* Size variants */
.dialog-sm .dialog-container[b-g58py70gbh] { max-width: 400px; }
.dialog-lg .dialog-container[b-g58py70gbh] { max-width: 700px; }
.dialog-xl .dialog-container[b-g58py70gbh] { max-width: 900px; }
.dialog-full .dialog-container[b-g58py70gbh] { max-width: 95%; }

/* Theme-aware container */
.is-dark .dialog-container[b-g58py70gbh] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* ============================================
   HEADER
   ============================================ */
.dialog-header[b-g58py70gbh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.is-dark .dialog-header[b-g58py70gbh] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dialog-header-content[b-g58py70gbh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* AUD-V-3 (2026-06-09): icon now sits in a small accent-tinted chip —
   mini version of the detail-page icon orbs, so dialog headers echo the
   same shape language. Also fixes the dark-theme legibility bug: the
   dark sweep turned .dialog-title white but left the icon at
   var(--theme-primary), which is a dark hue on dark themes — the icon
   was near-invisible in every dialog header. */
.dialog-header-icon[b-g58py70gbh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.12);
    flex-shrink: 0;
}

/* DIALOG-ICON-1 (2026-09-08): the <Icon> fragment is rendered by the PAGE (NoteDialog, GoalDialog...),
   so its <svg> carries the page's CSS-isolation scope, not this component's - `.dialog-header-icon svg`
   never matched and every dialog header showed an empty grey square (9/8 mobile walk, and on desktop).
   ::deep reaches the child content. */
.dialog-header-icon[b-g58py70gbh]  svg {
    width: 17px;
    height: 17px;
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
}

.is-dark .dialog-header-icon[b-g58py70gbh] {
    background: rgba(255, 255, 255, 0.12);
}

.is-dark .dialog-header-icon[b-g58py70gbh]  svg {
    color: rgba(255, 255, 255, 0.92);
}

.dialog-title[b-g58py70gbh] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1e293b;
}

.is-dark .dialog-title[b-g58py70gbh] {
    color: white;
}

.dialog-close-btn[b-g58py70gbh] {
    background: transparent;
    border: none;
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    -webkit-tap-highlight-color: transparent;
}

.dialog-close-btn:hover[b-g58py70gbh] {
    background: #f1f5f9;
    color: #1e293b;
}

.is-dark .dialog-close-btn[b-g58py70gbh] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .dialog-close-btn:hover[b-g58py70gbh] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.dialog-close-btn svg[b-g58py70gbh] {
    width: 16px;
    height: 16px;
}

/* ============================================
   CONTENT
   ============================================ */
.dialog-content[b-g58py70gbh] {
    padding: 12px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* PRO-DARK-3 (2026-07-24): dark-theme (Slate) legibility for generic dialog
   body copy. Every other dialog element (.dialog-title, form labels, helper
   text, the confirm-box <p>) carries its own `.is-dark` light-color override,
   but plain content children — e.g. ConfirmDialog's <p>@ContentText — had
   none and fell back to the app's default DARK body text, rendering
   near-black on the #1e293b container. Setting the inherited color on
   .dialog-content lights up any child that doesn't specify its own color,
   fixing every dialog at once; children with explicit colors are unaffected. */
.is-dark .dialog-content[b-g58py70gbh] {
    color: rgba(255, 255, 255, 0.85);
}

/* Form elements */
.dialog-form-group[b-g58py70gbh] {
    margin-bottom: 4px;
}

.dialog-form-group:last-child[b-g58py70gbh] {
    margin-bottom: 0;
}

.dialog-form-label[b-g58py70gbh] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 2px;
}

.dialog-required[b-g58py70gbh] {
    color: #ef4444;
}

.is-dark .dialog-form-label[b-g58py70gbh] {
    color: rgba(255, 255, 255, 0.9);
}

.dialog-form-input[b-g58py70gbh],
.dialog-form-textarea[b-g58py70gbh],
.dialog-form-select[b-g58py70gbh] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    background: white;
    color: #1e293b;
    box-sizing: border-box;
    font-family: inherit;
}

.is-dark .dialog-form-input[b-g58py70gbh],
.is-dark .dialog-form-textarea[b-g58py70gbh],
.is-dark .dialog-form-select[b-g58py70gbh] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.dialog-form-input:focus[b-g58py70gbh],
.dialog-form-textarea:focus[b-g58py70gbh],
.dialog-form-select:focus[b-g58py70gbh] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.dialog-form-input[b-g58py70gbh]::placeholder,
.dialog-form-textarea[b-g58py70gbh]::placeholder {
    color: #9ca3af;
}

.is-dark .dialog-form-input[b-g58py70gbh]::placeholder,
.is-dark .dialog-form-textarea[b-g58py70gbh]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.dialog-form-textarea[b-g58py70gbh] {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

.dialog-form-select[b-g58py70gbh] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.dialog-helper-text[b-g58py70gbh] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
}

.is-dark .dialog-helper-text[b-g58py70gbh] {
    color: rgba(255, 255, 255, 0.5);
}

.dialog-char-counter[b-g58py70gbh] {
    text-align: right;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 4px;
}

.is-dark .dialog-char-counter[b-g58py70gbh] {
    color: rgba(255, 255, 255, 0.5);
}

/* Checkbox styling */
.dialog-checkbox-wrapper[b-g58py70gbh] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.dialog-checkbox-wrapper input[type="checkbox"][b-g58py70gbh] {
    width: 18px;
    height: 18px;
    accent-color: var(--theme-primary);
    cursor: pointer;
}

/* Metadata display */
.dialog-metadata[b-g58py70gbh] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.is-dark .dialog-metadata[b-g58py70gbh] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dialog-metadata-item[b-g58py70gbh] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #6b7280;
}

.is-dark .dialog-metadata-item[b-g58py70gbh] {
    color: rgba(255, 255, 255, 0.6);
}

.dialog-metadata-item svg[b-g58py70gbh] {
    width: 14px;
    height: 14px;
}

/* ============================================
   FOOTER
   ============================================ */
.dialog-footer[b-g58py70gbh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #e2e8f0;
    background: transparent;
    flex-shrink: 0;
}

.is-dark .dialog-footer[b-g58py70gbh] {
    background: transparent;
    border-top-color: rgba(255, 255, 255, 0.1);
}

.dialog-footer-left[b-g58py70gbh],
.dialog-footer-right[b-g58py70gbh] {
    display: flex;
    gap: 6px;
}

/* Buttons */
.dialog-btn[b-g58py70gbh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    font-family: inherit;
    min-height: 32px;
    -webkit-tap-highlight-color: transparent;
}

.dialog-btn svg[b-g58py70gbh] {
    width: 18px;
    height: 18px;
}

.dialog-btn:disabled[b-g58py70gbh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.dialog-btn-cancel[b-g58py70gbh] {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #6b7280;
}

.dialog-btn-cancel:hover:not(:disabled)[b-g58py70gbh] {
    background: #f3f4f6;
    color: #374151;
}

.is-dark .dialog-btn-cancel[b-g58py70gbh] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .dialog-btn-cancel:hover:not(:disabled)[b-g58py70gbh] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.dialog-btn-primary[b-g58py70gbh] {
    background: var(--theme-cta-gradient);
    color: var(--theme-btn-text);
}

.dialog-btn-primary:hover:not(:disabled)[b-g58py70gbh] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.4);
}

.dialog-btn-delete[b-g58py70gbh] {
    background: #ef4444;
    color: white;
}

.dialog-btn-delete:hover:not(:disabled)[b-g58py70gbh] {
    background: #dc2626;
}

/* Spinner */
.dialog-spinner[b-g58py70gbh] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: dialogSpin-b-g58py70gbh 0.6s linear infinite;
}

@keyframes dialogSpin-b-g58py70gbh {
    to { transform: rotate(360deg); }
}

/* ============================================
   CONFIRMATION OVERLAY
   ============================================ */
.dialog-confirm-overlay[b-g58py70gbh] {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    animation: dialogFadeIn-b-g58py70gbh 0.15s ease-out;
    border-radius: 6px;
}

.dialog-confirm-box[b-g58py70gbh] {
    background: white;
    border-radius: 10px;
    padding: 20px;
    max-width: 350px;
    text-align: center;
    animation: dialogSlideIn-b-g58py70gbh 0.2s ease-out;
}

.is-dark .dialog-confirm-box[b-g58py70gbh] {
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-confirm-box h3[b-g58py70gbh] {
    margin: 0 0 12px;
    font-size: 1.1rem;
    color: #1e293b;
}

.is-dark .dialog-confirm-box h3[b-g58py70gbh] {
    color: white;
}

.dialog-confirm-box p[b-g58py70gbh] {
    margin: 0 0 20px;
    color: #6b7280;
    font-size: 0.875rem;
}

.is-dark .dialog-confirm-box p[b-g58py70gbh] {
    color: rgba(255, 255, 255, 0.7);
}

.dialog-confirm-actions[b-g58py70gbh] {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    /* MOB-Dialog (2026-05-03): Centered alignment + hard 95dvh ceiling.
       Default flex-row footer (instead of stacked) saves ~50px of
       vertical space — Cancel + Submit fit comfortably side-by-side at
       mobile sizes once buttons are tightened.

       MOB-Dialog-Polish (2026-05-03): The earlier "stack footer
       vertically" rule was eating ~85px of the dialog's height budget
       for no UX gain — two short buttons fit on one row easily. Reverted
       to row layout so the snooze dialog's footer (Cancel + Snooze) sits
       inline and doesn't push the dialog past viewport. */
    .dialog-container[b-g58py70gbh] {
        width: 95%;
        max-height: 95vh;
        max-height: 95dvh;
        border-radius: 6px;
    }

    .dialog-header[b-g58py70gbh],
    .dialog-content[b-g58py70gbh],
    .dialog-footer[b-g58py70gbh] {
        padding: 8px 12px;
    }

    .dialog-title[b-g58py70gbh] {
        font-size: 1.05rem;
    }

    .dialog-footer[b-g58py70gbh] {
        gap: 8px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .dialog-btn[b-g58py70gbh] {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}
/* /Components/Dialogs/ImportTransactionsDialog.razor.rz.scp.css */
/* CSV import wizard scoped CSS. The BaseDialog shell handles the modal chrome
 * (overlay, container, header, footer) — everything here styles the inside
 * content for the four steps. Uses the NTS theme variables from utilities.css
 * so it adapts to all 8 themes automatically.
 */

.import-step[b-e9mey6e8tv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 600px;
}

.import-step-help[b-e9mey6e8tv] {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
}

.import-field[b-e9mey6e8tv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.import-field-label[b-e9mey6e8tv] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--theme-text-primary);
}

.import-field-label .required[b-e9mey6e8tv] {
    color: #ef4444;
    margin-left: 2px;
}

.import-field-label .optional[b-e9mey6e8tv] {
    color: var(--theme-text-secondary);
    font-weight: 400;
    font-size: 0.8rem;
    margin-left: 4px;
}

.import-field-input[b-e9mey6e8tv] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.9rem;
}

.import-field-input:focus[b-e9mey6e8tv] {
    outline: none;
    border-color: var(--theme-primary);
}

.import-field-hint[b-e9mey6e8tv] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* Variant of .import-field-hint shown when the wizard auto-mapped a column
 * for the user (currently only Credit). Same size as the regular hint but
 * tinted theme-primary so the user notices it's a suggestion they can
 * verify or clear, not generic instructional copy. */
.import-field-hint-suggest[b-e9mey6e8tv] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.import-field-grid[b-e9mey6e8tv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Checkbox row for the "Invert amounts (credit card / liability account)"
 * toggle in Step 2. Sits below the column-mapping grid as a single full-width
 * row so the longer explanation text has room to breathe.
 */
.import-field-checkbox[b-e9mey6e8tv] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-top: 0.25rem;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    background: var(--theme-surface-secondary);
    cursor: pointer;
}

.import-field-checkbox input[type="checkbox"][b-e9mey6e8tv] {
    margin-top: 0.25rem;
    flex-shrink: 0;
    cursor: pointer;
}

.import-field-checkbox > div[b-e9mey6e8tv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* --- Step 3: Review table --- */

.import-summary-bar[b-e9mey6e8tv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--theme-border);
}

.import-summary-pill[b-e9mey6e8tv] {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.import-summary-pill.new[b-e9mey6e8tv] { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.import-summary-pill.dup[b-e9mey6e8tv] { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.import-summary-pill.invalid[b-e9mey6e8tv] { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }

.import-summary-checked[b-e9mey6e8tv] {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

.import-preview-table-wrap[b-e9mey6e8tv] {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.import-preview-table[b-e9mey6e8tv] {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.85rem;
}

.import-preview-table th[b-e9mey6e8tv] {
    background: var(--theme-surface-secondary);
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    border-bottom: 1px solid var(--theme-border);
    position: sticky;
    top: 0;
    z-index: 1;
}

.import-preview-table td[b-e9mey6e8tv] {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--theme-border);
    vertical-align: middle;
}

.import-preview-table .col-check[b-e9mey6e8tv] { width: 36px; text-align: center; }
.import-preview-table th:nth-child(2)[b-e9mey6e8tv], .import-preview-table td:nth-child(2)[b-e9mey6e8tv] { width: 110px; }
.import-preview-table th:nth-child(4)[b-e9mey6e8tv], .import-preview-table td:nth-child(4)[b-e9mey6e8tv] { width: 120px; text-align: right; }
.import-preview-table th:nth-child(5)[b-e9mey6e8tv], .import-preview-table td:nth-child(5)[b-e9mey6e8tv] { width: 100px; }

.import-row-desc[b-e9mey6e8tv] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.import-row-amount[b-e9mey6e8tv] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.import-row.row-dup[b-e9mey6e8tv] { background: rgba(245, 158, 11, 0.05); }
.import-row.row-invalid[b-e9mey6e8tv] {
    background: rgba(239, 68, 68, 0.06);
    color: var(--theme-text-secondary);
    font-style: italic;
}

.import-status-tag[b-e9mey6e8tv] {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.import-status-tag.new[b-e9mey6e8tv] { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.import-status-tag.dup[b-e9mey6e8tv] { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.import-status-tag.invalid[b-e9mey6e8tv] { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }

/* --- Step 4: Done --- */

.import-done[b-e9mey6e8tv] {
    align-items: center;
    text-align: center;
    padding: 2rem 0 1rem 0;
    gap: 0.75rem;
}

.import-done-icon[b-e9mey6e8tv] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

.import-done-icon.success[b-e9mey6e8tv] { background: #22c55e; }
.import-done-icon.error[b-e9mey6e8tv] { background: #ef4444; }

.import-done h3[b-e9mey6e8tv] {
    margin: 0;
    color: var(--theme-text-primary);
}

.import-done-detail[b-e9mey6e8tv] {
    color: var(--theme-text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

/* ============================================
 * Footer + buttons
 *
 * BaseDialog renders <FooterContent> inside its .dialog-footer (which has
 * justify-content: space-between baked in). Our left/right wrapper divs and
 * buttons are RenderFragment content — they live in THIS component's scope,
 * not BaseDialog's. So BaseDialog's .dialog-btn / .dialog-footer-* rules
 * don't match (gotcha #78). Style them here with our own class names.
 * ============================================ */

.import-footer-left[b-e9mey6e8tv],
.import-footer-right[b-e9mey6e8tv] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.import-btn[b-e9mey6e8tv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    font-family: inherit;
    min-height: 32px;
    white-space: nowrap;
}

.import-btn:disabled[b-e9mey6e8tv] {
    opacity: 0.55;
    cursor: not-allowed;
}

.import-btn-cancel[b-e9mey6e8tv] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
    border-color: var(--theme-border, #e2e8f0);
}

.import-btn-cancel:hover:not(:disabled)[b-e9mey6e8tv] {
    background: var(--theme-surface-secondary, #e2e8f0);
}

.import-btn-primary[b-e9mey6e8tv] {
    background: var(--theme-primary, #1e293b);
    color: white;
    border-color: transparent;
}

.import-btn-primary:hover:not(:disabled)[b-e9mey6e8tv] {
    filter: brightness(1.1);
}

/* Dark-theme treatment for the cancel/back button — matches BaseDialog's
 * cancel styling so themed dialogs stay visually consistent. */
.is-dark .import-btn-cancel[b-e9mey6e8tv] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--theme-text-primary);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .import-btn-cancel:hover:not(:disabled)[b-e9mey6e8tv] {
    background: rgba(255, 255, 255, 0.14);
}

/* ============================================
 * File input polish
 * Browser-default <input type="file"> chrome is ugly. We can't fully
 * restyle the native widget across browsers, but we can soften the
 * default look + make the surrounding wrapper match other inputs.
 * ============================================ */

.import-file-input[b-e9mey6e8tv] {
    padding: 0;
    border: none;
    background: transparent;
}

.import-file-input[b-e9mey6e8tv]::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

.import-file-input[b-e9mey6e8tv]::file-selector-button:hover {
    background: var(--theme-surface-secondary, #e2e8f0);
}

.is-dark .import-file-input[b-e9mey6e8tv]::file-selector-button {
    background: rgba(255, 255, 255, 0.08);
    color: var(--theme-text-primary);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .import-file-input[b-e9mey6e8tv]::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* PLAID-CSV-GUARD-1: the account is fed by a linked bank. Theme tokens only (works in Slate / every dark theme). */
.import-linked-notice[b-e9mey6e8tv] {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--theme-border);
    background: var(--theme-bg-warning, var(--theme-surface-secondary));
    color: var(--theme-text-primary);
    font-size: .9rem;
}
/* /Components/Dialogs/ResolveTicketDialog.razor.rz.scp.css */
/* ============================================
   SCREEN RECORDING — RESOLVE TICKET DIALOG
   ============================================ */

.resolve-record-btn[b-7kma6jlys2] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1.5px dashed var(--theme-border, #cbd5e1);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resolve-record-btn svg[b-7kma6jlys2] {
    width: 20px;
    height: 20px;
    color: var(--theme-accent, #6366f1);
}

.resolve-record-btn:hover[b-7kma6jlys2] {
    border-color: var(--theme-accent, #6366f1);
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.08);
    transform: translateY(-1px);
}

.resolve-record-btn:disabled[b-7kma6jlys2] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.resolve-recording-preview[b-7kma6jlys2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.resolve-recording-badge[b-7kma6jlys2] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #16a34a;
}

.resolve-recording-badge svg[b-7kma6jlys2] {
    width: 20px;
    height: 20px;
}

.resolve-recording-size[b-7kma6jlys2] {
    font-weight: 400;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
}

.resolve-recording-discard[b-7kma6jlys2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resolve-recording-discard svg[b-7kma6jlys2] {
    width: 14px;
    height: 14px;
}

.resolve-recording-discard:hover[b-7kma6jlys2] {
    background: rgba(239, 68, 68, 0.2);
}

.resolve-recording-active[b-7kma6jlys2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    font-size: 0.9rem;
    font-weight: 600;
    color: #ef4444;
}

.resolve-recording-pulse[b-7kma6jlys2] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
    animation: resolve-pulse-b-7kma6jlys2 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes resolve-pulse-b-7kma6jlys2 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.resolve-recording-countdown[b-7kma6jlys2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 28px 24px 20px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 2px solid rgba(239, 68, 68, 0.4);
    color: var(--theme-text-primary, #1e293b);
}

.resolve-countdown-number[b-7kma6jlys2] {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    animation: resolve-countdown-pulse-b-7kma6jlys2 1s ease-in-out infinite;
}

.resolve-countdown-label[b-7kma6jlys2] {
    font-size: 1rem;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 8px;
}

@keyframes resolve-countdown-pulse-b-7kma6jlys2 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

.resolve-recording-status[b-7kma6jlys2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--theme-accent-rgb, 99, 102, 241), 0.25);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

.resolve-recording-spinner[b-7kma6jlys2] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--theme-accent-rgb, 99, 102, 241), 0.3);
    border-top-color: var(--theme-accent, #6366f1);
    border-radius: 50%;
    animation: resolve-spin-b-7kma6jlys2 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes resolve-spin-b-7kma6jlys2 {
    to { transform: rotate(360deg); }
}

/* ============================================
   DARK THEMES
   ============================================ */

.is-dark .resolve-record-btn[b-7kma6jlys2] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--theme-border);
    color: var(--theme-text-primary);
}

.is-dark .resolve-record-btn:hover[b-7kma6jlys2] {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.12);
}

.is-dark .resolve-recording-preview[b-7kma6jlys2] {
    background: var(--theme-bg-success, rgba(34, 197, 94, 0.1));
    border-color: rgba(34, 197, 94, 0.3);
}

.is-dark .resolve-recording-badge[b-7kma6jlys2] {
    color: var(--theme-text-success, #4ade80);
}

.is-dark .resolve-recording-size[b-7kma6jlys2] {
    color: var(--theme-text-secondary);
}

.is-dark .resolve-recording-active[b-7kma6jlys2] {
    background: var(--theme-bg-danger, rgba(239, 68, 68, 0.1));
    border-color: rgba(239, 68, 68, 0.3);
}

.is-dark .resolve-recording-countdown[b-7kma6jlys2] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--theme-text-primary);
}
/* /Components/Finance/FinanceSubNav.razor.rz.scp.css */
/* ============================================
   FINANCE SUB-NAV — Primary 5-tab strip + dynamic Reports sub-row
   Renders on every Finance page so the section feels like one
   cohesive suite. The primary row exposes Dashboard, Transactions,
   Budgets, Projections, and a Reports parent. When the active page
   is one of the four reports, a smaller second-row sub-strip
   (.finance-subnav-sub) appears below with the four siblings.
   Per-tab accent colors give each destination its own identity
   while structural styling stays on theme variables.
   ============================================ */

.finance-subnav[b-0dh0efpn2u] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.finance-subnav-tab[b-0dh0efpn2u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 10px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.finance-subnav-tab:hover[b-0dh0efpn2u] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
}

.finance-subnav-tab-icon[b-0dh0efpn2u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* CRM-NAV-V-1.1 (2026-05-14): The SVG inside .finance-subnav-tab-icon is
   injected via @((MarkupString)tab.IconSvg) in FinanceSubNav.razor. MarkupString
   bypasses Blazor's element processing, so the SVG element does NOT get the
   `b-XYZ` scoped-CSS attribute. A plain descendant selector becomes
   `.finance-subnav-tab-icon[b-XYZ] svg[b-XYZ]` which can't match the
   unattributed SVG. `::deep` tells Blazor to NOT add the attribute to the
   descendant, so the selector becomes `.finance-subnav-tab-icon[b-XYZ] svg`,
   which DOES match. CRM-NAV-V-1.2 also bakes `width="100%" height="100%"`
   directly into the SVG markup as a belt-and-suspenders fallback in case the
   scoped-CSS bundle is stale. See CrmSubNav.razor.css for the full lesson. */
.finance-subnav-tab-icon[b-0dh0efpn2u]  svg {
    width: 100%;
    height: 100%;
}

.finance-subnav-tab-label[b-0dh0efpn2u] {
    line-height: 1;
}

/* ----- Active state ----- */
.finance-subnav-tab.is-active[b-0dh0efpn2u] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ----- Per-tab accent colors (active state only) ----- */
.finance-subnav-tab.accent-accounts.is-active[b-0dh0efpn2u] {
    color: #06b6d4;
    border-color: rgba(6, 182, 212, 0.25);
    background: rgba(6, 182, 212, 0.08);
}

.finance-subnav-tab.accent-dashboard.is-active[b-0dh0efpn2u] {
    color: #6366f1;
    border-color: rgba(99, 102, 241, 0.25);
    background: rgba(99, 102, 241, 0.08);
}

.finance-subnav-tab.accent-transactions.is-active[b-0dh0efpn2u] {
    color: #0ea5e9;
    border-color: rgba(14, 165, 233, 0.25);
    background: rgba(14, 165, 233, 0.08);
}

.finance-subnav-tab.accent-budgets.is-active[b-0dh0efpn2u] {
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.25);
    background: rgba(139, 92, 246, 0.08);
}

.finance-subnav-tab.accent-recurring.is-active[b-0dh0efpn2u] {
    color: #14b8a6;
    border-color: rgba(20, 184, 166, 0.25);
    background: rgba(20, 184, 166, 0.08);
}

/* Mileage — green-600. Distinct from Recurring's teal so the two adjacent
   tabs don't blur visually, and reads as "road / forward / go" which fits
   the mile-counting semantic. */
.finance-subnav-tab.accent-mileage.is-active[b-0dh0efpn2u] {
    color: #16a34a;
    border-color: rgba(22, 163, 74, 0.25);
    background: rgba(22, 163, 74, 0.08);
}

/* Reports — neutral slate so it doesn't steal attention from the per-report
   accents that show up in the second row when this tab is active. */
.finance-subnav-tab.accent-reports.is-active[b-0dh0efpn2u] {
    color: #475569;
    border-color: rgba(71, 85, 105, 0.25);
    background: rgba(71, 85, 105, 0.08);
}

.finance-subnav-tab.accent-income.is-active[b-0dh0efpn2u] {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.08);
}

.finance-subnav-tab.accent-expense.is-active[b-0dh0efpn2u] {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.08);
}

.finance-subnav-tab.accent-summary.is-active[b-0dh0efpn2u] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.08);
}

/* Subtle accent tint on hover when not active */
.finance-subnav-tab.accent-accounts:hover:not(.is-active)[b-0dh0efpn2u] { color: #06b6d4; }
.finance-subnav-tab.accent-dashboard:hover:not(.is-active)[b-0dh0efpn2u] { color: #6366f1; }
.finance-subnav-tab.accent-transactions:hover:not(.is-active)[b-0dh0efpn2u] { color: #0ea5e9; }
.finance-subnav-tab.accent-budgets:hover:not(.is-active)[b-0dh0efpn2u] { color: #8b5cf6; }
.finance-subnav-tab.accent-recurring:hover:not(.is-active)[b-0dh0efpn2u] { color: #14b8a6; }
.finance-subnav-tab.accent-mileage:hover:not(.is-active)[b-0dh0efpn2u] { color: #16a34a; }
.finance-subnav-tab.accent-reports:hover:not(.is-active)[b-0dh0efpn2u] { color: #475569; }
.finance-subnav-tab.accent-income:hover:not(.is-active)[b-0dh0efpn2u] { color: #22c55e; }
.finance-subnav-tab.accent-expense:hover:not(.is-active)[b-0dh0efpn2u] { color: #ef4444; }
.finance-subnav-tab.accent-summary:hover:not(.is-active)[b-0dh0efpn2u] { color: #f59e0b; }

/* ============================================
   DARK THEMES
   ============================================ */
.is-dark .finance-subnav[b-0dh0efpn2u] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .finance-subnav-tab[b-0dh0efpn2u] {
    color: rgba(255, 255, 255, 0.65);
}

.is-dark .finance-subnav-tab:hover[b-0dh0efpn2u] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .finance-subnav-tab.is-active[b-0dh0efpn2u] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Per-tab accent backgrounds get a touch more punch on dark themes */
.is-dark .finance-subnav-tab.accent-accounts.is-active[b-0dh0efpn2u] {
    background: rgba(6, 182, 212, 0.18);
    color: #67e8f9;
}

.is-dark .finance-subnav-tab.accent-dashboard.is-active[b-0dh0efpn2u] {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

.is-dark .finance-subnav-tab.accent-transactions.is-active[b-0dh0efpn2u] {
    background: rgba(14, 165, 233, 0.18);
    color: #7dd3fc;
}

.is-dark .finance-subnav-tab.accent-budgets.is-active[b-0dh0efpn2u] {
    background: rgba(139, 92, 246, 0.18);
    color: #c4b5fd;
}

.is-dark .finance-subnav-tab.accent-recurring.is-active[b-0dh0efpn2u] {
    background: rgba(20, 184, 166, 0.18);
    color: #5eead4;
}

.is-dark .finance-subnav-tab.accent-mileage.is-active[b-0dh0efpn2u] {
    background: rgba(22, 163, 74, 0.18);
    color: #86efac;
}

.is-dark .finance-subnav-tab.accent-reports.is-active[b-0dh0efpn2u] {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

.is-dark .finance-subnav-tab.accent-income.is-active[b-0dh0efpn2u] {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.is-dark .finance-subnav-tab.accent-expense.is-active[b-0dh0efpn2u] {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.is-dark .finance-subnav-tab.accent-summary.is-active[b-0dh0efpn2u] {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

/* ============================================
   FINANCE SUB-NAV — SECOND ROW (Reports children)
   Renders only when the active page is Income Statement,
   Expense Report, Balance Sheet, or Work Summary.
   Visually attached to the primary strip above by a
   negative top margin so the two strips read as one
   compound nav rather than two unrelated bars.
   ============================================ */
.finance-subnav-sub[b-0dh0efpn2u] {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.25rem;
    background: var(--theme-bg-secondary, rgba(15, 23, 42, 0.04));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 4px;
    margin-top: -0.75rem; /* tug up under the primary strip */
    margin-bottom: 1.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.finance-subnav-sub-tab[b-0dh0efpn2u] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    /* Default color uses --theme-text-primary (NOT --theme-text-secondary)
       so the inactive sub-tabs stay legible against the light .finance-
       subnav-sub background in the Cloud / Executive themes. The previous
       --theme-text-secondary (#64748b muted gray) on a near-white parent
       bg pushed the contrast below readable. The active state's visual
       differentiation is carried by the bg-elevated lift + box-shadow on
       .is-active rather than a color shift, so default and active sharing
       the same color is fine — the lift is the affordance. Font-weight
       bumped 500 → 600 to match the primary row's weight; the lighter
       weight contributed to the legibility gap. See DECISIONS.md →
       "2026-04-29: Finance subnav light-theme contrast fix". */
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
}

.finance-subnav-sub-tab:hover[b-0dh0efpn2u] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-bg-elevated, rgba(15, 23, 42, 0.06));
}

.finance-subnav-sub-tab-icon[b-0dh0efpn2u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* CRM-NAV-V-1.1 (2026-05-14): Same MarkupString + ::deep gotcha as the
   primary tab icons above — see that comment block for the full lesson. */
.finance-subnav-sub-tab-icon[b-0dh0efpn2u]  svg {
    width: 100%;
    height: 100%;
}

.finance-subnav-sub-tab-label[b-0dh0efpn2u] {
    line-height: 1;
}

.finance-subnav-sub-tab.is-active[b-0dh0efpn2u] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-surface, #ffffff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Per-tab accent colors — second row mirrors the per-page semantic colors:
   green income, red expense, blue balance snapshot, amber yearly aggregate. */
.finance-subnav-sub-tab.accent-income.is-active[b-0dh0efpn2u] {
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.10);
}

.finance-subnav-sub-tab.accent-expense.is-active[b-0dh0efpn2u] {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
    background: rgba(239, 68, 68, 0.10);
}

.finance-subnav-sub-tab.accent-balance.is-active[b-0dh0efpn2u] {
    color: #0ea5e9;
    border-color: rgba(14, 165, 233, 0.25);
    background: rgba(14, 165, 233, 0.10);
}

.finance-subnav-sub-tab.accent-summary.is-active[b-0dh0efpn2u] {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.25);
    background: rgba(245, 158, 11, 0.10);
}

/* Subtle accent tint on hover when not active */
.finance-subnav-sub-tab.accent-income:hover:not(.is-active)[b-0dh0efpn2u] { color: #22c55e; }
.finance-subnav-sub-tab.accent-expense:hover:not(.is-active)[b-0dh0efpn2u] { color: #ef4444; }
.finance-subnav-sub-tab.accent-balance:hover:not(.is-active)[b-0dh0efpn2u] { color: #0ea5e9; }
.finance-subnav-sub-tab.accent-summary:hover:not(.is-active)[b-0dh0efpn2u] { color: #f59e0b; }

/* ----- Dark themes (second row) ----- */
.is-dark .finance-subnav-sub[b-0dh0efpn2u] {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .finance-subnav-sub-tab[b-0dh0efpn2u] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .finance-subnav-sub-tab:hover[b-0dh0efpn2u] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .finance-subnav-sub-tab.is-active[b-0dh0efpn2u] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.is-dark .finance-subnav-sub-tab.accent-income.is-active[b-0dh0efpn2u] {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

.is-dark .finance-subnav-sub-tab.accent-expense.is-active[b-0dh0efpn2u] {
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
}

.is-dark .finance-subnav-sub-tab.accent-balance.is-active[b-0dh0efpn2u] {
    background: rgba(14, 165, 233, 0.18);
    color: #7dd3fc;
}

.is-dark .finance-subnav-sub-tab.accent-summary.is-active[b-0dh0efpn2u] {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

/* ============================================
   RESPONSIVE — let the strip scroll horizontally on phones
   ============================================ */
@media (max-width: 768px) {
    .finance-subnav[b-0dh0efpn2u] {
        flex-wrap: nowrap;
        padding: 4px;
    }

    .finance-subnav-tab[b-0dh0efpn2u] {
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
    }

    .finance-subnav-sub[b-0dh0efpn2u] {
        flex-wrap: nowrap;
        padding: 3px;
    }

    .finance-subnav-sub-tab[b-0dh0efpn2u] {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .finance-subnav-tab-label[b-0dh0efpn2u] {
        display: none;
    }

    /* CRM-NAV-V-1 (2026-05-14, ported from CrmSubNav): flex-shrink:0 +
       min-width keep inactive icon-only tabs from being squeezed to
       ~0px wide by the active tab (which still renders its label, so
       it's wider in the flex contention). Container is overflow-x:auto
       so any genuine overflow becomes a horizontal scroll affordance.
       Without this, on iPhone-class viewports only the active pill
       was visible; the inactive icons collapsed to nothing. */
    .finance-subnav-tab[b-0dh0efpn2u] {
        padding: 0.55rem 0.7rem;
        flex-shrink: 0;
        min-width: 40px;
        justify-content: center;
    }

    /* Stronger contrast on inactive icons at icon-only sizes — medium-gray
       --theme-text-secondary disappears against a near-white container
       at 18x18. Bump to --theme-text-primary so icons read as buttons. */
    .finance-subnav-tab:not(.is-active)[b-0dh0efpn2u] {
        color: var(--theme-text-primary, #1e293b);
    }

    .finance-subnav-tab-icon[b-0dh0efpn2u] {
        width: 22px;
        height: 22px;
    }

    .finance-subnav-tab.is-active .finance-subnav-tab-label[b-0dh0efpn2u] {
        display: inline;
    }

    /* Same treatment on the second-tier sub-tabs (Finance has nested
       navigation, e.g. Accounts → All / Customers / Vendors). The sub-
       tabs are smaller so the proportions adjust accordingly. */
    .finance-subnav-sub-tab-label[b-0dh0efpn2u] {
        display: none;
    }

    .finance-subnav-sub-tab[b-0dh0efpn2u] {
        padding: 0.4rem 0.6rem;
        flex-shrink: 0;
        min-width: 36px;
        justify-content: center;
    }

    .finance-subnav-sub-tab:not(.is-active)[b-0dh0efpn2u] {
        color: var(--theme-text-primary, #1e293b);
    }

    .finance-subnav-sub-tab.is-active .finance-subnav-sub-tab-label[b-0dh0efpn2u] {
        display: inline;
    }
}

/* CRM-NAV-V-1 (2026-05-14): Dark-theme contrast bump for icon-only
   inactive tabs — parallel to the CrmSubNav fix. Icons can blur into
   the surface tint on Space/Mystic/Tron at 18-22px without the boost. */
@media (max-width: 480px) {
    .is-dark .finance-subnav-tab:not(.is-active)[b-0dh0efpn2u],
    .is-dark .finance-subnav-sub-tab:not(.is-active)[b-0dh0efpn2u] {
        color: rgba(255, 255, 255, 0.85);
    }
}
/* /Components/Finance/MoneyPulseCard.razor.rz.scp.css */
/* FIN-PULSE-1: opt-in Home "Money this month" card. Theme tokens + .is-dark override,
   same idiom as TodaysWorkCard. */
.money-pulse-card[b-ljjs2hqlx5] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    padding: 16px 22px;
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.06));
}

.money-pulse-head[b-ljjs2hqlx5] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.money-pulse-title[b-ljjs2hqlx5] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--theme-text-primary, #1e293b);
}

.money-pulse-days[b-ljjs2hqlx5],
.money-pulse-muted[b-ljjs2hqlx5] {
    color: var(--theme-text-muted, #64748b);
    font-size: 0.85rem;
}

.money-pulse-row[b-ljjs2hqlx5] {
    display: grid;
    grid-template-columns: 90px minmax(0, 1.2fr) auto minmax(0, 1.3fr);
    gap: 12px;
    align-items: baseline;
    padding: 6px 0;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    font-size: 0.92rem;
}

.money-pulse-label[b-ljjs2hqlx5] {
    font-weight: 600;
    color: var(--theme-text-secondary, #475569);
}

.money-pulse-actual[b-ljjs2hqlx5] {
    color: var(--theme-text-primary, #1e293b);
}

.money-pulse-status[b-ljjs2hqlx5] {
    font-weight: 700;
    color: var(--theme-text-secondary, #475569);
    white-space: nowrap;
}

.money-pulse-status.is-good[b-ljjs2hqlx5] { color: var(--theme-text-success, #047857); }
.money-pulse-status.is-bad[b-ljjs2hqlx5] { color: var(--theme-text-danger, #dc2626); }

.money-pulse-forecast[b-ljjs2hqlx5] {
    text-align: right;
}

/* PULSE-EXPLAIN-1: ⓘ beside each projection; opens the arithmetic under the row. */
.money-pulse-info[b-ljjs2hqlx5] {
    background: none;
    border: 0;
    padding: 0 0 0 6px;
    margin: 0;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--theme-text-muted, #64748b);
    cursor: pointer;
}

.money-pulse-info:hover[b-ljjs2hqlx5],
.money-pulse-info[aria-expanded="true"][b-ljjs2hqlx5] {
    color: var(--theme-text-primary, #1e293b);
}

.money-pulse-explain[b-ljjs2hqlx5] {
    grid-column: 2 / -1;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--theme-text-secondary, #475569);
    padding-bottom: 2px;
}

.is-dark .money-pulse-explain[b-ljjs2hqlx5] { color: #cbd5e1; }
.is-dark .money-pulse-info:hover[b-ljjs2hqlx5],
.is-dark .money-pulse-info[aria-expanded="true"][b-ljjs2hqlx5] { color: #f1f5f9; }

/* PULSE-NEED-1: "need ~44h more (~2.1h/day)" is the number to act on - full-strength, not muted. */
.money-pulse-forecast.is-need[b-ljjs2hqlx5] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
}

.money-pulse-foot[b-ljjs2hqlx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.money-pulse-nudges[b-ljjs2hqlx5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.money-pulse-nudge[b-ljjs2hqlx5] {
    font-size: 0.85rem;
    color: var(--theme-text-warning, #b45309);
}

.money-pulse-link[b-ljjs2hqlx5] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-primary-ink, var(--theme-primary, #4f46e5));
    text-decoration: none;
    margin-left: auto;
}

@media (max-width: 640px) {
    .money-pulse-row[b-ljjs2hqlx5] {
        grid-template-columns: 80px 1fr;
    }
    .money-pulse-status[b-ljjs2hqlx5],
    .money-pulse-forecast[b-ljjs2hqlx5] {
        grid-column: 2;
        text-align: left;
    }
}

.is-dark .money-pulse-card[b-ljjs2hqlx5] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    box-shadow: none;
}

.is-dark .money-pulse-title[b-ljjs2hqlx5],
.is-dark .money-pulse-actual[b-ljjs2hqlx5],
.is-dark .money-pulse-forecast.is-need[b-ljjs2hqlx5] {
    color: #f1f5f9;
}

.is-dark .money-pulse-row[b-ljjs2hqlx5] {
    border-top-color: rgba(255, 255, 255, 0.06);
}

/* ─── MONEY-TAB-1 (2026-10-14): the pulse inside the hub card's Money tab - no chrome of its own. */
.money-pulse-card--bare[b-ljjs2hqlx5] {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.is-dark .money-pulse-card--bare[b-ljjs2hqlx5] {
    background: transparent;
    backdrop-filter: none;
}

.money-pulse-empty[b-ljjs2hqlx5] {
    margin: 8px 0 0;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
}
/* /Components/Finance/PeriodPicker.razor.rz.scp.css */
/* ============================================
   FINANCE PERIOD PICKER — Shared component
   Used on every Finance page so a Week/Month/Year/Custom
   choice persists across navigation.
   ============================================ */

.period-picker[b-eg8izwkvt0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1.25rem;
}

.period-picker-buttons[b-eg8izwkvt0] {
    display: inline-flex;
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
    border-radius: 10px;
    padding: 4px;
    gap: 2px;
}

.period-picker-btn[b-eg8izwkvt0] {
    padding: 0.45rem 0.95rem;
    border: none;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.period-picker-btn:hover[b-eg8izwkvt0] {
    color: var(--theme-text-primary, #1e293b);
}

.period-picker-btn.is-active[b-eg8izwkvt0] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.period-picker-custom[b-eg8izwkvt0] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.period-picker-custom-field[b-eg8izwkvt0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.period-picker-custom-field input[type="date"][b-eg8izwkvt0] {
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-bg-input, var(--theme-surface, #ffffff));
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.85rem;
}

.period-picker-summary[b-eg8izwkvt0] {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--theme-text-muted, var(--theme-text-secondary, #94a3b8));
    font-weight: 500;
}

/* ============================================
   DARK THEMES
   ============================================ */
.is-dark .period-picker[b-eg8izwkvt0] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .period-picker-buttons[b-eg8izwkvt0] {
    background: rgba(255, 255, 255, 0.05);
}

/* Inactive (non-active) period button — without this rule the button
 * inherits `color: var(--theme-text-secondary, #64748b)` from the base
 * styles. The fallback `#64748b` is a slate gray that's hard to read on
 * the dark navy backgrounds; explicit light-muted color is more legible. */
.is-dark .period-picker-btn[b-eg8izwkvt0] {
    color: rgba(255, 255, 255, 0.65);
}

.is-dark .period-picker-btn:hover[b-eg8izwkvt0] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .period-picker-btn.is-active[b-eg8izwkvt0] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .period-picker-summary[b-eg8izwkvt0] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .period-picker-custom-field input[type="date"][b-eg8izwkvt0] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .period-picker[b-eg8izwkvt0] {
        gap: 0.5rem;
    }

    .period-picker-summary[b-eg8izwkvt0] {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }
}
/* /Components/FloatingRecorderControl.razor.rz.scp.css */
/* FloatingRecorderControl - Screen recording floating widget */

/*
 * SR-MR-2 (2026-05): the hidden-mode hint used to render at opacity 0.3 indefinitely.
 * In recording-of-self scenarios that means every demo / marketing recording captured
 * the pill in the corner the entire time the panel was hidden — defeating the purpose
 * of clicking Hide. The pill now auto-fades after 2.5 seconds via animation, so the
 * user gets confirmation feedback without the pill polluting the rest of the recording.
 * Ctrl+Shift+M (the actual unhide mechanism) still works after the pill fades.
 */
.hidden-mode-hint[b-io8qnh79t2] {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99998;
    background: var(--theme-overlay-strong, rgba(0, 0, 0, 0.7));
    color: var(--theme-primary-contrast, white);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    animation: sr-hidden-hint-fade-b-io8qnh79t2 2.5s ease-out forwards;
}

@keyframes sr-hidden-hint-fade-b-io8qnh79t2 {
    0%   { opacity: 0;    transform: translateY(-4px); pointer-events: none; }
    8%   { opacity: 0.95; transform: translateY(0);    pointer-events: auto; }
    70%  { opacity: 0.95; transform: translateY(0);    pointer-events: auto; }
    100% { opacity: 0;    transform: translateY(-4px); pointer-events: none; }
}

.hidden-mode-hint:hover[b-io8qnh79t2] {
    opacity: 1;
}

/*
 * SR-D-1 (2026-05): floating recorder palette migrated to theme tokens.
 * — Recording surface uses a gradient mixed from --theme-primary so the panel
 *   identity tracks the user's active theme (Cloud → blue, Tron → cyan, etc.)
 *   instead of locking in the legacy indigo/violet.
 * — Paused/processing keep amber via --theme-warning (universal pause/buffer color).
 * — Idle uses --theme-surface-elevated so it harmonizes with cards on the page.
 * — White text stays — the gradients are intentionally dark enough to read
 *   white on across all 8 themes without a per-theme override.
 */
.floating-recorder[b-io8qnh79t2] {
    position: fixed;
    bottom: 80px;
    left: 20px;
    z-index: 99998;
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--theme-shadow-color, transparent);
    color: var(--theme-primary-contrast, white);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: all 0.3s ease;
}

.floating-recorder.recording[b-io8qnh79t2] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #667eea) 90%, white 10%) 0%,
        color-mix(in srgb, var(--theme-primary, #764ba2) 70%, black 30%) 100%);
}

.floating-recorder.recording.is-paused[b-io8qnh79t2] {
    background: linear-gradient(135deg,
        var(--theme-warning, #f59e0b) 0%,
        color-mix(in srgb, var(--theme-warning, #d97706) 80%, black 20%) 100%);
}

.floating-recorder.idle[b-io8qnh79t2] {
    background: linear-gradient(135deg,
        var(--theme-surface-elevated, #4a5568) 0%,
        var(--theme-surface, #2d3748) 100%);
}

.floating-recorder.processing[b-io8qnh79t2] {
    background: linear-gradient(135deg,
        var(--theme-warning, #f59e0b) 0%,
        color-mix(in srgb, var(--theme-warning, #d97706) 80%, black 20%) 100%);
}

.processing-indicator[b-io8qnh79t2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.processing-spinner[b-io8qnh79t2] {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: fc-spin-b-io8qnh79t2 0.8s linear infinite;
}

.processing-text[b-io8qnh79t2] {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@keyframes fc-spin-b-io8qnh79t2 {
    to { transform: rotate(360deg); }
}

.floating-recorder.collapsed[b-io8qnh79t2] {
    padding: 8px 12px;
}

.floating-recorder.expanded[b-io8qnh79t2] {
    padding: 12px;
    width: 280px;
}

.recorder-header[b-io8qnh79t2],
.start-header[b-io8qnh79t2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.recorder-status[b-io8qnh79t2] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.recording-dot[b-io8qnh79t2] {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-recording-b-io8qnh79t2 1.5s infinite;
}

.recording-dot.paused[b-io8qnh79t2] {
    background: #fbbf24;
    animation: none;
}

.paused-label[b-io8qnh79t2] {
    font-size: 10px;
    font-weight: 700;
    background: transparent;
    padding: 2px 6px;
    border-radius: 4px;
}

.paused-label-small[b-io8qnh79t2] {
    font-size: 10px;
    font-weight: 700;
    margin-left: 4px;
}

@keyframes pulse-recording-b-io8qnh79t2 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

.recording-time[b-io8qnh79t2] {
    font-family: monospace;
    font-size: 14px;
    font-weight: 600;
}

.recorder-actions[b-io8qnh79t2] {
    display: flex;
    gap: 4px;
}

/* SR-D-1 (2026-05): webcam/mic indicator chips track theme tokens — webcam uses
   --theme-text-success (universal "active capture" green), mic uses --theme-primary
   so the row visually pairs with the recording surface above. */
.webcam-pip-indicator[b-io8qnh79t2] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: color-mix(in srgb, var(--theme-text-success, #22c55e) 30%, transparent);
    padding: 6px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 11px;
}

.webcam-icon-svg[b-io8qnh79t2] {
    width: 14px;
    height: 14px;
}

.webcam-indicator-svg[b-io8qnh79t2] {
    width: 12px;
    height: 12px;
    margin-left: 6px;
}

.mic-indicator[b-io8qnh79t2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: color-mix(in srgb, var(--theme-primary, #8b5cf6) 15%, transparent);
    color: color-mix(in srgb, var(--theme-primary, #c4b5fd) 70%, white 30%);
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 11px;
}

.mic-icon-svg[b-io8qnh79t2] {
    width: 14px;
    height: 14px;
}

.mic-indicator-svg[b-io8qnh79t2] {
    width: 12px;
    height: 12px;
    margin-left: 4px;
    color: color-mix(in srgb, var(--theme-primary, #c4b5fd) 70%, white 30%);
}

.webcam-toggle-icon[b-io8qnh79t2] {
    width: 14px;
    height: 14px;
}

.pip-position-indicator[b-io8qnh79t2] {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.8;
}

.webcam-quick-toggle[b-io8qnh79t2] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.webcam-toggle-label[b-io8qnh79t2] {
    font-size: 12px;
}

.webcam-toggle-small[b-io8qnh79t2] {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.webcam-toggle-small input[b-io8qnh79t2] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider-small[b-io8qnh79t2] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.3);
    transition: 0.3s;
    border-radius: 20px;
}

.toggle-slider-small[b-io8qnh79t2]:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.webcam-toggle-small input:checked + .toggle-slider-small[b-io8qnh79t2] {
    background-color: #22c55e;
}

.webcam-toggle-small input:checked + .toggle-slider-small[b-io8qnh79t2]:before {
    transform: translateX(16px);
}

.control-row[b-io8qnh79t2] {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
}

.control-btn[b-io8qnh79t2] {
    flex: 1;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: white;
    transition: all 0.2s;
}

.control-btn:hover[b-io8qnh79t2] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

.control-btn.pause-btn[b-io8qnh79t2] {
    background: rgba(251, 191, 36, 0.4);
}

.control-btn.pause-btn:hover[b-io8qnh79t2] {
    background: rgba(251, 191, 36, 0.6);
}

.control-btn.restart-btn[b-io8qnh79t2] {
    background: rgba(59, 130, 246, 0.4);
}

.control-btn.restart-btn:hover[b-io8qnh79t2] {
    background: rgba(59, 130, 246, 0.6);
}

.control-btn.stop-btn[b-io8qnh79t2] {
    background: rgba(239, 68, 68, 0.4);
}

.control-btn.stop-btn:hover[b-io8qnh79t2] {
    background: rgba(239, 68, 68, 0.6);
}

.mini-btn[b-io8qnh79t2] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    color: white;
    transition: all 0.2s;
}

.mini-btn:hover[b-io8qnh79t2] {
    background: rgba(255, 255, 255, 0.3);
}

.hide-btn[b-io8qnh79t2] {
    background: rgba(59, 130, 246, 0.4);
}

.hide-btn:hover[b-io8qnh79t2] {
    background: rgba(59, 130, 246, 0.6);
}

.custom-marker[b-io8qnh79t2] {
    display: flex;
    gap: 4px;
}

.custom-marker input[b-io8qnh79t2] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    color: #333;
}

.custom-marker input:disabled[b-io8qnh79t2] {
    opacity: 0.5;
}

.custom-marker input[b-io8qnh79t2]::placeholder {
    color: #999;
}

.add-btn[b-io8qnh79t2] {
    background: white;
    color: #764ba2;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: all 0.2s;
}

.add-btn:hover:not(:disabled)[b-io8qnh79t2] {
    transform: scale(1.05);
}

.add-btn:disabled[b-io8qnh79t2] {
    opacity: 0.5;
    cursor: not-allowed;
}

.markers-count[b-io8qnh79t2] {
    text-align: center;
    font-size: 11px;
    margin-top: 8px;
    opacity: 0.8;
}

.hide-hint[b-io8qnh79t2] {
    text-align: center;
    font-size: 9px;
    margin-top: 6px;
    opacity: 0.6;
}

.expand-btn[b-io8qnh79t2] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
}

.expand-btn:hover[b-io8qnh79t2] {
    opacity: 0.9;
}

.start-panel[b-io8qnh79t2] {
    text-align: center;
}

.start-title[b-io8qnh79t2] {
    font-weight: 600;
    font-size: 13px;
}

.start-btn[b-io8qnh79t2] {
    width: 100%;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
    margin-bottom: 8px;
}

.start-btn:hover:not(:disabled)[b-io8qnh79t2] {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.start-btn:disabled[b-io8qnh79t2] {
    opacity: 0.7;
    cursor: wait;
}

.start-hint[b-io8qnh79t2] {
    font-size: 10px;
    opacity: 0.7;
}

.idle-btn[b-io8qnh79t2] {
    padding: 4px 8px;
}

.idle-icon[b-io8qnh79t2] {
    font-size: 11px;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.3);
    padding: 4px 8px;
    border-radius: 4px;
}

/* Floating countdown overlay for restart.
   SR-F-8 (2026-05-08): brought into visual parity with `.sr-countdown-*` in
   ScreenRecorder.razor.css so the user can't tell which path triggered the
   countdown — they look identical whether you Start from the recorder page
   or Restart from the floating control on any page. Was: purple #818cf8 number,
   no card wrapper, oversized 10rem font, red-tinted cancel chip. Now: same
   themed card surface, same red gradient number, same animation curve, same
   white-on-transparent cancel chip. The two stylesheets are deliberately
   parallel — if you change one, change the other. */
.floating-countdown-overlay[b-io8qnh79t2] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--theme-background, #0f172a) 90%, black 10%);
    background-color: color-mix(in oklch, var(--theme-background, #0f172a) 90%, black 10%);
    opacity: 0.94;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
}

.floating-countdown-content[b-io8qnh79t2] {
    text-align: center;
    color: var(--theme-primary-contrast, white);
    padding: 48px 64px 40px;
    background: color-mix(in srgb, var(--theme-surface-elevated, #1e293b) 60%, transparent);
    border-radius: 24px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    min-width: 320px;
}

.floating-countdown-number[b-io8qnh79t2] {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #ff6b6b 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(239, 68, 68, 0.4));
    animation: floatingCountdownPulse-b-io8qnh79t2 1s ease-out;
}

.floating-countdown-text[b-io8qnh79t2] {
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.7;
    margin: 0 0 32px;
    letter-spacing: 0.02em;
}

.floating-countdown-cancel[b-io8qnh79t2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.floating-countdown-cancel:hover[b-io8qnh79t2] {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Same animation curve as `.sr-countdown-pop` so the entrance feels identical. */
@keyframes floatingCountdownPulse-b-io8qnh79t2 {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 640px) {
    .floating-countdown-content[b-io8qnh79t2] { padding: 36px 28px 32px; min-width: unset; margin: 0 16px; }
    .floating-countdown-number[b-io8qnh79t2] { font-size: 6rem; }
}
/* /Components/GlobalSceneOverlay.razor.rz.scp.css */
/* GlobalSceneOverlay - Screen recording scene markers */

.global-scene-overlay[b-s4qweb7rf1] {
    position: fixed;
    z-index: 999999;
    padding: 1rem 1.5rem;
    border-radius: 0.75rem;
    animation: globalOverlayFadeIn-b-s4qweb7rf1 0.3s ease-out, globalOverlayFadeOut-b-s4qweb7rf1 0.3s ease-in forwards;
    animation-delay: 0s, var(--overlay-duration, 2.7s);
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@keyframes globalOverlayFadeIn-b-s4qweb7rf1 {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes globalOverlayFadeOut-b-s4qweb7rf1 {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
}

.global-overlay-content[b-s4qweb7rf1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.global-overlay-text[b-s4qweb7rf1] {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

/* Overlay Styles */
.global-scene-overlay.style-dark[b-s4qweb7rf1] {
    background: rgba(0, 0, 0, 0.85);
    color: white;
    box-shadow: 0 8px 32px transparent;
    backdrop-filter: blur(10px);
}

.global-scene-overlay.style-light[b-s4qweb7rf1] {
    background: rgba(255, 255, 255, 0.95);
    color: #1a202c;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
}

.global-scene-overlay.style-gradient[b-s4qweb7rf1] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4);
}

.global-scene-overlay.style-minimal[b-s4qweb7rf1] {
    background: transparent;
    color: white;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px transparent;
    padding: 0.5rem 1rem;
}

.global-scene-overlay.style-minimal .global-overlay-text[b-s4qweb7rf1] {
    font-size: 1.75rem;
}
/* /Components/Grid/NativeDataGrid.razor.rz.scp.css */
/* ============================================
   NATIVE DATA GRID — Scoped Styles
   Reusable table with drag-and-drop column
   reordering and persisted column order.
   ============================================ */

/* Container */
.ndg-container[b-kcq3t7eqg9] {
    background: var(--theme-surface, #ffffff);
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: auto;
}

/* Table */
.ndg[b-kcq3t7eqg9] {
    width: 100%;
    border-collapse: collapse;
}

/* Header */
.ndg thead[b-kcq3t7eqg9] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.ndg th[b-kcq3t7eqg9] {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary, #64748b);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    white-space: nowrap;
    user-select: none;
    transition: background 0.15s ease;
}

.ndg th[draggable="true"][b-kcq3t7eqg9] {
    cursor: grab;
}

.ndg th[draggable="true"]:active[b-kcq3t7eqg9] {
    cursor: grabbing;
}

/* Sort */
.ndg-header-content[b-kcq3t7eqg9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ndg-sortable[b-kcq3t7eqg9] {
    cursor: pointer;
}

.ndg-sortable:hover[b-kcq3t7eqg9] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
}

.ndg-sort-indicator[b-kcq3t7eqg9] {
    font-size: 0.6rem;
    color: var(--theme-text-muted, #94a3b8);
    transition: color 0.15s ease;
}

.ndg-sort-asc .ndg-sort-indicator[b-kcq3t7eqg9],
.ndg-sort-desc .ndg-sort-indicator[b-kcq3t7eqg9] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ndg-sort-asc[b-kcq3t7eqg9],
.ndg-sort-desc[b-kcq3t7eqg9] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Drag states */
.ndg-col-dragging[b-kcq3t7eqg9] {
    opacity: 0.4;
}

.ndg-col-dragover[b-kcq3t7eqg9] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    box-shadow: inset 3px 0 0 var(--theme-primary, #6366f1);
}

/* Cells */
.ndg td[b-kcq3t7eqg9] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    vertical-align: middle;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
}

/* Clickable rows */
.ndg-clickable tbody tr[b-kcq3t7eqg9] {
    cursor: pointer;
    transition: background 0.2s ease;
}

.ndg-clickable tbody tr:hover[b-kcq3t7eqg9] {
    background: var(--theme-surface-secondary, #f8fafc);
}

/* Common row states — used via RowClass parameter */
.ndg tbody tr.archived[b-kcq3t7eqg9] {
    opacity: 0.6;
}

/* Loading */
.ndg-loading[b-kcq3t7eqg9] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

.ndg-loading[b-kcq3t7eqg9]::after {
    content: "";
    width: 32px;
    height: 32px;
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: ndg-spin-b-kcq3t7eqg9 0.8s linear infinite;
}

@keyframes ndg-spin-b-kcq3t7eqg9 {
    to { transform: rotate(360deg); }
}

/* Empty state */
.ndg-empty[b-kcq3t7eqg9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
}

.ndg-empty-icon[b-kcq3t7eqg9] {
    width: 48px;
    height: 48px;
    color: var(--theme-text-muted, #94a3b8);
}

.ndg-empty-icon svg[b-kcq3t7eqg9] {
    width: 100%;
    height: 100%;
}

.ndg-empty-title[b-kcq3t7eqg9] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.ndg-empty-subtitle[b-kcq3t7eqg9] {
    font-size: 0.9rem;
    color: var(--theme-text-muted, #94a3b8);
    margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .ndg-container[b-kcq3t7eqg9] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* NDG-MOBILE-1 (2026-06-10): without a min-width the table COMPRESSES to the
       container instead of overflowing it — the scroll container above never
       activates, and at phone widths every column crushes to 1-2 characters
       (found on /transactions at 430px). 880px ≈ comfortable layout for the
       widest current consumer (8 columns); narrower viewports now get the
       intended horizontal scroll instead of the crush. */
    .ndg[b-kcq3t7eqg9] {
        min-width: 880px;
    }
}

@media (max-width: 600px) {
    .ndg th[b-kcq3t7eqg9] {
        padding: 10px 12px;
        font-size: 0.65rem;
    }

    .ndg td[b-kcq3t7eqg9] {
        padding: 10px 12px;
        font-size: 0.85rem;
    }
}

/* ============================================
   DARK THEME
   ============================================ */
.is-dark .ndg-container[b-kcq3t7eqg9] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .ndg thead[b-kcq3t7eqg9] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .ndg td[b-kcq3t7eqg9] {
    color: rgba(255, 255, 255, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.is-dark .ndg th[b-kcq3t7eqg9] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.is-dark .ndg-clickable tbody tr:hover[b-kcq3t7eqg9] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .ndg-sortable:hover[b-kcq3t7eqg9] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .ndg-col-dragover[b-kcq3t7eqg9] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .ndg-empty-title[b-kcq3t7eqg9] {
    color: rgba(255, 255, 255, 0.9);
}
/* /Components/Home/ActivationNudgeCard.razor.rz.scp.css */
/* EMAIL-ACTIVATION-1: Home activation nudge card.
   HOME-BRIEF-1 (2026-08-07): restyled to mirror the /welcome opt-in card
   (WELCOME-BRIEF-1 chrome — soft green->indigo gradient, 16px radius, right-hand
   action column) so the two surfaces of the same nudge read as one system.
   Success state (.act-nudge-on) leans fully green, like the welcome card. */
.act-nudge[b-38icrigswq] {
    position: relative;
    /* HOME-BRIEF-1 polish (2026-08-07): pin the card to full width — Home's parent flex
       column sizes children to content, so the shorter success state rendered narrower
       than the off state. */
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 0 0 16px 0;
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.08));
}

.act-nudge-on[b-38icrigswq] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
}

.act-nudge-icon[b-38icrigswq] {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.act-nudge-body[b-38icrigswq] {
    flex: 1;
    min-width: 0;
}

.act-nudge-title[b-38icrigswq] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--theme-text, #1e293b);
}

.act-nudge-text[b-38icrigswq] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--theme-text-secondary, #64748b);
}

.act-nudge-actions[b-38icrigswq] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    /* keep the action column clear of the absolute dismiss ✕ */
    margin-right: 1.25rem;
}

.act-nudge-cta[b-38icrigswq] {
    border: none;
    cursor: pointer;
    padding: 0.6rem 1.4rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.act-nudge-cta:hover:not(:disabled)[b-38icrigswq] {
    transform: translateY(-1px);
}

.act-nudge-cta:disabled[b-38icrigswq] {
    opacity: 0.6;
    cursor: default;
}

.act-nudge-link[b-38icrigswq] {
    font-size: 0.85rem;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
}

.act-nudge-link:hover[b-38icrigswq] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.act-nudge-done[b-38icrigswq] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #059669;
}

.act-nudge-done a[b-38icrigswq] {
    color: inherit;
    text-decoration: underline;
}

.act-nudge-error[b-38icrigswq] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: #dc2626;
}

.act-nudge-error a[b-38icrigswq] {
    color: inherit;
    text-decoration: underline;
}

.act-nudge-dismiss[b-38icrigswq] {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    color: #94a3b8;
    padding: 4px;
    border-radius: 6px;
}

.act-nudge-dismiss:hover[b-38icrigswq] {
    color: #475569;
    background: rgba(148, 163, 184, 0.15);
}

/* Dark themes: lift the card off the dark background and brighten text. */
.is-dark .act-nudge[b-38icrigswq] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.14), rgba(99, 102, 241, 0.14)), rgba(30, 41, 59, 0.85);
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 50%, transparent);
}

.is-dark .act-nudge-title[b-38icrigswq] {
    color: #f1f5f9;
}

.is-dark .act-nudge-text[b-38icrigswq] {
    color: #cbd5e1;
}

@media (max-width: 640px) {
    .act-nudge[b-38icrigswq] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1rem 1.25rem;
    }

    .act-nudge-actions[b-38icrigswq] {
        width: 100%;
        margin-right: 0;
    }
}
/* /Components/Home/PersonaNudgeCard.razor.rz.scp.css */
/* PERSONA-LATER-1 (2026-09-07): same chrome as ActivationNudgeCard so the two Home nudges read as one system. */
.persona-nudge[b-yxeavuzp4a] {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    margin: 0 0 16px 0;
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(16, 185, 129, 0.06));
}
.persona-nudge-icon[b-yxeavuzp4a] { font-size: 1.75rem; line-height: 1; flex-shrink: 0; }
.persona-nudge-body[b-yxeavuzp4a] { flex: 1; min-width: 0; }
.persona-nudge-title[b-yxeavuzp4a] { margin: 0 0 0.25rem; font-size: 1.05rem; font-weight: 600; color: var(--theme-text, #1e293b); }
.persona-nudge-text[b-yxeavuzp4a] { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--theme-text-secondary, #64748b); }
.persona-nudge-actions[b-yxeavuzp4a] { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; margin-right: 1.25rem; }
.persona-nudge-cta[b-yxeavuzp4a] {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    transition: transform 0.2s ease;
}
.persona-nudge-cta:hover[b-yxeavuzp4a] { transform: translateY(-1px); color: #ffffff; }
.persona-nudge-dismiss[b-yxeavuzp4a] {
    position: absolute; top: 10px; right: 12px;
    border: none; background: transparent; cursor: pointer;
    font-size: 0.85rem; line-height: 1; color: #94a3b8; padding: 4px; border-radius: 6px;
}
.persona-nudge-dismiss:hover[b-yxeavuzp4a] { color: #475569; background: rgba(148, 163, 184, 0.15); }
.is-dark .persona-nudge[b-yxeavuzp4a] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(16, 185, 129, 0.10)), rgba(30, 41, 59, 0.85);
    border-color: rgba(148, 163, 184, 0.25);
}
.is-dark .persona-nudge-title[b-yxeavuzp4a] { color: #f1f5f9; }
.is-dark .persona-nudge-text[b-yxeavuzp4a] { color: #cbd5e1; }
@media (max-width: 640px) {
    .persona-nudge[b-yxeavuzp4a] { flex-wrap: wrap; }
    .persona-nudge-actions[b-yxeavuzp4a] { width: 100%; margin-right: 0; }
}
/* /Components/Home/TodaysWorkCard.razor.rz.scp.css */
/*
 * TW-V-1 (2026-05-02) — Today's Work card.
 * Theme-token-driven so all 8 themes (Executive, Cloud, Space, Winter,
 * Nature, Ocean, Mystic, Tron) render correctly. .todays-work-card--compact
 * strips the warm/celebratory flair for Pro mode (HAB-V-2 / H-V-3 convention).
 *
 * Section structure (top to bottom): Overdue (renders only when non-empty,
 * urgency-colored) → Due Today → Routine → Upcoming (collapsed footer).
 * Each section gets a small left-border accent so the boundaries read
 * without heavy chrome.
 */

.todays-work-card[b-9vk5ep7d9f] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.06));
}

/* === Header === */
.todays-work-card-header[b-9vk5ep7d9f] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.todays-work-card-titleblock[b-9vk5ep7d9f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.todays-work-card-title[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
}

.todays-work-card-icon[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.todays-work-card-summary[b-9vk5ep7d9f] {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.3;
}

.todays-work-card-close[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--theme-text-tertiary, #94a3b8);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    flex-shrink: 0;
}

.todays-work-card-close:hover[b-9vk5ep7d9f],
.todays-work-card-close:focus-visible[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 12%, transparent);
    color: var(--theme-text-primary, #0f172a);
}

.todays-work-card-close:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

/* === Loading / error / all-clear states === */
.todays-work-loading[b-9vk5ep7d9f],
.todays-work-error[b-9vk5ep7d9f] {
    padding: 12px 0;
    text-align: center;
}

.todays-work-loading-text[b-9vk5ep7d9f] {
    font-size: 0.88rem;
    color: var(--theme-text-secondary, #64748b);
}

.todays-work-error[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.88rem;
}

.todays-work-link-btn[b-9vk5ep7d9f] {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}

.todays-work-link-btn:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
    border-radius: 4px;
}

.todays-work-allclear[b-9vk5ep7d9f] {
    text-align: center;
    padding: 24px 8px 12px 8px;
}

/* FOCUS-3c (2026-09-10): the pick's pin inside the centred all-clear block reads left-aligned,
   like the same pin in the populated card - the label/title/reason stack is not a caption. */
.todays-work-allclear .todays-work-focus[b-9vk5ep7d9f] {
    text-align: left;
    margin: 10px 0 12px 0;
}

.todays-work-allclear-title[b-9vk5ep7d9f] {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}

/* QUIET-NOTHING-1 (2026-10-19): the all-clear line above the pick - a caption, not a heading. Same ink and
   size as .todays-work-section-empty (the populated card's version of the same sentence), minus the italic
   so the dash reads as prose. Centred by the block it sits in. */
.todays-work-allclear-quiet[b-9vk5ep7d9f] {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: var(--theme-text-tertiary, #94a3b8);
}

.todays-work-allclear-subtitle[b-9vk5ep7d9f] {
    margin: 0 0 16px 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
}

.todays-work-allclear-actions[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.todays-work-cta[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--theme-primary, #6366f1);
    color: var(--theme-primary-contrast, #ffffff);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.todays-work-cta:hover[b-9vk5ep7d9f],
.todays-work-cta:focus-visible[b-9vk5ep7d9f] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 14px var(--theme-shadow-color, rgba(0, 0, 0, 0.15));
}

.todays-work-cta:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.todays-work-cta--secondary[b-9vk5ep7d9f] {
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border: 1px solid var(--theme-primary, #6366f1);
}

.todays-work-cta--secondary:hover[b-9vk5ep7d9f],
.todays-work-cta--secondary:focus-visible[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 10%, transparent);
}

/* === Sections === */
.todays-work-section[b-9vk5ep7d9f] {
    margin-top: 16px;
}

.todays-work-section:first-of-type[b-9vk5ep7d9f] {
    margin-top: 0;
}

/* TW-SECTION-GAP (2026-05-21): The three top-level sections (Overdue /
   Due Today / Routine) previously relied on pure whitespace (16px margin
   + the View-all footer's own padding) to separate themselves. When each
   section had a single row the gap read as ~48px of empty space between
   row-bottom and the next section header. Tightened to 6px between
   sibling sections — the uppercase section header itself carries enough
   visual weight to mark the boundary, so an explicit divider (originally
   added here) read as redundant chrome and was pulled per user feedback.
   First section keeps the no-margin override. The dashed border above
   .todays-work-upcoming stays as-is because it gates an expand/collapse
   affordance, not a pure section break.
   TW-SECTION-GAP v2 (2026-05-21, same day): user flagged the gap still
   read loose at 14px — the footer's 8px top-margin + the View-all
   button height was stacking on top. Dropped section margin to 6px;
   footer margin trimmed in parallel (see .todays-work-section-footer
   below). Combined cut: ~46px → ~32px of visible whitespace between
   the last row and the next section title. */
.todays-work-section + .todays-work-section[b-9vk5ep7d9f] {
    margin-top: 6px;
}

.todays-work-section-title[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-secondary, #64748b);
}

.todays-work-section-count[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 14%, transparent);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

/* TW-V-3 (2026-05-02): Overdue urgency color uses --theme-error, falling
   back to a strong red. The chip background uses color-mix so it tints
   the same hue across themes without manual per-theme overrides. */
.todays-work-section-title--overdue[b-9vk5ep7d9f] {
    color: var(--theme-error, #ef4444);
}

.todays-work-section--overdue .todays-work-section-count[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-error, #ef4444) 18%, transparent);
    color: var(--theme-error, #ef4444);
}

.todays-work-section-empty[b-9vk5ep7d9f] {
    margin: 0;
    padding: 8px 4px 4px 4px;
    font-size: 0.85rem;
    color: var(--theme-text-tertiary, #94a3b8);
    font-style: italic;
}

.todays-work-section-empty-cta[b-9vk5ep7d9f] {
    padding: 8px 4px 4px 4px;
}

.todays-work-section-empty-cta p[b-9vk5ep7d9f] {
    margin: 0 0 6px 0;
    font-size: 0.85rem;
    color: var(--theme-text-tertiary, #94a3b8);
}

/* === Row list === */
.todays-work-list[b-9vk5ep7d9f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.todays-work-row[b-9vk5ep7d9f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--theme-surface-soft, rgba(148, 163, 184, 0.06));
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

/* ROW-HOVER-PARITY-1 (2026-09-14): routine rows now hover like the overdue
   focus block (.todays-work-focus--clickable) instead of carrying a fainter,
   sub-region treatment.
   The problem: .todays-work-row-info is the actual click target (role=button,
   @onclick -> ViewWorkItem, flex:1) and it painted its OWN hover tint, which
   stops where .todays-work-row-actions begins. The result read as a
   half-highlighted row - the highlight visibly stopped short of the snooze and
   +Log buttons, and it looked nothing like the overdue card, which lifts and
   changes its border across the whole block.
   The fix keeps the handler exactly where it is (semantics and keyboard access
   untouched) and simply moves the PAINT up to the <li>, reusing the same tokens
   .todays-work-focus--clickable already uses. Hovering the action buttons lifts
   the row too, which is correct - they are part of the same object. */
.todays-work-row:hover[b-9vk5ep7d9f] {
    background: var(--theme-surface-hover, #f1f5f9);
    /* Three sides ONLY, never the shorthand. Six status variants
       (--overdue / --missed / --lapsed / --done-today / --pending /
       --never-done) each set `border-left: 3px solid <status colour>`, and
       .todays-work-row:hover (0,2,0) outspecifies .todays-work-row--lapsed
       (0,1,0) — so `border-color` here would grey out the status stripe on
       hover, which is exactly the signal the row exists to carry. Caught in
       QA before first deploy: the hovered row visibly lost its red edge while
       its neighbours kept theirs. */
    border-top-color: var(--theme-border-strong, #cbd5e1);
    border-right-color: var(--theme-border-strong, #cbd5e1);
    border-bottom-color: var(--theme-border-strong, #cbd5e1);
    transform: translateY(-1px);
}

.todays-work-row:active[b-9vk5ep7d9f] {
    transform: translateY(0);
}

/* TW-V-3 (2026-05-02): Overdue rows get a subtle left-border urgency
   accent + a tinted background — visible enough to draw the eye, soft
   enough to not look like an alert toast. Uses color-mix so the accent
   reads correctly on both light and dark surfaces. */
.todays-work-row--overdue[b-9vk5ep7d9f] {
    border-left: 3px solid var(--theme-error, #ef4444);
    background: color-mix(in srgb, var(--theme-error, #ef4444) 6%, var(--theme-surface-soft, rgba(148, 163, 184, 0.06)));
}

/* FOCUS-3d (2026-10-09): the START WITH pick on the My Tasks tab is the first row, not a
   separate block. Same eyebrow as the Today's Work pin (.todays-work-focus-label), the
   reason under the chips, and a faint primary ring on the row. Status stripes win: an
   overdue pick keeps its red edge (--overdue sets border-left, this never touches it). */
.todays-work-row--start-with[b-9vk5ep7d9f] {
    align-items: flex-start;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--theme-primary, #6366f1) 20%, transparent);
}
.todays-work-row--start-with:not(.todays-work-row--overdue)[b-9vk5ep7d9f] {
    border-left: 3px solid var(--theme-primary, #6366f1);
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 5%, var(--theme-surface-soft, rgba(148, 163, 184, 0.06)));
}
.todays-work-row-start-with-label[b-9vk5ep7d9f] {
    margin-bottom: 2px;
}
.todays-work-row--start-with:not(.todays-work-row--overdue) .todays-work-row-start-with-label[b-9vk5ep7d9f] {
    color: var(--theme-primary, #6366f1);
}
.todays-work-row-start-with-reason[b-9vk5ep7d9f] {
    margin: 4px 0 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--theme-text-secondary, #475569);
}

/* TW-POLISH-3 (2026-05-21): Coming Up rows visually muted relative to
   Due Today. Pre-fix they rendered with identical chrome — same font
   weight on the title, same background, just 0.85 opacity — so once
   expanded they read as equally-urgent siblings of the Due Today row.
   Mute pass: drop opacity further, demote title color to text-secondary
   and weight to 500, fade the background tint. The visual hierarchy
   should make "Coming up" read as "later" on a first scan, not as
   "another thing demanding attention right now". The chevron added in
   TW-POLISH-5 carries the click affordance the muted background no
   longer telegraphs. */
.todays-work-row--upcoming[b-9vk5ep7d9f] {
    opacity: 0.7;
    background: var(--theme-surface-soft, rgba(148, 163, 184, 0.04));
}

.todays-work-row--upcoming .todays-work-row-title[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

.todays-work-row--upcoming:hover[b-9vk5ep7d9f] {
    opacity: 0.95;
}

/* TW-POLISH-5 (2026-05-21): Decorative chevron on Upcoming rows. Not a
   button — the click handler stays on .todays-work-row-info above. Sole
   purpose is to telegraph "this row is clickable, you can drill into the
   detail". Mutes to text-tertiary so it doesn't pull the eye away from
   the Done / +Log buttons on adjacent rows. Slides right on row hover
   to mirror the chevron behavior on the existing "View all" affordance
   in the section footer — same visual idiom = same predicted behavior. */
.todays-work-row-chevron[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-tertiary, #94a3b8);
    transition: transform 0.18s ease, color 0.18s ease;
    padding: 4px;
}

.todays-work-row--upcoming:hover .todays-work-row-chevron[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #64748b);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .todays-work-row-chevron[b-9vk5ep7d9f],
    .todays-work-row--upcoming:hover .todays-work-row-chevron[b-9vk5ep7d9f] {
        transition: none;
        transform: none;
    }

    /* ROW-HOVER-PARITY-1: the hover lift is motion - drop it here, keep the
       background and border change so the row still reads as interactive. */
    .todays-work-row[b-9vk5ep7d9f],
    .todays-work-row:hover[b-9vk5ep7d9f],
    .todays-work-row:active[b-9vk5ep7d9f] {
        transition: none;
        transform: none;
    }
}

/* TW-V-4 (2026-05-02): "Missed" routine row — when NextOccurrenceDate is
   in the past, signal that visually so the user knows this is catch-up
   territory, not their normal Friday log. Same color family as Overdue
   but lighter accent because the streak chip and +Log button still drive
   the action. */
.todays-work-row--missed[b-9vk5ep7d9f] {
    border-left: 3px solid var(--theme-warning, #f59e0b);
}

/* TW-V-Lapsed (2026-05-03): Stronger treatment than --missed for routines
   that have skipped multiple cadence cycles. The error-tinted border and
   faint background tint lift the row off the page so the user notices what
   they've been neglecting. Tuned to read urgent without screaming — this is
   a nudge to restart, not an alarm. Falls back gracefully on browsers that
   lack color-mix; the border alone still carries the signal. */
.todays-work-row--lapsed[b-9vk5ep7d9f] {
    border-left: 3px solid var(--theme-error, #ef4444);
    background: color-mix(in srgb, var(--theme-error, #ef4444) 4%, transparent);
}

/* ROUT-DONE-1 (2026-05-20): "Done today" routine row. Pre-fix, a routine
   completed today carried only the disabled --done button state (faint
   green outline on the inline button); the row itself was indistinguishable
   from the not-yet-done routines next to it. Now: success-palette left
   border + faint background tint mirror the .--missed / .--lapsed pattern
   but in green, so the row reads as visibly "✓ done" at a glance. The
   streak chip is recolored to match (success green instead of warning
   amber) so the flame doesn't read as celebratory-but-still-due, and the
   title dims slightly to step back. Snooze hidden because there's nothing
   to snooze — the user already did it. Knock-on benefit: the contrast
   between this row and its peers makes the not-yet-done rows naturally
   read as "needs your attention today" without needing their own treatment. */
.todays-work-row--done-today[b-9vk5ep7d9f] {
    border-left: 3px solid var(--theme-success, #10b981);
    background: color-mix(in srgb, var(--theme-success, #10b981) 5%, transparent);
}

.todays-work-row--done-today .todays-work-row-title[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #64748b);
}

.todays-work-row--done-today .todays-work-streak[b-9vk5ep7d9f] {
    color: var(--theme-success, #10b981);
}

.todays-work-row--done-today .todays-work-snooze-btn[b-9vk5ep7d9f] {
    display: none;
}

/* ROUT-DONE-2 (2026-05-20): "Pending today" — active routine with a live
   streak that hasn't been logged yet today. Sits between done (green) and
   missed (amber) — softer amber-yellow border tells the user "still owed
   today, log to keep the chain alive" without the alarm of --missed (which
   now fires the moment a day is fully skipped). No background tint because
   today is still in play; we don't want the row to feel overdue yet. */
.todays-work-row--pending[b-9vk5ep7d9f] {
    border-left: 3px solid color-mix(in srgb, var(--theme-warning, #f59e0b) 65%, transparent);
}

/* ROUT-DONE-2 (2026-05-20): "Never done" — no completion ever logged.
   Neutral slate left border so the row reads as "ready to start" rather
   than borrowing the urgency palette of the streak-bearing rows. The
   "No streak yet" chip already carries the cold-color text treatment;
   the border just makes the row scannably distinct from active-streak peers. */
.todays-work-row--never-done[b-9vk5ep7d9f] {
    border-left: 3px solid color-mix(in srgb, var(--theme-text-tertiary, #94a3b8) 60%, transparent);
}

/* ROUT-DONE-3 (2026-05-20): Explicit state-text chip layered on top of the
   color-coded left border. Same pill shape as .todays-work-streak--lapsed
   so the meta row reads as a coherent chip vocabulary. Each variant's
   palette matches its row border so a glance instantly pairs the chip with
   the border (chip + border + row = same color family). Color-only state
   indication wasn't enough during launch QA — text + color is the right
   minimum for accessibility (color-blindness, screen readers) and clarity. */
.todays-work-state-chip[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1.4;
    white-space: nowrap;
}

.todays-work-state-chip--done[b-9vk5ep7d9f] {
    color: var(--theme-success, #10b981);
    background: color-mix(in srgb, var(--theme-success, #10b981) 12%, transparent);
}

.todays-work-state-chip--missed[b-9vk5ep7d9f] {
    color: var(--theme-warning, #b45309);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 14%, transparent);
}

.todays-work-state-chip--pending[b-9vk5ep7d9f] {
    color: var(--theme-warning, #92400e);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 10%, transparent);
}

.todays-work-state-chip--never[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #64748b);
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 10%, transparent);
}

/* Dark-theme readability — the soft tints wash out on dark surfaces, so
   bump the chip text + background a notch. Same brightness-adjust pattern
   the rest of this file uses for dark themes via :is(...). */
.is-dark .todays-work-state-chip[b-9vk5ep7d9f] {
    filter: brightness(1.2);
}

.todays-work-row-info[b-9vk5ep7d9f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    cursor: pointer;
    border-radius: 6px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: background 0.15s ease;
}

/* ROW-HOVER-PARITY-1: the row (above) now paints the hover, so the inner click
   target must not paint a second, differently-shaped one on top of it - two
   overlapping highlights was the "half-highlighted" artifact. Deliberately NOT
   touching :focus-visible below: keyboard users still need an indicator on the
   element that actually takes focus. */
.todays-work-row-info:hover[b-9vk5ep7d9f] {
    background: transparent;
}

.todays-work-row-info:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 6%, transparent);
}

.todays-work-row-title[b-9vk5ep7d9f] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todays-work-row-meta[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #64748b);
}

/* === Date chips === */
.todays-work-date-chip[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 10%, transparent);
    color: var(--theme-text-secondary, #64748b);
}

.todays-work-date-chip--overdue[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-error, #ef4444) 16%, transparent);
    color: var(--theme-error, #ef4444);
}

.todays-work-date-chip--duetoday[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 14%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.todays-work-date-chip--upcoming[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-text-tertiary, #94a3b8) 12%, transparent);
    color: var(--theme-text-tertiary, #94a3b8);
}

/* TW-POLISH-4 (2026-05-21): Goal chip promoted from italic prose to a
   proper pill so it shares visual vocabulary with the account chip
   (Apex Industries / Northbeam) on the same row. Pre-fix, "part of:
   Grow Stone Consulting" rendered as muted italic text while a sibling
   row's "Apex Industries" rendered as a tinted pill — same data-shape,
   two different visual languages on the same card. Now: tinted pill
   in the success-green family (distinct from account-purple so a
   glance still distinguishes "account context" from "goal context"
   without reading the label). "Part of: " prefix dropped from the
   label — the chip color + the on-hover tooltip ("Part of: Grow Stone
   Consulting") carry the relationship; in-chip prose was just
   prefix-eating screen width. Primary-goal star variant below stays
   as-is (already a pill in the warm/amber family). */
.todays-work-goal-chip[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-success, #10b981);
    background: color-mix(in srgb, var(--theme-success, #10b981) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-success, #10b981) 24%, transparent);
    max-width: 200px;
}

/* PQ2 (2026-05-03): Star-tagged chip variant for items that roll up to
   the user's Primary Goal / Main Quest. Warm amber treatment matches the
   detail badge, the Goals.razor list chip, and the home greeting star
   line — together those four sites form one consistent "this contributes
   to the headline goal" visual signal. Padded pill (vs the bare italic
   default) so the star and label feel like a single unit. */
.todays-work-goal-chip.todays-work-goal-chip--primary[b-9vk5ep7d9f] {
    color: var(--theme-warning, #f59e0b);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-warning, #f59e0b) 28%, transparent);
    font-style: normal;
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    max-width: 220px;
}

/* PQ3 (2026-05-03): Wrap the chip's text in its own truncating span so
   ellipsis works inside the inline-flex container (the --primary variant)
   and stays consistent with the base chip's truncation. The native title
   tooltip on the parent reveals the full goal name on hover whether the
   text is truncated or not — so users always have a way to see the full
   parent name even when "Train for the half-marathon by Sept" gets cut
   to "Train for the…". */
.todays-work-goal-chip-label[b-9vk5ep7d9f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* TW-V-7 (2026-05-07): Account chip on Today's Work rows. Visually distinct
   from the goal chip — solid pill with subtle purple tint, matches the
   tag-purple treatment the global Tasks list (WI-V-1) uses for account
   references. Sits next to the date / priority / goal chips in the row meta,
   truncates with ellipsis on long names so one long account name doesn't push
   other chips off the row. */
.todays-work-account-chip[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    background: color-mix(in srgb, var(--theme-primary, #7c3aed) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #7c3aed) 24%, transparent);
    max-width: 200px;
}

.todays-work-account-chip-label[b-9vk5ep7d9f] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

@media (max-width: 480px) {
    .todays-work-account-chip[b-9vk5ep7d9f] {
        max-width: 130px;
    }
}

/* TW-V-Polish-1 (2026-05-02): The inline .todays-work-missed-chip rule
   was removed in the polish pass — the warning-tinted left border on
   .todays-work-row--missed carries the signal alone now, which reads
   calmer alongside the streak chip on the same row. */

/* === Streak (routine rows, ported from HAB-V-Progress) === */
.todays-work-streak[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--theme-warning, #f59e0b);
}

.todays-work-streak-icon[b-9vk5ep7d9f] {
    flex-shrink: 0;
}

.todays-work-streak--cold[b-9vk5ep7d9f] {
    color: var(--theme-text-tertiary, #94a3b8);
    font-weight: 500;
}

/* ROUT-DONE-4 (2026-05-20): streak chip muted when the row is missed/pending,
   so the warm "1 day with flame" stops contradicting an "Missed 16w+" or
   "Due today" state chip on the same row. Cold palette + strike-through tells
   the user the count is at risk / no longer earned. Lapsed already handles this
   by replacing the streak chip entirely; this is the intermediate case. */
.todays-work-streak--at-risk[b-9vk5ep7d9f] {
    color: var(--theme-text-tertiary, #94a3b8);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--theme-text-tertiary, #94a3b8) 55%, transparent);
    text-decoration-thickness: 1.5px;
}

.todays-work-streak--at-risk .todays-work-streak-icon[b-9vk5ep7d9f] {
    opacity: 0.55;
}

/* TW-V-Lapsed (2026-05-03): The lapsed chip replaces the streak chip when
   the user has missed multiple cadence cycles. Error-color text plus a
   small pill background communicates "this needs your attention" while
   staying inline with the row's other meta chips. Distinct from --cold
   ("no streak yet, but recently created") which is informational, not
   urgent. */
.todays-work-streak--lapsed[b-9vk5ep7d9f] {
    color: var(--theme-error, #ef4444);
    font-weight: 600;
    background: color-mix(in srgb, var(--theme-error, #ef4444) 10%, transparent);
    padding: 1px 8px;
    border-radius: 9999px;
}

.todays-work-period-count[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

.todays-work-cadence[b-9vk5ep7d9f] {
    color: var(--theme-text-tertiary, #94a3b8);
}

/* === Action cluster === */
.todays-work-row-actions[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.todays-work-snooze-btn[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.12));
    border-radius: 999px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.todays-work-snooze-btn:hover[b-9vk5ep7d9f],
.todays-work-snooze-btn:focus-visible[b-9vk5ep7d9f] {
    border-color: var(--theme-text-secondary, #64748b);
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 10%, transparent);
    color: var(--theme-text-primary, #0f172a);
    transform: translateY(-1px);
}

.todays-work-snooze-btn:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

/* === +Log button (routine) === */
.todays-work-log-btn[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--theme-primary, #6366f1);
    border-radius: 999px;
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.todays-work-log-btn:hover:not(:disabled)[b-9vk5ep7d9f],
.todays-work-log-btn:focus-visible:not(:disabled)[b-9vk5ep7d9f] {
    background: var(--theme-primary, #6366f1);
    color: var(--theme-primary-contrast, #ffffff);
    transform: translateY(-1px);
}

.todays-work-log-btn:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.todays-work-log-btn:disabled[b-9vk5ep7d9f] {
    cursor: default;
    opacity: 0.7;
}

.todays-work-log-btn--done[b-9vk5ep7d9f] {
    border-color: var(--theme-success, #10b981);
    color: var(--theme-success, #10b981);
    background: color-mix(in srgb, var(--theme-success, #10b981) 8%, transparent);
}

/* === Done button (one-shot rows) — visually distinct from +Log so users
   don't confuse "complete this task" with "log a routine completion." === */
.todays-work-complete-btn[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--theme-success, #10b981);
    border-radius: 999px;
    background: transparent;
    color: var(--theme-success, #10b981);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}

.todays-work-complete-btn:hover:not(:disabled)[b-9vk5ep7d9f],
.todays-work-complete-btn:focus-visible:not(:disabled)[b-9vk5ep7d9f] {
    background: var(--theme-success, #10b981);
    color: var(--theme-primary-contrast, #ffffff);
    transform: translateY(-1px);
}

.todays-work-complete-btn:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.todays-work-complete-btn:disabled[b-9vk5ep7d9f] {
    cursor: default;
    opacity: 0.7;
}

/* === Upcoming collapsed footer === */
.todays-work-upcoming[b-9vk5ep7d9f] {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--theme-border, rgba(0, 0, 0, 0.08));
}

.todays-work-upcoming-toggle[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}

.todays-work-upcoming-toggle:hover[b-9vk5ep7d9f],
.todays-work-upcoming-toggle:focus-visible[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 8%, transparent);
}

.todays-work-upcoming-toggle:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.todays-work-upcoming-count[b-9vk5ep7d9f] {
    margin-left: auto;
    color: var(--theme-text-tertiary, #94a3b8);
    font-weight: 500;
}

.todays-work-upcoming-chevron[b-9vk5ep7d9f] {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.todays-work-upcoming-chevron.is-expanded[b-9vk5ep7d9f] {
    transform: rotate(180deg);
}

.todays-work-upcoming-list[b-9vk5ep7d9f] {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* === Compact (Pro mode) === */
.todays-work-card--compact[b-9vk5ep7d9f] {
    padding: 14px 18px;
    border-radius: 12px;
}

.todays-work-card--compact .todays-work-card-title[b-9vk5ep7d9f] {
    font-size: 0.95rem;
}

.todays-work-card--compact .todays-work-row[b-9vk5ep7d9f] {
    padding: 8px 12px;
    border-radius: 10px;
}

.todays-work-card--compact .todays-work-row-title[b-9vk5ep7d9f] {
    font-size: 0.9rem;
}

.todays-work-card--compact .todays-work-row-meta[b-9vk5ep7d9f] {
    font-size: 0.75rem;
}

.todays-work-card--compact .todays-work-streak[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #64748b);
}

/* === Dark theme overrides === */
.is-dark .todays-work-card[b-9vk5ep7d9f] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    box-shadow: none;
}

.is-dark .todays-work-card-title[b-9vk5ep7d9f],
.is-dark .todays-work-allclear-title[b-9vk5ep7d9f] {
    color: #f1f5f9;
}

.is-dark .todays-work-card-summary[b-9vk5ep7d9f] {
    color: rgba(241, 245, 249, 0.7);
}

.is-dark .todays-work-card-close[b-9vk5ep7d9f] {
    color: rgba(241, 245, 249, 0.55);
}

.is-dark .todays-work-card-close:hover[b-9vk5ep7d9f],
.is-dark .todays-work-card-close:focus-visible[b-9vk5ep7d9f] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .todays-work-row[b-9vk5ep7d9f] {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .todays-work-row:hover[b-9vk5ep7d9f] {
    background: rgba(15, 23, 42, 0.6);
}

.is-dark .todays-work-row-title[b-9vk5ep7d9f] {
    color: #f1f5f9;
}

.is-dark .todays-work-snooze-btn[b-9vk5ep7d9f] {
    color: rgba(241, 245, 249, 0.65);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .todays-work-snooze-btn:hover[b-9vk5ep7d9f],
.is-dark .todays-work-snooze-btn:focus-visible[b-9vk5ep7d9f] {
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.3);
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    .todays-work-cta[b-9vk5ep7d9f],
    .todays-work-log-btn[b-9vk5ep7d9f],
    .todays-work-complete-btn[b-9vk5ep7d9f],
    .todays-work-snooze-btn[b-9vk5ep7d9f],
    .todays-work-row[b-9vk5ep7d9f],
    .todays-work-row-info[b-9vk5ep7d9f],
    .todays-work-upcoming-toggle[b-9vk5ep7d9f],
    .todays-work-upcoming-chevron[b-9vk5ep7d9f] {
        transition: none;
    }

    .todays-work-cta:hover[b-9vk5ep7d9f],
    .todays-work-cta:focus-visible[b-9vk5ep7d9f],
    .todays-work-log-btn:hover:not(:disabled)[b-9vk5ep7d9f],
    .todays-work-log-btn:focus-visible:not(:disabled)[b-9vk5ep7d9f],
    .todays-work-complete-btn:hover:not(:disabled)[b-9vk5ep7d9f],
    .todays-work-complete-btn:focus-visible:not(:disabled)[b-9vk5ep7d9f],
    .todays-work-snooze-btn:hover[b-9vk5ep7d9f],
    .todays-work-snooze-btn:focus-visible[b-9vk5ep7d9f] {
        transform: none;
    }
}

/* === Mobile === */
@media (max-width: 480px) {
    .todays-work-row[b-9vk5ep7d9f] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .todays-work-row-actions[b-9vk5ep7d9f] {
        align-self: flex-end;
    }

    .todays-work-row-meta[b-9vk5ep7d9f] {
        gap: 6px;
    }

    .todays-work-goal-chip[b-9vk5ep7d9f] {
        max-width: 140px;
    }
}

/* ───────────────────────────────────────────────────────────────────────
   HHC-V-1 (2026-05-02) — Hub-card tab strip + per-tab content styles.
   The card now hosts four views (Today's Work, My Tasks, My Goals,
   Insights). The tab strip replaces the old single-card header. Each tab
   is a pill-shaped button with an icon + label; the active tab has a
   filled background, inactive tabs are transparent with a subtle hover.
   ─────────────────────────────────────────────────────────────────────── */

.hub-tab-strip[b-9vk5ep7d9f] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hub-tab[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
    flex-shrink: 0;
}

.hub-tab:hover[b-9vk5ep7d9f],
.hub-tab:focus-visible[b-9vk5ep7d9f] {
    color: var(--theme-text-primary, #0f172a);
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 8%, transparent);
}

.hub-tab:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.hub-tab--active[b-9vk5ep7d9f] {
    color: var(--theme-primary-contrast, #ffffff);
    background: var(--theme-primary, #6366f1);
    border-color: var(--theme-primary, #6366f1);
}

.hub-tab--active:hover[b-9vk5ep7d9f],
.hub-tab--active:focus-visible[b-9vk5ep7d9f] {
    color: var(--theme-primary-contrast, #ffffff);
    background: var(--theme-primary, #6366f1);
    filter: brightness(1.06);
}

.hub-tab-icon[b-9vk5ep7d9f] {
    flex-shrink: 0;
}

.hub-tab-close[b-9vk5ep7d9f] {
    margin-left: auto;
    flex-shrink: 0;
}

/* The dismiss button retained its original .todays-work-card-close styles
   — the hub-tab-close class is just a positioning helper. */

/* ─── Tab body ──────────────────────────────────────────────────────── */

.hub-tab-body[b-9vk5ep7d9f] {
    /* Preserve the existing per-section rhythm; tabs don't add extra
       padding. The card's outer padding handles the breathing room. */
}

/* ─── Shared empty state (My Tasks / My Goals tabs) ─────────────────── */

.hub-empty[b-9vk5ep7d9f] {
    text-align: center;
    padding: 24px 12px;
}

.hub-empty-title[b-9vk5ep7d9f] {
    margin: 0 0 6px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}

.hub-empty-subtitle[b-9vk5ep7d9f] {
    margin: 0 0 14px 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

.is-dark .hub-empty-title[b-9vk5ep7d9f] {
    color: #f1f5f9;
}

.is-dark .hub-empty-subtitle[b-9vk5ep7d9f] {
    color: rgba(241, 245, 249, 0.65);
}

/* ─── Priority chip on My Tasks rows ────────────────────────────────── */

.hub-priority-chip[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.68rem;
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 14%, transparent);
    color: var(--theme-warning, #f59e0b);
}

.hub-priority-chip--high[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-error, #ef4444) 14%, transparent);
    color: var(--theme-error, #ef4444);
}

/* ─── Goal rows (My Goals tab) ───────────────────────────────────────── */

.hub-goal-row[b-9vk5ep7d9f] {
    /* Slightly taller than task rows so the progress bar fits cleanly
       below the title/meta. The row info is a single column with the
       progress bar as the third stacked child. */
}

.hub-goal-row .todays-work-row-info[b-9vk5ep7d9f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hub-goal-progress-pct[b-9vk5ep7d9f] {
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.hub-goal-progress-bar[b-9vk5ep7d9f] {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-text-tertiary, #94a3b8) 18%, transparent);
    overflow: hidden;
    margin-top: 6px;
}

.hub-goal-progress-fill[b-9vk5ep7d9f] {
    height: 100%;
    background: var(--theme-primary, #6366f1);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* HEALTH-Color (2026-05-03): Health-tinted variants for goal-style
   progress treatment. Two surfaces share the same modifier-class set:
     • My Goals row (.hub-goal-progress-fill / .hub-goal-progress-pct)
     • Insights wide card (.hub-insight-progress-fill / .hub-insight-progress-pct)
   The selector group below paints both backgrounds (bars) and colors
   (percent labels) in one rule per Health state. Same color tokens as
   the GoalDialog Health pill picker so the pill the user sets and the
   bar the user reads agree on what each Health state looks like. */
.hub-goal-progress-fill--ontrack.hub-goal-progress-fill[b-9vk5ep7d9f],
.hub-goal-progress-fill--ontrack.hub-insight-progress-fill[b-9vk5ep7d9f] {
    background: var(--theme-success, #10b981);
}
.hub-goal-progress-fill--ontrack.hub-goal-progress-pct[b-9vk5ep7d9f],
.hub-goal-progress-fill--ontrack.hub-insight-progress-pct[b-9vk5ep7d9f] {
    color: var(--theme-success, #10b981);
}

.hub-goal-progress-fill--needsattention.hub-goal-progress-fill[b-9vk5ep7d9f],
.hub-goal-progress-fill--needsattention.hub-insight-progress-fill[b-9vk5ep7d9f] {
    background: var(--theme-warning, #f59e0b);
}
.hub-goal-progress-fill--needsattention.hub-goal-progress-pct[b-9vk5ep7d9f],
.hub-goal-progress-fill--needsattention.hub-insight-progress-pct[b-9vk5ep7d9f] {
    color: var(--theme-warning, #f59e0b);
}

.hub-goal-progress-fill--stalled.hub-goal-progress-fill[b-9vk5ep7d9f],
.hub-goal-progress-fill--stalled.hub-insight-progress-fill[b-9vk5ep7d9f] {
    background: var(--theme-text-tertiary, #94a3b8);
}
.hub-goal-progress-fill--stalled.hub-goal-progress-pct[b-9vk5ep7d9f],
.hub-goal-progress-fill--stalled.hub-insight-progress-pct[b-9vk5ep7d9f] {
    color: var(--theme-text-tertiary, #94a3b8);
}

.hub-goal-progress-fill--offtrack.hub-goal-progress-fill[b-9vk5ep7d9f],
.hub-goal-progress-fill--offtrack.hub-insight-progress-fill[b-9vk5ep7d9f] {
    background: var(--theme-error, #ef4444);
}
.hub-goal-progress-fill--offtrack.hub-goal-progress-pct[b-9vk5ep7d9f],
.hub-goal-progress-fill--offtrack.hub-insight-progress-pct[b-9vk5ep7d9f] {
    color: var(--theme-error, #ef4444);
}

.is-dark .hub-goal-progress-bar[b-9vk5ep7d9f] {
    background: rgba(255, 255, 255, 0.1);
}

/* PG-MyGoals (2026-05-03): Primary Goal / Main Quest treatment for the
   My Goals tab — mirrors the Goals.razor list page (amber border-left +
   warm background tint + inline star chip). Same color tokens so the
   Personal-mode "Main Quest" framing reads consistently across surfaces. */
.hub-goal-row--primary[b-9vk5ep7d9f] {
    border-left: 3px solid var(--theme-warning, #f59e0b);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 5%, transparent);
    border-radius: 6px;
    padding-left: 6px;
}

.hub-goal-primary-chip[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-warning, #f59e0b);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 12%, transparent);
    vertical-align: middle;
}

/* ─── Insights tab ───────────────────────────────────────────────────── */

/* INSIGHTS-2 (2026-10-17): ranked one-line insights (HubInsightsBuilder). Each row is a
   link: tone dot, bold figure + headline, one muted detail line, chevron. Replaces the
   HHC-V-1 stat-card grid. Tone colours the dot only; the warning tone also tints the row. */
.hub-insights-list[b-9vk5ep7d9f] {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hub-insight-row[b-9vk5ep7d9f] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--theme-surface-soft, rgba(148, 163, 184, 0.06));
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    color: inherit;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.hub-insight-row:hover[b-9vk5ep7d9f],
.hub-insight-row:focus-visible[b-9vk5ep7d9f] {
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 40%, var(--theme-border, rgba(0, 0, 0, 0.06)));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 4%, var(--theme-surface-soft, rgba(148, 163, 184, 0.06)));
}

.hub-insight-dot[b-9vk5ep7d9f] {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-top: 7px;
    background: var(--theme-text-tertiary, #94a3b8);
}

.hub-insight-row--good .hub-insight-dot[b-9vk5ep7d9f] { background: var(--theme-success, #16a34a); }
.hub-insight-row--attention .hub-insight-dot[b-9vk5ep7d9f] { background: var(--theme-warning, #d97706); }
.hub-insight-row--warning .hub-insight-dot[b-9vk5ep7d9f] { background: var(--theme-error, #ef4444); }

.hub-insight-row--warning[b-9vk5ep7d9f] {
    border-color: color-mix(in srgb, var(--theme-error, #ef4444) 30%, transparent);
    background: color-mix(in srgb, var(--theme-error, #ef4444) 5%, var(--theme-surface-soft, rgba(148, 163, 184, 0.06)));
}

.hub-insight-text[b-9vk5ep7d9f] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-insight-headline[b-9vk5ep7d9f] {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--theme-text-primary, #0f172a);
}

.hub-insight-headline strong[b-9vk5ep7d9f] {
    font-weight: 700;
}

.hub-insight-detail[b-9vk5ep7d9f] {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--theme-text-secondary, #64748b);
}

.hub-insight-chev[b-9vk5ep7d9f] {
    flex: none;
    align-self: center;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--theme-text-tertiary, #94a3b8);
}

.hub-insights-empty[b-9vk5ep7d9f] {
    padding: 16px 14px;
    margin-bottom: 12px;
    border-radius: 12px;
    border: 1px dashed var(--theme-border, rgba(0, 0, 0, 0.1));
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.88rem;
}

.hub-insights-empty p[b-9vk5ep7d9f] { margin: 0; }

.hub-insights-refresh[b-9vk5ep7d9f] {
    display: inline-flex;
    margin-top: 4px;
    font-size: 0.78rem;
}

.is-dark .hub-insight-row[b-9vk5ep7d9f] {
    background: rgba(15, 23, 42, 0.4);
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .hub-insight-row--warning[b-9vk5ep7d9f] {
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.08);
}

.is-dark .hub-insight-headline[b-9vk5ep7d9f] {
    color: #f1f5f9;
}

.is-dark .hub-insight-detail[b-9vk5ep7d9f] {
    color: rgba(241, 245, 249, 0.65);
}

/* ─── Tab strip dark-theme override ─────────────────────────────────── */

.is-dark .hub-tab[b-9vk5ep7d9f] {
    color: rgba(241, 245, 249, 0.7);
}

.is-dark .hub-tab:hover[b-9vk5ep7d9f],
.is-dark .hub-tab:focus-visible[b-9vk5ep7d9f] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
}

/* The active tab keeps its theme-primary fill across all themes. */

/* ─── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hub-tab[b-9vk5ep7d9f],
    .hub-goal-progress-fill[b-9vk5ep7d9f],
    .hub-insight-row[b-9vk5ep7d9f] {
        transition: none;
    }
}

/* ─── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    /* MOB1 (2026-05-03): With 5 tabs + a close button on a 390px viewport,
       the strip needs every spare pixel. Tightened gap, padding, and active
       tab's label to keep everything on one row. nowrap forces all tabs
       inline, and overflow-x: auto provides a scroll fallback if the
       calculated row still exceeds available width — better to scroll than
       to drop a tab off the right edge or wrap the close button to its
       own row. The close button keeps its margin-left:auto so a sub-five-
       tab strip still anchors it to the right; with overflow-x scrolling
       it stays at the natural end of the strip. */
    .hub-tab-strip[b-9vk5ep7d9f] {
        gap: 2px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none; /* Firefox: hide scrollbar */
        -ms-overflow-style: none; /* IE/Edge legacy */
    }

    .hub-tab-strip[b-9vk5ep7d9f]::-webkit-scrollbar {
        display: none; /* Chrome/Safari: hide scrollbar */
    }

    /* MOB7 (2026-05-03): Increase tap target to ~40px square on mobile.
       iOS HIG calls for 44pt minimum, Material for 48dp; the
       icon-only mode at <480px previously gave a ~24px target (14px
       icon + 5px padding × 2 = 24px) which is well below either
       guideline. Bump to 18px icon + 9px vertical padding for a 36px
       target, plus 10px horizontal padding for finger room around the
       glyph. Slightly looser than HIG's 44pt but constrained by the
       five-tab + close horizontal budget; horizontal scroll fallback
       (line ~1153 above) absorbs the overflow when fingers grow. */
    .hub-tab[b-9vk5ep7d9f] {
        padding: 9px 10px;
        font-size: 0.75rem;
    }

    .hub-tab .hub-tab-icon[b-9vk5ep7d9f] {
        width: 18px;
        height: 18px;
    }

    /* Inactive tabs collapse to icon-only at this breakpoint. The active
       tab keeps its label so users always know which view is current
       without having to mentally decode the icon. title= + aria-label on
       every button (added MOB1) keep hover-tooltip + screen-reader names
       intact when the visible label is suppressed. */
    .hub-tab:not(.hub-tab--active) span:not(.hub-tab-icon)[b-9vk5ep7d9f] {
        display: none;
    }

    /* Active tab label tightens too — at 0.7rem it stays readable but
       costs less horizontal space than the desktop 0.82rem default. */
    .hub-tab--active span:not(.hub-tab-icon)[b-9vk5ep7d9f] {
        font-size: 0.7rem;
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* HHC-V-2 (2026-05-02): Section footer holds the "View all" link below
   the list. Right-aligned so the link sits at the bottom-right corner of
   the section — bottom placement (vs. in the section header) keeps the
   header tight and puts the "go deeper" affordance after the user has
   scanned the items, which is the natural moment to want more. Used in
   the Today's Work tab's three sections (Overdue / Due Today / Routine)
   and at the bottom of the My Tasks / My Goals tab lists. */
.todays-work-section-footer[b-9vk5ep7d9f] {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* "View all →" link styled as a quiet text link with a chevron. Uses
   theme-text-secondary for default state and theme-primary on hover so
   the affordance reads as a navigation link, not a button. The chevron
   slides slightly to the right on hover for the "going somewhere" cue. */
.todays-work-section-viewall[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.todays-work-section-viewall:hover[b-9vk5ep7d9f],
.todays-work-section-viewall:focus-visible[b-9vk5ep7d9f] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
}

.todays-work-section-viewall:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.todays-work-section-viewall svg[b-9vk5ep7d9f] {
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.todays-work-section-viewall:hover svg[b-9vk5ep7d9f],
.todays-work-section-viewall:focus-visible svg[b-9vk5ep7d9f] {
    transform: translateX(2px);
}

/* Dark-theme override — the link defaults already use theme-secondary
   which is properly themed, but the hover background needs a touch more
   contrast against the dark surface tints used by the hub card. */
.is-dark .todays-work-section-viewall[b-9vk5ep7d9f] {
    color: rgba(241, 245, 249, 0.65);
}

.is-dark .todays-work-section-viewall:hover[b-9vk5ep7d9f],
.is-dark .todays-work-section-viewall:focus-visible[b-9vk5ep7d9f] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .todays-work-section-viewall[b-9vk5ep7d9f],
    .todays-work-section-viewall svg[b-9vk5ep7d9f] {
        transition: none;
    }

    .todays-work-section-viewall:hover svg[b-9vk5ep7d9f],
    .todays-work-section-viewall:focus-visible svg[b-9vk5ep7d9f] {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────
   CAL-HOME-1 (2026-05-28): Upcoming calendar events section.
   New classes for the calendar-event row variant — uses a thin
   color accent (driven by the parent calendar's color) instead of
   the routine/task chips, so events read as a distinct row type
   without competing with the existing visual vocabulary.
   ──────────────────────────────────────────────────────────────── */
.todays-work-row--upcoming-event[b-9vk5ep7d9f] {
    display: flex;
    /* MOBILE-AUDIT-5 (2026-10-02): the generic <=480px rule stacks .todays-work-row into a
       column (task rows: info over actions). An event row is accent | main | snooze, so on a
       phone the colour bar became an orphan stub above the title and the snooze icon sat on
       a row of its own. Keep this variant a row at every width. */
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.todays-work-row--upcoming-event:hover[b-9vk5ep7d9f] {
    background-color: color-mix(in srgb, var(--theme-primary, #6366f1) 5%, transparent);
}

/* CAL-HOME-SNOOZE-1 (2026-06-17): per-row snooze button for upcoming events
   (supersedes the CAL-HOME-DISMISS-1 X). Dim-but-visible by default (no
   hover-reveal — touch has no hover, and the affordance should be discoverable),
   brightens on hover/focus. Sits as the trailing flex item after
   .todays-work-row-main. */
.todays-work-event-snooze[b-9vk5ep7d9f],
.todays-work-event-wake[b-9vk5ep7d9f] {
    align-self: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.todays-work-event-snooze:hover[b-9vk5ep7d9f],
.todays-work-event-snooze:focus-visible[b-9vk5ep7d9f],
.todays-work-event-wake:hover[b-9vk5ep7d9f],
.todays-work-event-wake:focus-visible[b-9vk5ep7d9f] {
    opacity: 1;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background-color: color-mix(in srgb, var(--theme-primary, #6366f1) 12%, transparent);
}

.todays-work-event-snooze:focus-visible[b-9vk5ep7d9f],
.todays-work-event-wake:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 1px;
}

/* CAL-HOME-SNOOZE-2 (2026-06-17): "snoozed until …" sublabel in the Snoozed peek. */
.todays-work-event-snoozed-until[b-9vk5ep7d9f] {
    opacity: 0.85;
    font-style: italic;
}

.todays-work-row-accent[b-9vk5ep7d9f] {
    display: inline-block;
    width: 3px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
    min-height: 32px;
}

.todays-work-row-main[b-9vk5ep7d9f] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.todays-work-row-title[b-9vk5ep7d9f] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.todays-work-row-meta[b-9vk5ep7d9f] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.todays-work-event-time[b-9vk5ep7d9f] {
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.todays-work-event-calendar[b-9vk5ep7d9f] {
    opacity: 0.8;
}

/* FOCUS-HOME-1 (2026-08-10): the "Start with" pin above the overdue list.
   Deliberately calm — it is a judgment, not an alarm: the section already carries the
   error-token urgency treatment, so a second red block would just shout. Uses theme
   tokens with fallbacks so it survives all 8 themes (see the slate-theme sweep). */
.todays-work-focus[b-9vk5ep7d9f] {
    margin: 0 0 10px 0;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-left: 3px solid var(--theme-error, #dc2626);
    background: var(--theme-surface-alt, #f8fafc);
}

.todays-work-focus-label[b-9vk5ep7d9f] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 4px 0;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--theme-error, #dc2626);
}

.todays-work-focus-title[b-9vk5ep7d9f] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--theme-text, #0f172a);
}

.todays-work-focus-reason[b-9vk5ep7d9f] {
    margin: 2px 0 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    /* FOCUS-INK-1 (2026-09-05): this line is the wedge - the reason the pick is first - and
       it was the faintest text on the card. Cause: the card paints on --theme-surface-alt,
       a token NO theme defines, so it has ALWAYS been the light #f8fafc fallback in every
       theme; --theme-text-secondary, however, IS defined per theme and is a LIGHT gray on
       dark themes (#cbd5e1 on Slate) -> light ink on a light card. Seen on camera in the
       EXPLAINER-90 take (Josh: "the subtext is tough to see"). Pin the ink to the surface
       it is actually painted on, like the title already does (#0f172a). #373's rule again:
       contrast is a property of a PAIR - check the ink against the real background. */
    color: #475569;
}

/* FOCUS-HOME-1b (2026-08-10): the pin opens the item it names. Affordance is deliberately
   quiet — a hover lift and a pointer, not a button chrome — because the pin is a statement
   ("start here") that happens to be actionable, not a call to action competing with the
   Done buttons on the rows below. Focus ring is explicit: this is a div with role=button,
   so it gets no ring for free, and keyboard users need to see where they are. */
.todays-work-focus--clickable[b-9vk5ep7d9f] {
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.todays-work-focus--clickable:hover[b-9vk5ep7d9f] {
    background: var(--theme-surface-hover, #f1f5f9);
    border-color: var(--theme-border-strong, #cbd5e1);
    transform: translateY(-1px);
}

.todays-work-focus--clickable:active[b-9vk5ep7d9f] {
    transform: translateY(0);
}

.todays-work-focus--clickable:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}


/* ─── GLITCH-TAB-1 (2026-10-05): the assistant as a hub tab ──────────────────────────
   The five data tabs are views of YOUR stuff; this one talks back, so it is set apart three
   ways: a divider, its own mark instead of a glyph, and an outline in the theme ACCENT (not
   primary - every theme already uses primary for the active data tab). The unread dot shows
   when Home queued a greeting the user has not opened yet. The slot is an empty sized box;
   js/chatDock.js lays the Assistant dialog over it. */
.hub-tab-divider[b-9vk5ep7d9f] {
    width: 1px;
    height: 20px;
    margin: 0 6px;
    flex-shrink: 0;
    background: var(--theme-border, rgba(0, 0, 0, 0.12));
}

.hub-tab--assistant[b-9vk5ep7d9f] {
    /* GLITCH-TAB-8 (2026-10-06, Josh: "not sure I love the last two tabs"): the accent outline +
       fill + glow read as a button group bolted onto the strip. These are tabs; the divider and
       the mark already say what kind. Same resting / hover / active treatment as the five data
       tabs - the one difference is the mark, which is the user's actual assistant. */
    position: relative;
    padding-left: 8px;
}

.hub-tab-mark[b-9vk5ep7d9f] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 999px;
    font-style: normal;
    color: currentColor;
}

/* ProBot paints its head in currentColor; the face is cut out in the surface colour so it reads as
   a face on the resting tab (dark head, light face) AND on the active pill (light head, dark face). */
.hub-tab-mark[b-9vk5ep7d9f]  .pro-bot-eye,
.hub-tab-mark[b-9vk5ep7d9f]  .pro-bot-mouth {
    fill: var(--theme-surface, #ffffff);
}

.hub-tab--active .hub-tab-mark[b-9vk5ep7d9f]  .pro-bot-eye,
.hub-tab--active .hub-tab-mark[b-9vk5ep7d9f]  .pro-bot-mouth {
    fill: var(--theme-primary, #6366f1);
}

/* Spark's companion orb - drawn, not the canvas entity (too heavy for a tab mark). A small
   accent dot with a highlight; on the active pill it inverts to the pill's text colour. */
.hub-tab-mark--orb[b-9vk5ep7d9f] {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
    margin: 0 2px;
    background: radial-gradient(circle at 38% 34%, #ffffff 0%, var(--theme-accent, #6366f1) 55%, var(--theme-accent, #6366f1) 100%);
}

.hub-tab--active .hub-tab-mark--orb[b-9vk5ep7d9f] {
    background: radial-gradient(circle at 38% 34%, var(--theme-primary, #6366f1) 0%, var(--theme-primary-contrast, #ffffff) 55%, var(--theme-primary-contrast, #ffffff) 100%);
}

.hub-tab-unread[b-9vk5ep7d9f] {
    position: absolute;
    top: -3px;
    right: -4px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--theme-accent, #6366f1);
    box-shadow: 0 0 0 2px var(--theme-surface, #ffffff);
}

.hub-tab--active .hub-tab-unread[b-9vk5ep7d9f] {
    box-shadow: 0 0 0 2px var(--theme-primary, #6366f1);
}

.hub-glitch-slot[b-9vk5ep7d9f] {
    height: min(560px, calc(100vh - 200px));
    height: min(560px, calc(100dvh - 200px));
    min-height: 380px;
}

/* GLITCH-TAB-2: ntsChatDock.reveal() scrolls the CARD to the top when the docked chat is out of
   view - clear the sticky app header with a little air, so the tab strip stays reachable. */
.todays-work-card[b-9vk5ep7d9f] {
    scroll-margin-top: 96px;
}

@media (max-width: 480px) {
    .hub-tab-divider[b-9vk5ep7d9f] {
        margin: 0 2px;
    }

    /* GLITCH-TAB-8: the mark matches the other tabs' 18px phone icon size - no special pill. */
    .hub-tab--assistant[b-9vk5ep7d9f] {
        padding: 9px 10px;
    }

    .hub-glitch-slot[b-9vk5ep7d9f] {
        height: calc(100vh - 150px);
        height: calc(100dvh - 150px);
        min-height: 360px;
    }
}

/* GLITCH-TAB-3: unread count on the Transmit tab (a number, where the assistant tab has a dot). */
.hub-tab-count[b-9vk5ep7d9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-primary-contrast, #ffffff);
    background: var(--theme-accent, #6366f1);
}

/* GLITCH-TAB-3b (2026-10-05): seven tabs + divider pushed the dismiss X onto a second row. The X
   is pinned to the card's corner instead (the strip reserves its width), so the tab row can wrap
   or scroll without taking the X with it; the tabs themselves tighten a few px to fit the 820px
   card on one row. position:relative creates no containing block for the fixed dialogs inside. */
.todays-work-card[b-9vk5ep7d9f] {
    position: relative;
}

.hub-tab-strip[b-9vk5ep7d9f] {
    gap: 3px;
    padding-right: 34px;
}

.hub-tab[b-9vk5ep7d9f] {
    padding: 6px 10px;
}

.hub-tab-divider[b-9vk5ep7d9f] {
    margin: 0 4px;
}

.hub-tab-close[b-9vk5ep7d9f] {
    position: absolute;
    top: 22px;
    right: 22px;
    margin-left: 0;
}

@media (max-width: 480px) {
    .hub-tab-close[b-9vk5ep7d9f] {
        top: 16px;
        right: 14px;
    }
}

/* HUB-X-1 (2026-10-06): eight items in the strip - with the dismiss X gone the strip no longer
   reserves its width, and it SCROLLS instead of wrapping at every width (the <=480px rule already
   did this; at Josh's desktop zoom Transmit had dropped to a second row). Scrollbar hidden the same
   way; the strip is short enough that a stray tab is one flick away. */
.hub-tab-strip[b-9vk5ep7d9f] {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-right: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hub-tab-strip[b-9vk5ep7d9f]::-webkit-scrollbar {
    display: none;
}

/* GLITCH-TAB-8c (2026-10-06, Josh: "not sure I love this active state"): the halo paints itself in
   --nts-halo-ink, falling back to the theme's gradient/primary ink (HALO-1e) - which on the active
   pill IS the pill colour, so the ring vanished and left "Glitch" with a dead gap on its left. The
   robot and orb already invert on the pill; give the halo the pill's text colour the same way. */
.hub-tab--active .hub-tab-mark[b-9vk5ep7d9f] {
    --nts-halo-ink: var(--theme-primary-contrast, #ffffff);
}

/* HUB-PHONE-1 (2026-10-06, Josh's iPhone walk): with eight items, Transmit scrolled off the right
   edge of the strip at 390px with no hint it existed - the nowrap rule hiding a tab. Budget at 390
   (card inner ~326px): seven icon tabs + divider + one labelled pill must fit. Icon tabs drop from
   10px to 7px side padding (18px glyph → 32px wide tab, still a 36px-tall target), the divider loses
   its margins, the active label caps at 80px. Comes to ~320px - fits, no scroll needed. */
@media (max-width: 480px) {
    /* MONEY-TAB-1: an eighth icon tab. 7px -> 5px side padding keeps the strip on one row at 390
       (eight 28px tabs + divider + pill ≈ 318px against ~326 inner). Targets stay 36px tall. */
    .hub-tab:not(.hub-tab--active)[b-9vk5ep7d9f] {
        padding-left: 5px;
        padding-right: 5px;
    }

    .hub-tab--active[b-9vk5ep7d9f] {
        padding-left: 9px;
        padding-right: 9px;
    }

    .hub-tab--active span:not(.hub-tab-icon)[b-9vk5ep7d9f] {
        max-width: 80px;
    }

    .hub-tab-divider[b-9vk5ep7d9f] {
        margin: 0;
    }

    /* MONEY-TAB-1 QA (10/14 10:15 PM, 385px frame): the two assistant tabs kept 7px and pushed the
       strip 3px past its box - a hairline scroll. Same 5px as the data tabs. */
    .hub-tab--assistant:not(.hub-tab--active)[b-9vk5ep7d9f] {
        padding: 9px 5px;
    }

    /* The chat input was below the fold on the Glitch tab: the slot ran to 100dvh-150 under a strip
       and a header that together take ~230px. Size the slot to what is actually left on screen
       (sticky header 56 + card top padding + tab strip + card bottom ≈ 200) so the input lands in
       view when the tab opens, and the keyboard has nowhere to push it off to. */
    .hub-glitch-slot[b-9vk5ep7d9f] {
        height: calc(100vh - 215px);
        height: calc(100dvh - 215px);
        min-height: 320px;
    }

    /* GLITCH-PHONE-1 (2026-10-13): on a phone the docked chat was three frames deep (card padding, the
       panel's own border, the messages surface). The slot now cancels the card's side and bottom
       padding (20px 24px, base rule) so the conversation runs to the card's edges; chatDock.js pins
       the dialog to the slot's rect, so the panel follows. The 20px of card bottom it reclaims goes
       to the slot's height. The panel drops its own border/radius to match (Assistant.razor.css). */
    .hub-glitch-slot[b-9vk5ep7d9f] {
        margin: 0 -24px -20px;
        height: calc(100vh - 195px);
        height: calc(100dvh - 195px);
    }
}

/* START-WITH-HEAR-1 (2026-10-08): "Hear why" - the narrated read, on the pin it explains. The pin always
   paints on the light #f8fafc fallback (see FOCUS-INK-1), so the ink is pinned for a light surface in
   every theme rather than following theme text tokens. */
.todays-work-focus[b-9vk5ep7d9f] {
    position: relative;
}

/* HEAR-ICON-1 (2026-10-19): the pill became a 34px round icon button, so the row reserves 56px, not 120. */
.todays-work-focus:has(.todays-work-focus-hear)[b-9vk5ep7d9f] {
    padding-right: 56px;
}

.todays-work-focus-hear[b-9vk5ep7d9f] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.todays-work-focus-hear:hover[b-9vk5ep7d9f] {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.todays-work-focus-hear:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .todays-work-focus:has(.todays-work-focus-hear)[b-9vk5ep7d9f] { padding-right: 12px; }
    /* HEAR-ICON-2 (2026-10-20, phone QA): the round icon sat bottom-LEFT under the pick text on phones;
       it now hugs the right edge of the row like it does beside the text on desktop. */
    .todays-work-focus-hear[b-9vk5ep7d9f] {
        position: static;
        transform: none;
        display: flex;
        margin: 8px 0 0 auto;
    }
}

/* ─── HUB-PHONE-2 (2026-10-14, Josh, after the Money tab: "thinking we might want to make all tabs full
   screen on mobile"): what GLITCH-PHONE-3 did for the chat, every hub tab gets. On a phone the card is a
   full-width surface (no gutters, corners, side borders or shadow) and the tab strip is FIXED at the bottom
   under the thumb for ALL tabs; the tab body pads its bottom so the last row clears the strip. The chat
   tabs keep their own extras below (transparent card, viewport-fixed slot). Today's Work keeps the hero
   above it; the other tabs fold the hero (HUB-FOCUS-1), so they start right under the app header. */
@media (max-width: 480px) {
    .todays-work-card[b-9vk5ep7d9f] {
        margin: 0 -16px;
        padding: 12px 12px calc(60px + env(safe-area-inset-bottom, 0px));
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* HUB-PHONE-3 (2026-10-14, Josh's phone on Slate, ?kbdebug: strip top 1, slot 97/0, dialog hidden):
       the dark theme's backdrop-filter on the card makes the CARD the containing block for every
       position:fixed descendant - the strip and the slot anchored to a card with no height instead of
       the viewport, and chatDock hid the zero-height dialog. Light themes have no filter, which is why
       the first phone walk passed. Phones get no blur on the card; it is edge to edge anyway. Any other
       transform/filter/backdrop-filter on the card or an ancestor would break it the same way. */
    .is-dark .todays-work-card[b-9vk5ep7d9f] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .todays-work-card .hub-tab-strip[b-9vk5ep7d9f] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;   /* over the page, under the app header (1100) and its popups */
        box-sizing: border-box;
        height: calc(48px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: center;
        background: var(--theme-surface, #ffffff);
        border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.15));
        box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
    }

    .is-dark .todays-work-card .hub-tab-strip[b-9vk5ep7d9f] {
        background: rgba(30, 41, 59, 0.96);
        border-top-color: rgba(255, 255, 255, 0.08);
    }
}

/* ─── GLITCH-PHONE-3 (2026-10-14, Josh: Meta Muse's Koda screen "is equivalent to this, relatively";
   "for now, just when the chat opens"): on a phone, with an assistant tab up, the hub card IS the
   screen. Three borrowings from that layout, phones only, assistant tabs only:
     - no card: the card loses its gutters, border, corners and padding; the conversation runs from
       the app header to the tab strip at full width.
     - tabs at the bottom: the strip is fixed under the thumb, above the home indicator; the slot's
       height is what is left between the app header (56px) and the strip.
     - the mark floats over the conversation as a small chip (Assistant.razor.css, GLITCH-PHONE-3).
   The card's -16px margins cancel .home-main's phone padding (authenticated-home.css <=768px).
   chatDock.js pins the dialog to the slot's rect every frame, so it follows all of this for free.
   Desktop and the other five tabs are untouched. */
@media (max-width: 480px) {
    .hub-card--chat[b-9vk5ep7d9f] {
        margin: 0 -16px;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    /* The strip itself is HUB-PHONE-2's (fixed at the bottom on every tab). */

    /* 48px app header above (MainLayout.razor.css <=599px), 48px strip + safe area below. The strip's
       height is pinned so this arithmetic holds; the slot's own background covers any sub-pixel slack
       in the conversation's colour (first walk: an 8px band of page blue showed above the strip). */
    /* Second walk (3:01 PM): sized in flow, the slot still rode the page scroll - the icon row slid
       under the app header and a band of page showed above the strip, because whatever is left in
       the column (fold remainder, layout runway) scrolls the slot with it. So the slot is FIXED to
       the viewport, like the strip: top edge on the app header, bottom edge on the strip. chatDock.js
       reads the slot's rect every frame, so the dialog is pinned the same way, and the page can
       scroll under it without anything moving. The card is left with no in-flow height. */
    .hub-card--chat .hub-glitch-slot[b-9vk5ep7d9f] {
        --hub-strip-h: calc(48px + env(safe-area-inset-bottom, 0px));
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        bottom: var(--hub-strip-h);
        z-index: 39;   /* just under the docked dialog (40) */
        margin: 0;
        height: auto;
        min-height: 0;
        background: var(--theme-surface, #ffffff);
    }
}

/* ================================================================
   CAL-TAB-1 / CAL-TAB-2 (2026-10-15 / 10-17): Calendar tab - the week ahead.
   Desktop: seven day COLUMNS with event chips (the week's shape at a
   glance). Phone (<=600px): the same markup stacks into day rows.
   Muted text uses the theme's secondary token, NOT opacity - opacity over
   the dark themes' translucent card landed near-black (Josh, 10/15).
   ================================================================ */
.hub-week-strip[b-9vk5ep7d9f] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 10px;
}
.hub-week-col[b-9vk5ep7d9f] {
    display: flex;
    flex-direction: column;
    min-height: 120px;
    border-radius: 10px;
    border: 1px solid var(--theme-border, rgba(100, 116, 139, 0.18));
    background: var(--theme-surface-soft, rgba(148, 163, 184, 0.06));
    overflow: hidden;
}
.hub-week-col--today[b-9vk5ep7d9f] {
    border-color: var(--theme-primary);
    box-shadow: inset 0 2px 0 var(--theme-primary);
}
.hub-week-col-head[b-9vk5ep7d9f] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 8px 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-secondary, #64748b);
}
.hub-week-col--today .hub-week-col-head[b-9vk5ep7d9f] {
    color: var(--theme-primary);
}
.hub-week-col-num[b-9vk5ep7d9f] {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--theme-text-primary, #1e293b);
}
.hub-week-col--today .hub-week-col-num[b-9vk5ep7d9f] {
    color: var(--theme-primary);
}
.hub-week-col-body[b-9vk5ep7d9f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 6px 8px;
    flex: 1;
}
.hub-week-free[b-9vk5ep7d9f] {
    margin-top: 2px;
    padding-left: 2px;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--theme-text-secondary, #64748b);
}
.hub-week-col--empty .hub-week-free[b-9vk5ep7d9f] {
    color: var(--theme-text-tertiary, var(--theme-text-secondary, #94a3b8));
}
.hub-week-chip[b-9vk5ep7d9f] {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
    padding: 4px 6px;
    border: 0;
    border-left: 3px solid var(--cal-color, var(--theme-primary));
    border-radius: 6px;
    background: color-mix(in srgb, var(--cal-color, var(--theme-primary)) 14%, transparent);
    color: var(--theme-text-primary, #1e293b);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease;
}
.hub-week-chip:hover[b-9vk5ep7d9f],
.hub-week-chip:focus-visible[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--cal-color, var(--theme-primary)) 26%, transparent);
    outline: none;
}
.hub-week-chip:focus-visible[b-9vk5ep7d9f] {
    box-shadow: 0 0 0 2px var(--theme-focus-ring, var(--theme-primary));
}
.hub-week-chip-dot[b-9vk5ep7d9f] { display: none; }   /* the left border is the colour on desktop */
.hub-week-chip-text[b-9vk5ep7d9f] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.hub-week-chip-title[b-9vk5ep7d9f] {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.hub-week-chip-time[b-9vk5ep7d9f] {
    font-size: 0.66rem;
    color: var(--theme-text-secondary, #64748b);
}
.hub-week-chip--past[b-9vk5ep7d9f] {
    opacity: 0.6;
}
.hub-week-chip--past .hub-week-chip-title[b-9vk5ep7d9f] {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.hub-week-footer[b-9vk5ep7d9f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hub-week-summary[b-9vk5ep7d9f] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Phone: columns would be ~45px wide - stack into day rows instead. */
@media (max-width: 600px) {
    .hub-week-strip[b-9vk5ep7d9f] {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .hub-week-col[b-9vk5ep7d9f] {
        flex-direction: row;
        align-items: flex-start;
        min-height: 0;
    }
    .hub-week-col-head[b-9vk5ep7d9f] {
        flex: 0 0 72px;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 8px 10px;
    }
    .hub-week-col-body[b-9vk5ep7d9f] {
        flex: 1;
        padding: 6px 8px 6px 0;
    }
    .hub-week-free[b-9vk5ep7d9f] {
        margin-top: 4px;
    }
    .hub-week-col--empty[b-9vk5ep7d9f] {
        min-height: 0;
    }
    .hub-week-col--empty .hub-week-col-body[b-9vk5ep7d9f] {
        padding-top: 7px;
    }
    .hub-week-footer[b-9vk5ep7d9f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* HUB-PHONE-6 (2026-10-16): two label spans per tab; desktop shows the full one, phones the short
   one ("My Tasks" -> "Tasks"). Any rule that hid the label span on inactive phone tabs by element
   still applies - both spans are spans. */
.hub-tab-label--short[b-9vk5ep7d9f] { display: none; }

@media (max-width: 480px) {
    .hub-tab-label--full[b-9vk5ep7d9f] { display: none; }
    .hub-tab--active .hub-tab-label--short[b-9vk5ep7d9f] { display: inline; }
}

/* GLITCH-DESK-1 (2026-10-17): desktop/tablet docked chat fills the viewport instead of stopping at 560px.
   Budget below the fold: app header 56 + card top gap + card padding + tab strip + card padding bottom
   ≈ 190px; a touch more keeps the card's bottom edge on screen (body scroll is locked while docked,
   site.css). The phone's fixed slot (<=480, GLITCH-PHONE-3) is untouched. */
@media (min-width: 481px) {
    .hub-card--chat .hub-glitch-slot[b-9vk5ep7d9f] {
        height: calc(100vh - 210px);
        height: calc(100dvh - 210px);
        min-height: 380px;
    }
}

/* GLITCH-DESK-3 (2026-10-17): the chat card sheds 8px of padding top/bottom while docked, and the slot
   budget follows the trims in Home.razor.css GLITCH-DESK-3 (28px above the card) + this (16px):
   210 -> 166. Measured on a 1280x671 viewport; the card's bottom edge keeps ~10px of slack. */
@media (min-width: 481px) {
    .hub-card--chat[b-9vk5ep7d9f] {
        padding: 12px 12px;
    }

    .hub-card--chat .hub-glitch-slot[b-9vk5ep7d9f] {
        height: calc(100vh - 166px);
        height: calc(100dvh - 166px);
    }
}

/* ─── HUB-BUCKLE-1/2/3 (2026-10-18, Josh: "the avatar becomes the center of the menu like a belt. the other
   glitch button becomes a duplicate" -> "the size should be the same size as the hero - not sure we need
   that outer circle"). Phones only. The buckle button and its gap are in the markup on every width (see
   TodaysWorkCard.razor) and exist only here. Two states, driven by FAB-HERO-3's gate:
     - DORMANT (html.fab-hero-in-view - the Home hero is on screen): flush in the strip, tab-sized. The
       hero is the presence; the belt just holds its place.
     - LANDED (hero scrolled away): the bare mark at the HERO's size (--buckle-mark, 88 at the default),
       centred on the strip's top edge. No puck (HUB-BUCKLE-3) - the sleeves paint their own glow, and the
       hero has none either. The FAB, arrived in the belt, at the hero's size.
   With an assistant tab up (.hub-card--chat) it is flush and lit like the active pill, so it never
   overlaps the chat's input row. The strip is overflow-x:auto on phones (MOB1's scroll fallback), which
   would clip a raised child - so the buckle is FIXED to the viewport beside the strip (same bottom
   arithmetic as HUB-PHONE-2), not a child of its scroll box. With the keyboard up chatDock.js lifts the
   strip but not the buckle; in that state the chat is active and the buckle is just the lit, flush tab,
   so sitting under the keyboard costs nothing. */
.hub-tab-buckle[b-9vk5ep7d9f], .hub-tab-buckle-gap[b-9vk5ep7d9f] { display: none; }

/* HUB-BUCKLE-2: the sides are invisible wrappers everywhere but phones. */
.hub-belt-side[b-9vk5ep7d9f] { display: contents; }

@media (max-width: 480px) {
    .todays-work-card .hub-tab-strip .hub-tab--glitch[b-9vk5ep7d9f] { display: none; }

    /* The belt: [side | gap | side]. Each side is its own flex row that hugs the buckle and scrolls on
       its own if it must (MOB1's fallback, per side), so the centre column never moves. HUB-BUCKLE-4:
       the gap is 72px and the landed mark is raised so only its lower ~third straddles the strip: the
       Eye's ball is half its box, but the Robot's head is ~90% and the Halo's ring ~75%, and at 64px
       straddling by half, both sat on the Goals icon (sleeve pass, 5:40 PM). A full-mark gap (88) was
       tried and clipped the Focus pill on the left side at 393. */
    .todays-work-card .hub-tab-strip--belt[b-9vk5ep7d9f] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
        align-items: center;
        justify-content: stretch;
        overflow: visible;
    }

    .hub-tab-strip--belt .hub-belt-side[b-9vk5ep7d9f] {
        display: flex;
        align-items: center;
        gap: 2px;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .hub-tab-strip--belt .hub-belt-side[b-9vk5ep7d9f]::-webkit-scrollbar { display: none; }
    /* BELT-DENSE-1: the left side hugs the buckle with an auto margin on its first tab, not
       justify-content: flex-end - flex-end spills overflow off the START edge, where it can't be
       scrolled to and scrollWidth doesn't report it (the Focus pill sat at x = -29 on an 8-tab
       layout at 393, icon fully off-screen). With the auto margin the overflow goes to the end and
       the side scrolls like the right one. */
    .hub-tab-strip--belt .hub-belt-side--left[b-9vk5ep7d9f] { justify-content: flex-start; }
    .hub-tab-strip--belt .hub-belt-side--left > :first-child[b-9vk5ep7d9f] { margin-left: auto; }
    .hub-tab-strip--belt .hub-belt-side--right[b-9vk5ep7d9f] { justify-content: flex-start; }

    .hub-tab-buckle-gap[b-9vk5ep7d9f] { display: block; width: 72px; }

    /* BELT-ICON-1 (2026-10-18, Josh: "make the icons one font size larger for the belt menu - on mobile"):
       18 -> 20px icons; inactive belt tabs at 5px side padding so the tab stays 32px wide (20 + 2x5 + 2
       border/gap) and 4 | 4 with the Focus label still fits at 393 - measured on Josh's layout with 72px
       gap: 6px padding overflowed the right side by 7px, 5px fits both sides. MOB7's 10px/38px target was
       already under iOS's 44; the sides still scroll if a layout has more tabs. */
    .hub-tab-strip--belt .hub-tab:not(.hub-tab--active)[b-9vk5ep7d9f] { padding-left: 5px; padding-right: 5px; }
    .hub-tab-strip--belt .hub-tab .hub-tab-icon[b-9vk5ep7d9f] { width: 20px; height: 20px; }
    .hub-tab-strip--belt .hub-tab--active .hub-tab-icon[b-9vk5ep7d9f] { width: 20px; height: 20px; }

    /* BELT-DENSE-1 (2026-10-18): four or more tabs on one side of the buckle = the active tab's label
       can't fit (pill 75px + 3 x 32px = 175px in a ~150px side at 390), so the active tab is a lit
       32px disc there - every tab stays visible, nothing scrolls. A side with three tabs keeps the
       labelled pill (the QA account's layout). The razor sets hub-tab--dense from the side's count. */
    .hub-tab-strip--belt .hub-tab--dense.hub-tab--active .hub-tab-label[b-9vk5ep7d9f] { display: none; }
    .hub-tab-strip--belt .hub-tab--dense.hub-tab--active[b-9vk5ep7d9f] { padding-left: 5px; padding-right: 5px; }

    /* BELT-HIT-1 (2026-10-18, Josh: "we want excellent mobile accessibility"): the tabs are 32 x 34
       inside the 48px strip. Eight across a 390 phone can't be 44 wide (8 x 44 + the 72px column =
       424), but the height is there: the strip's 6px vertical padding + 1px border become 2px + an
       inset hairline, the sides stretch to the 44px that leaves, and an invisible slop of -5px
       top/bottom and -1px each side makes every tab a 44 x 34 target that fills its own pitch without
       reaching into a neighbour - all inside the side's overflow box, which is what clips a slop that
       tries to leave it. No visual change (tabs stay centred at 34). The dormant/lit buckle (40px)
       gets -2px to reach 44; landed it is 88. */
    .todays-work-card .hub-tab-strip--belt[b-9vk5ep7d9f] {
        padding-top: 2px;
        padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px));
        border-top: 0;
        box-shadow: inset 0 1px 0 var(--theme-border, rgba(148, 163, 184, 0.15)), 0 -4px 16px rgba(15, 23, 42, 0.06);
    }
    .is-dark .todays-work-card .hub-tab-strip--belt[b-9vk5ep7d9f] {
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -4px 16px rgba(15, 23, 42, 0.06);
    }
    .hub-tab-strip--belt .hub-belt-side[b-9vk5ep7d9f] { align-self: stretch; }
    .hub-tab-strip--belt .hub-tab[b-9vk5ep7d9f] { position: relative; }
    .hub-tab-strip--belt .hub-tab[b-9vk5ep7d9f]::before { content: ""; position: absolute; inset: -5px -1px; }
    html.fab-hero-in-view .hub-tab-buckle[b-9vk5ep7d9f]::before,
    .hub-tab-buckle--active[b-9vk5ep7d9f]::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; }

    .hub-tab-buckle[b-9vk5ep7d9f] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        left: 50%;
        /* LANDED: the mark's box straddles the strip's top edge by its lower ~third (HUB-BUCKLE-4). */
        bottom: calc(48px + env(safe-area-inset-bottom, 0px) - var(--buckle-mark, 88px) * 0.34);
        width: var(--buckle-mark, 88px);
        height: var(--buckle-mark, 88px);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        transform: translateX(-50%);
        background: transparent;
        color: var(--theme-fab-robot, #334155);
        --nts-halo-ink: var(--theme-fab-robot, #334155);
        cursor: pointer;
        z-index: 1001;   /* one over the strip (1000), under the app header (1100) */
        transition: bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s, height 0.35s, background 0.35s;
    }

    /* HUB-BUCKLE-6 (2026-10-18, Josh on Slate): the ink above is var(--theme-fab-robot, #334155) - a
       variable NO theme defines (HALO-1c found the same on the peek mark, 8/21), so every dark theme
       painted the landed Mote/Halo/Eye/Wisp and the Robot in dark slate on the dark strip: the Mote
       was a near-invisible dot. Dark themes take the sleeves' own ink chain (what the /assistant tiles
       resolve to: --theme-gradient-text, #cbd5e1 on Slate) and the text ink for the Robot. Light themes
       unchanged; the active (lit) state keeps its primary-contrast ink. */
    .is-dark .hub-tab-buckle:not(.hub-tab-buckle--active)[b-9vk5ep7d9f] {
        color: var(--theme-text-primary, #f1f5f9);
        --nts-halo-ink: var(--theme-gradient-text, var(--theme-text-primary, #f1f5f9));
    }

    /* ROBOT-FACE-1 (2026-10-18): the robot's face defaults to #fff - invisible on the light head dark
       themes now give the buckle (above), and on the lit buckle's primary-contrast head in EVERY theme
       (faceless since HUB-BUCKLE-1). Same cut-out as the hub tab's mark: the face is what's behind the
       head - the surface when landed, the primary fill when lit. */
    .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-eye,
    .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-mouth { fill: var(--theme-surface, #ffffff); }
    .hub-tab-buckle--active .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-eye,
    .hub-tab-buckle--active .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-mouth { fill: var(--theme-primary, #6366f1); }

    .hub-tab-buckle-mark[b-9vk5ep7d9f] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--buckle-mark, 88px);
        height: var(--buckle-mark, 88px);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center center;
    }

    /* The orb's buckle: the tab-strip mini orb, scaled with the mark, in the COMPANION'S colour
       (HUB-BUCKLE-4: --buckle-orb = VisualColor; the strip's accent gradient read as a grey steel ball
       next to an orange Spark). A soft drop shadow so it sits on the strip like the sleeves' glow does. */
    .hub-tab-buckle .hub-tab-mark--orb[b-9vk5ep7d9f] {
        width: 72%; height: 72%; flex-basis: 72%; margin: 0; border-radius: 999px;   /* a face: a tad bigger than the ring/eye (68%) */
        background: radial-gradient(circle at 38% 34%, #ffffff 0%, var(--buckle-orb, var(--theme-accent, #6366f1)) 55%, color-mix(in srgb, var(--buckle-orb, var(--theme-accent, #6366f1)) 70%, #000) 100%);
        box-shadow: 0 6px 14px color-mix(in srgb, var(--buckle-orb, var(--theme-accent, #6366f1)) 35%, transparent);
    }

    .hub-tab-buckle .hub-tab-unread[b-9vk5ep7d9f] { top: 22%; right: 22%; }

    /* DORMANT: the hero is on screen - flush in the strip, tab-sized (22px of mark). */
    html.fab-hero-in-view .hub-tab-buckle[b-9vk5ep7d9f] {
        bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        width: 40px;
        height: 40px;
    }

    html.fab-hero-in-view .hub-tab-buckle-mark[b-9vk5ep7d9f] { transform: scale(calc(24 / var(--buckle-mark-n, 88))); }   /* BELT-ICON-1: 22 -> 24 with the icons */

    /* An assistant tab is up (Glitch OR Transmit): flush, out of the input row's way. */
    .hub-card--chat .hub-tab-buckle[b-9vk5ep7d9f],
    .hub-tab-buckle--active[b-9vk5ep7d9f] {
        bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        width: 40px;
        height: 40px;
    }

    /* LIT only when Glitch itself is the active tab - on Transmit the Transmit pill is the active one
       (local QA: both looked active at once). */
    .hub-tab-buckle--active[b-9vk5ep7d9f] {
        background: var(--theme-primary, #6366f1);
        color: var(--theme-primary-contrast, #ffffff);
        --nts-halo-ink: var(--theme-primary-contrast, #ffffff);
    }

    .hub-card--chat .hub-tab-buckle-mark[b-9vk5ep7d9f],
    .hub-tab-buckle--active .hub-tab-buckle-mark[b-9vk5ep7d9f] { transform: scale(calc(26 / var(--buckle-mark-n, 88))); }
}

/* ─── PLAN-TAB-1 (2026-10-19): the plan tree ──────────────────────────────────────────────────────
   One tree: goal → objectives → tasks. A goal is a card (the primary one wears the Main Quest amber
   edge like .hub-goal-row--primary); objectives are a branch inside it with a thin rail; tasks under an
   objective are the ordinary .todays-work-row (RenderMyTaskRow) so Done / snooze / Edit behave exactly as
   on the old Tasks tab. The goal chip on those rows is hidden here - the tree already says the goal. */
.plan-tree[b-9vk5ep7d9f] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-goal[b-9vk5ep7d9f] {
    border-radius: 12px;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    background: var(--theme-surface-soft, rgba(148, 163, 184, 0.06));
    padding: 8px 10px 10px 8px;
}

.plan-goal--primary[b-9vk5ep7d9f] {
    border-left: 3px solid var(--theme-warning, #f59e0b);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 5%, transparent);
}

.plan-goal--unplanned[b-9vk5ep7d9f] {
    border-style: dashed;
    background: transparent;
}

.plan-head[b-9vk5ep7d9f] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.plan-toggle[b-9vk5ep7d9f] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 6px 6px 6px 2px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.plan-toggle:hover[b-9vk5ep7d9f] {
    background: var(--theme-surface-hover, rgba(148, 163, 184, 0.12));
}

.plan-toggle:focus-visible[b-9vk5ep7d9f],
.plan-open-btn:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

.plan-chevron[b-9vk5ep7d9f] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: var(--theme-text-tertiary, #94a3b8);
    transition: transform 0.15s ease;
}

.plan-goal--open > .plan-head .plan-chevron[b-9vk5ep7d9f],
.plan-objective--open > .plan-head .plan-chevron[b-9vk5ep7d9f] {
    transform: rotate(90deg);
}

.plan-title[b-9vk5ep7d9f] {
    flex: 1 1 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}

.plan-title-text[b-9vk5ep7d9f] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-goal-head .plan-title[b-9vk5ep7d9f] {
    font-size: 1rem;
}

.plan-title--muted[b-9vk5ep7d9f] {
    font-weight: 500;
    color: var(--theme-text-secondary, #475569);
}

.plan-star[b-9vk5ep7d9f] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--theme-warning, #f59e0b);
}

.plan-meta[b-9vk5ep7d9f] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #475569);
    white-space: nowrap;
}

.plan-counts[b-9vk5ep7d9f] {
    color: var(--theme-text-tertiary, #94a3b8);
}

.plan-measure[b-9vk5ep7d9f],
.plan-status[b-9vk5ep7d9f] {
    color: var(--theme-text-secondary, #475569);
}

.plan-open-btn[b-9vk5ep7d9f] {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--theme-text-tertiary, #94a3b8);
    cursor: pointer;
}

.plan-open-btn:hover[b-9vk5ep7d9f] {
    background: var(--theme-surface-hover, rgba(148, 163, 184, 0.12));
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.plan-open-btn svg[b-9vk5ep7d9f] {
    width: 16px;
    height: 16px;
}

.plan-goal-bar[b-9vk5ep7d9f] {
    width: auto;
    margin: 2px 36px 0 26px;
}

.plan-objective-bar[b-9vk5ep7d9f] {
    width: auto;
    margin: 0 36px 0 24px;
}

.plan-branch[b-9vk5ep7d9f] {
    list-style: none;
    margin: 10px 0 0 10px;
    padding: 0 0 0 12px;
    border-left: 2px solid color-mix(in srgb, var(--theme-text-tertiary, #94a3b8) 30%, transparent);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-objective--overdue > .plan-head .plan-title[b-9vk5ep7d9f] {
    color: var(--theme-danger, #dc2626);
}

.plan-tasks[b-9vk5ep7d9f] {
    margin: 8px 0 2px 24px;
}

.plan-tasks--unplanned[b-9vk5ep7d9f] {
    margin-left: 10px;
}

.plan-tasks .todays-work-goal-chip[b-9vk5ep7d9f] {
    display: none;
}

.plan-empty-line[b-9vk5ep7d9f],
.plan-nudge[b-9vk5ep7d9f] {
    margin: 6px 0 0 26px;
    font-size: 0.85rem;
    color: var(--theme-text-tertiary, #94a3b8);
}

.plan-nudge[b-9vk5ep7d9f] {
    margin: 6px 0 8px 10px;
}

.plan-nudge--nogoal[b-9vk5ep7d9f] {
    margin: 12px 0 0 0;
}

.plan-footer[b-9vk5ep7d9f] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    flex-wrap: wrap;
}

.is-dark .plan-goal[b-9vk5ep7d9f] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .plan-goal--primary[b-9vk5ep7d9f] {
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 8%, transparent);
}

.is-dark .plan-goal--unplanned[b-9vk5ep7d9f] {
    background: transparent;
}

.is-dark .plan-title[b-9vk5ep7d9f] {
    color: #f1f5f9;
}

.is-dark .plan-title--muted[b-9vk5ep7d9f] {
    color: #cbd5e1;
}

.is-dark .plan-toggle:hover[b-9vk5ep7d9f],
.is-dark .plan-open-btn:hover[b-9vk5ep7d9f] {
    background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 560px) {
    .plan-toggle[b-9vk5ep7d9f] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .plan-meta[b-9vk5ep7d9f] {
        flex-basis: 100%;
        margin-left: 24px;
        white-space: normal;
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .plan-goal-bar[b-9vk5ep7d9f],
    .plan-objective-bar[b-9vk5ep7d9f] {
        margin-left: 0;
        margin-right: 0;
    }

    .plan-branch[b-9vk5ep7d9f] {
        margin-left: 2px;
        padding-left: 8px;
    }

    .plan-tasks[b-9vk5ep7d9f] {
        margin-left: 6px;
    }

    .plan-empty-line[b-9vk5ep7d9f] {
        margin-left: 8px;
    }
}

/* ─── BELT-DESK-1 (2026-10-19, Josh, 11:51 PM, looking at his FAB snapped to bottom-centre under the Plan
   tree: "I'm wondering if these tabs should be like mobile along the bottom with the sleeve as the buckle").
   The phone belt (HUB-PHONE-2 strip, HUB-BUCKLE-1..6 buckle) comes to every width, as a FLOATING PILL the
   width of its tabs, centred, 16px off the bottom, instead of the phone's edge-to-edge bar. Same two
   buckle states, driven by the same gate: DORMANT while the Home hero is on screen (html.fab-hero-in-view
   - the hero is the presence, the buckle is a flush 40px tab), LANDED once the hero scrolls away or folds
   (Plan / Insights / Money fold it): the bare mark at the hero's size, its lower third straddling the
   pill's top edge. The Glitch pill is hidden here too - the buckle IS the AI, not a peer in the strip.
   What answers three of Steve's notes at once: the AI stops being a tab, the dot has a job (it holds the
   nav and lands instead of floating), and phone and desktop are one layout.
   Differences from the phone block above, on purpose:
     - the buckle is IN the grid (column 2, position:relative, raised with `bottom`), not fixed to the
       viewport: the pill is content-width and centred, so the viewport's centre is not the gap's centre.
       The pill has no transform/filter (a fixed element with a transform becomes the containing block of
       its descendants - HUB-PHONE-3's lesson), so nothing inside needs to care.
     - sides are auto-width with labels on every tab; no dense mode, no short labels.
     - the gap <span> is hidden (the buckle takes its column); the X (OnDismissed) is never rendered on
       Home, so the right side holds only tabs.
   Runway: MainLayout.razor.css HOME-RUNWAY-2 → BELT-DESK-1 clearance. FAB: Assistant.razor.css HUB-BUCKLE-1
   now hides the corner mark on Home at every width. Docked chat: the slot budget below gains the belt. */
@media (min-width: 481px) {
    /* HUB-PHONE-3's lesson at desktop width: the dark card's backdrop-filter makes the CARD the containing
       block for every position:fixed descendant - the belt would anchor to the card's bottom edge and
       scroll with it. No blur while the card carries a belt; the alpha comes up to cover what the blur
       covered. Light themes have no filter. */
    .is-dark .todays-work-card:has(.hub-tab-strip--belt)[b-9vk5ep7d9f] {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(30, 41, 59, 0.84);
    }

    .todays-work-card .hub-tab-strip--belt[b-9vk5ep7d9f] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 16px;
        width: fit-content;
        max-width: calc(100vw - 32px);
        margin: 0 auto;
        z-index: 1000;   /* over the page and the docked dialog (40), under the app header (1100) */
        box-sizing: border-box;
        height: 52px;
        padding: 0 10px;
        display: grid;
        grid-template-columns: auto 72px auto;
        /* BELT-DESK-2 (2026-10-20, Josh's first scroll: tabs hanging off the pill's bottom edge, the mark
           floating above it): the landed 88px buckle is a grid ITEM, and an auto row grew to fit it, so
           the tabs were centred in an 88px row inside a 52px pill. The row is the pill's content height;
           the buckle overflows it (overflow: visible below) and is centred on it, which is what the
           `bottom: 40px` lift was computed against. */
        grid-template-rows: 100%;
        align-items: center;
        gap: 0;
        overflow: visible;   /* HUB-X-1 scrolls the in-card strip; a raised buckle would be clipped */
        border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.18));
        border-radius: 999px;
        background: var(--theme-surface, #ffffff);
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.06);
    }

    .is-dark .todays-work-card .hub-tab-strip--belt[b-9vk5ep7d9f] {
        background: rgba(30, 41, 59, 0.97);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    }

    .todays-work-card .hub-tab-strip--belt .hub-tab--glitch[b-9vk5ep7d9f] { display: none; }
    .hub-tab-strip--belt .hub-tab-buckle-gap[b-9vk5ep7d9f] { display: none; }

    .hub-tab-strip--belt .hub-belt-side[b-9vk5ep7d9f] {
        display: flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
        overflow-x: auto;       /* a long layout still fits: the side scrolls rather than the pill growing past the viewport */
        scrollbar-width: none;
        padding: 4px 0;         /* room for the focus ring inside the side's own scroll box */
    }
    .hub-tab-strip--belt .hub-belt-side[b-9vk5ep7d9f]::-webkit-scrollbar { display: none; }
    .hub-tab-strip--belt .hub-belt-side--left[b-9vk5ep7d9f] { justify-content: flex-end; }
    .hub-tab-strip--belt .hub-belt-side--right[b-9vk5ep7d9f] { justify-content: flex-start; }

    .hub-tab-strip--belt .hub-tab[b-9vk5ep7d9f] {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    .hub-tab-strip--belt .hub-tab .hub-tab-icon[b-9vk5ep7d9f] { width: 16px; height: 16px; }
    .hub-tab-strip--belt .hub-tab-divider[b-9vk5ep7d9f] { margin: 0 6px; }

    /* The buckle: column 2, centred, raised with `bottom` (position:relative - up is positive). */
    .hub-tab-strip--belt .hub-tab-buckle[b-9vk5ep7d9f] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        grid-column: 2;
        justify-self: center;
        align-self: center;
        bottom: 40px;   /* LANDED: 88px box centred on a 50px row, lifted so its lower ~third straddles the pill's top edge (HUB-BUCKLE-4) */
        width: var(--buckle-mark, 88px);
        height: var(--buckle-mark, 88px);
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--theme-fab-robot, #334155);
        --nts-halo-ink: var(--theme-fab-robot, #334155);
        cursor: pointer;
        z-index: 1;
        transition: bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1), width 0.35s, height 0.35s, background 0.35s;
    }

    /* HUB-BUCKLE-6, same as the phone: dark themes take the sleeves' own ink chain. */
    .is-dark .hub-tab-strip--belt .hub-tab-buckle:not(.hub-tab-buckle--active)[b-9vk5ep7d9f] {
        color: var(--theme-text-primary, #f1f5f9);
        --nts-halo-ink: var(--theme-gradient-text, var(--theme-text-primary, #f1f5f9));
    }

    /* ROBOT-FACE-1, same as the phone. */
    .hub-tab-strip--belt .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-eye,
    .hub-tab-strip--belt .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-mouth { fill: var(--theme-surface, #ffffff); }
    .hub-tab-strip--belt .hub-tab-buckle--active .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-eye,
    .hub-tab-strip--belt .hub-tab-buckle--active .hub-tab-buckle-mark[b-9vk5ep7d9f]  .pro-bot-mouth { fill: var(--theme-primary, #6366f1); }

    .hub-tab-strip--belt .hub-tab-buckle-mark[b-9vk5ep7d9f] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--buckle-mark, 88px);
        height: var(--buckle-mark, 88px);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center center;
    }

    .hub-tab-strip--belt .hub-tab-buckle .hub-tab-mark--orb[b-9vk5ep7d9f] {
        width: 72%; height: 72%; flex-basis: 72%; margin: 0; border-radius: 999px;
        background: radial-gradient(circle at 38% 34%, #ffffff 0%, var(--buckle-orb, var(--theme-accent, #6366f1)) 55%, color-mix(in srgb, var(--buckle-orb, var(--theme-accent, #6366f1)) 70%, #000) 100%);
        box-shadow: 0 6px 14px color-mix(in srgb, var(--buckle-orb, var(--theme-accent, #6366f1)) 35%, transparent);
    }

    .hub-tab-strip--belt .hub-tab-buckle .hub-tab-unread[b-9vk5ep7d9f] { top: 22%; right: 22%; }

    /* DORMANT: the hero is on screen - flush in the pill, tab-sized. */
    html.fab-hero-in-view .hub-tab-strip--belt .hub-tab-buckle[b-9vk5ep7d9f] {
        bottom: 0;
        width: 40px;
        height: 40px;
    }
    html.fab-hero-in-view .hub-tab-strip--belt .hub-tab-buckle-mark[b-9vk5ep7d9f] { transform: scale(calc(24 / var(--buckle-mark-n, 88))); }

    /* An assistant tab is up (Glitch OR Transmit): flush, out of the input row's way. */
    .hub-card--chat .hub-tab-strip--belt .hub-tab-buckle[b-9vk5ep7d9f],
    .hub-tab-strip--belt .hub-tab-buckle--active[b-9vk5ep7d9f] {
        bottom: 0;
        width: 40px;
        height: 40px;
    }

    /* LIT only while Glitch itself is the active tab. */
    .hub-tab-strip--belt .hub-tab-buckle--active[b-9vk5ep7d9f] {
        background: var(--theme-primary, #6366f1);
        color: var(--theme-primary-contrast, #ffffff);
        --nts-halo-ink: var(--theme-primary-contrast, #ffffff);
    }

    .hub-card--chat .hub-tab-strip--belt .hub-tab-buckle-mark[b-9vk5ep7d9f],
    .hub-tab-strip--belt .hub-tab-buckle--active .hub-tab-buckle-mark[b-9vk5ep7d9f] { transform: scale(calc(26 / var(--buckle-mark-n, 88))); }

    .hub-tab-strip--belt .hub-tab-buckle:focus-visible[b-9vk5ep7d9f] {
        outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
        outline-offset: 2px;
    }

    /* Docked chat: the strip left the card's flow (-46px of budget) and the belt now sits in the bottom
       80px of the viewport (16 off the edge + 52 pill + 12 air) - GLITCH-DESK-3's 166 becomes 200.
       BELT-DESK-3 (2026-10-20, prod at 1422x683): measured with the pill at its real seat, the card's
       bottom edge (620) sat 4px under the pill's top (616) - 216 leaves 12px of air. */
    .hub-card--chat:has(.hub-tab-strip--belt) .hub-glitch-slot[b-9vk5ep7d9f] {
        height: calc(100vh - 216px);
        height: calc(100dvh - 216px);
    }
}

/* BELT-DORMANT-1 (2026-10-20, Josh, first look at the desktop belt: the dormant Mote read as two specks -
   its core and the brightest trail circle, both at 24/88 scale). While the buckle is small - dormant
   (hero on screen), flush with a chat up, or lit - the Mote drops its trail and shows the solo core,
   the same answer MOTE-2 gives hosts under 24px (.nts-mote--tiny). Landed at 88 it keeps the trail.
   Every width: the phone's dormant buckle had the same two specks. ::deep reaches the child mark's SVG. */
html.fab-hero-in-view .hub-tab-buckle .hub-tab-buckle-mark[b-9vk5ep7d9f]  .nts-mote-trail,
.hub-card--chat .hub-tab-buckle .hub-tab-buckle-mark[b-9vk5ep7d9f]  .nts-mote-trail,
.hub-tab-buckle--active .hub-tab-buckle-mark[b-9vk5ep7d9f]  .nts-mote-trail {
    display: none;
}

/* ─── INSIGHTS-3 (2026-10-20): insights as notes in context, not a tab ──────────────────────────────
   The Insights-tab rows (.hub-insight-row: a bordered card each) become quiet NOTES under the tab they are
   about - Today (pace, streak, hours this week), Money (unbilled, deals) - and one line under the primary
   goal in the Plan tree. Same tone dot, figure + headline, detail, chevron; no card chrome, a hairline
   above the strip, so they read as the tab's footnotes rather than a second list. */
.hub-notes[b-9vk5ep7d9f] {
    list-style: none;
    margin: 14px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hub-note-btn[b-9vk5ep7d9f] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 7px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.hub-note-btn:hover[b-9vk5ep7d9f] {
    background: var(--theme-surface-hover, rgba(148, 163, 184, 0.12));
}

.hub-note-btn:focus-visible[b-9vk5ep7d9f] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.hub-note-dot[b-9vk5ep7d9f] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    margin-top: 7px;
    background: var(--theme-text-tertiary, #94a3b8);
}

.hub-note--good .hub-note-dot[b-9vk5ep7d9f],
.plan-goal-note--good .hub-note-dot[b-9vk5ep7d9f] { background: var(--theme-success, #16a34a); }
.hub-note--attention .hub-note-dot[b-9vk5ep7d9f],
.plan-goal-note--attention .hub-note-dot[b-9vk5ep7d9f] { background: var(--theme-warning, #d97706); }
.hub-note--warning .hub-note-dot[b-9vk5ep7d9f],
.plan-goal-note--warning .hub-note-dot[b-9vk5ep7d9f] { background: var(--theme-error, #ef4444); }

.hub-note-text[b-9vk5ep7d9f] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hub-note-headline[b-9vk5ep7d9f] {
    font-size: 0.88rem;
    color: var(--theme-text-primary, #0f172a);
}

.hub-note-headline strong[b-9vk5ep7d9f] {
    font-weight: 700;
}

.hub-note-detail[b-9vk5ep7d9f] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #475569);
}

.hub-note-chev[b-9vk5ep7d9f] {
    flex: none;
    align-self: center;
    color: var(--theme-text-tertiary, #94a3b8);
    font-size: 1rem;
    line-height: 1;
}

.is-dark .hub-notes[b-9vk5ep7d9f] { border-top-color: rgba(255, 255, 255, 0.08); }
.is-dark .hub-note-headline[b-9vk5ep7d9f] { color: #f1f5f9; }
.is-dark .hub-note-detail[b-9vk5ep7d9f] { color: #cbd5e1; }
.is-dark .hub-note-btn:hover[b-9vk5ep7d9f] { background: rgba(255, 255, 255, 0.07); }

/* The primary goal's week, under its bar in the Plan tree. */
.plan-goal-note[b-9vk5ep7d9f] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 36px 0 26px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #475569);
}

.plan-goal-note .hub-note-dot[b-9vk5ep7d9f] { margin-top: 5px; }

.plan-goal-note-headline[b-9vk5ep7d9f] {
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}

.plan-goal-note-detail[b-9vk5ep7d9f] {
    margin-left: 4px;
}

.is-dark .plan-goal-note[b-9vk5ep7d9f] { color: #cbd5e1; }
.is-dark .plan-goal-note-headline[b-9vk5ep7d9f] { color: #f1f5f9; }

@media (max-width: 560px) {
    .plan-goal-note[b-9vk5ep7d9f] { margin: 6px 0 0 0; }
}

/* NOTICE-1 (2026-10-20): the buckle has something to say - unread reminders waiting for the assistant
   (ChatState.PendingNoticeCount). A primary ring around the mark at every width and in every state but
   lit, and the small dormant mark brightens a touch. The dot (.hub-tab-unread) is already there. */
.hub-tab-buckle--notice:not(.hub-tab-buckle--active)[b-9vk5ep7d9f] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #6366f1) 38%, transparent);
}

/* MOTE-SAY-1 (2026-10-20): when the buckle wears the Mote, the mark's own arc IS the notice - the
   box-shadow ring would be a second ring around it. Other sleeves keep the ring. */
.hub-tab-buckle--notice:not(.hub-tab-buckle--active):has(svg.nts-mote)[b-9vk5ep7d9f] {
    box-shadow: none;
}

.hub-tab-buckle--notice:not(.hub-tab-buckle--active) .hub-tab-buckle-mark[b-9vk5ep7d9f] {
    filter: brightness(1.2);
}
/* /Components/ImpersonationBanner.razor.rz.scp.css */
/* ============================================
   IMPERSONATION BANNER
   Shown when admin is viewing as another user
   ============================================ */

.impersonation-banner[b-8kvuuu59wd] {
    position: sticky;
    top: 0;
    z-index: 1200; /* Above header */
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
    color: white;
    padding: 10px 16px;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
    animation: slideDown-b-8kvuuu59wd 0.3s ease-out;
}

@keyframes slideDown-b-8kvuuu59wd {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.impersonation-content[b-8kvuuu59wd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 16px;
    flex-wrap: wrap;
}

.impersonation-info[b-8kvuuu59wd] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.impersonation-info svg[b-8kvuuu59wd] {
    flex-shrink: 0;
    opacity: 0.9;
}

.impersonation-info span[b-8kvuuu59wd] {
    font-size: 0.9rem;
}

.original-user[b-8kvuuu59wd] {
    opacity: 0.8;
    font-size: 0.8rem;
    margin-left: 8px;
}

.end-impersonation-btn[b-8kvuuu59wd] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.end-impersonation-btn:hover[b-8kvuuu59wd] {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.end-impersonation-btn:active[b-8kvuuu59wd] {
    transform: translateY(0);
}

/* Mobile */
@media (max-width: 600px) {
    .impersonation-content[b-8kvuuu59wd] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .end-impersonation-btn[b-8kvuuu59wd] {
        justify-content: center;
    }
    
    .original-user[b-8kvuuu59wd] {
        display: block;
        margin-left: 0;
        margin-top: 2px;
    }
}
/* /Components/KeyboardShortcutsDialog.razor.rz.scp.css */
/* KeyboardShortcutsDialog.razor.css */

.shortcuts-overlay[b-m9ricscp2o] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn-b-m9ricscp2o 0.15s ease-out;
}

@keyframes fadeIn-b-m9ricscp2o {
    from { opacity: 0; }
    to { opacity: 1; }
}

.shortcuts-dialog[b-m9ricscp2o] {
    background: var(--theme-surface);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px var(--theme-shadow-color);
    width: 90%;
    max-width: 520px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-m9ricscp2o 0.2s ease-out;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
}

@keyframes slideUp-b-m9ricscp2o {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.shortcuts-header[b-m9ricscp2o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--theme-border);
}

.shortcuts-header h2[b-m9ricscp2o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.shortcuts-header h2 svg[b-m9ricscp2o] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.close-btn[b-m9ricscp2o] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--theme-text-secondary);
    transition: background 0.2s;
}

.close-btn:hover[b-m9ricscp2o] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-text-primary);
}

.shortcuts-content[b-m9ricscp2o] {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.shortcut-section[b-m9ricscp2o] {
    margin-bottom: 20px;
}

.shortcut-section:last-child[b-m9ricscp2o] {
    margin-bottom: 0;
}

.shortcut-section h3[b-m9ricscp2o] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-hint);
    margin: 0 0 12px 0;
}

.shortcut-list[b-m9ricscp2o] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shortcut-item[b-m9ricscp2o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--theme-surface-secondary);
    border-radius: 8px;
    gap: 16px;
}

.shortcut-description[b-m9ricscp2o] {
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.shortcut-keys[b-m9ricscp2o] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

kbd[b-m9ricscp2o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    background: var(--theme-surface-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px var(--theme-shadow-color);
}

.is-dark kbd[b-m9ricscp2o] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.shortcuts-footer[b-m9ricscp2o] {
    padding: 16px 24px;
    border-top: 1px solid var(--theme-border);
    text-align: center;
}

.tip[b-m9ricscp2o] {
    font-size: 0.8rem;
    color: var(--theme-text-hint);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .shortcuts-dialog[b-m9ricscp2o] {
        width: 95%;
        max-height: 90vh;
    }

    .shortcuts-header[b-m9ricscp2o] {
        padding: 16px 20px;
    }

    .shortcuts-content[b-m9ricscp2o] {
        padding: 12px 20px;
    }

    .shortcut-item[b-m9ricscp2o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .shortcut-keys[b-m9ricscp2o] {
        align-self: flex-end;
    }
}
/* /Components/LinkedIn/EngagementReminder.razor.rz.scp.css */
.reminder-widget[b-ok6n4oiln4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}

.reminder-widget.needs-attention[b-ok6n4oiln4] {
    background: #fef3c7;
    border-color: #fcd34d;
}

.reminder-header[b-ok6n4oiln4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reminder-icon[b-ok6n4oiln4] {
    font-size: 1.2rem;
}

.reminder-text[b-ok6n4oiln4] {
    font-size: 0.9rem;
    color: #374151;
    font-weight: 500;
}

.suggested-actions[b-ok6n4oiln4] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.suggestion-btn[b-ok6n4oiln4] {
    padding: 6px 12px;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.8rem;
    color: #374151;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.suggestion-btn:hover[b-ok6n4oiln4] {
    background: #0A66C2;
    border-color: #0A66C2;
    color: white;
}

/* Dark theme */
:global(.theme-space) .reminder-widget[b-ok6n4oiln4],
:global(.theme-winter) .reminder-widget[b-ok6n4oiln4],
:global(.theme-nature) .reminder-widget[b-ok6n4oiln4],
:global(.theme-ocean) .reminder-widget[b-ok6n4oiln4] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .reminder-widget.needs-attention[b-ok6n4oiln4],
:global(.theme-winter) .reminder-widget.needs-attention[b-ok6n4oiln4],
:global(.theme-nature) .reminder-widget.needs-attention[b-ok6n4oiln4],
:global(.theme-ocean) .reminder-widget.needs-attention[b-ok6n4oiln4] {
    background: rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.5);
}

:global(.theme-space) .reminder-text[b-ok6n4oiln4],
:global(.theme-winter) .reminder-text[b-ok6n4oiln4],
:global(.theme-nature) .reminder-text[b-ok6n4oiln4],
:global(.theme-ocean) .reminder-text[b-ok6n4oiln4] {
    color: white;
}

:global(.theme-space) .suggestion-btn[b-ok6n4oiln4],
:global(.theme-winter) .suggestion-btn[b-ok6n4oiln4],
:global(.theme-nature) .suggestion-btn[b-ok6n4oiln4],
:global(.theme-ocean) .suggestion-btn[b-ok6n4oiln4] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}
/* /Components/LinkedIn/EngagementTimeline.razor.rz.scp.css */
.engagement-timeline[b-01q5vj7trb] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.timeline-header[b-01q5vj7trb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
}

.timeline-header h4[b-01q5vj7trb] {
    margin: 0;
    font-size: 0.95rem;
    color: #1f2937;
}

.add-btn[b-01q5vj7trb] {
    background: #0A66C2;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.add-btn:hover[b-01q5vj7trb] {
    background: #004182;
}

.timeline-list[b-01q5vj7trb] {
    padding: 8px 0;
}

.timeline-item[b-01q5vj7trb] {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    transition: background 0.2s;
}

.timeline-item:hover[b-01q5vj7trb] {
    background: #f9fafb;
}

.item-icon[b-01q5vj7trb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: #f3f4f6;
}

.item-icon.comment[b-01q5vj7trb] { background: #dbeafe; }
.item-icon.like[b-01q5vj7trb] { background: #dcfce7; }
.item-icon.share[b-01q5vj7trb] { background: #fef3c7; }
.item-icon.message[b-01q5vj7trb] { background: #e0e7ff; }
.item-icon.connectionrequest[b-01q5vj7trb] { background: #fce7f3; }
.item-icon.meeting[b-01q5vj7trb] { background: #cffafe; }
.item-icon.call[b-01q5vj7trb] { background: #d1fae5; }

.item-content[b-01q5vj7trb] {
    flex: 1;
    min-width: 0;
}

.item-header[b-01q5vj7trb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.item-type[b-01q5vj7trb] {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2937;
}

.item-date[b-01q5vj7trb] {
    font-size: 0.75rem;
    color: #9ca3af;
}

.item-description[b-01q5vj7trb] {
    margin: 0 0 4px;
    font-size: 0.85rem;
    color: #4b5563;
}

.item-notes[b-01q5vj7trb] {
    margin: 0 0 4px;
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
}

.item-link[b-01q5vj7trb] {
    font-size: 0.8rem;
    color: #0A66C2;
    text-decoration: none;
}

.item-link:hover[b-01q5vj7trb] {
    text-decoration: underline;
}

.show-more-btn[b-01q5vj7trb] {
    display: block;
    width: 100%;
    padding: 12px;
    background: none;
    border: none;
    border-top: 1px solid #f3f4f6;
    color: #0A66C2;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.show-more-btn:hover[b-01q5vj7trb] {
    background: #f9fafb;
}

.empty-state[b-01q5vj7trb] {
    text-align: center;
    padding: 32px 16px;
}

.empty-icon[b-01q5vj7trb] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 8px;
}

.empty-state p[b-01q5vj7trb] {
    margin: 0 0 12px;
    color: #6b7280;
}

.action-btn[b-01q5vj7trb] {
    padding: 8px 16px;
    background: #0A66C2;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

/* Dark theme */
:global(.theme-space) .engagement-timeline[b-01q5vj7trb],
:global(.theme-winter) .engagement-timeline[b-01q5vj7trb],
:global(.theme-nature) .engagement-timeline[b-01q5vj7trb],
:global(.theme-ocean) .engagement-timeline[b-01q5vj7trb] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .timeline-header h4[b-01q5vj7trb],
:global(.theme-winter) .timeline-header h4[b-01q5vj7trb],
:global(.theme-nature) .timeline-header h4[b-01q5vj7trb],
:global(.theme-ocean) .timeline-header h4[b-01q5vj7trb],
:global(.theme-space) .item-type[b-01q5vj7trb],
:global(.theme-winter) .item-type[b-01q5vj7trb],
:global(.theme-nature) .item-type[b-01q5vj7trb],
:global(.theme-ocean) .item-type[b-01q5vj7trb] {
    color: white;
}

:global(.theme-space) .timeline-item:hover[b-01q5vj7trb],
:global(.theme-winter) .timeline-item:hover[b-01q5vj7trb],
:global(.theme-nature) .timeline-item:hover[b-01q5vj7trb],
:global(.theme-ocean) .timeline-item:hover[b-01q5vj7trb] {
    background: rgba(255, 255, 255, 0.05);
}
/* /Components/LinkedIn/LinkedInProfileCard.razor.rz.scp.css */
.linkedin-card[b-ts9k3yutx9] {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header[b-ts9k3yutx9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.card-header:hover[b-ts9k3yutx9] {
    background: #f9fafb;
}

.linkedin-icon[b-ts9k3yutx9] {
    color: #0A66C2;
    display: flex;
}

.header-content[b-ts9k3yutx9] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-title[b-ts9k3yutx9] {
    font-weight: 600;
    color: #1f2937;
}

.connection-badge[b-ts9k3yutx9] {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.connection-badge.connected[b-ts9k3yutx9] {
    background: #dcfce7;
    color: #166534;
}

.connection-badge.pending[b-ts9k3yutx9] {
    background: #fef3c7;
    color: #92400e;
}

.connection-badge.notconnected[b-ts9k3yutx9] {
    background: #f3f4f6;
    color: #6b7280;
}

.expand-icon[b-ts9k3yutx9] {
    color: #9ca3af;
    font-size: 0.8rem;
}

.card-content[b-ts9k3yutx9] {
    padding: 0 16px 16px;
    border-top: 1px solid #f3f4f6;
}

/* Profile Header */
.profile-header[b-ts9k3yutx9] {
    display: flex;
    gap: 14px;
    padding: 16px 0;
}

.profile-image[b-ts9k3yutx9] {
    flex-shrink: 0;
}

.profile-image img[b-ts9k3yutx9] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.image-placeholder[b-ts9k3yutx9] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0A66C2, #0077B5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.2rem;
}

.profile-info[b-ts9k3yutx9] {
    flex: 1;
    min-width: 0;
}

.profile-name[b-ts9k3yutx9] {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: #1f2937;
}

.profile-headline[b-ts9k3yutx9] {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.4;
}

.profile-company[b-ts9k3yutx9],
.profile-location[b-ts9k3yutx9] {
    margin: 0;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Stats */
.profile-stats[b-ts9k3yutx9] {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}

.stat[b-ts9k3yutx9] {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: #f9fafb;
    border-radius: 8px;
}

.stat-value[b-ts9k3yutx9] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

.stat-value.hot[b-ts9k3yutx9] { color: #dc2626; }
.stat-value.warm[b-ts9k3yutx9] { color: #f59e0b; }
.stat-value.cold[b-ts9k3yutx9] { color: #6b7280; }

.stat-label[b-ts9k3yutx9] {
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Last Engagement */
.last-engagement[b-ts9k3yutx9] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 0.85rem;
}

.last-engagement .label[b-ts9k3yutx9] {
    color: #6b7280;
}

.last-engagement .value[b-ts9k3yutx9] {
    color: #1f2937;
    font-weight: 500;
}

/* Action Buttons */
.action-buttons[b-ts9k3yutx9] {
    display: flex;
    gap: 8px;
    padding: 12px 0;
}

.action-btn[b-ts9k3yutx9] {
    flex: 1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
    border: 1px solid #e5e7eb;
    background: white;
    color: #374151;
    font-family: inherit;
}

.action-btn:hover[b-ts9k3yutx9] {
    background: #f3f4f6;
}

.action-btn.primary[b-ts9k3yutx9] {
    background: #0A66C2;
    border-color: #0A66C2;
    color: white;
}

.action-btn.primary:hover[b-ts9k3yutx9] {
    background: #004182;
}

.action-btn:disabled[b-ts9k3yutx9] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Talking Points */
.talking-points[b-ts9k3yutx9] {
    padding: 12px 0;
}

.talking-points h5[b-ts9k3yutx9] {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: #1f2937;
}

.talking-point[b-ts9k3yutx9] {
    padding: 8px 12px;
    background: #f0f9ff;
    border-left: 3px solid #0A66C2;
    border-radius: 0 6px 6px 0;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #1f2937;
}

/* AI Insights */
.ai-insights[b-ts9k3yutx9] {
    padding: 12px;
    background: linear-gradient(135deg, #faf5ff, #f5f3ff);
    border-radius: 8px;
    border: 1px solid #e9d5ff;
}

.ai-insights h5[b-ts9k3yutx9] {
    margin: 0 0 8px;
    font-size: 0.85rem;
    color: #7c3aed;
}

.ai-insights p[b-ts9k3yutx9] {
    margin: 0;
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.5;
}

.insight-date[b-ts9k3yutx9] {
    display: block;
    margin-top: 8px;
    font-size: 0.7rem;
    color: #9ca3af;
}

/* Setup Prompt */
.setup-prompt[b-ts9k3yutx9] {
    text-align: center;
    padding: 24px 16px;
}

.setup-prompt p[b-ts9k3yutx9] {
    margin: 0 0 12px;
    color: #6b7280;
}

/* Dark Theme Support */
:global(.theme-space) .linkedin-card[b-ts9k3yutx9],
:global(.theme-winter) .linkedin-card[b-ts9k3yutx9],
:global(.theme-nature) .linkedin-card[b-ts9k3yutx9],
:global(.theme-ocean) .linkedin-card[b-ts9k3yutx9] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .header-title[b-ts9k3yutx9],
:global(.theme-winter) .header-title[b-ts9k3yutx9],
:global(.theme-nature) .header-title[b-ts9k3yutx9],
:global(.theme-ocean) .header-title[b-ts9k3yutx9],
:global(.theme-space) .profile-name[b-ts9k3yutx9],
:global(.theme-winter) .profile-name[b-ts9k3yutx9],
:global(.theme-nature) .profile-name[b-ts9k3yutx9],
:global(.theme-ocean) .profile-name[b-ts9k3yutx9] {
    color: white;
}

:global(.theme-space) .card-header:hover[b-ts9k3yutx9],
:global(.theme-winter) .card-header:hover[b-ts9k3yutx9],
:global(.theme-nature) .card-header:hover[b-ts9k3yutx9],
:global(.theme-ocean) .card-header:hover[b-ts9k3yutx9] {
    background: rgba(255, 255, 255, 0.05);
}

:global(.theme-space) .stat[b-ts9k3yutx9],
:global(.theme-winter) .stat[b-ts9k3yutx9],
:global(.theme-nature) .stat[b-ts9k3yutx9],
:global(.theme-ocean) .stat[b-ts9k3yutx9] {
    background: rgba(255, 255, 255, 0.05);
}

:global(.theme-space) .stat-value[b-ts9k3yutx9],
:global(.theme-winter) .stat-value[b-ts9k3yutx9],
:global(.theme-nature) .stat-value[b-ts9k3yutx9],
:global(.theme-ocean) .stat-value[b-ts9k3yutx9] {
    color: white;
}
/* /Components/LinkedIn/LinkedInSection.razor.rz.scp.css */
.linkedin-section[b-85j2qbvwc8] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.loading-state[b-85j2qbvwc8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: #6b7280;
}

.loading-spinner[b-85j2qbvwc8] {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #0A66C2;
    border-radius: 50%;
    animation: spin-b-85j2qbvwc8 1s linear infinite;
}

@keyframes spin-b-85j2qbvwc8 {
    to { transform: rotate(360deg); }
}
/* /Components/LinkedIn/LinkedInSetupDialog.razor.rz.scp.css */
.form-group[b-dtkhrtcgex] {
    margin-bottom: 12px;
}

.form-group label[b-dtkhrtcgex] {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--theme-text-secondary);
}

.form-group input[b-dtkhrtcgex],
.form-group textarea[b-dtkhrtcgex] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    min-height: 38px;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
}

.form-group input:focus[b-dtkhrtcgex],
.form-group textarea:focus[b-dtkhrtcgex] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.15);
}

.form-group textarea[b-dtkhrtcgex] {
    min-height: 80px;
    resize: vertical;
}

.form-row[b-dtkhrtcgex] {
    display: flex;
    gap: 12px;
}

.form-row .form-group[b-dtkhrtcgex] {
    flex: 1;
}

.status-options[b-dtkhrtcgex] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.status-btn[b-dtkhrtcgex] {
    padding: 8px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-surface);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--theme-text-primary);
    transition: all 0.2s;
}

.status-btn:hover[b-dtkhrtcgex] {
    background: var(--theme-hover);
}

.status-btn.selected[b-dtkhrtcgex] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    border-color: var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
}

@media (max-width: 480px) {
    .form-row[b-dtkhrtcgex] {
        flex-direction: column;
        gap: 0;
    }

    .status-options[b-dtkhrtcgex] {
        flex-direction: column;
    }
}
/* /Components/LinkedIn/QuickAddFromLinkedIn.razor.rz.scp.css */
/* ============================================
   LINKEDIN QUICK ADD - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.linkedin-form[b-xl2kkwvh96] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.linkedin-subtitle[b-xl2kkwvh96] {
    margin: 0;
    font-size: 0.875rem;
    color: #6b7280;
}

.is-dark .linkedin-subtitle[b-xl2kkwvh96] {
    color: #94a3b8;
}

.contact-form-row[b-xl2kkwvh96] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 480px) {
    .contact-form-row[b-xl2kkwvh96] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.contact-form-group[b-xl2kkwvh96] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form-group label[b-xl2kkwvh96] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.required-indicator[b-xl2kkwvh96] {
    color: #ef4444;
}

.is-dark .contact-form-group label[b-xl2kkwvh96] {
    color: rgba(255, 255, 255, 0.9);
}

/* Form Inputs */
.contact-form-input[b-xl2kkwvh96],
.contact-form-select[b-xl2kkwvh96] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.15s ease;
    background: white;
    color: #1e293b;
    box-sizing: border-box;
    font-family: inherit;
}

.contact-form-select[b-xl2kkwvh96] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

.is-dark .contact-form-input[b-xl2kkwvh96],
.is-dark .contact-form-select[b-xl2kkwvh96] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.is-dark .contact-form-select[b-xl2kkwvh96] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

/* Focus states */
.contact-form-input:focus[b-xl2kkwvh96],
.contact-form-select:focus[b-xl2kkwvh96] {
    outline: none;
    border-color: #0A66C2;
    box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.15);
}

.is-dark .contact-form-input:focus[b-xl2kkwvh96],
.is-dark .contact-form-select:focus[b-xl2kkwvh96] {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

/* Placeholder styling */
.contact-form-input[b-xl2kkwvh96]::placeholder {
    color: #9ca3af;
}

.is-dark .contact-form-input[b-xl2kkwvh96]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Textarea */
.linkedin-textarea[b-xl2kkwvh96] {
    min-height: 80px;
    resize: vertical;
}

/* URL Input Row */
.linkedin-url-row[b-xl2kkwvh96] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.linkedin-url-row .contact-form-input[b-xl2kkwvh96] {
    flex: 1;
}

/* Parsed Badge */
.linkedin-parsed-badge[b-xl2kkwvh96] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(10, 102, 194, 0.08);
    color: #0A66C2;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    width: fit-content;
}

.is-dark .linkedin-parsed-badge[b-xl2kkwvh96] {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
}
/* /Components/LinkedIn/RecordEngagementDialog.razor.rz.scp.css */
/* ============================================
   RECORD ENGAGEMENT DIALOG STYLES
   ============================================ */

/* Form Elements */
.form-group[b-h0hd172wvj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.form-group label[b-h0hd172wvj] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-group input[b-h0hd172wvj],
.form-group textarea[b-h0hd172wvj] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, var(--theme-border));
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    font-family: inherit;
    background: var(--theme-input-bg, var(--theme-surface));
    color: var(--theme-input-text, var(--theme-text-primary));
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus[b-h0hd172wvj],
.form-group textarea:focus[b-h0hd172wvj] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.form-group input[b-h0hd172wvj]::placeholder,
.form-group textarea[b-h0hd172wvj]::placeholder {
    color: var(--theme-text-hint);
}

.form-group textarea[b-h0hd172wvj] {
    min-height: 80px;
    resize: vertical;
}

/* Engagement Type Grid */
.type-grid[b-h0hd172wvj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.type-btn[b-h0hd172wvj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-surface);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.type-btn:hover[b-h0hd172wvj] {
    background: var(--theme-surface-secondary);
}

.type-btn.selected[b-h0hd172wvj] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-color: var(--theme-primary);
}

.type-icon[b-h0hd172wvj] {
    font-size: 1.3rem;
}

.type-label[b-h0hd172wvj] {
    font-size: 0.7rem;
    color: var(--theme-text-muted);
}

.type-btn.selected .type-label[b-h0hd172wvj] {
    color: var(--theme-primary-ink, var(--theme-primary));
    font-weight: 500;
}

/* Mobile */
@media (max-width: 480px) {
    .type-btn[b-h0hd172wvj] {
        padding: 10px 6px;
    }

    .type-icon[b-h0hd172wvj] {
        font-size: 1.2rem;
    }

    .type-label[b-h0hd172wvj] {
        font-size: 0.6rem;
    }
}
/* /Components/LowCreditAlert.razor.rz.scp.css */
/* Low Credit Alert Bar */
.low-credit-alert[b-i25m6a1k1t] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    color: #78350f;
    padding: 10px 16px;
    border-bottom: 2px solid #f59e0b;
    animation: slideDown-b-i25m6a1k1t 0.3s ease-out;
}

@keyframes slideDown-b-i25m6a1k1t {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Dark theme variants */
.low-credit-alert.theme-space[b-i25m6a1k1t],
.low-credit-alert.theme-winter[b-i25m6a1k1t],
.low-credit-alert.theme-nature[b-i25m6a1k1t],
.low-credit-alert.theme-ocean[b-i25m6a1k1t],
.low-credit-alert.theme-mystic[b-i25m6a1k1t],
.low-credit-alert.theme-tron[b-i25m6a1k1t] {
    background: linear-gradient(135deg, #451a03 0%, #1c1917 100%);
    color: #fef3c7;
    border-bottom-color: #b45309;
}

.alert-content[b-i25m6a1k1t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 16px;
    flex-wrap: wrap;
}

.alert-message[b-i25m6a1k1t] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 200px;
}

.alert-icon[b-i25m6a1k1t] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.alert-text[b-i25m6a1k1t] {
    font-size: 0.9rem;
    line-height: 1.4;
}

.alert-text strong[b-i25m6a1k1t] {
    font-weight: 600;
}

.critical-warning[b-i25m6a1k1t] {
    color: #b45309;
    font-weight: 600;
}

.low-credit-alert.theme-space .critical-warning[b-i25m6a1k1t],
.low-credit-alert.theme-winter .critical-warning[b-i25m6a1k1t],
.low-credit-alert.theme-nature .critical-warning[b-i25m6a1k1t],
.low-credit-alert.theme-ocean .critical-warning[b-i25m6a1k1t],
.low-credit-alert.theme-mystic .critical-warning[b-i25m6a1k1t],
.low-credit-alert.theme-tron .critical-warning[b-i25m6a1k1t] {
    color: #fbbf24;
}

.alert-actions[b-i25m6a1k1t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Alert Buttons */
.alert-btn[b-i25m6a1k1t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.alert-btn-primary[b-i25m6a1k1t] {
    background: #b45309;
    color: white;
}

.alert-btn-primary:hover[b-i25m6a1k1t] {
    background: #92400e;
    transform: translateY(-1px);
}

.low-credit-alert.theme-space .alert-btn-primary[b-i25m6a1k1t],
.low-credit-alert.theme-winter .alert-btn-primary[b-i25m6a1k1t],
.low-credit-alert.theme-nature .alert-btn-primary[b-i25m6a1k1t],
.low-credit-alert.theme-ocean .alert-btn-primary[b-i25m6a1k1t],
.low-credit-alert.theme-mystic .alert-btn-primary[b-i25m6a1k1t],
.low-credit-alert.theme-tron .alert-btn-primary[b-i25m6a1k1t] {
    background: #f59e0b;
    color: #1c1917;
}

.alert-btn-dismiss[b-i25m6a1k1t] {
    background: rgba(120, 53, 15, 0.1);
    color: #78350f;
    padding: 6px;
    border-radius: 6px;
}

.alert-btn-dismiss:hover[b-i25m6a1k1t] {
    background: rgba(120, 53, 15, 0.2);
}

.low-credit-alert.theme-space .alert-btn-dismiss[b-i25m6a1k1t],
.low-credit-alert.theme-winter .alert-btn-dismiss[b-i25m6a1k1t],
.low-credit-alert.theme-nature .alert-btn-dismiss[b-i25m6a1k1t],
.low-credit-alert.theme-ocean .alert-btn-dismiss[b-i25m6a1k1t],
.low-credit-alert.theme-mystic .alert-btn-dismiss[b-i25m6a1k1t],
.low-credit-alert.theme-tron .alert-btn-dismiss[b-i25m6a1k1t] {
    background: rgba(255, 255, 255, 0.15);
    color: #fef3c7;
}

.low-credit-alert.theme-space .alert-btn-dismiss:hover[b-i25m6a1k1t],
.low-credit-alert.theme-winter .alert-btn-dismiss:hover[b-i25m6a1k1t],
.low-credit-alert.theme-nature .alert-btn-dismiss:hover[b-i25m6a1k1t],
.low-credit-alert.theme-ocean .alert-btn-dismiss:hover[b-i25m6a1k1t],
.low-credit-alert.theme-mystic .alert-btn-dismiss:hover[b-i25m6a1k1t],
.low-credit-alert.theme-tron .alert-btn-dismiss:hover[b-i25m6a1k1t] {
    background: rgba(255, 255, 255, 0.25);
}

/* Responsive */
@media (max-width: 640px) {
    .low-credit-alert[b-i25m6a1k1t] {
        padding: 12px;
    }

    .alert-content[b-i25m6a1k1t] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .alert-message[b-i25m6a1k1t] {
        justify-content: center;
        text-align: center;
    }

    .alert-actions[b-i25m6a1k1t] {
        justify-content: center;
    }

    .alert-btn-primary[b-i25m6a1k1t] {
        flex: 1;
    }
}
/* /Components/Memories/AwakeningPlayback.razor.rz.scp.css */
/* ============================================
   AWAKENING PLAYBACK — Cinematic Replay Engine
   Director's Cut style replay of the user's
   authentic awakening journey
   ============================================ */

/* ---- Base Cinema Container ---- */
.playback-cinema[b-a8km1wbe7p] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: radial-gradient(ellipse at center bottom, #1a0e2e 0%, #0a0612 50%, #000 100%);
    display: flex;
    flex-direction: column;
    color: #f0e6d2;
    font-family: inherit;
    overflow: hidden;
}

/* ---- Particle System (reuses cave visual language) ---- */
.playback-particles[b-a8km1wbe7p] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.playback-particle[b-a8km1wbe7p] {
    position: absolute;
    bottom: -10px;
    left: var(--x, 50%);
    width: 3px;
    height: 3px;
    background: rgba(251, 191, 36, 0.5);
    border-radius: 50%;
    animation: playback-particle-float-b-a8km1wbe7p 8s ease-in infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes playback-particle-float-b-a8km1wbe7p {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 0.7; }
    100% { transform: translateY(-100vh) translateX(var(--drift, 0px)) scale(0); opacity: 0; }
}

/* ---- Controls Bar (top) ---- */
.playback-controls-bar[b-a8km1wbe7p] {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(251, 191, 36, 0.15);
}

.playback-ctrl-btn[b-a8km1wbe7p] {
    background: none;
    border: none;
    color: rgba(240, 230, 210, 0.7);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.playback-ctrl-btn:hover[b-a8km1wbe7p] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

.playback-title-bar[b-a8km1wbe7p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.playback-cinema-badge[b-a8km1wbe7p] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #fbbf24;
    text-transform: uppercase;
}

.playback-speed-controls[b-a8km1wbe7p] {
    display: flex;
    gap: 0.25rem;
}

.playback-speed-btn[b-a8km1wbe7p] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(240, 230, 210, 0.6);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.2s;
}

.playback-speed-btn:hover[b-a8km1wbe7p] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.playback-speed-btn.active[b-a8km1wbe7p] {
    background: rgba(251, 191, 36, 0.25);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

/* ---- Skip Cluster (Skip + To Finale) ---- */
/* M-V-5 (2026-05): two-button skip group anchored bottom-right. The cluster
   wrapper holds both Skip-scene and Skip-to-finale so positioning stays in one
   place; individual buttons keep their pill shape. */
.playback-skip-cluster[b-a8km1wbe7p] {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 20;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    animation: skip-btn-appear-b-a8km1wbe7p 0.4s ease 1.5s forwards;
}

.playback-skip-btn[b-a8km1wbe7p] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(240, 230, 210, 0.7);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(4px);
}

.playback-skip-btn:hover[b-a8km1wbe7p] {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: rgba(251, 191, 36, 0.95);
}

/* M-V-5: secondary action — slightly heavier border so it reads as a meaningful
   alternative to plain Skip without competing with the cinema content. */
.playback-skip-finale-btn[b-a8km1wbe7p] {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
    color: rgba(251, 191, 36, 0.85);
}

.playback-skip-finale-btn:hover[b-a8km1wbe7p] {
    background: rgba(251, 191, 36, 0.22);
    border-color: rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

/* M-V-4 (2026-05): "illustrative" microcopy badge during wrong-attempt replay.
   Soft, non-competing — the user should still feel the cinematic moment, the
   note just keeps us honest about what's authentic vs. dramatized. */
.playback-fidelity-note[b-a8km1wbe7p] {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    font-style: italic;
    letter-spacing: 0.02em;
    color: rgba(240, 230, 210, 0.45);
    opacity: 0.85;
}

/* M-F-5 (2026-05): visually-hidden helper for the aria-live phase narration.
   Standard screen-reader-only pattern — clipped to 1px square, content stays
   in the accessibility tree but takes no visual space. */
.visually-hidden[b-a8km1wbe7p] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes skip-btn-appear-b-a8km1wbe7p {
    to { opacity: 1; }
}

/* ---- Progress Bar ---- */
.playback-progress-bar[b-a8km1wbe7p] {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 10;
}

.playback-progress-fill[b-a8km1wbe7p] {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

.playback-progress-phases[b-a8km1wbe7p] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.playback-phase-marker[b-a8km1wbe7p] {
    position: absolute;
    top: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
    transition: all 0.3s;
}

.playback-phase-marker.completed[b-a8km1wbe7p] {
    background: #fbbf24;
    border-color: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}

/* ---- Viewport (main content area) ---- */
.playback-viewport[b-a8km1wbe7p] {
    flex: 1;
    display: flex;
    align-items: safe center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

.playback-scene[b-a8km1wbe7p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    width: 100%;
    gap: 1rem;
}

/* ---- Shared Animation ---- */
.fade-in[b-a8km1wbe7p] {
    animation: playback-fade-in-b-a8km1wbe7p 0.8s ease forwards;
}

@keyframes playback-fade-in-b-a8km1wbe7p {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   PHASE: Intro
   ============================================ */
.playback-intro-context[b-a8km1wbe7p] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.playback-time-badge[b-a8km1wbe7p],
.playback-date-badge[b-a8km1wbe7p] {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    letter-spacing: 0.02em;
}

.playback-hero-text[b-a8km1wbe7p] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #f0e6d2;
    margin: 0;
    animation: playback-title-glow-b-a8km1wbe7p 3s ease-in-out infinite alternate;
}

@keyframes playback-title-glow-b-a8km1wbe7p {
    from { text-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
    to { text-shadow: 0 0 40px rgba(251, 191, 36, 0.4); }
}

.playback-hero-sub[b-a8km1wbe7p] {
    font-size: 1rem;
    color: rgba(240, 230, 210, 0.6);
    margin: 0;
}

.playback-intro-companion[b-a8km1wbe7p] {
    margin: 1.5rem 0;
    animation: playback-egg-float-b-a8km1wbe7p 3s ease-in-out infinite;
}

@keyframes playback-egg-float-b-a8km1wbe7p {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.playback-intro-stats[b-a8km1wbe7p] {
    display: flex;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: rgba(240, 230, 210, 0.5);
}

.playback-stat-divider[b-a8km1wbe7p] {
    color: rgba(251, 191, 36, 0.4);
}

/* ============================================
   PHASE: Discovery (keystroke replay)
   ============================================ */
.playback-prompt[b-a8km1wbe7p] {
    font-size: 1.1rem;
    color: rgba(240, 230, 210, 0.7);
    font-style: italic;
    margin: 0;
}

.playback-egg-container[b-a8km1wbe7p] {
    position: relative;
    margin: 1.5rem 0;
}

.playback-egg-glow[b-a8km1wbe7p] {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.playback-egg-glow.awakening-glow[b-a8km1wbe7p] {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%);
    animation: playback-glow-pulse-b-a8km1wbe7p 1.5s ease-in-out infinite;
}

@keyframes playback-glow-pulse-b-a8km1wbe7p {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

.playback-input-display[b-a8km1wbe7p] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 12px;
    min-width: 280px;
    max-width: 400px;
}

.playback-typed-text[b-a8km1wbe7p] {
    font-size: 1.2rem;
    font-family: 'Courier New', monospace;
    color: #fbbf24;
    letter-spacing: 0.05em;
    white-space: pre;
}

.playback-cursor[b-a8km1wbe7p] {
    color: #fbbf24;
    animation: playback-cursor-blink-b-a8km1wbe7p 0.8s step-end infinite;
    margin-left: 1px;
}

@keyframes playback-cursor-blink-b-a8km1wbe7p {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.playback-feedback[b-a8km1wbe7p] {
    font-size: 0.9rem;
    color: rgba(240, 230, 210, 0.6);
    font-style: italic;
    margin: 0;
}

.playback-feedback.success[b-a8km1wbe7p] {
    font-size: 1.5rem;
    font-style: normal;
}

:global(.playback-flash-red)[b-a8km1wbe7p] {
    animation: playback-flash-red-anim-b-a8km1wbe7p 0.4s ease;
}

@keyframes playback-flash-red-anim-b-a8km1wbe7p {
    0% { color: #fbbf24; }
    30% { color: #ef4444; }
    100% { color: rgba(240, 230, 210, 0.3); }
}

/* ============================================
   PHASE: Awakening (egg hatch animation)
   ============================================ */
.playback-awakening[b-a8km1wbe7p] {
    position: relative;
}

.playback-egg-container.shaking[b-a8km1wbe7p] {
    animation: playback-shake-b-a8km1wbe7p 0.4s ease-in-out infinite;
}

@keyframes playback-shake-b-a8km1wbe7p {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-4px) rotate(-2deg); }
    75% { transform: translateX(4px) rotate(2deg); }
}

.playback-egg-container.cracking[b-a8km1wbe7p] {
    animation: playback-crack-shake-b-a8km1wbe7p 0.3s ease-in-out infinite;
}

@keyframes playback-crack-shake-b-a8km1wbe7p {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-6px) rotate(-3deg); }
    75% { transform: translateX(6px) rotate(3deg); }
}

.playback-cracks[b-a8km1wbe7p] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.playback-cracks span[b-a8km1wbe7p] {
    position: absolute;
    background: rgba(251, 191, 36, 0.8);
    border-radius: 2px;
}

.playback-cracks span:nth-child(1)[b-a8km1wbe7p] {
    top: 30%; left: 40%; width: 20%; height: 2px; transform: rotate(15deg);
    animation: playback-crack-grow-b-a8km1wbe7p 0.5s ease-out forwards;
}

.playback-cracks span:nth-child(2)[b-a8km1wbe7p] {
    top: 45%; left: 55%; width: 15%; height: 2px; transform: rotate(-25deg);
    animation: playback-crack-grow-b-a8km1wbe7p 0.5s ease-out 0.2s forwards;
}

.playback-cracks span:nth-child(3)[b-a8km1wbe7p] {
    top: 55%; left: 35%; width: 18%; height: 2px; transform: rotate(35deg);
    animation: playback-crack-grow-b-a8km1wbe7p 0.5s ease-out 0.4s forwards;
}

.playback-cracks span:nth-child(4)[b-a8km1wbe7p] {
    top: 40%; left: 50%; width: 12%; height: 2px; transform: rotate(-10deg);
    animation: playback-crack-grow-b-a8km1wbe7p 0.5s ease-out 0.6s forwards;
}

@keyframes playback-crack-grow-b-a8km1wbe7p {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
}

.playback-egg-container.burst[b-a8km1wbe7p] {
    animation: playback-burst-shake-b-a8km1wbe7p 0.15s ease-in-out 3;
}

@keyframes playback-burst-shake-b-a8km1wbe7p {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.playback-egg-container.revealed[b-a8km1wbe7p] {
    animation: playback-reveal-b-a8km1wbe7p 0.6s ease-out forwards;
}

@keyframes playback-reveal-b-a8km1wbe7p {
    0% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.playback-burst[b-a8km1wbe7p] {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.6) 0%, transparent 70%);
    animation: playback-burst-expand-b-a8km1wbe7p 1s ease-out forwards;
    pointer-events: none;
}

@keyframes playback-burst-expand-b-a8km1wbe7p {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

.playback-burst-particles[b-a8km1wbe7p] {
    position: absolute;
    pointer-events: none;
}

.playback-burst-spark[b-a8km1wbe7p] {
    position: absolute;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: #fbbf24;
    border-radius: 50%;
    animation: playback-spark-fly-b-a8km1wbe7p 0.8s ease-out forwards;
    transform: rotate(var(--angle, 0deg)) translateX(0);
}

@keyframes playback-spark-fly-b-a8km1wbe7p {
    0% { transform: rotate(var(--angle)) translateX(20px); opacity: 1; }
    100% { transform: rotate(var(--angle)) translateX(var(--distance, 100px)); opacity: 0; }
}

.playback-reveal-text[b-a8km1wbe7p] {
    margin-top: 1rem;
}

.playback-first-words[b-a8km1wbe7p] {
    font-size: 1.3rem;
    font-style: italic;
    color: rgba(240, 230, 210, 0.9);
    margin: 0;
}

.playback-companion-speech[b-a8km1wbe7p] {
    font-size: 1rem;
    color: rgba(240, 230, 210, 0.8);
    margin: 0.5rem 0;
    line-height: 1.6;
}

/* ============================================
   PHASE: Naming
   ============================================ */
.playback-hesitation-note[b-a8km1wbe7p] {
    font-size: 0.8rem;
    color: rgba(251, 191, 36, 0.5);
    margin: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.playback-pause-icon[b-a8km1wbe7p] {
    font-size: 0.7rem;
}

.playback-name-reveal[b-a8km1wbe7p] {
    text-align: center;
}

.playback-name-big[b-a8km1wbe7p] {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fbbf24;
    margin: 0.5rem 0;
    animation: playback-name-glow-b-a8km1wbe7p 2s ease-in-out infinite alternate;
}

@keyframes playback-name-glow-b-a8km1wbe7p {
    from { text-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
    to { text-shadow: 0 0 30px rgba(251, 191, 36, 0.6); }
}

/* ============================================
   PHASE: Finale (stats + replay option)
   ============================================ */
.playback-finale-companion[b-a8km1wbe7p] {
    margin-bottom: 0.75rem;
}

.playback-finale-title[b-a8km1wbe7p] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #f0e6d2;
    margin: 0 0 1rem;
}

.playback-stats-grid[b-a8km1wbe7p] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    width: 100%;
    max-width: 400px;
    margin-bottom: 1rem;
}

.playback-stat-card[b-a8km1wbe7p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 12px;
}

.playback-stat-value[b-a8km1wbe7p] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fbbf24;
}

.playback-stat-label[b-a8km1wbe7p] {
    font-size: 0.7rem;
    color: rgba(240, 230, 210, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.playback-finale-quote[b-a8km1wbe7p] {
    font-size: 0.88rem;
    color: rgba(240, 230, 210, 0.6);
    font-style: italic;
    margin: 0 0 1rem;
    max-width: 350px;
}

.playback-finale-actions[b-a8km1wbe7p] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Pause Overlay ---- */
.playback-pause-overlay[b-a8km1wbe7p] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    color: rgba(240, 230, 210, 0.7);
    font-size: 0.85rem;
}

.playback-pause-icon[b-a8km1wbe7p] {
    color: #fbbf24;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.5));
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .playback-hero-text[b-a8km1wbe7p] {
        font-size: 1.8rem;
    }

    .playback-stats-grid[b-a8km1wbe7p] {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .playback-controls-bar[b-a8km1wbe7p] {
        padding: 0.5rem 0.75rem;
    }

    .playback-name-big[b-a8km1wbe7p] {
        font-size: 1.6rem;
    }
}
/* /Components/Memories/EvolutionPlayback.razor.rz.scp.css */
/* ============================================
   EVOLUTION PLAYBACK — Cinematic tier-up replay
   Sibling of AwakeningPlayback. Same cinema chrome,
   but accent is driven by the companion's own color
   via --evo-accent (color-mix for translucent tints),
   and it's JS-free (pure C#-timed phases).
   ============================================ */

.evo-playback-cinema[b-1gp9dsst80] {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background:
        radial-gradient(ellipse at center bottom,
            color-mix(in srgb, var(--evo-accent, #667eea) 28%, #0a0612) 0%,
            #0a0612 55%, #000 100%);
    display: flex;
    flex-direction: column;
    color: #f0e6d2;
    font-family: inherit;
    overflow: hidden;
}

/* ---- Particles ---- */
.evo-playback-particles[b-1gp9dsst80] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.evo-playback-particle[b-1gp9dsst80] {
    position: absolute;
    bottom: -10px;
    left: var(--x, 50%);
    width: 3px;
    height: 3px;
    background: color-mix(in srgb, var(--evo-accent, #667eea) 55%, transparent);
    border-radius: 50%;
    animation: evo-particle-float-b-1gp9dsst80 8s ease-in infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes evo-particle-float-b-1gp9dsst80 {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10% { opacity: 0.7; }
    100% { transform: translateY(-100vh) translateX(var(--drift, 0px)) scale(0); opacity: 0; }
}

/* ---- Controls Bar ---- */
.evo-playback-controls-bar[b-1gp9dsst80] {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--evo-accent, #667eea) 18%, transparent);
}

.evo-playback-ctrl-btn[b-1gp9dsst80] {
    background: none;
    border: none;
    color: rgba(240, 230, 210, 0.7);
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.evo-playback-ctrl-btn:hover[b-1gp9dsst80] {
    color: var(--evo-accent, #fbbf24);
    background: color-mix(in srgb, var(--evo-accent, #667eea) 12%, transparent);
}

.evo-playback-title-bar[b-1gp9dsst80] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.evo-playback-cinema-badge[b-1gp9dsst80] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--evo-accent, #fbbf24);
    text-transform: uppercase;
}

.evo-playback-speed-controls[b-1gp9dsst80] {
    display: flex;
    gap: 0.25rem;
}

.evo-playback-speed-btn[b-1gp9dsst80] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(240, 230, 210, 0.6);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    transition: all 0.2s;
}

.evo-playback-speed-btn:hover[b-1gp9dsst80] {
    background: color-mix(in srgb, var(--evo-accent, #667eea) 16%, transparent);
    color: var(--evo-accent, #fbbf24);
}

.evo-playback-speed-btn.active[b-1gp9dsst80] {
    background: color-mix(in srgb, var(--evo-accent, #667eea) 26%, transparent);
    border-color: color-mix(in srgb, var(--evo-accent, #667eea) 50%, transparent);
    color: var(--evo-accent, #fbbf24);
}

/* ---- Skip cluster ---- */
.evo-playback-skip-cluster[b-1gp9dsst80] {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 20;
    display: flex;
    gap: 0.5rem;
    opacity: 0;
    animation: evo-skip-appear-b-1gp9dsst80 0.4s ease 1.5s forwards;
}

.evo-playback-skip-btn[b-1gp9dsst80] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(240, 230, 210, 0.7);
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(4px);
}

.evo-playback-skip-btn:hover[b-1gp9dsst80] {
    background: color-mix(in srgb, var(--evo-accent, #667eea) 16%, transparent);
    border-color: color-mix(in srgb, var(--evo-accent, #667eea) 30%, transparent);
    color: color-mix(in srgb, var(--evo-accent, #fbbf24) 95%, white);
}

.evo-playback-skip-finale-btn[b-1gp9dsst80] {
    background: color-mix(in srgb, var(--evo-accent, #667eea) 10%, transparent);
    border-color: color-mix(in srgb, var(--evo-accent, #667eea) 26%, transparent);
    color: color-mix(in srgb, var(--evo-accent, #fbbf24) 85%, white);
}

.evo-playback-skip-finale-btn:hover[b-1gp9dsst80] {
    background: color-mix(in srgb, var(--evo-accent, #667eea) 24%, transparent);
    border-color: color-mix(in srgb, var(--evo-accent, #667eea) 50%, transparent);
    color: var(--evo-accent, #fbbf24);
}

/* visually-hidden helper (aria-live narration) */
.visually-hidden[b-1gp9dsst80] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes evo-skip-appear-b-1gp9dsst80 {
    to { opacity: 1; }
}

/* ---- Progress bar ---- */
.evo-playback-progress-bar[b-1gp9dsst80] {
    position: relative;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    z-index: 10;
}

.evo-playback-progress-fill[b-1gp9dsst80] {
    height: 100%;
    background: linear-gradient(90deg,
        var(--evo-accent, #fbbf24),
        color-mix(in srgb, var(--evo-accent, #f59e0b) 70%, white));
    transition: width 0.3s ease;
    box-shadow: 0 0 8px color-mix(in srgb, var(--evo-accent, #667eea) 50%, transparent);
}

.evo-playback-progress-phases[b-1gp9dsst80] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.evo-playback-phase-marker[b-1gp9dsst80] {
    position: absolute;
    top: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-50%);
    transition: all 0.3s;
}

.evo-playback-phase-marker.completed[b-1gp9dsst80] {
    background: var(--evo-accent, #fbbf24);
    border-color: var(--evo-accent, #fbbf24);
    box-shadow: 0 0 6px color-mix(in srgb, var(--evo-accent, #667eea) 60%, transparent);
}

/* ---- Viewport ---- */
.evo-playback-viewport[b-1gp9dsst80] {
    flex: 1;
    display: flex;
    align-items: safe center;
    justify-content: center;
    position: relative;
    z-index: 2;
    padding: 1.5rem 2rem;
    overflow-y: auto;
}

.evo-playback-scene[b-1gp9dsst80] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    width: 100%;
    gap: 1rem;
}

.fade-in[b-1gp9dsst80] {
    animation: evo-fade-in-b-1gp9dsst80 0.8s ease forwards;
}

@keyframes evo-fade-in-b-1gp9dsst80 {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Intro ---- */
.evo-playback-context[b-1gp9dsst80] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.evo-playback-tier-badge[b-1gp9dsst80],
.evo-playback-stage-badge[b-1gp9dsst80] {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    background: color-mix(in srgb, var(--evo-accent, #667eea) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--evo-accent, #667eea) 22%, transparent);
    color: color-mix(in srgb, var(--evo-accent, #fbbf24) 90%, white);
    letter-spacing: 0.02em;
}

.evo-playback-hero-text[b-1gp9dsst80] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #f0e6d2;
    margin: 0;
    animation: evo-title-glow-b-1gp9dsst80 3s ease-in-out infinite alternate;
}

@keyframes evo-title-glow-b-1gp9dsst80 {
    from { text-shadow: 0 0 20px color-mix(in srgb, var(--evo-accent, #667eea) 25%, transparent); }
    to { text-shadow: 0 0 40px color-mix(in srgb, var(--evo-accent, #667eea) 45%, transparent); }
}

.evo-playback-hero-sub[b-1gp9dsst80] {
    font-size: 1rem;
    color: rgba(240, 230, 210, 0.6);
    margin: 0;
}

.evo-playback-companion[b-1gp9dsst80] {
    margin: 1.5rem 0;
    position: relative;
}

.evo-playback-companion.floating[b-1gp9dsst80] {
    animation: evo-float-b-1gp9dsst80 3s ease-in-out infinite;
}

@keyframes evo-float-b-1gp9dsst80 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.evo-playback-prompt[b-1gp9dsst80] {
    font-size: 1.1rem;
    color: rgba(240, 230, 210, 0.7);
    font-style: italic;
    margin: 0;
}

/* ---- Companion stage (surge + transformation + reveal) ---- */
.evo-playback-companion-stage[b-1gp9dsst80] {
    position: relative;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Charge rings — expanding accent rings during the surge */
.evo-playback-charge-ring[b-1gp9dsst80] {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--evo-accent, #667eea) 55%, transparent);
    opacity: 0;
    animation: evo-charge-ring-b-1gp9dsst80 2s ease-out infinite;
    pointer-events: none;
}

.evo-playback-charge-ring.delayed[b-1gp9dsst80] {
    animation-delay: 1s;
}

@keyframes evo-charge-ring-b-1gp9dsst80 {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2.2); opacity: 0; }
}

.evo-playback-companion-stage.surging[b-1gp9dsst80] {
    animation: evo-pulse-soft-b-1gp9dsst80 1.6s ease-in-out infinite;
}

.evo-playback-companion-stage.surging-hard[b-1gp9dsst80] {
    animation: evo-pulse-hard-b-1gp9dsst80 0.5s ease-in-out infinite;
}

@keyframes evo-pulse-soft-b-1gp9dsst80 {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--evo-accent, #667eea) 40%, transparent)); }
    50% { transform: scale(1.04); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--evo-accent, #667eea) 60%, transparent)); }
}

@keyframes evo-pulse-hard-b-1gp9dsst80 {
    0%, 100% { transform: scale(1.04) translateX(0); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--evo-accent, #667eea) 75%, transparent)); }
    25% { transform: scale(1.06) translateX(-3px); }
    75% { transform: scale(1.06) translateX(3px); }
}

/* Transformation shake + reveal */
.evo-playback-companion-stage.shaking[b-1gp9dsst80] {
    animation: evo-shake-b-1gp9dsst80 0.4s ease-in-out infinite;
}

@keyframes evo-shake-b-1gp9dsst80 {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-5px) rotate(-2deg); }
    75% { transform: translateX(5px) rotate(2deg); }
}

.evo-playback-companion-stage.burst[b-1gp9dsst80] {
    animation: evo-burst-pop-b-1gp9dsst80 0.5s ease-out;
}

@keyframes evo-burst-pop-b-1gp9dsst80 {
    0% { transform: scale(1); }
    40% { transform: scale(0.85); }
    100% { transform: scale(1.1); }
}

.evo-playback-companion-stage.revealed[b-1gp9dsst80] {
    animation: evo-settle-b-1gp9dsst80 0.8s ease-out;
}

@keyframes evo-settle-b-1gp9dsst80 {
    0% { transform: scale(1.25); filter: brightness(1.8); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Burst glow behind the avatar at the peak */
.evo-playback-burst-glow[b-1gp9dsst80] {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--evo-accent, #667eea) 60%, transparent) 0%,
        transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.evo-playback-burst-glow.active[b-1gp9dsst80] {
    opacity: 1;
}

.evo-playback-burst[b-1gp9dsst80] {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--evo-accent, #667eea) 60%, transparent) 0%, transparent 70%);
    animation: evo-burst-expand-b-1gp9dsst80 1s ease-out forwards;
    pointer-events: none;
}

@keyframes evo-burst-expand-b-1gp9dsst80 {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

.evo-playback-burst-particles[b-1gp9dsst80] {
    position: absolute;
    pointer-events: none;
}

.evo-playback-burst-spark[b-1gp9dsst80] {
    position: absolute;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: var(--evo-accent, #fbbf24);
    border-radius: 50%;
    animation: evo-spark-fly-b-1gp9dsst80 0.8s ease-out forwards;
    transform: rotate(var(--angle, 0deg)) translateX(0);
}

@keyframes evo-spark-fly-b-1gp9dsst80 {
    0% { transform: rotate(var(--angle)) translateX(20px); opacity: 1; }
    100% { transform: rotate(var(--angle)) translateX(var(--distance, 100px)); opacity: 0; }
}

/* ---- Reveal ---- */
.evo-playback-reveal-headline[b-1gp9dsst80] {
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(240, 230, 210, 0.85);
    margin: 0;
}

.evo-playback-tier-big[b-1gp9dsst80] {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--evo-accent, #fbbf24);
    margin: 0.2rem 0 0;
    letter-spacing: 0.02em;
    animation: evo-tier-glow-b-1gp9dsst80 2s ease-in-out infinite alternate;
}

@keyframes evo-tier-glow-b-1gp9dsst80 {
    from { text-shadow: 0 0 12px color-mix(in srgb, var(--evo-accent, #667eea) 35%, transparent); }
    to { text-shadow: 0 0 34px color-mix(in srgb, var(--evo-accent, #667eea) 65%, transparent); }
}

.evo-playback-companion-speech[b-1gp9dsst80] {
    font-size: 1.05rem;
    font-style: italic;
    color: rgba(240, 230, 210, 0.85);
    margin: 0.5rem 0 0;
    line-height: 1.6;
    max-width: 420px;
}

/* ---- Finale ---- */
.evo-playback-finale-title[b-1gp9dsst80] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #f0e6d2;
    margin: 0.5rem 0 1rem;
}

.evo-playback-stats-grid[b-1gp9dsst80] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    width: 100%;
    max-width: 420px;
    margin-bottom: 1rem;
}

.evo-playback-stat-card[b-1gp9dsst80] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid color-mix(in srgb, var(--evo-accent, #667eea) 15%, transparent);
    border-radius: 12px;
}

.evo-playback-stat-card--wide[b-1gp9dsst80] {
    grid-column: 1 / -1;
}

.evo-playback-stat-value[b-1gp9dsst80] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--evo-accent, #fbbf24);
}

.evo-playback-stat-label[b-1gp9dsst80] {
    font-size: 0.7rem;
    color: rgba(240, 230, 210, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.evo-playback-finale-quote[b-1gp9dsst80] {
    font-size: 0.88rem;
    color: rgba(240, 230, 210, 0.6);
    font-style: italic;
    margin: 0 0 1rem;
    max-width: 380px;
}

.evo-playback-finale-actions[b-1gp9dsst80] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ---- Pause overlay ---- */
.evo-playback-pause-overlay[b-1gp9dsst80] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.6);
    cursor: pointer;
    color: rgba(240, 230, 210, 0.7);
    font-size: 0.85rem;
}

.evo-playback-pause-icon[b-1gp9dsst80] {
    color: var(--evo-accent, #fbbf24);
    filter: drop-shadow(0 0 12px color-mix(in srgb, var(--evo-accent, #667eea) 50%, transparent));
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .evo-playback-hero-text[b-1gp9dsst80] { font-size: 1.8rem; }
    .evo-playback-tier-big[b-1gp9dsst80] { font-size: 2rem; }
    .evo-playback-stats-grid[b-1gp9dsst80] { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .evo-playback-controls-bar[b-1gp9dsst80] { padding: 0.5rem 0.75rem; }
}
/* /Components/NewsletterSignupForm.razor.rz.scp.css */
.nts-newsletter-form[b-roa7l4offy] {
    width: 100%;
    max-width: 480px;
}

.nts-newsletter-row[b-roa7l4offy] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nts-newsletter-input[b-roa7l4offy] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 12px 14px;
    font-size: 15px;
    color: var(--theme-text-primary, #1a202c);
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 10px;
    outline: none;
}

.nts-newsletter-input:focus[b-roa7l4offy] {
    border-color: var(--theme-primary, #4f46e5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #4f46e5) 22%, transparent);
}

.nts-newsletter-input[b-roa7l4offy]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

.nts-newsletter-btn[b-roa7l4offy] {
    flex: 0 0 auto;
    padding: 12px 22px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: var(--theme-primary, #4f46e5);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.15s ease;
}

.nts-newsletter-btn:hover[b-roa7l4offy] {
    filter: brightness(1.06);
}

.nts-newsletter-fine[b-roa7l4offy] {
    margin: 10px 2px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--theme-text-muted, #6b7280);
}

/* Compact (footer/sidebar) keeps the field + button on one row at small widths. */
.nts-newsletter-form.is-compact .nts-newsletter-input[b-roa7l4offy] {
    flex-basis: 160px;
    padding: 10px 12px;
    font-size: 14px;
}

.nts-newsletter-form.is-compact .nts-newsletter-btn[b-roa7l4offy] {
    padding: 10px 16px;
    font-size: 14px;
}

.nts-newsletter-form.is-compact .nts-newsletter-fine[b-roa7l4offy] {
    font-size: 11.5px;
}
/* /Components/NotificationBell.razor.rz.scp.css */
/* NotificationBell - Notification dropdown component */

/* ============================================
   NOTIFICATION BELL - Native Implementation
   ============================================ */
.notification-container[b-hb3opo25mp] {
    position: relative;
}

.notification-bell-btn[b-hb3opo25mp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.notification-bell-btn:hover[b-hb3opo25mp] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.notification-badge[b-hb3opo25mp] {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.notification-overlay[b-hb3opo25mp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1299;
}

.notification-dropdown[b-hb3opo25mp] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 32px);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1300;
    overflow: hidden;
    animation: notificationSlideIn-b-hb3opo25mp 0.2s ease-out;
}

@keyframes notificationSlideIn-b-hb3opo25mp {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.notification-header[b-hb3opo25mp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.notification-header-left[b-hb3opo25mp] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1f2937;
}

.notification-header-left svg[b-hb3opo25mp] {
    color: #6b7280;
}

.notification-title[b-hb3opo25mp] {
    font-size: 1rem;
    font-weight: 700;
}

.mark-all-read-btn[b-hb3opo25mp] {
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.mark-all-read-btn:hover[b-hb3opo25mp] {
    background: rgba(59, 130, 246, 0.1);
}

/* List */
.notification-list[b-hb3opo25mp] {
    max-height: 400px;
    overflow-y: auto;
}

.notification-list[b-hb3opo25mp]::-webkit-scrollbar {
    width: 6px;
}

.notification-list[b-hb3opo25mp]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.notification-list[b-hb3opo25mp]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.notification-list[b-hb3opo25mp]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Loading */
.notification-loading[b-hb3opo25mp] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.spinner[b-hb3opo25mp] {
    width: 24px;
    height: 24px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-hb3opo25mp 0.8s linear infinite;
}

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

/* Empty State */
.notification-empty[b-hb3opo25mp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.empty-icon[b-hb3opo25mp] {
    color: #d1d5db;
    margin-bottom: 12px;
}

.empty-title[b-hb3opo25mp] {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.empty-subtitle[b-hb3opo25mp] {
    color: #9ca3af;
    font-size: 0.8rem;
}

/* Notification Item */
.notification-item[b-hb3opo25mp] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background 0.15s ease;
}

.notification-item:hover[b-hb3opo25mp] {
    background: #f9fafb;
}

.notification-item:last-child[b-hb3opo25mp] {
    border-bottom: none;
}

.notification-item.unread[b-hb3opo25mp] {
    background: #eff6ff;
}

.notification-item.unread:hover[b-hb3opo25mp] {
    background: #dbeafe;
}

.notification-item.read[b-hb3opo25mp] {
    opacity: 0.7;
}

.notification-item.overdue[b-hb3opo25mp] {
    background: #fef2f2;
    border-left: 3px solid #ef4444;
}

.notification-item.overdue:hover[b-hb3opo25mp] {
    background: #fee2e2;
}

.notification-item-icon[b-hb3opo25mp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e5e7eb;
    flex-shrink: 0;
}

.notification-item-icon svg[b-hb3opo25mp] {
    width: 18px;
    height: 18px;
}

.notification-item-icon.icon-primary[b-hb3opo25mp] { background: #dbeafe; color: #2563eb; }
.notification-item-icon.icon-info[b-hb3opo25mp] { background: #e0f2fe; color: #0284c7; }
.notification-item-icon.icon-success[b-hb3opo25mp] { background: #dcfce7; color: #16a34a; }
.notification-item-icon.icon-warning[b-hb3opo25mp] { background: #fef3c7; color: #d97706; }
.notification-item-icon.icon-error[b-hb3opo25mp] { background: #fee2e2; color: #dc2626; }
.notification-item-icon.icon-secondary[b-hb3opo25mp] { background: #f3e8ff; color: #7c3aed; }

.notification-item-content[b-hb3opo25mp] {
    flex: 1;
    min-width: 0;
}

.notification-item-header[b-hb3opo25mp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.notification-item-title[b-hb3opo25mp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
}

.notification-item-actions[b-hb3opo25mp] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.unread-dot[b-hb3opo25mp] {
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
}

.unread-dot.overdue-dot[b-hb3opo25mp] {
    background: #ef4444;
}

.dismiss-btn[b-hb3opo25mp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.15s ease;
}

.notification-item:hover .dismiss-btn[b-hb3opo25mp] {
    opacity: 1;
}

.dismiss-btn:hover[b-hb3opo25mp] {
    background: #fee2e2;
    color: #ef4444;
}

.notification-item-message[b-hb3opo25mp] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.8rem;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 4px;
}

.notification-item-time[b-hb3opo25mp] {
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Footer */
.notification-footer[b-hb3opo25mp] {
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.view-all-btn[b-hb3opo25mp] {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: none;
    color: #3b82f6;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.view-all-btn:hover[b-hb3opo25mp] {
    background: rgba(59, 130, 246, 0.1);
}

/* Mobile adjustments */
@media (max-width: 599px) {
    .notification-bell-btn[b-hb3opo25mp] {
        width: 36px;
        height: 36px;
    }

    /*
     * iOS Safari / WebKit creates a new containing block for position:fixed
     * children when any ancestor has backdrop-filter set (e.g. the app-header
     * uses backdrop-filter: blur(10px)).  Using bottom:0 therefore positions
     * the dropdown relative to the 56 px header, pushing most of its content
     * off-screen above the viewport.
     *
     * Fix: mirror the approach used by .user-menu-dropdown — pin the panel
     * just below the header with top:56px so it renders in the visible area.
     */
    .notification-dropdown[b-hb3opo25mp] {
        position: fixed;
        top: var(--header-height, 56px);
        bottom: auto;
        /* MOBILE-AUDIT-9 (2026-10-02, Josh: "should be the same width as the account
           menu"): was edge to edge with square top corners; now matches .user-menu-dropdown
           (MainLayout.razor.css) - 8px gutters, 12px radius, same height cap. */
        left: 8px;
        right: 8px;
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        max-height: calc(100vh - 72px);
        border-radius: 12px;
        /* Same lift as .user-menu-dropdown on phones (MainLayout.razor.css). */
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.16) !important;
        overflow-y: auto;
        animation: notificationSlideDown-b-hb3opo25mp 0.25s ease-out;
        -webkit-overflow-scrolling: touch;
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }

    .notification-list[b-hb3opo25mp] {
        max-height: calc(100vh - var(--header-height, 56px) - 110px);
    }
}

@keyframes notificationSlideDown-b-hb3opo25mp {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Onboarding/CaveOfWonders.razor.rz.scp.css */
/* ============================================
   CAVE OF WONDERS - Cinematic Onboarding
   Full-screen overlay with phases:
   Warning → Discovery → Awakening → TeachCards
   → Personalization → InterestResponse → QuestChain
   → QuestComplete → Payoff
   ============================================ */

/* ---- Visually hidden, but exposed to assistive tech ---- */
.cave-sr-only[b-nkblaoxj1l] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Naming input character counter ---- */
.naming-char-counter[b-nkblaoxj1l] {
    position: absolute;
    right: 0.75rem;
    bottom: -1.4rem;
    font-size: 0.72rem;
    color: rgba(240, 230, 210, 0.4);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
    pointer-events: none;
}

.naming-char-counter.near-limit[b-nkblaoxj1l] {
    color: rgba(251, 191, 36, 0.85);
}

.naming-input-wrapper[b-nkblaoxj1l] {
    position: relative;
}

/* ---- Sync warning banner (API failure indicator) ---- */
.cave-sync-warning[b-nkblaoxj1l] {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem 0.55rem 1rem;
    background: rgba(45, 20, 20, 0.92);
    border: 1px solid rgba(251, 146, 60, 0.45);
    border-radius: 999px;
    color: rgba(254, 226, 196, 0.95);
    font-size: 0.85rem;
    line-height: 1.35;
    max-width: min(560px, calc(100vw - 2rem));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    animation: sync-warning-in-b-nkblaoxj1l 0.4s ease-out;
}

@keyframes sync-warning-in-b-nkblaoxj1l {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.sync-warning-icon[b-nkblaoxj1l] {
    color: rgba(251, 146, 60, 1);
    font-size: 1rem;
    flex-shrink: 0;
}

.sync-warning-text[b-nkblaoxj1l] {
    flex: 1;
    min-width: 0;
}

.sync-warning-retry[b-nkblaoxj1l] {
    flex-shrink: 0;
    background: rgba(251, 146, 60, 0.22);
    border: 1px solid rgba(251, 146, 60, 0.55);
    color: rgba(254, 226, 196, 1);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.sync-warning-retry:hover:not(:disabled)[b-nkblaoxj1l] {
    background: rgba(251, 146, 60, 0.35);
    transform: scale(1.04);
}

.sync-warning-retry:disabled[b-nkblaoxj1l] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ---- Globally softened disabled state for cave buttons ---- */
.cave-btn-primary:disabled[b-nkblaoxj1l],
.cave-btn-secondary:disabled[b-nkblaoxj1l],
.cave-btn-enter:disabled[b-nkblaoxj1l],
.interest-card:disabled[b-nkblaoxj1l] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Unified focus-visible treatment across every interactive surface.
   Amber ring matches the cave's warm palette; :focus-visible means mouse
   clicks don't show the ring but keyboard tabs do. ---- */
.cave-btn-primary:focus-visible[b-nkblaoxj1l],
.cave-btn-secondary:focus-visible[b-nkblaoxj1l],
.cave-btn-enter:focus-visible[b-nkblaoxj1l],
.cave-btn-hint-reveal:focus-visible[b-nkblaoxj1l],
.cave-btn-share-prompt:focus-visible[b-nkblaoxj1l],
.interest-card:focus-visible[b-nkblaoxj1l],
.share-btn-social:focus-visible[b-nkblaoxj1l],
.teach-tab-nav:focus-visible[b-nkblaoxj1l],
.sync-warning-retry:focus-visible[b-nkblaoxj1l] {
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: 3px;
}

.cave-btn-enter:focus-visible[b-nkblaoxj1l] {
    /* Pill button with an already-glowing halo — tighter offset reads cleaner. */
    outline-offset: 4px;
}

.interest-card:focus-visible[b-nkblaoxj1l] {
    /* Cards sit tightly in a grid; pull the ring inside to avoid layout shift. */
    outline-offset: -2px;
}

/* ---- Base Overlay ---- */
/* OB-V-20 (2026-05-11): Body-lock-while-cave-open lives in
   `wwwroot/css/themes.css` (global, not scoped) — putting it here in a
   `.razor.css` would fail because Blazor's scoped-CSS attribute
   ([b-xxx]) gets added to every selector, including `body`, and
   `body[b-xxx]` matches nothing. See themes.css search for OB-V-20. */

.cave-overlay[b-nkblaoxj1l] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* dynamic viewport height — shrinks with soft keyboard */
    z-index: 10000;
    /* OB-V-20: Defense-in-depth — even if body-lock above fails (older
       Safari without :has() support, or some edge case), prevent scroll
       chaining from cave-overlay to its parent. */
    overscroll-behavior: none;
    /* Solid base color guarantees zero bleed-through from the dashboard
       at every zoom level; the radial gradient sits on top as ambience. */
    background-color: #0b0e14;
    background-image: radial-gradient(ellipse at 50% 80%, #1a0e2e 0%, #0d0820 30%, #060412 60%, #000 100%);
    isolation: isolate;
    display: flex;
    /* `safe center` keeps content centered when it fits, but pins to the
       start edge (visible + scrollable) when it overflows the viewport. */
    align-items: safe center;
    justify-content: safe center;
    overflow: hidden;
    /* Minimum 4rem top/bottom padding prevents the header or footer
       content from kissing the viewport edge at high zoom / short screens.
       `env(safe-area-inset-*)` wins when it exceeds 4rem — e.g. iPhone
       landscape where the notch intrudes further than the default budget. */
    padding:
        max(4rem, env(safe-area-inset-top) + 1rem)
        max(1rem, env(safe-area-inset-right))
        max(4rem, env(safe-area-inset-bottom) + 1rem)
        max(1rem, env(safe-area-inset-left));
    color: #f0e6d2;
    font-family: inherit;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 191, 36, 0.2) transparent;
    /* OB-CAVE-ANIM-1 (2026-06-28): ease the overlay in on every open/reopen so
       returning from a challenge page fades in instead of hard-cutting (Alex's
       "quick flash between the cave and the challenges"). Opacity-only — a scale
       on a full-viewport scroll container risks jank. Plays at mount only (phase
       changes swap inner content, not this root), so it won't re-fire per phase. */
    animation: cave-overlay-in-b-nkblaoxj1l 0.5s ease both;
}

@keyframes cave-overlay-in-b-nkblaoxj1l {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cave-overlay[b-nkblaoxj1l] { animation: none; }
}

/* Enable scrolling only on phases whose content can exceed viewport height.
   Warning, Discovery, Activation, and Payoff fit within the viewport on
   every device we've tested — keep overflow hidden to prevent phantom
   scroll space.

   OB-V-13 (2026-05-10): Activation was originally added here because the
   awakening phase didn't fit on iPhone. OB-V-17 (same day) compressed the
   activation phase content via aggressive mobile media queries (smaller
   avatar, tighter gaps, reduced padding) — content now fits comfortably
   on iPhone Safari without scroll. OB-V-19 (2026-05-10): Activation
   REMOVED from the scroll list because the OB-V-13 affordance was
   allowing users to scroll DOWN into a blank area below content (Josh's
   feedback: "you can scroll down a blank screen under the page content").
   With OB-V-17's compression, scroll is unnecessary and the scroll-past
   was actively confusing.

   NOTE on naming: the Phase enum value is `Activation` (not `Awakening`)
   so `_phaseClass.ToString().ToLower()` resolves to `"activation"`. The
   CSS class names below must match the enum spelling. */
.cave-overlay.naming[b-nkblaoxj1l],
.cave-overlay.goalforge[b-nkblaoxj1l],
.cave-overlay.teachcards[b-nkblaoxj1l],
.cave-overlay.personalization[b-nkblaoxj1l],
.cave-overlay.challengechain[b-nkblaoxj1l],
.cave-overlay.challengecomplete[b-nkblaoxj1l],
/* OB-V-16 (2026-05-10): `.questchain` / `.questcomplete` legacy aliases kept
   for safety. The current Phase enum uses `ChallengeChain` / `ChallengeComplete`
   which lowercase to `challengechain` / `challengecomplete` (above); these
   former-named selectors never matched anything and gave those phases no
   scroll affordance. If a future rename brings back the `Quest` prefix,
   these still cover that case. */
.cave-overlay.questchain[b-nkblaoxj1l],
.cave-overlay.questcomplete[b-nkblaoxj1l] {
    overflow-y: auto;
    overflow-x: hidden;
}

.cave-overlay:focus[b-nkblaoxj1l] {
    /* Overlay is tabindex=-1 purely to catch ESC keypresses; don't show a
       focus ring on the container itself. */
    outline: none;
}

.cave-overlay[b-nkblaoxj1l]::-webkit-scrollbar {
    width: 6px;
}

.cave-overlay[b-nkblaoxj1l]::-webkit-scrollbar-track {
    background: transparent;
}

.cave-overlay[b-nkblaoxj1l]::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.2);
    border-radius: 3px;
}

@media (max-width: 640px) {
    .cave-overlay[b-nkblaoxj1l] {
        /* Keep the 4rem vertical budget even on mobile so the header never
           gets clipped; tighten horizontal padding for narrow viewports. */
        padding:
            max(4rem, env(safe-area-inset-top) + 1rem)
            max(0.5rem, env(safe-area-inset-right))
            max(4rem, env(safe-area-inset-bottom) + 1rem)
            max(0.5rem, env(safe-area-inset-left));
    }
}

/* ---- Screen shake on egg burst ---- */
.cave-overlay.screen-shake[b-nkblaoxj1l] {
    animation: cave-screen-shake-b-nkblaoxj1l 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes cave-screen-shake-b-nkblaoxj1l {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-4px, 2px); }
    20% { transform: translate(6px, -3px); }
    30% { transform: translate(-5px, -1px); }
    40% { transform: translate(3px, 4px); }
    50% { transform: translate(-2px, -2px); }
    60% { transform: translate(4px, 1px); }
    70% { transform: translate(-3px, 3px); }
    80% { transform: translate(2px, -1px); }
    90% { transform: translate(-1px, 2px); }
}

/* ---- Exit Confirmation Dialog ---- */
.cave-exit-confirm[b-nkblaoxj1l] {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    animation: cave-fade-in-b-nkblaoxj1l 0.2s ease;
}

.cave-exit-confirm-card[b-nkblaoxj1l] {
    background: linear-gradient(145deg, #1e1535, #150e28);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.exit-confirm-title[b-nkblaoxj1l] {
    font-size: 1.2rem;
    font-weight: 700;
    color: rgba(251, 191, 36, 0.95);
    margin: 0 0 0.5rem;
}

.exit-confirm-body[b-nkblaoxj1l] {
    font-size: 0.95rem;
    color: rgba(240, 230, 210, 0.7);
    line-height: 1.5;
    margin: 0 0 1.5rem;
}

.exit-confirm-actions[b-nkblaoxj1l] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ---- Phase Transition Curtain ---- */
.phase-transition-curtain[b-nkblaoxj1l] {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
}

.phase-transition-curtain.active[b-nkblaoxj1l] {
    opacity: 1;
    pointer-events: all;
}

/* ---- Star Field ---- */
.cave-stars[b-nkblaoxj1l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.cave-star[b-nkblaoxj1l] {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 30%);
    width: var(--size, 2px);
    height: var(--size, 2px);
    background: white;
    border-radius: 50%;
    animation: star-twinkle-b-nkblaoxj1l var(--duration, 3s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    opacity: 0.3;
}

@keyframes star-twinkle-b-nkblaoxj1l {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.7; }
}

/* ---- Particle System ---- */
.cave-particles[b-nkblaoxj1l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.cave-particle[b-nkblaoxj1l] {
    position: absolute;
    bottom: -10px;
    left: var(--x, 50%);
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: rgba(251, 191, 36, var(--opacity, 0.7));
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--size, 3px) * 2) rgba(251, 191, 36, 0.3);
    animation: cave-particle-float-b-nkblaoxj1l 8s ease-in infinite;
    animation-delay: var(--delay, 0s);
    transition: opacity 1.5s ease;
}

@keyframes cave-particle-float-b-nkblaoxj1l {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(var(--drift, 0px)) scale(0);
        opacity: 0;
    }
}

/* =============================================
   Phase-specific ambient dimming
   ============================================= */

/* Discovery — focus on egg + input, not background noise */
.cave-overlay.discovery .cave-star[b-nkblaoxj1l] {
    opacity: 0.08;
    animation-duration: 6s;
}

.cave-overlay.discovery .cave-particle[b-nkblaoxj1l] {
    opacity: 0.15 !important;
}

.cave-overlay.discovery .cave-particles[b-nkblaoxj1l] {
    filter: blur(1px);
}

/* Awakening — stars nearly invisible, particles fade so egg animation shines */
.cave-overlay.awakening .cave-star[b-nkblaoxj1l] {
    opacity: 0.05;
}

.cave-overlay.awakening .cave-particle[b-nkblaoxj1l] {
    opacity: 0.1 !important;
}

/* Naming through Payoff — gentle ambient, not distracting */
.cave-overlay.naming .cave-star[b-nkblaoxj1l],
.cave-overlay.teachcards .cave-star[b-nkblaoxj1l],
.cave-overlay.personalization .cave-star[b-nkblaoxj1l],
.cave-overlay.interestresponse .cave-star[b-nkblaoxj1l],
.cave-overlay.questchain .cave-star[b-nkblaoxj1l],
.cave-overlay.questcomplete .cave-star[b-nkblaoxj1l],
.cave-overlay.payoff .cave-star[b-nkblaoxj1l] {
    opacity: 0.12;
}

.cave-overlay.naming .cave-particle[b-nkblaoxj1l],
.cave-overlay.teachcards .cave-particle[b-nkblaoxj1l],
.cave-overlay.personalization .cave-particle[b-nkblaoxj1l],
.cave-overlay.interestresponse .cave-particle[b-nkblaoxj1l],
.cave-overlay.questchain .cave-particle[b-nkblaoxj1l],
.cave-overlay.questcomplete .cave-particle[b-nkblaoxj1l],
.cave-overlay.payoff .cave-particle[b-nkblaoxj1l] {
    opacity: 0.2 !important;
}

/* Discovery — center-focus vignette to draw attention to egg + input */
.cave-overlay.discovery[b-nkblaoxj1l]::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 55% 65% at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 1;
    animation: cave-fade-in-b-nkblaoxj1l 1.5s ease forwards;
}

/* ---- Screen (each phase container) ---- */
.cave-screen[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 600px;
    width: 90%;
    padding: 2rem;
    z-index: 2;
    position: relative;
    /* Prevent any single screen from exceeding the overlay's visible area
       and creating excessive scroll. Content can scroll within if truly tall. */
    max-height: calc(100vh - 8rem);
    max-height: calc(100dvh - 8rem);
}

/* ---- Fade-in ---- */
.fade-in[b-nkblaoxj1l] {
    animation: cave-fade-in-b-nkblaoxj1l 0.8s ease forwards;
}

@keyframes cave-fade-in-b-nkblaoxj1l {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   PHASE: Warning — Cave Entrance Scene
   ============================================= */

/* ---- Scene container ---- */
.cave-entrance-scene[b-nkblaoxj1l] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ---- Cave entrance parallax: each depth layer shifts with the cursor ---- */
.cave-mouth .cave-atmosphere[b-nkblaoxj1l] {
    transform: translate(
        calc(var(--px, 0) * 2px),
        calc(var(--py, 0) * 2px)
    );
    transition: transform 0.2s ease-out;
}

.cave-mouth .cave-inner-glow[b-nkblaoxj1l] {
    transform: translateX(-50%) translate(
        calc(var(--px, 0) * 6px),
        calc(var(--py, 0) * 4px)
    );
    transition: transform 0.2s ease-out;
}

.cave-mouth .cave-inner-glow-secondary[b-nkblaoxj1l] {
    transform: translateX(-50%) translate(
        calc(var(--px, 0) * 4px),
        calc(var(--py, 0) * 3px)
    );
    transition: transform 0.2s ease-out;
}

.cave-mouth .cave-stalactites[b-nkblaoxj1l] {
    transform: translate(
        calc(var(--px, 0) * -1px),
        calc(var(--py, 0) * -1px)
    );
    transition: transform 0.2s ease-out;
}

.cave-mouth .cave-embers[b-nkblaoxj1l] {
    transform: translate(
        calc(var(--px, 0) * 3px),
        calc(var(--py, 0) * 2px)
    );
    transition: transform 0.2s ease-out;
}

.cave-mouth .cave-inner-content[b-nkblaoxj1l] {
    transform: translate(
        calc(var(--px, 0) * 1px),
        calc(var(--py, 0) * 1px)
    );
    transition: transform 0.2s ease-out;
}

/* ---- The cave mouth arch ---- */
.cave-mouth[b-nkblaoxj1l] {
    position: relative;
    overflow: visible;
    width: min(520px, 80vw);
    /* clamp() guarantees a minimum 440px of vertical room so the three
       text lines + button stack always fit inside the content band; the
       overlay's overflow-y: auto handles scroll on sub-440 viewports. */
    height: clamp(440px, 72vh, 520px);
    /* Arch shape — taller, more dramatic */
    border-radius: 50% 50% 3% 3% / 42% 42% 2% 2%;
    /* Layered rock texture with deeper interior */
    background:
        /* Deep inner darkness */
        radial-gradient(ellipse 65% 55% at 50% 60%, rgba(6, 4, 14, 0.99) 0%, transparent 100%),
        /* Rock face color */
        linear-gradient(180deg,
            #2d1f42 0%,
            #221535 25%,
            #1a1028 50%,
            #12091f 80%,
            #0a0612 100%);
    /* Rocky edge effect — more pronounced depth */
    box-shadow:
        /* Inner rock edges */
        inset 0 0 0 2px rgba(100, 70, 140, 0.3),
        inset 0 0 0 5px rgba(50, 35, 80, 0.4),
        inset 6px 0 20px rgba(0, 0, 0, 0.6),
        inset -6px 0 20px rgba(0, 0, 0, 0.6),
        inset 0 -12px 30px rgba(0, 0, 0, 0.8),
        inset 0 10px 20px rgba(0, 0, 0, 0.5),
        /* Outer ambient glow — warm golden light spilling out */
        0 0 80px rgba(251, 191, 36, 0.1),
        0 0 160px rgba(251, 191, 36, 0.05),
        0 20px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    flex-shrink: 0;
}

/* Rough rock texture overlay */
.cave-mouth[b-nkblaoxj1l]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* Rock grain using layered gradients */
    background:
        repeating-linear-gradient(
            87deg,
            transparent 0px,
            rgba(255, 255, 255, 0.01) 1px,
            transparent 2px,
            transparent 8px
        ),
        repeating-linear-gradient(
            175deg,
            transparent 0px,
            rgba(0, 0, 0, 0.08) 1px,
            transparent 2px,
            transparent 12px
        );
    pointer-events: none;
    z-index: 1;
}

/* Edge weathering — vignette around the arch */
.cave-mouth[b-nkblaoxj1l]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 40px 20px rgba(10, 6, 18, 0.6),
        inset 0 -20px 40px rgba(10, 6, 18, 0.8);
    pointer-events: none;
    z-index: 2;
}

/* ---- Stalactites ---- */
.cave-stalactites[b-nkblaoxj1l] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    z-index: 3;
}

.cave-stalactites span[b-nkblaoxj1l] {
    position: absolute;
    left: var(--x, 50%);
    top: 0;
    width: 6px;
    height: var(--h, 30px);
    background: linear-gradient(180deg, #2a1f3d 0%, #1a1028 60%, rgba(20, 12, 34, 0.6) 100%);
    clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 40% 100%);
    transform: translateX(-50%);
}

/* ---- Ancient carved runes ---- */
.cave-runes[b-nkblaoxj1l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.rune[b-nkblaoxj1l] {
    position: absolute;
    top: var(--pos, 50%);
    font-size: 1.1rem;
    color: rgba(251, 191, 36, 0.1);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.06);
    animation: rune-glow-b-nkblaoxj1l 5s ease-in-out infinite;
    animation-delay: calc(var(--rot, 0deg) * 0.02s);
    transform: rotate(var(--rot, 0deg));
}

/* Runes on the left wall */
.rune:nth-child(-n+3)[b-nkblaoxj1l] {
    left: 8px;
}

/* Runes on the right wall */
.rune:nth-child(n+4)[b-nkblaoxj1l] {
    right: 8px;
}

@keyframes rune-glow-b-nkblaoxj1l {
    0%, 100% { color: rgba(251, 191, 36, 0.06); text-shadow: 0 0 4px rgba(251, 191, 36, 0.03); }
    40% { color: rgba(251, 191, 36, 0.3); text-shadow: 0 0 16px rgba(251, 191, 36, 0.2), 0 0 32px rgba(251, 191, 36, 0.08); }
    60% { color: rgba(251, 191, 36, 0.15); text-shadow: 0 0 8px rgba(251, 191, 36, 0.1); }
}

/* ---- Inner golden glow — light from within ---- */
.cave-inner-glow[b-nkblaoxj1l] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 80%;
    background: radial-gradient(ellipse 55% 50% at 50% 90%,
        rgba(251, 191, 36, 0.18) 0%,
        rgba(251, 191, 36, 0.08) 35%,
        rgba(217, 119, 6, 0.03) 60%,
        transparent 75%);
    animation: inner-glow-breathe-b-nkblaoxj1l 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.cave-inner-glow-secondary[b-nkblaoxj1l] {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 50%;
    background: radial-gradient(ellipse at 50% 85%,
        rgba(251, 191, 36, 0.12) 0%,
        rgba(217, 119, 6, 0.06) 40%,
        transparent 65%);
    animation: inner-glow-breathe-b-nkblaoxj1l 4s ease-in-out 2s infinite;
    pointer-events: none;
    z-index: 0;
}

/* ---- Light beam rising from the cave ---- */
.cave-light-beam[b-nkblaoxj1l] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 120%;
    background: linear-gradient(to top,
        rgba(251, 191, 36, 0.06) 0%,
        rgba(251, 191, 36, 0.02) 40%,
        transparent 70%);
    clip-path: polygon(30% 100%, 70% 100%, 85% 0%, 15% 0%);
    animation: beam-breathe-b-nkblaoxj1l 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes beam-breathe-b-nkblaoxj1l {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

@keyframes inner-glow-breathe-b-nkblaoxj1l {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

/* ---- Atmospheric depth: layered radial gradient inside the arch ---- */
.cave-atmosphere[b-nkblaoxj1l] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        /* Cool haze at the upper interior */
        radial-gradient(ellipse 70% 45% at 50% 22%, rgba(70, 45, 120, 0.28) 0%, transparent 72%),
        /* Deep shadow settling at middle */
        radial-gradient(ellipse 55% 50% at 50% 55%, rgba(10, 5, 20, 0.45) 0%, transparent 75%),
        /* Warm ember wash along the floor */
        radial-gradient(ellipse 85% 55% at 50% 100%, rgba(251, 140, 40, 0.14) 0%, transparent 65%);
    pointer-events: none;
    z-index: 1;
    animation: atmosphere-breathe-b-nkblaoxj1l 8s ease-in-out infinite;
}

@keyframes atmosphere-breathe-b-nkblaoxj1l {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* ---- Floating embers rising from within the cave ---- */
.cave-embers[b-nkblaoxj1l] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.cave-ember[b-nkblaoxj1l] {
    position: absolute;
    left: var(--x, 50%);
    bottom: -8px;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: hsl(var(--hue, 38), 92%, 62%);
    border-radius: 50%;
    box-shadow:
        0 0 6px hsl(var(--hue, 38), 92%, 62%),
        0 0 14px hsla(var(--hue, 38), 92%, 55%, 0.45);
    opacity: 0;
    animation: ember-rise-b-nkblaoxj1l var(--duration, 6s) ease-in var(--delay, 0s) infinite;
    will-change: transform, opacity;
}

@keyframes ember-rise-b-nkblaoxj1l {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }
    12% {
        opacity: 0.95;
    }
    60% {
        opacity: 0.7;
    }
    100% {
        transform: translate(var(--drift, 0), calc(-1 * var(--travel, 320px))) scale(0.3);
        opacity: 0;
    }
}

/* ---- Mist / fog rising from cave floor ---- */
.cave-mist[b-nkblaoxj1l] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.mist-wisp[b-nkblaoxj1l] {
    position: absolute;
    bottom: -30px;
    left: var(--x, 50%);
    width: 160px;
    height: 90px;
    /* Brighter base so wisps are actually visible against the dark cave
       — previous 0.08 alpha was nearly imperceptible at desk brightness. */
    background: radial-gradient(ellipse, rgba(240, 230, 210, 0.18) 0%, rgba(240, 230, 210, 0.08) 45%, transparent 72%);
    border-radius: 50%;
    filter: blur(2px);
    animation: mist-rise-b-nkblaoxj1l 7s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes mist-rise-b-nkblaoxj1l {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    15% {
        opacity: 0.8;
    }
    75% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-160px) translateX(25px) scale(1.8);
        opacity: 0;
    }
}

/* ---- Content inside the cave mouth ---- */
.cave-inner-content[b-nkblaoxj1l] {
    position: absolute;
    /* Band widened to ~68% so the full text block + button stack fits at
       every zoom level. Content anchors to the bottom (flex-end) so the
       button stack stays visible; overflow — if any — extends upward into
       the wider middle of the arch where it's still legible. */
    left: 0;
    right: 0;
    top: 28%;
    bottom: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 1.1rem;
    padding: 0 10%;
    /* High z-index guarantees text paints above every decorative layer
       inside the cave (stalactites z-3, runes z-3, embers z-3, mist z-4). */
    z-index: 10;
    text-align: center;
}

.cave-inner-content .cave-text-sequence[b-nkblaoxj1l] {
    /* Max-width relaxed to 100% and gap tightened — less wrapping on the
       long first line, less vertical footprint overall, so the text block
       keeps fitting the band when the viewport shrinks at high zoom. */
    max-width: 100%;
    gap: 0.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cave-inner-content .cave-line[b-nkblaoxj1l] {
    font-size: 1.1rem;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.cave-inner-content .cave-line:first-child[b-nkblaoxj1l] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(251, 191, 36, 0.9);
}

.cave-inner-content .cave-buttons[b-nkblaoxj1l] {
    gap: 0.75rem;
}

/* ---- "Enter the Cave" portal button ---- */
.cave-btn-enter[b-nkblaoxj1l] {
    position: relative;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08) 0%, rgba(217, 119, 6, 0.04) 100%);
    border: 1.5px solid rgba(251, 191, 36, 0.5);
    color: #f0e6d2;
    padding: 16px 48px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.05em;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.1), inset 0 0 20px rgba(251, 191, 36, 0.04);
}

.cave-btn-enter:hover[b-nkblaoxj1l] {
    transform: scale(1.06);
    border-color: rgba(251, 191, 36, 0.85);
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.25), 0 0 80px rgba(251, 191, 36, 0.1), inset 0 0 30px rgba(251, 191, 36, 0.08);
}

.cave-btn-enter:hover .btn-enter-glow[b-nkblaoxj1l] {
    opacity: 1;
    transform: translateX(0%) translateY(-50%);
}

/* Inner light sweep on hover */
.btn-enter-glow[b-nkblaoxj1l] {
    position: absolute;
    top: 50%;
    left: -30%;
    width: 160%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.15) 0%, transparent 60%);
    transform: translateX(-20%) translateY(-50%);
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.6s ease;
    pointer-events: none;
}

.btn-enter-text[b-nkblaoxj1l] {
    position: relative;
    z-index: 1;
}

/* Pulsing border glow on the enter button */
.cave-btn-enter[b-nkblaoxj1l]::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50px;
    background: transparent;
    /* Slowed from 2.4s → 3.2s: the button's breath now matches the cave's
       cinematic pacing instead of competing with the glow inside. */
    animation: portal-pulse-b-nkblaoxj1l 3.2s ease-in-out infinite;
    pointer-events: none;
    /* Local stacking so the expanding halo can't paint over adjacent buttons. */
    z-index: 0;
}

@keyframes portal-pulse-b-nkblaoxj1l {
    0%, 100% {
        opacity: 0.65;
        transform: scale(1);
        box-shadow:
            0 0 22px 2px rgba(251, 191, 36, 0.32),
            0 0 44px 6px rgba(251, 191, 36, 0.14),
            inset 0 0 18px rgba(251, 191, 36, 0.08);
    }
    50% {
        opacity: 1;
        transform: scale(1.035);
        box-shadow:
            0 0 36px 6px rgba(251, 191, 36, 0.55),
            0 0 72px 14px rgba(251, 191, 36, 0.28),
            0 0 110px 22px rgba(251, 191, 36, 0.1),
            inset 0 0 26px rgba(251, 191, 36, 0.18);
    }
}

/* ---- Rocky ground beneath cave ---- */
.cave-ground[b-nkblaoxj1l] {
    width: min(580px, 85vw);
    height: 24px;
    background: linear-gradient(180deg, #1a1028 0%, #0a0612 100%);
    border-radius: 0 0 12px 12px;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.6),
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(251, 191, 36, 0.05);
    flex-shrink: 0;
    margin-top: -3px;
}

/* ---- Override cave-line styling inside the entrance ---- */
.cave-entrance-scene .cave-text-sequence[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    max-width: 90%;
    align-items: center;
}

.cave-entrance-scene .cave-line[b-nkblaoxj1l] {
    font-size: 1.05rem;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1s ease, transform 1s ease;
    color: rgba(240, 230, 210, 0.85);
    letter-spacing: 0.03em;
    text-align: center;
}

.cave-entrance-scene .cave-line:first-child[b-nkblaoxj1l] {
    font-size: 1.18rem;
    font-weight: 600;
    color: rgba(251, 191, 36, 0.95);
    letter-spacing: 0.04em;
}

.cave-entrance-scene .cave-line.visible[b-nkblaoxj1l] {
    opacity: 1;
    transform: translateY(0);
}

.cave-entrance-scene .cave-buttons[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

/* =============================================
   Shared UI — used across multiple phases
   ============================================= */
.cave-text-sequence[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}

.cave-line[b-nkblaoxj1l] {
    font-size: 1.35rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    color: rgba(240, 230, 210, 0.85);
    letter-spacing: 0.02em;
}

.cave-line.visible[b-nkblaoxj1l] {
    opacity: 1;
    transform: translateY(0);
}

.cave-buttons[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.cave-btn-primary[b-nkblaoxj1l] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #1a0e2e;
    border: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    letter-spacing: 0.03em;
}

.cave-btn-primary:hover[b-nkblaoxj1l] {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

.cave-btn-secondary[b-nkblaoxj1l] {
    background: transparent;
    /* Bumped from 0.5 → 0.75 alpha; the old value read as "nothing is here"
       on the dark cave and users reported the button looked hidden. */
    color: rgba(240, 230, 210, 0.75);
    border: 1px solid rgba(240, 230, 210, 0.28);
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.cave-btn-secondary:hover[b-nkblaoxj1l] {
    color: rgba(240, 230, 210, 1);
    border-color: rgba(240, 230, 210, 0.5);
    background: rgba(240, 230, 210, 0.04);
}

/* ---- Skip / "Show me later" link-style button ---- */
.cave-btn-skip[b-nkblaoxj1l] {
    background: none;
    border: none;
    color: rgba(240, 230, 210, 0.4);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s ease;
}

.cave-btn-skip:hover[b-nkblaoxj1l] {
    color: rgba(240, 230, 210, 0.7);
}

/* =============================================
   PHASE: Discovery
   ============================================= */
.cave-prompt[b-nkblaoxj1l] {
    font-size: 1.15rem;
    color: rgba(240, 230, 210, 0.7);
    margin-bottom: 0.5rem;
    font-style: italic;
}

/* ---- Incantation display — the phrase presented as a sacred ritual ---- */
.cave-incantation[b-nkblaoxj1l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: incantation-reveal-b-nkblaoxj1l 1.5s ease 0.8s forwards;
}

.incantation-words[b-nkblaoxj1l] {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    font-style: italic;
}

/* Individual letters: dim by default, illuminate when matched */
.incantation-letter[b-nkblaoxj1l] {
    color: rgba(251, 191, 36, 0.2);
    transition: color 0.15s ease, text-shadow 0.25s ease, transform 0.2s ease;
    display: inline-block; /* needed for transform */
    white-space: pre; /* preserve space characters as visible width */
}

.incantation-letter.lit[b-nkblaoxj1l] {
    color: rgba(251, 191, 36, 1);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.5), 0 0 24px rgba(251, 191, 36, 0.2);
    transform: scale(1.05);
}

/* Subtle pulse on the next expected character */
.incantation-letter.next[b-nkblaoxj1l] {
    color: rgba(251, 191, 36, 0.45);
    animation: next-letter-pulse-b-nkblaoxj1l 1.5s ease-in-out infinite;
}

@keyframes next-letter-pulse-b-nkblaoxj1l {
    0%, 100% { color: rgba(251, 191, 36, 0.3); }
    50% { color: rgba(251, 191, 36, 0.6); }
}

.incantation-glyph[b-nkblaoxj1l] {
    font-size: 1.1rem;
    color: rgba(251, 191, 36, 0.35);
    animation: glyph-pulse-b-nkblaoxj1l 3s ease-in-out infinite;
}

@keyframes glyph-pulse-b-nkblaoxj1l {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.7; }
}

@keyframes incantation-reveal-b-nkblaoxj1l {
    0% { opacity: 0; transform: translateY(6px); filter: blur(3px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Incantation input — slightly larger, centered, spellcasting feel */
.cave-input.incantation-input[b-nkblaoxj1l] {
    text-align: center;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    font-style: italic;
}

/* Nudge that appears when the user is almost done typing */
.cave-incantation-nudge[b-nkblaoxj1l] {
    font-size: 0.88rem;
    color: rgba(251, 191, 36, 0.6);
    margin-top: 0.75rem;
    animation: cave-fade-in-b-nkblaoxj1l 0.5s ease, nudge-breathe-b-nkblaoxj1l 2s ease-in-out infinite 0.5s;
}

@keyframes nudge-breathe-b-nkblaoxj1l {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.cave-phrase-hint[b-nkblaoxj1l] {
    font-size: 1.1rem;
    color: rgba(251, 191, 36, 0.85);
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
    opacity: 0;
    animation: hint-materialize-b-nkblaoxj1l 1s ease 1s forwards;
}

@keyframes hint-materialize-b-nkblaoxj1l {
    0% { opacity: 0; transform: translateY(6px); filter: blur(3px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.cave-phrase-hint strong[b-nkblaoxj1l] {
    color: #fbbf24;
    font-weight: 600;
}

.cave-egg-large[b-nkblaoxj1l] {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cave-egg-glow[b-nkblaoxj1l] {
    position: absolute;
    inset: -24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
    animation: egg-glow-breathe-b-nkblaoxj1l 4s ease-in-out infinite;
}

@keyframes egg-glow-breathe-b-nkblaoxj1l {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.85; }
}

/* Egg resonance — responds to correct typing */
/* ---- Warmth indicator bar (warmer/colder Discovery feedback) ---- */
.cave-warmth-indicator[b-nkblaoxj1l] {
    width: min(300px, 60%);
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.cave-warmth-bar[b-nkblaoxj1l] {
    height: 100%;
    background: linear-gradient(90deg,
        rgba(100, 150, 255, 0.6),
        rgba(251, 191, 36, 0.8),
        rgba(251, 146, 60, 1));
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(251, 191, 36, calc(var(--warmth, 0) / 200));
}

/* ---- Warm egg state (>50% warmth) — egg pulses more intensely ---- */
.cave-egg-large.warm .cave-egg-glow[b-nkblaoxj1l] {
    background: radial-gradient(circle,
        rgba(251, 191, 36, 0.25) 0%, transparent 70%) !important;
    animation: egg-warm-pulse-b-nkblaoxj1l 2s ease-in-out infinite !important;
}

@keyframes egg-warm-pulse-b-nkblaoxj1l {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.12); opacity: 0.8; }
}

/* ---- Resonating (exact prefix match) — strongest feedback ---- */
.cave-egg-large.resonating .cave-egg-glow[b-nkblaoxj1l] {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%) !important;
    animation: egg-resonance-breathe-b-nkblaoxj1l 1.5s ease-in-out infinite !important;
}

.cave-egg-large.resonating .cave-egg-avatar[b-nkblaoxj1l] {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.15);
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

@keyframes egg-resonance-breathe-b-nkblaoxj1l {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.18); opacity: 1; }
}

/* ---- Cursor-tracked egg: glow and avatar shift toward mouse ---- */
.cave-egg-tracked .cave-egg-glow[b-nkblaoxj1l] {
    transform: translate(
        calc(var(--eye-x, 0) * 8px),
        calc(var(--eye-y, 0) * 8px)
    );
    transition: transform 0.15s ease-out;
}

.cave-egg-tracked .cave-egg-avatar[b-nkblaoxj1l] {
    transform: translate(
        calc(var(--eye-x, 0) * 3px),
        calc(var(--eye-y, 0) * 3px)
    );
    transition: transform 0.15s ease-out;
}

.cave-egg-avatar[b-nkblaoxj1l] {
    position: relative;
    z-index: 2;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 191, 36, 0.08);
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-radius: 50%;
}

/* ---- Input ---- */
.cave-input-wrapper[b-nkblaoxj1l] {
    width: 100%;
    max-width: 340px;
    margin: 0 auto 1rem;
}

.cave-input[b-nkblaoxj1l] {
    width: 100%;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 50px;
    color: #f0e6d2;
    font-size: 1.05rem;
    text-align: center;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cave-input[b-nkblaoxj1l]::placeholder {
    color: rgba(240, 230, 210, 0.35);
}

.cave-input:focus[b-nkblaoxj1l] {
    border-color: rgba(251, 191, 36, 0.7);
    box-shadow: 0 0 24px rgba(251, 191, 36, 0.2), 0 0 60px rgba(251, 191, 36, 0.06);
}

/* ---- Feedback ---- */
.cave-feedback[b-nkblaoxj1l] {
    font-size: 0.9rem;
    color: rgba(251, 191, 36, 0.7);
    margin-top: 0.5rem;
    animation: cave-fade-in-b-nkblaoxj1l 0.4s ease;
}

.cave-feedback.success[b-nkblaoxj1l] {
    color: #34d399;
}

/* OB-V-8 (2026-05-01): Live preview line for the currency-naming step in
   Phase.Personalization. Sits beneath the input, styled subordinate to the
   companion-speech lines so it reads as a hint rather than competing copy.
   Same warm amber as the cave's other supporting text; lighter weight. */
.cave-currency-preview[b-nkblaoxj1l] {
    font-size: 0.95rem;
    color: rgba(251, 191, 36, 0.85);
    font-style: italic;
    margin-top: 0.6rem;
    animation: cave-fade-in-b-nkblaoxj1l 0.4s ease;
}

.cave-hint-reveal[b-nkblaoxj1l] {
    margin-top: 1rem;
    background: rgba(251, 191, 36, 0.1);
    color: rgba(251, 191, 36, 0.9);
    border: 1px dashed rgba(251, 191, 36, 0.3);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
    animation: cave-fade-in-b-nkblaoxj1l 0.5s ease;
}

/* Teasing state — visible but not yet actionable */
.cave-hint-reveal.teasing[b-nkblaoxj1l] {
    opacity: 0.5;
    cursor: default;
    border-style: dotted;
}

/* Ready state — pulse to draw attention */
.cave-hint-reveal.ready[b-nkblaoxj1l] {
    animation: cave-fade-in-b-nkblaoxj1l 0.5s ease, hint-pulse-b-nkblaoxj1l 2s ease-in-out 2;
    border-style: solid;
    border-color: rgba(251, 191, 36, 0.5);
}

@keyframes hint-pulse-b-nkblaoxj1l {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.2); }
}

.cave-hint-reveal:not(:disabled):hover[b-nkblaoxj1l] {
    background: rgba(251, 191, 36, 0.2);
}

/* ---- Naming reaction: companion celebrates hearing its name ---- */
.cave-egg-large.naming-reaction[b-nkblaoxj1l] {
    animation: naming-bounce-b-nkblaoxj1l 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.cave-egg-large.naming-reaction .cave-egg-glow[b-nkblaoxj1l] {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%) !important;
    animation: naming-glow-burst-b-nkblaoxj1l 0.8s ease-out !important;
}

@keyframes naming-bounce-b-nkblaoxj1l {
    0% { transform: scale(1); }
    30% { transform: scale(1.15); }
    50% { transform: scale(0.95); }
    70% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes naming-glow-burst-b-nkblaoxj1l {
    0% { transform: scale(1); opacity: 0.5; }
    30% { transform: scale(1.5); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* ---- Skip cutscene hint ---- */
.cave-skip-hint[b-nkblaoxj1l] {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    color: rgba(240, 230, 210, 0.25);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    pointer-events: none;
    opacity: 0;
    animation: skip-hint-appear-b-nkblaoxj1l 0.5s ease 2s forwards;
    z-index: 5;
}

@keyframes skip-hint-appear-b-nkblaoxj1l {
    to { opacity: 1; }
}

/* =============================================
   PHASE: Awakening
   ============================================= */
.activation-screen[b-nkblaoxj1l] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    /* OB-V-13 (2026-05-10): Inner `overflow-y: auto` removed. Pre-fix, this
       container scrolled separately from the outer .cave-overlay, creating
       a nested-scroll-container situation that fought iOS Safari's URL-bar
       collapse gesture (Josh: "really odd way to scroll"). Now the outer
       cave-overlay is the single scrolling surface (see the
       `.cave-overlay.awakening` rule above), and this container just lays
       out its children naturally. */
}

/* Shake → Crack → Burst */
.cave-egg-large.shaking[b-nkblaoxj1l] {
    animation: egg-shake-gentle-b-nkblaoxj1l 0.2s ease-in-out infinite;
}

.cave-egg-large.cracking[b-nkblaoxj1l] {
    animation: egg-shake-intense-b-nkblaoxj1l 0.1s ease-in-out infinite;
}

.cave-egg-large.burst[b-nkblaoxj1l] {
    animation: egg-burst-b-nkblaoxj1l 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cave-egg-large.revealed[b-nkblaoxj1l] {
    animation: first-breath-b-nkblaoxj1l 2s ease-in-out;
}

/* Gentle tremble — something stirring */
@keyframes egg-shake-gentle-b-nkblaoxj1l {
    0%, 100% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-2px) rotate(-1deg); }
    75% { transform: translateX(2px) rotate(1deg); }
}

/* Intense shaking — about to break */
@keyframes egg-shake-intense-b-nkblaoxj1l {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-5px) rotate(-3deg); }
    40% { transform: translateX(4px) rotate(2deg); }
    60% { transform: translateX(-3px) rotate(-2deg); }
    80% { transform: translateX(5px) rotate(3deg); }
}

@keyframes egg-burst-b-nkblaoxj1l {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.35); filter: brightness(2); }
    60% { transform: scale(0.9); filter: brightness(1.2); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* First breath — the companion is alive */
@keyframes first-breath-b-nkblaoxj1l {
    0% { transform: scale(1); }
    40% { transform: scale(1.06); }
    60% { transform: scale(0.98); }
    80% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Cracks overlay */
.activation-cracks[b-nkblaoxj1l] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.activation-cracks span[b-nkblaoxj1l] {
    position: absolute;
    background: rgba(251, 191, 36, 0.6);
    border-radius: 2px;
}

.cracking .activation-cracks span:nth-child(1)[b-nkblaoxj1l] {
    top: 25%; left: 40%; width: 2px; height: 30%;
    animation: crack-grow-b-nkblaoxj1l 0.4s ease forwards;
    transform: rotate(15deg);
}
.cracking .activation-cracks span:nth-child(2)[b-nkblaoxj1l] {
    top: 35%; left: 55%; width: 2px; height: 25%;
    animation: crack-grow-b-nkblaoxj1l 0.5s ease 0.1s forwards;
    transform: rotate(-20deg);
}
.cracking .activation-cracks span:nth-child(3)[b-nkblaoxj1l] {
    top: 20%; left: 48%; width: 2px; height: 20%;
    animation: crack-grow-b-nkblaoxj1l 0.4s ease 0.2s forwards;
    transform: rotate(35deg);
}
.cracking .activation-cracks span:nth-child(4)[b-nkblaoxj1l] {
    top: 40%; left: 45%; width: 2px; height: 15%;
    animation: crack-grow-b-nkblaoxj1l 0.3s ease 0.3s forwards;
    transform: rotate(-10deg);
}

.burst .activation-cracks[b-nkblaoxj1l],
.revealed .activation-cracks[b-nkblaoxj1l] {
    display: none;
}

@keyframes crack-grow-b-nkblaoxj1l {
    from { opacity: 0; transform: scaleY(0); }
    to   { opacity: 1; transform: scaleY(1); }
}

/* Burst flash */
/* OB-V-12 (2026-05-10): The burst element is a 340×340 square that
   scales up to 3.5× during the activation flash. On iOS Safari that
   scale promotes the element to a GPU compositing layer and the
   rectangular layer bounds become visible mid-animation — Josh saw
   this as "the explosion is a box instead of looking natural" right
   before "...you found me." Desktop browsers composite the same
   element differently and don't reveal the box.

   Three changes lock the visual to a circle:
     1. `border-radius: 50%` — clips the element's box to a circle, so
        even if iOS reveals compositing-layer bounds, the visible shape
        stays round.
     2. Peak scale cut 3.5 → 2.5 — smaller layer = less likely to hit
        Safari's compositing thresholds that expose the box artifact.
     3. `will-change: transform, opacity` — promotes the element to its
        own layer up-front so Safari prepares the right buffer size,
        rather than reflowing mid-animation. */
.activation-burst[b-nkblaoxj1l] {
    position: absolute;
    inset: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.6) 0%, rgba(251, 191, 36, 0.15) 30%, transparent 60%);
    animation: activation-flash-b-nkblaoxj1l 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    z-index: 1;
    will-change: transform, opacity;
}

@keyframes activation-flash-b-nkblaoxj1l {
    0%   { opacity: 0; transform: scale(0.3); }
    20%  { opacity: 1; transform: scale(1); }
    40%  { opacity: 0.8; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(2.5); }
}

/* Burst particle ring — golden sparks radiate outward */
.burst-particles[b-nkblaoxj1l] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 3;
}

.burst-spark[b-nkblaoxj1l] {
    position: absolute;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: rgba(251, 191, 36, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
    animation: spark-fly-b-nkblaoxj1l 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    transform: rotate(var(--angle, 0deg)) translateY(0);
}

@keyframes spark-fly-b-nkblaoxj1l {
    0% {
        transform: rotate(var(--angle, 0deg)) translateY(0);
        opacity: 1;
    }
    60% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--distance, 100px)));
        opacity: 0;
    }
}

/* Awakening glow */
.activation-glow[b-nkblaoxj1l] {
    animation: egg-glow-breathe-b-nkblaoxj1l 1.5s ease-in-out infinite !important;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.5) 0%, transparent 70%) !important;
}

/* Revealed state — companion glow shifts to purple */
.revealed .activation-glow[b-nkblaoxj1l] {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, transparent 70%) !important;
    transition: background 1.5s ease;
}

/* Awakening text */
.activation-text[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 460px;
    padding: 0 1rem;
}

.companion-first-words[b-nkblaoxj1l] {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(251, 191, 36, 0.95);
    margin-bottom: 0.75rem;
    animation: cave-fade-in-b-nkblaoxj1l 1s ease;
}

/* Typewriter reveal for first words */
.companion-first-words.typewriter[b-nkblaoxj1l] {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typewriter-reveal-b-nkblaoxj1l 1.2s steps(16, end) 0.3s forwards;
}

@keyframes typewriter-reveal-b-nkblaoxj1l {
    from { width: 0; opacity: 1; }
    to   { width: 100%; opacity: 1; }
}

.companion-speech[b-nkblaoxj1l] {
    font-size: 1.1rem;
    color: rgba(240, 230, 210, 0.85);
    line-height: 1.7;
    margin-bottom: 0.5rem;
    max-width: 480px;
}

.companion-speech.delayed[b-nkblaoxj1l] {
    animation: cave-fade-in-b-nkblaoxj1l 1s ease 0.8s both;
}

/* OB-KARAOKE-CAVE-1 (2026-06-30): word-by-word narration highlight. As the voice reads, each word
   brightens + bolds (a "lighting up" sweep). The companion's name stays bold regardless of narration
   (the naming reveal, so it reads bold even in silent mode). Applies inside every karaoke'd cave line.

   OB-KARAOKE-CAVE-2 (2026-06-30): the word <span>s are built programmatically in the Karaoke()
   RenderTreeBuilder, so — unlike markup elements — Blazor's CSS isolation never stamps them with the
   [b-xxx] scope attribute. A plain `... span.spoken` rule compiles to `span.spoken[b-xxx]` and matches
   NOTHING (same trap as the OB-V-20 note above). `::deep` moves the scope attribute onto the markup
   ANCESTOR (.companion-speech / .world-picker-* / .challenge-description are real <p>/<h2> tags) and
   leaves the descendant span unscoped, so the dynamic spans finally match. Explicit per-ancestor
   selectors (not :is()) because ::deep must follow a single scoped element. */
.companion-speech[b-nkblaoxj1l]  span,
.world-picker-title[b-nkblaoxj1l]  span,
.world-picker-subtitle[b-nkblaoxj1l]  span,
.challenge-description[b-nkblaoxj1l]  span {
    transition: color 0.12s ease;
}

.companion-speech[b-nkblaoxj1l]  span.spoken,
.world-picker-title[b-nkblaoxj1l]  span.spoken,
.world-picker-subtitle[b-nkblaoxj1l]  span.spoken,
.challenge-description[b-nkblaoxj1l]  span.spoken {
    color: rgba(255, 248, 235, 1);
    font-weight: 700;
}

.companion-speech[b-nkblaoxj1l]  span.name-word {
    font-weight: 700;
    color: rgba(255, 248, 235, 1);
}

/* =============================================
   PHASE: TeachCards
   ============================================= */
.teach-screen[b-nkblaoxj1l] {
    width: 100%;
}

.teach-card-container[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.teach-companion[b-nkblaoxj1l] {
    margin-bottom: 0.5rem;
}

.teach-card[b-nkblaoxj1l] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    width: 100%;
    animation: card-slide-in-b-nkblaoxj1l 0.4s ease;
}

.teach-card.active[b-nkblaoxj1l] {
    opacity: 1;
}

@keyframes card-slide-in-b-nkblaoxj1l {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.teach-icon[b-nkblaoxj1l] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.teach-card h3[b-nkblaoxj1l] {
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(251, 191, 36, 0.95);
    margin: 0 0 0.75rem;
}

.teach-card p[b-nkblaoxj1l] {
    font-size: 1rem;
    color: rgba(240, 230, 210, 0.7);
    line-height: 1.6;
    margin: 0;
}

.teach-mystery-shadow[b-nkblaoxj1l] {
    width: 80px;
    height: 80px;
    margin: 1.5rem auto 0;
    background: radial-gradient(ellipse, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: mystery-pulse-b-nkblaoxj1l 2.5s ease-in-out infinite;
}

@keyframes mystery-pulse-b-nkblaoxj1l {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* Dots navigation */
.teach-dots[b-nkblaoxj1l] {
    display: flex;
    gap: 0;
    justify-content: center;
}

/* 44x44 transparent hit area meets WCAG tap-target minimum; the visible dot
   is rendered via ::before so styling the indicator stays decoupled from
   the button's interactive surface. */
.teach-dot[b-nkblaoxj1l] {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.teach-dot[b-nkblaoxj1l]::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(240, 230, 210, 0.15);
    transition: background 0.3s ease, transform 0.2s ease;
}

.teach-dot:hover[b-nkblaoxj1l]::before {
    background: rgba(240, 230, 210, 0.35);
    transform: scale(1.15);
}

.teach-dot:focus[b-nkblaoxj1l] {
    outline: none;
}

.teach-dot:focus-visible[b-nkblaoxj1l] {
    outline: 2px solid rgba(251, 191, 36, 0.8);
    outline-offset: -10px;
}

.teach-dot.active[b-nkblaoxj1l]::before {
    background: rgba(251, 191, 36, 0.9);
    transform: scale(1.2);
}

.teach-dot.completed[b-nkblaoxj1l]::before {
    background: rgba(251, 191, 36, 0.4);
}

/* Teach navigation */
.teach-nav[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

/* =============================================
   PHASE: Personalization
   ============================================= */
.personalization-screen[b-nkblaoxj1l] {
    max-width: 680px;
}

.personalization-companion[b-nkblaoxj1l] {
    margin-bottom: 1rem;
}

.interest-grid[b-nkblaoxj1l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    width: 100%;
}

.interest-card[b-nkblaoxj1l] {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(251, 191, 36, 0.12);
    border-radius: 16px;
    padding: 1.5rem 1.2rem;
    text-align: center;
    cursor: pointer;
    transition:
        transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
}

.interest-card[b-nkblaoxj1l]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 35%,
        rgba(251, 191, 36, 0.1) 48%,
        rgba(251, 191, 36, 0.18) 50%,
        rgba(251, 191, 36, 0.1) 52%,
        transparent 65%
    );
    transform: translateX(-120%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 0;
}

.interest-card > *[b-nkblaoxj1l] {
    position: relative;
    z-index: 1;
}

.interest-card:hover[b-nkblaoxj1l] {
    transform: translateY(-6px);
    border-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.08);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(251, 191, 36, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.interest-card:hover[b-nkblaoxj1l]::before {
    transform: translateX(120%);
}

.interest-card:active[b-nkblaoxj1l] {
    transform: translateY(-2px) scale(0.985);
    transition-duration: 0.08s;
}

.interest-card:hover h4[b-nkblaoxj1l] {
    color: rgba(251, 191, 36, 1);
    text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}

.interest-icon[b-nkblaoxj1l] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.interest-card:hover .interest-icon[b-nkblaoxj1l] {
    transform: scale(1.2);
}

.interest-card:hover p[b-nkblaoxj1l] {
    color: rgba(240, 230, 210, 0.75);
}

.interest-card h4[b-nkblaoxj1l] {
    font-size: 1.05rem;
    font-weight: 700;
    color: rgba(251, 191, 36, 0.9);
    margin: 0 0 0.4rem;
}

.interest-card p[b-nkblaoxj1l] {
    font-size: 0.85rem;
    color: rgba(240, 230, 210, 0.55);
    line-height: 1.4;
    margin: 0;
}

/* =============================================
   PHASE: QuestChain
   ============================================= */
.challenge-screen[b-nkblaoxj1l] {
    max-width: 520px;
}

.challenge-header[b-nkblaoxj1l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 2rem;
}

.challenge-companion[b-nkblaoxj1l] {
    flex-shrink: 0;
}

.challenge-progress[b-nkblaoxj1l] {
    flex: 1;
}

.challenge-progress-bar[b-nkblaoxj1l] {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0.4rem;
}

.challenge-progress-fill[b-nkblaoxj1l] {
    height: 100%;
    background: linear-gradient(90deg, #d97706, #f59e0b);
    border-radius: 8px;
    transition: width 0.6s ease;
}

.challenge-progress-label[b-nkblaoxj1l] {
    font-size: 0.8rem;
    color: rgba(240, 230, 210, 0.5);
}

.challenge-card[b-nkblaoxj1l] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: center;
    width: 100%;
    animation: card-slide-in-b-nkblaoxj1l 0.4s ease;
}

.challenge-description[b-nkblaoxj1l] {
    font-size: 1.15rem;
    color: rgba(240, 230, 210, 0.85);
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* OB-CAVE-FINALE-1 (2026-06-28): chain-reveal finale — the goal → objectives → first task
   the user assembled, shown as the closing "bang" instead of creating another entity. */
.chain-reveal .reveal-chain[b-nkblaoxj1l] {
    text-align: left;
    max-width: 26rem;
    margin: 0 auto 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid rgba(251, 191, 36, 0.22);
    border-radius: 16px;
    background: rgba(251, 191, 36, 0.05);
}

.chain-reveal .reveal-goal[b-nkblaoxj1l] {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(251, 191, 36, 0.95);
    line-height: 1.4;
}

.chain-reveal .reveal-star[b-nkblaoxj1l] {
    margin-right: 0.25rem;
}

.chain-reveal .reveal-objectives[b-nkblaoxj1l] {
    list-style: none;
    margin: 0.6rem 0 0.6rem 0.75rem;
    padding: 0;
    border-left: 2px solid rgba(251, 191, 36, 0.25);
}

.chain-reveal .reveal-objectives li[b-nkblaoxj1l] {
    position: relative;
    padding: 0.2rem 0 0.2rem 1rem;
    font-size: 0.95rem;
    color: rgba(240, 230, 210, 0.85);
    line-height: 1.45;
}

.chain-reveal .reveal-objectives li[b-nkblaoxj1l]::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0.85em;
    width: 0.7rem;
    height: 2px;
    background: rgba(251, 191, 36, 0.35);
}

.chain-reveal .reveal-task[b-nkblaoxj1l] {
    margin-top: 0.4rem;
    font-size: 0.95rem;
    color: rgba(134, 239, 172, 0.92);
}

.chain-reveal .reveal-tagline[b-nkblaoxj1l] {
    font-size: 1rem;
    color: rgba(240, 230, 210, 0.8);
    line-height: 1.55;
    margin: 0 auto 1rem;
    max-width: 28rem;
}

/* OB-CAVE-FINALE-1: the finale's "Log my time →" navigates to the real /time tracker
   (completes via the "time-logged" quest signal), so no in-cave minutes input. */

/* =============================================
   PHASE: QuestComplete
   ============================================= */
.challenge-complete-screen[b-nkblaoxj1l] {
    max-width: 500px;
}

.challenge-celebration[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.celebration-companion[b-nkblaoxj1l] {
    margin-bottom: 0.5rem;
}

.celebration-xp[b-nkblaoxj1l] {
    font-size: 1.6rem;
    font-weight: 800;
    color: rgba(251, 191, 36, 1);
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);
    animation: xp-pop-b-nkblaoxj1l 0.5s ease;
}

@keyframes xp-pop-b-nkblaoxj1l {
    0%   { transform: scale(0.5); opacity: 0; }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* =============================================
   PHASE: Payoff
   ============================================= */
.payoff-screen[b-nkblaoxj1l] {
    max-width: 500px;
}

.payoff-celebration[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.2rem;
}

.payoff-companion[b-nkblaoxj1l] {
    margin-bottom: 0.5rem;
}

.payoff-energy-bar[b-nkblaoxj1l] {
    width: 100%;
    max-width: 300px;
    height: 12px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

.payoff-energy-fill[b-nkblaoxj1l] {
    height: 100%;
    background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
    border-radius: 12px;
    transition: width 1.5s ease;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4);
}

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 640px) {
    .cave-screen[b-nkblaoxj1l] {
        padding: 1.5rem 1rem;
    }

    .cave-line[b-nkblaoxj1l] {
        font-size: 1.1rem;
    }

    .cave-btn-primary[b-nkblaoxj1l] {
        padding: 12px 30px;
        font-size: 0.95rem;
    }

    .cave-egg-large[b-nkblaoxj1l] {
        width: 110px;
        height: 110px;
    }

    .cave-egg-avatar[b-nkblaoxj1l] {
        width: 80px;
        height: 80px;
    }

    .interest-grid[b-nkblaoxj1l] {
        grid-template-columns: 1fr;
    }

    .teach-card[b-nkblaoxj1l] {
        padding: 2rem 1.5rem;
    }

    .companion-speech[b-nkblaoxj1l] {
        font-size: 1rem;
    }

    /* Incantation: scale down for mobile */
    .cave-incantation[b-nkblaoxj1l] {
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .incantation-words[b-nkblaoxj1l] {
        font-size: 1.15rem;
        letter-spacing: 0.05em;
    }

    .cave-input.incantation-input[b-nkblaoxj1l] {
        font-size: 1rem;
    }

    /* Warmth indicator: slightly wider on mobile */
    .cave-warmth-indicator[b-nkblaoxj1l] {
        width: min(280px, 75%);
    }

    /* Skip hint: tighter positioning */
    .cave-skip-hint[b-nkblaoxj1l] {
        bottom: 1rem;
        font-size: 0.72rem;
    }

    /* Exit confirm: tighter padding */
    .cave-exit-confirm-card[b-nkblaoxj1l] {
        padding: 1.5rem 1.75rem;
        margin: 0 1rem;
    }

    .challenge-header[b-nkblaoxj1l] {
        flex-direction: column;
        align-items: stretch;
    }

    .challenge-companion[b-nkblaoxj1l] {
        display: flex;
        justify-content: center;
    }

    /* Cave entrance responsive */
    .cave-mouth[b-nkblaoxj1l] {
        width: 92vw;
        height: clamp(440px, 68vh, 520px);
    }

    .cave-inner-content[b-nkblaoxj1l] {
        top: 30%;
        bottom: 4%;
        padding: 0 8%;
    }

    .cave-entrance-scene .cave-line[b-nkblaoxj1l] {
        font-size: 0.95rem;
    }

    .cave-entrance-scene .cave-line:first-child[b-nkblaoxj1l] {
        font-size: 1.1rem;
    }

    .cave-btn-enter[b-nkblaoxj1l] {
        padding: 14px 36px;
        font-size: 1rem;
    }

    .cave-stalactites span[b-nkblaoxj1l] {
        height: calc(var(--h, 30px) * 0.7);
    }

    .rune[b-nkblaoxj1l] {
        font-size: 0.85rem;
    }

    .cave-ground[b-nkblaoxj1l] {
        width: 95vw;
    }

    /* OB-V-17 (2026-05-10): Aggressive vertical compression for the
       Activation phase on mobile so the companion + "...you found me." +
       reaction line + naming form ALL fit on iPhone Safari without
       requiring a scroll. OB-V-13 enabled scroll as a safety net, but
       Josh confirmed users shouldn't have to scroll at all on this
       cinematic moment — it breaks the "look at me, name me" beat if
       the input + buttons are below the fold.

       Per-element shrinks (mobile-only, activation-phase-only):
         - cave-overlay padding-top/bottom: 4rem → 1.25rem (saves ~88px)
         - cave-screen padding: 1.5rem → 0.5rem top/bottom (saves ~32px)
         - activation-screen gap: 2.5rem → 1rem (saves ~24px between sections)
         - cave-egg-large in activation: 110px → 88px (saves ~22px)
         - cave-egg-large margin-bottom: 2rem → 0.75rem (saves ~20px)
         - activation-text internal gap: 1.5rem → 0.6rem (saves ~14px × 2 = 28px)
         - companion-speech line-height: 1.6 → 1.35 (saves ~10px)
         - companion-first-words font-size: 1.5rem → 1.2rem
       Cumulative savings ~225px — comfortably fits an iPhone safe area
       even with the URL bar visible. */
    .cave-overlay.activation[b-nkblaoxj1l] {
        padding-top: max(1.25rem, env(safe-area-inset-top) + 0.25rem);
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom) + 0.25rem);
    }

    .activation-screen[b-nkblaoxj1l] {
        gap: 1rem;
    }

    .activation-screen .cave-egg-large[b-nkblaoxj1l] {
        width: 88px;
        height: 88px;
        margin-bottom: 0.75rem;
    }

    .activation-screen .cave-egg-avatar[b-nkblaoxj1l] {
        width: 64px;
        height: 64px;
    }

    .activation-screen .activation-text[b-nkblaoxj1l] {
        gap: 0.6rem;
    }

    .activation-screen .companion-first-words[b-nkblaoxj1l] {
        font-size: 1.2rem;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .activation-screen .companion-speech[b-nkblaoxj1l] {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .activation-screen .cave-buttons[b-nkblaoxj1l] {
        margin-top: 0.4rem !important;
        gap: 0.5rem;
    }
}

/* ---- Very small phones / landscape-short viewports ---- */
@media (max-width: 420px), (max-height: 600px) {
    .cave-mouth[b-nkblaoxj1l] {
        width: 94vw;
        height: clamp(420px, 72vh, 500px);
    }

    .cave-inner-content[b-nkblaoxj1l] {
        top: 26%;
        bottom: 4%;
        padding: 0 7%;
    }

    .cave-entrance-scene .cave-line[b-nkblaoxj1l] {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .cave-entrance-scene .cave-line:first-child[b-nkblaoxj1l] {
        font-size: 1rem;
    }

    .cave-inner-content .cave-text-sequence[b-nkblaoxj1l] {
        gap: 0.4rem;
        margin-bottom: 1rem;
    }

    .cave-btn-enter[b-nkblaoxj1l] {
        padding: 12px 28px;
        font-size: 0.95rem;
    }
}

/* ---- Honor reduced-motion preferences ----
   Every infinite/looping decorative animation in the cave is disabled so
   motion-sensitive users get a static (but still visually complete) scene.
   One-shot entrance animations are intentionally kept so phase transitions
   still feel distinct — they just finish instantly. */
@media (prefers-reduced-motion: reduce) {
    .cave-star[b-nkblaoxj1l],
    .cave-particle[b-nkblaoxj1l],
    .rune[b-nkblaoxj1l],
    .cave-inner-glow[b-nkblaoxj1l],
    .cave-inner-glow-secondary[b-nkblaoxj1l],
    .cave-light-beam[b-nkblaoxj1l],
    .cave-atmosphere[b-nkblaoxj1l],
    .cave-ember[b-nkblaoxj1l],
    .mist-wisp[b-nkblaoxj1l],
    .cave-btn-enter[b-nkblaoxj1l]::after,
    .cave-egg-glow[b-nkblaoxj1l],
    .cave-egg-large.resonating .cave-egg-glow[b-nkblaoxj1l],
    .cave-egg-large.shaking[b-nkblaoxj1l],
    .cave-egg-large.cracking[b-nkblaoxj1l],
    .activation-glow[b-nkblaoxj1l],
    .teach-mystery-shadow[b-nkblaoxj1l],
    .naming-input[b-nkblaoxj1l],
    .share-prompt-sparkle[b-nkblaoxj1l],
    .rewards-shimmer[b-nkblaoxj1l],
    .cave-rec-dot[b-nkblaoxj1l],
    .cave-rec-dot-pulse[b-nkblaoxj1l] {
        animation: none !important;
    }

    /* Skip transition curtain and fade-ins entirely */
    .phase-transition-curtain[b-nkblaoxj1l],
    .fade-in[b-nkblaoxj1l],
    .cave-exit-confirm[b-nkblaoxj1l] {
        animation: none !important;
    }

    .fade-in[b-nkblaoxj1l] {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Awakening burst and particles: show final state instantly */
    .activation-burst[b-nkblaoxj1l] {
        animation: none !important;
        opacity: 0 !important;
    }

    .cave-egg-large.burst[b-nkblaoxj1l] {
        animation: none !important;
        transform: scale(0) !important;
        opacity: 0 !important;
    }

    .cave-egg-large.revealed[b-nkblaoxj1l] {
        animation: none !important;
    }

    /* Typewriter: show full text immediately */
    .companion-first-words.typewriter[b-nkblaoxj1l] {
        animation: none !important;
        width: 100% !important;
        opacity: 1 !important;
    }

    /* Screen shake: disable for motion-sensitive users */
    .cave-overlay.screen-shake[b-nkblaoxj1l] {
        animation: none !important;
    }

    /* Incantation: show all letters lit, skip pulse animations */
    .incantation-letter[b-nkblaoxj1l] {
        color: rgba(251, 191, 36, 0.9) !important;
        animation: none !important;
    }

    .incantation-glyph[b-nkblaoxj1l] {
        animation: none !important;
    }

    /* Skip hint, warmth bar, nudge animations */
    .cave-skip-hint[b-nkblaoxj1l],
    .cave-incantation-nudge[b-nkblaoxj1l] {
        animation: none !important;
        opacity: 1 !important;
    }

    /* Cursor tracking: disable all parallax */
    .cave-egg-tracked .cave-egg-glow[b-nkblaoxj1l],
    .cave-egg-tracked .cave-egg-avatar[b-nkblaoxj1l],
    .cave-mouth .cave-atmosphere[b-nkblaoxj1l],
    .cave-mouth .cave-inner-glow[b-nkblaoxj1l],
    .cave-mouth .cave-inner-glow-secondary[b-nkblaoxj1l],
    .cave-mouth .cave-stalactites[b-nkblaoxj1l],
    .cave-mouth .cave-embers[b-nkblaoxj1l],
    .cave-mouth .cave-inner-content[b-nkblaoxj1l] {
        transform: none !important;
    }

    .cave-mouth .cave-inner-glow[b-nkblaoxj1l],
    .cave-mouth .cave-inner-glow-secondary[b-nkblaoxj1l] {
        transform: translateX(-50%) !important;
    }
}

/* ---- Naming Phase ---- */
.naming-screen[b-nkblaoxj1l] {
    flex-direction: column;
    gap: 1rem;
    max-height: 90vh;
    overflow-y: auto;
    justify-content: flex-start;
    padding-top: 3rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 191, 36, 0.2) transparent;
}

.naming-screen[b-nkblaoxj1l]::-webkit-scrollbar {
    width: 4px;
}

.naming-screen[b-nkblaoxj1l]::-webkit-scrollbar-track {
    background: transparent;
}

.naming-screen[b-nkblaoxj1l]::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.2);
    border-radius: 4px;
}

.naming-input-wrapper[b-nkblaoxj1l] {
    margin-top: 0.5rem;
}

/* OB-CAVE-FORGE (2026-06-28): the Goal Forge screen (name + decompose sub-steps)
   lays out naturally and lets the outer .cave-overlay handle any scroll
   (.cave-overlay.goalforge is in the scroll-enabled list above), instead of being
   its own scroll container like .naming-screen. Reusing .naming-screen here gave
   the multi-input decompose step a stray inner scrollbar (cf. OB-V-13: the overlay
   should be the single scrolling surface). No max-height / overflow here. */
.forge-screen[b-nkblaoxj1l] {
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}

.naming-input[b-nkblaoxj1l] {
    animation: naming-glow-pulse-b-nkblaoxj1l 2s ease-in-out infinite;
}

@keyframes naming-glow-pulse-b-nkblaoxj1l {
    0%, 100% {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.15);
    }
    50% {
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.35), 0 0 60px rgba(251, 191, 36, 0.1);
    }
}

/* =============================================
   Naming Phase — Actions Row
   ============================================= */
.naming-actions[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.cave-btn-share-prompt[b-nkblaoxj1l] {
    background: transparent;
    border: none;
    color: rgba(251, 191, 36, 0.65);
    font-size: 0.88rem;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 50px;
    transition: color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cave-btn-share-prompt:hover[b-nkblaoxj1l] {
    color: rgba(251, 191, 36, 0.95);
    transform: scale(1.04);
}

.share-prompt-sparkle[b-nkblaoxj1l] {
    animation: sparkle-pulse-b-nkblaoxj1l 2s ease-in-out infinite;
}

@keyframes sparkle-pulse-b-nkblaoxj1l {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* =============================================
   Share Your Awakening Card
   ============================================= */
.share-activation-card[b-nkblaoxj1l] {
    width: 100%;
    max-width: 360px;
    margin: 1rem auto 0;
}

.share-card-inner[b-nkblaoxj1l] {
    background: linear-gradient(145deg,
        rgba(251, 191, 36, 0.08) 0%,
        rgba(99, 102, 241, 0.06) 50%,
        rgba(251, 191, 36, 0.04) 100%);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 24px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer overlay */
.share-card-inner[b-nkblaoxj1l]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(251, 191, 36, 0.06) 45%,
        rgba(251, 191, 36, 0.1) 50%,
        rgba(251, 191, 36, 0.06) 55%,
        transparent 60%
    );
    animation: card-shimmer-b-nkblaoxj1l 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes card-shimmer-b-nkblaoxj1l {
    0% { transform: translateX(-150%); }
    50%, 100% { transform: translateX(150%); }
}

.share-card-header[b-nkblaoxj1l] {
    margin-bottom: 1rem;
}

.share-card-badge[b-nkblaoxj1l] {
    display: inline-block;
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 50px;
    padding: 4px 16px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(251, 191, 36, 0.9);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.share-card-avatar[b-nkblaoxj1l] {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

.share-card-name[b-nkblaoxj1l] {
    font-size: 1.35rem;
    color: #f0e6d2;
    margin: 0.5rem 0 0.25rem;
}

.share-card-name strong[b-nkblaoxj1l] {
    color: rgba(251, 191, 36, 0.95);
}

.share-card-tagline[b-nkblaoxj1l] {
    font-size: 0.85rem;
    color: rgba(240, 230, 210, 0.45);
    margin: 0;
    font-style: italic;
}

.share-card-divider[b-nkblaoxj1l] {
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.3), transparent);
    margin: 0.75rem auto;
}

.share-card-cta-text[b-nkblaoxj1l] {
    font-size: 0.9rem;
    color: rgba(240, 230, 210, 0.65);
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

/* ---- Social share buttons ---- */
.share-buttons-row[b-nkblaoxj1l] {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.share-btn-social[b-nkblaoxj1l] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(240, 230, 210, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 230, 210, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.share-btn-social:hover[b-nkblaoxj1l] {
    transform: scale(1.1);
}

.share-twitter:hover[b-nkblaoxj1l] {
    background: rgba(29, 161, 242, 0.15);
    border-color: rgba(29, 161, 242, 0.4);
    color: #1da1f2;
}

.share-linkedin:hover[b-nkblaoxj1l] {
    background: rgba(0, 119, 181, 0.15);
    border-color: rgba(0, 119, 181, 0.4);
    color: #0077b5;
}

.share-email:hover[b-nkblaoxj1l] {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.4);
    color: rgba(251, 191, 36, 0.9);
}

.share-copy:hover[b-nkblaoxj1l] {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
}

.share-copied-confirm[b-nkblaoxj1l] {
    font-size: 0.8rem;
    color: #34d399;
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* =============================================
   Screen Recording Integration
   ============================================= */

/* ---- REC badge (top-right corner of cave overlay) ---- */
.cave-recording-badge[b-nkblaoxj1l] {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10001;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(20, 12, 34, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 24px;
    padding: 0.4rem 1rem 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ef4444;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
    animation: cave-fade-in-b-nkblaoxj1l 0.5s ease forwards;
}

.cave-rec-dot-pulse[b-nkblaoxj1l] {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: rec-pulse-b-nkblaoxj1l 1.5s ease-in-out infinite;
}

@keyframes rec-pulse-b-nkblaoxj1l {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    50% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ---- Static red dot (ready indicator in record button) ---- */
.cave-rec-dot[b-nkblaoxj1l] {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    animation: rec-pulse-b-nkblaoxj1l 1.5s ease-in-out infinite;
}

/* ---- "Record this experience" button ---- */
.cave-btn-record[b-nkblaoxj1l] {
    background: transparent;
    border: none;
    color: rgba(240, 230, 210, 0.45);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.cave-btn-record:hover[b-nkblaoxj1l] {
    color: rgba(240, 230, 210, 0.85);
}

/* ---- Recording result (Payoff phase) ---- */
.cave-recording-result[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: rgba(30, 20, 50, 0.6);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
}

.recording-result-label[b-nkblaoxj1l] {
    font-size: 1rem;
    color: rgba(240, 230, 210, 0.85);
    margin: 0;
}

.cave-video-preview[b-nkblaoxj1l] {
    width: 100%;
    max-width: 440px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.15);
    background: #000;
}

.cave-btn-download[b-nkblaoxj1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #1a0e2e;
    padding: 12px 32px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    letter-spacing: 0.03em;
}

.cave-btn-download:hover[b-nkblaoxj1l] {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.4);
}

/* ---- Memory Saved Badge (Payoff phase) ---- */
.memory-saved-badge[b-nkblaoxj1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: rgba(251, 191, 36, 0.9);
    letter-spacing: 0.02em;
    margin-top: 0.5rem;
    opacity: 0;
    animation: fade-in 0.6s ease forwards 0.3s;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .share-activation-card[b-nkblaoxj1l] {
        max-width: 100%;
    }

    .share-card-inner[b-nkblaoxj1l] {
        padding: 1.5rem 1rem;
    }

    .share-card-name[b-nkblaoxj1l] {
        font-size: 1.15rem;
    }

    .cave-recording-badge[b-nkblaoxj1l] {
        top: 1rem;
        right: 1rem;
        font-size: 0.7rem;
        padding: 0.3rem 0.75rem 0.3rem 0.5rem;
    }

    .cave-recording-result[b-nkblaoxj1l] {
        padding: 1rem;
    }

    .cave-video-preview[b-nkblaoxj1l] {
        max-width: 100%;
    }
}

/* ============================================
   🌍 WORLD PICKER PHASE (OB-V-11, 2026-05-10)
   Final phase before Payoff. Companion presents 6 themed worlds in a
   3×2 card grid; clicking a card live-previews the theme behind the
   picker; "Enter this world" commits + advances to Payoff.
   ============================================ */

.world-picker-screen[b-nkblaoxj1l] {
    /* Inherits .cave-screen layout (flex column, centered, gap, etc.) */
}

.world-picker-content[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 720px;
    width: 100%;
    text-align: center;
}

.world-picker-companion[b-nkblaoxj1l] {
    /* Companion floats above the title; size handled by CompanionEntity. */
    margin-bottom: 0.25rem;
    animation: world-picker-companion-pop-b-nkblaoxj1l 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes world-picker-companion-pop-b-nkblaoxj1l {
    0% { opacity: 0; transform: scale(0.7) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.world-picker-title[b-nkblaoxj1l] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
    color: rgba(245, 238, 222, 0.95);
    letter-spacing: 0.01em;
    animation: slide-fade-in-b-nkblaoxj1l 0.5s ease 0.25s both;
}

.world-picker-subtitle[b-nkblaoxj1l] {
    font-size: 0.95rem;
    color: rgba(245, 238, 222, 0.7);
    margin: 0 0 0.5rem 0;
    animation: slide-fade-in-b-nkblaoxj1l 0.5s ease 0.4s both;
}

@keyframes slide-fade-in-b-nkblaoxj1l {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 3×2 card grid ---- */
.world-grid[b-nkblaoxj1l] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
    width: 100%;
    margin: 0.25rem 0 0.5rem;
    animation: slide-fade-in-b-nkblaoxj1l 0.5s ease 0.55s both;
}

.world-card[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1.1rem 0.85rem;
    min-height: 130px;
    border-radius: 14px;
    border: 1.5px solid rgba(251, 191, 36, 0.2);
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.02) 100%);
    color: rgba(245, 238, 222, 0.92);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.25s ease;
    text-align: center;
    font-family: inherit;
}

.world-card:hover:not(:disabled)[b-nkblaoxj1l] {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(251, 191, 36, 0.55);
    background: linear-gradient(145deg,
        rgba(251, 191, 36, 0.08) 0%,
        rgba(99, 102, 241, 0.05) 100%);
    box-shadow: 0 4px 18px rgba(251, 191, 36, 0.18);
}

.world-card.selected[b-nkblaoxj1l] {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.95);
    background: linear-gradient(145deg,
        rgba(251, 191, 36, 0.14) 0%,
        rgba(99, 102, 241, 0.08) 100%);
    box-shadow: 0 0 24px rgba(251, 191, 36, 0.35), inset 0 0 12px rgba(251, 191, 36, 0.08);
}

.world-emoji[b-nkblaoxj1l] {
    font-size: 2rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.world-name[b-nkblaoxj1l] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.world-blurb[b-nkblaoxj1l] {
    font-size: 0.78rem;
    color: rgba(245, 238, 222, 0.6);
    line-height: 1.35;
    max-width: 12ch;
}

/* ---- Actions row ---- */
.world-picker-actions[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    animation: slide-fade-in-b-nkblaoxj1l 0.5s ease 0.7s both;
}

.world-skip-btn[b-nkblaoxj1l] {
    /* `cave-btn-secondary` provides the base styling; this is just a hook
       for any picker-specific overrides we want later. */
    font-size: 0.88rem;
}

/* ============================================
   📱 World picker — mobile (≤640px)
   2×3 grid, smaller cards.
   ============================================ */
@media (max-width: 640px) {
    .world-picker-title[b-nkblaoxj1l] {
        font-size: 1.35rem;
    }
    .world-picker-subtitle[b-nkblaoxj1l] {
        font-size: 0.88rem;
    }
    .world-grid[b-nkblaoxj1l] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.7rem;
    }
    .world-card[b-nkblaoxj1l] {
        min-height: 110px;
        padding: 0.85rem 0.6rem;
    }
    .world-emoji[b-nkblaoxj1l] {
        font-size: 1.7rem;
    }
    .world-name[b-nkblaoxj1l] {
        font-size: 0.92rem;
    }
    .world-blurb[b-nkblaoxj1l] {
        font-size: 0.72rem;
    }
}

/* ============================================
   ♿ Reduced motion: kill the entrance animations
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .world-picker-companion[b-nkblaoxj1l],
    .world-picker-title[b-nkblaoxj1l],
    .world-picker-subtitle[b-nkblaoxj1l],
    .world-grid[b-nkblaoxj1l],
    .world-picker-actions[b-nkblaoxj1l] {
        animation: none !important;
    }
    .world-card[b-nkblaoxj1l] {
        transition: border-color 0.15s ease, background 0.15s ease;
    }
    .world-card:hover:not(:disabled)[b-nkblaoxj1l],
    .world-card.selected[b-nkblaoxj1l] {
        transform: none;
    }
}

/* OB-EXIT-1 (2026-06-30): persistent, discoverable exit (top-right). Subtle so it doesn't
   compete with the journey, but always reachable. Opens the "Leave the cave?" confirm.
   Same corner as the REC badge — REC is demo-capture-only, so no real-user clash. */
.cave-exit-btn[b-nkblaoxj1l] {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 10001;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(20, 12, 34, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cave-exit-btn:hover[b-nkblaoxj1l] {
    background: rgba(20, 12, 34, 0.85);
    border-color: rgba(251, 191, 36, 0.6);
    color: #fff;
}

.cave-exit-btn:focus-visible[b-nkblaoxj1l] {
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .cave-exit-btn[b-nkblaoxj1l] {
        top: 1rem;
        right: 1rem;
        font-size: 0.72rem;
        padding: 0.3rem 0.7rem;
    }
}

/* ============================================
   OB-VOICE-1 (2026-07-01): optional voice picker on the Naming reveal.
   Quiet, secondary to "Let's Begin →" — chips read as a light assist, not a
   required step. Amber selected state matches the cave palette (cf. .cave-exit-btn).
   ============================================ */
.cave-voice-picker[b-nkblaoxj1l] {
    margin: 1.25rem auto 0.25rem;
    max-width: 30rem;
    text-align: center;
}

.cave-voice-prompt[b-nkblaoxj1l] {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.cave-voice-optional[b-nkblaoxj1l] {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.cave-voice-chips[b-nkblaoxj1l] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

.cave-voice-chip[b-nkblaoxj1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    padding: 0.38rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.cave-voice-chip:hover:not(:disabled)[b-nkblaoxj1l] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(251, 191, 36, 0.55);
    color: #fff;
}

.cave-voice-chip:focus-visible[b-nkblaoxj1l] {
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: 2px;
}

.cave-voice-chip:disabled[b-nkblaoxj1l] {
    opacity: 0.55;
    cursor: default;
}

.cave-voice-chip.is-selected[b-nkblaoxj1l] {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.9);
    color: #fde68a;
}

.cave-voice-check[b-nkblaoxj1l] {
    font-size: 0.7rem;
    line-height: 1;
}

.cave-voice-note[b-nkblaoxj1l] {
    margin: 0.55rem 0 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* OB-VOICE-3 (2026-07-01): "Skip — surprise me" under the awakening-step picker — reveals the
   naming prompt without choosing a voice (→ nova default). Quiet text link, not a button. */
/* OB-VOICE-5.1 (2026-07-01): tapping a chip only previews — this confirm row is what advances. */
.cave-voice-actions[b-nkblaoxj1l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.7rem;
}

.cave-voice-confirm[b-nkblaoxj1l] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(251, 191, 36, 0.18);
    border: 1px solid rgba(251, 191, 36, 0.9);
    border-radius: 999px;
    padding: 0.42rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fde68a;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}

.cave-voice-confirm:hover:not(:disabled)[b-nkblaoxj1l] {
    background: rgba(251, 191, 36, 0.28);
    transform: translateY(-1px);
}

.cave-voice-confirm:focus-visible[b-nkblaoxj1l] {
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: 2px;
}

.cave-voice-confirm:disabled[b-nkblaoxj1l] {
    opacity: 0.55;
    cursor: default;
}

.cave-voice-skip[b-nkblaoxj1l] {
    margin: 0.1rem auto 0;
    display: inline-block;
    background: none;
    border: none;
    padding: 0.2rem 0.4rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cave-voice-skip:hover[b-nkblaoxj1l] {
    color: rgba(255, 255, 255, 0.8);
}

.cave-voice-skip:focus-visible[b-nkblaoxj1l] {
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (max-width: 600px) {
    .cave-voice-prompt[b-nkblaoxj1l] { font-size: 0.8rem; }
    .cave-voice-chip[b-nkblaoxj1l] { font-size: 0.76rem; padding: 0.34rem 0.7rem; }
}

/* OB-VOICE-5 (2026-07-01): the entrance-screen `.cave-sound-toggle` was removed — the sound
   opt-in now lives in the awakening voice picker (.cave-voice-*). Styles deleted with it. */
/* /Components/Onboarding/GlowingEgg.razor.rz.scp.css */
/* ============================================
   GLOWING EGG - Dashboard persistent element
   ============================================ */
.onboarding-egg-wrapper[b-r1kykzikgw] {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    transition: transform 0.3s ease;
}

.onboarding-egg-wrapper:hover[b-r1kykzikgw] {
    transform: scale(1.12);
}

.onboarding-egg-wrapper:hover .egg-tooltip[b-r1kykzikgw] {
    opacity: 1;
    transform: translateX(-110%) translateY(-50%) scale(1);
}

.egg-container[b-r1kykzikgw] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 191, 36, 0.1);
    border: 2px solid rgba(251, 191, 36, 0.3);
    position: relative;
    z-index: 2;
    animation: egg-bob-b-r1kykzikgw 3s ease-in-out infinite;
}

.egg-container[b-r1kykzikgw]  .companion-avatar {
    --avatar-size: 32px;
}

.egg-glow-outer[b-r1kykzikgw] {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    z-index: 1;
    animation: egg-glow-pulse-b-r1kykzikgw 2.5s ease-in-out infinite;
}

/* Intensity levels */
.intensity-0 .egg-glow-outer[b-r1kykzikgw] {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
}
.intensity-0 .egg-container[b-r1kykzikgw] {
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

.intensity-1 .egg-glow-outer[b-r1kykzikgw] {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
}
.intensity-1 .egg-container[b-r1kykzikgw] {
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.3);
}

.intensity-2 .egg-glow-outer[b-r1kykzikgw] {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, transparent 70%);
}
.intensity-2 .egg-container[b-r1kykzikgw] {
    box-shadow: 0 0 35px rgba(251, 191, 36, 0.4);
    border-color: rgba(251, 191, 36, 0.5);
}

.intensity-3 .egg-glow-outer[b-r1kykzikgw] {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.45) 0%, transparent 70%);
}
.intensity-3 .egg-container[b-r1kykzikgw] {
    box-shadow: 0 0 45px rgba(251, 191, 36, 0.5);
    border-color: rgba(251, 191, 36, 0.6);
}

/* Tooltip */
.egg-tooltip[b-r1kykzikgw] {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateX(-100%) translateY(-50%) scale(0.95);
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.9);
    color: rgba(251, 191, 36, 0.9);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0;
    transition: all 0.25s ease;
    pointer-events: none;
    margin-right: 8px;
    border: 1px solid rgba(251, 191, 36, 0.2);
}

/* Particles for higher intensity */
.egg-particles-mini[b-r1kykzikgw] {
    position: absolute;
    inset: -4px;
    pointer-events: none;
    z-index: 3;
}

.egg-particles-mini .particle[b-r1kykzikgw] {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(251, 191, 36, 0.8);
    border-radius: 50%;
    animation: particle-rise-b-r1kykzikgw 2.5s ease-out infinite;
}

.egg-particles-mini .particle:nth-child(1)[b-r1kykzikgw] { left: 20%; bottom: 0; animation-delay: 0s; }
.egg-particles-mini .particle:nth-child(2)[b-r1kykzikgw] { left: 50%; bottom: 0; animation-delay: 0.8s; }
.egg-particles-mini .particle:nth-child(3)[b-r1kykzikgw] { left: 80%; bottom: 0; animation-delay: 1.6s; }

@keyframes egg-bob-b-r1kykzikgw {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes egg-glow-pulse-b-r1kykzikgw {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
}

@keyframes particle-rise-b-r1kykzikgw {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(-40px) scale(0); opacity: 0; }
}

/* Mobile */
@media (max-width: 768px) {
    /* OB-V-14 (2026-05-10): Bumped bottom 80px → 168px to clear the
       CompanionPeek (which sits at bottom:12px, 56×56) AND its JS canvas
       orbital-particle zone (particles drift ~30-50px outside the visible
       avatar). Pre-fix the gold egg sat at center-y ≈ 104px from bottom,
       INSIDE the companion's orbital zone (extends to ~110px). User
       finger lands on a visible particle and the tap doesn't register
       on the egg. Pushed to bottom:168px so the egg's bottom edge clears
       the orbit zone with ~58px of breathing room.

       Also added a `::before` hit-target extension (inset: -8px) so the
       effective tap area is 64×64 instead of 48×48 — comfortably above
       iOS's 44×44 minimum and gives users a wider "near miss" tolerance. */
    .onboarding-egg-wrapper[b-r1kykzikgw] {
        bottom: 168px;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .onboarding-egg-wrapper[b-r1kykzikgw]::before {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        /* Invisible — purely a tap-target extension. Inherits the parent's
           click handler via event bubbling. */
    }

    .egg-container[b-r1kykzikgw] {
        width: 40px;
        height: 40px;
    }

    .egg-container[b-r1kykzikgw]  .companion-avatar {
        --avatar-size: 26px;
    }

    .egg-tooltip[b-r1kykzikgw] {
        display: none;
    }
}

/* ---- Honor reduced-motion preferences ---- */
@media (prefers-reduced-motion: reduce) {
    .egg-container[b-r1kykzikgw],
    .egg-glow-outer[b-r1kykzikgw],
    .egg-particles-mini .particle[b-r1kykzikgw],
    .onboarding-egg-wrapper[b-r1kykzikgw] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Onboarding/OnboardingDialogCompanion.razor.rz.scp.css */
/* OB-COMPANION-SHARED-1 (2026-06-30): styles for the reusable onboarding-step companion.
   Extracted/renamed from NoteDialog's .note-onboarding-companion + .note-companion-bubble so all
   chain steps share one look. */

/* ── Orb (inline) ───────────────────────────────────────────────────────────────
   Sits INLINE at the top of the form body, centered, directly above its speech bubble. Inline rather
   than position:fixed so it lands correctly for ANY dialog height (Note is full-height; Goal/Objective/
   Task/Time are shorter centered dialogs where a viewport-anchored float would sit too high above the
   card). pointer-events:none so it never intercepts clicks. Gentle fade-in + bob give it life. */
.ob-companion-orb[b-x6k4kg1azo] {
    display: flex;
    justify-content: center;
    margin: 0.15rem auto 0.4rem;
    pointer-events: none;
    filter: drop-shadow(0 6px 22px rgba(251, 191, 36, 0.35));
    animation: ob-companion-in-b-x6k4kg1azo 0.5s ease-out both, ob-companion-bob-b-x6k4kg1azo 4s ease-in-out 0.5s infinite;
    will-change: transform;
}

@keyframes ob-companion-in-b-x6k4kg1azo {
    from { opacity: 0; transform: translateY(-10px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ob-companion-bob-b-x6k4kg1azo {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* ── Speech bubble ──────────────────────────────────────────────────────────────
   Sits at the top of the form body (above the primary input), so it never covers inputs. The upward
   tail gestures toward the orb perched over the dialog top. Mood classes tint it to match the orb's
   face; re-keying on the line text replays the slide-in. Words are spans so the karaoke layer can
   bold them as they're read. */
.ob-companion-bubble[b-x6k4kg1azo] {
    position: relative;
    margin: 0.25rem 0 1.1rem;
    padding: 0.7rem 2rem 0.7rem 0.95rem; /* extra right room for the audio toggle */
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #312e2b;
    background: #fff7ec;
    border: 1px solid rgba(251, 191, 36, 0.35);
    box-shadow: 0 4px 14px rgba(251, 191, 36, 0.12);
    animation: ob-bubble-in-b-x6k4kg1azo 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Tail: a small triangle on the top edge, pointing up toward the orb. */
.ob-companion-bubble[b-x6k4kg1azo]::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 28px;
    width: 12px;
    height: 12px;
    background: inherit;
    border-left: inherit;
    border-top: inherit;
    transform: rotate(45deg);
    border-top-left-radius: 3px;
}

/* OB-COMPANION-SHARED-1: tap-to-toggle sound button, top-right of the bubble. Amber when on, muted
   grey when off. pointer-events:auto (the orb above it is none) so it's always clickable. */
.ob-companion-audio-toggle[b-x6k4kg1azo] {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    color: #9ca3af;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.15s ease, color 0.15s ease;
}

.ob-companion-audio-toggle:hover[b-x6k4kg1azo] { background: rgba(0, 0, 0, 0.1); }
.ob-companion-audio-toggle.is-on[b-x6k4kg1azo] { color: #d97706; }

.is-dark .ob-companion-audio-toggle[b-x6k4kg1azo] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

.is-dark .ob-companion-audio-toggle:hover[b-x6k4kg1azo] {
    background: rgba(255, 255, 255, 0.2);
}

.is-dark .ob-companion-audio-toggle.is-on[b-x6k4kg1azo] {
    color: #fbbf24;
}

/* Karaoke: the word the voice has reached (and everything before it) bolds. Smooth so the sweep reads
   as "lighting up" rather than snapping. Only ever applied while audio is actually playing. */
.ob-companion-bubble span[b-x6k4kg1azo] {
    transition: font-weight 0.08s linear, color 0.12s ease;
}

.ob-companion-bubble span.spoken[b-x6k4kg1azo] {
    font-weight: 700;
    color: #1f1c19;
}

/* Mood tints — subtle; the text + orb face carry the tone. */
.ob-companion-bubble.is-happy[b-x6k4kg1azo] {
    background: #f1faf2;
    border-color: rgba(34, 197, 94, 0.3);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.12);
}

.ob-companion-bubble.is-celebrating[b-x6k4kg1azo] {
    background: #fff4d6;
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.2);
}

/* Dark themes mirror the form-input treatment: translucent panel + light text. */
.is-dark .ob-companion-bubble[b-x6k4kg1azo] {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}

.is-dark .ob-companion-bubble span.spoken[b-x6k4kg1azo] {
    color: #fff;
}

.is-dark .ob-companion-bubble.is-happy[b-x6k4kg1azo] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.32);
}

.is-dark .ob-companion-bubble.is-celebrating[b-x6k4kg1azo] {
    background: rgba(245, 158, 11, 0.16);
    border-color: rgba(245, 158, 11, 0.45);
}

@keyframes ob-bubble-in-b-x6k4kg1azo {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ob-companion-orb[b-x6k4kg1azo] { animation: ob-companion-in-b-x6k4kg1azo 0.4s ease-out both; }
    .ob-companion-bubble[b-x6k4kg1azo] { animation: none; }
    .ob-companion-bubble span[b-x6k4kg1azo] { transition: none; }
}
/* /Components/Onboarding/ProChainBuilder.razor.rz.scp.css */
/* PRO-CHAIN-BUILD-1 (2026-06-29): Professional chain-builder overlay. Clean/de-gamified
   (no companion, no cinematic cave chrome). Theme-aware via --theme-* (all 8 themes). */

.pcb-overlay[b-okakicq8hr] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.pcb-card[b-okakicq8hr] {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.pcb-close[b-okakicq8hr] {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    background: transparent;
    border: none;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.pcb-close:hover[b-okakicq8hr] {
    color: var(--theme-text-primary, #1f2937);
}

/* ── Progress rail ── */
.pcb-rail[b-okakicq8hr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.pcb-node[b-okakicq8hr] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 9px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #ffffff);
    opacity: 0.45;
    transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pcb-node.is-done[b-okakicq8hr] {
    opacity: 1;
}

.pcb-node.is-active[b-okakicq8hr] {
    opacity: 1;
    border-color: var(--theme-primary, #3b82f6);
    transform: translateY(-2px);
}

.pcb-connector[b-okakicq8hr] {
    color: var(--theme-text-muted, #cbd5e1);
    font-size: 0.85rem;
}

.pcb-connector.is-done[b-okakicq8hr] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

/* ── Content ── */
.pcb-eyebrow[b-okakicq8hr] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

.pcb-title[b-okakicq8hr] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary, #1f2937);
}

.pcb-sub[b-okakicq8hr] {
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.55;
    max-width: 44ch;
}

.pcb-input[b-okakicq8hr] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--theme-border, #cbd5e1);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1f2937);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    resize: vertical;
}

.pcb-input:focus[b-okakicq8hr] {
    outline: none;
    border-color: var(--theme-primary, #3b82f6);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary, #3b82f6) 25%, transparent);
}

.pcb-actions[b-okakicq8hr] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.pcb-actions .nts-btn.primary[b-okakicq8hr] {
    min-width: 180px;
}

@media (max-width: 560px) {
    .pcb-card[b-okakicq8hr] { padding: 2rem 1.25rem 1.5rem; }
    .pcb-title[b-okakicq8hr] { font-size: 1.25rem; }
    /* MOBILE-1 (2026-09-08): was column-reverse (primary at the bottom for thumb reach), which put
       Skip / "I'll log time later" ABOVE the primary - the escape hatch read as the action. Primary first. */
    .pcb-actions[b-okakicq8hr] { flex-direction: column; width: 100%; }
    .pcb-actions .nts-btn[b-okakicq8hr] { width: 100%; }
}
/* /Components/Onboarding/QuestCompletionCelebration.razor.rz.scp.css */
/* ============================================
   QUEST COMPLETION CELEBRATION
   Cinematic celebration modal for completing
   the 3-quest onboarding journey.
   Staggered entrance animation:
   0ms     → Companion glow + ring
   300ms   → Title
   700ms   → Companion message
   1000ms  → Quest checkmarks (staggered)
   1600ms  → Rewards card
   2200ms  → Action buttons
   ============================================ */

/* ---- Nebula + vignette on top of the modal's solid base color ----
   z-index: 0 sits above the modal's own background-color but below any
   content (which uses z-index: 1). The old `z-index: -1` hid these behind
   the solid base once the modal became its own stacking context. */
/* Background gradient baked directly into the modal — no separate ::before
   layer, which eliminates the split/bleed-through between pseudo-element
   and modal backgrounds. */

/* ---- Slow-drifting aurora layer for subtle depth ---- */
.celebration-modal[b-dxpsu3yrbw]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 30% at 20% 30%, rgba(168, 85, 247, 0.10) 0%, transparent 70%),
        radial-gradient(ellipse 35% 25% at 80% 70%, rgba(52, 211, 153, 0.08) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: aurora-drift-b-dxpsu3yrbw 18s ease-in-out infinite;
}

@keyframes aurora-drift-b-dxpsu3yrbw {
    0%, 100% { transform: translate(0, 0); opacity: 0.8; }
    50% { transform: translate(2%, -1.5%); opacity: 1; }
}

/* ---- Unified focus-visible rings for every celebration interaction ---- */
.celebration-btn-primary:focus-visible[b-dxpsu3yrbw],
.celebration-btn-secondary:focus-visible[b-dxpsu3yrbw],
.celebration-btn-share-toggle:focus-visible[b-dxpsu3yrbw],
.celebration-btn-download:focus-visible[b-dxpsu3yrbw],
.celebration-share-btn:focus-visible[b-dxpsu3yrbw] {
    outline: 2px solid rgba(251, 191, 36, 0.9);
    outline-offset: 3px;
}

.celebration-share-btn:focus-visible[b-dxpsu3yrbw] {
    /* Small circular buttons — tighter offset matches shape. */
    outline-offset: 2px;
}

/* ---- Modal container ---- */
/* The celebration screen is its own top-level immersive overlay, not a card
   inside the cave scroller. Fixed + solid background guarantees no dashboard
   bleed-through and independent scroll at any zoom level. */
.celebration-modal[b-dxpsu3yrbw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 10000;
    background:
        radial-gradient(ellipse 65% 45% at 50% 0%, rgba(99, 102, 241, 0.22) 0%, transparent 65%),
        radial-gradient(ellipse 80% 60% at 50% 100%, rgba(251, 191, 36, 0.16) 0%, transparent 60%),
        radial-gradient(ellipse at center, #2a1540 0%, #1a0e2e 32%, #0a0612 65%, #000 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* `safe center` centers content vertically when it fits the viewport
       but pins to the top (scrollable) when it overflows — without this
       the modal rendered content at flex-start with empty space below. */
    justify-content: safe center;
    text-align: center;
    gap: 0.85rem;
    overflow-y: auto;
    overflow-x: hidden;
    isolation: isolate;
    padding:
        max(4rem, env(safe-area-inset-top) + 1rem)
        max(1.25rem, env(safe-area-inset-right))
        max(4rem, env(safe-area-inset-bottom) + 1rem)
        max(1.25rem, env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 191, 36, 0.2) transparent;
    animation: celebration-entrance-b-dxpsu3yrbw 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.celebration-modal[b-dxpsu3yrbw]::-webkit-scrollbar {
    width: 6px;
}

.celebration-modal[b-dxpsu3yrbw]::-webkit-scrollbar-track {
    background: transparent;
}

.celebration-modal[b-dxpsu3yrbw]::-webkit-scrollbar-thumb {
    background: rgba(251, 191, 36, 0.2);
    border-radius: 3px;
}


@keyframes celebration-entrance-b-dxpsu3yrbw {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   Firework Particles
   ============================================ */
.celebration-fireworks[b-dxpsu3yrbw] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}

.firework-spark[b-dxpsu3yrbw] {
    position: absolute;
    width: var(--size, 3px);
    height: var(--size, 3px);
    background: hsl(var(--hue, 45), 85%, 65%);
    border-radius: 50%;
    box-shadow: 0 0 8px hsl(var(--hue, 45), 85%, 65%);
    animation: firework-fly-b-dxpsu3yrbw 1.8s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) forwards;
    opacity: 0;
}

@keyframes firework-fly-b-dxpsu3yrbw {
    0% {
        transform: rotate(var(--angle, 0deg)) translateY(0);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    70% {
        opacity: 0.6;
    }
    100% {
        transform: rotate(var(--angle, 0deg)) translateY(calc(-1 * var(--distance, 100px)));
        opacity: 0;
    }
}

/* ============================================
   Companion Celebration
   ============================================ */
.celebration-companion-wrapper[b-dxpsu3yrbw] {
    position: relative;
    margin-bottom: 0.25rem;
    z-index: 1;
    /* Hold the avatar's size in the flex column so it never collapses
       when content overflows or a short viewport tries to shrink it. */
    flex-shrink: 0;
    animation: companion-pop-b-dxpsu3yrbw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes companion-pop-b-dxpsu3yrbw {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    60% {
        transform: scale(1.15);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.celebration-companion-glow[b-dxpsu3yrbw] {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(251, 191, 36, 0.35) 0%,
        rgba(99, 102, 241, 0.15) 40%,
        transparent 70%);
    animation: celebration-glow-pulse-b-dxpsu3yrbw 2.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes celebration-glow-pulse-b-dxpsu3yrbw {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.celebration-companion-ring[b-dxpsu3yrbw] {
    position: absolute;
    inset: -16px;
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.3);
    animation: ring-expand-b-dxpsu3yrbw 1.5s ease-out 0.3s both;
    pointer-events: none;
}

/* ---- Perpetual float on the entity itself (separate transform stack
       from the wrapper's entrance pop so they don't collide) ---- */
.celebration-companion-float[b-dxpsu3yrbw] {
    animation: companion-float-b-dxpsu3yrbw 4.5s ease-in-out 1s infinite;
}

@keyframes companion-float-b-dxpsu3yrbw {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes ring-expand-b-dxpsu3yrbw {
    0% {
        transform: scale(0.5);
        opacity: 0;
        border-width: 4px;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
        border-width: 1px;
    }
}

/* ============================================
   Title
   ============================================ */
.celebration-title[b-dxpsu3yrbw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 1;
    animation: slide-fade-in-b-dxpsu3yrbw 0.6s ease 0.3s both;
}

.celebration-title h2[b-dxpsu3yrbw] {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.02em;
}

/* OB-V-10 (2026-05-10): .celebration-emoji rules removed — confetti emojis
   no longer rendered around the title. The matching @keyframes emoji-bounce
   was removed too. */

/* ---- Subtitle ("Your workspace is yours from here.") ---- */
.celebration-subtitle[b-dxpsu3yrbw] {
    font-size: 0.95rem;
    color: rgba(245, 238, 222, 0.72);
    margin: -0.3rem 0 0 0;
    z-index: 1;
    letter-spacing: 0.01em;
    animation: slide-fade-in-b-dxpsu3yrbw 0.6s ease 0.55s both;
}

/* ============================================
   Companion Message
   ============================================ */
.celebration-message[b-dxpsu3yrbw] {
    font-size: 1.05rem;
    color: rgba(245, 238, 222, 0.95);
    line-height: 1.75;
    max-width: 480px;
    margin: 0;
    z-index: 1;
    animation: slide-fade-in-b-dxpsu3yrbw 0.6s ease 0.7s both;
}

/* OB-KARAOKE-CAVE-1 (2026-06-30): word-by-word highlight for the payoff line, synced to narration. */
.celebration-message span[b-dxpsu3yrbw] {
    transition: color 0.12s ease;
}

.celebration-message span.spoken[b-dxpsu3yrbw] {
    color: #fff;
    font-weight: 700;
}

/* ============================================
   Main Quest line (OB-CAVE-FORGE) — the goal forged in-cave,
   surfaced as the headline of the payoff. Amber to read as the
   "Main Quest" accent used elsewhere; sits between the companion
   message and the 3-challenge summary.
   ============================================ */
.celebration-mainquest[b-dxpsu3yrbw] {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(251, 191, 36, 0.95);
    line-height: 1.5;
    max-width: 480px;
    margin: 0;
    z-index: 1;
    text-wrap: balance;
    animation: slide-fade-in-b-dxpsu3yrbw 0.6s ease 0.78s both;
}

@keyframes slide-fade-in-b-dxpsu3yrbw {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Quest Summary
   ============================================ */
.celebration-quest-summary[b-dxpsu3yrbw] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    max-width: 480px;
    margin: 0.35rem 0;
    z-index: 1;
}

.quest-summary-item[b-dxpsu3yrbw] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1.25rem;
    background: linear-gradient(135deg,
        rgba(52, 211, 153, 0.05) 0%,
        rgba(255, 255, 255, 0.025) 100%);
    border: 1px solid rgba(52, 211, 153, 0.14);
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    animation: quest-check-in-b-dxpsu3yrbw 0.4s ease calc(1.0s + var(--stagger) * 0.2s) both;
}

@keyframes quest-check-in-b-dxpsu3yrbw {
    from {
        opacity: 0;
        transform: translateX(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.quest-check[b-dxpsu3yrbw] {
    font-size: 1.25rem;
    flex-shrink: 0;
    animation: check-pop-b-dxpsu3yrbw 0.3s ease calc(1.2s + var(--stagger) * 0.2s) both;
}

@keyframes check-pop-b-dxpsu3yrbw {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.quest-label[b-dxpsu3yrbw] {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(245, 238, 222, 0.92);
    text-align: left;
}

/* ============================================
   Rewards Card
   ============================================ */
.celebration-rewards[b-dxpsu3yrbw] {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(145deg,
        rgba(251, 191, 36, 0.08) 0%,
        rgba(99, 102, 241, 0.06) 50%,
        rgba(52, 211, 153, 0.04) 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    z-index: 1;
    animation: reward-card-in-b-dxpsu3yrbw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

@keyframes reward-card-in-b-dxpsu3yrbw {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rewards-shimmer[b-dxpsu3yrbw] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(251, 191, 36, 0.08) 45%,
        rgba(251, 191, 36, 0.14) 50%,
        rgba(251, 191, 36, 0.08) 55%,
        transparent 60%
    );
    animation: shimmer-sweep-b-dxpsu3yrbw 3.5s ease-in-out 2s infinite;
    pointer-events: none;
}

@keyframes shimmer-sweep-b-dxpsu3yrbw {
    0% { transform: translateX(-150%); }
    50%, 100% { transform: translateX(150%); }
}

/* OB-V-10 (2026-05-10): Stacked rows replace the inline two-column .reward-row.
   Each reward now has a one-line explainer; the divider is gone (rows already
   read as discrete units). The old .reward-row + .reward-divider rules are
   retained for back-compat in case any other surface still renders the legacy
   shape; can be removed once we confirm no callers remain. */
.reward-stack[b-dxpsu3yrbw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.reward-row[b-dxpsu3yrbw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.reward-item[b-dxpsu3yrbw] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    text-align: left;
}

.reward-icon[b-dxpsu3yrbw] {
    font-size: 1.5rem;
    line-height: 1.3;
    flex-shrink: 0;
}

.reward-details[b-dxpsu3yrbw] {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 0.15rem;
    min-width: 0;
}

.reward-headline[b-dxpsu3yrbw] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.reward-amount[b-dxpsu3yrbw] {
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.reward-amount.energy[b-dxpsu3yrbw] {
    color: rgba(251, 191, 36, 1);
    text-shadow: 0 0 16px rgba(251, 191, 36, 0.4);
}

.reward-amount.credits[b-dxpsu3yrbw] {
    color: #34d399;
    text-shadow: 0 0 16px rgba(52, 211, 153, 0.4);
}

.reward-label[b-dxpsu3yrbw] {
    font-size: 0.78rem;
    color: rgba(245, 238, 222, 0.78);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: normal;
    line-height: 1.4;
}

/* OB-V-10: One-line "what's this for" beneath each reward headline.
   Sentence-case (not uppercase) so the eye separates the explainer from the
   label above it without re-reading. */
.reward-explainer[b-dxpsu3yrbw] {
    font-size: 0.85rem;
    color: rgba(245, 238, 222, 0.65);
    line-height: 1.5;
}

.reward-divider[b-dxpsu3yrbw] {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent, rgba(240, 230, 210, 0.15), transparent);
    flex-shrink: 0;
}

/* ============================================
   Screen Recording
   ============================================ */
.celebration-recording[b-dxpsu3yrbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0;
    padding: 1.25rem;
    background: rgba(30, 20, 50, 0.6);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    z-index: 1;
}

.recording-label[b-dxpsu3yrbw] {
    font-size: 0.95rem;
    color: rgba(240, 230, 210, 0.85);
    margin: 0;
}

.recording-preview[b-dxpsu3yrbw] {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    border: 1px solid rgba(251, 191, 36, 0.15);
    background: #000;
}

.celebration-btn-download[b-dxpsu3yrbw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #1a0e2e;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.celebration-btn-download:hover[b-dxpsu3yrbw] {
    transform: scale(1.05);
    box-shadow: 0 0 24px rgba(251, 191, 36, 0.4);
}

/* ============================================
   Memory Saved
   ============================================ */
.celebration-memory-badge[b-dxpsu3yrbw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    color: rgba(251, 191, 36, 0.9);
    letter-spacing: 0.02em;
    margin: 0;
    z-index: 1;
}

.celebration-btn-secondary[b-dxpsu3yrbw] {
    background: transparent;
    color: rgba(240, 230, 210, 0.5);
    border: 1px solid rgba(240, 230, 210, 0.15);
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    z-index: 1;
}

.celebration-btn-secondary:hover[b-dxpsu3yrbw] {
    color: rgba(240, 230, 210, 0.8);
    border-color: rgba(240, 230, 210, 0.3);
}

/* ============================================
   Actions
   ============================================ */
.celebration-actions[b-dxpsu3yrbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
    z-index: 1;
    animation: slide-fade-in-b-dxpsu3yrbw 0.5s ease 2.2s both;
}

.celebration-btn-primary[b-dxpsu3yrbw] {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #1a0e2e;
    border: none;
    padding: 14px 44px;
    border-radius: 50px;
    font-size: 1.08rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    letter-spacing: 0.03em;
    position: relative;
    overflow: hidden;
}

.celebration-btn-primary[b-dxpsu3yrbw]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 100%
    );
    transform: translateX(-100%);
    animation: btn-shine-b-dxpsu3yrbw 3s ease-in-out 2.5s infinite;
}

@keyframes btn-shine-b-dxpsu3yrbw {
    0% { transform: translateX(-100%); }
    30%, 100% { transform: translateX(100%); }
}

.celebration-btn-primary:hover[b-dxpsu3yrbw] {
    transform: scale(1.06);
    box-shadow: 0 0 36px rgba(251, 191, 36, 0.45);
}

.celebration-btn-share-toggle[b-dxpsu3yrbw] {
    background: transparent;
    border: none;
    color: rgba(251, 191, 36, 0.6);
    font-size: 0.88rem;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 50px;
    transition: color 0.3s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.celebration-btn-share-toggle:hover[b-dxpsu3yrbw] {
    color: rgba(251, 191, 36, 0.95);
    transform: scale(1.04);
}

.share-sparkle[b-dxpsu3yrbw] {
    animation: sparkle-pulse-b-dxpsu3yrbw 2s ease-in-out infinite;
}

@keyframes sparkle-pulse-b-dxpsu3yrbw {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* ============================================
   Share Section
   ============================================ */
.celebration-share[b-dxpsu3yrbw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.share-label[b-dxpsu3yrbw] {
    font-size: 0.88rem;
    color: rgba(245, 238, 222, 0.72);
    margin: 0;
}

.celebration-share-row[b-dxpsu3yrbw] {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.celebration-share-btn[b-dxpsu3yrbw] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(240, 230, 210, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(240, 230, 210, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.celebration-share-btn:hover[b-dxpsu3yrbw] {
    transform: scale(1.1);
}

.celebration-share-btn.twitter:hover[b-dxpsu3yrbw] {
    background: rgba(29, 161, 242, 0.15);
    border-color: rgba(29, 161, 242, 0.4);
    color: #1da1f2;
}

.celebration-share-btn.linkedin:hover[b-dxpsu3yrbw] {
    background: rgba(0, 119, 181, 0.15);
    border-color: rgba(0, 119, 181, 0.4);
    color: #0077b5;
}

.celebration-share-btn.email:hover[b-dxpsu3yrbw] {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.4);
    color: rgba(251, 191, 36, 0.9);
}

.celebration-share-btn.copy:hover[b-dxpsu3yrbw] {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.4);
    color: #34d399;
}

.celebration-copied-confirm[b-dxpsu3yrbw] {
    font-size: 0.8rem;
    color: #34d399;
    margin: 0;
}

/* ============================================
   Shared Utility
   ============================================ */
.fade-in[b-dxpsu3yrbw] {
    animation: slide-fade-in-b-dxpsu3yrbw 0.6s ease forwards;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 640px) {
    .celebration-modal[b-dxpsu3yrbw] {
        /* Preserve the 4rem top/bottom budget so the Companion and actions
           never get clipped at high zoom on phones. */
        padding:
            max(4rem, env(safe-area-inset-top) + 1rem)
            max(0.75rem, env(safe-area-inset-right))
            max(4rem, env(safe-area-inset-bottom) + 1rem)
            max(0.75rem, env(safe-area-inset-left));
    }

    .celebration-title h2[b-dxpsu3yrbw] {
        font-size: 1.4rem;
        line-height: 1.25;
    }

    .celebration-subtitle[b-dxpsu3yrbw] {
        font-size: 0.88rem;
    }

    .celebration-message[b-dxpsu3yrbw] {
        font-size: 0.98rem;
        line-height: 1.65;
    }

    /* ---- Rewards stack as individual full-width cards on mobile.
       OB-V-10: .reward-stack already uses column flow, so the legacy
       column-flip on .reward-row is no longer needed. ---- */
    .celebration-rewards[b-dxpsu3yrbw] {
        padding: 0.85rem;
        background: transparent;
        border: none;
    }

    .rewards-shimmer[b-dxpsu3yrbw] {
        display: none;
    }

    .reward-stack[b-dxpsu3yrbw] {
        gap: 0.65rem;
    }

    .reward-row[b-dxpsu3yrbw] {
        flex-direction: column;
        gap: 0.65rem;
        align-items: stretch;
    }

    .reward-item[b-dxpsu3yrbw] {
        width: 100%;
        padding: 0.85rem 1rem;
        background: linear-gradient(145deg,
            rgba(251, 191, 36, 0.1) 0%,
            rgba(99, 102, 241, 0.07) 100%);
        border: 1px solid rgba(251, 191, 36, 0.25);
        border-radius: 14px;
        gap: 0.8rem;
    }

    .reward-divider[b-dxpsu3yrbw] {
        display: none;
    }

    .reward-label[b-dxpsu3yrbw] {
        max-width: none;
    }

    .reward-explainer[b-dxpsu3yrbw] {
        font-size: 0.82rem;
    }

    .celebration-btn-primary[b-dxpsu3yrbw] {
        padding: 12px 32px;
        font-size: 0.95rem;
    }

    .quest-summary-item[b-dxpsu3yrbw] {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .quest-label[b-dxpsu3yrbw] {
        font-size: 0.95rem;
    }

    .celebration-recording[b-dxpsu3yrbw] {
        padding: 1rem;
    }

    .recording-preview[b-dxpsu3yrbw] {
        max-width: 100%;
    }
}

/* ---- Honor reduced-motion preferences ----
   Every infinite/looping celebration effect is disabled for users who
   request reduced motion. Entrance one-shots (pop, slide-fade-in, ring-
   expand) are intentionally kept so the screen still feels distinct,
   but there's no perpetual pulsing or drifting. */
@media (prefers-reduced-motion: reduce) {
    .celebration-modal[b-dxpsu3yrbw]::before,
    .celebration-modal[b-dxpsu3yrbw]::after,
    .celebration-companion-glow[b-dxpsu3yrbw],
    .celebration-companion-float[b-dxpsu3yrbw],
    .celebration-emoji[b-dxpsu3yrbw],
    .rewards-shimmer[b-dxpsu3yrbw],
    .celebration-btn-primary[b-dxpsu3yrbw]::before,
    .share-sparkle[b-dxpsu3yrbw] {
        animation: none !important;
    }

    /* Firework sparks are a one-shot entrance flourish but involve 24
       simultaneous transforms — skip them entirely under reduced motion. */
    .firework-spark[b-dxpsu3yrbw] {
        display: none;
    }
}
/* /Components/Onboarding/SparkEggInvite.razor.rz.scp.css */
/* ============================================
   SPARK EGG - Onboarding cave entry point
   OB-WELCOME-EGG-1 (2026-06-30): moved here from Home.razor.css so Home + Welcome
   share ONE styled affordance. `fadeInUp` is a global keyframe (bundled into
   NTS_CRM.styles.css) so it resolves on every page that renders this component.
   ============================================ */
.spark-egg-section[b-q8tl486z31] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px;
    position: relative;
    animation: fadeInUp 0.8s ease-out;
}

/*
 * OB-WELCOME-EGG-2 (2026-07-01): the glow/particles/shadow are AMBER (not theme-primary).
 * The egg orb itself (CompanionAvatar `.is-egg .avatar-face`) is hardcoded amber — the "spark"
 * identity — so a theme-primary glow (navy on the light Executive/Cloud Home & Welcome) wrapped
 * the amber orb in a grey wash and the whole thing read as a formless grey blur. Amber glow +
 * amber orb reads as one cohesive warm spark on any background (this inline egg lives on
 * Home/Welcome, not the themed cave, so there's no cool-theme clash to avoid — the old HP-D-1
 * theme-awareness was for the now-removed roaming corner egg). The hint TEXT stays theme-aware
 * below for contrast on light surfaces.
 */
.spark-egg-avatar[b-q8tl486z31] {
    position: relative;
    z-index: 2;
    animation: spark-egg-bob-b-q8tl486z31 3s ease-in-out infinite;
    filter: drop-shadow(0 0 24px rgba(251, 191, 36, 0.45));
}

/* OB-WELCOME-EGG-2 (2026-07-01): the amber spark orb itself — a self-contained glowing sphere
   (radial highlight top-left, warm amber body, inner shadow for depth), with a gentle heartbeat
   pulse so it feels alive. Mirrors the look CompanionAvatar's `.is-egg .avatar-face` was going for. */
.spark-egg-orb[b-q8tl486z31] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
        rgba(255, 224, 138, 0.98) 0%,
        rgba(251, 191, 36, 0.96) 42%,
        rgba(217, 119, 6, 0.92) 100%);
    box-shadow:
        0 6px 22px rgba(251, 191, 36, 0.5),
        inset 0 -6px 12px rgba(180, 83, 9, 0.35),
        inset 0 3px 9px rgba(255, 255, 255, 0.55);
    animation: spark-egg-heartbeat-b-q8tl486z31 2s ease-in-out infinite;
}

@keyframes spark-egg-heartbeat-b-q8tl486z31 {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 6px 22px rgba(251, 191, 36, 0.5), inset 0 -6px 12px rgba(180, 83, 9, 0.35), inset 0 3px 9px rgba(255, 255, 255, 0.55);
    }
    15% {
        transform: scale(1.05);
        box-shadow: 0 6px 34px rgba(251, 191, 36, 0.68), inset 0 -6px 12px rgba(180, 83, 9, 0.35), inset 0 3px 11px rgba(255, 255, 255, 0.65);
    }
    30% { transform: scale(1); }
}

.spark-egg-glow-ring[b-q8tl486z31] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translate(-50%, -70%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);
    animation: spark-egg-glow-b-q8tl486z31 2.5s ease-in-out infinite;
    z-index: 1;
    pointer-events: none;
}

.spark-egg-particles[b-q8tl486z31] {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 3;
}

.spark-particle[b-q8tl486z31] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(251, 191, 36, 0.85);
    border-radius: 50%;
    animation: spark-particle-float-b-q8tl486z31 3s ease-out infinite;
}

.spark-particle:nth-child(1)[b-q8tl486z31] { left: 10%; bottom: 20%; animation-delay: 0s; }
.spark-particle:nth-child(2)[b-q8tl486z31] { left: 30%; bottom: 10%; animation-delay: 0.6s; }
.spark-particle:nth-child(3)[b-q8tl486z31] { left: 50%; bottom: 5%; animation-delay: 1.2s; }
.spark-particle:nth-child(4)[b-q8tl486z31] { left: 70%; bottom: 10%; animation-delay: 1.8s; }
.spark-particle:nth-child(5)[b-q8tl486z31] { left: 90%; bottom: 20%; animation-delay: 2.4s; }

.spark-egg-hint[b-q8tl486z31] {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(var(--theme-primary-rgb, 251, 191, 36), 0.9);
    text-align: center;
    margin: 0;
    animation: fadeInUp 1s ease-out 0.3s both;
    text-shadow: 0 0 12px rgba(var(--theme-primary-rgb, 251, 191, 36), 0.2);
}

.spark-egg-actions[b-q8tl486z31] {
    display: flex;
    gap: 12px;
    animation: fadeInUp 1s ease-out 0.5s both;
}

@keyframes spark-egg-bob-b-q8tl486z31 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes spark-egg-glow-b-q8tl486z31 {
    0%, 100% { transform: translate(-50%, -70%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -70%) scale(1.3); opacity: 1; }
}

@keyframes spark-particle-float-b-q8tl486z31 {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(-50px) scale(0); opacity: 0; }
}

/* HP-D-1: Executive / Cloud (light themes) resolve --theme-primary to a saturated
   enough value; just drop the glow text-shadow on those surfaces. */
.theme-executive .spark-egg-hint[b-q8tl486z31],
.theme-cloud .spark-egg-hint[b-q8tl486z31] {
    text-shadow: none;
}

/* Mobile */
@media (max-width: 768px) {
    .spark-egg-section[b-q8tl486z31] {
        padding: 24px 16px;
    }

    .spark-egg-glow-ring[b-q8tl486z31] {
        width: 110px;
        height: 110px;
    }
}
/* /Components/PasswordAgeReminder.razor.rz.scp.css */
/* PasswordAgeReminder - Password update prompt */

.password-reminder-alert[b-kiu9vcnxuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.alert-content[b-kiu9vcnxuj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    flex: 1;
}

.alert-main[b-kiu9vcnxuj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-icon[b-kiu9vcnxuj] {
    fill: currentColor;
    flex-shrink: 0;
}

.alert-message[b-kiu9vcnxuj] {
    font-size: 0.875rem;
}

.alert-btn[b-kiu9vcnxuj] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.alert-btn:hover[b-kiu9vcnxuj] {
    background: rgba(255, 255, 255, 0.15);
}

.alert-btn svg[b-kiu9vcnxuj] {
    fill: currentColor;
}

.close-btn[b-kiu9vcnxuj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease;
}

.close-btn:hover[b-kiu9vcnxuj] {
    background: rgba(255, 255, 255, 0.15);
}

.close-btn svg[b-kiu9vcnxuj] {
    fill: currentColor;
}
/* /Components/Personalization/PersonaPicker.razor.rz.scp.css */
/*
 * PersonaPicker scoped styles.
 * Colors come from var(--theme-*) tokens in theme-variables.css, so all 8
 * themes (Executive, Cloud, Space, Winter, Nature, Ocean, Mystic, Tron)
 * adapt automatically. Per-persona accent color is passed inline via
 * --persona-accent on each card.
 */

.persona-picker[b-3gyaeci1gr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.persona-picker-title[b-3gyaeci1gr] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

.persona-picker-helper[b-3gyaeci1gr] {
    font-size: 0.95rem;
    color: var(--theme-text-secondary);
    margin: 0;
}

.persona-card-grid[b-3gyaeci1gr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.persona-card[b-3gyaeci1gr] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--theme-surface);
    border: 1.5px solid var(--theme-border);
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease,
                transform 100ms ease, background 160ms ease;
    font: inherit;
    color: inherit;
}

.persona-card:hover[b-3gyaeci1gr] {
    border-color: var(--persona-accent, var(--theme-primary));
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.persona-card:focus-visible[b-3gyaeci1gr] {
    outline: 2px solid var(--persona-accent, var(--theme-primary));
    outline-offset: 2px;
}

.persona-card.selected[b-3gyaeci1gr] {
    border-color: var(--persona-accent, var(--theme-primary));
    background: color-mix(in srgb, var(--persona-accent, var(--theme-primary)) 6%, var(--theme-surface));
    box-shadow: 0 0 0 1px var(--persona-accent, var(--theme-primary));
}

.persona-card.selected.primary[b-3gyaeci1gr] {
    box-shadow: 0 0 0 2px var(--persona-accent, var(--theme-primary));
}

.persona-card-icon[b-3gyaeci1gr] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: color-mix(in srgb, var(--persona-accent, var(--theme-primary)) 14%, transparent);
    border-radius: 10px;
}

.persona-card-body[b-3gyaeci1gr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.persona-card-name[b-3gyaeci1gr] {
    font-weight: 600;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.persona-card-badge[b-3gyaeci1gr] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--persona-accent, var(--theme-primary));
    color: #fff;
}

.persona-card-desc[b-3gyaeci1gr] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

/* .persona-card-vocab* styles were removed 2026-05-01 alongside the
   OB-V-2 terminology-preset retirement. The OB-D-3 vocabulary preview line
   they powered is gone — persona cards now show only icon + name + description. */

.persona-picker-hint[b-3gyaeci1gr] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, var(--theme-text-secondary));
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--theme-primary) 4%, transparent);
    border-radius: 8px;
}

/*
 * Explorer row — visually distinct from the persona cards because it's a
 * different axis (opt-out of the filter entirely). Shown in Settings mode only.
 */
.persona-explorer-row[b-3gyaeci1gr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    background: var(--theme-surface-secondary, var(--theme-surface));
    border: 1px dashed var(--theme-border);
    border-radius: 10px;
    margin-top: 0.25rem;
}

.persona-explorer-copy[b-3gyaeci1gr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.persona-explorer-title[b-3gyaeci1gr] {
    font-weight: 600;
    color: var(--theme-text-primary);
}

.persona-explorer-desc[b-3gyaeci1gr] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

/* iOS-style toggle — same pattern used elsewhere in the app. */
.persona-explorer-toggle[b-3gyaeci1gr] {
    position: relative;
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    cursor: pointer;
}

.persona-explorer-toggle input[b-3gyaeci1gr] {
    opacity: 0;
    width: 0;
    height: 0;
}

.persona-explorer-slider[b-3gyaeci1gr] {
    position: absolute;
    inset: 0;
    background: var(--theme-border);
    border-radius: 999px;
    transition: background 180ms ease;
}

.persona-explorer-slider[b-3gyaeci1gr]::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 180ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.persona-explorer-toggle input:checked + .persona-explorer-slider[b-3gyaeci1gr] {
    background: var(--theme-primary);
}

.persona-explorer-toggle input:checked + .persona-explorer-slider[b-3gyaeci1gr]::before {
    transform: translateX(20px);
}

.persona-explorer-toggle input:focus-visible + .persona-explorer-slider[b-3gyaeci1gr] {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/*
 * Secondary link under the Explorer toggle — "peek at the full catalog" without
 * changing the persona setting. Styled lighter than the toggle row so the
 * toggle stays the primary action on this surface.
 */
.persona-explore-link[b-3gyaeci1gr] {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    text-align: right;
}

.persona-explore-link a[b-3gyaeci1gr] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    font-weight: 500;
    transition: color 150ms ease, text-decoration-color 150ms ease;
    border-bottom: 1px solid transparent;
}

.persona-explore-link a:hover[b-3gyaeci1gr] {
    color: var(--theme-primary-hover, var(--theme-primary));
    border-bottom-color: currentColor;
}

.persona-explore-link a:focus-visible[b-3gyaeci1gr] {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.persona-picker-footer[b-3gyaeci1gr] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Onboarding mode: cards a bit larger for first-impression weight. */
.mode-onboarding .persona-card-grid[b-3gyaeci1gr] {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.mode-onboarding .persona-card[b-3gyaeci1gr] {
    padding: 1.25rem;
}

.mode-onboarding .persona-card-icon[b-3gyaeci1gr] {
    width: 48px;
    height: 48px;
    font-size: 1.75rem;
}

@media (max-width: 640px) {
    .persona-card-grid[b-3gyaeci1gr] {
        grid-template-columns: 1fr;
    }

    .persona-explorer-row[b-3gyaeci1gr] {
        flex-direction: column;
        align-items: flex-start;
    }

    .persona-explore-link[b-3gyaeci1gr] {
        text-align: left;
    }
}
/* /Components/Pipeline/OpportunityDialog.razor.rz.scp.css */
/* ============================================
   OPPORTUNITY DIALOG - SCOPED STYLES
   ============================================ */

.opportunity-form[b-7rz2sbd5xj] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.opportunity-form-group[b-7rz2sbd5xj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.opportunity-form-group label[b-7rz2sbd5xj] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.required-indicator[b-7rz2sbd5xj] {
    color: #ef4444;
}
/* /Components/Poker/BettingControls.razor.rz.scp.css */
.betting-controls[b-9qf827q5g7] {
    background: linear-gradient(to top, rgba(30, 41, 59, 0.98), rgba(30, 41, 59, 0.95));
    padding: 12px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.betting-controls.disabled[b-9qf827q5g7] {
    opacity: 0.8;
}

.controls-layout[b-9qf827q5g7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.my-hand-section[b-9qf827q5g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 160px;
}

.hand-label[b-9qf827q5g7],
.chips-label[b-9qf827q5g7] {
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hand-cards[b-9qf827q5g7] {
    display: flex;
    gap: 6px;
}

.actions-section[b-9qf827q5g7] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.chips-section[b-9qf827q5g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}

.chips-amount[b-9qf827q5g7] {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fbbf24;
}

.pot-info[b-9qf827q5g7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pot-label[b-9qf827q5g7] {
    color: #9ca3af;
    font-size: 0.85rem;
}

.pot-amount[b-9qf827q5g7] {
    color: #fbbf24;
    font-size: 1.3rem;
    font-weight: bold;
}

.action-buttons[b-9qf827q5g7] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: flex-end;
}

.action-btn[b-9qf827q5g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
    font-family: inherit;
}

.action-btn:hover[b-9qf827q5g7] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px transparent;
}

.action-btn:active[b-9qf827q5g7] {
    transform: translateY(0);
}

.btn-icon[b-9qf827q5g7] {
    font-size: 1.2rem;
}

.btn-text[b-9qf827q5g7] {
    font-size: 0.85rem;
    font-weight: 600;
}

.action-btn.fold[b-9qf827q5g7] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
}

.action-btn.check[b-9qf827q5g7] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.action-btn.call[b-9qf827q5g7] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.action-btn.raise[b-9qf827q5g7] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1f2937;
}

.action-btn.all-in[b-9qf827q5g7] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    animation: pulse-b-9qf827q5g7 1.5s infinite;
}

@keyframes pulse-b-9qf827q5g7 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.raise-container[b-9qf827q5g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.raise-slider[b-9qf827q5g7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 200px;
}

.raise-slider input[type="range"][b-9qf827q5g7] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: linear-gradient(to right, #3b82f6, #f59e0b);
    border-radius: 4px;
    outline: none;
}

.raise-slider input[type="range"][b-9qf827q5g7]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px transparent;
}

.raise-presets[b-9qf827q5g7] {
    display: flex;
    gap: 6px;
}

.preset-btn[b-9qf827q5g7] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.preset-btn:hover[b-9qf827q5g7] {
    background: rgba(255, 255, 255, 0.2);
}

.waiting-message[b-9qf827q5g7] {
    text-align: center;
    color: #9ca3af;
    padding: 16px 20px;
}

.waiting-content[b-9qf827q5g7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1rem;
}

.waiting-icon[b-9qf827q5g7] {
    font-size: 1.3rem;
}

.waiting-icon.pulse[b-9qf827q5g7] {
    animation: waitingPulse-b-9qf827q5g7 1.5s ease infinite;
}

@keyframes waitingPulse-b-9qf827q5g7 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.waiting-message strong[b-9qf827q5g7] {
    color: #60a5fa;
    font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .betting-controls[b-9qf827q5g7] {
        padding: 10px 12px;
    }

    .controls-layout[b-9qf827q5g7] {
        flex-direction: column;
        gap: 12px;
    }

    .my-hand-section[b-9qf827q5g7] {
        order: 1;
        min-width: auto;
        flex-direction: row;
        gap: 12px;
    }

    .hand-cards[b-9qf827q5g7] {
        gap: 4px;
    }

    .actions-section[b-9qf827q5g7] {
        order: 2;
        width: 100%;
    }

    .action-buttons[b-9qf827q5g7] {
        width: 100%;
        justify-content: center;
    }

    .action-btn[b-9qf827q5g7] {
        flex: 1;
        max-width: 100px;
        padding: 12px 8px;
        font-size: 0.8rem;
    }

    .action-btn .btn-icon[b-9qf827q5g7] {
        font-size: 1.1rem;
    }

    .chips-section[b-9qf827q5g7] {
        order: 0;
        flex-direction: row;
        min-width: auto;
        gap: 8px;
    }

    .chips-amount[b-9qf827q5g7] {
        font-size: 1rem;
    }

    .pot-info[b-9qf827q5g7] {
        gap: 6px;
    }

    .pot-amount[b-9qf827q5g7] {
        font-size: 1.1rem;
    }

    .raise-slider[b-9qf827q5g7] {
        width: 100%;
        max-width: 250px;
    }

    .raise-presets[b-9qf827q5g7] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .waiting-content[b-9qf827q5g7] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .betting-controls[b-9qf827q5g7] {
        padding: 8px 10px;
    }

    .action-btn[b-9qf827q5g7] {
        padding: 10px 6px;
        font-size: 0.75rem;
        border-radius: 8px;
    }

    .action-btn .btn-icon[b-9qf827q5g7] {
        font-size: 1rem;
    }

    .action-btn .btn-label[b-9qf827q5g7] {
        display: none;
    }

    .chips-amount[b-9qf827q5g7] {
        font-size: 0.9rem;
    }

    .pot-amount[b-9qf827q5g7] {
        font-size: 1rem;
    }

    .hand-label[b-9qf827q5g7],
    .chips-label[b-9qf827q5g7] {
        font-size: 0.6rem;
    }
}
/* /Components/Poker/ConfettiCelebration.razor.rz.scp.css */
.confetti-container[b-zjb62k3box] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-particle[b-zjb62k3box] {
    position: absolute;
    top: -20px;
    border-radius: 2px;
    animation: confettiFall-b-zjb62k3box linear forwards;
}

@keyframes confettiFall-b-zjb62k3box {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}
/* /Components/Poker/EmojiReactions.razor.rz.scp.css */
.emoji-reactions[b-bc30vcedt3] {
    display: flex;
    gap: 4px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 6px 10px;
}

.emoji-btn[b-bc30vcedt3] {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s;
    opacity: 0.7;
}

.emoji-btn:hover[b-bc30vcedt3] {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
    transform: scale(1.2);
}

.emoji-btn.animating[b-bc30vcedt3] {
    animation: emojiPop-b-bc30vcedt3 0.3s ease;
}

@keyframes emojiPop-b-bc30vcedt3 {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

/* Floating reactions */
.floating-reaction[b-bc30vcedt3] {
    position: fixed;
    bottom: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: floatUp-b-bc30vcedt3 2s ease-out forwards;
    pointer-events: none;
    z-index: 1000;
}

.reaction-emoji[b-bc30vcedt3] {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px transparent);
}

.reaction-name[b-bc30vcedt3] {
    font-size: 0.7rem;
    color: white;
    background: transparent;
    padding: 2px 8px;
    border-radius: 10px;
    margin-top: 4px;
}

@keyframes floatUp-b-bc30vcedt3 {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-100px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-200px) scale(0.8);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .emoji-reactions[b-bc30vcedt3] {
        gap: 2px;
        padding: 4px 8px;
        border-radius: 20px;
    }

    .emoji-btn[b-bc30vcedt3] {
        font-size: 1rem;
        padding: 3px 5px;
    }

    .floating-reaction[b-bc30vcedt3] {
        bottom: 150px;
    }

    .reaction-emoji[b-bc30vcedt3] {
        font-size: 2rem;
    }

    .reaction-name[b-bc30vcedt3] {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .emoji-reactions[b-bc30vcedt3] {
        gap: 1px;
        padding: 3px 6px;
    }

    .emoji-btn[b-bc30vcedt3] {
        font-size: 0.9rem;
        padding: 2px 4px;
    }
}
/* /Components/Poker/HandRankings.razor.rz.scp.css */
.hand-rankings[b-ep0pgeflc6] {
    position: fixed;
    top: 100px;
    left: 20px;
    z-index: 200;
}

.toggle-btn[b-ep0pgeflc6] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-btn:hover[b-ep0pgeflc6] {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
}

.rankings-panel[b-ep0pgeflc6] {
    position: absolute;
    top: 50px;
    left: 0;
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    min-width: 280px;
    box-shadow: 0 10px 40px transparent;
    animation: slideIn-b-ep0pgeflc6 0.2s ease;
}

@keyframes slideIn-b-ep0pgeflc6 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rankings-header[b-ep0pgeflc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.rankings-header h4[b-ep0pgeflc6] {
    margin: 0;
    color: #fbbf24;
    font-size: 1rem;
}

.close-btn[b-ep0pgeflc6] {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-ep0pgeflc6] {
    color: white;
}

.rankings-list[b-ep0pgeflc6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rank-item[b-ep0pgeflc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}

.rank-item:hover[b-ep0pgeflc6] {
    background: rgba(255, 255, 255, 0.08);
}

.rank-item.royal[b-ep0pgeflc6] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.rank-item.lowest[b-ep0pgeflc6] {
    opacity: 0.7;
}

.rank-name[b-ep0pgeflc6] {
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
}

.rank-example[b-ep0pgeflc6] {
    font-family: 'Segoe UI Symbol', monospace;
    font-size: 0.75rem;
    color: #9ca3af;
    letter-spacing: 1px;
}

/* Color the suits in examples */
.rank-example[b-ep0pgeflc6] {
    color: #9ca3af;
}
/* /Components/Poker/HandStrengthHelper.razor.rz.scp.css */
.hand-strength[b-n5hh4aqr7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    animation: slideIn-b-n5hh4aqr7c 0.3s ease;
}

@keyframes slideIn-b-n5hh4aqr7c {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.strength-icon[b-n5hh4aqr7c] {
    font-size: 1rem;
}

.strength-name[b-n5hh4aqr7c] {
    white-space: nowrap;
}

/* Strength levels */
.hand-strength.legendary[b-n5hh4aqr7c] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.3));
    border: 1px solid #fbbf24;
    color: #fde68a;
    animation: legendaryPulse-b-n5hh4aqr7c 2s ease infinite;
}

@keyframes legendaryPulse-b-n5hh4aqr7c {
    0%, 100% { box-shadow: 0 0 10px rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.6); }
}

.hand-strength.strong[b-n5hh4aqr7c] {
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid #22c55e;
    color: #86efac;
}

.hand-strength.medium[b-n5hh4aqr7c] {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid #3b82f6;
    color: #93c5fd;
}

.hand-strength.weak[b-n5hh4aqr7c] {
    background: rgba(156, 163, 175, 0.2);
    border: 1px solid #6b7280;
    color: #d1d5db;
}

.hand-strength.minimal[b-n5hh4aqr7c] {
    background: rgba(107, 114, 128, 0.1);
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #9ca3af;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hand-strength[b-n5hh4aqr7c] {
        padding: 6px 12px;
        font-size: 0.75rem;
        border-radius: 16px;
    }

    .strength-icon[b-n5hh4aqr7c] {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .hand-strength[b-n5hh4aqr7c] {
        padding: 4px 10px;
        font-size: 0.7rem;
    }

    .strength-icon[b-n5hh4aqr7c] {
        font-size: 0.8rem;
    }
}
/* /Components/Poker/InvitePlayersDialog.razor.rz.scp.css */
/* ============================================
   INVITE PLAYERS DIALOG STYLES
   ============================================ */

.invite-section[b-p8uat7yymh] {
    margin-bottom: 20px;
}

.invite-section label[b-p8uat7yymh] {
    display: block;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

/* Room Code Display */
.code-display[b-p8uat7yymh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.room-code-large[b-p8uat7yymh] {
    font-size: 2rem;
    font-weight: bold;
    color: var(--theme-accent, #fbbf24);
    letter-spacing: 4px;
    font-family: monospace;
}

.copy-btn[b-p8uat7yymh] {
    background: rgba(var(--theme-primary-rgb), 0.15);
    border: 1px solid var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.copy-btn:hover[b-p8uat7yymh] {
    background: rgba(var(--theme-primary-rgb), 0.25);
}

.hint[b-p8uat7yymh] {
    margin: 8px 0 0;
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

/* Share Link */
.link-display[b-p8uat7yymh] {
    display: flex;
    gap: 8px;
}

.share-link[b-p8uat7yymh] {
    flex: 1;
    background: var(--theme-input-bg, var(--theme-surface));
    border: 1px solid var(--theme-input-border, var(--theme-border));
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--theme-text-secondary);
    font-size: 0.85rem;
    font-family: monospace;
    min-height: 38px;
}

.share-link:focus[b-p8uat7yymh] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
}

/* Share Buttons */
.share-buttons[b-p8uat7yymh] {
    display: flex;
    gap: 12px;
}

.share-btn[b-p8uat7yymh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-secondary, var(--theme-surface));
    color: var(--theme-text-primary);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.share-btn span:first-child[b-p8uat7yymh] {
    font-size: 1.5rem;
}

.share-btn:hover[b-p8uat7yymh] {
    transform: translateY(-2px);
}

.share-btn.email:hover[b-p8uat7yymh] {
    background: rgba(var(--theme-primary-rgb), 0.15);
    border-color: var(--theme-primary);
}

.share-btn.sms:hover[b-p8uat7yymh],
.share-btn.whatsapp:hover[b-p8uat7yymh] {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
}

/* Room Info */
.room-info-box[b-p8uat7yymh] {
    background: var(--theme-surface-secondary, var(--theme-surface));
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 16px;
}

.info-row[b-p8uat7yymh] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--theme-border);
}

.info-row:last-child[b-p8uat7yymh] {
    border-bottom: none;
}

.info-row span:first-child[b-p8uat7yymh] {
    color: var(--theme-text-muted);
}

.info-row span:last-child[b-p8uat7yymh] {
    color: var(--theme-text-primary);
    font-weight: 500;
}

/* Responsive */
@media (max-width: 480px) {
    .room-code-large[b-p8uat7yymh] {
        font-size: 1.5rem;
    }

    .share-buttons[b-p8uat7yymh] {
        flex-wrap: wrap;
    }

    .share-btn[b-p8uat7yymh] {
        min-width: calc(50% - 6px);
    }
}
/* /Components/Poker/KeyboardShortcutsHelp.razor.rz.scp.css */
.shortcuts-overlay[b-cluvl69daf] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-cluvl69daf 0.2s ease;
}

.shortcuts-card[b-cluvl69daf] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px 32px;
    min-width: 320px;
    box-shadow: 0 20px 60px transparent;
}

.shortcuts-header[b-cluvl69daf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shortcuts-header h3[b-cluvl69daf] {
    margin: 0;
    font-size: 1.1rem;
    color: white;
}

.close-btn[b-cluvl69daf] {
    background: none;
    border: none;
    color: #6b7280;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-btn:hover[b-cluvl69daf] {
    color: white;
}

.shortcuts-grid[b-cluvl69daf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.shortcut-item[b-cluvl69daf] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.shortcut-item kbd[b-cluvl69daf] {
    background: linear-gradient(135deg, #374151, #1f2937);
    border: 1px solid #4b5563;
    border-radius: 6px;
    padding: 6px 12px;
    font-family: monospace;
    font-size: 0.9rem;
    color: white;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 2px 0 #1f2937;
}

.shortcut-item span[b-cluvl69daf] {
    color: #9ca3af;
    font-size: 0.9rem;
}

.shortcuts-hint[b-cluvl69daf] {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #6b7280;
}

@keyframes fadeIn-b-cluvl69daf {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Poker/PlayerSeat.razor.rz.scp.css */
.player-seat[b-snjj5hw9me] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.player-seat.current-turn[b-snjj5hw9me] {
    transform: scale(1.05);
}

.player-seat.current-turn .player-info[b-snjj5hw9me] {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
    border-color: #3b82f6;
}

/* Seat positions around the table (8 positions) - tighter for smaller table */
.seat-0[b-snjj5hw9me] { bottom: -5px; left: 50%; transform: translateX(-50%); }
.seat-1[b-snjj5hw9me] { bottom: 10%; left: 3%; }
.seat-2[b-snjj5hw9me] { top: 30%; left: -3%; }
.seat-3[b-snjj5hw9me] { top: 0%; left: 12%; }
.seat-4[b-snjj5hw9me] { top: -5px; left: 50%; transform: translateX(-50%); }
.seat-5[b-snjj5hw9me] { top: 0%; right: 12%; }
.seat-6[b-snjj5hw9me] { top: 30%; right: -3%; }
.seat-7[b-snjj5hw9me] { bottom: 10%; right: 3%; }

.player-info[b-snjj5hw9me] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(30, 41, 59, 0.95);
    padding: 6px 10px;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    min-width: 100px;
}

.player-avatar[b-snjj5hw9me] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
}

.player-avatar.human-player[b-snjj5hw9me] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.player-avatar.ai-player[b-snjj5hw9me] {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.player-details[b-snjj5hw9me] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.player-name[b-snjj5hw9me] {
    color: white;
    font-weight: 600;
    font-size: 0.75rem;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-chips[b-snjj5hw9me] {
    color: #fbbf24;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 3px;
}

.chip-icon[b-snjj5hw9me] {
    font-size: 0.6rem;
}

.player-cards[b-snjj5hw9me] {
    display: flex;
    gap: 2px;
}

.dealer-button[b-snjj5hw9me] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1f2937;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.7rem;
    box-shadow: 0 2px 4px transparent;
    z-index: 10;
}

.player-bet[b-snjj5hw9me] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.seat-0 .player-bet[b-snjj5hw9me] { top: -50px; }
.seat-1 .player-bet[b-snjj5hw9me],
.seat-2 .player-bet[b-snjj5hw9me] { right: -40px; top: 50%; transform: translateY(-50%); }
.seat-3 .player-bet[b-snjj5hw9me],
.seat-4 .player-bet[b-snjj5hw9me],
.seat-5 .player-bet[b-snjj5hw9me] { bottom: -40px; }
.seat-6 .player-bet[b-snjj5hw9me],
.seat-7 .player-bet[b-snjj5hw9me] { left: -40px; top: 50%; transform: translateY(-50%); }

.bet-chips[b-snjj5hw9me] {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 50%;
    border: 2px dashed #fbbf24;
}

.bet-amount[b-snjj5hw9me] {
    background: rgba(0, 0, 0, 0.7);
    color: #fbbf24;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: bold;
}

.action-indicator[b-snjj5hw9me] {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    animation: fadeInUp-b-snjj5hw9me 0.3s ease;
}

.action-indicator.fold[b-snjj5hw9me] { background: #6b7280; color: white; }
.action-indicator.check[b-snjj5hw9me] { background: #10b981; color: white; }
.action-indicator.call[b-snjj5hw9me] { background: #3b82f6; color: white; }
.action-indicator.raise[b-snjj5hw9me] { background: #f59e0b; color: #1f2937; }
.action-indicator.allin[b-snjj5hw9me] { background: #ef4444; color: white; }

.status-overlay[b-snjj5hw9me] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.8rem;
}

.status-overlay.folded[b-snjj5hw9me] {
    background: rgba(107, 114, 128, 0.8);
    color: rgba(255, 255, 255, 0.6);
}

.status-overlay.all-in[b-snjj5hw9me] {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border: 2px solid #ef4444;
}

.status-overlay.disconnected[b-snjj5hw9me] {
    background: rgba(0, 0, 0, 0.7);
    color: #9ca3af;
}

.turn-timer[b-snjj5hw9me] {
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    animation: timerCountdown-b-snjj5hw9me 30s linear forwards;
}

@keyframes timerCountdown-b-snjj5hw9me {
    from { width: 100%; background: #10b981; }
    50% { background: #f59e0b; }
    to { width: 0%; background: #ef4444; }
}

@keyframes fadeInUp-b-snjj5hw9me {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .player-seat[b-snjj5hw9me] {
        gap: 2px;
    }

    /* Tighter seat positions for mobile */
    .seat-0[b-snjj5hw9me] { bottom: -8px; left: 50%; transform: translateX(-50%); }
    .seat-1[b-snjj5hw9me] { bottom: 5%; left: 0%; }
    .seat-2[b-snjj5hw9me] { top: 35%; left: -5%; }
    .seat-3[b-snjj5hw9me] { top: -5%; left: 8%; }
    .seat-4[b-snjj5hw9me] { top: -8px; left: 50%; transform: translateX(-50%); }
    .seat-5[b-snjj5hw9me] { top: -5%; right: 8%; }
    .seat-6[b-snjj5hw9me] { top: 35%; right: -5%; }
    .seat-7[b-snjj5hw9me] { bottom: 5%; right: 0%; }

    .player-info[b-snjj5hw9me] {
        padding: 4px 6px;
        border-radius: 8px;
        min-width: 70px;
        gap: 4px;
    }

    .player-avatar[b-snjj5hw9me] {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }

    .player-name[b-snjj5hw9me] {
        font-size: 0.65rem;
        max-width: 45px;
    }

    .player-chips[b-snjj5hw9me] {
        font-size: 0.6rem;
    }

    .chip-icon[b-snjj5hw9me] {
        display: none;
    }

    .player-cards[b-snjj5hw9me] {
        gap: 1px;
    }

    .dealer-button[b-snjj5hw9me] {
        width: 18px;
        height: 18px;
        font-size: 0.55rem;
        top: -6px;
        right: -6px;
    }

    .player-bet[b-snjj5hw9me] {
        padding: 2px 6px;
        font-size: 0.6rem;
    }

    .action-indicator[b-snjj5hw9me] {
        font-size: 0.5rem;
        padding: 1px 4px;
    }

    .status-overlay[b-snjj5hw9me] {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .seat-0[b-snjj5hw9me] { bottom: -10px; }
    .seat-1[b-snjj5hw9me] { bottom: 0%; left: -2%; }
    .seat-2[b-snjj5hw9me] { top: 38%; left: -8%; }
    .seat-3[b-snjj5hw9me] { top: -8%; left: 5%; }
    .seat-4[b-snjj5hw9me] { top: -10px; }
    .seat-5[b-snjj5hw9me] { top: -8%; right: 5%; }
    .seat-6[b-snjj5hw9me] { top: 38%; right: -8%; }
    .seat-7[b-snjj5hw9me] { bottom: 0%; right: -2%; }

    .player-info[b-snjj5hw9me] {
        padding: 3px 5px;
        min-width: 60px;
    }

    .player-avatar[b-snjj5hw9me] {
        width: 18px;
        height: 18px;
        font-size: 0.55rem;
    }

    .player-name[b-snjj5hw9me] {
        font-size: 0.55rem;
        max-width: 35px;
    }

    .player-chips[b-snjj5hw9me] {
        font-size: 0.5rem;
    }
}
/* /Components/Poker/PlayingCard.razor.rz.scp.css */
.playing-card[b-x60hei69to] {
    position: relative;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.playing-card.card-small[b-x60hei69to] {
    width: 45px;
    height: 63px;
    font-size: 0.7rem;
}

.playing-card.card-medium[b-x60hei69to] {
    width: 70px;
    height: 98px;
    font-size: 1rem;
}

.playing-card.card-large[b-x60hei69to] {
    width: 100px;
    height: 140px;
    font-size: 1.4rem;
}

.playing-card.red[b-x60hei69to] {
    color: #dc2626;
}

.playing-card.black[b-x60hei69to] {
    color: #1f2937;
}

.playing-card.highlighted[b-x60hei69to] {
    transform: translateY(-8px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);
    border: 2px solid #3b82f6;
}

.playing-card.face-down[b-x60hei69to] {
    background: #1e3a5f;
}

.card-back[b-x60hei69to] {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-back-pattern[b-x60hei69to] {
    width: 85%;
    height: 90%;
    background: repeating-linear-gradient(
        45deg,
        #1e3a5f,
        #1e3a5f 4px,
        #2d4a6f 4px,
        #2d4a6f 8px
    );
    border: 2px solid #fbbf24;
    border-radius: 4px;
}

.card-front[b-x60hei69to] {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 4px;
}

.card-corner[b-x60hei69to] {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.card-corner.top-left[b-x60hei69to] {
    top: 4px;
    left: 6px;
}

.card-corner.bottom-right[b-x60hei69to] {
    bottom: 4px;
    right: 6px;
    transform: rotate(180deg);
}

.rank[b-x60hei69to] {
    font-weight: bold;
}

.suit[b-x60hei69to] {
    font-size: 0.8em;
}

.card-center[b-x60hei69to] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.suit-large[b-x60hei69to] {
    font-size: 2em;
}

.card-medium .suit-large[b-x60hei69to] {
    font-size: 2.5em;
}

.card-large .suit-large[b-x60hei69to] {
    font-size: 3.5em;
}

/* Mobile responsive cards */
@media (max-width: 768px) {
    .playing-card[b-x60hei69to] {
        width: 32px;
        height: 45px;
        border-radius: 4px;
        font-size: 0.65rem;
    }

    .playing-card.card-medium[b-x60hei69to] {
        width: 40px;
        height: 56px;
    }

    .playing-card.card-large[b-x60hei69to] {
        width: 50px;
        height: 70px;
    }

    .rank[b-x60hei69to], .suit[b-x60hei69to] {
        font-size: 0.7em;
    }

    .card-corner[b-x60hei69to] {
        padding: 2px;
    }

    .card-back[b-x60hei69to]::after {
        font-size: 1rem;
    }

    .suit-large[b-x60hei69to] {
        font-size: 1.5em;
    }

    .card-medium .suit-large[b-x60hei69to] {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .playing-card[b-x60hei69to] {
        width: 26px;
        height: 36px;
        border-radius: 3px;
    }

    .playing-card.card-medium[b-x60hei69to] {
        width: 34px;
        height: 48px;
    }

    .playing-card.card-large[b-x60hei69to] {
        width: 44px;
        height: 62px;
    }

    .rank[b-x60hei69to], .suit[b-x60hei69to] {
        font-size: 0.6em;
    }

    .suit-large[b-x60hei69to] {
        font-size: 1.2em;
    }
}
/* /Components/Poker/PreActionButtons.razor.rz.scp.css */
.pre-actions[b-8ba43caxh9] {
    display: none;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.pre-actions.visible[b-8ba43caxh9] {
    display: flex;
    opacity: 1;
}

.pre-action-btn[b-8ba43caxh9] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9ca3af;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.pre-action-btn:hover[b-8ba43caxh9] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.pre-action-btn.active[b-8ba43caxh9] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #60a5fa;
}

/* Mobile */
@media (max-width: 768px) {
    .pre-action-btn[b-8ba43caxh9] {
        padding: 5px 10px;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .pre-action-btn[b-8ba43caxh9] {
        padding: 4px 8px;
        font-size: 0.65rem;
    }
}
/* /Components/Poker/RebuyDialog.razor.rz.scp.css */
.rebuy-amount[b-fli0rjx6j5] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
}

.rebuy-label[b-fli0rjx6j5] {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.rebuy-value[b-fli0rjx6j5] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fbbf24;
}

.rebuy-btn[b-fli0rjx6j5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
}

.rebuy-btn span:first-child[b-fli0rjx6j5] {
    font-size: 1.5rem;
}

.rebuy-btn.leave[b-fli0rjx6j5] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.rebuy-btn.leave:hover[b-fli0rjx6j5] {
    background: rgba(255, 255, 255, 0.2);
}

.rebuy-btn.rebuy[b-fli0rjx6j5] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.rebuy-btn.rebuy:hover[b-fli0rjx6j5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}
/* /Components/Poker/SessionStatsPanel.razor.rz.scp.css */
.session-stats[b-3s8tixnppr] {
    position: fixed;
    top: 70px;
    left: 8px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    z-index: 90;
    transition: all 0.2s ease;
}

.stats-toggle[b-3s8tixnppr] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: white;
    padding: 8px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}

.stats-icon[b-3s8tixnppr] {
    font-size: 1rem;
}

.stats-mini[b-3s8tixnppr] {
    font-weight: 600;
    color: #60a5fa;
}

.stats-summary[b-3s8tixnppr] {
    color: #9ca3af;
    font-size: 0.75rem;
}

.stats-content[b-3s8tixnppr] {
    display: flex;
    gap: 16px;
    padding: 0 12px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 4px;
    padding-top: 10px;
}

.stat-item[b-3s8tixnppr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.stat-value[b-3s8tixnppr] {
    font-weight: 600;
    font-size: 0.9rem;
    color: white;
}

.stat-value.positive[b-3s8tixnppr] {
    color: #4ade80;
}

.stat-value.negative[b-3s8tixnppr] {
    color: #f87171;
}

.stat-label[b-3s8tixnppr] {
    font-size: 0.6rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile */
@media (max-width: 768px) {
    .session-stats[b-3s8tixnppr] {
        top: auto;
        bottom: 70px;
        left: 8px;
    }

    .stats-toggle[b-3s8tixnppr] {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .stats-content[b-3s8tixnppr] {
        gap: 12px;
        padding: 0 10px 8px;
    }

    .stat-value[b-3s8tixnppr] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .session-stats.expanded .stats-content[b-3s8tixnppr] {
        flex-wrap: wrap;
        max-width: 140px;
    }

    .stat-item[b-3s8tixnppr] {
        min-width: 50px;
    }
}
/* /Components/Poker/TableThemeSelector.razor.rz.scp.css */
.theme-selector[b-w9g3zwn7ci] {
    position: relative;
}

.theme-toggle[b-w9g3zwn7ci] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.theme-toggle:hover[b-w9g3zwn7ci] {
    background: rgba(255, 255, 255, 0.2);
}

.theme-dropdown[b-w9g3zwn7ci] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    min-width: 180px;
    z-index: 100;
    animation: dropIn-b-w9g3zwn7ci 0.2s ease;
}

@keyframes dropIn-b-w9g3zwn7ci {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-label[b-w9g3zwn7ci] {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-option[b-w9g3zwn7ci] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: none;
    border: none;
    border-radius: 8px;
    color: #d1d5db;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.9rem;
}

.theme-option:hover[b-w9g3zwn7ci] {
    background: rgba(255, 255, 255, 0.1);
}

.theme-option.active[b-w9g3zwn7ci] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.theme-preview[b-w9g3zwn7ci] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}
/* /Components/Poker/TrainingAdvisor.razor.rz.scp.css */
.training-panel[b-9yqeqgq2ut] {
    position: fixed;
    top: 140px;
    left: 16px;
    width: 280px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(124, 58, 237, 0.5);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
    z-index: 100;
    animation: slideIn-b-9yqeqgq2ut 0.3s ease;
}

@keyframes slideIn-b-9yqeqgq2ut {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.training-header[b-9yqeqgq2ut] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(99, 102, 241, 0.3));
    border-bottom: 1px solid rgba(124, 58, 237, 0.3);
    font-weight: 600;
    color: #c4b5fd;
}

.training-icon[b-9yqeqgq2ut] {
    font-size: 1.2rem;
}

.minimize-btn[b-9yqeqgq2ut] {
    margin-left: auto;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px 8px;
}

.minimize-btn:hover[b-9yqeqgq2ut] {
    color: white;
}

.training-content[b-9yqeqgq2ut] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row[b-9yqeqgq2ut] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-label[b-9yqeqgq2ut] {
    font-size: 0.75rem;
    color: #6b7280;
    min-width: 80px;
}

.stat-value[b-9yqeqgq2ut] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

.stat-value.strong[b-9yqeqgq2ut] { color: #22c55e; }
.stat-value.good[b-9yqeqgq2ut] { color: #60a5fa; }
.stat-value.marginal[b-9yqeqgq2ut] { color: #fbbf24; }
.stat-value.weak[b-9yqeqgq2ut] { color: #ef4444; }

.strength-meter[b-9yqeqgq2ut] {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.strength-fill[b-9yqeqgq2ut] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.strength-fill.strong[b-9yqeqgq2ut] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.strength-fill.good[b-9yqeqgq2ut] {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.strength-fill.marginal[b-9yqeqgq2ut] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.strength-fill.weak[b-9yqeqgq2ut] {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.recommendation[b-9yqeqgq2ut] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(124, 58, 237, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.rec-label[b-9yqeqgq2ut] {
    font-size: 0.75rem;
    color: #a5b4fc;
}

.rec-action[b-9yqeqgq2ut] {
    font-weight: bold;
    font-size: 1rem;
}

.rec-action.fold[b-9yqeqgq2ut] { color: #9ca3af; }
.rec-action.check[b-9yqeqgq2ut] { color: #60a5fa; }
.rec-action.call[b-9yqeqgq2ut] { color: #22c55e; }
.rec-action.raise[b-9yqeqgq2ut] { color: #fbbf24; }
.rec-action.allin[b-9yqeqgq2ut] { color: #f87171; }

.reasoning[b-9yqeqgq2ut] {
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.5;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}

.tips-section[b-9yqeqgq2ut] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tip[b-9yqeqgq2ut] {
    font-size: 0.75rem;
    color: #c4b5fd;
    padding: 6px 10px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    border-left: 2px solid #7c3aed;
}

/* Grade popup */
.grade-popup[b-9yqeqgq2ut] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 24px 40px;
    border-radius: 16px;
    text-align: center;
    z-index: 1100;
    animation: gradePopIn-b-9yqeqgq2ut 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes gradePopIn-b-9yqeqgq2ut {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.grade-popup.a[b-9yqeqgq2ut] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.95), rgba(22, 163, 74, 0.95));
    border: 2px solid #4ade80;
    box-shadow: 0 0 40px rgba(34, 197, 94, 0.5);
}

.grade-popup.b[b-9yqeqgq2ut] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.95));
    border: 2px solid #60a5fa;
    box-shadow: 0 0 40px rgba(59, 130, 246, 0.5);
}

.grade-popup.c[b-9yqeqgq2ut] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.95), rgba(217, 119, 6, 0.95));
    border: 2px solid #fbbf24;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.5);
}

.grade-popup.d[b-9yqeqgq2ut] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
    border: 2px solid #f87171;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.5);
}

.grade-emoji[b-9yqeqgq2ut] {
    font-size: 3rem;
    margin-bottom: 8px;
}

.grade-letter[b-9yqeqgq2ut] {
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 8px;
}

.grade-feedback[b-9yqeqgq2ut] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 250px;
}

/* Responsive */
@media (max-width: 768px) {
    .training-panel[b-9yqeqgq2ut] {
        position: fixed;
        top: auto;
        bottom: auto;
        left: 8px;
        right: auto;
        top: 100px;
        width: 200px;
        max-height: 200px;
        overflow-y: auto;
    }

    .training-header[b-9yqeqgq2ut] {
        padding: 8px 10px;
        font-size: 0.8rem;
    }

    .training-icon[b-9yqeqgq2ut] {
        font-size: 1rem;
    }

    .training-content[b-9yqeqgq2ut] {
        padding: 10px;
        gap: 8px;
    }

    .stat-row[b-9yqeqgq2ut] {
        gap: 6px;
    }

    .stat-label[b-9yqeqgq2ut] {
        font-size: 0.65rem;
        min-width: 60px;
    }

    .stat-value[b-9yqeqgq2ut] {
        font-size: 0.75rem;
    }

    .strength-meter[b-9yqeqgq2ut] {
        height: 6px;
    }

    .recommendation[b-9yqeqgq2ut] {
        padding: 8px 10px;
    }

    .rec-label[b-9yqeqgq2ut] {
        font-size: 0.65rem;
    }

    .rec-action[b-9yqeqgq2ut] {
        font-size: 0.85rem;
    }

    .reasoning[b-9yqeqgq2ut] {
        font-size: 0.65rem;
        padding: 6px 8px;
    }

    .tips-section[b-9yqeqgq2ut] {
        display: none; /* Hide tips on mobile to save space */
    }

    /* Grade popup - smaller on mobile */
    .grade-popup[b-9yqeqgq2ut] {
        padding: 16px 24px;
    }

    .grade-emoji[b-9yqeqgq2ut] {
        font-size: 2rem;
    }

    .grade-letter[b-9yqeqgq2ut] {
        font-size: 1.8rem;
    }

    .grade-feedback[b-9yqeqgq2ut] {
        font-size: 0.8rem;
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .training-panel[b-9yqeqgq2ut] {
        width: 160px;
        top: 90px;
        max-height: 180px;
    }

    .training-header[b-9yqeqgq2ut] {
        padding: 6px 8px;
        font-size: 0.7rem;
    }

    .training-header span:nth-child(2)[b-9yqeqgq2ut] {
        display: none; /* Hide "Training Advisor" text */
    }

    .training-content[b-9yqeqgq2ut] {
        padding: 8px;
        gap: 6px;
    }

    .stat-label[b-9yqeqgq2ut] {
        min-width: 50px;
        font-size: 0.6rem;
    }

    .stat-value[b-9yqeqgq2ut] {
        font-size: 0.65rem;
    }

    .recommendation[b-9yqeqgq2ut] {
        padding: 6px 8px;
    }

    .reasoning[b-9yqeqgq2ut] {
        display: none; /* Hide reasoning on very small screens */
    }
}
/* /Components/Poker/TrainingModeToggle.razor.rz.scp.css */
.training-toggle[b-qrccbhwfv8] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: #9ca3af;
    transition: all 0.2s;
}

.training-toggle:hover[b-qrccbhwfv8] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.training-toggle.enabled[b-qrccbhwfv8] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(99, 102, 241, 0.3));
    border-color: #7c3aed;
    color: #c4b5fd;
}

.training-toggle.enabled:hover[b-qrccbhwfv8] {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.4), rgba(99, 102, 241, 0.4));
}

.toggle-icon[b-qrccbhwfv8] {
    font-size: 1rem;
}

.training-toggle.enabled .toggle-icon[b-qrccbhwfv8] {
    animation: iconPulse-b-qrccbhwfv8 2s ease infinite;
}

@keyframes iconPulse-b-qrccbhwfv8 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
/* /Components/Poker/WinnerOverlay.razor.rz.scp.css */
.winner-overlay[b-7dgb0giz6t] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-7dgb0giz6t 0.3s ease;
    cursor: pointer;
}

.winner-card[b-7dgb0giz6t] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #fbbf24;
    border-radius: 24px;
    padding: 40px 60px;
    text-align: center;
    box-shadow: 
        0 0 60px rgba(251, 191, 36, 0.3),
        0 20px 60px transparent;
    animation: popIn-b-7dgb0giz6t 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: default;
}

@keyframes popIn-b-7dgb0giz6t {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.winner-trophy[b-7dgb0giz6t] {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: bounce-b-7dgb0giz6t 1s ease infinite;
}

@keyframes bounce-b-7dgb0giz6t {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.winner-name[b-7dgb0giz6t] {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin-bottom: 8px;
}

.winner-amount[b-7dgb0giz6t] {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 16px;
}

.winner-hand-name[b-7dgb0giz6t] {
    font-size: 1.2rem;
    color: #60a5fa;
    margin-bottom: 20px;
    padding: 8px 20px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    display: inline-block;
}

.winner-cards[b-7dgb0giz6t] {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.winner-hint[b-7dgb0giz6t] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 20px;
}

@keyframes fadeIn-b-7dgb0giz6t {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/ProductivityPanel.razor.rz.scp.css */
/* ============================================
   PRODUCTIVITY PANEL - Edge-Docked Sidebar
   Collapsed: 30px | Expanded: 280px
   ============================================ */

/*
 * PP-Sticky-Fix (2026-05-01): the panel sticks BELOW the header, not at
 * viewport top.
 *
 * Pre-fix `top: 0` competed with the app-header (also `position: sticky;
 * top: 0;` at z-index 1100). The panel has z-index 10 so it sat behind
 * the header — its TOP edge was hidden behind the 56px header band, and
 * its bottom (top + height = 0 + calc(100vh - 56px)) ended 56px short of
 * the viewport bottom. Result: the panel appeared truncated on long-content
 * pages because its visible height was effectively (100vh - 112px), with
 * 56px of empty space at the bottom.
 *
 * Setting `top: var(--header-height, 56px)` parks the panel's sticky edge
 * just below the header so its `height: calc(100vh - 56px)` fills the
 * remaining viewport exactly: top edge at 56px, bottom edge at 100vh.
 * The header still owns the upper 56px (z-index 1100 keeps it above the
 * panel even if their bounding boxes ever overlap during scroll).
 */
.productivity-panel[b-snvsommtbg] {
    position: sticky;
    top: var(--header-height, 56px);
    align-self: flex-start;
    z-index: 10;
    height: calc(100vh - var(--header-height, 56px));
    display: flex;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 30px;
}

.productivity-panel.expanded[b-snvsommtbg] {
    width: 280px;
}

/* --- Edge Tab (collapsed strip) --- */

.edge-tab[b-snvsommtbg] {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 14px;
    cursor: pointer;
    background: transparent;
    border-right: 1px solid var(--theme-border, rgba(255, 255, 255, 0.06));
    transition: background 0.3s ease, border-color 0.3s ease;
    z-index: 2;
}

.edge-tab:hover[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-right-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.productivity-panel.expanded .edge-tab[b-snvsommtbg] {
    opacity: 0;
    pointer-events: none;
}

/* Edge indicators */
.edge-indicator[b-snvsommtbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.4));
    transition: color 0.2s ease;
}

.edge-tab:hover .edge-indicator[b-snvsommtbg] {
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
}

.edge-indicator.tasks[b-snvsommtbg] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.edge-tab:hover .edge-indicator.tasks[b-snvsommtbg] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.edge-badge[b-snvsommtbg] {
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.edge-indicator.transmit[b-snvsommtbg] {
    color: var(--theme-accent, #ec4899);
}

.edge-tab:hover .edge-indicator.transmit[b-snvsommtbg] {
    color: var(--theme-accent, #ec4899);
}

.edge-badge.unread[b-snvsommtbg] {
    color: var(--theme-accent, #ec4899);
}

.edge-chevron[b-snvsommtbg] {
    margin-top: auto;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.2));
    transition: color 0.2s ease, transform 0.3s ease;
}

.edge-tab:hover .edge-chevron[b-snvsommtbg] {
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.5));
    transform: translateX(2px);
}

/* Executive ultra-minimal (professional mode hamburger) */
.productivity-panel.executive .edge-indicator.executive-bar[b-snvsommtbg] {
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.2));
}

.productivity-panel.executive .edge-tab:hover .edge-indicator.executive-bar[b-snvsommtbg] {
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.5));
}

/* --- Expanded Panel Content --- */

/*
 * PP-D-4 (2026-05-01): panel surface flows through theme tokens.
 *
 * Pre-fix the panel's background was hardcoded `rgba(15, 23, 42, 0.92)`
 * (slate-900 with transparency) calibrated for dark-theme defaults.
 * Executive and Cloud had explicit overrides that swapped in a light
 * surface, but Space / Winter / Nature / Ocean (and the admin-only Tron /
 * Mystic) all fell through to the slate value with no theme cohesion.
 * Now the base uses `var(--theme-surface)` with the slate as a fallback —
 * each theme pulls its own surface color. The Executive/Cloud overrides
 * below are preserved because their light-theme treatment uses additional
 * border/shadow tweaks calibrated for the lighter palette.
 */
.panel-content[b-snvsommtbg] {
    position: absolute;
    left: 0;
    top: 0;
    width: 280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 14px;
    background: var(--theme-surface, rgba(15, 23, 42, 0.92));
    backdrop-filter: blur(20px);
    border-right: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
    overflow-y: auto;
    scrollbar-width: none;
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-content[b-snvsommtbg]::-webkit-scrollbar {
    display: none;
}

.productivity-panel.expanded .panel-content[b-snvsommtbg] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/*
 * PP-D-4 (2026-05-01): panel header + close button flow through theme tokens.
 * Same migration shape as .panel-content above. Text colors map through the
 * theme-text-* tokens so dark themes get high-contrast on dark surface and
 * light themes get high-contrast on light surface without any per-theme
 * overrides needed in the base ruleset.
 */
.panel-header[b-snvsommtbg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--theme-border, rgba(255, 255, 255, 0.06));
}

.panel-title[b-snvsommtbg] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.panel-close[b-snvsommtbg] {
    background: none;
    border: none;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.3));
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}

.panel-close:hover[b-snvsommtbg] {
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.7));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

/* --- Stat Cards --- */

/*
 * PP-D-Hotfix (2026-05-01): stat-card surface flows through theme tokens.
 *
 * Pre-fix the card used `rgba(255, 255, 255, 0.04)` background and a similar
 * white-tinted border — fine on dark themes (it created a faint lift from
 * the dark panel surface) but invisible on light themes that lacked the
 * Executive/Cloud override (which uses black overlays). With the panel
 * surface itself now flowing through `var(--theme-surface)`, the card needs
 * a complementary surface that lifts slightly from the panel — that's
 * exactly what `--theme-surface-secondary` is for. Each theme calibrates
 * its own primary/secondary surface pair, so the card automatically reads
 * "slightly different from panel" on all themes.
 */
.stat-card[b-snvsommtbg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--theme-surface-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.06));
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    width: 100%;
    text-align: left;
    color: inherit;
    font-family: inherit;
}

.stat-card:hover[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    transform: translateX(2px);
}

/*
 * PP-D-5 (2026-05-01): focus-visible outline for keyboard navigation.
 *
 * Pre-fix the cards only had :hover styling — keyboard users tabbing
 * through the panel got no visual indication of which card had focus,
 * which violates the standard accessibility expectation that focusable
 * elements have a discoverable focus indicator. :focus-visible is the
 * preferred selector (only fires for keyboard, not mouse-click) so
 * mouse users don't see an outline on every click.
 */
.stat-card:focus-visible[b-snvsommtbg] {
    outline: 2px solid var(--theme-primary, rgba(99, 102, 241, 0.7));
    outline-offset: 2px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}

.stat-card.has-items[b-snvsommtbg] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.stat-icon[b-snvsommtbg] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/*
 * PP-D-2 (2026-05-01): icon backplates collapsed to monochrome theme-primary.
 *
 * Pre-fix .stat-icon.time/goals/objectives/community/credits each had a
 * hardcoded semantic color — green tasks, orange goals, sky-blue objectives,
 * emerald community, amber-orange streak. These read as "rainbow widget set"
 * instead of "coherent panel," and crucially didn't honor the user's chosen
 * theme primary. On Space's deep-blue palette or Winter's frost-blue, the
 * five different warm/cool icons created tonal mismatch.
 *
 * Same play as Home's KPI cards (H-D-2/3/4): collapse to a single
 * theme-primary-tinted backplate, let the SVG icon shapes carry semantic
 * differentiation. The four original modifier classes (.tasks, .time,
 * .goals, .objectives, etc.) are kept on the markup so theme-specific or
 * future per-icon overrides can re-introduce semantic tinting without
 * touching the markup.
 */
.stat-icon.tasks[b-snvsommtbg],
.stat-icon.time[b-snvsommtbg],
.stat-icon.goals[b-snvsommtbg],
.stat-icon.objectives[b-snvsommtbg],
.stat-icon.transmit[b-snvsommtbg],
.stat-icon.community[b-snvsommtbg],
.stat-icon.credits[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* --- Streak Card ---
 * The flame is preserved as a literal emoji (no SVG path) — emoji rendering
 * isn't theme-able, so the flame stays visually warm regardless of theme
 * primary. The backplate + value text still flow through theme tokens so the
 * card frame harmonizes with the rest of the panel; only the emoji itself
 * stays "warm" because the streak concept is inherently a celebration accent.
 */
.stat-icon.streak[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 251, 146, 60), 0.15);
}

.streak-flame[b-snvsommtbg] {
    font-size: 1rem;
    line-height: 1;
    filter: drop-shadow(0 0 4px rgba(var(--theme-primary-rgb, 251, 146, 60), 0.4));
}

.streak-card .stat-value[b-snvsommtbg] {
    color: var(--theme-primary-ink, var(--theme-primary, #fb923c));
}

.stat-badge.unread[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 239, 68, 68), 0.15);
    color: var(--theme-primary-ink, var(--theme-primary, #ef4444));
    animation: unread-pulse-b-snvsommtbg 2s ease-in-out infinite;
}

@keyframes unread-pulse-b-snvsommtbg {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.stat-data[b-snvsommtbg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/*
 * PP-D-Hotfix (2026-05-01): stat text colors now flow through theme tokens.
 *
 * The earlier PP-D-4 migration moved the panel SURFACE to var(--theme-surface)
 * but left .stat-value / .stat-label / .stat-secondary text at white-by-default
 * with overrides for Executive and Cloud only. On Nature (and any other
 * lightish theme that doesn't have an explicit override), the panel surface
 * resolved to a light color while the text stayed white-on-default — making
 * the text invisible. Hoisting the text colors to theme-text-* tokens means
 * every theme calibrates text contrast against its own surface automatically;
 * no more per-theme overrides needed for the text colors.
 *
 * The Executive/Cloud .stat-value / .stat-label / .stat-secondary overrides
 * further down become redundant after this and can be removed in a cleanup
 * pass — but keeping them as a safety net for now since they explicitly set
 * the right values and don't conflict.
 */
.stat-value[b-snvsommtbg] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.9));
    line-height: 1.2;
}

.stat-label[b-snvsommtbg] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.4));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/*
 * H-D-1 (2026-05-01): nav-tile layout for sidebar cards that act as
 * "tap to enter" destinations rather than numeric stat displays. Used
 * by the Pulse Community card. Single-line title + trailing chevron;
 * sits at the same height as numeric stat cards but doesn't pretend
 * to be one.
 *
 * The chevron animates outward on hover to telegraph the navigation
 * affordance — same gesture as `browse-packages-link` on Home.razor.css.
 */
.stat-card-nav[b-snvsommtbg] {
    /* Inherits the stat-card box-shadow / radius; the only delta is the
       inner data layout below. */
}

/* PP-D-Hotfix-2: nav-tile title + arrow flow through theme tokens.
   Same root cause as the .stat-value / .stat-label hotfix above —
   white-only-default rendered invisible against the now-themed panel
   surface on Nature and any other lightish theme without an override. */
.stat-nav-title[b-snvsommtbg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.85));
    line-height: 1.3;
    /* No uppercase / letter-spacing — reads as a destination name, not
       a numeric stat label. */
}

.stat-nav-arrow[b-snvsommtbg] {
    font-size: 1rem;
    line-height: 1;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.4));
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.stat-card-nav:hover .stat-nav-arrow[b-snvsommtbg] {
    transform: translateX(2px);
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
}

/*
 * PP-V-1 (2026-05-01): empty state shown when the user has toggled every
 * card off (HasNoVisibleCards() === true in the markup gate). Keeps the
 * panel feeling alive with a soft icon + brief copy + one-tap CTA back to
 * the settings panel where they can flip a card back on. Theme tokens so
 * it harmonizes regardless of theme.
 */
.panel-empty-state[b-snvsommtbg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 28px 18px;
    margin: 8px 0;
    border-radius: 12px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.05);
    border: 1px dashed rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.panel-empty-icon[b-snvsommtbg] {
    color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.55);
    margin-bottom: 4px;
}

.panel-empty-title[b-snvsommtbg] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.9));
    margin: 0;
}

.panel-empty-body[b-snvsommtbg] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.55));
    margin: 0;
}

.panel-empty-cta[b-snvsommtbg] {
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.5);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.panel-empty-cta:hover[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    transform: translateY(-1px);
}

.panel-empty-cta:focus-visible[b-snvsommtbg] {
    outline: 2px solid var(--theme-primary, rgba(99, 102, 241, 0.7));
    outline-offset: 2px;
}

/*
 * PP-V-2 (2026-05-01): inline cap hint for the Quick Links picker. Sits
 * between the section title (which shows the running "(N / M)" count) and
 * the option grid. Two states: "Pick up to N" while below cap, "Limit
 * reached — remove one to add another" when at-cap.
 */
.settings-cap-hint[b-snvsommtbg] {
    display: block;
    font-size: 0.72rem;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.45));
    line-height: 1.4;
    margin: -2px 0 8px;
    padding: 0 2px;
}

.stat-badge[b-snvsommtbg] {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}

.stat-badge.success[b-snvsommtbg] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

/* Status badge (inline with label) */
.stat-label-with-status[b-snvsommtbg] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stat-label-with-status .stat-label[b-snvsommtbg] {
    margin: 0;
}

.status-badge[b-snvsommtbg] {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.4;
}

/*
 * PP-D-3 (2026-05-01): status badges flow through theme tokens.
 *
 * The original Executive/Cloud overrides used semantic-success/danger tokens
 * which the design system defines per-theme. Hoisted those tokens up to the
 * base ruleset so all 8 themes (including Space, Winter, Nature, Ocean, plus
 * admin Tron / Mystic) get the same well-calibrated badge treatment. The
 * urgent-red on overdue / unread-badge is preserved as semantic intent
 * (overdue/unread should pop alarmingly regardless of theme accent), but
 * uses the theme-text-danger token so dark/light themes get the right
 * brightness automatically.
 *
 * Note: .in-progress is no longer rendered after PP-D-1 dropped the always-on
 * "IN PROGRESS" badge from Goals/Objectives. Rule kept in case future
 * callers want it; can be removed in a cleanup pass.
 */
.status-badge.in-progress[b-snvsommtbg] {
    background: var(--theme-bg-success, rgba(22, 163, 74, 0.08));
    color: var(--theme-text-success, #15803d);
}

.status-badge.due-today[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.status-badge.overdue[b-snvsommtbg] {
    background: var(--theme-bg-danger, rgba(220, 38, 38, 0.08));
    color: var(--theme-text-danger, #dc2626);
}

.status-badge.unread-badge[b-snvsommtbg] {
    background: var(--theme-bg-danger, rgba(220, 38, 38, 0.08));
    color: var(--theme-text-danger, #dc2626);
}

.status-badge.all-read[b-snvsommtbg] {
    background: var(--theme-surface-secondary, rgba(255, 255, 255, 0.06));
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.3));
}

:global(.theme-executive) .status-badge.all-read[b-snvsommtbg],
:global(.theme-cloud) .status-badge.all-read[b-snvsommtbg] {
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-muted, #94a3b8);
}

/* PP-D-Hotfix: see comment above .stat-value at line ~322. */
.stat-secondary[b-snvsommtbg] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.35));
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Active Time Tracking Indicator --- */

.stat-card.tracking-active[b-snvsommtbg] {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
}

.stat-card.tracking-active:hover[b-snvsommtbg] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
}

.stat-icon.tracking[b-snvsommtbg] {
    background: rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tracking-dot[b-snvsommtbg] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    animation: tracking-pulse-b-snvsommtbg 1.5s ease-in-out infinite;
}

@keyframes tracking-pulse-b-snvsommtbg {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.tracking-label[b-snvsommtbg] {
    color: #ef4444 !important;
    font-size: 0.85rem !important;
}

.tracking-task[b-snvsommtbg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* --- Settings Button --- */

/* PP-D-Hotfix-2: settings button colors flow through theme tokens. */
.panel-settings-btn[b-snvsommtbg] {
    background: none;
    border: none;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.3));
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background 0.2s ease;
}

.panel-settings-btn:hover[b-snvsommtbg],
.panel-settings-btn.active[b-snvsommtbg] {
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.7));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.panel-settings-btn.active[b-snvsommtbg] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* --- Settings Panel --- */

.settings-panel[b-snvsommtbg] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: settingsFadeIn-b-snvsommtbg 0.2s ease;
}

@keyframes settingsFadeIn-b-snvsommtbg {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.settings-section[b-snvsommtbg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-section-title[b-snvsommtbg] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.4));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.settings-hint[b-snvsommtbg] {
    font-weight: 400;
    opacity: 0.6;
}

/* Toggle switch */
.settings-toggle[b-snvsommtbg] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 5px 0;
    flex: 1;
    min-width: 0;
}

/* Card row with toggle + reorder */
.settings-card-row[b-snvsommtbg] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.reorder-btns[b-snvsommtbg] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex-shrink: 0;
}

.reorder-btn[b-snvsommtbg] {
    background: none;
    border: none;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.25));
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1;
}

.reorder-btn:hover:not(:disabled)[b-snvsommtbg] {
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.7));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.reorder-btn:disabled[b-snvsommtbg] {
    opacity: 0.15;
    cursor: default;
}

:global(.theme-executive) .reorder-btn[b-snvsommtbg],
:global(.theme-cloud) .reorder-btn[b-snvsommtbg] {
    color: rgba(0, 0, 0, 0.2);
}

:global(.theme-executive) .reorder-btn:hover:not(:disabled)[b-snvsommtbg],
:global(.theme-cloud) .reorder-btn:hover:not(:disabled)[b-snvsommtbg] {
    color: rgba(0, 0, 0, 0.6);
    background: rgba(0, 0, 0, 0.05);
}

/*
 * PP-F-4 (2026-05-01): keyboard-accessible settings toggles.
 *
 * Pre-fix the input had `display: none` which removed it from the
 * accessibility tree AND from the focus order — keyboard users couldn't
 * tab to or toggle the visibility checkboxes at all. Replaced with the
 * standard "visually-hidden" pattern (clipped 1×1px, off-flow, focusable,
 * screen-reader-readable) so the input stays in the focus order while
 * remaining invisible.
 *
 * The visible track + thumb pick up a focus ring via :focus-within on the
 * parent label, which fires whenever any descendant is focused. This means
 * tabbing to the toggle paints the visible focus state on the track that
 * the user can actually see — solving the "I can tab here but where am I"
 * problem without needing JS.
 *
 * Implicit label association is preserved (the input lives inside the
 * <label>), so screen readers continue to announce "{label text}, toggle,
 * {checked|not checked}" correctly.
 */
.settings-toggle input[b-snvsommtbg] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.toggle-track[b-snvsommtbg] {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.settings-toggle:hover .toggle-track[b-snvsommtbg] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.15);
}

/* PP-F-4: focus ring on the visible track when the hidden input has keyboard focus. */
.settings-toggle:focus-within .toggle-track[b-snvsommtbg] {
    outline: 2px solid var(--theme-primary, rgba(99, 102, 241, 0.7));
    outline-offset: 3px;
}

.settings-toggle input:checked + .toggle-track[b-snvsommtbg] {
    background: var(--theme-primary, #6366f1);
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 8px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.4);
}

.toggle-thumb[b-snvsommtbg] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease;
}

.settings-toggle input:checked + .toggle-track .toggle-thumb[b-snvsommtbg] {
    transform: translateX(16px);
    background: white;
}

.toggle-label[b-snvsommtbg] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.7));
}

/* Quick link option pills */
.quick-link-options[b-snvsommtbg] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* PP-D-Hotfix-2: quick-link option pills flow through theme tokens. */
.quick-link-option[b-snvsommtbg] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 8px;
    background: var(--theme-surface-secondary, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.55));
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
}

.quick-link-option:hover:not(:disabled)[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.8));
}

.quick-link-option.selected[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.quick-link-option:disabled[b-snvsommtbg] {
    opacity: 0.3;
    cursor: not-allowed;
}

.ql-icon[b-snvsommtbg] {
    font-size: 0.8rem;
    line-height: 1;
}

.ql-name[b-snvsommtbg] {
    line-height: 1;
}

.ql-check[b-snvsommtbg] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    flex-shrink: 0;
}

.settings-reset[b-snvsommtbg] {
    background: none;
    border: none;
    color: var(--theme-text-muted, rgba(255, 255, 255, 0.35));
    font-size: 0.65rem;
    cursor: pointer;
    padding: 4px 0;
    text-align: left;
    font-family: inherit;
    transition: color 0.2s ease;
}

.settings-reset:hover[b-snvsommtbg] {
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.6));
}

/* --- Quick Nav --- */

/* PP-D-Hotfix-2: quick-link tile container + tiles flow through theme
   tokens. Same pattern as the stat-card and stat-nav-* hotfixes. */
.quick-nav[b-snvsommtbg] {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--theme-border, rgba(255, 255, 255, 0.06));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.nav-link[b-snvsommtbg] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px;
    background: none;
    border: none;
    color: var(--theme-text-secondary, rgba(255, 255, 255, 0.45));
    font-size: 0.72rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    font-family: inherit;
}

.nav-link:hover[b-snvsommtbg] {
    color: var(--theme-text-primary, rgba(255, 255, 255, 0.85));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.nav-link-icon[b-snvsommtbg] {
    font-size: 0.82rem;
    line-height: 1;
}

/* --- Light Themes (Executive, Cloud) --- */

/* Edge-tab light theme overrides removed — base rules now use
   var(--theme-text-muted), var(--theme-text-secondary), var(--theme-border),
   and var(--theme-primary) which auto-adapt across all 8 themes. */

:global(.theme-executive) .panel-content[b-snvsommtbg],
:global(.theme-cloud) .panel-content[b-snvsommtbg] {
    background: rgba(255, 255, 255, 0.95);
    border-right-color: var(--theme-border, #e2e8f0);
}

:global(.theme-executive) .panel-header[b-snvsommtbg],
:global(.theme-cloud) .panel-header[b-snvsommtbg] {
    border-bottom-color: var(--theme-border, #e2e8f0);
}

:global(.theme-executive) .panel-title[b-snvsommtbg],
:global(.theme-cloud) .panel-title[b-snvsommtbg] {
    color: var(--theme-text-secondary, #475569);
}

:global(.theme-executive) .panel-close[b-snvsommtbg],
:global(.theme-cloud) .panel-close[b-snvsommtbg] {
    color: var(--theme-text-muted, #94a3b8);
}

:global(.theme-executive) .panel-close:hover[b-snvsommtbg],
:global(.theme-cloud) .panel-close:hover[b-snvsommtbg] {
    color: var(--theme-text-secondary, #475569);
    background: rgba(0, 0, 0, 0.05);
}

:global(.theme-executive) .stat-card[b-snvsommtbg],
:global(.theme-cloud) .stat-card[b-snvsommtbg] {
    background: rgba(0, 0, 0, 0.04);
    border-color: var(--theme-border, #e2e8f0);
}

:global(.theme-executive) .stat-card:hover[b-snvsommtbg],
:global(.theme-cloud) .stat-card:hover[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
}

:global(.theme-executive) .stat-value[b-snvsommtbg],
:global(.theme-cloud) .stat-value[b-snvsommtbg] {
    color: var(--theme-text-primary, #0f172a);
}

:global(.theme-executive) .stat-label[b-snvsommtbg],
:global(.theme-cloud) .stat-label[b-snvsommtbg] {
    color: var(--theme-text-muted, #94a3b8);
}

:global(.theme-executive) .stat-secondary[b-snvsommtbg],
:global(.theme-cloud) .stat-secondary[b-snvsommtbg] {
    color: var(--theme-text-hint, #64748b);
}

/*
 * PP-D-2 (2026-05-01): Light-theme stat-icon overrides removed.
 *
 * Pre-fix this block had 7 separate Executive/Cloud rules that gave each
 * icon a distinct semantic color (success-green, warning-orange, info-blue,
 * primary-blue, etc.). With the base ruleset above now collapsing all icons
 * to a single theme-primary backplate (matching Home's H-D-2/3/4 monochrome
 * treatment), these per-icon Executive/Cloud overrides are redundant and
 * actively conflict with the new monochrome direction. The base rule already
 * uses `var(--theme-primary-rgb)` which resolves correctly on Executive/Cloud
 * to their respective primaries — no override needed.
 *
 * Tracking-active card overrides below (using bg-danger / red-tinted border)
 * are PRESERVED because they convey active-recording urgency, semantically
 * distinct from the work-tracking surfaces — that color *should* stay loud
 * regardless of theme primary.
 */

:global(.theme-executive) .stat-card.tracking-active[b-snvsommtbg],
:global(.theme-cloud) .stat-card.tracking-active[b-snvsommtbg] {
    background: var(--theme-bg-danger, rgba(220, 38, 38, 0.08));
    border-color: rgba(239, 68, 68, 0.25);
}

:global(.theme-executive) .stat-card.tracking-active:hover[b-snvsommtbg],
:global(.theme-cloud) .stat-card.tracking-active:hover[b-snvsommtbg] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

:global(.theme-executive) .quick-nav[b-snvsommtbg],
:global(.theme-cloud) .quick-nav[b-snvsommtbg] {
    border-top-color: var(--theme-border, #e2e8f0);
}

:global(.theme-executive) .nav-link[b-snvsommtbg],
:global(.theme-cloud) .nav-link[b-snvsommtbg] {
    color: var(--theme-text-hint, #64748b);
}

:global(.theme-executive) .nav-link:hover[b-snvsommtbg],
:global(.theme-cloud) .nav-link:hover[b-snvsommtbg] {
    color: var(--theme-text-primary, #0f172a);
    background: rgba(0, 0, 0, 0.04);
}

/* Light theme - settings */

:global(.theme-executive) .panel-settings-btn[b-snvsommtbg],
:global(.theme-cloud) .panel-settings-btn[b-snvsommtbg] {
    color: var(--theme-text-muted, #94a3b8);
}

:global(.theme-executive) .panel-settings-btn:hover[b-snvsommtbg],
:global(.theme-cloud) .panel-settings-btn:hover[b-snvsommtbg],
:global(.theme-executive) .panel-settings-btn.active[b-snvsommtbg],
:global(.theme-cloud) .panel-settings-btn.active[b-snvsommtbg] {
    color: var(--theme-text-secondary, #475569);
    background: rgba(0, 0, 0, 0.05);
}

:global(.theme-executive) .panel-settings-btn.active[b-snvsommtbg],
:global(.theme-cloud) .panel-settings-btn.active[b-snvsommtbg] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

:global(.theme-executive) .settings-section-title[b-snvsommtbg],
:global(.theme-cloud) .settings-section-title[b-snvsommtbg] {
    color: var(--theme-text-hint, #64748b);
}

:global(.theme-executive) .toggle-track[b-snvsommtbg],
:global(.theme-cloud) .toggle-track[b-snvsommtbg] {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.12);
}

:global(.theme-executive) .settings-toggle:hover .toggle-track[b-snvsommtbg],
:global(.theme-cloud) .settings-toggle:hover .toggle-track[b-snvsommtbg] {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.18);
}

:global(.theme-executive) .toggle-thumb[b-snvsommtbg],
:global(.theme-cloud) .toggle-thumb[b-snvsommtbg] {
    background: rgba(0, 0, 0, 0.3);
}

:global(.theme-executive) .settings-toggle input:checked + .toggle-track .toggle-thumb[b-snvsommtbg],
:global(.theme-cloud) .settings-toggle input:checked + .toggle-track .toggle-thumb[b-snvsommtbg] {
    background: white;
}

:global(.theme-executive) .toggle-label[b-snvsommtbg],
:global(.theme-cloud) .toggle-label[b-snvsommtbg] {
    color: var(--theme-text-secondary, #475569);
}

:global(.theme-executive) .quick-link-option[b-snvsommtbg],
:global(.theme-cloud) .quick-link-option[b-snvsommtbg] {
    background: rgba(0, 0, 0, 0.03);
    border-color: var(--theme-border, #e2e8f0);
    color: var(--theme-text-hint, #64748b);
}

:global(.theme-executive) .quick-link-option:hover:not(:disabled)[b-snvsommtbg],
:global(.theme-cloud) .quick-link-option:hover:not(:disabled)[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.06);
    border-color: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.2);
    color: var(--theme-text-primary, #0f172a);
}

:global(.theme-executive) .quick-link-option.selected[b-snvsommtbg],
:global(.theme-cloud) .quick-link-option.selected[b-snvsommtbg] {
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.08);
    border-color: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.3);
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

:global(.theme-executive) .settings-reset[b-snvsommtbg],
:global(.theme-cloud) .settings-reset[b-snvsommtbg] {
    color: var(--theme-text-muted, #94a3b8);
}

:global(.theme-executive) .settings-reset:hover[b-snvsommtbg],
:global(.theme-cloud) .settings-reset:hover[b-snvsommtbg] {
    color: var(--theme-text-secondary, #475569);
}

/* --- Responsive: hide on mobile --- */

@media (max-width: 768px) {
    .productivity-panel[b-snvsommtbg] {
        display: none;
    }
}
/* /Components/PublicChatWidget.razor.rz.scp.css */
/* ============================================
   Public Chat Widget — Floating bubble + panel
   For anonymous visitors on public pages
   ============================================ */

/* --- Floating Bubble --- */
.public-chat-bubble[b-xico6jqki2] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* PUB-FAB-UNIFY-1 (2026-08-13): theme tokens, not literals, so this bubble is
       the SAME object as the in-app corner FAB (.chat-fab: --theme-cta-gradient /
       --theme-shadow-color) and the /home pro peek. Was a hardcoded primary->accent
       gradient + rgba shadow that could drift per theme - one-question-two-answers
       (GOTCHAS #256). 60px -> 56px to match .chat-fab exactly. */
    background: var(--theme-cta-gradient, linear-gradient(135deg, #6366f1, #8b5cf6));
    box-shadow: 0 4px 20px var(--theme-shadow-color, rgba(0, 0, 0, 0.2));
    z-index: 9999;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease;
    animation: bubble-entrance-b-xico6jqki2 0.4s ease-out;
}

/* PUB-FAB-UNIFY-1: hidden while the hero AI mark is in view - the hero orb IS the
   entry point up there, so a second corner copy is redundant (mirrors the in-app
   "one AI presence per surface" rule). The widget toggles .hero-hidden from an
   IntersectionObserver on [data-ai-hero]; with no such element on the page the
   class never applies and the bubble shows immediately (AuthLayout/FocusLayout). */
.public-chat-bubble.hero-hidden[b-xico6jqki2] {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

.public-chat-bubble:hover[b-xico6jqki2] {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3);
}

.public-chat-bubble:active[b-xico6jqki2] {
    transform: scale(0.95);
}

/* --- Mode-aware bubble glyphs ---
   Pro: smart_toy Material icon at ~28px, matches the hero chip.
   Personal: CompanionAvatar (egg, Normal/48px) sits inside the bubble — the
   bubble's gradient backdrop frames the egg so it reads as "the companion is
   here to help" rather than a separate badge. */
.public-chat-bubble .bubble-glyph[b-xico6jqki2] {
    font-size: 28px;
    line-height: 1;
}

.public-chat-bubble .bubble-egg[b-xico6jqki2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

.public-chat-bubble.mode-personal[b-xico6jqki2] {
    /* Personal mode — the egg IS the bubble. No frame, no coloured ring.
       The egg carries its own heartbeat shadow + pulse-glow, so a painted
       bubble backdrop only reads as a navy/indigo border around the companion
       (especially in dark themes where --theme-primary is near-black).
       Transparent bubble lets the egg stand on its own. */
    background: transparent;
    box-shadow: none;
}

.public-chat-bubble.mode-personal:hover[b-xico6jqki2] {
    /* Drop the dark-shadow lift since there's no bubble frame to lift. */
    box-shadow: none;
}

@keyframes bubble-entrance-b-xico6jqki2 {
    from {
        opacity: 0;
        transform: scale(0) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Unread badge */
.unread-badge[b-xico6jqki2] {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* --- Chat Panel --- */
.public-chat-panel[b-xico6jqki2] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    max-height: 560px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    animation: panel-slide-up-b-xico6jqki2 0.3s ease-out;
}

@keyframes panel-slide-up-b-xico6jqki2 {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Header --- */
.public-chat-header[b-xico6jqki2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: #fff;
    flex-shrink: 0;
}

.header-info[b-xico6jqki2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.agent-avatar[b-xico6jqki2] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Header glyph — Pro mode only. The rgba backdrop above keeps the glyph
   legible against the gradient header. */
.agent-avatar .header-glyph[b-xico6jqki2] {
    font-size: 22px;
    line-height: 1;
    color: #fff;
}

/* Personal mode header avatar — CompanionAvatar (egg, Small/32px) sits in
   the 36px slot. Drop the rgba plate so the egg's own glow reads. */
.agent-avatar.mode-personal[b-xico6jqki2] {
    background: transparent;
}

.agent-name[b-xico6jqki2] {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
}

.agent-status[b-xico6jqki2] {
    display: block;
    font-size: 11px;
    opacity: 0.85;
}

.agent-status.online[b-xico6jqki2]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    margin-right: 4px;
    vertical-align: middle;
}

.agent-status.offline[b-xico6jqki2]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fbbf24;
    margin-right: 4px;
    vertical-align: middle;
}

.close-btn[b-xico6jqki2] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: background 0.15s;
}

.close-btn:hover[b-xico6jqki2] {
    background: rgba(255, 255, 255, 0.3);
}

/* --- Lead Form --- */
.public-chat-lead-form[b-xico6jqki2] {
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.lead-form-intro[b-xico6jqki2] {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    margin: 0;
}

.lead-form-fields[b-xico6jqki2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lead-form-note[b-xico6jqki2] {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    margin: 0;
}

/* --- Messages --- */
.public-chat-messages[b-xico6jqki2] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 280px;
    max-height: 340px;
    scroll-behavior: smooth;
}

.chat-msg[b-xico6jqki2] {
    display: flex;
    gap: 8px;
    max-width: 85%;
    animation: msg-fade-in-b-xico6jqki2 0.2s ease-out;
}

.chat-msg.user[b-xico6jqki2] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg.bot[b-xico6jqki2] {
    align-self: flex-start;
}

@keyframes msg-fade-in-b-xico6jqki2 {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.msg-avatar[b-xico6jqki2] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msg-avatar .material-symbols-rounded[b-xico6jqki2] {
    font-size: 16px;
    line-height: 1;
    color: #fff;
}

/* Personal-mode message avatar — a small glowing dot matching the egg idea.
   Intentionally minimal (no face, no stage) to avoid pre-empting the post-
   onboarding Spark reveal. */
.msg-avatar.mode-personal .msg-avatar-dot[b-xico6jqki2] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.6) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: msg-dot-pulse-b-xico6jqki2 2.4s ease-in-out infinite;
}

@keyframes msg-dot-pulse-b-xico6jqki2 {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.15); opacity: 1; }
}

.msg-content[b-xico6jqki2] {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.msg-content p[b-xico6jqki2] {
    margin: 0;
}

.chat-msg.bot .msg-content[b-xico6jqki2] {
    background: #f3f4f6;
    color: #1f2937;
    border-bottom-left-radius: 4px;
}

.chat-msg.user .msg-content[b-xico6jqki2] {
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Streaming indicator */
.msg-content.streaming[b-xico6jqki2] {
    background: #f3f4f6;
    color: #1f2937;
    border-bottom-left-radius: 4px;
}

.typing-cursor[b-xico6jqki2] {
    display: inline;
    animation: blink-cursor-b-xico6jqki2 0.8s step-end infinite;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

@keyframes blink-cursor-b-xico6jqki2 {
    50% { opacity: 0; }
}

/* --- Input Bar --- */
.public-chat-input[b-xico6jqki2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
    background: #fff;
}

.public-chat-input .nts-input[b-xico6jqki2] {
    flex: 1;
    font-size: 13px;
}

.send-btn[b-xico6jqki2] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
}

.send-btn:hover:not(:disabled)[b-xico6jqki2] {
    transform: scale(1.08);
}

.send-btn:disabled[b-xico6jqki2] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Footer --- */
.public-chat-footer[b-xico6jqki2] {
    padding: 8px 16px;
    text-align: center;
    font-size: 10px;
    color: #9ca3af;
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
    background: #fafafa;
}

/* ===========================================
   Dark Theme Support
   =========================================== */
.is-dark .public-chat-panel[b-xico6jqki2] {
    background: rgba(15, 23, 42, 0.97);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.is-dark .lead-form-intro[b-xico6jqki2] {
    color: #e2e8f0;
}

.is-dark .lead-form-note[b-xico6jqki2] {
    color: #64748b;
}

.is-dark .chat-msg.bot .msg-content[b-xico6jqki2],
.is-dark .msg-content.streaming[b-xico6jqki2] {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
}

.is-dark .public-chat-input[b-xico6jqki2] {
    background: rgba(15, 23, 42, 0.95);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.is-dark .public-chat-footer[b-xico6jqki2] {
    background: rgba(15, 23, 42, 0.8);
    border-top-color: rgba(255, 255, 255, 0.06);
    color: #64748b;
}

.is-dark .public-chat-messages[b-xico6jqki2] {
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* ===========================================
   Mobile Responsive
   =========================================== */
@media (max-width: 480px) {
    .public-chat-panel[b-xico6jqki2] {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 100dvh;
        border-radius: 16px 16px 0 0;
    }

    .public-chat-bubble[b-xico6jqki2] {
        bottom: 16px;
        right: 16px;
    }

    .public-chat-messages[b-xico6jqki2] {
        max-height: calc(100dvh - 200px);
    }
}

/* PUB-BOT-1 (2026-08-11): Professional-mode avatars render <ProBot> instead of the
   Material `smart_toy` glyph. ProBot paints its head with currentColor, so each host
   must set a colour - the old .material-symbols-rounded rules no longer match. */
.public-chat-bubble .pro-bot[b-xico6jqki2],
.agent-avatar .pro-bot[b-xico6jqki2],
.msg-avatar .pro-bot[b-xico6jqki2] {
    color: #fff;
}
/* /Components/PublicFooter.razor.rz.scp.css */
/* PUB-NEWS-1: newsletter signup band above the public footer. */
.footer-newsletter[b-hk3k23so90] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 12px;
    border-top: 1px solid var(--theme-border, #e5e7eb);
}

.footer-newsletter-text[b-hk3k23so90] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 220px;
}

.footer-newsletter-text strong[b-hk3k23so90] {
    font-size: 15px;
    color: var(--theme-text-primary, #1a202c);
}

.footer-newsletter-text span[b-hk3k23so90] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--theme-text-secondary, #6b7280);
}

@media (max-width: 640px) {
    .footer-newsletter[b-hk3k23so90] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* SITE-CO-1: the company line above the legal footer. */
.footer-company[b-hk3k23so90] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--theme-text-secondary, #6b7280);
    text-align: center;
}
.footer-company a[b-hk3k23so90] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    text-decoration: none;
}
.footer-company a:hover[b-hk3k23so90] { text-decoration: underline; }

/* ACCENT-ON-SELF (2026-09-28): Nature/Winter/Ocean's --theme-primary is the same hue
   as the bottom of their page gradient, so "See our work" vanished. The theme class
   lives on <html>, which scoped CSS allows as an unscoped ancestor. Light text +
   underline keeps it recognisably a link without the accent. */
.theme-nature .footer-company a[b-hk3k23so90],
.theme-winter .footer-company a[b-hk3k23so90],
.theme-ocean .footer-company a[b-hk3k23so90],
/* Slate: no colour accents by design (PRO-DARK-1) — the purple link was the one tint on the page. */
.theme-executivedark .footer-company a[b-hk3k23so90] {
    color: var(--theme-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* /Components/PublicHeader.razor.rz.scp.css */
/* PublicHeader — shared header chrome for public marketing pages.
   Created 2026-05-09 (TM-NAV-1).
   The .tools-menu* rules previously here moved to ToolsMegaMenu.razor.css when
   the mega-menu was extracted into its own component. */

.public-header[b-oudhh6jewe] {
    /* 2026-05-26: was justify-content:space-between which forced the
       three flex children (logo / nav / actions) to spread out, putting
       the Tools mega-menu trigger at the visual center as an orphaned
       pill. Now: flex-start clusters logo + nav on the left, and
       margin-left:auto on .header-actions pushes the auth buttons to the
       right. Mirrors the global .public-header rule in public-pages.css
       so Index.razor's inline header (which uses the same class names but
       doesn't inherit this scoped CSS) reads identically. */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 40px;
    gap: 24px;
    position: relative;
    z-index: 100;
}

/* HOSTS-1: text wordmark on the company host */
.logo-company[b-oudhh6jewe] { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; color: var(--theme-text, #0f172a); text-decoration: none; white-space: nowrap; }

.logo[b-oudhh6jewe] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.logo img[b-oudhh6jewe] {
    height: 40px;
    width: auto;
    display: block;
}

.public-header-nav[b-oudhh6jewe] {
    /* Sits immediately to the right of the logo, no centering / flex-grow.
       Was flex:1 + justify-content:center which expanded the nav and
       centered Tools inside the expanded area. */
    display: flex;
}

/* SITE-CO-1 (2026-09-11): Services / Work links match the Tools trigger's geometry so the
   three read as one row (ToolsMegaMenu.razor.css .tools-menu-trigger). */
.public-nav-link[b-oudhh6jewe] {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 10px;
    color: var(--theme-text-primary, #1a202c);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 150ms ease;
}
.public-nav-link:hover[b-oudhh6jewe] {
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.05));
}

/* Header auth actions (Sign In / Get Started Free / Go to App) */

.header-actions[b-oudhh6jewe] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto; /* pushes actions to the right edge */
    flex-shrink: 0;
}

.sign-in-btn[b-oudhh6jewe],
.get-started-btn[b-oudhh6jewe] {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 150ms ease;
}

.sign-in-btn[b-oudhh6jewe] {
    color: var(--theme-text-primary, #1a202c);
    background: transparent;
}

.sign-in-btn:hover[b-oudhh6jewe] {
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.05));
}

.get-started-btn[b-oudhh6jewe] {
    color: white;
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}

.get-started-btn:hover[b-oudhh6jewe] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

/* Responsive */

@media (max-width: 768px) {
    .public-header[b-oudhh6jewe] {
        padding: 16px 20px;
        gap: 12px;
    }

    .logo img[b-oudhh6jewe] {
        height: 32px;
    }

    .sign-in-btn[b-oudhh6jewe],
    .get-started-btn[b-oudhh6jewe] {
        padding: 8px 14px;
        font-size: 0.875rem;
    }

    /* PUB-MOB-3 (2026-05-27): hide the Tools mega-menu trigger on tablet/
       mobile widths. The mega-menu is a wide multi-column overlay that
       doesn't work well in narrow viewports anyway, and the homepage
       already has a strong in-page tool-discovery section ("40+ tools,
       one companion" with per-tool cards and a "Browse all 40+ tools →"
       link), so hiding the header trigger doesn't actually remove tool
       discoverability — it just stops the chrome from cluttering the
       phone-width top bar (logo + Tools + mode toggle + CTA was too much
       in 390px). Desktop unchanged. */
    .public-header-nav[b-oudhh6jewe] {
        display: none;
    }
}

@media (max-width: 480px) {
    /* MOB-SIGNIN-2 (2026-07-14): keep the header to ONE row at phone widths.
       QA measured the real row at ~430px wide (it wrapped even on iPhone 14
       Pro Max) — logo + Sign In + "Begin Your Journey" + gaps — and the
       global `.public-header { flex-wrap: wrap }` fallback in public-pages.css
       caught it: logo orphaned on row 1, buttons dumped right-aligned on
       row 2. Everything below compacts the row to ~355px so it fits down to
       360px devices with margin. The global flex-wrap stays as the safety
       net for ancient 320px hardware.
       NOTE: this is a scoped .razor.css file — changes here need an app
       REBUILD to land in the bundle (unlike site.css). If a QA pass shows
       no change, rebuild before diagnosing further. */
    .public-header[b-oudhh6jewe] {
        padding: 12px;
        gap: 8px;
    }

    .logo img[b-oudhh6jewe] {
        height: 26px;
    }

    .header-actions[b-oudhh6jewe] {
        gap: 6px;
    }

    /* MOB-SIGNIN-1 (2026-07-14): Sign In is VISIBLE at phone widths again.
       The old rule hid it ("Get Started is the priority conversion target;
       signed-in users get Go to App") — but a returning user on a phone in a
       fresh session is anonymous-with-an-account: hiding Sign In left them
       zero way back in except the register CTA, an "email already taken"
       error, and Forgot Password (43 hits/week wore that fingerprint).
       Phones are THE returning-user device class. The 390px space this
       frees up comes from hiding the mode-toggle chip instead (mystery-meat
       briefcase to strangers; deliberate pro entry now has /professional) —
       see professional-mode.css .mode-toggle media rule. */
    .sign-in-btn[b-oudhh6jewe] {
        padding: 7px 8px;
        font-size: 0.8rem;
    }

    .get-started-btn[b-oudhh6jewe] {
        padding: 7px 10px;
        font-size: 0.8rem;
        white-space: nowrap; /* the CTA label must push the ROW into wrap, never itself wrap to two lines */
    }
}
/* /Components/PushNotificationsCard.razor.rz.scp.css */
/* PUSH-1 (2026-10-02): mirrors ManageAccount's .notification-item so the card reads as one of the rows. */
.push-card[b-rah45p6t79] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 16px;
}

.push-content h4[b-rah45p6t79] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.push-content svg[b-rah45p6t79] {
    color: #6366f1;
}

.push-content p[b-rah45p6t79] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    max-width: 600px;
}

.push-actions[b-rah45p6t79] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.push-btn[b-rah45p6t79] {
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    background: #6366f1;
    color: #fff;
}

.push-btn:disabled[b-rah45p6t79] {
    opacity: 0.6;
    cursor: default;
}

.push-btn-secondary[b-rah45p6t79] {
    background: transparent;
    color: #6366f1;
    border: 1px solid #6366f1;
}

.push-btn-link[b-rah45p6t79] {
    background: transparent;
    color: #64748b;
    padding: 8px 6px;
}

.is-dark .push-card[b-rah45p6t79] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .push-content h4[b-rah45p6t79] {
    color: #e2e8f0;
}

.is-dark .push-content p[b-rah45p6t79],
.is-dark .push-btn-link[b-rah45p6t79] {
    color: #94a3b8;
}

@media (max-width: 600px) {
    .push-card[b-rah45p6t79] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Components/QuitTracker/AICoachCard.razor.rz.scp.css */
.ai-coach-card[b-czwfrmyklm] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(var(--theme-accent-rgb), 0.2);
}

.coach-header[b-czwfrmyklm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.coach-title[b-czwfrmyklm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coach-icon[b-czwfrmyklm] {
    font-size: 1.5rem;
}

.coach-title h3[b-czwfrmyklm] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.premium-badge[b-czwfrmyklm] {
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-primary) 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    text-transform: uppercase;
}

.credit-cost[b-czwfrmyklm] {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* AI Response */
.ai-response[b-czwfrmyklm] {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.08) 0%, rgba(var(--theme-primary-rgb), 0.08) 100%);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--theme-accent);
}

.ai-response p[b-czwfrmyklm] {
    margin: 0;
    color: #1e293b;
    line-height: 1.6;
    font-size: 0.95rem;
    white-space: pre-wrap;
}

.ai-response.error[b-czwfrmyklm] {
    background: rgba(239, 68, 68, 0.1);
    border-left-color: #ef4444;
}

.ai-response.error p[b-czwfrmyklm] {
    color: #dc2626;
}

.credits-info[b-czwfrmyklm] {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--theme-accent);
    font-weight: 600;
}

/* Coach Action Buttons */
.coach-actions[b-czwfrmyklm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.coach-btn[b-czwfrmyklm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    min-width: 140px;
}

.coach-btn:hover:not(:disabled)[b-czwfrmyklm] {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.05);
}

.coach-btn:disabled[b-czwfrmyklm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon[b-czwfrmyklm] {
    font-size: 1.25rem;
}

.btn-text[b-czwfrmyklm] {
    flex: 1;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1e293b;
    text-align: left;
}

.btn-cost[b-czwfrmyklm] {
    font-size: 0.7rem;
    color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
}

/* Spinner */
.spinner[b-czwfrmyklm] {
    width: 20px;
    height: 20px;
    border: 2px solid #e2e8f0;
    border-top-color: var(--theme-accent);
    border-radius: 50%;
    animation: spin-b-czwfrmyklm 0.8s linear infinite;
}

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

/* Trigger Tips Section */
.trigger-tips-section[b-czwfrmyklm] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.trigger-tips-section label[b-czwfrmyklm] {
    display: block;
    font-weight: 600;
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}

.trigger-select[b-czwfrmyklm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.trigger-btn[b-czwfrmyklm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.7rem;
    color: #64748b;
}

.trigger-btn:hover:not(:disabled)[b-czwfrmyklm] {
    border-color: var(--theme-accent);
}

.trigger-btn.selected[b-czwfrmyklm] {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.1);
    color: var(--theme-accent);
}

.trigger-btn span:first-child[b-czwfrmyklm] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.coach-btn.tips[b-czwfrmyklm] {
    width: 100%;
    justify-content: center;
}

/* Toggle Tips Button */
.toggle-tips-btn[b-czwfrmyklm] {
    width: 100%;
    padding: 0.5rem;
    background: none;
    border: none;
    color: var(--theme-accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-tips-btn:hover[b-czwfrmyklm] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: underline;
}

/* ===== Dark Theme Styles ===== */
.ai-coach-card.theme-space[b-czwfrmyklm],
.ai-coach-card.theme-winter[b-czwfrmyklm],
.ai-coach-card.theme-nature[b-czwfrmyklm],
.ai-coach-card.theme-ocean[b-czwfrmyklm],
.ai-coach-card.theme-mystic[b-czwfrmyklm],
.ai-coach-card.theme-tron[b-czwfrmyklm] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(var(--theme-accent-rgb), 0.3);
}

.theme-space .coach-title h3[b-czwfrmyklm],
.theme-winter .coach-title h3[b-czwfrmyklm],
.theme-nature .coach-title h3[b-czwfrmyklm],
.theme-ocean .coach-title h3[b-czwfrmyklm],
.theme-mystic .coach-title h3[b-czwfrmyklm],
.theme-tron .coach-title h3[b-czwfrmyklm] {
    color: #f1f5f9;
}

.theme-space .ai-response[b-czwfrmyklm],
.theme-winter .ai-response[b-czwfrmyklm],
.theme-nature .ai-response[b-czwfrmyklm],
.theme-ocean .ai-response[b-czwfrmyklm],
.theme-mystic .ai-response[b-czwfrmyklm],
.theme-tron .ai-response[b-czwfrmyklm] {
    background: rgba(var(--theme-accent-rgb), 0.15);
}

.theme-space .ai-response p[b-czwfrmyklm],
.theme-winter .ai-response p[b-czwfrmyklm],
.theme-nature .ai-response p[b-czwfrmyklm],
.theme-ocean .ai-response p[b-czwfrmyklm],
.theme-mystic .ai-response p[b-czwfrmyklm],
.theme-tron .ai-response p[b-czwfrmyklm] {
    color: #f1f5f9;
}

.theme-space .coach-btn[b-czwfrmyklm],
.theme-winter .coach-btn[b-czwfrmyklm],
.theme-nature .coach-btn[b-czwfrmyklm],
.theme-ocean .coach-btn[b-czwfrmyklm],
.theme-mystic .coach-btn[b-czwfrmyklm],
.theme-tron .coach-btn[b-czwfrmyklm] {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.theme-space .btn-text[b-czwfrmyklm],
.theme-winter .btn-text[b-czwfrmyklm],
.theme-nature .btn-text[b-czwfrmyklm],
.theme-ocean .btn-text[b-czwfrmyklm],
.theme-mystic .btn-text[b-czwfrmyklm],
.theme-tron .btn-text[b-czwfrmyklm] {
    color: #f1f5f9;
}

.theme-space .trigger-tips-section[b-czwfrmyklm],
.theme-winter .trigger-tips-section[b-czwfrmyklm],
.theme-nature .trigger-tips-section[b-czwfrmyklm],
.theme-ocean .trigger-tips-section[b-czwfrmyklm],
.theme-mystic .trigger-tips-section[b-czwfrmyklm],
.theme-tron .trigger-tips-section[b-czwfrmyklm] {
    background: rgba(15, 23, 42, 0.5);
}

.theme-space .trigger-btn[b-czwfrmyklm],
.theme-winter .trigger-btn[b-czwfrmyklm],
.theme-nature .trigger-btn[b-czwfrmyklm],
.theme-ocean .trigger-btn[b-czwfrmyklm],
.theme-mystic .trigger-btn[b-czwfrmyklm],
.theme-tron .trigger-btn[b-czwfrmyklm] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: #94a3b8;
}

/* AI History Section */
.ai-history-section[b-czwfrmyklm] {
    margin-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 1rem;
}

.toggle-history-btn[b-czwfrmyklm] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--theme-accent-rgb), 0.08);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    border-radius: 12px;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-history-btn:hover[b-czwfrmyklm] {
    background: rgba(var(--theme-accent-rgb), 0.15);
}

.history-icon[b-czwfrmyklm] {
    margin-right: 0.5rem;
}

.toggle-arrow[b-czwfrmyklm] {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.toggle-arrow.expanded[b-czwfrmyklm] {
    transform: rotate(180deg);
}

.history-list[b-czwfrmyklm] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-item[b-czwfrmyklm] {
    background: rgba(var(--theme-accent-rgb), 0.05);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.1);
    border-radius: 12px;
    padding: 1rem;
}

.history-header[b-czwfrmyklm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.history-type[b-czwfrmyklm] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-accent);
}

.history-time[b-czwfrmyklm] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.history-response[b-czwfrmyklm] {
    margin: 0;
    font-size: 0.85rem;
    color: #475569;
    line-height: 1.5;
}

/* Dark theme history styles */
.theme-space .ai-history-section[b-czwfrmyklm],
.theme-winter .ai-history-section[b-czwfrmyklm],
.theme-nature .ai-history-section[b-czwfrmyklm],
.theme-ocean .ai-history-section[b-czwfrmyklm],
.theme-mystic .ai-history-section[b-czwfrmyklm],
.theme-tron .ai-history-section[b-czwfrmyklm] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.theme-space .toggle-history-btn[b-czwfrmyklm],
.theme-winter .toggle-history-btn[b-czwfrmyklm],
.theme-nature .toggle-history-btn[b-czwfrmyklm],
.theme-ocean .toggle-history-btn[b-czwfrmyklm],
.theme-mystic .toggle-history-btn[b-czwfrmyklm],
.theme-tron .toggle-history-btn[b-czwfrmyklm] {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.3);
    color: #a78bfa;
}

.theme-space .history-item[b-czwfrmyklm],
.theme-winter .history-item[b-czwfrmyklm],
.theme-nature .history-item[b-czwfrmyklm],
.theme-ocean .history-item[b-czwfrmyklm],
.theme-mystic .history-item[b-czwfrmyklm],
.theme-tron .history-item[b-czwfrmyklm] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(var(--theme-accent-rgb), 0.2);
}

.theme-space .history-response[b-czwfrmyklm],
.theme-winter .history-response[b-czwfrmyklm],
.theme-nature .history-response[b-czwfrmyklm],
.theme-ocean .history-response[b-czwfrmyklm],
.theme-mystic .history-response[b-czwfrmyklm],
.theme-tron .history-response[b-czwfrmyklm] {
    color: #cbd5e1;
}

/* Responsive */
@media (max-width: 600px) {
    .coach-actions[b-czwfrmyklm] {
        flex-direction: column;
    }

    .coach-btn[b-czwfrmyklm] {
        min-width: 100%;
    }
}
/* /Components/QuitTracker/CreateQuitTrackerDialog.razor.rz.scp.css */
/* Form Elements */
.form-group[b-t7saxxnntr] {
    margin-bottom: 1.25rem;
}

.form-group label[b-t7saxxnntr] {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

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

/* Type Selection Grid */
.type-grid[b-t7saxxnntr] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.type-option[b-t7saxxnntr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 0.5rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.type-option:hover[b-t7saxxnntr] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.type-option.selected[b-t7saxxnntr] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.type-emoji[b-t7saxxnntr] {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.type-name[b-t7saxxnntr] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
}

.type-option.selected .type-name[b-t7saxxnntr] {
    color: #059669;
}

/* ===== Dark Theme Styles ===== */
.is-dark .form-group label[b-t7saxxnntr] {
    color: #e2e8f0;
}

.is-dark .type-option[b-t7saxxnntr] {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .type-option:hover[b-t7saxxnntr] {
    background: rgba(16, 185, 129, 0.15);
}

.is-dark .type-option.selected[b-t7saxxnntr] {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.is-dark .type-name[b-t7saxxnntr] {
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 540px) {
    .type-grid[b-t7saxxnntr] {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row[b-t7saxxnntr] {
        grid-template-columns: 1fr;
    }
}
/* /Components/QuitTracker/GrowthTree.razor.rz.scp.css */
.growth-tree-container[b-3ro0zuqbw4] {
    background: linear-gradient(180deg, #e0f2fe 0%, #f0fdf4 100%);
    border-radius: 20px;
    padding: 1rem;
    overflow: hidden;
    position: relative;
}

.tree-header[b-3ro0zuqbw4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
}

.tree-header h4[b-3ro0zuqbw4] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #166534;
}

.growth-stage[b-3ro0zuqbw4] {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* Scene Container */
.tree-scene[b-3ro0zuqbw4] {
    position: relative;
    height: 200px;
    border-radius: 16px;
    overflow: hidden;
}

/* Sky Backgrounds */
.sky[b-3ro0zuqbw4] {
    position: absolute;
    inset: 0;
    transition: background 1s ease;
}

.sky.dawn[b-3ro0zuqbw4] {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
}

.sky.morning[b-3ro0zuqbw4] {
    background: linear-gradient(180deg, #bae6fd 0%, #7dd3fc 50%, #38bdf8 100%);
}

.sky.day[b-3ro0zuqbw4] {
    background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 50%, #0ea5e9 100%);
}

.sky.golden[b-3ro0zuqbw4] {
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 30%, #7dd3fc 70%, #0ea5e9 100%);
}

/* Sun */
.sun[b-3ro0zuqbw4] {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, #fef08a 0%, #facc15 50%, #f59e0b 100%);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(250, 204, 21, 0.6);
    animation: pulse-sun-b-3ro0zuqbw4 3s ease-in-out infinite;
}

@keyframes pulse-sun-b-3ro0zuqbw4 {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(250, 204, 21, 0.6); }
    50% { transform: scale(1.1); box-shadow: 0 0 50px rgba(250, 204, 21, 0.8); }
}

/* Birds */
.bird[b-3ro0zuqbw4] {
    position: absolute;
    font-size: 12px;
    animation: fly-b-3ro0zuqbw4 8s ease-in-out infinite;
}

.bird[b-3ro0zuqbw4]::before {
    content: "🐦";
}

.bird-0[b-3ro0zuqbw4] { top: 25px; left: 10%; animation-delay: 0s; }
.bird-1[b-3ro0zuqbw4] { top: 40px; left: 25%; animation-delay: 2s; }
.bird-2[b-3ro0zuqbw4] { top: 20px; left: 60%; animation-delay: 4s; }

@keyframes fly-b-3ro0zuqbw4 {
    0%, 100% { transform: translateX(0) translateY(0); }
    25% { transform: translateX(20px) translateY(-5px); }
    50% { transform: translateX(40px) translateY(0); }
    75% { transform: translateX(20px) translateY(5px); }
}

/* Clouds */
.cloud[b-3ro0zuqbw4] {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    animation: float-cloud-b-3ro0zuqbw4 20s linear infinite;
}

.cloud[b-3ro0zuqbw4]::before, .cloud[b-3ro0zuqbw4]::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.cloud-0[b-3ro0zuqbw4] { top: 15px; left: -60px; width: 60px; height: 20px; animation-duration: 25s; }
.cloud-1[b-3ro0zuqbw4] { top: 35px; left: -80px; width: 50px; height: 16px; animation-duration: 30s; animation-delay: 5s; }
.cloud-2[b-3ro0zuqbw4] { top: 25px; left: -70px; width: 45px; height: 14px; animation-duration: 22s; animation-delay: 10s; }
.cloud-3[b-3ro0zuqbw4] { top: 45px; left: -50px; width: 40px; height: 12px; animation-duration: 28s; animation-delay: 15s; }
.cloud-4[b-3ro0zuqbw4] { top: 20px; left: -90px; width: 55px; height: 18px; animation-duration: 35s; animation-delay: 8s; }

@keyframes float-cloud-b-3ro0zuqbw4 {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 100px)); }
}

/* Ground */
.ground[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(180deg, #65a30d 0%, #4d7c0f 50%, #3f6212 100%);
    border-radius: 100% 100% 0 0 / 50% 50% 0 0;
}

/* Grass */
.grass[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 30px;
    width: 3px;
    background: linear-gradient(to top, #65a30d, #84cc16);
    border-radius: 3px 3px 0 0;
    transform-origin: bottom center;
    animation: sway-b-3ro0zuqbw4 2s ease-in-out infinite;
}

.grass-0[b-3ro0zuqbw4] { left: 10%; height: 15px; animation-delay: 0s; }
.grass-1[b-3ro0zuqbw4] { left: 15%; height: 12px; animation-delay: 0.2s; }
.grass-2[b-3ro0zuqbw4] { left: 22%; height: 18px; animation-delay: 0.4s; }
.grass-3[b-3ro0zuqbw4] { left: 35%; height: 14px; animation-delay: 0.6s; }
.grass-4[b-3ro0zuqbw4] { left: 65%; height: 16px; animation-delay: 0.3s; }
.grass-5[b-3ro0zuqbw4] { left: 75%; height: 13px; animation-delay: 0.5s; }
.grass-6[b-3ro0zuqbw4] { left: 82%; height: 17px; animation-delay: 0.7s; }
.grass-7[b-3ro0zuqbw4] { left: 90%; height: 11px; animation-delay: 0.1s; }

@keyframes sway-b-3ro0zuqbw4 {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

/* Ground Flowers */
.flower[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 35px;
    font-size: 14px;
    animation: bloom-b-3ro0zuqbw4 3s ease-in-out infinite;
}

.flower-0[b-3ro0zuqbw4] { left: 8%; } .flower-0[b-3ro0zuqbw4]::before { content: "🌸"; }
.flower-1[b-3ro0zuqbw4] { left: 18%; animation-delay: 0.5s; } .flower-1[b-3ro0zuqbw4]::before { content: "🌼"; }
.flower-2[b-3ro0zuqbw4] { left: 28%; animation-delay: 1s; } .flower-2[b-3ro0zuqbw4]::before { content: "🌷"; }
.flower-3[b-3ro0zuqbw4] { left: 72%; animation-delay: 1.5s; } .flower-3[b-3ro0zuqbw4]::before { content: "🌺"; }
.flower-4[b-3ro0zuqbw4] { left: 88%; animation-delay: 2s; } .flower-4[b-3ro0zuqbw4]::before { content: "🌻"; }

@keyframes bloom-b-3ro0zuqbw4 {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* Tree Base Positioning */
.tree[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.5s ease;
}

/* Stage 0: Seed */
.seed[b-3ro0zuqbw4] {
    position: relative;
}

.seed-body[b-3ro0zuqbw4] {
    width: 20px;
    height: 12px;
    background: linear-gradient(135deg, #92400e 0%, #78350f 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: seed-pulse-b-3ro0zuqbw4 2s ease-in-out infinite;
}

@keyframes seed-pulse-b-3ro0zuqbw4 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Stage 1: Sprout */
.sprout[b-3ro0zuqbw4] {
    position: relative;
    width: 30px;
    height: 40px;
}

.sprout-stem[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 25px;
    background: linear-gradient(to top, #65a30d, #84cc16);
    border-radius: 2px;
    animation: grow-up-b-3ro0zuqbw4 1s ease-out;
}

.sprout-leaf[b-3ro0zuqbw4] {
    position: absolute;
    top: 0;
    width: 12px;
    height: 8px;
    background: #22c55e;
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    animation: leaf-unfold-b-3ro0zuqbw4 1.5s ease-out;
}

.sprout-leaf.left[b-3ro0zuqbw4] {
    left: 0;
    transform: rotate(-30deg);
    transform-origin: right bottom;
}

.sprout-leaf.right[b-3ro0zuqbw4] {
    right: 0;
    transform: rotate(30deg);
    transform-origin: left bottom;
}

@keyframes grow-up-b-3ro0zuqbw4 {
    0% { height: 0; }
    100% { height: 25px; }
}

@keyframes leaf-unfold-b-3ro0zuqbw4 {
    0% { transform: scale(0) rotate(0); }
    100% { transform: scale(1) rotate(-30deg); }
}

/* Stage 2: Small Plant */
.small-plant[b-3ro0zuqbw4] {
    position: relative;
    width: 50px;
    height: 60px;
}

.plant-stem[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 45px;
    background: linear-gradient(to top, #65a30d, #84cc16);
    border-radius: 3px;
}

.plant-leaf[b-3ro0zuqbw4] {
    position: absolute;
    width: 18px;
    height: 10px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
    animation: sway-b-3ro0zuqbw4 2s ease-in-out infinite;
}

.leaf-1[b-3ro0zuqbw4] { top: 8px; left: 24px; transform: rotate(40deg); animation-delay: 0s; }
.leaf-2[b-3ro0zuqbw4] { top: 8px; right: 24px; transform: rotate(-40deg); animation-delay: 0.3s; }
.leaf-3[b-3ro0zuqbw4] { top: 22px; left: 26px; transform: rotate(30deg); animation-delay: 0.5s; }
.leaf-4[b-3ro0zuqbw4] { top: 22px; right: 26px; transform: rotate(-30deg); animation-delay: 0.7s; }

/* Stage 3: Sapling */
.sapling[b-3ro0zuqbw4] {
    position: relative;
    width: 80px;
    height: 90px;
}

.sapling .trunk[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 50px;
    background: linear-gradient(90deg, #92400e 0%, #78350f 50%, #92400e 100%);
    border-radius: 4px 4px 6px 6px;
}

.sapling .branch[b-3ro0zuqbw4] {
    position: absolute;
    height: 6px;
    background: linear-gradient(to right, #92400e, #a16207);
    border-radius: 3px;
}

.sapling .branch-left[b-3ro0zuqbw4] {
    top: 30px;
    left: 15px;
    width: 20px;
    transform: rotate(-30deg);
}

.sapling .branch-right[b-3ro0zuqbw4] {
    top: 30px;
    right: 15px;
    width: 20px;
    transform: rotate(30deg);
}

.sapling .foliage[b-3ro0zuqbw4] {
    position: absolute;
    background: radial-gradient(ellipse, #22c55e 0%, #16a34a 70%, #15803d 100%);
    border-radius: 50%;
    animation: foliage-sway-b-3ro0zuqbw4 3s ease-in-out infinite;
}

.foliage-1[b-3ro0zuqbw4] { top: 0; left: 50%; transform: translateX(-50%); width: 45px; height: 35px; }
.foliage-2[b-3ro0zuqbw4] { top: 15px; left: 10px; width: 30px; height: 25px; animation-delay: 0.5s; }
.foliage-3[b-3ro0zuqbw4] { top: 15px; right: 10px; width: 30px; height: 25px; animation-delay: 1s; }

@keyframes foliage-sway-b-3ro0zuqbw4 {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.03); }
}

/* Stage 4: Young Tree */
.young-tree[b-3ro0zuqbw4] {
    position: relative;
    width: 120px;
    height: 130px;
}

.young-tree .trunk[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 70px;
    background: linear-gradient(90deg, #78350f 0%, #92400e 30%, #78350f 70%, #451a03 100%);
    border-radius: 4px 4px 8px 8px;
}

.young-tree .branch[b-3ro0zuqbw4] {
    position: absolute;
    background: linear-gradient(to right, #78350f, #92400e);
    border-radius: 4px;
}

.young-tree .branch-1[b-3ro0zuqbw4] { top: 50px; left: 20px; width: 30px; height: 8px; transform: rotate(-25deg); }
.young-tree .branch-2[b-3ro0zuqbw4] { top: 50px; right: 20px; width: 30px; height: 8px; transform: rotate(25deg); }
.young-tree .branch-3[b-3ro0zuqbw4] { top: 70px; left: 35px; width: 20px; height: 6px; transform: rotate(-20deg); }

.young-tree .canopy[b-3ro0zuqbw4] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 70px;
}

.young-tree .leaf[b-3ro0zuqbw4] {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(ellipse, #22c55e 0%, #16a34a 100%);
    border-radius: 50% 0 50% 50%;
    animation: leaf-flutter-b-3ro0zuqbw4 2s ease-in-out infinite;
}

/* Position leaves randomly within canopy */
.young-tree .leaf-0[b-3ro0zuqbw4] { top: 10%; left: 40%; animation-delay: 0s; }
.young-tree .leaf-1[b-3ro0zuqbw4] { top: 5%; left: 55%; animation-delay: 0.2s; }
.young-tree .leaf-2[b-3ro0zuqbw4] { top: 20%; left: 25%; animation-delay: 0.4s; }
.young-tree .leaf-3[b-3ro0zuqbw4] { top: 15%; left: 70%; animation-delay: 0.6s; }
.young-tree .leaf-4[b-3ro0zuqbw4] { top: 35%; left: 15%; animation-delay: 0.8s; }
.young-tree .leaf-5[b-3ro0zuqbw4] { top: 30%; left: 80%; animation-delay: 1s; }
.young-tree .leaf-6[b-3ro0zuqbw4] { top: 45%; left: 30%; animation-delay: 0.3s; }
.young-tree .leaf-7[b-3ro0zuqbw4] { top: 40%; left: 65%; animation-delay: 0.5s; }
.young-tree .leaf-8[b-3ro0zuqbw4] { top: 55%; left: 45%; animation-delay: 0.7s; }
.young-tree .leaf-9[b-3ro0zuqbw4] { top: 25%; left: 50%; animation-delay: 0.9s; }
.young-tree .leaf-10[b-3ro0zuqbw4] { top: 50%; left: 20%; animation-delay: 1.1s; }
.young-tree .leaf-11[b-3ro0zuqbw4] { top: 60%; left: 55%; animation-delay: 1.3s; }

@keyframes leaf-flutter-b-3ro0zuqbw4 {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(5deg) scale(1.05); }
    75% { transform: rotate(-5deg) scale(0.95); }
}

/* Stage 5: Blooming Tree */
.blooming-tree[b-3ro0zuqbw4] {
    position: relative;
    width: 150px;
    height: 150px;
}

.blooming-tree .trunk[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 80px;
    background: linear-gradient(90deg, #451a03 0%, #78350f 30%, #92400e 50%, #78350f 70%, #451a03 100%);
    border-radius: 4px 4px 10px 10px;
}

.blooming-tree .branch[b-3ro0zuqbw4] {
    position: absolute;
    background: linear-gradient(to right, #78350f, #92400e);
    border-radius: 5px;
}

.blooming-tree .branch-1[b-3ro0zuqbw4] { top: 55px; left: 15px; width: 40px; height: 10px; transform: rotate(-20deg); }
.blooming-tree .branch-2[b-3ro0zuqbw4] { top: 55px; right: 15px; width: 40px; height: 10px; transform: rotate(20deg); }
.blooming-tree .branch-3[b-3ro0zuqbw4] { top: 75px; left: 30px; width: 25px; height: 8px; transform: rotate(-15deg); }
.blooming-tree .branch-4[b-3ro0zuqbw4] { top: 75px; right: 30px; width: 25px; height: 8px; transform: rotate(15deg); }

.blooming-tree .canopy[b-3ro0zuqbw4] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 90px;
}

.blooming-tree .leaf[b-3ro0zuqbw4] {
    position: absolute;
    width: 18px;
    height: 18px;
    background: radial-gradient(ellipse, #22c55e 0%, #16a34a 100%);
    border-radius: 50% 0 50% 50%;
    animation: leaf-flutter-b-3ro0zuqbw4 2s ease-in-out infinite;
}

/* Blossoms */
.blooming-tree .blossom[b-3ro0zuqbw4] {
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #fdf2f8 0%, #fbcfe8 50%, #f9a8d4 100%);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(249, 168, 212, 0.5);
    animation: blossom-glow-b-3ro0zuqbw4 2s ease-in-out infinite;
}

.blooming-tree .blossom-0[b-3ro0zuqbw4] { top: 8%; left: 45%; animation-delay: 0s; }
.blooming-tree .blossom-1[b-3ro0zuqbw4] { top: 15%; left: 60%; animation-delay: 0.3s; }
.blooming-tree .blossom-2[b-3ro0zuqbw4] { top: 25%; left: 30%; animation-delay: 0.6s; }
.blooming-tree .blossom-3[b-3ro0zuqbw4] { top: 20%; left: 75%; animation-delay: 0.9s; }
.blooming-tree .blossom-4[b-3ro0zuqbw4] { top: 40%; left: 20%; animation-delay: 1.2s; }
.blooming-tree .blossom-5[b-3ro0zuqbw4] { top: 35%; left: 85%; animation-delay: 1.5s; }
.blooming-tree .blossom-6[b-3ro0zuqbw4] { top: 50%; left: 50%; animation-delay: 1.8s; }
.blooming-tree .blossom-7[b-3ro0zuqbw4] { top: 55%; left: 35%; animation-delay: 2.1s; }

@keyframes blossom-glow-b-3ro0zuqbw4 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* Stage 6+: Full Tree */
.full-tree[b-3ro0zuqbw4] {
    position: relative;
    width: 180px;
    height: 170px;
}

.full-tree .trunk[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 90px;
    background: linear-gradient(90deg, #292524 0%, #57534e 20%, #78716c 40%, #57534e 60%, #44403c 80%, #292524 100%);
    border-radius: 4px 4px 12px 12px;
}

.full-tree .roots[b-3ro0zuqbw4] {
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 15px;
    background: linear-gradient(90deg, transparent 0%, #57534e 30%, #44403c 50%, #57534e 70%, transparent 100%);
    border-radius: 0 0 50% 50%;
}

.full-tree .branch[b-3ro0zuqbw4] {
    position: absolute;
    background: linear-gradient(to right, #57534e, #78716c);
    border-radius: 6px;
}

.full-tree .branch-1[b-3ro0zuqbw4] { top: 55px; left: 5px; width: 50px; height: 12px; transform: rotate(-18deg); }
.full-tree .branch-2[b-3ro0zuqbw4] { top: 55px; right: 5px; width: 50px; height: 12px; transform: rotate(18deg); }
.full-tree .branch-3[b-3ro0zuqbw4] { top: 75px; left: 20px; width: 35px; height: 10px; transform: rotate(-12deg); }
.full-tree .branch-4[b-3ro0zuqbw4] { top: 75px; right: 20px; width: 35px; height: 10px; transform: rotate(12deg); }
.full-tree .branch-5[b-3ro0zuqbw4] { top: 90px; left: 35px; width: 25px; height: 8px; transform: rotate(-8deg); }

.full-tree .canopy[b-3ro0zuqbw4] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 100px;
}

.full-tree .leaf[b-3ro0zuqbw4] {
    position: absolute;
    width: 16px;
    height: 16px;
    background: radial-gradient(ellipse, #22c55e 0%, #15803d 100%);
    border-radius: 50% 0 50% 50%;
    animation: leaf-flutter-b-3ro0zuqbw4 2.5s ease-in-out infinite;
}

.full-tree .blossom[b-3ro0zuqbw4] {
    position: absolute;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, white 0%, #fce7f3 50%, #f9a8d4 100%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(249, 168, 212, 0.4);
    animation: blossom-glow-b-3ro0zuqbw4 2.5s ease-in-out infinite;
}

/* Fruits */
.full-tree .fruit[b-3ro0zuqbw4] {
    position: absolute;
    width: 14px;
    height: 16px;
    background: radial-gradient(ellipse at 30% 30%, #fca5a5 0%, #ef4444 50%, #dc2626 100%);
    border-radius: 45% 45% 50% 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    animation: fruit-sway-b-3ro0zuqbw4 3s ease-in-out infinite;
}

.full-tree .fruit[b-3ro0zuqbw4]::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 4px;
    background: #65a30d;
    border-radius: 1px;
}

.full-tree .fruit-0[b-3ro0zuqbw4] { top: 15%; left: 35%; animation-delay: 0s; }
.full-tree .fruit-1[b-3ro0zuqbw4] { top: 25%; left: 70%; animation-delay: 0.5s; }
.full-tree .fruit-2[b-3ro0zuqbw4] { top: 40%; left: 25%; animation-delay: 1s; }
.full-tree .fruit-3[b-3ro0zuqbw4] { top: 35%; left: 80%; animation-delay: 1.5s; }
.full-tree .fruit-4[b-3ro0zuqbw4] { top: 55%; left: 50%; animation-delay: 2s; }
.full-tree .fruit-5[b-3ro0zuqbw4] { top: 60%; left: 65%; animation-delay: 2.5s; }

@keyframes fruit-sway-b-3ro0zuqbw4 {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}

/* Sparkles for max level */
.sparkles[b-3ro0zuqbw4] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sparkle[b-3ro0zuqbw4] {
    position: absolute;
    font-size: 16px;
    animation: sparkle-float-b-3ro0zuqbw4 3s ease-in-out infinite;
}

.sparkle-0[b-3ro0zuqbw4] { top: 5%; left: 20%; animation-delay: 0s; }
.sparkle-1[b-3ro0zuqbw4] { top: 10%; left: 80%; animation-delay: 0.5s; }
.sparkle-2[b-3ro0zuqbw4] { top: 30%; left: 10%; animation-delay: 1s; }
.sparkle-3[b-3ro0zuqbw4] { top: 25%; left: 90%; animation-delay: 1.5s; }
.sparkle-4[b-3ro0zuqbw4] { top: 50%; left: 5%; animation-delay: 2s; }
.sparkle-5[b-3ro0zuqbw4] { top: 45%; left: 95%; animation-delay: 2.5s; }
.sparkle-6[b-3ro0zuqbw4] { top: 70%; left: 15%; animation-delay: 0.8s; }
.sparkle-7[b-3ro0zuqbw4] { top: 65%; left: 85%; animation-delay: 1.8s; }

@keyframes sparkle-float-b-3ro0zuqbw4 {
    0%, 100% { opacity: 0; transform: scale(0.5) translateY(0); }
    50% { opacity: 1; transform: scale(1) translateY(-10px); }
}

/* Milestone Preview */
.milestone-preview[b-3ro0zuqbw4] {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.7rem;
    color: #166534;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.milestone-icon[b-3ro0zuqbw4] {
    font-size: 0.9rem;
}

/* Stats Footer */
.tree-stats[b-3ro0zuqbw4] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(22, 101, 52, 0.1);
}

.stat[b-3ro0zuqbw4] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-value[b-3ro0zuqbw4] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #166534;
    line-height: 1;
}

.stat-label[b-3ro0zuqbw4] {
    font-size: 0.7rem;
    color: #4ade80;
    text-transform: uppercase;
    font-weight: 600;
}

.stat-divider[b-3ro0zuqbw4] {
    width: 1px;
    height: 30px;
    background: rgba(22, 101, 52, 0.2);
}

/* Dark Theme Overrides */
.theme-space[b-3ro0zuqbw4],
.theme-winter[b-3ro0zuqbw4],
.theme-nature[b-3ro0zuqbw4],
.theme-ocean[b-3ro0zuqbw4],
.theme-mystic[b-3ro0zuqbw4],
.theme-tron[b-3ro0zuqbw4] {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.theme-space .tree-header h4[b-3ro0zuqbw4],
.theme-winter .tree-header h4[b-3ro0zuqbw4],
.theme-nature .tree-header h4[b-3ro0zuqbw4],
.theme-ocean .tree-header h4[b-3ro0zuqbw4],
.theme-mystic .tree-header h4[b-3ro0zuqbw4],
.theme-tron .tree-header h4[b-3ro0zuqbw4] {
    color: #86efac;
}

.theme-space .stat-value[b-3ro0zuqbw4],
.theme-winter .stat-value[b-3ro0zuqbw4],
.theme-nature .stat-value[b-3ro0zuqbw4],
.theme-ocean .stat-value[b-3ro0zuqbw4],
.theme-mystic .stat-value[b-3ro0zuqbw4],
.theme-tron .stat-value[b-3ro0zuqbw4] {
    color: #86efac;
}

.theme-space .milestone-preview[b-3ro0zuqbw4],
.theme-winter .milestone-preview[b-3ro0zuqbw4],
.theme-nature .milestone-preview[b-3ro0zuqbw4],
.theme-ocean .milestone-preview[b-3ro0zuqbw4],
.theme-mystic .milestone-preview[b-3ro0zuqbw4],
.theme-tron .milestone-preview[b-3ro0zuqbw4] {
    background: rgba(30, 41, 59, 0.9);
    color: #86efac;
}

.theme-space .tree-stats[b-3ro0zuqbw4],
.theme-winter .tree-stats[b-3ro0zuqbw4],
.theme-nature .tree-stats[b-3ro0zuqbw4],
.theme-ocean .tree-stats[b-3ro0zuqbw4],
.theme-mystic .tree-stats[b-3ro0zuqbw4],
.theme-tron .tree-stats[b-3ro0zuqbw4] {
    border-top-color: rgba(134, 239, 172, 0.2);
}

.theme-space .stat-divider[b-3ro0zuqbw4],
.theme-winter .stat-divider[b-3ro0zuqbw4],
.theme-nature .stat-divider[b-3ro0zuqbw4],
.theme-ocean .stat-divider[b-3ro0zuqbw4],
.theme-mystic .stat-divider[b-3ro0zuqbw4],
.theme-tron .stat-divider[b-3ro0zuqbw4] {
    background: rgba(134, 239, 172, 0.3);
}
/* /Components/QuitTracker/LogCravingDialog.razor.rz.scp.css */
.dialog-intro[b-exajxuxbeq] {
    color: var(--theme-text-muted);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

/* Form Elements */
.form-group[b-exajxuxbeq] {
    margin-bottom: 12px;
}

.form-group label[b-exajxuxbeq] {
    display: block;
    font-weight: 600;
    color: var(--theme-text-secondary);
    margin-bottom: 4px;
    font-size: 0.8125rem;
}

.form-textarea[b-exajxuxbeq] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    min-height: 60px;
    resize: vertical;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
}

.form-textarea:focus[b-exajxuxbeq] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.15);
}

/* Intensity Slider */
.intensity-slider[b-exajxuxbeq] {
    padding: 0.5rem 0;
}

.intensity-slider input[type="range"][b-exajxuxbeq] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, #10b981 0%, #f59e0b 50%, #ef4444 100%);
    border-radius: 4px;
    cursor: pointer;
}

.intensity-slider input[type="range"][b-exajxuxbeq]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    background: var(--theme-surface);
    border-radius: 50%;
    box-shadow: 0 2px 8px var(--theme-shadow-color, rgba(0, 0, 0, 0.2));
    cursor: pointer;
}

.intensity-labels[b-exajxuxbeq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.intensity-value[b-exajxuxbeq] {
    font-weight: 700;
    font-size: 0.9rem;
}

.intensity-value.low[b-exajxuxbeq] { color: #10b981; }
.intensity-value.medium[b-exajxuxbeq] { color: #f59e0b; }
.intensity-value.high[b-exajxuxbeq] { color: #ef4444; }

/* Trigger Grid */
.trigger-grid[b-exajxuxbeq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.trigger-option[b-exajxuxbeq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.25rem;
    border: 2px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface);
    cursor: pointer;
    transition: all 0.2s;
}

.trigger-option:hover[b-exajxuxbeq] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.trigger-option.selected[b-exajxuxbeq] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.trigger-emoji[b-exajxuxbeq] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.trigger-name[b-exajxuxbeq] {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-align: center;
}

.trigger-option.selected .trigger-name[b-exajxuxbeq] {
    color: #059669;
}

/* Toggle Buttons */
.toggle-row[b-exajxuxbeq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toggle-buttons[b-exajxuxbeq] {
    display: flex;
    gap: 0.75rem;
}

.toggle-btn[b-exajxuxbeq] {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-surface);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn:hover[b-exajxuxbeq] {
    border-color: var(--theme-text-muted);
}

.toggle-btn.selected.success[b-exajxuxbeq] {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.toggle-btn.selected.warning[b-exajxuxbeq] {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

/* Responsive */
@media (max-width: 480px) {
    .trigger-grid[b-exajxuxbeq] {
        grid-template-columns: repeat(3, 1fr);
    }

    .toggle-buttons[b-exajxuxbeq] {
        flex-direction: column;
    }
}
/* /Components/QuitTracker/QuitTrackerCard.razor.rz.scp.css */
.quit-tracker-card[b-dtaq9f1zga] {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
}

.quit-tracker-card:hover[b-dtaq9f1zga] {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.quit-tracker-card.active[b-dtaq9f1zga] {
    border-color: rgba(16, 185, 129, 0.3);
}

.quit-tracker-card.paused[b-dtaq9f1zga] {
    opacity: 0.7;
}

/* Header */
.card-header[b-dtaq9f1zga] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.tracker-type[b-dtaq9f1zga] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.type-emoji[b-dtaq9f1zga] {
    font-size: 1.5rem;
}

.type-name[b-dtaq9f1zga] {
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
}

.status-badge[b-dtaq9f1zga] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge.active[b-dtaq9f1zga] {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.status-badge.paused[b-dtaq9f1zga] {
    background: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

/* Timer Display */
.timer-display[b-dtaq9f1zga] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
}

.timer-value[b-dtaq9f1zga] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
}

.timer-value .number[b-dtaq9f1zga] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.timer-value .label[b-dtaq9f1zga] {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.timer-separator[b-dtaq9f1zga] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #cbd5e1;
    margin-top: -0.75rem;
}

/* Stats Row */
.stats-row[b-dtaq9f1zga] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.stat[b-dtaq9f1zga] {
    flex: 1;
    text-align: center;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 12px;
}

.stat-value[b-dtaq9f1zga] {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: #10b981;
}

.stat-label[b-dtaq9f1zga] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Milestone Progress */
.milestone-progress[b-dtaq9f1zga] {
    margin-bottom: 1rem;
}

.progress-bar[b-dtaq9f1zga] {
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill[b-dtaq9f1zga] {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.milestone-info[b-dtaq9f1zga] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
}

.milestone-emoji[b-dtaq9f1zga] {
    font-size: 1rem;
}

.milestone-complete[b-dtaq9f1zga] {
    text-align: center;
    padding: 0.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(52, 211, 153, 0.1) 100%);
    border-radius: 8px;
    color: #059669;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* Actions */
.card-actions[b-dtaq9f1zga] {
    display: flex;
    justify-content: center;
}

.btn-craving[b-dtaq9f1zga] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: none;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-craving:hover[b-dtaq9f1zga] {
    background: rgba(239, 68, 68, 0.2);
}

.btn-craving svg[b-dtaq9f1zga] {
    width: 1rem;
    height: 1rem;
}

/* ===== Dark Theme Styles ===== */
.quit-tracker-card.theme-space[b-dtaq9f1zga],
.quit-tracker-card.theme-winter[b-dtaq9f1zga],
.quit-tracker-card.theme-nature[b-dtaq9f1zga],
.quit-tracker-card.theme-ocean[b-dtaq9f1zga],
.quit-tracker-card.theme-mystic[b-dtaq9f1zga],
.quit-tracker-card.theme-tron[b-dtaq9f1zga] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.quit-tracker-card.theme-space.active[b-dtaq9f1zga],
.quit-tracker-card.theme-winter.active[b-dtaq9f1zga],
.quit-tracker-card.theme-nature.active[b-dtaq9f1zga],
.quit-tracker-card.theme-ocean.active[b-dtaq9f1zga],
.quit-tracker-card.theme-mystic.active[b-dtaq9f1zga],
.quit-tracker-card.theme-tron.active[b-dtaq9f1zga] {
    border-color: rgba(16, 185, 129, 0.4);
}

.theme-space .type-name[b-dtaq9f1zga],
.theme-winter .type-name[b-dtaq9f1zga],
.theme-nature .type-name[b-dtaq9f1zga],
.theme-ocean .type-name[b-dtaq9f1zga],
.theme-mystic .type-name[b-dtaq9f1zga],
.theme-tron .type-name[b-dtaq9f1zga] {
    color: #f1f5f9;
}

.theme-space .timer-display[b-dtaq9f1zga],
.theme-winter .timer-display[b-dtaq9f1zga],
.theme-nature .timer-display[b-dtaq9f1zga],
.theme-ocean .timer-display[b-dtaq9f1zga],
.theme-mystic .timer-display[b-dtaq9f1zga],
.theme-tron .timer-display[b-dtaq9f1zga] {
    background: rgba(15, 23, 42, 0.5);
}

.theme-space .timer-value .number[b-dtaq9f1zga],
.theme-winter .timer-value .number[b-dtaq9f1zga],
.theme-nature .timer-value .number[b-dtaq9f1zga],
.theme-ocean .timer-value .number[b-dtaq9f1zga],
.theme-mystic .timer-value .number[b-dtaq9f1zga],
.theme-tron .timer-value .number[b-dtaq9f1zga] {
    color: #f1f5f9;
}

.theme-space .timer-value .label[b-dtaq9f1zga],
.theme-winter .timer-value .label[b-dtaq9f1zga],
.theme-nature .timer-value .label[b-dtaq9f1zga],
.theme-ocean .timer-value .label[b-dtaq9f1zga],
.theme-mystic .timer-value .label[b-dtaq9f1zga],
.theme-tron .timer-value .label[b-dtaq9f1zga] {
    color: #94a3b8;
}

.theme-space .stat[b-dtaq9f1zga],
.theme-winter .stat[b-dtaq9f1zga],
.theme-nature .stat[b-dtaq9f1zga],
.theme-ocean .stat[b-dtaq9f1zga],
.theme-mystic .stat[b-dtaq9f1zga],
.theme-tron .stat[b-dtaq9f1zga] {
    background: rgba(15, 23, 42, 0.5);
}

.theme-space .stat-label[b-dtaq9f1zga],
.theme-winter .stat-label[b-dtaq9f1zga],
.theme-nature .stat-label[b-dtaq9f1zga],
.theme-ocean .stat-label[b-dtaq9f1zga],
.theme-mystic .stat-label[b-dtaq9f1zga],
.theme-tron .stat-label[b-dtaq9f1zga] {
    color: #94a3b8;
}

.theme-space .progress-bar[b-dtaq9f1zga],
.theme-winter .progress-bar[b-dtaq9f1zga],
.theme-nature .progress-bar[b-dtaq9f1zga],
.theme-ocean .progress-bar[b-dtaq9f1zga],
.theme-mystic .progress-bar[b-dtaq9f1zga],
.theme-tron .progress-bar[b-dtaq9f1zga] {
    background: rgba(255, 255, 255, 0.1);
}

.theme-space .milestone-info[b-dtaq9f1zga],
.theme-winter .milestone-info[b-dtaq9f1zga],
.theme-nature .milestone-info[b-dtaq9f1zga],
.theme-ocean .milestone-info[b-dtaq9f1zga],
.theme-mystic .milestone-info[b-dtaq9f1zga],
.theme-tron .milestone-info[b-dtaq9f1zga] {
    color: #94a3b8;
}

.theme-space .milestone-complete[b-dtaq9f1zga],
.theme-winter .milestone-complete[b-dtaq9f1zga],
.theme-nature .milestone-complete[b-dtaq9f1zga],
.theme-ocean .milestone-complete[b-dtaq9f1zga],
.theme-mystic .milestone-complete[b-dtaq9f1zga],
.theme-tron .milestone-complete[b-dtaq9f1zga] {
    background: rgba(16, 185, 129, 0.2);
}
/* /Components/ServiceDesk/CreateTicketOnBehalfDialog.razor.rz.scp.css */
/* ============================================
   CREATE TICKET ON BEHALF DIALOG - SCOPED STYLES
   ============================================ */

.create-ticket-form[b-wx23adgpe9] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.create-ticket-field[b-wx23adgpe9] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.create-ticket-label[b-wx23adgpe9] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--theme-text-secondary, #475569);
}
/* /Components/ServiceDesk/TicketDetailDialog.razor.rz.scp.css */
/* ============================================
   TICKET DETAIL DIALOG - SCOPED STYLES
   ============================================ */

.ticket-detail[b-olp44io0ry] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Meta row with badges */
.ticket-meta-row[b-olp44io0ry] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ticket-id-badge[b-olp44io0ry] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: monospace;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    border: 1px solid var(--theme-border, #e2e8f0);
}

/* Form grid */
.ticket-form-grid[b-olp44io0ry] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ticket-form-group[b-olp44io0ry] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticket-form-group.full-width[b-olp44io0ry] {
    grid-column: span 2;
}

.ticket-form-label[b-olp44io0ry] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

/* Info section */
.ticket-info-section[b-olp44io0ry],
.ticket-recording-section[b-olp44io0ry] {
    padding-top: 16px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.ticket-info-heading[b-olp44io0ry] {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--theme-text-primary, #1e293b);
}

.ticket-info-grid[b-olp44io0ry] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ticket-info-item[b-olp44io0ry] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ticket-info-label[b-olp44io0ry] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-text-muted, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticket-info-value[b-olp44io0ry] {
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
}

/* Recording link */
.ticket-recording-link[b-olp44io0ry] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    transition: all 0.2s ease;
}

.ticket-recording-link svg[b-olp44io0ry] {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.ticket-recording-link:hover[b-olp44io0ry] {
    text-decoration: underline;
    opacity: 0.85;
}

.ticket-recording-row[b-olp44io0ry] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Attachments section */
.ticket-attachments-section[b-olp44io0ry] {
    padding-top: 16px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

/* Notes section */
.ticket-notes-section[b-olp44io0ry] {
    padding-top: 16px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

/* ============================================
   DARK THEME
   ============================================ */
.is-dark .ticket-id-badge[b-olp44io0ry] {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    border-color: rgba(255, 255, 255, 0.12);
}

.is-dark .ticket-info-heading[b-olp44io0ry] {
    color: #f1f5f9;
}

.is-dark .ticket-info-value[b-olp44io0ry] {
    color: #e2e8f0;
}

.is-dark .ticket-info-section[b-olp44io0ry],
.is-dark .ticket-recording-section[b-olp44io0ry],
.is-dark .ticket-attachments-section[b-olp44io0ry],
.is-dark .ticket-notes-section[b-olp44io0ry] {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .ticket-form-grid[b-olp44io0ry] {
        grid-template-columns: 1fr;
    }

    .ticket-form-group.full-width[b-olp44io0ry] {
        grid-column: span 1;
    }

    .ticket-info-grid[b-olp44io0ry] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Settings/TTSSettingsPanel.razor.rz.scp.css */
/* TTS Settings Panel Styles */

.tts-settings[b-32c65kyr3t] {
    padding: 20px;
    background: var(--theme-surface, white);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.settings-section-title[b-32c65kyr3t] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.settings-section-title svg[b-32c65kyr3t] {
    color: #7c3aed;
}

.tts-unsupported[b-32c65kyr3t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 8px;
    color: #ef4444;
}

.settings-group[b-32c65kyr3t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setting-row[b-32c65kyr3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--theme-border-light, #f1f5f9);
}

.setting-row.vertical[b-32c65kyr3t] {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.setting-row:last-child[b-32c65kyr3t] {
    border-bottom: none;
}

.setting-info[b-32c65kyr3t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.setting-info label[b-32c65kyr3t] {
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9375rem;
}

.setting-description[b-32c65kyr3t] {
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #64748b);
}

/* Toggle Switch */
.toggle-switch[b-32c65kyr3t] {
    position: relative;
    width: 48px;
    height: 26px;
    cursor: pointer;
}

.toggle-switch input[b-32c65kyr3t] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-32c65kyr3t] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #cbd5e1;
    border-radius: 26px;
    transition: all 0.3s ease;
}

.toggle-slider[b-32c65kyr3t]::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch input:checked + .toggle-slider[b-32c65kyr3t] {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.toggle-switch input:checked + .toggle-slider[b-32c65kyr3t]::before {
    transform: translateX(22px);
}

/* Range Control */
.range-control[b-32c65kyr3t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-control input[type="range"][b-32c65kyr3t] {
    width: 120px;
    height: 6px;
    appearance: none;
    background: #e2e8f0;
    border-radius: 3px;
    cursor: pointer;
}

.range-control input[type="range"][b-32c65kyr3t]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.range-value[b-32c65kyr3t] {
    min-width: 45px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

/* Voice Select */
.voice-select[b-32c65kyr3t] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-background, white);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.voice-select:focus[b-32c65kyr3t] {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Test Voice Button */
.test-voice-btn[b-32c65kyr3t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.test-voice-btn:hover:not(:disabled)[b-32c65kyr3t] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.test-voice-btn:disabled[b-32c65kyr3t] {
    opacity: 0.7;
    cursor: not-allowed;
}

.test-voice-btn.testing[b-32c65kyr3t] {
    background: linear-gradient(135deg, #ef4444, #f87171);
}
/* /Components/Shared/ChainTrace.razor.rz.scp.css */
/* CHAIN-2 (2026-06-12): traceability strip. Theme-variable driven so all
   8 themes inherit their own surface/text/accent; no hardcoded palette.
   Mobile: the strip refuses to shrink and scrolls horizontally (the
   sub-nav mobile pattern — an overflow container does nothing unless
   content keeps its width). */

.chain-trace[b-f8pusghf8c] {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--theme-border, rgba(128, 128, 128, 0.25));
    border-radius: 12px;
    background: var(--theme-surface, rgba(128, 128, 128, 0.06));
    overflow-x: auto;
    scrollbar-width: thin;

    /* CHAIN-UX-3 (2026-06-24): pin the spine. When you click a pill the page
       scrolls the linked card into view (CHAIN-UX-1) — but the strip itself
       used to scroll away with it, so the through-line left the frame exactly
       when you were tracing it. Sticky keeps it under the app header while the
       linked sections scroll beneath. Pairs with the bumped ScrollTo offset in
       ChainTrace.razor (header + this strip ≈ 140px) so targets land BELOW the
       pinned strip, not behind it. The page scrolls the window (app-header is
       sticky in the same context, MainLayout has no inner overflow scroller),
       so there's no clipping ancestor to break position:sticky.
       backdrop-filter on the sticky element itself is safe — the break rule is
       about ANCESTOR transform/filter, not the sticky box's own. */
    position: sticky;
    top: var(--header-height, 56px);
    z-index: 1000; /* below app-header (1100), above page content */
    backdrop-filter: blur(10px);
}

.chain-trace-node[b-f8pusghf8c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9px;
    border: 1px solid var(--theme-border, rgba(128, 128, 128, 0.25));
    background: transparent;
    text-decoration: none;
    color: var(--theme-text-primary, inherit);
    white-space: nowrap;
    /* CHAIN-FIT-1 (2026-09-05): nodes may SHRINK on desktop. Five nodes with two
       long titles (idea + goal) overflowed the strip at laptop widths and the
       last rung - the tracked hours - was half off-screen behind a scrollbar,
       in the exact frame the explainer's narration points at ("one line from
       the first note to the last hour"). Shrinking lets .chain-trace-label's
       ellipsis do its job before the strip resorts to scrolling. Count pills
       and the separators keep flex-shrink: 0 below, so only titles give way.
       Mobile (<= 768px) restores the no-shrink + scroll pattern: there is no
       width at which five ellipsised pills read on a phone. */
    flex: 0 1 auto;
    min-width: 0;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

button.chain-trace-node.is-scroll[b-f8pusghf8c],
.chain-trace-sep[b-f8pusghf8c] {
    flex-shrink: 0; /* CHAIN-FIT-1: count pills and arrows never give way; titles do */
}

@media (max-width: 768px) {
    .chain-trace-node[b-f8pusghf8c] {
        flex: 0 0 auto; /* CHAIN-FIT-1: mobile keeps the original scroll-the-strip pattern */
    }
}

a.chain-trace-node:hover[b-f8pusghf8c] {
    border-color: var(--theme-primary, #3b82f6);
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.08);
}

/* CHAIN-3b: count pills are <button>s that scroll to the on-page section.
   Inherit the pill look (buttons bring UA font/cursor defaults). */
button.chain-trace-node.is-scroll[b-f8pusghf8c] {
    font: inherit;
    cursor: pointer;
    text-align: left;
}

button.chain-trace-node.is-scroll:hover[b-f8pusghf8c] {
    border-color: var(--theme-primary, #3b82f6);
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.08);
}

.chain-trace-node.is-current[b-f8pusghf8c] {
    border-color: var(--theme-primary, #3b82f6);
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.12);
    cursor: default;
}

.chain-trace-node.is-static[b-f8pusghf8c] {
    cursor: default;
}

.chain-trace-icon[b-f8pusghf8c] {
    font-size: 1rem;
    line-height: 1;
}

.chain-trace-text[b-f8pusghf8c] {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.chain-trace-kind[b-f8pusghf8c] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-muted, #94a3b8);
}

.chain-trace-label[b-f8pusghf8c] {
    font-size: 0.82rem;
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CHAIN-UX-1 (2026-06-23): the ↗ glyph on pills that navigate OFF this page.
   Muted by default, brightens with the link's hover accent so it reads as
   part of the same affordance. In-page scroll pills + the current node never
   carry it, so leaving-the-page is predictable at a glance. */
.chain-trace-ext[b-f8pusghf8c] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.05rem;
    color: var(--theme-text-muted, #94a3b8);
}

.chain-trace-ext svg[b-f8pusghf8c] {
    width: 12px;
    height: 12px;
}

a.chain-trace-node:hover .chain-trace-ext[b-f8pusghf8c] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

.chain-trace-sep[b-f8pusghf8c] {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    color: var(--theme-text-muted, #94a3b8);
}

.chain-trace-sep svg[b-f8pusghf8c] {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .chain-trace-label[b-f8pusghf8c] {
        max-width: 130px;
    }
}
/* /Components/Shared/CommandBar.razor.rz.scp.css */
/* HOME-CMD-1 (2026-10-08): the Home command bar - the app's tool finder + "ask" entry, out of the
   sixth hub tab and onto the page. Sized as the page's primary control (it replaces the big
   "What should I start with?" button's slot); the tour chips sit small beneath it (Home.razor.css). */

.nts-cmd[b-9l5dudkpy5] {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto 10px;
    z-index: 30;           /* the results panel overlaps the hub card below */
}

.nts-cmd-field[b-9l5dudkpy5] {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 10px 0 16px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.12));
    border-radius: 14px;
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.06)),
                0 6px 18px rgba(15, 23, 42, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nts-cmd-field:focus-within[b-9l5dudkpy5] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.16),
                0 6px 18px rgba(15, 23, 42, 0.08);
}

.nts-cmd-icon[b-9l5dudkpy5] {
    font-size: 22px;
    color: var(--theme-text-secondary, #64748b);
    flex-shrink: 0;
}

.nts-cmd-input[b-9l5dudkpy5] {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--theme-text-primary, #0f172a);
    font: inherit;
    font-size: 1rem;
}

/* HEADER-CMD-4 (2026-10-08 11:55 PM, first prod look - Josh's Space theme): a darker box sat inside
   the field. themes.css "GLOBAL INPUT/TEXTAREA THEME STYLES" paints every dark-theme text input
   (`:is(.is-dark, body.is-dark) :is(input:not(...)x4)` - specificity ~(0,5,2)) with an input
   background + border, and adds a coloured focus ring per theme. This input is not a form field -
   the FIELD around it is the control and owns all of that - so it opts out. !important because the
   global rule out-specifies any sane scoped selector; it's the same opt-out those rules already give
   .message-input and .unified-search-input via :not(), done from this side. */
.nts-cmd .nts-cmd-input[b-9l5dudkpy5] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
}

.nts-cmd-input[b-9l5dudkpy5]::placeholder {
    color: var(--theme-text-secondary, #64748b);
    opacity: 0.85;
}

.nts-cmd-kbd[b-9l5dudkpy5] {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
    margin-right: 4px;
}

.nts-cmd kbd[b-9l5dudkpy5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.14));
    border-bottom-width: 2px;
    border-radius: 6px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04);
    color: var(--theme-text-secondary, #64748b);
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.nts-cmd-clear[b-9l5dudkpy5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    flex-shrink: 0;
}

.nts-cmd-clear:hover[b-9l5dudkpy5] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    color: var(--theme-text-primary, #0f172a);
}

.nts-cmd-clear .material-symbols-rounded[b-9l5dudkpy5] { font-size: 18px; }

/* ─── Results ─────────────────────────────────────────────────────────── */
.nts-cmd-results[b-9l5dudkpy5] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: min(60vh, 460px);
    overflow-y: auto;
    padding: 6px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.1));
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    text-align: left;
    animation: nts-cmd-in-b-9l5dudkpy5 0.14s ease-out;
}

@keyframes nts-cmd-in-b-9l5dudkpy5 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

.nts-cmd-section-label[b-9l5dudkpy5] {
    padding: 8px 10px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-text-secondary, #64748b);
}

.nts-cmd-divider[b-9l5dudkpy5] {
    height: 1px;
    margin: 6px 8px;
    background: var(--theme-border, rgba(0, 0, 0, 0.08));
}

.nts-cmd-row[b-9l5dudkpy5] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--theme-text-primary, #0f172a);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.nts-cmd-row--selected[b-9l5dudkpy5] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.10);
}

.nts-cmd-row-icon[b-9l5dudkpy5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: #ffffff;
    flex-shrink: 0;
}

.nts-cmd-row-icon .material-symbols-rounded[b-9l5dudkpy5] { font-size: 19px; }

.nts-cmd-row-icon--ask[b-9l5dudkpy5] {
    background: var(--theme-primary, #6366f1);
}

.nts-cmd-row-text[b-9l5dudkpy5] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.nts-cmd-row-name[b-9l5dudkpy5] {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
}

.nts-cmd-row-name[b-9l5dudkpy5]  mark {
    background: rgba(250, 204, 21, 0.38);
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.nts-cmd-row-sub[b-9l5dudkpy5] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--theme-text-secondary, #64748b);
}

/* HEADER-CMD-3: record rows. Tinted tiles (not the tools' gradients) so a client never reads as a
   tool at a glance; the detail line is sentence case, unlike the tools' uppercase category. */
.nts-cmd-row-icon--record[b-9l5dudkpy5] { background: rgba(100, 116, 139, 0.14); color: #475569; }
.nts-cmd-row-icon--company[b-9l5dudkpy5] { background: rgba(14, 165, 233, 0.14); color: #0284c7; }
.nts-cmd-row-icon--contact[b-9l5dudkpy5] { background: rgba(139, 92, 246, 0.14); color: #7c3aed; }
.nts-cmd-row-icon--deal[b-9l5dudkpy5]    { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.nts-cmd-row-icon--task[b-9l5dudkpy5]    { background: rgba(16, 185, 129, 0.14); color: #047857; }

.nts-cmd-row-detail[b-9l5dudkpy5] {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nts-cmd-row-name--inactive[b-9l5dudkpy5] { opacity: 0.6; }

.nts-cmd-row-quote[b-9l5dudkpy5] {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nts-cmd-row-go[b-9l5dudkpy5] {
    font-size: 18px;
    color: var(--theme-text-secondary, #64748b);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity 0.12s ease;
}

.nts-cmd-row--selected .nts-cmd-row-go[b-9l5dudkpy5] { opacity: 1; }

.nts-cmd-status[b-9l5dudkpy5] {
    padding: 12px 10px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
}

.nts-cmd-inline-link[b-9l5dudkpy5] {
    border: 0;
    padding: 0;
    margin-left: 4px;
    background: none;
    color: var(--theme-primary, #6366f1);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.nts-cmd-recent[b-9l5dudkpy5] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 8px 8px;
}

.nts-cmd-pill[b-9l5dudkpy5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.1));
    border-radius: 999px;
    background: transparent;
    color: var(--theme-text-primary, #0f172a);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.nts-cmd-pill:hover[b-9l5dudkpy5] {
    border-color: var(--theme-primary, #6366f1);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
}

.nts-cmd-pill-dot[b-9l5dudkpy5] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.nts-cmd-browse[b-9l5dudkpy5] {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    background: transparent;
    color: var(--theme-primary, #6366f1);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.nts-cmd-browse .material-symbols-rounded[b-9l5dudkpy5] { font-size: 16px; }

.nts-cmd-hints[b-9l5dudkpy5] {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 8px 6px 4px;
    margin-top: 4px;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

.nts-cmd-hints span[b-9l5dudkpy5] { display: inline-flex; align-items: center; gap: 4px; }
.nts-cmd-hints kbd[b-9l5dudkpy5] { min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.625rem; }

/* ─── Dark themes (the .is-dark marker - never a theme enumeration) ───── */
.is-dark .nts-cmd-field[b-9l5dudkpy5] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.is-dark .nts-cmd-field:focus-within[b-9l5dudkpy5] {
    border-color: rgba(var(--theme-primary-rgb, 129, 140, 248), 0.8);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb, 129, 140, 248), 0.22),
                0 6px 18px rgba(0, 0, 0, 0.3);
}

.is-dark .nts-cmd-input[b-9l5dudkpy5] { color: #f1f5f9; }
.is-dark .nts-cmd-input[b-9l5dudkpy5]::placeholder { color: rgba(241, 245, 249, 0.5); }
.is-dark .nts-cmd-icon[b-9l5dudkpy5],
.is-dark .nts-cmd-clear[b-9l5dudkpy5] { color: rgba(241, 245, 249, 0.6); }

.is-dark .nts-cmd kbd[b-9l5dudkpy5] {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(241, 245, 249, 0.7);
}

/* Opaque, not glass: the panel sits over the hub card and must not show it through. */
.is-dark .nts-cmd-results[b-9l5dudkpy5] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.is-dark .nts-cmd-row[b-9l5dudkpy5],
.is-dark .nts-cmd-pill[b-9l5dudkpy5] { color: #f1f5f9; }

.is-dark .nts-cmd-row--selected[b-9l5dudkpy5] { background: rgba(255, 255, 255, 0.08); }

.is-dark .nts-cmd-row-icon--company[b-9l5dudkpy5] { background: rgba(56, 189, 248, 0.16); color: #7dd3fc; }
.is-dark .nts-cmd-row-icon--contact[b-9l5dudkpy5] { background: rgba(167, 139, 250, 0.18); color: #c4b5fd; }
.is-dark .nts-cmd-row-icon--deal[b-9l5dudkpy5]    { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.is-dark .nts-cmd-row-icon--task[b-9l5dudkpy5]    { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; }

.is-dark .nts-cmd-row-detail[b-9l5dudkpy5],
.is-dark .nts-cmd-section-label[b-9l5dudkpy5],
.is-dark .nts-cmd-row-sub[b-9l5dudkpy5],
.is-dark .nts-cmd-row-quote[b-9l5dudkpy5],
.is-dark .nts-cmd-row-go[b-9l5dudkpy5],
.is-dark .nts-cmd-status[b-9l5dudkpy5],
.is-dark .nts-cmd-hints[b-9l5dudkpy5] { color: rgba(241, 245, 249, 0.6); }

.is-dark .nts-cmd-pill[b-9l5dudkpy5],
.is-dark .nts-cmd-browse[b-9l5dudkpy5],
.is-dark .nts-cmd-hints[b-9l5dudkpy5],
.is-dark .nts-cmd-divider[b-9l5dudkpy5] { border-color: rgba(255, 255, 255, 0.1); }

.is-dark .nts-cmd-divider[b-9l5dudkpy5] { background: rgba(255, 255, 255, 0.1); }

.is-dark .nts-cmd-row-name[b-9l5dudkpy5]  mark {
    background: rgba(250, 204, 21, 0.28);
}

/* ─── Header variant (HEADER-CMD-1) ───────────────────────────────────────
   The app header is a dark band in EVERY theme (white text), so the field is glass-on-dark in
   light themes too. The results panel drops onto the page and keeps the page-theme colours above;
   it sets its own text colour because the header's `color: white` would otherwise inherit into it.
   Kept after the .is-dark block on purpose - equal specificity, later wins. */
.nts-cmd--header[b-9l5dudkpy5] {
    max-width: 520px;
    margin: 0 auto;
}

.nts-cmd--header .nts-cmd-field[b-9l5dudkpy5] {
    height: 40px;
    gap: 8px;
    padding: 0 8px 0 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: none;
    backdrop-filter: none;
}

.nts-cmd--header .nts-cmd-field:hover[b-9l5dudkpy5] {
    background: rgba(255, 255, 255, 0.11);
}

.nts-cmd--header .nts-cmd-field:focus-within[b-9l5dudkpy5] {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35);
}

.nts-cmd--header .nts-cmd-icon[b-9l5dudkpy5],
.nts-cmd--header .nts-cmd-clear[b-9l5dudkpy5] { font-size: 19px; color: rgba(255, 255, 255, 0.65); }

.nts-cmd--header .nts-cmd-clear:hover[b-9l5dudkpy5] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.nts-cmd--header .nts-cmd-input[b-9l5dudkpy5] {
    color: #ffffff;
    font-size: 0.9375rem;
}

.nts-cmd--header .nts-cmd-input[b-9l5dudkpy5]::placeholder {
    color: rgba(255, 255, 255, 0.55);
    opacity: 1;
}

.nts-cmd--header .nts-cmd-field kbd[b-9l5dudkpy5] {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.nts-cmd--header .nts-cmd-results[b-9l5dudkpy5] {
    top: calc(100% + 8px);
    color: var(--theme-text-primary, #0f172a);
}

.is-dark .nts-cmd--header .nts-cmd-results[b-9l5dudkpy5] { color: #f1f5f9; }

/* ─── Phone ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .nts-cmd[b-9l5dudkpy5] { margin-bottom: 8px; }
    .nts-cmd-field[b-9l5dudkpy5] { height: 48px; padding-left: 12px; }
    .nts-cmd-kbd[b-9l5dudkpy5],
    .nts-cmd-hints[b-9l5dudkpy5] { display: none; }
    .nts-cmd-input[b-9l5dudkpy5] { font-size: 16px; }   /* < 16px makes iOS Safari zoom on focus */
}

@media (prefers-reduced-motion: reduce) {
    .nts-cmd-results[b-9l5dudkpy5] { animation: none; }
    .nts-cmd-field[b-9l5dudkpy5] { transition: none; }
}
/* /Components/Shared/IconPickerPopup.razor.rz.scp.css */
.icon-picker-overlay[b-qv8s47wd40] {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 24px;
    animation: pickerFadeIn-b-qv8s47wd40 0.15s ease-out;
}

@keyframes pickerFadeIn-b-qv8s47wd40 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.icon-picker[b-qv8s47wd40] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px transparent;
    animation: pickerSlideIn-b-qv8s47wd40 0.2s ease-out;
}

@keyframes pickerSlideIn-b-qv8s47wd40 {
    from { 
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to { 
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */
.picker-header[b-qv8s47wd40] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.picker-header h3[b-qv8s47wd40] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    white-space: nowrap;
}

.search-box[b-qv8s47wd40] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--theme-secondary, #f1f5f9);
    border-radius: 8px;
}

.search-box .material-symbols-rounded[b-qv8s47wd40] {
    font-size: 20px;
    color: var(--theme-text-muted, #94a3b8);
}

.search-box input[b-qv8s47wd40] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
    outline: none;
}

.search-box input[b-qv8s47wd40]::placeholder {
    color: var(--theme-text-muted, #94a3b8);
}

.btn-close[b-qv8s47wd40] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-close:hover[b-qv8s47wd40] {
    background: var(--theme-secondary, #f1f5f9);
    color: var(--theme-text-primary, #334155);
}

/* Content */
.picker-content[b-qv8s47wd40] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.back-btn[b-qv8s47wd40] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 16px;
    border: none;
    background: var(--theme-secondary, #f1f5f9);
    border-radius: 8px;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover[b-qv8s47wd40] {
    background: var(--theme-hover, #e2e8f0);
}

.back-btn .material-symbols-rounded[b-qv8s47wd40] {
    font-size: 18px;
}

/* Category Grid */
.category-grid[b-qv8s47wd40] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.category-card[b-qv8s47wd40] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-surface, #ffffff);
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-card:hover[b-qv8s47wd40] {
    border-color: var(--theme-accent, #6366f1);
    background: var(--theme-accent-light, rgba(99, 102, 241, 0.05));
}

.category-card .material-symbols-rounded[b-qv8s47wd40] {
    font-size: 28px;
    color: var(--theme-accent, #6366f1);
}

.category-card span:last-child[b-qv8s47wd40] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #475569);
}

/* Icon Grid */
.icon-grid[b-qv8s47wd40] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px;
}

.icon-item[b-qv8s47wd40] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface, #ffffff);
    cursor: pointer;
    transition: all 0.15s ease;
}

.icon-item:hover[b-qv8s47wd40] {
    border-color: var(--theme-accent, #6366f1);
    background: var(--theme-accent-light, rgba(99, 102, 241, 0.1));
}

.icon-item.selected[b-qv8s47wd40] {
    border-color: var(--theme-accent, #6366f1);
    background: var(--theme-accent, #6366f1);
}

.icon-item .material-symbols-rounded[b-qv8s47wd40] {
    font-size: 24px;
    color: var(--theme-text-secondary, #475569);
}

.icon-item:hover .material-symbols-rounded[b-qv8s47wd40] {
    color: var(--theme-accent, #6366f1);
}

.icon-item.selected .material-symbols-rounded[b-qv8s47wd40] {
    color: white;
}

/* Footer */
.picker-footer[b-qv8s47wd40] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.manual-entry[b-qv8s47wd40] {
    display: flex;
    gap: 8px;
    flex: 1;
}

.manual-entry input[b-qv8s47wd40] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
}

.manual-entry input:focus[b-qv8s47wd40] {
    outline: none;
    border-color: var(--theme-accent, #6366f1);
}

.btn-apply[b-qv8s47wd40] {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: var(--theme-accent, #6366f1);
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-apply:hover:not(:disabled)[b-qv8s47wd40] {
    background: var(--theme-accent-hover, #4f46e5);
}

.btn-apply:disabled[b-qv8s47wd40] {
    opacity: 0.5;
    cursor: not-allowed;
}

.picker-footer a[b-qv8s47wd40] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
    text-decoration: none;
    white-space: nowrap;
}

.picker-footer a:hover[b-qv8s47wd40] {
    color: var(--theme-accent, #6366f1);
}

/* Dark theme adjustments */
.theme-space .icon-picker[b-qv8s47wd40],
.theme-winter .icon-picker[b-qv8s47wd40],
.theme-nature .icon-picker[b-qv8s47wd40],
.theme-ocean .icon-picker[b-qv8s47wd40] {
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .picker-header[b-qv8s47wd40],
.theme-winter .picker-header[b-qv8s47wd40],
.theme-nature .picker-header[b-qv8s47wd40],
.theme-ocean .picker-header[b-qv8s47wd40] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-space .picker-header h3[b-qv8s47wd40],
.theme-winter .picker-header h3[b-qv8s47wd40],
.theme-nature .picker-header h3[b-qv8s47wd40],
.theme-ocean .picker-header h3[b-qv8s47wd40] {
    color: #f1f5f9;
}

.theme-space .search-box[b-qv8s47wd40],
.theme-winter .search-box[b-qv8s47wd40],
.theme-nature .search-box[b-qv8s47wd40],
.theme-ocean .search-box[b-qv8s47wd40] {
    background: rgba(255, 255, 255, 0.1);
}

.theme-space .search-box input[b-qv8s47wd40],
.theme-winter .search-box input[b-qv8s47wd40],
.theme-nature .search-box input[b-qv8s47wd40],
.theme-ocean .search-box input[b-qv8s47wd40] {
    color: #f1f5f9;
}

.theme-space .category-card[b-qv8s47wd40],
.theme-winter .category-card[b-qv8s47wd40],
.theme-nature .category-card[b-qv8s47wd40],
.theme-ocean .category-card[b-qv8s47wd40] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .category-card:hover[b-qv8s47wd40],
.theme-winter .category-card:hover[b-qv8s47wd40],
.theme-nature .category-card:hover[b-qv8s47wd40],
.theme-ocean .category-card:hover[b-qv8s47wd40] {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
}

.theme-space .category-card span:last-child[b-qv8s47wd40],
.theme-winter .category-card span:last-child[b-qv8s47wd40],
.theme-nature .category-card span:last-child[b-qv8s47wd40],
.theme-ocean .category-card span:last-child[b-qv8s47wd40] {
    color: #cbd5e1;
}

.theme-space .icon-item[b-qv8s47wd40],
.theme-winter .icon-item[b-qv8s47wd40],
.theme-nature .icon-item[b-qv8s47wd40],
.theme-ocean .icon-item[b-qv8s47wd40] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .icon-item:hover[b-qv8s47wd40],
.theme-winter .icon-item:hover[b-qv8s47wd40],
.theme-nature .icon-item:hover[b-qv8s47wd40],
.theme-ocean .icon-item:hover[b-qv8s47wd40] {
    background: rgba(139, 92, 246, 0.2);
    border-color: #8b5cf6;
}

.theme-space .icon-item .material-symbols-rounded[b-qv8s47wd40],
.theme-winter .icon-item .material-symbols-rounded[b-qv8s47wd40],
.theme-nature .icon-item .material-symbols-rounded[b-qv8s47wd40],
.theme-ocean .icon-item .material-symbols-rounded[b-qv8s47wd40] {
    color: #94a3b8;
}

.theme-space .icon-item:hover .material-symbols-rounded[b-qv8s47wd40],
.theme-winter .icon-item:hover .material-symbols-rounded[b-qv8s47wd40],
.theme-nature .icon-item:hover .material-symbols-rounded[b-qv8s47wd40],
.theme-ocean .icon-item:hover .material-symbols-rounded[b-qv8s47wd40] {
    color: #a78bfa;
}

.theme-space .picker-footer[b-qv8s47wd40],
.theme-winter .picker-footer[b-qv8s47wd40],
.theme-nature .picker-footer[b-qv8s47wd40],
.theme-ocean .picker-footer[b-qv8s47wd40] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.theme-space .manual-entry input[b-qv8s47wd40],
.theme-winter .manual-entry input[b-qv8s47wd40],
.theme-nature .manual-entry input[b-qv8s47wd40],
.theme-ocean .manual-entry input[b-qv8s47wd40] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

/* Responsive */
@media (max-width: 480px) {
    .category-grid[b-qv8s47wd40] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .picker-footer[b-qv8s47wd40] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/MultiSelect.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   MultiSelect — NTS Design System checkbox-list dropdown
   Mirrors SearchableSelect (.ss-*) — same trigger / backdrop /
   centered-panel pattern, but allows multiple values to be picked.
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.ms-wrapper[b-npln2oelu4] {
    position: relative;
    display: block;
    width: 100%;
}

/* ── Trigger button (matches ss-trigger / ndp-trigger / nts-input) ── */
.ms-trigger[b-npln2oelu4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    color: var(--theme-text-primary, #111827);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.ms-trigger:focus-visible[b-npln2oelu4] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
}

.ms-trigger:hover:not(:disabled)[b-npln2oelu4] {
    border-color: var(--theme-primary, #6366f1);
}

.ms-trigger-error[b-npln2oelu4] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.ms-trigger:disabled[b-npln2oelu4] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ms-value-text[b-npln2oelu4] {
    color: var(--theme-text-primary, #111827);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ms-chevron[b-npln2oelu4] {
    width: 18px;
    height: 18px;
    color: var(--theme-text-muted, #9ca3af);
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.ms-chevron-open[b-npln2oelu4] {
    transform: rotate(180deg);
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.ms-backdrop[b-npln2oelu4] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Panel (centered overlay, like SearchableSelect) ──────────── */
.ms-panel[b-npln2oelu4] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: min(360px, calc(100vw - 32px));
    max-height: min(480px, 75dvh);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: msSlideIn-b-npln2oelu4 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes msSlideIn-b-npln2oelu4 {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Mobile: bottom-sheet (matches SearchableSelect) */
@media (max-width: 640px) {
    .ms-panel[b-npln2oelu4] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-height: 70dvh;
        border-radius: 16px 16px 0 0;
        animation: msSlideUp-b-npln2oelu4 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) both;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @keyframes msSlideUp-b-npln2oelu4 {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ── Header ───────────────────────────────────────────────────── */
.ms-header[b-npln2oelu4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
    flex-shrink: 0;
}

.ms-header-title[b-npln2oelu4] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-text-primary, #111827);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ms-header-count[b-npln2oelu4] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    font-weight: 500;
}

/* ── Presets row ──────────────────────────────────────────────── */
.ms-presets[b-npln2oelu4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 12px 10px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.ms-preset[b-npln2oelu4] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.ms-preset:hover[b-npln2oelu4] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.08);
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ms-preset-active[b-npln2oelu4] {
    background: var(--theme-primary, #6366f1);
    border-color: var(--theme-primary, #6366f1);
    color: #ffffff;
}

.ms-preset-active:hover[b-npln2oelu4] {
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
}

/* ── Options list ─────────────────────────────────────────────── */
.ms-options[b-npln2oelu4] {
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Tight outer padding — the per-row padding below carries the visual rhythm.
       Larger padding here just stretches the panel for no functional gain. */
    padding: 4px;
    flex: 1;
    min-height: 0;
}

/* Row sizing target: ~30px tall on desktop. A typical 7-item status filter then fits
   in ~210px, leaving the panel short enough that header + presets + footer + list
   all fit within ~360px without scrolling on common laptop screens. Padding is
   intentionally smaller than the trigger button (which is a primary tap target)
   because rows stack vertically and adjacent-row pressure is the bigger problem
   than per-row tap accuracy. */
.ms-option[b-npln2oelu4] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 10px;
    color: #374151;
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.35;
    user-select: none;
}

.ms-option:hover[b-npln2oelu4] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.08);
}

.ms-option-selected[b-npln2oelu4] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

.ms-option-selected:hover[b-npln2oelu4] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
}

.ms-option-checkbox[b-npln2oelu4] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--theme-primary, #6366f1);
    flex-shrink: 0;
}

.ms-option-label[b-npln2oelu4] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-no-options[b-npln2oelu4] {
    padding: 16px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8125rem;
    font-style: italic;
}

/* ── Footer ───────────────────────────────────────────────────── */
.ms-footer[b-npln2oelu4] {
    display: flex;
    justify-content: flex-end;
    padding: 10px 12px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.ms-footer-btn[b-npln2oelu4] {
    padding: 6px 14px;
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: filter 0.12s;
}

.ms-footer-btn:hover[b-npln2oelu4] {
    filter: brightness(1.08);
}

/* ── Dark themes ──────────────────────────────────────────────── */
.is-dark[b-npln2oelu4]  .ms-panel,
.is-dark .ms-panel[b-npln2oelu4] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: #f1f5f9;
}

.is-dark .ms-header-title[b-npln2oelu4] {
    color: #f1f5f9;
}

.is-dark .ms-header-count[b-npln2oelu4] {
    color: rgba(241, 245, 249, 0.7);
}

.is-dark .ms-presets[b-npln2oelu4] {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.is-dark .ms-preset[b-npln2oelu4] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(241, 245, 249, 0.85);
}

.is-dark .ms-preset:hover[b-npln2oelu4] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.2);
    border-color: var(--theme-primary, #6366f1);
    color: #ffffff;
}

/* Active preset in dark themes — needs a selector that matches the same
   specificity as the dark `.ms-preset` rule above (0,2,0). The base
   `.ms-preset-active` selector is only 0,1,0 and gets steamrolled by the
   theme rule, leaving the Active pill visually identical to All / None.
   Listing :hover with the same combined selector keeps the pill primary-
   colored even while the user is mousing over it. */
.is-dark .ms-preset-active[b-npln2oelu4],
.is-dark .ms-preset-active:hover[b-npln2oelu4] {
    background: var(--theme-primary, #6366f1);
    border-color: var(--theme-primary, #6366f1);
    color: #ffffff;
}

.is-dark .ms-option[b-npln2oelu4] {
    color: rgba(241, 245, 249, 0.9);
}

.is-dark .ms-option:hover[b-npln2oelu4] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .ms-option-selected[b-npln2oelu4] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.18);
    color: #ffffff;
}

.is-dark .ms-no-options[b-npln2oelu4] {
    color: rgba(241, 245, 249, 0.5);
}

.is-dark .ms-footer[b-npln2oelu4] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.is-dark .ms-trigger[b-npln2oelu4] {
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.is-dark .ms-value-text[b-npln2oelu4] {
    color: #f1f5f9;
}
/* /Components/Shared/NativeDatePicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   NativeDatePicker — NTS Design System calendar picker
   Follows the same pattern as NativeTimePicker.razor.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.ndp-wrapper[b-mkggkjskxw] {
    position: relative;
    display: block;
    width: 100%;
}

/* ── Trigger button (matches nts-input appearance) ─────────────── */
.ndp-trigger[b-mkggkjskxw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    color: var(--theme-text-primary, #111827);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ndp-trigger:focus-visible[b-mkggkjskxw] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
}

.ndp-trigger:hover[b-mkggkjskxw] {
    border-color: var(--theme-primary, #6366f1);
}

.ndp-trigger-error[b-mkggkjskxw] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.ndp-trigger:disabled[b-mkggkjskxw] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ndp-placeholder-text[b-mkggkjskxw] {
    color: var(--theme-text-muted, #9ca3af);
}

.ndp-value-text[b-mkggkjskxw] {
    color: var(--theme-text-primary, #111827);
    font-weight: 500;
}

.ndp-cal-icon[b-mkggkjskxw] {
    width: 18px;
    height: 18px;
    color: var(--theme-text-muted, #9ca3af);
    flex-shrink: 0;
    margin-left: 8px;
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.ndp-backdrop[b-mkggkjskxw] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Panel ────────────────────────────────────────────────────── */
.ndp-panel[b-mkggkjskxw] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: min(340px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: ndpSlideIn-b-mkggkjskxw 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes ndpSlideIn-b-mkggkjskxw {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Mobile: bottom-sheet */
@media (max-width: 640px) {
    .ndp-panel[b-mkggkjskxw] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 90dvh;
        animation: ndpSlideUp-b-mkggkjskxw 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) both;
    }

    @keyframes ndpSlideUp-b-mkggkjskxw {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ── Panel header ─────────────────────────────────────────────── */
.ndp-panel-header[b-mkggkjskxw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 12px 8px;
    gap: 4px;
}

.ndp-nav-btn[b-mkggkjskxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--theme-text-primary, #374151);
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.ndp-nav-btn:hover[b-mkggkjskxw] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ndp-title-btn[b-mkggkjskxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-text-primary, #111827);
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.ndp-title-btn:hover[b-mkggkjskxw] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.06);
}

.ndp-title-chevron[b-mkggkjskxw] {
    color: var(--theme-text-muted, #9ca3af);
    transition: transform 0.15s;
}

.ndp-title-chevron-up[b-mkggkjskxw] {
    transform: rotate(180deg);
}

/* ── Day-of-week row ──────────────────────────────────────────── */
.ndp-dow-row[b-mkggkjskxw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 10px 4px;
}

.ndp-dow[b-mkggkjskxw] {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 0;
}

/* ── Day grid ─────────────────────────────────────────────────── */
.ndp-grid[b-mkggkjskxw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    padding: 0 10px 8px;
}

.ndp-day[b-mkggkjskxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 36px;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #111827);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.ndp-day:hover:not(.ndp-day-selected)[b-mkggkjskxw] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.10);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ndp-day-other-month[b-mkggkjskxw] {
    opacity: 0.3;
}

.ndp-day:disabled[b-mkggkjskxw],
.ndp-day-disabled[b-mkggkjskxw] {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.ndp-day-today[b-mkggkjskxw] {
    border: 2px solid var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

.ndp-day-selected[b-mkggkjskxw] {
    background: var(--theme-primary, #6366f1) !important;
    color: #ffffff !important;
    font-weight: 600;
    border: none !important;
}

/* ── Year picker grid ─────────────────────────────────────────── */
.ndp-year-grid[b-mkggkjskxw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 12px 8px;
}

.ndp-year-btn[b-mkggkjskxw] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 10px;
    font-size: 0.9375rem;
    color: var(--theme-text-primary, #111827);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.ndp-year-btn:hover:not(.ndp-year-selected)[b-mkggkjskxw] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: rgba(var(--theme-primary-rgb, 99 102 241), 0.2);
}

.ndp-year-selected[b-mkggkjskxw] {
    background: var(--theme-primary, #6366f1) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    font-weight: 600;
}

/* ── Footer ───────────────────────────────────────────────────── */
.ndp-panel-footer[b-mkggkjskxw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom, 12px));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Dark theme overrides
   ═══════════════════════════════════════════════════════════════ */

.is-dark .ndp-trigger[b-mkggkjskxw] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .ndp-trigger:hover[b-mkggkjskxw] {
    border-color: var(--theme-primary, #818cf8);
}

.is-dark .ndp-placeholder-text[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ndp-value-text[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .ndp-cal-icon[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ndp-panel[b-mkggkjskxw] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.is-dark .ndp-nav-btn[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .ndp-nav-btn:hover[b-mkggkjskxw] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .ndp-title-btn[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .ndp-title-btn:hover[b-mkggkjskxw] {
    background: rgba(255, 255, 255, 0.07);
}

.is-dark .ndp-title-chevron[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ndp-dow[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ndp-day[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .ndp-day:hover:not(.ndp-day-selected)[b-mkggkjskxw] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .ndp-day-other-month[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.22);
}

.is-dark .ndp-year-btn[b-mkggkjskxw] {
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .ndp-year-btn:hover:not(.ndp-year-selected)[b-mkggkjskxw] {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .ndp-panel-footer[b-mkggkjskxw] {
    border-top-color: rgba(255, 255, 255, 0.08);
}
/* /Components/Shared/NativeDateRangePicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   NativeDateRangePicker — NTS Design System range picker
   Parallels NativeDatePicker.razor.css with `ndrp-` prefix and
   range-aware day cell styling (range-start, range-end, in-range).
   ═══════════════════════════════════════════════════════════════ */

.ndrp-wrapper[b-310urgyu04] {
    position: relative;
    display: block;
    width: 100%;
}

/* ── Trigger button (matches nts-input appearance) ─────────────── */
.ndrp-trigger[b-310urgyu04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    color: var(--theme-text-primary, #111827);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ndrp-trigger:focus-visible[b-310urgyu04] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
}

.ndrp-trigger:hover[b-310urgyu04] {
    border-color: var(--theme-primary, #6366f1);
}

.ndrp-trigger-error[b-310urgyu04] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.ndrp-trigger:disabled[b-310urgyu04] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ndrp-placeholder-text[b-310urgyu04] {
    color: var(--theme-text-muted, #9ca3af);
}

.ndrp-value-text[b-310urgyu04] {
    color: var(--theme-text-primary, #111827);
    font-weight: 500;
}

/* The "→" separator + italic "End?" hint shown when only Start is set on the
 * trigger label. Slight opacity + spacing keeps it from competing with the
 * actual selected date. */
.ndrp-arrow-sep[b-310urgyu04] {
    margin: 0 4px;
    opacity: 0.55;
}

.ndrp-cal-icon[b-310urgyu04] {
    width: 18px;
    height: 18px;
    color: var(--theme-text-muted, #9ca3af);
    flex-shrink: 0;
    margin-left: 8px;
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.ndrp-backdrop[b-310urgyu04] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Panel ────────────────────────────────────────────────────── */
.ndrp-panel[b-310urgyu04] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: min(360px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: ndrpSlideIn-b-310urgyu04 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@keyframes ndrpSlideIn-b-310urgyu04 {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 640px) {
    .ndrp-panel[b-310urgyu04] {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 90dvh;
        animation: ndrpSlideUp-b-310urgyu04 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) both;
    }

    @keyframes ndrpSlideUp-b-310urgyu04 {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* Step hint at the top of the panel — tells the user whether they're picking
 * the start or end date right now. Subtle so it doesn't dominate, but helpful
 * for users who don't intuit "click two dates" from the empty calendar. */
.ndrp-step-hint[b-310urgyu04] {
    padding: 10px 16px 4px;
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #6b7280);
    text-align: center;
}

.ndrp-step-hint strong[b-310urgyu04] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

/* ── Panel header ─────────────────────────────────────────────── */
.ndrp-panel-header[b-310urgyu04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px 8px;
    gap: 4px;
}

.ndrp-nav-btn[b-310urgyu04] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--theme-text-primary, #374151);
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.ndrp-nav-btn:hover[b-310urgyu04] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ndrp-title-btn[b-310urgyu04] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-text-primary, #111827);
    cursor: pointer;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
}

.ndrp-title-btn:hover[b-310urgyu04] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.06);
}

.ndrp-title-chevron[b-310urgyu04] {
    color: var(--theme-text-muted, #9ca3af);
    transition: transform 0.15s;
}

.ndrp-title-chevron-up[b-310urgyu04] {
    transform: rotate(180deg);
}

/* ── Day-of-week row ──────────────────────────────────────────── */
.ndrp-dow-row[b-310urgyu04] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 10px 4px;
}

.ndrp-dow[b-310urgyu04] {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 4px 0;
}

/* ── Day grid ─────────────────────────────────────────────────── */
/* Note: gap is 0 (not 2px like single picker) so the in-range band reads
 * as a continuous bar of color across days rather than dotted segments. */
.ndrp-grid[b-310urgyu04] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    padding: 0 10px 8px;
}

.ndrp-day[b-310urgyu04] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 36px;
    border: none;
    background: transparent;
    color: var(--theme-text-primary, #111827);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: 0.875rem;
    /* Default: round buttons. Range-styled days override with rounding rules. */
    border-radius: 50%;
    /* Tiny inset so non-range buttons aren't edge-to-edge with each other in a
     * gap=0 grid. Range states use position: relative pseudo-elements that
     * span full cell width, so they ignore this margin. */
    margin: 1px 0;
}

.ndrp-day:hover:not(.ndrp-day-range-start):not(.ndrp-day-range-end):not(.ndrp-day-range-single)[b-310urgyu04] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.10);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ndrp-day-other-month[b-310urgyu04] {
    opacity: 0.3;
}

.ndrp-day:disabled[b-310urgyu04],
.ndrp-day-disabled[b-310urgyu04] {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
}

.ndrp-day-today[b-310urgyu04] {
    border: 2px solid var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

/* ── Range visualization ─────────────────────────────────────── */
/* The in-range band uses a translucent primary background that fills the cell
 * edge-to-edge (no border-radius). Adjacent cells in the same range butt up
 * against each other to read as a continuous bar. */
.ndrp-day-in-range[b-310urgyu04] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
    border-radius: 0;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    margin: 1px 0;
}

/* Range start: solid primary pill, rounded on the left, flat on the right so
 * it visually connects to the in-range band that follows. */
.ndrp-day-range-start[b-310urgyu04] {
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
    font-weight: 600;
    border-radius: 50% 0 0 50%;
    margin: 1px 0;
}

/* Range end: mirror of start — flat on the left, rounded on the right. */
.ndrp-day-range-end[b-310urgyu04] {
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
    font-weight: 600;
    border-radius: 0 50% 50% 0;
    margin: 1px 0;
}

/* Single-day range (start == end). Shouldn't happen via normal user flow
 * (we only commit when end > start) but defensive: full pill. */
.ndrp-day-range-single[b-310urgyu04] {
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
    font-weight: 600;
    border-radius: 50%;
    margin: 1px 0;
}

/* ── Year picker grid ─────────────────────────────────────────── */
.ndrp-year-grid[b-310urgyu04] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px 12px 8px;
}

.ndrp-year-btn[b-310urgyu04] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 10px;
    font-size: 0.9375rem;
    color: var(--theme-text-primary, #111827);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.ndrp-year-btn:hover:not(.ndrp-year-selected)[b-310urgyu04] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: rgba(var(--theme-primary-rgb, 99 102 241), 0.2);
}

.ndrp-year-selected[b-310urgyu04] {
    background: var(--theme-primary, #6366f1) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    font-weight: 600;
}

/* ── Footer ───────────────────────────────────────────────────── */
.ndrp-panel-footer[b-310urgyu04] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px max(12px, env(safe-area-inset-bottom, 12px));
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   Dark theme overrides
   ═══════════════════════════════════════════════════════════════ */

.is-dark .ndrp-trigger[b-310urgyu04] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .ndrp-trigger:hover[b-310urgyu04] {
    border-color: var(--theme-primary, #818cf8);
}

.is-dark .ndrp-placeholder-text[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ndrp-value-text[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .ndrp-cal-icon[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ndrp-panel[b-310urgyu04] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.is-dark .ndrp-step-hint[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .ndrp-step-hint strong[b-310urgyu04] {
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
}

.is-dark .ndrp-nav-btn[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .ndrp-nav-btn:hover[b-310urgyu04] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .ndrp-title-btn[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .ndrp-title-btn:hover[b-310urgyu04] {
    background: rgba(255, 255, 255, 0.07);
}

.is-dark .ndrp-title-chevron[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ndrp-dow[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ndrp-day[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .ndrp-day:hover:not(.ndrp-day-range-start):not(.ndrp-day-range-end):not(.ndrp-day-range-single)[b-310urgyu04] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .ndrp-day-other-month[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.22);
}

.is-dark .ndrp-day-in-range[b-310urgyu04] {
    background: rgba(var(--theme-primary-rgb, 129 140 248), 0.22);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .ndrp-year-btn[b-310urgyu04] {
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .ndrp-year-btn:hover:not(.ndrp-year-selected)[b-310urgyu04] {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .ndrp-panel-footer[b-310urgyu04] {
    border-top-color: rgba(255, 255, 255, 0.08);
}
/* /Components/Shared/NativeTimePicker.razor.rz.scp.css */
/* ============================================================
   NativeTimePicker — drum-roll time selector
   Gold-standard mobile component: 44pt targets, dvh, safe-area,
   overscroll containment, -webkit-tap-highlight-color, all 8 themes
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.ntp-wrapper[b-8cw53uas28] {
    position: relative;
    width: 100%;
}

/* ── Trigger container (styled like nts-input) ─ */
.ntp-trigger[b-8cw53uas28] {
    width: 100%;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    background: var(--theme-input-bg, #fff);
    color: var(--theme-input-text, #1e293b);
    display: flex;
    align-items: center;
    gap: 2px;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    min-height: 38px;
    box-sizing: border-box;
}

.ntp-trigger-focused[b-8cw53uas28] {
    border-color: var(--theme-input-focus, #3b82f6);
    box-shadow: 0 0 0 3px var(--theme-shadow-color, rgba(59, 130, 246, 0.15));
}

.ntp-trigger-error[b-8cw53uas28] {
    border-color: var(--theme-text-danger, #ef4444) !important;
}

/* ── Inline editable inputs ──────────────────────────────── */
/* !important needed to override global modal input rules in themes.css */
.ntp-inline-input[b-8cw53uas28] {
    width: 26px !important;
    border: none !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: var(--theme-input-text, #1e293b) !important;
    text-align: center !important;
    padding: 2px 1px !important;
    outline: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box !important;
    min-height: auto !important;
}

.ntp-inline-input[b-8cw53uas28]::placeholder {
    color: var(--theme-text-muted, #94a3b8) !important;
    font-weight: 400 !important;
}

.ntp-inline-input:focus[b-8cw53uas28] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08) !important;
    border: none !important;
    box-shadow: none !important;
}

.ntp-inline-input:disabled[b-8cw53uas28] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ntp-inline-separator[b-8cw53uas28] {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 500;
    font-size: 0.875rem;
    user-select: none;
    line-height: 1;
    flex-shrink: 0;
}

.ntp-inline-period[b-8cw53uas28] {
    border: none !important;
    background: transparent !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: var(--theme-text-secondary, #64748b) !important;
    cursor: pointer;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    min-width: 32px;
    width: auto !important;
    text-align: center;
    transition: background 0.1s, color 0.1s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
}

.ntp-inline-period:hover:not(:disabled)[b-8cw53uas28] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1) !important;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1)) !important;
}

.ntp-inline-period:disabled[b-8cw53uas28] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ntp-clock-btn[b-8cw53uas28] {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    padding: 6px !important;
    margin-left: auto;
    border-radius: 6px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    width: auto !important;
    box-shadow: none !important;
}

.ntp-clock-btn:hover:not(:disabled)[b-8cw53uas28] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1) !important;
}

.ntp-clock-btn:disabled[b-8cw53uas28] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ntp-clock[b-8cw53uas28] {
    width: 18px;
    height: 18px;
    color: var(--theme-text-muted, #94a3b8);
    flex-shrink: 0;
}

/* ── Backdrop ────────────────────────────────────────────── */
.ntp-backdrop[b-8cw53uas28] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: ntpFadeIn-b-8cw53uas28 0.15s ease-out;
}

/* ── Picker panel ─────────────────────────────────────────── */
.ntp-panel[b-8cw53uas28] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: min(340px, calc(100vw - 32px));
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: ntpSlideIn-b-8cw53uas28 0.18s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* Mobile only: bottom sheet */
@media (max-width: 640px) {
    .ntp-panel[b-8cw53uas28] {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        transform: none;
        width: 100%;
        border-radius: 20px 20px 0 0;
        animation: ntpSlideUp-b-8cw53uas28 0.22s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ── Panel header ─────────────────────────────────────────── */
.ntp-panel-header[b-8cw53uas28] {
    padding: 14px 20px 8px;
    border-bottom: none;
}

.ntp-panel-title[b-8cw53uas28] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

/* ── Columns container ────────────────────────────────────── */
.ntp-columns-container[b-8cw53uas28] {
    display: flex;
    align-items: stretch;
    padding: 4px 16px 8px;
    gap: 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 6px;
}

/* ── Typeable input row (inside picker panel) ───────────── */
.ntp-input-row[b-8cw53uas28] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px 6px;
}

/* !important needed to override global modal input rules in themes.css */
.ntp-input[b-8cw53uas28] {
    width: 72px !important;
    height: 44px !important;
    text-align: center !important;
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    border: 2px solid var(--theme-primary, #6366f1) !important;
    border-radius: 10px !important;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06) !important;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1)) !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box !important;
    padding: 0 !important;
    min-height: auto !important;
}

.ntp-input:focus[b-8cw53uas28] {
    border-color: var(--theme-primary, #6366f1) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.18) !important;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1) !important;
}

.ntp-input-colon[b-8cw53uas28] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    user-select: none;
    line-height: 1;
}

.ntp-period-toggle[b-8cw53uas28] {
    width: 52px !important;
    height: 44px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    letter-spacing: 0.04em;
    border: 2px solid var(--theme-primary, #6366f1) !important;
    border-radius: 10px !important;
    background: var(--theme-primary, #6366f1) !important;
    color: #ffffff !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    min-height: auto !important;
}

.ntp-period-toggle:hover[b-8cw53uas28] {
    background: var(--theme-primary-hover, #4f46e5) !important;
    border-color: var(--theme-primary-hover, #4f46e5) !important;
}

/* ── Scrollable column ────────────────────────────────────── */
.ntp-column[b-8cw53uas28] {
    flex: 1;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px;
}

.ntp-column[b-8cw53uas28]::-webkit-scrollbar {
    display: none;
}

.ntp-period-column[b-8cw53uas28] {
    flex: 0 0 72px;
}

/* ── Items ───────────────────────────────────────────────── */
.ntp-item[b-8cw53uas28] {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 400;
    border-radius: 10px;
    transition: background 0.1s;
    scroll-snap-align: center;
    -webkit-tap-highlight-color: transparent;
    color: #64748b;
    user-select: none;
    /* button reset */
    border: none;
    background: transparent;
    padding: 0;
    width: 100%;
    font-family: inherit;
}

.ntp-item:hover:not(.ntp-item-selected)[b-8cw53uas28] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.ntp-item-selected[b-8cw53uas28] {
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
    font-weight: 600;
}

/* ── Colon separator ─────────────────────────────────────── */
.ntp-colon[b-8cw53uas28] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    align-self: center;
    padding: 0 2px;
    flex-shrink: 0;
    user-select: none;
}

/* ── Panel footer ─────────────────────────────────────────── */
.ntp-panel-footer[b-8cw53uas28] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px 6px;
    border-top: 1px solid #e2e8f0;
}

/* ── Settings hint ────────────────────────────────────────── */
.ntp-panel-hint[b-8cw53uas28] {
    text-align: center;
    padding: 0 16px 10px;
}

.ntp-settings-link[b-8cw53uas28] {
    background: none;
    border: none;
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s;
}

.ntp-settings-link:hover[b-8cw53uas28] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes ntpSlideIn-b-8cw53uas28 {
    from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (max-width: 640px) {
    @keyframes ntpSlideUp-b-8cw53uas28 {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

@keyframes ntpFadeIn-b-8cw53uas28 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Dark theme overrides ─────────────────────────────────── */

.is-dark .ntp-trigger[b-8cw53uas28] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .ntp-inline-input[b-8cw53uas28] {
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    border: none !important;
}

.is-dark .ntp-inline-input[b-8cw53uas28]::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

.is-dark .ntp-inline-input:focus[b-8cw53uas28] {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

.is-dark .ntp-inline-separator[b-8cw53uas28] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ntp-inline-period[b-8cw53uas28] {
    color: rgba(255, 255, 255, 0.55) !important;
    background: transparent !important;
    border: none !important;
}

.is-dark .ntp-inline-period:hover:not(:disabled)[b-8cw53uas28] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.is-dark .ntp-clock-btn:hover:not(:disabled)[b-8cw53uas28] {
    background: rgba(255, 255, 255, 0.1) !important;
}

.is-dark .ntp-clock[b-8cw53uas28] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ntp-backdrop[b-8cw53uas28] {
    background: rgba(0, 0, 0, 0.6);
}

.is-dark .ntp-panel[b-8cw53uas28] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.is-dark .ntp-panel-title[b-8cw53uas28] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ntp-item[b-8cw53uas28] {
    color: rgba(255, 255, 255, 0.55);
}

.is-dark .ntp-colon[b-8cw53uas28] {
    color: rgba(255, 255, 255, 0.3);
}

.is-dark .ntp-panel-footer[b-8cw53uas28] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.is-dark .ntp-input[b-8cw53uas28] {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: var(--theme-primary, #818cf8) !important;
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8)) !important;
}

.is-dark .ntp-input:focus[b-8cw53uas28] {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25) !important;
}

.is-dark .ntp-input-colon[b-8cw53uas28] {
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
}

.is-dark .ntp-period-toggle[b-8cw53uas28] {
    background: var(--theme-primary, #818cf8) !important;
    border-color: var(--theme-primary, #818cf8) !important;
    color: #ffffff !important;
}

.is-dark .ntp-columns-container[b-8cw53uas28] {
    border-top-color: rgba(255, 255, 255, 0.08);
}
/* /Components/Shared/PricingCards.razor.rz.scp.css */
/* ============================================
   PRICING CARDS - Shared component styles
   Used by Index.razor and Pricing.razor
   ============================================ */
.pricing-grid[b-64o7srrexy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
}

.pricing-card[b-64o7srrexy] {
    position: relative;
    background: var(--theme-surface, #ffffff);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 36px 28px 32px;
    border: 1px solid var(--theme-border, #e2e8f0);
    transition: all 0.3s ease;
    text-align: center;
}

.pricing-card:hover[b-64o7srrexy] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--theme-shadow-color, rgba(0, 0, 0, 0.1));
}

.pricing-card.popular[b-64o7srrexy] {
    border: 2px solid var(--theme-primary, #7c3aed);
    padding-top: 44px;
}

.popular-badge[b-64o7srrexy] {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-cta-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 5px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.pricing-card h3[b-64o7srrexy] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 16px;
}

.pricing-amount[b-64o7srrexy] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 4px;
}

.pricing-currency[b-64o7srrexy] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    align-self: flex-start;
    margin-top: 6px;
}

.pricing-value[b-64o7srrexy] {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: var(--theme-text-primary, #1e293b);
    letter-spacing: -0.03em;
}

.pricing-interval[b-64o7srrexy] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.pricing-period[b-64o7srrexy] {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 0 0 24px;
}

.pricing-features[b-64o7srrexy] {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    text-align: left;
}

.pricing-features li[b-64o7srrexy] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border, #e2e8f0) 40%, transparent);
}

.pricing-features li:last-child[b-64o7srrexy] {
    border-bottom: none;
}

.pricing-features li[b-64o7srrexy]::before {
    content: '✓';
    color: #059669;
    font-weight: 700;
    margin-right: 10px;
}

.pricing-tagline[b-64o7srrexy] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 16px;
    font-weight: 500;
}

.pricing-note[b-64o7srrexy] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 12px 0 0;
}

.pricing-btn[b-64o7srrexy] {
    display: inline-block;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    background: transparent;
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #e2e8f0);
}

.pricing-btn:hover[b-64o7srrexy] {
    background: rgba(var(--theme-primary-rgb, 0, 0, 0), 0.08);
    transform: translateY(-1px);
}

.pricing-btn.primary[b-64o7srrexy] {
    background: var(--theme-cta-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    color: white;
    border: none;
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb), 0.3);
}

.pricing-btn.primary:hover[b-64o7srrexy] {
    box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb), 0.4);
    color: white;
}

/* Dark theme */
:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-card[b-64o7srrexy] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-card.popular[b-64o7srrexy] {
    border-color: var(--theme-primary, #7c3aed);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-card h3[b-64o7srrexy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-value[b-64o7srrexy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-features li[b-64o7srrexy] {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-btn[b-64o7srrexy] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.15);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-btn:hover[b-64o7srrexy] {
    background: rgba(255, 255, 255, 0.08);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-tagline[b-64o7srrexy] {
    color: rgba(255, 255, 255, 0.6);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-note[b-64o7srrexy] {
    color: rgba(255, 255, 255, 0.5);
}

/* Executive theme */
:global(.theme-executive) .pricing-card[b-64o7srrexy] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

:global(.theme-executive) .pricing-card:hover[b-64o7srrexy] {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1);
    border-color: rgba(51, 65, 85, 0.15);
}

:global(.theme-executive) .pricing-card.popular[b-64o7srrexy] {
    border-color: #334155;
}

:global(.theme-executive) .popular-badge[b-64o7srrexy] {
    background: #334155;
}

:global(.theme-executive) .pricing-card h3[b-64o7srrexy] {
    color: #1e293b;
}

:global(.theme-executive) .pricing-value[b-64o7srrexy] {
    color: #1e293b;
}

:global(.theme-executive) .pricing-features li[b-64o7srrexy] {
    color: #475569;
    border-color: rgba(51, 65, 85, 0.08);
}

:global(.theme-executive) .pricing-btn[b-64o7srrexy] {
    color: #1e293b;
    border-color: rgba(51, 65, 85, 0.15);
}

:global(.theme-executive) .pricing-btn:hover[b-64o7srrexy] {
    background: rgba(51, 65, 85, 0.04);
}

:global(.theme-executive) .pricing-btn.primary[b-64o7srrexy] {
    background: #059669;
    color: white;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
}

:global(.theme-executive) .pricing-btn.primary:hover[b-64o7srrexy] {
    background: #047857;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.4);
    color: white;
}

:global(.theme-executive) .pricing-tagline[b-64o7srrexy] {
    color: #475569;
}

:global(.theme-executive) .pricing-note[b-64o7srrexy] {
    color: #94a3b8;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pricing-grid[b-64o7srrexy] {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 380px;
        margin: 0 auto;
    }

    .pricing-card[b-64o7srrexy] {
        padding: 28px 24px 24px;
    }
}
/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   SearchableSelect — NTS Design System custom dropdown
   Follows NativeDatePicker / NativeTimePicker pattern
   ═══════════════════════════════════════════════════════════════ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.ss-wrapper[b-4f47kscemv] {
    position: relative;
    display: block;
    width: 100%;
}

/* ── Trigger button (matches ndp-trigger / nts-input) ──────── */
.ss-trigger[b-4f47kscemv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    color: var(--theme-text-primary, #111827);
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.ss-trigger:focus-visible[b-4f47kscemv] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
}

.ss-trigger:hover:not(:disabled)[b-4f47kscemv] {
    border-color: var(--theme-primary, #6366f1);
}

.ss-trigger-error[b-4f47kscemv] {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.ss-trigger:disabled[b-4f47kscemv] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ss-placeholder-text[b-4f47kscemv] {
    color: var(--theme-text-muted, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ss-value-text[b-4f47kscemv] {
    color: var(--theme-text-primary, #111827);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ss-chevron[b-4f47kscemv] {
    width: 18px;
    height: 18px;
    color: var(--theme-text-muted, #9ca3af);
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.ss-chevron-open[b-4f47kscemv] {
    transform: rotate(180deg);
}

/* ── Backdrop ─────────────────────────────────────────────────── */
/* Transparent click-catcher for the anchored dropdown (no modal dim).
   The mobile bottom-sheet re-adds a dim below. */
.ss-backdrop[b-4f47kscemv] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: transparent;
}

/* ── Panel (anchored dropdown — SS-ANCHOR 2026-06-07) ──────────────
   position:absolute, child of the position:relative .ss-wrapper, so it's
   physically pinned directly under the trigger and follows it on scroll — no
   coordinate math, no containing-block surprises. JS only toggles .ss-panel-up
   to flip it above when there isn't room below. */
.ss-panel[b-4f47kscemv] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 10000;
    width: 100%;
    /* SS-PANEL-BORDERBOX (2026-06-30, OBJ-DLG-WIDTH-1): without border-box the
       1px border sits OUTSIDE width:100%, so the open panel is 2px wider than its
       trigger. Inside a dialog whose .dialog-content is overflow-y:auto (which the
       spec promotes overflow-x to auto), that 2px tripped a horizontal scrollbar
       the moment any dropdown opened — most visible on the tall Objective dialog
       (4 selects). border-box makes the panel flush with the trigger. */
    box-sizing: border-box;
    max-height: min(360px, 70dvh);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: ssFadeIn-b-4f47kscemv 0.12s ease-out both;
}

/* Flip above the trigger when JS decides there's no room below. */
.ss-panel.ss-panel-up[b-4f47kscemv] {
    top: auto;
    bottom: calc(100% + 6px);
}

@keyframes ssFadeIn-b-4f47kscemv {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Mobile: bottom-sheet (overrides the absolute desktop dropdown). */
@media (max-width: 640px) {
    .ss-panel[b-4f47kscemv],
    .ss-panel.ss-panel-up[b-4f47kscemv] {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        width: 100%;
        max-height: 65dvh;
        border-radius: 16px 16px 0 0;
        animation: ssSlideUp-b-4f47kscemv 0.22s cubic-bezier(0.34, 1.1, 0.64, 1) both;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Re-add a dim behind the bottom-sheet (modal feel on touch). */
    .ss-backdrop[b-4f47kscemv] {
        background: rgba(0, 0, 0, 0.25);
    }

    @keyframes ssSlideUp-b-4f47kscemv {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ── Search ───────────────────────────────────────────────────── */
.ss-search-wrap[b-4f47kscemv] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px 0;
    position: relative;
    flex-shrink: 0;
}

.ss-search-icon[b-4f47kscemv] {
    position: absolute;
    left: 22px;
    width: 16px;
    height: 16px;
    color: var(--theme-text-muted, #9ca3af);
    pointer-events: none;
}

.ss-search-input[b-4f47kscemv] {
    width: 100%;
    padding: 8px 32px 8px 34px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-family: inherit;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 0;
    box-sizing: border-box;
}

.ss-search-input:focus[b-4f47kscemv] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99 102 241), 0.1);
    background: white;
}

.ss-search-input[b-4f47kscemv]::placeholder {
    color: #9ca3af;
}

.ss-search-clear[b-4f47kscemv] {
    position: absolute;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}

.ss-search-clear:hover[b-4f47kscemv] {
    color: #64748b;
    background: rgba(0, 0, 0, 0.06);
}

.ss-search-clear svg[b-4f47kscemv] {
    width: 14px;
    height: 14px;
}

/* ── Options list ─────────────────────────────────────────────── */
.ss-options[b-4f47kscemv] {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    flex: 1;
    min-height: 0;
}

.ss-option[b-4f47kscemv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.875rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.12s;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.4;
}

.ss-option:hover[b-4f47kscemv] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.08);
}

.ss-option-selected[b-4f47kscemv] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

.ss-option-selected:hover[b-4f47kscemv] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
}

.ss-option-placeholder[b-4f47kscemv] {
    color: #9ca3af;
    font-style: italic;
}

.ss-check[b-4f47kscemv] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ss-option-label[b-4f47kscemv] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Create custom option ── */
.ss-option-create[b-4f47kscemv] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
    font-weight: 500;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.ss-create-icon[b-4f47kscemv] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 6px;
}

/* ── Group headers ────────────────────────────────────────────── */
.ss-group-header[b-4f47kscemv] {
    padding: 8px 12px 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #6b7280);
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    user-select: none;
}

.ss-group-header + .ss-group-header[b-4f47kscemv] {
    /* Shouldn't happen, but safety */
    padding-top: 4px;
}

.ss-option-grouped[b-4f47kscemv] {
    padding-left: 16px;
}

.ss-no-results[b-4f47kscemv] {
    padding: 16px 12px;
    text-align: center;
    color: #9ca3af;
    font-size: 0.8125rem;
    font-style: italic;
}

/* ── Dark themes ──────────────────────────────────────────────── */
.is-dark .ss-trigger[b-4f47kscemv] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.is-dark .ss-value-text[b-4f47kscemv] {
    color: white;
}

.is-dark .ss-placeholder-text[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ss-chevron[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .ss-panel[b-4f47kscemv] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.is-dark .ss-search-input[b-4f47kscemv] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.is-dark .ss-search-input:focus[b-4f47kscemv] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .ss-search-input[b-4f47kscemv]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ss-search-icon[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ss-search-clear[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.4);
}

.is-dark .ss-search-clear:hover[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .ss-option[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .ss-option:hover[b-4f47kscemv] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .ss-option-selected[b-4f47kscemv] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.15);
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
}

.is-dark .ss-option-selected:hover[b-4f47kscemv] {
    background: rgba(var(--theme-primary-rgb, 99 102 241), 0.22);
}

.is-dark .ss-option-placeholder[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .ss-group-header[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.45);
    background: #1e293b;
}

.is-dark .ss-no-results[b-4f47kscemv] {
    color: rgba(255, 255, 255, 0.35);
}
/* /Components/SocialPreferencesDialog.razor.rz.scp.css */
/* ============================================
   Social Preferences Dialog
   ============================================ */

.social-prefs-form[b-l9t03osg4u] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.5rem 0;
}

.social-prefs-intro[b-l9t03osg4u] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

/* Groups */
.social-prefs-group[b-l9t03osg4u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.prefs-label[b-l9t03osg4u] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Toggle row (opt-in / auto-decline) */
.social-prefs-toggle-row[b-l9t03osg4u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.toggle-info[b-l9t03osg4u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-label[b-l9t03osg4u] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.toggle-hint[b-l9t03osg4u] {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* Toggle switch */
.social-toggle[b-l9t03osg4u] {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
}

.social-toggle input[b-l9t03osg4u] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.social-toggle-track[b-l9t03osg4u] {
    width: 44px;
    height: 24px;
    background: #d1d5db;
    border-radius: 12px;
    transition: background 0.2s ease;
    position: relative;
}

.social-toggle input:checked + .social-toggle-track[b-l9t03osg4u] {
    background: var(--theme-primary, #6366f1);
}

.social-toggle-thumb[b-l9t03osg4u] {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.social-toggle input:checked + .social-toggle-track .social-toggle-thumb[b-l9t03osg4u] {
    transform: translateX(20px);
}

/* Audience buttons */
.audience-options[b-l9t03osg4u] {
    display: flex;
    gap: 0.5rem;
}

.audience-btn[b-l9t03osg4u] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    text-align: center;
}

.audience-btn:hover[b-l9t03osg4u] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.audience-btn.active[b-l9t03osg4u] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

/* Share toggle checkboxes */
.share-toggles[b-l9t03osg4u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.share-toggle-item[b-l9t03osg4u] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--theme-text-primary, #1e293b);
    padding: 6px 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.share-toggle-item:hover[b-l9t03osg4u] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04);
}

.share-toggle-item input[type="checkbox"][b-l9t03osg4u] {
    accent-color: var(--theme-primary, #6366f1);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Actions */
.social-prefs-actions[b-l9t03osg4u] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

/* ============================================
   Dark Theme Support
   ============================================ */
.is-dark .toggle-label[b-l9t03osg4u],
.is-dark .prefs-label[b-l9t03osg4u],
.is-dark .share-toggle-item[b-l9t03osg4u] {
    color: #f1f5f9;
}

.is-dark .audience-btn[b-l9t03osg4u] {
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.is-dark .social-toggle-track[b-l9t03osg4u] {
    background: rgba(255, 255, 255, 0.15);
}

.is-dark .social-prefs-actions[b-l9t03osg4u] {
    border-top-color: rgba(255, 255, 255, 0.08);
}
/* /Components/Teams/TeamSwitcher.razor.rz.scp.css */
/* TEAMS Phase 0 — current-team switcher. Theme-agnostic: inherits text color,
   uses a subtle translucent surface so it sits cleanly on any theme/page header. */
.team-switcher[b-6b72ly0iki] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.team-switcher-label[b-6b72ly0iki] {
    opacity: 0.7;
    font-weight: 500;
    white-space: nowrap;
}

.team-switcher-select[b-6b72ly0iki] {
    appearance: auto;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(128, 128, 128, 0.35);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font: inherit;
    cursor: pointer;
    min-width: 140px;
}

.team-switcher-select:focus-visible[b-6b72ly0iki] {
    outline: 2px solid var(--theme-chip-color, #6366f1);
    outline-offset: 1px;
}
/* /Components/ThemeEffects.razor.rz.scp.css */
/* ============================================
   ThemeEffects component-scoped styles
   Component-scoped CSS for ambient theme effects + the shared
   easter-egg infrastructure (hint badges + score popups). The
   theme-specific easter eggs that REMAIN active (Space UFO toggle,
   Nature firefly catcher, Ocean/Winter/Mystic mini-games) consume
   .easter-egg-hint and .score-popup as their base classes.

   CL-EE-V-1 (2026-05-10): Cloud bird-shooting easter egg fully retired.
   The following rules were removed from this file:
     - .theme-effects.hunter-mode  (crosshair cursor for hunter mode)
     - .flying-bird.targetable / :hover  (clickable bird overlay)
     - .flying-bird.shot + .bird-wing rule  (falling-shot animation)
     - @keyframes birdFall, wingShotFlap
     - .feather-burst + .feather children + nth-child rules
     - @keyframes featherFly
     - .hunter-mode-badge
     - @keyframes badgeGlow
   See DECISIONS.md → CL-EE-V-1 for rationale. To resurrect: restore from git.
   ============================================ */

/* Floating clouds remain interactive for the gentle "boop" reaction
   (musical / squish — wired in ThemeEffects.razor → OnCloudBoop). */
.floating-cloud[b-uybr46kxd6] {
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.floating-cloud:hover[b-uybr46kxd6] {
    filter: brightness(1.1);
}

.floating-cloud:active[b-uybr46kxd6] {
    transform: scale(0.95);
}

/* ============================================
   Shared easter-egg infrastructure
   Used by Space UFO toggle, Nature firefly catcher,
   Ocean/Winter/Mystic mini-games. NOT used by Cloud anymore.
   ============================================ */

/* Easter egg progress hint */
.easter-egg-hint[b-uybr46kxd6] {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.9);
    color: #1e3a5f;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: hintPulse-b-uybr46kxd6 1s ease-in-out infinite;
    z-index: 1000;
    pointer-events: none;
}

@keyframes hintPulse-b-uybr46kxd6 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Score popup (base — Space/Winter/Mystic etc. layer their own colors via subclass) */
.score-popup[b-uybr46kxd6] {
    position: fixed;
    font-size: 28px;
    font-weight: 800;
    color: #16a34a;
    text-shadow: 2px 2px 4px transparent;
    animation: scoreFloat-b-uybr46kxd6 2s ease-out forwards;
    z-index: 1002;
    pointer-events: none;
}

@keyframes scoreFloat-b-uybr46kxd6 {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}
/* /Components/ToastContainer.razor.rz.scp.css */
/* ============================================
   NATIVE TOAST NOTIFICATION STYLES
   ============================================ */

.toast-container[b-2ll9ochxmb] {
    position: fixed;
    /* AUD-V-3 (2026-06-09): was 9999 — BaseDialog's overlay sits at 100000,
       so every toast fired while a dialog was open rendered underneath it
       (e.g. validation warnings from inside the dialog). Toasts are the
       app's topmost layer; keep this above all dialog/overlay z-indexes. */
    z-index: 100100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    pointer-events: none;
    max-width: 400px;
    width: 100%;
}

/* Position variants */
.position-top-left[b-2ll9ochxmb] {
    top: 0;
    left: 0;
}

.position-top-center[b-2ll9ochxmb] {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.position-top-right[b-2ll9ochxmb] {
    top: 0;
    right: 0;
}

.position-bottom-left[b-2ll9ochxmb] {
    bottom: 0;
    left: 0;
    flex-direction: column-reverse;
}

.position-bottom-center[b-2ll9ochxmb] {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column-reverse;
}

.position-bottom-right[b-2ll9ochxmb] {
    bottom: 0;
    right: 0;
    flex-direction: column-reverse;
    padding-bottom: 96px; /* Clear the companion FAB */
}

/* Toast base styles */
.toast[b-2ll9ochxmb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    animation: toastSlideIn-b-2ll9ochxmb 0.3s ease-out;
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.toast.exiting[b-2ll9ochxmb] {
    animation: toastSlideOut-b-2ll9ochxmb 0.3s ease-in forwards;
}

@keyframes toastSlideIn-b-2ll9ochxmb {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut-b-2ll9ochxmb {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* Left-side positions slide from left */
.position-top-left .toast[b-2ll9ochxmb],
.position-bottom-left .toast[b-2ll9ochxmb] {
    animation-name: toastSlideInLeft-b-2ll9ochxmb;
}

.position-top-left .toast.exiting[b-2ll9ochxmb],
.position-bottom-left .toast.exiting[b-2ll9ochxmb] {
    animation-name: toastSlideOutLeft-b-2ll9ochxmb;
}

@keyframes toastSlideInLeft-b-2ll9ochxmb {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOutLeft-b-2ll9ochxmb {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

/* Center positions slide from top/bottom */
.position-top-center .toast[b-2ll9ochxmb],
.position-bottom-center .toast[b-2ll9ochxmb] {
    animation-name: toastSlideInCenter-b-2ll9ochxmb;
}

.position-top-center .toast.exiting[b-2ll9ochxmb],
.position-bottom-center .toast.exiting[b-2ll9ochxmb] {
    animation-name: toastSlideOutCenter-b-2ll9ochxmb;
}

@keyframes toastSlideInCenter-b-2ll9ochxmb {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastSlideOutCenter-b-2ll9ochxmb {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Toast icon */
.toast-icon[b-2ll9ochxmb] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-icon svg[b-2ll9ochxmb] {
    width: 24px;
    height: 24px;
}

/* Toast content */
.toast-content[b-2ll9ochxmb] {
    flex: 1;
    min-width: 0;
}

.toast-title[b-2ll9ochxmb] {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 4px;
    line-height: 1.3;
}

.toast-message[b-2ll9ochxmb] {
    font-size: 0.85rem;
    line-height: 1.4;
    opacity: 0.9;
    word-wrap: break-word;
}

/* Close button */
/* VE-V-8 (2026-05-11): Inline action button for toast (e.g., "Undo").
   Sits to the LEFT of the close X. Stronger affordance than the muted
   close button — bold text, hover lift, currentColor so it inherits
   the per-type color (toast-success uses green, toast-info uses blue,
   etc). Dark-theme overrides live in themes.css alongside .toast-close. */
.toast-action[b-2ll9ochxmb] {
    flex-shrink: 0;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: currentColor;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    letter-spacing: 0.01em;
    text-transform: none;
}

.toast-action:hover[b-2ll9ochxmb] {
    background: rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.toast-action:active[b-2ll9ochxmb] {
    transform: translateY(0);
}

.toast-close[b-2ll9ochxmb] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.toast-close svg[b-2ll9ochxmb] {
    width: 16px;
    height: 16px;
}

.toast-close:hover[b-2ll9ochxmb] {
    background: rgba(0, 0, 0, 0.1);
    opacity: 1;
}

/* Progress bar */
.toast-progress[b-2ll9ochxmb] {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: currentColor;
    opacity: 0.3;
    animation: toastProgress-b-2ll9ochxmb linear forwards;
    transform-origin: left;
}

@keyframes toastProgress-b-2ll9ochxmb {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

/* ============================================
   TOAST TYPE VARIANTS
   ============================================ */

/* Success - Solid opaque background */
.toast-success[b-2ll9ochxmb] {
    background: #f0fdf4;
    border-color: #86efac;
    color: #14532d;
}

.toast-success .toast-title[b-2ll9ochxmb] {
    color: #15803d;
}

.toast-success .toast-message[b-2ll9ochxmb] {
    color: #166534;
    opacity: 1;
}

.toast-success .toast-icon[b-2ll9ochxmb] {
    color: #22c55e;
}

.toast-success .toast-close[b-2ll9ochxmb] {
    color: #166534;
    background: rgba(22, 101, 52, 0.1);
}

.toast-success .toast-close:hover[b-2ll9ochxmb] {
    background: rgba(22, 101, 52, 0.2);
}

.toast-success .toast-progress[b-2ll9ochxmb] {
    background: #22c55e;
}

/* Info - Solid opaque background */
.toast-info[b-2ll9ochxmb] {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1e3a8a;
}

.toast-info .toast-title[b-2ll9ochxmb] {
    color: #1d4ed8;
}

.toast-info .toast-message[b-2ll9ochxmb] {
    color: #1e40af;
    opacity: 1;
}

.toast-info .toast-icon[b-2ll9ochxmb] {
    color: #3b82f6;
}

.toast-info .toast-close[b-2ll9ochxmb] {
    color: #1e40af;
    background: rgba(30, 64, 175, 0.1);
}

.toast-info .toast-close:hover[b-2ll9ochxmb] {
    background: rgba(30, 64, 175, 0.2);
}

.toast-info .toast-progress[b-2ll9ochxmb] {
    background: #3b82f6;
}

/* Warning - Solid opaque background */
.toast-warning[b-2ll9ochxmb] {
    background: #fffbeb;
    border-color: #fcd34d;
    color: #78350f;
}

.toast-warning .toast-title[b-2ll9ochxmb] {
    color: #b45309;
}

.toast-warning .toast-message[b-2ll9ochxmb] {
    color: #92400e;
    opacity: 1;
}

.toast-warning .toast-icon[b-2ll9ochxmb] {
    color: #f59e0b;
}

.toast-warning .toast-close[b-2ll9ochxmb] {
    color: #92400e;
    background: rgba(146, 64, 14, 0.1);
}

.toast-warning .toast-close:hover[b-2ll9ochxmb] {
    background: rgba(146, 64, 14, 0.2);
}

.toast-warning .toast-progress[b-2ll9ochxmb] {
    background: #f59e0b;
}

/* Error - Solid opaque background */
.toast-error[b-2ll9ochxmb] {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #7f1d1d;
}

.toast-error .toast-title[b-2ll9ochxmb] {
    color: #b91c1c;
}

.toast-error .toast-message[b-2ll9ochxmb] {
    color: #991b1b;
    opacity: 1;
}

.toast-error .toast-icon[b-2ll9ochxmb] {
    color: #ef4444;
}

.toast-error .toast-close[b-2ll9ochxmb] {
    color: #991b1b;
    background: rgba(153, 27, 27, 0.1);
}

.toast-error .toast-close:hover[b-2ll9ochxmb] {
    background: rgba(153, 27, 27, 0.2);
}

.toast-error .toast-progress[b-2ll9ochxmb] {
    background: #ef4444;
}

/* Credit - Gold/amber theme for credit usage notifications */
.toast-credit[b-2ll9ochxmb] {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-color: #fbbf24;
    color: #78350f;
}

.toast-credit .toast-title[b-2ll9ochxmb] {
    color: #b45309;
}

.toast-credit .toast-message[b-2ll9ochxmb] {
    color: #92400e;
    opacity: 1;
    font-weight: 500;
}

.toast-credit .toast-icon[b-2ll9ochxmb] {
    color: #f59e0b;
}

.toast-credit .toast-close[b-2ll9ochxmb] {
    color: #92400e;
    background: rgba(146, 64, 14, 0.1);
}

.toast-credit .toast-close:hover[b-2ll9ochxmb] {
    background: rgba(146, 64, 14, 0.2);
}

.toast-credit .toast-progress[b-2ll9ochxmb] {
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
}

/* ============================================
   DARK THEME SUPPORT
   Moved to themes.css (global) because scoped
   CSS isolation doesn't reach theme classes on
   ancestor elements. See themes.css "TOAST
   NOTIFICATIONS - Dark Theme Overrides" section.
   ============================================ */

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
.is-dark .toast-container[b-2ll9ochxmb] {
        max-width: calc(100% - 32px);
        padding: 12px;
    }

.is-dark .toast[b-2ll9ochxmb] {
        padding: 12px 14px;
    }

.is-dark .toast-title[b-2ll9ochxmb] {
        font-size: 0.85rem;
    }

.is-dark .toast-message[b-2ll9ochxmb] {
        font-size: 0.8rem;
    }
}

/* MOBILE-1 (2026-09-08): on a phone the bottom-anchored toast landed exactly on the chain
   stepper's primary button ("Log my first time" half-covered by "task created"). Below 640px every
   position variant renders at the TOP, under the app header, full width. */
@media (max-width: 640px) {
    .toast-container[b-2ll9ochxmb] {
        top: 72px !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        flex-direction: column !important;
        max-width: none;
        padding: 8px 12px;
    }
}
/* /Components/ToolsMegaMenu.razor.rz.scp.css */
/* ToolsMegaMenu — scoped styles for the Tools dropdown.
   Extracted from PublicHeader.razor.css 2026-05-09 so the dropdown can be
   embedded into pages whose headers don't use the shared PublicHeader (e.g.
   Index.razor, which keeps its inline header for the mode-toggle button). */

.tools-menu[b-fuxxmqt50s] {
    position: relative;
}

.tools-menu-trigger[b-fuxxmqt50s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--theme-text-primary, #1a202c);
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}

.tools-menu-trigger:hover[b-fuxxmqt50s],
.tools-menu.is-open .tools-menu-trigger[b-fuxxmqt50s] {
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.05));
}

.tools-menu-chevron[b-fuxxmqt50s] {
    width: 16px;
    height: 16px;
    transition: transform 200ms ease;
}

.tools-menu.is-open .tools-menu-chevron[b-fuxxmqt50s] {
    transform: rotate(180deg);
}

/* Backdrop — outside-click closer. Only present while menu is open. */
.tools-menu-backdrop[b-fuxxmqt50s] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 90;
}

.tools-menu-panel[b-fuxxmqt50s] {
    /* 2026-05-26: switched from position:absolute (relative to .tools-menu
       trigger wrapper) to position:fixed (relative to viewport). The 6-column
       layout's 1300px width was wider than the available space when centered
       on a non-viewport-centered trigger button — pushing the PLANNING column
       off the left edge of the viewport. Fixed positioning centers on the
       viewport regardless of trigger position, which is the standard
       mega-menu pattern (matches Microsoft / Stripe / Apple). The visual
       disconnect from the trigger is acceptable — the menu still opens
       on click and the trigger's pill background indicates the active state. */
    position: fixed;
    top: 72px; /* public-header height (~64px) + 8px gap */
    left: 50%;
    transform: translateX(-50%);
    z-index: 110;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    padding: 24px;
    /* 2026-05-26: bumped from 1080px → 1300px so all 6 packages fit on a single
       row at the desktop breakpoint after adding the FINANCE package. Math: 6
       columns × 200px + 5 gaps × 20px = 1300px with 0 padding-side wiggle room.
       Mobile fallback below collapses to a single column regardless.
       (Prior: 2026-05-09 went from 960px → 1080px for the 5-column shape.) */
    width: min(1300px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    animation: tools-menu-fade-in-b-fuxxmqt50s 150ms ease;
}

@keyframes tools-menu-fade-in-b-fuxxmqt50s {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.tools-menu-loading[b-fuxxmqt50s],
.tools-menu-empty[b-fuxxmqt50s] {
    padding: 24px;
    text-align: center;
    color: var(--theme-text-secondary, #6b7280);
    font-size: 0.95rem;
}

.tools-menu-grid[b-fuxxmqt50s] {
    display: grid;
    /* 2026-05-26: explicit 6-column layout to accommodate the new FINANCE
       package alongside PLANNING / BUILD / CREATIVE / CONNECT & SHARE /
       TRACK & MONITOR. minmax(0, 1fr) lets columns shrink past their content's
       natural min-width if a tool name is long, falling back on the
       .tools-menu-item-name ellipsis to keep things tidy.
       (Prior: 2026-05-09 went from auto-fit minmax to explicit repeat(5).) */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 20px;
}

.tools-menu-column[b-fuxxmqt50s] {
    min-width: 0;
}

.tools-menu-package[b-fuxxmqt50s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    margin: -6px -8px 8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: background 150ms ease;
}

.tools-menu-package:hover[b-fuxxmqt50s] {
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.04));
}

.tools-menu-package-icon[b-fuxxmqt50s] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.tools-menu-package-icon .material-symbols-rounded[b-fuxxmqt50s] {
    font-size: 18px;
}

.tools-menu-package-name[b-fuxxmqt50s] {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-primary, #1a202c);
}

.tools-menu-list[b-fuxxmqt50s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tools-menu-item[b-fuxxmqt50s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--theme-text-primary, #1a202c);
    font-size: 0.9rem;
    transition: background 120ms ease, transform 120ms ease;
}

.tools-menu-item:hover[b-fuxxmqt50s] {
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.04));
    transform: translateX(2px);
}

.tools-menu-item-icon[b-fuxxmqt50s] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.05));
    color: var(--theme-text-secondary, #6b7280);
}

.tools-menu-item-icon .material-symbols-rounded[b-fuxxmqt50s] {
    font-size: 16px;
}

.tools-menu-item-name[b-fuxxmqt50s] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tools-menu-footer[b-fuxxmqt50s] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    text-align: center;
}

.tools-menu-browse-all[b-fuxxmqt50s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-primary-ink, var(--theme-primary, #2563eb));
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
}

.tools-menu-browse-all:hover[b-fuxxmqt50s] {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .tools-menu-trigger[b-fuxxmqt50s] {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    .tools-menu-panel[b-fuxxmqt50s] {
        /* Mobile keeps position:fixed (now matches desktop) but anchors to
           viewport edges via left/right 12px instead of viewport-center.
           Explicit top: 64px (vs the auto we used while desktop was
           position:absolute) — mobile header is shorter (~56px) + 8px gap. */
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-height: calc(100vh - 100px);
    }

    @keyframes tools-menu-fade-in-b-fuxxmqt50s {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .tools-menu-grid[b-fuxxmqt50s] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
/* /Components/UpgradePrompt.razor.rz.scp.css */
/* ============================================
   UPGRADE PROMPT COMPONENT STYLES — Redesigned
   ============================================ */

.upgrade-page[b-08hx5qj2ju] {
    min-height: 100vh;
    padding: 24px;
    transition: background 0.5s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-top: 72px;
}

.upgrade-container[b-08hx5qj2ju] {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 0 32px;
}

/* ---- Header ---- */
.upgrade-header[b-08hx5qj2ju] {
    text-align: center;
    margin-bottom: 40px;
}

.upgrade-icon[b-08hx5qj2ju] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.25);
}

.upgrade-icon svg[b-08hx5qj2ju] {
    width: 36px;
    height: 36px;
}

.upgrade-title[b-08hx5qj2ju] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.2;
}

.upgrade-description[b-08hx5qj2ju] {
    font-size: 1rem;
    opacity: 0.7;
    margin: 0;
    line-height: 1.5;
}

.upgrade-divider[b-08hx5qj2ju] {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    margin: 20px auto 16px;
}

.upgrade-cta[b-08hx5qj2ju] {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    opacity: 0.8;
}

/* ---- Tier Grid ---- */
.tier-grid[b-08hx5qj2ju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.tier-card[b-08hx5qj2ju] {
    border-radius: 16px;
    padding: 28px 24px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.tier-badge-wrap[b-08hx5qj2ju] {
    text-align: center;
    margin-bottom: 12px;
}

.tier-badge[b-08hx5qj2ju] {
    display: inline-block;
    font-size: 0.7rem;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-badge.popular[b-08hx5qj2ju] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
}

.tier-badge.best-value[b-08hx5qj2ju] {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
}

.tier-plan-name[b-08hx5qj2ju] {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
}

.tier-price[b-08hx5qj2ju] {
    text-align: center;
    margin-bottom: 20px;
}

.tier-price-amount[b-08hx5qj2ju] {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.tier-price-period[b-08hx5qj2ju] {
    font-size: 0.9rem;
    opacity: 0.6;
}

.tier-features[b-08hx5qj2ju] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
}

.tier-features li[b-08hx5qj2ju] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.88rem;
    line-height: 1.4;
}

.tier-features li svg[b-08hx5qj2ju] {
    width: 18px;
    height: 18px;
    color: #22c55e;
    flex-shrink: 0;
    margin-top: 1px;
}

.tier-cta-btn[b-08hx5qj2ju] {
    width: 100%;
    text-align: center;
    justify-content: center;
}

/* ---- Footer ---- */
.upgrade-footer[b-08hx5qj2ju] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.compare-link[b-08hx5qj2ju] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #7c3aed;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.compare-link:hover[b-08hx5qj2ju] {
    text-decoration: underline;
}

.back-btn[b-08hx5qj2ju] {
    opacity: 0.6;
}

.back-btn:hover[b-08hx5qj2ju] {
    opacity: 1;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .upgrade-page[b-08hx5qj2ju] {
        padding: 16px;
        padding-top: 72px;
    }

    .upgrade-container[b-08hx5qj2ju] {
        padding: 24px 0;
    }

    .tier-grid[b-08hx5qj2ju] {
        grid-template-columns: 1fr;
    }

    .upgrade-title[b-08hx5qj2ju] {
        font-size: 1.4rem;
    }
}

/* ============================================
   EXECUTIVE THEME (light)
   ============================================ */
.upgrade-page.theme-executive[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

.theme-executive .upgrade-title[b-08hx5qj2ju] { color: #1e293b; }
.theme-executive .upgrade-description[b-08hx5qj2ju] { color: #64748b; }
.theme-executive .upgrade-cta[b-08hx5qj2ju] { color: #475569; }

.theme-executive .tier-card[b-08hx5qj2ju] {
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.theme-executive .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: #7c3aed;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.12);
}

.theme-executive .tier-plan-name[b-08hx5qj2ju] { color: #1e293b; }
.theme-executive .tier-price-amount[b-08hx5qj2ju] { color: #1e293b; }
.theme-executive .tier-price-period[b-08hx5qj2ju] { color: #64748b; }
.theme-executive .tier-features li[b-08hx5qj2ju] { color: #475569; }

.theme-executive .compare-link[b-08hx5qj2ju] { color: #7c3aed; }
.theme-executive .back-btn[b-08hx5qj2ju] { color: #64748b; }

/* ============================================
   CLOUD THEME (light)
   ============================================ */
.upgrade-page.theme-cloud[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

.theme-cloud .upgrade-title[b-08hx5qj2ju] { color: #1e3a5f; }
.theme-cloud .upgrade-description[b-08hx5qj2ju] { color: #64748b; }
.theme-cloud .upgrade-cta[b-08hx5qj2ju] { color: #475569; }

.theme-cloud .tier-card[b-08hx5qj2ju] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.theme-cloud .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: #7c3aed;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.15);
}

.theme-cloud .tier-plan-name[b-08hx5qj2ju] { color: #1e3a5f; }
.theme-cloud .tier-price-amount[b-08hx5qj2ju] { color: #1e3a5f; }
.theme-cloud .tier-price-period[b-08hx5qj2ju] { color: #64748b; }
.theme-cloud .tier-features li[b-08hx5qj2ju] { color: #475569; }

.theme-cloud .compare-link[b-08hx5qj2ju] { color: #7c3aed; }
.theme-cloud .back-btn[b-08hx5qj2ju] { color: #1e3a5f; }

/* ============================================
   SPACE THEME (dark)
   ============================================ */
.upgrade-page.theme-space[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

.theme-space .upgrade-title[b-08hx5qj2ju] { color: #f1f5f9; }
.theme-space .upgrade-description[b-08hx5qj2ju] { color: #94a3b8; }
.theme-space .upgrade-cta[b-08hx5qj2ju] { color: #c4b5fd; }

.theme-space .tier-card[b-08hx5qj2ju] {
    background: rgba(50, 45, 100, 0.5);
    border: 1px solid rgba(168, 85, 247, 0.2);
    backdrop-filter: blur(8px);
}

.theme-space .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 4px 24px rgba(168, 85, 247, 0.15);
}

.theme-space .tier-plan-name[b-08hx5qj2ju] { color: #f1f5f9; }
.theme-space .tier-price-amount[b-08hx5qj2ju] { color: #e2e8f0; }
.theme-space .tier-price-period[b-08hx5qj2ju] { color: #94a3b8; }
.theme-space .tier-features li[b-08hx5qj2ju] { color: #c4b5fd; }

.theme-space .compare-link[b-08hx5qj2ju] { color: #c4b5fd; }
.theme-space .back-btn[b-08hx5qj2ju] { color: #94a3b8; }

/* ============================================
   WINTER THEME (dark)
   ============================================ */
.upgrade-page.theme-winter[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

.theme-winter .upgrade-title[b-08hx5qj2ju] { color: #f0f9ff; }
.theme-winter .upgrade-description[b-08hx5qj2ju] { color: #bae6fd; }
.theme-winter .upgrade-cta[b-08hx5qj2ju] { color: #7dd3fc; }

.theme-winter .tier-card[b-08hx5qj2ju] {
    background: rgba(186, 230, 253, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.25);
    backdrop-filter: blur(8px);
}

.theme-winter .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: #67e8f9;
    box-shadow: 0 4px 24px rgba(103, 232, 249, 0.15);
}

.theme-winter .tier-plan-name[b-08hx5qj2ju] { color: #f0f9ff; }
.theme-winter .tier-price-amount[b-08hx5qj2ju] { color: #ecfeff; }
.theme-winter .tier-price-period[b-08hx5qj2ju] { color: #bae6fd; }
.theme-winter .tier-features li[b-08hx5qj2ju] { color: #bae6fd; }

.theme-winter .compare-link[b-08hx5qj2ju] { color: #67e8f9; }
.theme-winter .back-btn[b-08hx5qj2ju] { color: #bae6fd; }

/* ============================================
   NATURE THEME (dark)
   ============================================ */
.upgrade-page.theme-nature[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);
}

.theme-nature .upgrade-title[b-08hx5qj2ju] { color: #f0fdf4; }
.theme-nature .upgrade-description[b-08hx5qj2ju] { color: #bbf7d0; }
.theme-nature .upgrade-cta[b-08hx5qj2ju] { color: #86efac; }

.theme-nature .tier-card[b-08hx5qj2ju] {
    background: rgba(187, 247, 208, 0.12);
    border: 1px solid rgba(187, 247, 208, 0.25);
    backdrop-filter: blur(8px);
}

.theme-nature .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: #86efac;
    box-shadow: 0 4px 24px rgba(134, 239, 172, 0.15);
}

.theme-nature .tier-plan-name[b-08hx5qj2ju] { color: #f0fdf4; }
.theme-nature .tier-price-amount[b-08hx5qj2ju] { color: #ecfdf5; }
.theme-nature .tier-price-period[b-08hx5qj2ju] { color: #bbf7d0; }
.theme-nature .tier-features li[b-08hx5qj2ju] { color: #bbf7d0; }

.theme-nature .compare-link[b-08hx5qj2ju] { color: #86efac; }
.theme-nature .back-btn[b-08hx5qj2ju] { color: #bbf7d0; }

/* ============================================
   OCEAN THEME (dark)
   ============================================ */
.upgrade-page.theme-ocean[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 70%, #0ea5e9 100%);
}

.theme-ocean .upgrade-title[b-08hx5qj2ju] { color: #f0f9ff; }
.theme-ocean .upgrade-description[b-08hx5qj2ju] { color: #bae6fd; }
.theme-ocean .upgrade-cta[b-08hx5qj2ju] { color: #7dd3fc; }

.theme-ocean .tier-card[b-08hx5qj2ju] {
    background: rgba(186, 230, 253, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.25);
    backdrop-filter: blur(8px);
}

.theme-ocean .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: #7dd3fc;
    box-shadow: 0 4px 24px rgba(125, 211, 252, 0.15);
}

.theme-ocean .tier-plan-name[b-08hx5qj2ju] { color: #f0f9ff; }
.theme-ocean .tier-price-amount[b-08hx5qj2ju] { color: #ecfeff; }
.theme-ocean .tier-price-period[b-08hx5qj2ju] { color: #bae6fd; }
.theme-ocean .tier-features li[b-08hx5qj2ju] { color: #bae6fd; }

.theme-ocean .compare-link[b-08hx5qj2ju] { color: #7dd3fc; }
.theme-ocean .back-btn[b-08hx5qj2ju] { color: #bae6fd; }

/* ============================================
   MYSTIC THEME (dark)
   ============================================ */
.upgrade-page.theme-mystic[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #1a1025 0%, #2d1b4e 30%, #3b1f6e 70%, #4c1d95 100%);
}

.theme-mystic .upgrade-title[b-08hx5qj2ju] { color: #faf5ff; }
.theme-mystic .upgrade-description[b-08hx5qj2ju] { color: #d8b4fe; }
.theme-mystic .upgrade-cta[b-08hx5qj2ju] { color: #c084fc; }

.theme-mystic .tier-card[b-08hx5qj2ju] {
    background: rgba(45, 27, 78, 0.6);
    border: 1px solid rgba(192, 132, 252, 0.2);
    backdrop-filter: blur(8px);
}

.theme-mystic .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: rgba(232, 121, 249, 0.5);
    box-shadow: 0 4px 24px rgba(232, 121, 249, 0.15);
}

.theme-mystic .tier-plan-name[b-08hx5qj2ju] { color: #faf5ff; }
.theme-mystic .tier-price-amount[b-08hx5qj2ju] { color: #f3e8ff; }
.theme-mystic .tier-price-period[b-08hx5qj2ju] { color: #d8b4fe; }
.theme-mystic .tier-features li[b-08hx5qj2ju] { color: #d8b4fe; }

.theme-mystic .upgrade-icon[b-08hx5qj2ju] {
    background: linear-gradient(135deg, #9333ea 0%, #e879f9 100%);
    box-shadow: 0 8px 24px rgba(232, 121, 249, 0.3);
}

.theme-mystic .upgrade-divider[b-08hx5qj2ju] {
    background: linear-gradient(90deg, #9333ea, #e879f9);
}

.theme-mystic .compare-link[b-08hx5qj2ju] { color: #e879f9; }
.theme-mystic .back-btn[b-08hx5qj2ju] { color: #d8b4fe; }

/* ============================================
   TRON THEME (dark)
   ============================================ */
.upgrade-page.theme-tron[b-08hx5qj2ju] {
    background: linear-gradient(180deg, #0a0a0f 0%, #0f1923 30%, #111d2e 70%, #162032 100%);
}

.theme-tron .upgrade-title[b-08hx5qj2ju] { color: #f0fdfa; }
.theme-tron .upgrade-description[b-08hx5qj2ju] { color: #a5f3fc; }
.theme-tron .upgrade-cta[b-08hx5qj2ju] { color: #22d3ee; }

.theme-tron .tier-card[b-08hx5qj2ju] {
    background: rgba(15, 25, 35, 0.6);
    border: 1px solid rgba(6, 182, 212, 0.25);
    backdrop-filter: blur(8px);
}

.theme-tron .tier-card.tier-scale[b-08hx5qj2ju] {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 4px 24px rgba(34, 211, 238, 0.15);
}

.theme-tron .tier-plan-name[b-08hx5qj2ju] { color: #f0fdfa; }
.theme-tron .tier-price-amount[b-08hx5qj2ju] { color: #ecfeff; }
.theme-tron .tier-price-period[b-08hx5qj2ju] { color: #a5f3fc; }
.theme-tron .tier-features li[b-08hx5qj2ju] { color: #a5f3fc; }

.theme-tron .upgrade-icon[b-08hx5qj2ju] {
    background: linear-gradient(135deg, #0891b2 0%, #22d3ee 100%);
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.3);
}

.theme-tron .upgrade-divider[b-08hx5qj2ju] {
    background: linear-gradient(90deg, #0891b2, #22d3ee);
}

.theme-tron .compare-link[b-08hx5qj2ju] { color: #22d3ee; }
.theme-tron .back-btn[b-08hx5qj2ju] { color: #a5f3fc; }
/* /Components/Video/AssetLibrary.razor.rz.scp.css */
/* Asset Library Component Styles */
.asset-library[b-cuft7oo6vm] {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
}

.library-header[b-cuft7oo6vm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.library-header h3[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.header-icon[b-cuft7oo6vm] {
    font-size: 1.2rem;
}

.header-actions[b-cuft7oo6vm] {
    display: flex;
    gap: 8px;
}

.btn-import[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(236, 72, 153, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.3);
    border-radius: 10px;
    color: #f9a8d4;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-import:hover[b-cuft7oo6vm] {
    background: rgba(236, 72, 153, 0.25);
    border-color: rgba(236, 72, 153, 0.5);
}

.btn-create[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-create:hover[b-cuft7oo6vm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.3);
}


/* Filter Tabs */
.filter-tabs[b-cuft7oo6vm] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.filter-tab[b-cuft7oo6vm] {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: #94a3b8;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.filter-tab:hover[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.filter-tab.active[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.3);
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    color: white;
}

/* Asset Grid */
.asset-grid[b-cuft7oo6vm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.asset-card[b-cuft7oo6vm] {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.asset-card:hover[b-cuft7oo6vm] {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    transform: translateY(-2px);
}

.asset-card.selected[b-cuft7oo6vm] {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.3);
}

.asset-image[b-cuft7oo6vm] {
    position: relative;
    aspect-ratio: 1;
    background: #0f172a;
}

.asset-image img[b-cuft7oo6vm] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-image .no-image[b-cuft7oo6vm] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    opacity: 0.5;
}

.favorite-badge[b-cuft7oo6vm] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.9rem;
}

.asset-info[b-cuft7oo6vm] {
    padding: 8px 10px;
}

.asset-name[b-cuft7oo6vm] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-type[b-cuft7oo6vm] {
    font-size: 0.7rem;
    color: #64748b;
}

.asset-actions[b-cuft7oo6vm] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 0 8px 8px;
}

.action-btn[b-cuft7oo6vm] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.action-btn:hover[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.action-btn.use[b-cuft7oo6vm] {
    background: rgba(34, 197, 94, 0.2);
}

.action-btn.use:hover[b-cuft7oo6vm] {
    background: rgba(34, 197, 94, 0.4);
}

/* Loading State */
.loading-state[b-cuft7oo6vm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #94a3b8;
}

.spinner[b-cuft7oo6vm] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(var(--theme-accent-rgb), 0.2);
    border-top-color: var(--theme-accent);
    border-radius: 50%;
    animation: spin-b-cuft7oo6vm 1s linear infinite;
}

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

/* Empty State */
.empty-state[b-cuft7oo6vm] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-cuft7oo6vm] {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-cuft7oo6vm] {
    color: #94a3b8;
    margin: 0 0 8px;
}

.empty-state .hint[b-cuft7oo6vm] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
}

.btn-primary[b-cuft7oo6vm] {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover[b-cuft7oo6vm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.3);
}

/* Create Dialog */
.form-group[b-cuft7oo6vm] {
    margin-bottom: 20px;
}

.form-group label[b-cuft7oo6vm] {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.form-group input[b-cuft7oo6vm],
.form-group textarea[b-cuft7oo6vm] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 0.95rem;
    color: white;
}

.form-group input:focus[b-cuft7oo6vm],
.form-group textarea:focus[b-cuft7oo6vm] {
    outline: none;
    border-color: var(--theme-accent);
}

.form-group .hint[b-cuft7oo6vm] {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 6px;
}

/* Type Selector */
.type-selector[b-cuft7oo6vm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.type-btn[b-cuft7oo6vm] {
    padding: 12px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.type-btn:hover[b-cuft7oo6vm] {
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    color: white;
}

.type-btn.active[b-cuft7oo6vm] {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.3), rgba(var(--theme-primary-rgb), 0.3));
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    color: white;
}

/* Type Description - educates users about each type */
.type-description[b-cuft7oo6vm] {
    margin-top: 12px;
}

.type-hint[b-cuft7oo6vm] {
    margin: 0;
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    font-size: 0.8rem;
    color: #93c5fd;
    line-height: 1.5;
}

.type-hint strong[b-cuft7oo6vm] {
    color: #60a5fa;
}

.btn-cancel[b-cuft7oo6vm] {
    padding: 12px 24px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    color: #94a3b8;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-create-asset[b-cuft7oo6vm] {
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-create-asset:hover:not(:disabled)[b-cuft7oo6vm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.3);
}

.btn-create-asset:disabled[b-cuft7oo6vm] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Light Theme */
.theme-cloud .asset-library[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

.theme-cloud .library-header h3[b-cuft7oo6vm],
.theme-cloud .asset-name[b-cuft7oo6vm] {
    color: #1e293b;
}

.theme-cloud .form-group label[b-cuft7oo6vm] {
    color: #374151;
}

.theme-cloud .form-group input[b-cuft7oo6vm],
.theme-cloud .form-group textarea[b-cuft7oo6vm],
.theme-cloud .type-btn[b-cuft7oo6vm] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}

.theme-cloud .asset-card[b-cuft7oo6vm] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.theme-cloud .filter-tab[b-cuft7oo6vm] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #64748b;
}

.theme-cloud .filter-tab.active[b-cuft7oo6vm] {
    background: rgba(var(--theme-primary-rgb), 0.15);
    border-color: rgba(var(--theme-primary-rgb), 0.4);
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* ============================================
   IMAGE GENERATION STEP
   ============================================ */
.generate-image-step[b-cuft7oo6vm] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.asset-preview-card[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(var(--theme-accent-rgb), 0.1);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    border-radius: 12px;
}

.preview-type-icon[b-cuft7oo6vm] {
    font-size: 2rem;
}

.preview-details[b-cuft7oo6vm] {
    flex: 1;
    min-width: 0;
}

.preview-details .preview-name[b-cuft7oo6vm] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 4px;
}

.preview-details .preview-desc[b-cuft7oo6vm] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.generate-prompt-section[b-cuft7oo6vm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.generate-prompt-section label[b-cuft7oo6vm] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #e2e8f0;
}

.generate-prompt-section textarea[b-cuft7oo6vm] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    font-size: 0.95rem;
    color: white;
    resize: vertical;
}

.generate-prompt-section textarea:focus[b-cuft7oo6vm] {
    outline: none;
    border-color: var(--theme-accent);
}

.generate-options[b-cuft7oo6vm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.credit-cost[b-cuft7oo6vm] {
    font-size: 0.9rem;
    color: #fbbf24;
    font-weight: 500;
}

.btn-generate-image[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-generate-image:hover:not(:disabled)[b-cuft7oo6vm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.btn-generate-image:disabled[b-cuft7oo6vm] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-small[b-cuft7oo6vm] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-cuft7oo6vm 1s linear infinite;
}

/* Generated Image Preview */
.generated-image-preview[b-cuft7oo6vm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.generated-image-preview img[b-cuft7oo6vm] {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 12px;
    border: 2px solid rgba(34, 197, 94, 0.4);
}

.image-actions[b-cuft7oo6vm] {
    display: flex;
    justify-content: center;
}

.btn-regenerate[b-cuft7oo6vm] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-regenerate:hover:not(:disabled)[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.btn-regenerate:disabled[b-cuft7oo6vm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-save-image[b-cuft7oo6vm] {
    padding: 12px 24px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save-image:hover[b-cuft7oo6vm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

/* Light theme for image generation */
.theme-cloud .asset-preview-card[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.08);
}

.theme-cloud .preview-details .preview-name[b-cuft7oo6vm] {
    color: #1e293b;
}

.theme-cloud .generate-prompt-section label[b-cuft7oo6vm] {
    color: #374151;
}

.theme-cloud .generate-prompt-section textarea[b-cuft7oo6vm] {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #1e293b;
}

/* ============================================
   EDIT DIALOG STYLES
   ============================================ */

/* Edit button in asset actions */
.action-btn.edit[b-cuft7oo6vm] {
    background: rgba(59, 130, 246, 0.2);
}

.action-btn.edit:hover[b-cuft7oo6vm] {
    background: rgba(59, 130, 246, 0.4);
}

/* Edit image preview */
.edit-image-preview[b-cuft7oo6vm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.edit-image-preview img[b-cuft7oo6vm] {
    width: 100%;
    max-width: 200px;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(var(--theme-accent-rgb), 0.3);
}

.btn-regenerate-edit[b-cuft7oo6vm] {
    padding: 8px 16px;
    background: rgba(var(--theme-accent-rgb), 0.2);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.4);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-regenerate-edit:hover[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.3);
    color: white;
}

/* Regenerate section */
.regenerate-section[b-cuft7oo6vm] {
    padding: 16px;
    background: rgba(var(--theme-accent-rgb), 0.1);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    border-radius: 12px;
    margin-bottom: 20px;
}

.regenerate-actions[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.btn-cancel-small[b-cuft7oo6vm] {
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel-small:hover[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Danger zone */
.danger-zone[b-cuft7oo6vm] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(239, 68, 68, 0.2);
}

.btn-delete[b-cuft7oo6vm] {
    padding: 10px 16px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 10px;
    color: #ef4444;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-delete:hover[b-cuft7oo6vm] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.6);
}

/* Save button */
.btn-save[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover:not(:disabled)[b-cuft7oo6vm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.btn-save:disabled[b-cuft7oo6vm] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Light theme overrides for edit dialog */
.theme-cloud .regenerate-section[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.05);
}

.theme-cloud .danger-zone[b-cuft7oo6vm] {
    border-top-color: rgba(239, 68, 68, 0.15);
}

/* ============================================
   VERSION GALLERY STYLES
   ============================================ */

/* Version Gallery Section */
.version-gallery-section[b-cuft7oo6vm] {
    margin-bottom: 20px;
}

.section-header[b-cuft7oo6vm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-header h3[b-cuft7oo6vm] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.version-count[b-cuft7oo6vm] {
    font-size: 0.8rem;
    color: #64748b;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
}

.versions-loading[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Versions Grid */
.versions-grid[b-cuft7oo6vm] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}

.version-card[b-cuft7oo6vm] {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    position: relative;
}

.version-card:hover[b-cuft7oo6vm] {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
    transform: translateY(-2px);
}

.version-card.selected[b-cuft7oo6vm] {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 2px rgba(var(--theme-accent-rgb), 0.3);
}

.version-card.default[b-cuft7oo6vm] {
    border-color: rgba(250, 204, 21, 0.5);
}

.version-image[b-cuft7oo6vm] {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.version-image img[b-cuft7oo6vm] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.default-badge[b-cuft7oo6vm] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: rgba(250, 204, 21, 0.9);
    color: #1e293b;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
}

.version-info[b-cuft7oo6vm] {
    padding: 6px 8px;
}

.version-label[b-cuft7oo6vm] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-category[b-cuft7oo6vm] {
    font-size: 0.65rem;
    color: #64748b;
}

.version-actions[b-cuft7oo6vm] {
    display: flex;
    gap: 4px;
    padding: 0 6px 6px;
    opacity: 0;
    transition: opacity 0.2s;
}

.version-card:hover .version-actions[b-cuft7oo6vm] {
    opacity: 1;
}

.version-action-btn[b-cuft7oo6vm] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}

.version-action-btn:hover[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.2);
}

.version-action-btn.delete:hover[b-cuft7oo6vm] {
    background: rgba(239, 68, 68, 0.3);
}

/* Add Version Card */
.version-card.add-version[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    border-style: dashed;
    border-color: rgba(var(--theme-accent-rgb), 0.3);
    background: rgba(var(--theme-accent-rgb), 0.05);
}

.version-card.add-version:hover[b-cuft7oo6vm] {
    border-color: rgba(var(--theme-accent-rgb), 0.6);
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.add-version-content[b-cuft7oo6vm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #a78bfa;
}

.add-icon[b-cuft7oo6vm] {
    font-size: 1.5rem;
    font-weight: 300;
}

.add-label[b-cuft7oo6vm] {
    font-size: 0.75rem;
    font-weight: 500;
}

/* Quick Generate Section */
.quick-generate-section[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-label[b-cuft7oo6vm] {
    font-size: 0.8rem;
    color: #64748b;
    white-space: nowrap;
}

.quick-buttons[b-cuft7oo6vm] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.quick-btn[b-cuft7oo6vm] {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-btn:hover[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    transform: scale(1.1);
}

/* Add Version Panel */
.add-version-panel[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.1);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

.panel-header[b-cuft7oo6vm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.panel-header h4[b-cuft7oo6vm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.close-panel-btn[b-cuft7oo6vm] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
}

.close-panel-btn:hover[b-cuft7oo6vm] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.form-row[b-cuft7oo6vm] {
    display: flex;
    gap: 12px;
}

.form-group.half[b-cuft7oo6vm] {
    flex: 1;
}

.panel-actions[b-cuft7oo6vm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.checkbox-label[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #94a3b8;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-cuft7oo6vm] {
    width: 16px;
    height: 16px;
    accent-color: var(--theme-accent);
}

.action-buttons[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-generate-version[b-cuft7oo6vm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-generate-version:hover:not(:disabled)[b-cuft7oo6vm] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.3);
}

.btn-generate-version:disabled[b-cuft7oo6vm] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Divider */
.divider[b-cuft7oo6vm] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 20px 0;
}

/* Asset Details Section */
.asset-details-section h3[b-cuft7oo6vm] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
    margin: 0 0 16px;
}

/* Light theme overrides for version gallery */
.theme-cloud .section-header h3[b-cuft7oo6vm],
.theme-cloud .asset-details-section h3[b-cuft7oo6vm] {
    color: #1e293b;
}

.theme-cloud .version-count[b-cuft7oo6vm] {
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
}

.theme-cloud .version-card[b-cuft7oo6vm] {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.theme-cloud .version-card:hover[b-cuft7oo6vm] {
    border-color: rgba(var(--theme-accent-rgb), 0.5);
}

.theme-cloud .version-label[b-cuft7oo6vm] {
    color: #1e293b;
}

.theme-cloud .version-card.add-version[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.03);
}

.theme-cloud .quick-generate-section[b-cuft7oo6vm] {
    border-top-color: #e2e8f0;
}

.theme-cloud .quick-btn[b-cuft7oo6vm] {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.theme-cloud .type-hint[b-cuft7oo6vm] {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.theme-cloud .type-hint strong[b-cuft7oo6vm] {
    color: #2563eb;
}

.theme-cloud .add-version-panel[b-cuft7oo6vm] {
    background: rgba(var(--theme-accent-rgb), 0.05);
    border-color: rgba(var(--theme-accent-rgb), 0.2);
}

.theme-cloud .panel-header h4[b-cuft7oo6vm] {
    color: #1e293b;
}

.theme-cloud .divider[b-cuft7oo6vm] {
    background: #e2e8f0;
}

.theme-cloud .panel-actions[b-cuft7oo6vm] {
    border-top-color: rgba(var(--theme-accent-rgb), 0.15);
}
/* /Components/Video/VideoShareButton.razor.rz.scp.css */
.video-share-btn[b-ghv6uo85mm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    text-decoration: none;
    white-space: nowrap;
}

.video-share-btn:hover[b-ghv6uo85mm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
    color: white;
    text-decoration: none;
}

.video-share-btn.sharing[b-ghv6uo85mm] {
    opacity: 0.8;
    cursor: wait;
}

.video-share-btn.shared[b-ghv6uo85mm] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.video-share-btn.shared:hover[b-ghv6uo85mm] {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}

.video-share-btn.preview[b-ghv6uo85mm] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

.video-share-btn.preview:hover[b-ghv6uo85mm] {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

.video-share-ready[b-ghv6uo85mm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-spinner[b-ghv6uo85mm] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: share-spin-b-ghv6uo85mm 0.7s linear infinite;
}

@keyframes share-spin-b-ghv6uo85mm {
    to { transform: rotate(360deg); }
}

/* Dark theme */
.is-dark .video-share-btn.preview[b-ghv6uo85mm] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

.is-dark .video-share-btn.preview:hover[b-ghv6uo85mm] {
    background: rgba(99, 102, 241, 0.3);
}
/* /Components/Video/VideoShareDialog.razor.rz.scp.css */
/* ============================================
   VIDEO SHARE DIALOG — VID-SHARE-1 (2026-05)
   ============================================
   Full-management share surface: add by email + can-edit toggle in the top row,
   live list of existing shares below. Designed to feel like a focused side-panel
   rather than a form: minimal chrome, lots of room for the share list to breathe.
   Theme-aware via NTS Design System variables (utilities.css). Verified across
   all 8 themes during VID-SHARE-1 build. */

.vsd-body[b-o5ancm7wor] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 240px;
}

/* ── Project meta strip ─────────────────────────────────── */
.vsd-project-meta[b-o5ancm7wor] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--theme-primary-rgb), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.12);
    border-radius: 8px;
    font-size: 0.875rem;
}

.vsd-project-label[b-o5ancm7wor] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

.vsd-project-name[b-o5ancm7wor] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Add new share row ─────────────────────────────────── */
.vsd-add-row[b-o5ancm7wor] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.vsd-email-input[b-o5ancm7wor] {
    flex: 1 1 220px;
    min-width: 200px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vsd-email-input:focus[b-o5ancm7wor] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.18);
}

.vsd-email-input:disabled[b-o5ancm7wor] {
    opacity: 0.6;
    cursor: not-allowed;
}

.vsd-canedit-toggle[b-o5ancm7wor] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(var(--theme-primary-rgb), 0.04);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vsd-canedit-toggle:hover[b-o5ancm7wor] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

.vsd-canedit-toggle input[type="checkbox"][b-o5ancm7wor] {
    cursor: pointer;
    accent-color: var(--theme-primary, #6366f1);
}

.vsd-add-btn[b-o5ancm7wor] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.vsd-add-btn:hover:not(:disabled)[b-o5ancm7wor] {
    background: var(--theme-accent, #4f46e5);
    transform: translateY(-1px);
}

.vsd-add-btn:active:not(:disabled)[b-o5ancm7wor] {
    transform: translateY(0);
}

.vsd-add-btn:disabled[b-o5ancm7wor] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Spinner shared across button + list-loading state ── */
.vsd-spinner[b-o5ancm7wor] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: vsd-spin-b-o5ancm7wor 0.8s linear infinite;
    flex-shrink: 0;
}

.vsd-shares-loading .vsd-spinner[b-o5ancm7wor] {
    border-color: rgba(var(--theme-primary-rgb), 0.2);
    border-top-color: var(--theme-primary, #6366f1);
}

@keyframes vsd-spin-b-o5ancm7wor {
    to { transform: rotate(360deg); }
}

/* ── Inline error under the add row ─────────────────────── */
.vsd-inline-error[b-o5ancm7wor] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    color: #b91c1c;
    font-size: 0.85rem;
}

.vsd-inline-error svg[b-o5ancm7wor] {
    flex-shrink: 0;
}

/* ── Existing shares list ──────────────────────────────── */
.vsd-shares-section[b-o5ancm7wor] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vsd-shares-header[b-o5ancm7wor] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.vsd-shares-title[b-o5ancm7wor] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary, #64748b);
}

.vsd-shares-count[b-o5ancm7wor] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.4rem;
    background: rgba(var(--theme-primary-rgb), 0.12);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.vsd-shares-loading[b-o5ancm7wor],
.vsd-shares-empty[b-o5ancm7wor] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.875rem;
    background: rgba(var(--theme-primary-rgb), 0.03);
    border-radius: 8px;
}

.vsd-shares-list[b-o5ancm7wor] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 280px;
    overflow-y: auto;
}

.vsd-share-row[b-o5ancm7wor] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.vsd-share-row:hover[b-o5ancm7wor] {
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    background: rgba(var(--theme-primary-rgb), 0.02);
}

.vsd-share-info[b-o5ancm7wor] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.vsd-share-email[b-o5ancm7wor] {
    font-size: 0.875rem;
    color: var(--theme-text-primary, #1e293b);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vsd-share-permission[b-o5ancm7wor] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vsd-share-permission.is-edit[b-o5ancm7wor] {
    color: var(--theme-success, #16a34a);
}

.vsd-share-permission.is-view[b-o5ancm7wor] {
    color: var(--theme-text-muted, #94a3b8);
}

.vsd-share-actions[b-o5ancm7wor] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.vsd-share-toggle[b-o5ancm7wor],
.vsd-share-remove[b-o5ancm7wor] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vsd-share-toggle:hover:not(:disabled)[b-o5ancm7wor] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-color: rgba(var(--theme-primary-rgb), 0.2);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.vsd-share-remove:hover:not(:disabled)[b-o5ancm7wor] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.vsd-share-toggle:disabled[b-o5ancm7wor],
.vsd-share-remove:disabled[b-o5ancm7wor] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* On narrow dialogs, drop the toggle button label so the row doesn't wrap. */
@media (max-width: 540px) {
    .vsd-share-toggle span[b-o5ancm7wor] {
        display: none;
    }
}

/* ── Dark theme polish ─────────────────────────────────── */
.is-dark .vsd-share-row[b-o5ancm7wor] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .vsd-share-row:hover[b-o5ancm7wor] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .vsd-shares-loading[b-o5ancm7wor],
.is-dark .vsd-shares-empty[b-o5ancm7wor] {
    background: rgba(255, 255, 255, 0.03);
}

.is-dark .vsd-inline-error[b-o5ancm7wor] {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}
/* /Components/WhosOnlinePanel.razor.rz.scp.css */
/* =============================================
   WHO'S ONLINE PANEL
   ============================================= */

.whos-online-panel[b-wb6h3aszt2] {
    --wop-primary: #6366f1;
    --wop-surface: #ffffff;
    --wop-background: #f8fafc;
    --wop-text: #1e293b;
    --wop-text-secondary: #64748b;
    --wop-text-muted: #94a3b8;
    --wop-border: #e2e8f0;
    --wop-hover: #f1f5f9;
    --wop-online: #22c55e;
    --wop-idle: #f59e0b;
    --wop-dnd: #ef4444;
    
    background: var(--wop-surface);
    border-radius: 16px;
    border: 1px solid var(--wop-border);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Dark theme */
.whos-online-panel.theme-space[b-wb6h3aszt2],
.whos-online-panel.theme-winter[b-wb6h3aszt2],
.whos-online-panel.theme-nature[b-wb6h3aszt2],
.whos-online-panel.theme-ocean[b-wb6h3aszt2],
.whos-online-panel.theme-mystic[b-wb6h3aszt2],
.whos-online-panel.theme-tron[b-wb6h3aszt2] {
    --wop-surface: rgba(30, 41, 59, 0.95);
    --wop-background: rgba(15, 23, 42, 0.9);
    --wop-text: #f1f5f9;
    --wop-text-secondary: #cbd5e1;
    --wop-text-muted: #94a3b8;
    --wop-border: rgba(71, 85, 105, 0.5);
    --wop-hover: rgba(51, 65, 85, 0.5);
}

.panel-header[b-wb6h3aszt2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--wop-border);
    background: var(--wop-background);
}

.header-title[b-wb6h3aszt2] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--wop-text);
}

.header-icon[b-wb6h3aszt2] {
    width: 20px;
    height: 20px;
    color: var(--wop-primary);
}

.status-counts[b-wb6h3aszt2] {
    display: flex;
    gap: 12px;
}

.count[b-wb6h3aszt2] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wop-text-secondary);
}

.dot[b-wb6h3aszt2] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.dot.online[b-wb6h3aszt2] {
    background: var(--wop-online);
    box-shadow: 0 0 6px var(--wop-online);
}

.dot.idle[b-wb6h3aszt2] {
    background: var(--wop-idle);
    box-shadow: 0 0 6px var(--wop-idle);
}

.panel-content[b-wb6h3aszt2] {
    padding: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.loading-state[b-wb6h3aszt2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: var(--wop-text-muted);
}

.spinner[b-wb6h3aszt2] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--wop-border);
    border-top-color: var(--wop-primary);
    border-radius: 50%;
    animation: spin-b-wb6h3aszt2 0.8s linear infinite;
}

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

.user-list[b-wb6h3aszt2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-item[b-wb6h3aszt2] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
}

.user-item:hover[b-wb6h3aszt2] {
    background: var(--wop-hover);
}

.avatar-container[b-wb6h3aszt2] {
    position: relative;
    flex-shrink: 0;
}

.avatar[b-wb6h3aszt2] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.avatar.color-1[b-wb6h3aszt2] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.avatar.color-2[b-wb6h3aszt2] { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); }
.avatar.color-3[b-wb6h3aszt2] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.avatar.color-4[b-wb6h3aszt2] { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.avatar.color-5[b-wb6h3aszt2] { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.avatar.color-6[b-wb6h3aszt2] { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }

.status-indicator[b-wb6h3aszt2] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--wop-surface);
}

.status-indicator.online[b-wb6h3aszt2] {
    background: var(--wop-online);
}

.status-indicator.idle[b-wb6h3aszt2] {
    background: var(--wop-idle);
}

.status-indicator.dnd[b-wb6h3aszt2] {
    background: var(--wop-dnd);
}

.status-indicator.offline[b-wb6h3aszt2] {
    background: var(--wop-text-muted);
}

.user-info[b-wb6h3aszt2] {
    flex: 1;
    min-width: 0;
}

.user-name[b-wb6h3aszt2] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wop-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-status[b-wb6h3aszt2] {
    display: block;
    font-size: 0.75rem;
    color: var(--wop-text-muted);
}

.status-message[b-wb6h3aszt2] {
    display: block;
    font-size: 0.6875rem;
    color: var(--wop-text-secondary);
    font-style: italic;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-btn[b-wb6h3aszt2] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--wop-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.15s;
}

.user-item:hover .message-btn[b-wb6h3aszt2] {
    opacity: 1;
}

.message-btn:hover[b-wb6h3aszt2] {
    background: var(--wop-primary);
    color: white;
}

.message-btn svg[b-wb6h3aszt2] {
    width: 16px;
    height: 16px;
}

.empty-state[b-wb6h3aszt2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-icon[b-wb6h3aszt2] {
    width: 48px;
    height: 48px;
    color: var(--wop-text-muted);
    opacity: 0.4;
    margin-bottom: 12px;
}

.empty-state p[b-wb6h3aszt2] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--wop-text-secondary);
}

.empty-hint[b-wb6h3aszt2] {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--wop-text-muted);
}

/* Compact mode for embedding */
.whos-online-panel.compact[b-wb6h3aszt2] {
    border: none;
    box-shadow: none;
    background: transparent;
}

.whos-online-panel.compact .panel-content[b-wb6h3aszt2] {
    padding: 8px;
}

.whos-online-panel.compact .user-item[b-wb6h3aszt2] {
    padding: 8px 10px;
}

.whos-online-panel.compact .avatar[b-wb6h3aszt2] {
    width: 36px;
    height: 36px;
}
/* /Components/Work/RecurringTaskHeatmap.razor.rz.scp.css */
/* RecurringTaskHeatmap - GitHub-style contribution heatmap */

.heatmap-container[b-do22qj5jqn] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    overflow-x: auto;
}

.heatmap-scroll[b-do22qj5jqn] {
    min-width: fit-content;
}

.heatmap-grid[b-do22qj5jqn] {
    display: flex;
    gap: 3px;
}

.heatmap-week[b-do22qj5jqn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.heatmap-day[b-do22qj5jqn] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.heatmap-day:hover[b-do22qj5jqn] {
    transform: scale(1.2);
    outline: 1px solid rgba(255, 255, 255, 0.3);
}

/* Dark theme levels (default) */
.heatmap-level-0[b-do22qj5jqn] {
    background-color: var(--heatmap-level-0, #161b22);
    border: 1px solid var(--heatmap-level-0-border, #21262d);
}

.heatmap-level-1[b-do22qj5jqn] {
    background-color: var(--heatmap-level-1, #0e4429);
}

.heatmap-level-2[b-do22qj5jqn] {
    background-color: var(--heatmap-level-2, #006d32);
}

.heatmap-level-3[b-do22qj5jqn] {
    background-color: var(--heatmap-level-3, #26a641);
}

.heatmap-level-4[b-do22qj5jqn] {
    background-color: var(--heatmap-level-4, #39d353);
}

/* Light theme levels */
.heatmap-light .heatmap-level-0[b-do22qj5jqn] {
    background-color: #ebedf0;
    border: 1px solid #d0d7de;
}

.heatmap-light .heatmap-level-1[b-do22qj5jqn] {
    background-color: #9be9a8;
}

.heatmap-light .heatmap-level-2[b-do22qj5jqn] {
    background-color: #40c463;
}

.heatmap-light .heatmap-level-3[b-do22qj5jqn] {
    background-color: #30a14e;
}

.heatmap-light .heatmap-level-4[b-do22qj5jqn] {
    background-color: #216e39;
}

/* Theme-specific heatmap colors */
.theme-cloud .heatmap-level-0[b-do22qj5jqn] {
    background-color: #ebedf0;
    border-color: #d0d7de;
}

.theme-cloud .heatmap-level-1[b-do22qj5jqn] {
    background-color: #c6e2ff;
}

.theme-cloud .heatmap-level-2[b-do22qj5jqn] {
    background-color: #79b8ff;
}

.theme-cloud .heatmap-level-3[b-do22qj5jqn] {
    background-color: #2188ff;
}

.theme-cloud .heatmap-level-4[b-do22qj5jqn] {
    background-color: #0366d6;
}

.theme-space .heatmap-level-1[b-do22qj5jqn] {
    background-color: #4c1d95;
}

.theme-space .heatmap-level-2[b-do22qj5jqn] {
    background-color: #7c3aed;
}

.theme-space .heatmap-level-3[b-do22qj5jqn] {
    background-color: #a855f7;
}

.theme-space .heatmap-level-4[b-do22qj5jqn] {
    background-color: #c084fc;
}

.theme-winter .heatmap-level-1[b-do22qj5jqn] {
    background-color: #1e3a5f;
}

.theme-winter .heatmap-level-2[b-do22qj5jqn] {
    background-color: #0284c7;
}

.theme-winter .heatmap-level-3[b-do22qj5jqn] {
    background-color: #38bdf8;
}

.theme-winter .heatmap-level-4[b-do22qj5jqn] {
    background-color: #7dd3fc;
}

.theme-nature .heatmap-level-1[b-do22qj5jqn] {
    background-color: #14532d;
}

.theme-nature .heatmap-level-2[b-do22qj5jqn] {
    background-color: #16a34a;
}

.theme-nature .heatmap-level-3[b-do22qj5jqn] {
    background-color: #4ade80;
}

.theme-nature .heatmap-level-4[b-do22qj5jqn] {
    background-color: #86efac;
}

.theme-ocean .heatmap-level-1[b-do22qj5jqn] {
    background-color: #0c4a6e;
}

.theme-ocean .heatmap-level-2[b-do22qj5jqn] {
    background-color: #0891b2;
}

.theme-ocean .heatmap-level-3[b-do22qj5jqn] {
    background-color: #22d3d1;
}

.theme-ocean .heatmap-level-4[b-do22qj5jqn] {
    background-color: #5eead4;
}

/* Month labels */
.heatmap-months[b-do22qj5jqn] {
    display: flex;
    margin-bottom: 8px;
    padding-left: 32px;
}

.heatmap-month-label[b-do22qj5jqn] {
    font-size: 11px;
    color: var(--theme-text-secondary, #8b949e);
    min-width: 45px;
}

/* Weekday labels */
.heatmap-weekdays[b-do22qj5jqn] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: 8px;
    justify-content: space-between;
    height: 88px;
}

.heatmap-weekday-label[b-do22qj5jqn] {
    font-size: 10px;
    color: var(--theme-text-secondary, #8b949e);
    height: 12px;
    display: flex;
    align-items: center;
}

.heatmap-body[b-do22qj5jqn] {
    display: flex;
}

/* Legend */
.heatmap-legend[b-do22qj5jqn] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    justify-content: flex-end;
}

.heatmap-legend-text[b-do22qj5jqn] {
    font-size: 11px;
    color: var(--theme-text-secondary, #8b949e);
    margin: 0 4px;
}

.heatmap-legend-box[b-do22qj5jqn] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* Stats section */
.heatmap-stats[b-do22qj5jqn] {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.heatmap-stat[b-do22qj5jqn] {
    text-align: center;
}

.heatmap-stat-value[b-do22qj5jqn] {
    font-size: 24px;
    font-weight: 700;
    color: var(--theme-accent, #39d353);
}

.heatmap-stat-label[b-do22qj5jqn] {
    font-size: 12px;
    color: var(--theme-text-secondary, #8b949e);
}

/* Title */
.heatmap-title[b-do22qj5jqn] {
    margin-bottom: 16px;
}

.heatmap-title h3[b-do22qj5jqn] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.heatmap-title p[b-do22qj5jqn] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    margin: 0.25rem 0 0;
}

/* Streak icons */
.streak-icon[b-do22qj5jqn] {
    width: 16px;
    height: 16px;
    fill: #f59e0b;
    vertical-align: middle;
}

.streak-active[b-do22qj5jqn] {
    color: #f59e0b;
}

/* Edit hint */
.edit-hint[b-do22qj5jqn] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    font-style: italic;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.edit-hint svg[b-do22qj5jqn] {
    fill: currentColor;
    width: 14px;
    height: 14px;
}
/* /Components/Work/WorkItemActivityHistory.razor.rz.scp.css */
/* WorkItemActivityHistory - Activity timeline */

.work-item-history[b-lulu3c6bf9] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border);
}

.history-title[b-lulu3c6bf9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 1rem;
}

.history-title svg[b-lulu3c6bf9] {
    fill: currentColor;
}

.history-divider[b-lulu3c6bf9] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 0 0 1rem;
}

.timeline[b-lulu3c6bf9] {
    display: flex;
    flex-direction: column;
}

.timeline-item[b-lulu3c6bf9] {
    position: relative;
    padding-left: 40px;
    padding-bottom: 1.5rem;
}

.timeline-item[b-lulu3c6bf9]::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 12px;
    bottom: -12px;
    width: 2px;
    background: var(--theme-border);
}

.timeline-item:last-child[b-lulu3c6bf9]::before {
    display: none;
}

.timeline-item:last-child[b-lulu3c6bf9] {
    padding-bottom: 0;
}

.timeline-dot[b-lulu3c6bf9] {
    position: absolute;
    left: 0;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.timeline-dot svg[b-lulu3c6bf9] {
    width: 14px;
    height: 14px;
    fill: white;
}

.timeline-content[b-lulu3c6bf9] {
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.timeline-title[b-lulu3c6bf9] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.timeline-meta[b-lulu3c6bf9] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.timeline-notes[b-lulu3c6bf9] {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--theme-text-secondary);
}

.empty-state[b-lulu3c6bf9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}

.empty-state svg[b-lulu3c6bf9] {
    fill: currentColor;
    opacity: 0.5;
}

/* Dark theme variants */
.is-dark .work-item-history[b-lulu3c6bf9] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .timeline-content[b-lulu3c6bf9] {
    background: rgba(15, 23, 42, 0.5);
}
/* /Components/Work/WorkItemDetailsPanel.razor.rz.scp.css */
.work-item-details[b-nfi7722lmo] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.details-title[b-nfi7722lmo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 1rem;
}

.details-title svg[b-nfi7722lmo] {
    fill: currentColor;
    opacity: 0.7;
}

.divider[b-nfi7722lmo] {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: 0 0 24px;
}

/* Badges Row - Primary status indicators */
.details-badges-row[b-nfi7722lmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 0;
}

.detail-badge-group[b-nfi7722lmo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Secondary Info Section */
.details-info-section[b-nfi7722lmo] {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

/* Description Section */
.description-section[b-nfi7722lmo] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.description-text[b-nfi7722lmo] {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--theme-text-primary);
    margin: 6px 0 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Screen Recording Section */
.recording-section[b-nfi7722lmo] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.recording-link-row[b-nfi7722lmo] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.details-info-row[b-nfi7722lmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
}

.details-info-row:last-child[b-nfi7722lmo] {
    margin-bottom: 0;
}

.details-dates-row[b-nfi7722lmo] {
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.detail-item[b-nfi7722lmo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-label[b-nfi7722lmo] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary);
    opacity: 0.6;
}

.detail-value[b-nfi7722lmo] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.detail-value svg[b-nfi7722lmo] {
    flex-shrink: 0;
}

.detail-value.overdue[b-nfi7722lmo] {
    color: var(--theme-text-danger);
}

.detail-value.success[b-nfi7722lmo] {
    color: var(--theme-text-success);
}

.detail-link[b-nfi7722lmo] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s ease;
}

.detail-link:hover[b-nfi7722lmo] {
    text-decoration: underline;
    opacity: 0.85;
}

.detail-link svg[b-nfi7722lmo] {
    fill: currentColor;
}

/* Badges - Following ProjectDetail Gold Standard */
.status-chip[b-nfi7722lmo], .priority-chip[b-nfi7722lmo], .category-chip[b-nfi7722lmo], .recurrence-chip[b-nfi7722lmo], .roadmap-chip[b-nfi7722lmo] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
}

.status-chip svg[b-nfi7722lmo], .priority-chip svg[b-nfi7722lmo], .category-chip svg[b-nfi7722lmo], .recurrence-chip svg[b-nfi7722lmo], .roadmap-chip svg[b-nfi7722lmo] {
    fill: currentColor;
}

.status-chip.status-planning[b-nfi7722lmo] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.status-chip.status-open[b-nfi7722lmo] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-chip.status-inprogress[b-nfi7722lmo] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-chip.status-testing[b-nfi7722lmo] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.status-chip.status-scheduled[b-nfi7722lmo] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-chip.status-complete[b-nfi7722lmo] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-chip.status-onhold[b-nfi7722lmo] {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
}

.status-chip.status-cancelled[b-nfi7722lmo] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.priority-chip.priority-high[b-nfi7722lmo] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.priority-chip.priority-medium[b-nfi7722lmo] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.priority-chip.priority-low[b-nfi7722lmo] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.category-chip.business[b-nfi7722lmo] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.category-chip.personal[b-nfi7722lmo] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.recurrence-chip[b-nfi7722lmo] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.roadmap-chip[b-nfi7722lmo] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.overdue-badge[b-nfi7722lmo] {
    margin-left: 0.25rem;
    padding: 0.125rem 0.375rem;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 600;
}

/* Dark theme overrides */
.is-dark .work-item-details[b-nfi7722lmo] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Dark theme section separators */
.is-dark .work-item-details .details-info-section[b-nfi7722lmo] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.is-dark .work-item-details .details-dates-row[b-nfi7722lmo] {
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* Responsive */
@media (max-width: 600px) {
    .work-item-details[b-nfi7722lmo] {
        padding: 20px;
    }
    
    .details-badges-row[b-nfi7722lmo] {
        gap: 16px;
    }
    
    .details-info-row[b-nfi7722lmo] {
        gap: 16px;
    }
}
/* /Components/Work/WorkItemFlags.razor.rz.scp.css */
/* WorkItemFlags - Task flag indicators */

.work-item-flags[b-wcuk9xjcqf] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--theme-border);
}

.flags-title[b-wcuk9xjcqf] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 0.75rem;
}

.flags-divider[b-wcuk9xjcqf] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 0 0 0.75rem;
}

.flags-list[b-wcuk9xjcqf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flag-chip[b-wcuk9xjcqf] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
}

.flag-chip svg[b-wcuk9xjcqf] {
    fill: currentColor;
}

.flag-primary[b-wcuk9xjcqf] {
    background: rgba(59, 130, 246, 0.1); /* a tint, not a surface - kept literal when --theme-bg-primary became a real alias (THEME-TOKENS-2) */
    color: var(--theme-primary-ink, var(--theme-primary));
}

.flag-info[b-wcuk9xjcqf] {
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.flag-default[b-wcuk9xjcqf] {
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
}

/* Dark theme variants */
.is-dark .work-item-flags[b-wcuk9xjcqf] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}
/* /Components/Work/WorkItemHeader.razor.rz.scp.css */
/* ============================================
   WORK ITEM HEADER - Using Theme Variables
   ============================================ */

/* Header Section — Card style matching Account Detail */
.detail-header[b-ose3silzld] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    color: var(--theme-text-primary);
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    padding: 24px 28px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.header-left[b-ose3silzld] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-ose3silzld] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--theme-text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.back-link:hover[b-ose3silzld] {
    color: var(--theme-text-primary);
}

.back-link svg[b-ose3silzld] {
    width: 18px;
    height: 18px;
}

.detail-title[b-ose3silzld] {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--theme-text-primary);
}

.title-icon[b-ose3silzld] {
    width: 28px;
    height: 28px;
    color: var(--theme-accent, var(--theme-primary));
}

.header-actions[b-ose3silzld] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Buttons */
.btn[b-ose3silzld] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.btn svg[b-ose3silzld] {
    width: 18px;
    height: 18px;
}

.btn-secondary[b-ose3silzld] {
    background: var(--theme-secondary);
    color: var(--theme-secondary-text);
    border: 1px solid var(--theme-border);
}

.btn-secondary:hover[b-ose3silzld] {
    background: var(--theme-secondary-hover);
}

/* Status Badges */
.status-badge[b-ose3silzld] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-planning[b-ose3silzld] {
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.status-open[b-ose3silzld] {
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.status-inprogress[b-ose3silzld] {
    background: var(--theme-bg-warning);
    color: var(--theme-text-warning);
}

.status-testing[b-ose3silzld] {
    background: rgba(139, 92, 246, 0.15); /* Purple/Violet */
    color: #8b5cf6;
}

.status-scheduled[b-ose3silzld] {
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.status-complete[b-ose3silzld] {
    background: var(--theme-bg-success);
    color: var(--theme-text-success);
}

.status-onhold[b-ose3silzld] {
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
}

.status-cancelled[b-ose3silzld] {
    background: var(--theme-bg-danger);
    color: var(--theme-text-danger);
}

/* Dark theme overrides for header card */
.is-dark .detail-header[b-ose3silzld] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(12px);
    box-shadow: none;
}

/* Responsive */
@media (max-width: 600px) {
    .detail-header[b-ose3silzld] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    /* MOBILE-AUDIT-1 (2026-10-02): flex-wrap left the status pill + Edit on one row and the
       primary verb orphaned on a second, half-width row (iPhone 16 Pro Max walk). Grid it:
       the pill sits alone on top, then Edit + the primary verb share one full-width row with
       the primary taking the room. */
    .header-actions[b-ose3silzld] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 10px;
        width: 100%;
    }

    .header-actions .status-badge[b-ose3silzld] {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .header-actions .btn[b-ose3silzld] {
        min-height: 44px;
    }

    .detail-title[b-ose3silzld] {
        font-size: 1.25rem;
    }
}
/* /Components/Work/WorkItemQuickActions.razor.rz.scp.css */
/* WorkItemQuickActions - Action buttons for work items */

.work-item-quick-actions[b-bmroz5jdlc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-btn[b-bmroz5jdlc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    width: 100%;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
}

.action-btn svg[b-bmroz5jdlc] {
    fill: currentColor;
    flex-shrink: 0;
}

.btn-outline-primary[b-bmroz5jdlc] {
    color: var(--theme-primary-ink, var(--theme-primary));
    border-color: var(--theme-primary);
    background: transparent;
}

.btn-outline-primary:hover[b-bmroz5jdlc] {
    background: var(--theme-primary);
    color: white;
}

.btn-outline-info[b-bmroz5jdlc] {
    color: var(--theme-text-info);
    border-color: var(--theme-text-info);
    background: transparent;
}

.btn-outline-info:hover[b-bmroz5jdlc] {
    background: var(--theme-text-info);
    color: white;
}

.btn-outline-warning[b-bmroz5jdlc] {
    color: var(--theme-text-warning);
    border-color: var(--theme-text-warning);
    background: transparent;
}

.btn-outline-warning:hover[b-bmroz5jdlc] {
    background: var(--theme-text-warning);
    color: white;
}

.btn-outline-success[b-bmroz5jdlc] {
    color: var(--theme-text-success);
    border-color: var(--theme-text-success);
    background: transparent;
}

.btn-outline-success:hover[b-bmroz5jdlc] {
    background: var(--theme-text-success);
    color: white;
}

.btn-outline-secondary[b-bmroz5jdlc] {
    color: var(--theme-text-secondary);
    border-color: var(--theme-border);
    background: transparent;
}

.btn-outline-secondary:hover[b-bmroz5jdlc] {
    background: var(--theme-secondary);
}

.btn-filled-success[b-bmroz5jdlc] {
    background: var(--theme-text-success);
    color: white;
    border-color: var(--theme-text-success);
}

.btn-filled-success:hover[b-bmroz5jdlc] {
    filter: brightness(1.1);
}

.btn-filled-warning[b-bmroz5jdlc] {
    background: var(--theme-text-warning);
    color: white;
    border-color: var(--theme-text-warning);
}

.btn-filled-warning:hover[b-bmroz5jdlc] {
    filter: brightness(1.1);
}

.info-alert[b-bmroz5jdlc] {
    padding: 0.5rem 0.75rem;
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
    border-radius: 6px;
    font-size: 0.8rem;
    text-align: center;
}
/* /Components/Work/WorkItemStatsSummary.razor.rz.scp.css */
/* ============================================
   WORK ITEM STATS SUMMARY - Following ProjectDetail Gold Standard
   ============================================ */

.work-item-stats[b-sv4exhc1wr] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.stats-title[b-sv4exhc1wr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px 0;
    color: var(--theme-text-primary);
}

.stats-title svg[b-sv4exhc1wr] {
    opacity: 0.7;
}

.stats-divider[b-sv4exhc1wr] {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: 0 0 20px 0;
}

.stats-list[b-sv4exhc1wr] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Base stat card styles */
.stat-card[b-sv4exhc1wr] {
    border-radius: 12px;
    padding: 16px 20px;
    border-left: 4px solid var(--stat-color, #667eea);
    background: rgba(100, 116, 139, 0.05);
    transition: transform 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-card:hover[b-sv4exhc1wr] {
    transform: translateX(4px);
}

.stat-label[b-sv4exhc1wr] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
}

.stat-value[b-sv4exhc1wr] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

/* ============================================
   DARK THEMES
   ============================================ */
.is-dark .work-item-stats[b-sv4exhc1wr] {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.is-dark .work-item-stats .stat-card[b-sv4exhc1wr] {
    background: rgba(255, 255, 255, 0.05);
}
/* /Components/Work/WorkItemSubTasks.razor.rz.scp.css */
/* WorkItemSubTasks - Following ProjectDetail Gold Standard */

.work-item-subtasks[b-p3veye7w90] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.subtasks-header[b-p3veye7w90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.subtasks-title[b-p3veye7w90] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.subtasks-title svg[b-p3veye7w90] {
    fill: currentColor;
    opacity: 0.7;
}

.btn-outline-primary[b-p3veye7w90] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary));
    background: transparent;
    border: 1px solid var(--theme-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover[b-p3veye7w90] {
    background: var(--theme-primary);
    color: var(--theme-btn-text);
}

.btn-outline-primary svg[b-p3veye7w90] {
    fill: currentColor;
}

.divider[b-p3veye7w90] {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: 0 0 20px;
}

.subtasks-list[b-p3veye7w90] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.subtask-card[b-p3veye7w90] {
    background: rgba(100, 116, 139, 0.05);
    border-radius: 8px;
    border-left: 4px solid;
    padding: 12px 16px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.subtask-card:hover[b-p3veye7w90] {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.subtask-content[b-p3veye7w90] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.subtask-info[b-p3veye7w90] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.subtask-header-row[b-p3veye7w90] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.subtask-title[b-p3veye7w90] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.status-chip[b-p3veye7w90],
.priority-chip[b-p3veye7w90] {
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 500;
}

.status-chip.status-planning[b-p3veye7w90] {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.status-chip.status-open[b-p3veye7w90] {
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.status-chip.status-inprogress[b-p3veye7w90] {
    background: var(--theme-bg-warning);
    color: var(--theme-text-warning);
}

.status-chip.status-testing[b-p3veye7w90] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.status-chip.status-scheduled[b-p3veye7w90] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-chip.status-complete[b-p3veye7w90] {
    background: var(--theme-bg-success);
    color: var(--theme-text-success);
}

.status-chip.status-onhold[b-p3veye7w90] {
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
}

.status-chip.status-cancelled[b-p3veye7w90] {
    background: var(--theme-bg-danger);
    color: var(--theme-text-danger);
}

.priority-chip.priority-high[b-p3veye7w90] {
    background: var(--theme-bg-danger);
    color: var(--theme-text-danger);
}

.priority-chip.priority-medium[b-p3veye7w90] {
    background: var(--theme-bg-warning);
    color: var(--theme-text-warning);
}

.priority-chip.priority-low[b-p3veye7w90] {
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.subtask-description[b-p3veye7w90] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.subtask-due[b-p3veye7w90] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.subtask-due svg[b-p3veye7w90] {
    fill: currentColor;
}

.subtask-due.overdue[b-p3veye7w90] {
    color: var(--theme-text-danger);
}

.overdue-badge[b-p3veye7w90] {
    padding: 0.125rem 0.375rem;
    background: var(--theme-bg-danger);
    color: var(--theme-text-danger);
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 500;
    margin-left: 0.25rem;
}

.chevron-icon[b-p3veye7w90] {
    fill: var(--theme-primary);
    flex-shrink: 0;
}

.subtask-actions[b-p3veye7w90] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.subtask-edit-btn[b-p3veye7w90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.subtask-edit-btn:hover[b-p3veye7w90] {
    background: var(--theme-bg-hover, rgba(255, 255, 255, 0.08));
    color: var(--theme-primary-ink, var(--theme-primary));
    border-color: var(--theme-primary);
}

.subtask-edit-btn svg[b-p3veye7w90] {
    fill: currentColor;
}

.empty-state[b-p3veye7w90] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
}

.empty-state svg[b-p3veye7w90] {
    fill: var(--theme-text-secondary);
    opacity: 0.5;
}

.empty-title[b-p3veye7w90] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

/* Dark theme variants */
.is-dark .work-item-subtasks[b-p3veye7w90] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.is-dark .subtask-card[b-p3veye7w90] {
    background: rgba(255, 255, 255, 0.05);
}
/* /Components/Work/WorkItemTimeEntries.razor.rz.scp.css */
/* WorkItemTimeEntries - Following ProjectDetail Gold Standard */

.work-item-time-entries[b-h6bcnmlmlb] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.time-entries-header[b-h6bcnmlmlb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.time-entries-title[b-h6bcnmlmlb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.time-entries-title svg[b-h6bcnmlmlb] {
    fill: currentColor;
    opacity: 0.7;
}

.btn-outline-primary[b-h6bcnmlmlb] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary));
    background: transparent;
    border: 1px solid var(--theme-primary);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline-primary:hover[b-h6bcnmlmlb] {
    background: var(--theme-primary);
    color: var(--theme-btn-text);
}

.btn-outline-primary svg[b-h6bcnmlmlb] {
    fill: currentColor;
}

.divider[b-h6bcnmlmlb] {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: 0 0 20px;
}

.timeline[b-h6bcnmlmlb] {
    display: flex;
    flex-direction: column;
}

.timeline-item[b-h6bcnmlmlb] {
    position: relative;
    padding-left: 40px;
    padding-bottom: 1.5rem;
}

.timeline-item[b-h6bcnmlmlb]::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 12px;
    bottom: -12px;
    width: 2px;
    background: var(--theme-border);
}

.timeline-item:last-child[b-h6bcnmlmlb]::before {
    display: none;
}

.timeline-item:last-child[b-h6bcnmlmlb] {
    padding-bottom: 0;
}

.timeline-dot[b-h6bcnmlmlb] {
    position: absolute;
    left: 0;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-dot svg[b-h6bcnmlmlb] {
    fill: white;
}

.timeline-content[b-h6bcnmlmlb] {
    background: rgba(100, 116, 139, 0.05);
    border-radius: 8px;
    padding: 12px 16px;
}

.entry-header[b-h6bcnmlmlb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.timeline-item.editable .timeline-content[b-h6bcnmlmlb] {
    transition: background 0.15s ease, border-color 0.15s ease;
}

.timeline-item.editable:hover .timeline-content[b-h6bcnmlmlb] {
    background: var(--theme-bg-hover, rgba(255, 255, 255, 0.04));
    border-color: var(--theme-primary);
}

.entry-edit-btn[b-h6bcnmlmlb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.entry-edit-btn:hover[b-h6bcnmlmlb] {
    background: var(--theme-bg-hover, rgba(255, 255, 255, 0.08));
    color: var(--theme-primary-ink, var(--theme-primary));
    border-color: var(--theme-primary);
}

.entry-edit-btn svg[b-h6bcnmlmlb] {
    fill: currentColor;
}

.entry-info[b-h6bcnmlmlb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.entry-description[b-h6bcnmlmlb] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.entry-time[b-h6bcnmlmlb] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.entry-duration[b-h6bcnmlmlb] {
    padding: 0.25rem 0.5rem;
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.entries-count[b-h6bcnmlmlb] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    margin: 0.5rem 0 0;
}

.empty-state[b-h6bcnmlmlb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
}

.empty-state svg[b-h6bcnmlmlb] {
    fill: var(--theme-text-secondary);
    opacity: 0.5;
}

.empty-title[b-h6bcnmlmlb] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

.empty-text[b-h6bcnmlmlb] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* Dark theme variants */
.is-dark .work-item-time-entries[b-h6bcnmlmlb] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.is-dark .timeline-content[b-h6bcnmlmlb] {
    background: rgba(255, 255, 255, 0.05);
}

/* --- Active Time Tracking --- */

.timeline-item.tracking-active[b-h6bcnmlmlb] {
    border-left: 2px solid rgba(239, 68, 68, 0.4);
}

.timeline-item.tracking-active .timeline-content[b-h6bcnmlmlb] {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.timeline-dot.tracking[b-h6bcnmlmlb] {
    background: #ef4444;
}

.tracking-pulse-dot[b-h6bcnmlmlb] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    animation: tracking-pulse-b-h6bcnmlmlb 1.5s ease-in-out infinite;
}

@keyframes tracking-pulse-b-h6bcnmlmlb {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.entry-tracking-badge[b-h6bcnmlmlb] {
    padding: 0.25rem 0.5rem;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    animation: tag-tracking-pulse-b-h6bcnmlmlb 1.5s ease-in-out infinite;
}

@keyframes tag-tracking-pulse-b-h6bcnmlmlb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.is-dark .timeline-item.tracking-active .timeline-content[b-h6bcnmlmlb] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

.is-dark .entry-tracking-badge[b-h6bcnmlmlb] {
    color: #f87171;
}
/* /Pages/Account/BuyCredits.razor.rz.scp.css */
/* ============================================
   BUY CREDITS PAGE
   ============================================ */

.buy-credits-page[b-8ndxh28o75] {
    min-height: calc(100vh - 56px);
    background: var(--theme-page-bg, #f8fafc);
    padding: 24px;
}

.is-dark.buy-credits-page[b-8ndxh28o75] {
    background: var(--theme-page-bg, #0f172a);
}

.page-container[b-8ndxh28o75] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    min-height: auto;
}

/* Page Header */
.page-header[b-8ndxh28o75] {
    margin-bottom: 32px;
}

.header-top[b-8ndxh28o75] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.back-link[b-8ndxh28o75] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}

.back-link:hover[b-8ndxh28o75] {
    color: var(--theme-primary-hover, #4f46e5);
}

.header-balance[b-8ndxh28o75] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.header-balance .balance-label[b-8ndxh28o75] {
    color: var(--theme-text-secondary, #64748b);
}

.header-balance .balance-value[b-8ndxh28o75] {
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .header-balance .balance-label[b-8ndxh28o75] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .header-balance .balance-value[b-8ndxh28o75] {
    color: white;
}

.low-badge[b-8ndxh28o75] {
    padding: 2px 6px;
    background: #fbbf24;
    color: #1e293b;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.page-title[b-8ndxh28o75] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.is-dark .page-title[b-8ndxh28o75] {
    color: white;
}

.page-subtitle[b-8ndxh28o75] {
    margin: 6px 0 0 0;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Loading & Empty States */
.loading-state[b-8ndxh28o75],
.empty-state[b-8ndxh28o75] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
}

.loading-state.verifying[b-8ndxh28o75] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.is-dark .loading-state.verifying[b-8ndxh28o75] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.loading-hint[b-8ndxh28o75] {
    font-size: 0.85rem;
    margin-top: 8px;
    color: #94a3b8;
}

.spinner[b-8ndxh28o75] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-8ndxh28o75 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-8ndxh28o75 {
    to { transform: rotate(360deg); }
}

.empty-hint[b-8ndxh28o75] {
    font-size: 0.9rem;
    margin-top: 4px;
}

/* Packs Grid — fixed 4-column layout */
.packs-grid[b-8ndxh28o75] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

/* Pack Card — flex column for consistent button alignment */
.pack-card[b-8ndxh28o75] {
    position: relative;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 20px 24px;
    text-align: center;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
}

.pack-card:hover[b-8ndxh28o75] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.pack-card.featured[b-8ndxh28o75] {
    border-color: var(--theme-primary, #6366f1);
    background: linear-gradient(180deg, rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06) 0%, white 100%);
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.pack-card.featured:hover[b-8ndxh28o75] {
    box-shadow: 0 12px 36px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
}

.pack-card.selected[b-8ndxh28o75] {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
    transform: translateY(-2px);
}

.is-dark .pack-card[b-8ndxh28o75] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .pack-card:hover[b-8ndxh28o75] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.is-dark .pack-card.featured[b-8ndxh28o75] {
    border-color: var(--theme-primary, #6366f1);
    background: linear-gradient(180deg, rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15) 0%, rgba(30, 41, 59, 0.8) 100%);
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

/* Pack Badge */
.pack-badge[b-8ndxh28o75] {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #8b5cf6) 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.pack-badge.badge-value[b-8ndxh28o75] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.pack-badge.badge-savings[b-8ndxh28o75] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.pack-badge.badge-bonus[b-8ndxh28o75] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Pack Header */
.pack-header[b-8ndxh28o75] {
    margin-bottom: 16px;
}

.pack-name[b-8ndxh28o75] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.is-dark .pack-name[b-8ndxh28o75] {
    color: rgba(255, 255, 255, 0.6);
}

.pack-credits[b-8ndxh28o75] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.credits-amount[b-8ndxh28o75] {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    line-height: 1.1;
}

.bonus-credits[b-8ndxh28o75] {
    font-size: 0.8rem;
    color: #22c55e;
    font-weight: 600;
}

/* Price */
.pack-price[b-8ndxh28o75] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    margin-bottom: 12px;
}

.price-currency[b-8ndxh28o75] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    margin-top: 6px;
}

.price-amount[b-8ndxh28o75] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1;
}

.is-dark .price-amount[b-8ndxh28o75] {
    color: white;
}

/* Meta — flex-grow pushes button to bottom */
.pack-meta[b-8ndxh28o75] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 16px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    flex-grow: 1;
}

.per-credit[b-8ndxh28o75] {
    font-weight: 500;
}

.total-credits[b-8ndxh28o75] {
    opacity: 0.8;
}

/* Savings Tag */
.savings-tag[b-8ndxh28o75] {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 10px;
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.is-dark .savings-tag[b-8ndxh28o75] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

/* Select Button — margin-top:auto pins to card bottom */
.btn-select[b-8ndxh28o75] {
    width: 100%;
    padding: 12px 20px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto;
}

.btn-select:hover:not(:disabled)[b-8ndxh28o75] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.btn-select.btn-featured[b-8ndxh28o75] {
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #8b5cf6) 100%);
    border-color: transparent;
    color: white;
}

.btn-select.btn-featured:hover:not(:disabled)[b-8ndxh28o75] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.4);
}

.pack-card.selected .btn-select[b-8ndxh28o75] {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.is-dark .btn-select[b-8ndxh28o75] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .btn-select:hover:not(:disabled)[b-8ndxh28o75] {
    border-color: var(--theme-primary, #6366f1);
    color: white;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

/* Purchase Section */
.purchase-section[b-8ndxh28o75] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border: 1px solid #e2e8f0;
}

.is-dark .purchase-section[b-8ndxh28o75] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.purchase-summary h3[b-8ndxh28o75] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 12px 0;
}

.is-dark .purchase-summary h3[b-8ndxh28o75] {
    color: white;
}

.summary-row[b-8ndxh28o75] {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    margin-bottom: 8px;
}

.summary-row.bonus span:last-child[b-8ndxh28o75] {
    color: #22c55e;
    font-weight: 600;
}

.summary-total[b-8ndxh28o75] {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
    font-weight: 600;
}

.is-dark .summary-total[b-8ndxh28o75] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.total-price[b-8ndxh28o75] {
    font-size: 1.25rem;
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .total-price[b-8ndxh28o75] {
    color: white;
}

.btn-purchase[b-8ndxh28o75] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-purchase:hover:not(:disabled)[b-8ndxh28o75] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}

.btn-purchase:disabled[b-8ndxh28o75] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spinner[b-8ndxh28o75] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-8ndxh28o75 0.8s linear infinite;
}

.purchase-note[b-8ndxh28o75] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

/* Info Section */
.info-section[b-8ndxh28o75] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.is-dark .info-section[b-8ndxh28o75] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-section h3[b-8ndxh28o75] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 20px 0;
}

.is-dark .info-section h3[b-8ndxh28o75] {
    color: white;
}

.info-grid[b-8ndxh28o75] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.info-item[b-8ndxh28o75] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.is-dark .info-item[b-8ndxh28o75] {
    background: rgba(255, 255, 255, 0.05);
}

.info-icon[b-8ndxh28o75] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    flex-shrink: 0;
}

.info-content[b-8ndxh28o75] {
    display: flex;
    flex-direction: column;
}

.info-content strong[b-8ndxh28o75] {
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
}

.info-content span[b-8ndxh28o75] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8rem;
}

.is-dark .info-content strong[b-8ndxh28o75] {
    color: white;
}

/* Responsive */
@media (max-width: 900px) {
    .packs-grid[b-8ndxh28o75] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .buy-credits-page[b-8ndxh28o75] {
        padding: 16px;
    }

    .purchase-section[b-8ndxh28o75] {
        flex-direction: column;
        text-align: center;
    }

    .summary-row[b-8ndxh28o75],
    .summary-total[b-8ndxh28o75] {
        justify-content: center;
    }

    .info-grid[b-8ndxh28o75] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .packs-grid[b-8ndxh28o75] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Account/InviteFriend.razor.rz.scp.css */
/* ============================================
   SHARE & EARN PAGE - THEME-AWARE
   ============================================ */

.share-earn-page[b-w6pjpo5q89] {
    min-height: calc(100vh - 56px);
    padding: 2rem;
    background: var(--theme-page-bg);
}

.page-container[b-w6pjpo5q89] {
    /* SE-W-1 (2026-07-21): was 700px — roughly half the viewport on a wide
       monitor, and inconsistent with the sibling account pages (MySubscription
       and BuyCredits both run 1200px containers). Matched to 1200. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    min-height: auto;
}

/* ============================================
   HEADER
   ============================================ */
.page-header[b-w6pjpo5q89] {
    /* SE-W-1: a GLOBAL .page-header rule (the app-wide title-left/actions-right
       header convention) sets display:flex + row on this class name, which made
       .header-content shrink-to-fit and park at flex-start — the hero centered
       in the left half of the container. This page's header is a centered hero,
       not a title/actions bar, so pin the display locally. */
    display: block;
    text-align: center;
    margin-bottom: 2rem;
}

.header-content[b-w6pjpo5q89] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.header-icon[b-w6pjpo5q89] {
    font-size: 3rem;
    line-height: 1;
}

.page-header h1[b-w6pjpo5q89] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary);
}

.page-header p[b-w6pjpo5q89] {
    color: var(--theme-text-secondary);
    margin: 0;
    /* SE-W-1: 400px forced the reward numbers to wrap into three cramped
       lines; 640 lets the two-sided offer read in two comfortable lines
       while staying centered under the title. */
    max-width: 640px;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-state[b-w6pjpo5q89] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--theme-text-secondary);
}

.spinner[b-w6pjpo5q89] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-accent);
    border-radius: 50%;
    animation: spin-b-w6pjpo5q89 0.8s linear infinite;
}

.spinner-sm[b-w6pjpo5q89] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-w6pjpo5q89 0.6s linear infinite;
}

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

/* ============================================
   CARDS
   ============================================ */
.card[b-w6pjpo5q89] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--theme-border);
}

.card h2[b-w6pjpo5q89] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--theme-text-primary);
}

.section-hint[b-w6pjpo5q89] {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
}

/* ============================================
   REFERRAL LINK CARD
   ============================================ */
.link-box[b-w6pjpo5q89] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.link-input[b-w6pjpo5q89] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-secondary);
    color: var(--theme-text-primary);
    font-size: 0.9rem;
    font-family: monospace;
}

.btn-copy[b-w6pjpo5q89] {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: var(--theme-primary);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-copy:hover[b-w6pjpo5q89] {
    filter: brightness(1.1);
}

/* ============================================
   SHARE BUTTONS
   ============================================ */
.share-buttons[b-w6pjpo5q89] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.share-btn[b-w6pjpo5q89] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
}

.share-btn svg[b-w6pjpo5q89] {
    width: 20px;
    height: 20px;
}

.share-btn:hover[b-w6pjpo5q89] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.share-btn.twitter[b-w6pjpo5q89] { background: #1DA1F2; }
.share-btn.facebook[b-w6pjpo5q89] { background: #4267B2; }
.share-btn.linkedin[b-w6pjpo5q89] { background: #0A66C2; }
.share-btn.email[b-w6pjpo5q89] { background: var(--theme-accent); }

/* ============================================
   STATS GRID
   ============================================ */
.stats-grid[b-w6pjpo5q89] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-w6pjpo5q89] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
    border: 1px solid var(--theme-border);
}

.stat-card.accent[b-w6pjpo5q89] {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

.stat-card.accent .stat-value[b-w6pjpo5q89],
.stat-card.accent .stat-label[b-w6pjpo5q89] {
    color: white;
}

.stat-value[b-w6pjpo5q89] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-accent);
    line-height: 1;
}

.stat-label[b-w6pjpo5q89] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.5rem;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group[b-w6pjpo5q89] {
    margin-bottom: 1rem;
}

.form-group label[b-w6pjpo5q89] {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--theme-text-primary);
}

.form-group input[b-w6pjpo5q89],
.form-group textarea[b-w6pjpo5q89] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus[b-w6pjpo5q89],
.form-group textarea:focus[b-w6pjpo5q89] {
    outline: none;
    border-color: var(--theme-accent);
}

.form-group input[b-w6pjpo5q89]::placeholder,
.form-group textarea[b-w6pjpo5q89]::placeholder {
    color: var(--theme-text-muted);
}

.form-group textarea[b-w6pjpo5q89] {
    resize: vertical;
    min-height: 80px;
}

.btn-primary[b-w6pjpo5q89] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 14px 24px;
    border: none;
    border-radius: 10px;
    background: var(--theme-primary);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary:hover:not(:disabled)[b-w6pjpo5q89] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-w6pjpo5q89] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   GENERATED LINK BOX
   ============================================ */
.generated-link-box[b-w6pjpo5q89] {
    margin-top: 1.25rem;
    padding: 1rem;
    background: var(--theme-secondary);
    border-radius: 10px;
}

.generated-link-box label[b-w6pjpo5q89] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 0.5rem;
}

.link-row[b-w6pjpo5q89] {
    display: flex;
    gap: 0.5rem;
}

.link-row input[b-w6pjpo5q89] {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.85rem;
    font-family: monospace;
}

.btn-copy-sm[b-w6pjpo5q89] {
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: var(--theme-accent);
    color: white;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy-sm:hover[b-w6pjpo5q89] {
    filter: brightness(1.1);
}

/* ============================================
   REWARDS CARD
   ============================================ */
.rewards-list[b-w6pjpo5q89] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reward-item[b-w6pjpo5q89] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--theme-secondary);
    border-radius: 10px;
}

.reward-icon[b-w6pjpo5q89] {
    font-size: 1.5rem;
    line-height: 1;
}

.reward-info[b-w6pjpo5q89] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reward-title[b-w6pjpo5q89] {
    font-weight: 500;
    color: var(--theme-text-primary);
}

.reward-value[b-w6pjpo5q89] {
    font-weight: 600;
    color: var(--theme-accent);
}

/* ============================================
   BACK LINK
   ============================================ */
.back-link[b-w6pjpo5q89] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--theme-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.back-link:hover[b-w6pjpo5q89] {
    color: var(--theme-text-primary);
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.theme-space .share-btn.email[b-w6pjpo5q89],
.theme-winter .share-btn.email[b-w6pjpo5q89],
.theme-nature .share-btn.email[b-w6pjpo5q89],
.theme-ocean .share-btn.email[b-w6pjpo5q89],
.theme-mystic .share-btn.email[b-w6pjpo5q89],
.theme-tron .share-btn.email[b-w6pjpo5q89] {
    background: var(--theme-primary);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .share-earn-page[b-w6pjpo5q89] {
        padding: 1rem;
    }

    .stats-grid[b-w6pjpo5q89] {
        grid-template-columns: 1fr;
    }

    .link-box[b-w6pjpo5q89] {
        flex-direction: column;
    }

    .btn-copy[b-w6pjpo5q89] {
        width: 100%;
    }

    .reward-info[b-w6pjpo5q89] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}
/* /Pages/Account/ManageAccount.razor.rz.scp.css */
/* ============================================
   MANAGE ACCOUNT PAGE - Scoped CSS
   ============================================ */

.manage-account-page[b-5qgx9qyrmm] {
    min-height: calc(100vh - 56px);
    padding: 24px;
}

/* Theme backgrounds */
.manage-account-page.theme-cloud[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #fdf4ff 100%);
}

.manage-account-page.theme-space[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #0f0a1e 0%, #1a0a2e 50%, #0f172a 100%);
}

.manage-account-page.theme-winter[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e3a8a 50%, #1e1b4b 100%);
}

.manage-account-page.theme-nature[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #365314 100%);
}

.manage-account-page.theme-ocean[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0f766e 100%);
}

.manage-account-page.theme-mystic[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #4c1d95 100%);
}

.manage-account-page.theme-tron[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #0a0a0a 0%, #171717 50%, #0a0a0a 100%);
}

.manage-account-container[b-5qgx9qyrmm] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Page Header — the standalone title card was removed 2026-04-22. The
   user banner below now carries the page identity; "Back to Home" lives
   inside it at top-right via .banner-back-btn. */

/* User Banner */
.user-banner[b-5qgx9qyrmm] {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d4a6f 100%);
    color: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    overflow: hidden;
}

.banner-content[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    z-index: 1;
}

.avatar-large[b-5qgx9qyrmm] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.user-info h2[b-5qgx9qyrmm] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.info-badges[b-5qgx9qyrmm] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.info-badge[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.info-badge svg[b-5qgx9qyrmm] {
    width: 16px;
    height: 16px;
}

.last-login[b-5qgx9qyrmm] {
    font-size: 0.85rem;
    opacity: 0.9;
    margin: 0;
}

/* Back-to-home button floats to the banner's right edge. Styled to read as
   a translucent pill against the dark banner gradient (matches .info-badge
   visual language). margin-left: auto pushes it past the avatar+info block. */
.banner-back-btn[b-5qgx9qyrmm] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

.banner-back-btn:hover[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    text-decoration: none;
    transform: translateX(-2px);
}

.banner-back-btn svg[b-5qgx9qyrmm] {
    flex-shrink: 0;
}

/* Tabs */
.tabs-container[b-5qgx9qyrmm] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.tabs-header[b-5qgx9qyrmm] {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    padding: 0 16px;
}

.tab-btn[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-5qgx9qyrmm] {
    color: #6366f1;
    background: #f8fafc;
}

.tab-btn.active[b-5qgx9qyrmm] {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

.tab-content[b-5qgx9qyrmm] {
    padding: 32px;
}

.tab-title[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 24px 0;
}

.tab-title svg[b-5qgx9qyrmm] {
    color: #6366f1;
}

/* Forms */
.form-grid[b-5qgx9qyrmm] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.form-group[b-5qgx9qyrmm] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width[b-5qgx9qyrmm] {
    grid-column: 1 / -1;
}

.form-label[b-5qgx9qyrmm] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
}

.form-input-wrapper[b-5qgx9qyrmm] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-5qgx9qyrmm] {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
}

.form-input[b-5qgx9qyrmm], .form-select[b-5qgx9qyrmm] {
    width: 100%;
    padding: 12px 14px 12px 44px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: #f8fafc;
}

.form-input:focus[b-5qgx9qyrmm], .form-select:focus[b-5qgx9qyrmm] {
    outline: none;
    border-color: #6366f1;
    background: white;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-input[disabled][b-5qgx9qyrmm] {
    opacity: 0.7;
    cursor: not-allowed;
    background: #f1f5f9;
}

.helper-text[b-5qgx9qyrmm] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

/* Settings Cards
   Restructured 2026-04-22: went from 2-column grid to a stacked single column
   of condensed full-width cards. Each card uses a horizontal layout — identity
   (title + body) on the left, actions on the right — collapsing to a column
   only when the card body is rich enough to need it (2FA). This removes the
   dead-space problem that came from mismatched card heights in the old grid. */
.security-grid[b-5qgx9qyrmm] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-card[b-5qgx9qyrmm] {
    background: white;
    border-radius: 12px;
    padding: 14px 18px;
    border-left: 4px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.settings-card:hover[b-5qgx9qyrmm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* 2FA card's left border reflects PROTECTION STATE (2026-04-22).
   Previously hard-coded to red, which implied a problem even when 2FA was
   working correctly. Now: green when protected, amber warning when the user
   has 2FA disabled. Fallback red keeps any unexpected third state legible.
   Compound selectors ensure state modifiers win over the base color. */
.settings-card-security[b-5qgx9qyrmm] { border-left-color: #f44336; }
.settings-card-security.is-protected[b-5qgx9qyrmm] { border-left-color: #16a34a; }
.settings-card-security.is-unprotected[b-5qgx9qyrmm] { border-left-color: #f59e0b; }
/* Personal Data border neutralized 2026-04-22. Previously amber (#ff9800), which
   read as a warning state even though "download or delete your data" is a
   neutral utility action. Semantic severity colors are now reserved for the 2FA
   card's state-based border. Slate (#64748b) matches the icon inside the card. */
.settings-card-data[b-5qgx9qyrmm] { border-left-color: #64748b; }
/* .settings-card-preferences dropped 2026-04-22 — the only card using it
   (Account Information) was removed; "Member since" is now inlined in the
   banner's last-login row. Restore this rule if a new preferences-oriented
   card lands here. */

/* Left side: title + body stacked. Takes remaining horizontal space so the
   actions can hug the right edge. */
.card-header[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.card-header h3[b-5qgx9qyrmm] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.card-content[b-5qgx9qyrmm] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.card-content p[b-5qgx9qyrmm] {
    margin: 0;
    font-size: 0.875rem;
}

/* Actions row — sits to the right of the card body. No more top border or
   reserved padding since we're no longer in a stacked footer layout. */
.card-actions[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-shrink: 0;
    border: 0;
    padding: 0;
}

/* The 2FA card has enough body content (status line + Email 2FA subsection +
   occasional warning alert) that keeping it single-row gets cramped. Stack
   this one specifically. */
.settings-card-security[b-5qgx9qyrmm] {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.settings-card-security .card-actions[b-5qgx9qyrmm] {
    margin-left: 0;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    justify-content: space-between;
}

/* Small pill used in the 2FA card header to replace the big green/red
   status sentence. Compact, inline, lives right next to the title. */
.status-pill[b-5qgx9qyrmm] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
}

.status-pill-on[b-5qgx9qyrmm] {
    background: #dcfce7;
    color: #15803d;
}

.status-pill-off[b-5qgx9qyrmm] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Banner meta separator — small translucent dot between "Last login" and
   "Member since" in the user-banner's meta row. Rules for the removed
   Security → Account Information card (.account-meta-row, .meta-dot) were
   dropped 2026-04-22 along with the card itself. */
.banner-meta-sep[b-5qgx9qyrmm] {
    opacity: 0.55;
    padding: 0 2px;
}

/* Notifications */
.notification-item[b-5qgx9qyrmm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 16px;
}

.notification-content h4[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.notification-content svg[b-5qgx9qyrmm] {
    color: #6366f1;
}

.notification-content p[b-5qgx9qyrmm] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    max-width: 600px;
}

/* DP-SYNC-3 (2026-05-20): discoverability link under the Daily Progress Report toggle —
   tells users where to actually configure delivery time / content / voice. Pattern is reusable
   for any other notification item that has a settings page elsewhere. */
.notification-content p.notification-meta[b-5qgx9qyrmm] {
    margin-top: 6px;
    font-size: 0.85rem;
}

.notification-meta-link[b-5qgx9qyrmm] {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

.notification-meta-link:hover[b-5qgx9qyrmm] {
    text-decoration: underline;
}

/* Quick Actions */
.quick-actions[b-5qgx9qyrmm] {
    background: white;
    border-radius: 16px;
    padding: 16px 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* .quick-actions h4 + .divider-vertical rules dropped 2026-04-22 along with the
   "Quick Actions:" label and vertical divider in the markup. The footer is now a
   self-describing button row. */

/* Alerts */
.alert[b-5qgx9qyrmm] {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.alert-content[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-success[b-5qgx9qyrmm] {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-warning[b-5qgx9qyrmm] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info[b-5qgx9qyrmm] {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Switches */
.switch-label[b-5qgx9qyrmm] {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.switch-label input[b-5qgx9qyrmm] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-5qgx9qyrmm] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .4s;
    border-radius: 24px;
}

.slider[b-5qgx9qyrmm]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider[b-5qgx9qyrmm] {
    background-color: #6366f1;
}

input:checked + .slider[b-5qgx9qyrmm]:before {
    transform: translateX(24px);
}

/* Quick Action Links */
.btn-icon[b-5qgx9qyrmm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    /* Keep two-word labels ("My Subscription", "Help Desk", "Sign Out") on a
       single line. Without this the parent quick-actions flex row shrinks the
       buttons to their min-content width when space is tight and wraps the
       text between words (observed: "Sign Out" → "Sign" / "Out"). */
    white-space: nowrap;
}

.btn-icon:hover[b-5qgx9qyrmm] {
    color: #6366f1;
}

.btn-icon svg[b-5qgx9qyrmm] {
    width: 18px;
    height: 18px;
}

.btn-icon-danger[b-5qgx9qyrmm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    background: transparent;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    /* See .btn-icon — same rationale. The Sign Out button in particular sits
       after a flex: 1 spacer, so it takes the full squeeze when the row is
       tight. */
    white-space: nowrap;
}

.btn-icon-danger:hover[b-5qgx9qyrmm] {
    color: #dc2626;
}

/* Utilities */
.text-success[b-5qgx9qyrmm] { color: #10b981; }
.text-secondary[b-5qgx9qyrmm] { color: #64748b; }
.spacer[b-5qgx9qyrmm] { flex: 1; }

/* Dark Theme Overrides.
   PRO-DARK-2 (2026-07-21): migrated from :is(six-theme) lists (Slate was missing)
   to the `is-dark` marker class. Never enumerate theme classes in new CSS.
   Per-theme .tab-btn.active accent rules below are intentional (each dark theme
   brightens its own accent); the page-background gradients at the top of this
   file are also intentional per-theme art. */
.is-dark .tabs-container[b-5qgx9qyrmm],
.is-dark .settings-card[b-5qgx9qyrmm],
.is-dark .quick-actions[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .card-header h3[b-5qgx9qyrmm],
.is-dark .tab-title[b-5qgx9qyrmm],
.is-dark .notification-content h4[b-5qgx9qyrmm] {
    color: #f1f5f9;
}

.is-dark .form-label[b-5qgx9qyrmm] {
    color: #cbd5e1;
}

.is-dark .form-input[b-5qgx9qyrmm],
.is-dark .form-select[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

.is-dark .tabs-header[b-5qgx9qyrmm] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.is-dark .tab-btn[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .tab-btn:hover[b-5qgx9qyrmm] {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.05);
}

/* PRO-DARK-2: Slate keeps the base indigo hue, brightened one step for dark
   legibility (every dark theme brightens its accent here). */
.theme-executivedark .tab-btn.active[b-5qgx9qyrmm] {
    color: #818cf8;
    border-bottom-color: #818cf8;
}

.theme-space .tab-btn.active[b-5qgx9qyrmm] {
    color: #a855f7;
    border-bottom-color: #a855f7;
}

.theme-winter .tab-btn.active[b-5qgx9qyrmm] {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}

.theme-nature .tab-btn.active[b-5qgx9qyrmm] {
    color: #4ade80;
    border-bottom-color: #4ade80;
}

.theme-ocean .tab-btn.active[b-5qgx9qyrmm] {
    color: #22d3d1;
    border-bottom-color: #22d3d1;
}

.theme-mystic .tab-btn.active[b-5qgx9qyrmm] {
    color: #e879f9;
    border-bottom-color: #e879f9;
}

.theme-tron .tab-btn.active[b-5qgx9qyrmm] {
    color: #00ffff;
    border-bottom-color: #00ffff;
}

.is-dark .notification-item[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .notification-content p[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .helper-text[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .text-secondary[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .alert[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.is-dark .card-actions[b-5qgx9qyrmm] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.is-dark .card-content p[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .btn-icon[b-5qgx9qyrmm] {
    color: #cbd5e1;
}

.is-dark .btn-icon:hover[b-5qgx9qyrmm] {
    color: #a78bfa;
}

/* Responsive */
@media (max-width: 900px) {
    .banner-content[b-5qgx9qyrmm] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    /* When the banner stacks, the back button drops below avatar+info
       and spans the width so it remains tappable. */
    .banner-back-btn[b-5qgx9qyrmm] {
        margin-left: 0;
        align-self: stretch;
        justify-content: center;
    }

    .form-grid[b-5qgx9qyrmm] {
        grid-template-columns: 1fr;
    }

    /* At narrow widths the inline single-row cards wrap naturally thanks to
       flex-wrap: wrap; pushing card-actions to its own line. Stack the card
       body vertically too so title + description sit above the button. */
    .settings-card:not(.settings-card-security)[b-5qgx9qyrmm] {
        align-items: flex-start;
    }

    .settings-card:not(.settings-card-security) .card-actions[b-5qgx9qyrmm] {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .manage-account-page[b-5qgx9qyrmm] {
        padding: 16px;
    }

    .tabs-header[b-5qgx9qyrmm] {
        padding: 0 8px;
    }
    
    .tab-btn[b-5qgx9qyrmm] {
        padding: 16px;
        font-size: 0.9rem;
    }
    
    .tab-content[b-5qgx9qyrmm] {
        padding: 20px;
    }
    
    .quick-actions[b-5qgx9qyrmm] {
        flex-direction: column;
        align-items: stretch;
    }
    /* .divider-vertical mobile override dropped 2026-04-22 — the element itself
       was removed along with the "Quick Actions:" heading. */
}

/* Share & Earn tab styles were removed 2026-04-22 along with the tab itself.
   InviteFriend.razor owns the referral UI and its own scoped styles. */

/* ============================================
   APPEARANCE TAB
   ============================================ */

.appearance-section[b-5qgx9qyrmm] {
    margin-bottom: 2rem;
}

.appearance-section-title[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 1rem;
}

.appearance-helper[b-5qgx9qyrmm] {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.theme-count-badge[b-5qgx9qyrmm] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 10px;
    border-radius: 12px;
}

/* Theme Grid
   Locked to 4 columns so the 8 themes render as a symmetric 4x2 grid.
   Previously auto-fill/minmax(140px, 1fr), which at wide viewports packed
   7 themes into row one and left Tron stranded on row two looking like a
   forgotten card. Below 720px we drop to 2 columns so the cards don't
   squeeze to unreadable widths on narrow windows. */
.theme-grid[b-5qgx9qyrmm] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 1rem;
}

@media (max-width: 720px) {
    .theme-grid[b-5qgx9qyrmm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* AVATAR-SPLIT-1 (2026-08-17): the avatar tiles are PREVIEW-ONLY — the mark is the
   label — so they need their own geometry. Reusing .theme-card-info left-packed a lone
   mark inside a wide row built for a colour swatch PLUS a name, leaving most of the tile
   empty. These are square, the mark is centred, and the tick floats in a corner instead
   of shouldering the mark sideways. They still borrow .theme-card for border/hover/
   selected so both pickers read as one system (and inherit its dark-theme rules). */
/* YOUR-AI-1: .avatar-grid / .avatar-card rules moved to Components/Assistant/SleevePicker.razor.css */

.theme-card[b-5qgx9qyrmm] {
    display: flex;
    flex-direction: column;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.theme-card:hover[b-5qgx9qyrmm] {
    border-color: #94a3b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-card.selected[b-5qgx9qyrmm] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.theme-card.locked[b-5qgx9qyrmm] {
    opacity: 0.55;
    cursor: not-allowed;
}

.theme-card.locked:hover[b-5qgx9qyrmm] {
    transform: none;
    box-shadow: none;
}

.theme-card-preview[b-5qgx9qyrmm] {
    height: 48px;
    width: 100%;
}

.theme-card-info[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
}

.theme-card-icon[b-5qgx9qyrmm] {
    font-size: 1rem;
}

.theme-card-name[b-5qgx9qyrmm] {
    flex: 1;
}

.theme-lock[b-5qgx9qyrmm] {
    font-size: 0.7rem;
}

.theme-active-badge[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
}

.upgrade-link[b-5qgx9qyrmm] {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
    font-weight: 500;
}

.upgrade-link:hover[b-5qgx9qyrmm] {
    text-decoration: underline;
}

/* Intensity Controls */
.intensity-control[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.intensity-icon[b-5qgx9qyrmm] {
    font-size: 1.2rem;
}

.intensity-range[b-5qgx9qyrmm] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    outline: none;
}

.intensity-range[b-5qgx9qyrmm]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.intensity-range[b-5qgx9qyrmm]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.intensity-presets[b-5qgx9qyrmm] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.intensity-preset[b-5qgx9qyrmm] {
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.intensity-preset:hover[b-5qgx9qyrmm] {
    border-color: #94a3b8;
    background: #f8fafc;
}

.intensity-preset.active[b-5qgx9qyrmm] {
    background: var(--theme-primary, #6366f1);
    color: white;
    border-color: var(--theme-primary, #6366f1);
}

.intensity-value-badge[b-5qgx9qyrmm] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: rgba(99, 102, 241, 0.1);
    padding: 2px 10px;
    border-radius: 12px;
}

/* Dark theme overrides for Appearance tab */
.is-dark .appearance-section-title[b-5qgx9qyrmm] {
    color: #f1f5f9;
}

.is-dark .appearance-helper[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .theme-count-badge[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.is-dark .theme-card[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .theme-card:hover[b-5qgx9qyrmm] {
    border-color: rgba(255, 255, 255, 0.25);
}

.is-dark .theme-card-info[b-5qgx9qyrmm] {
    color: #cbd5e1;
}

.is-dark .intensity-range[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.15);
}

.is-dark .intensity-preset[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

.is-dark .intensity-preset:hover[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .intensity-value-badge[b-5qgx9qyrmm] {
    background: rgba(99, 102, 241, 0.2);
}

/* Personalization tab — condensation pass (2026-04-22)
   Supports the polished Personalization layout that dropped redundant
   wrapper labels and the header info banner. Rules here cover:
     - Inline currency preview ("Preview: +5 Aura gained!")
     - Richer empty state shown when no customizable terms exist
       (most often Professional Mode)
     - Footer-level "Revert all to defaults" button to mirror the
       header button without requiring scroll-up on long term lists.
   Each rule has a matching dark-theme override grouped below. */

.currency-preview-hint[b-5qgx9qyrmm] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0.5rem 0 0 0;
    font-style: italic;
}

.terms-empty-state[b-5qgx9qyrmm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 20px;
    margin-top: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    color: #64748b;
    text-align: center;
}

.terms-empty-state svg[b-5qgx9qyrmm] {
    color: #94a3b8;
    opacity: 0.85;
}

.terms-empty-title[b-5qgx9qyrmm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.terms-empty-body[b-5qgx9qyrmm] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
    max-width: 420px;
}

.terms-footer-actions[b-5qgx9qyrmm] {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Dark-theme overrides: Space, Winter, Nature, Ocean, Mystic, Tron all
   use the same translucent-on-dark surface treatment. Executive (light)
   and Cloud (light) use the defaults above. */
.is-dark .currency-preview-hint[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .terms-empty-state[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

.is-dark .terms-empty-state svg[b-5qgx9qyrmm] {
    color: #cbd5e1;
}

.is-dark .terms-empty-title[b-5qgx9qyrmm] {
    color: #e2e8f0;
}

.is-dark .terms-empty-body[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .terms-footer-actions[b-5qgx9qyrmm] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* =======================================================================
   Terminology preset chip picker — sits above the Your Terms list.
   Layout = label+helper stacked on top, then a flex-wrap row of chips.
   Active chip uses the theme primary accent via a box-shadow ring so
   the "which preset am I on" read is obvious without relying on color
   alone (survives in all 8 themes).
   ======================================================================= */
.preset-picker[b-5qgx9qyrmm] {
    margin-top: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.preset-picker-header[b-5qgx9qyrmm] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.preset-picker-label[b-5qgx9qyrmm] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.preset-picker-helper[b-5qgx9qyrmm] {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
}

.preset-chip-row[b-5qgx9qyrmm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.preset-chip[b-5qgx9qyrmm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.preset-chip:hover:not(:disabled)[b-5qgx9qyrmm] {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.preset-chip:disabled[b-5qgx9qyrmm] {
    opacity: 0.55;
    cursor: not-allowed;
}

.preset-chip.is-active[b-5qgx9qyrmm] {
    /* Active state = accent ring + solid-tinted background. Using a ring instead
       of changing the text color keeps legibility unchanged across the 8 themes. */
    border-color: var(--primary-color, #6366f1);
    background: rgba(99, 102, 241, 0.08);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
    color: #1e293b;
}

.preset-chip-name[b-5qgx9qyrmm] {
    white-space: nowrap;
}

.preset-chip-badge[b-5qgx9qyrmm] {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: var(--primary-color, #6366f1);
    border-radius: 999px;
}

/* Custom (user-saved) chip + delete "×" rendered as siblings in a wrapper
   so they read as one chip without nesting buttons (invalid HTML). */
.preset-chip-wrapper[b-5qgx9qyrmm] {
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.preset-chip-wrapper:hover[b-5qgx9qyrmm] {
    border-color: #94a3b8;
}

.preset-chip-wrapper.is-active[b-5qgx9qyrmm] {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
    background: rgba(99, 102, 241, 0.08);
}

.preset-chip-wrapper .preset-chip.is-custom[b-5qgx9qyrmm] {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding-right: 8px;
}

.preset-chip-wrapper .preset-chip.is-custom:hover:not(:disabled)[b-5qgx9qyrmm] {
    background: rgba(148, 163, 184, 0.12);
}

.preset-chip-delete[b-5qgx9qyrmm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 0 8px;
    font-size: 1rem;
    line-height: 1;
    color: #64748b;
    background: transparent;
    border: none;
    border-left: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.preset-chip-delete:hover:not(:disabled)[b-5qgx9qyrmm] {
    color: #dc2626;
    background: rgba(220, 38, 38, 0.08);
}

.preset-chip-delete:disabled[b-5qgx9qyrmm] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* "+ Save current" chip — dashed border reads as "add new" and distinguishes
   it from the apply-able chips to its left. */
.preset-chip-save[b-5qgx9qyrmm] {
    border-style: dashed;
    color: #475569;
    background: transparent;
}

.preset-chip-save:hover:not(:disabled)[b-5qgx9qyrmm] {
    background: rgba(148, 163, 184, 0.12);
    border-color: #64748b;
    color: #1e293b;
}

/* Inline name-your-preset form. Replaces the "+ Save current" chip while active. */
.preset-save-inline[b-5qgx9qyrmm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px;
}

.preset-save-input[b-5qgx9qyrmm] {
    width: 180px;
    padding: 6px 10px;
    font-size: 0.82rem;
    /* Keep vertical rhythm with adjacent chips (~30px tall). */
    height: 32px;
}

.preset-save-error[b-5qgx9qyrmm] {
    margin: 8px 2px 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: #dc2626;
}

/* =======================================================================
   Dark-theme overrides — Space / Winter / Nature / Ocean / Mystic / Tron.
   Executive (light) + Cloud (light) use the defaults above.
   ======================================================================= */
.is-dark .preset-picker[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}

.is-dark .preset-picker-label[b-5qgx9qyrmm] {
    color: #e2e8f0;
}

.is-dark .preset-picker-helper[b-5qgx9qyrmm] {
    color: #94a3b8;
}

.is-dark .preset-chip[b-5qgx9qyrmm] {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .preset-chip:hover:not(:disabled)[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
}

.is-dark .preset-chip.is-active[b-5qgx9qyrmm] {
    color: #ffffff;
    background: rgba(99, 102, 241, 0.22);
    border-color: var(--primary-color, #818cf8);
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.28);
}

.is-dark .preset-chip-wrapper[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .preset-chip-wrapper:hover[b-5qgx9qyrmm] {
    border-color: rgba(255, 255, 255, 0.28);
}

.is-dark .preset-chip-wrapper.is-active[b-5qgx9qyrmm] {
    background: rgba(99, 102, 241, 0.22);
    border-color: var(--primary-color, #818cf8);
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.28);
}

.is-dark .preset-chip-wrapper .preset-chip.is-custom:hover:not(:disabled)[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .preset-chip-delete[b-5qgx9qyrmm] {
    color: #94a3b8;
    border-left-color: rgba(255, 255, 255, 0.12);
}

.is-dark .preset-chip-delete:hover:not(:disabled)[b-5qgx9qyrmm] {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.18);
}

.is-dark .preset-chip-save[b-5qgx9qyrmm] {
    color: #cbd5e1;
}

.is-dark .preset-chip-save:hover:not(:disabled)[b-5qgx9qyrmm] {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
}

.is-dark .preset-save-error[b-5qgx9qyrmm] {
    color: #fca5a5;
}


/* ===================================================================
   SSO-2 (2026-08-04): Connected Accounts card (Security tab).
   One row per linked provider: name + mark on the left, Disconnect on
   the right. Mirrors the settings-card rhythm rather than introducing
   a new list pattern. Dark themes handled via .is-dark per the Slate
   migration — do NOT enumerate theme names here.
   =================================================================== */
.connected-account-list[b-5qgx9qyrmm] {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.connected-account-row[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.connected-account-name[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: #1e293b;
    font-size: 0.925rem;
}

.connected-account-name svg[b-5qgx9qyrmm] {
    flex-shrink: 0;
}

.connected-account-warning[b-5qgx9qyrmm] {
    margin: 0.75rem 0 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: #b45309;
}

.connected-account-warning a[b-5qgx9qyrmm] {
    color: #b45309;
    font-weight: 600;
    text-decoration: underline;
}

.is-dark .connected-account-row[b-5qgx9qyrmm] {
    border-color: rgba(148, 163, 184, 0.25);
    background: rgba(148, 163, 184, 0.08);
}

.is-dark .connected-account-name[b-5qgx9qyrmm] {
    color: #e2e8f0;
}

.is-dark .connected-account-warning[b-5qgx9qyrmm],
.is-dark .connected-account-warning a[b-5qgx9qyrmm] {
    color: #fbbf24;
}

/* SSO-QA-1 (2026-08-04): a disabled .nts-btn rendered IDENTICALLY to an enabled
   one -- during the Connected Accounts QA the guarded Disconnect button looked
   fully clickable and only the warning text below hinted otherwise. The attribute
   was doing its job; the paint was not. No pointer-events:none on purpose: the
   title tooltip ("Set a password first...") should still show on hover. */
.nts-btn[disabled][b-5qgx9qyrmm],
.nts-btn:disabled[b-5qgx9qyrmm] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* VOICE-SETTING-1 (2026-08-21): assistant voice picker on the Appearance tab. */
/* YOUR-AI-1: .voice-select* rules moved to Components/Assistant/VoicePicker.razor.css */

/* TEXT-SIZE-1 (2026-10-06) - the four-step text scale control under Themes. */
.text-size-row[b-5qgx9qyrmm] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.text-size-btn[b-5qgx9qyrmm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 84px;
    padding: 12px 14px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-surface, white);
    color: var(--theme-text-primary, #1e293b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.text-size-btn:hover[b-5qgx9qyrmm] {
    border-color: var(--theme-text-muted, #94a3b8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.text-size-btn.selected[b-5qgx9qyrmm] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

/* The sample scales with the option (inline font-size); the label stays a fixed size. */
.text-size-sample[b-5qgx9qyrmm] {
    font-weight: 700;
    line-height: 1;
}

.text-size-label[b-5qgx9qyrmm] {
    font-size: 12px;
    color: var(--theme-text-secondary, #64748b);
}

/* YOUR-AI-1 (2026-10-18): the pointer that replaced the Sleeve + Voice pickers (now on /assistant). */
.appearance-pointer[b-5qgx9qyrmm] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 1.25rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-surface, #ffffff);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.appearance-pointer:hover[b-5qgx9qyrmm] {
    border-color: var(--theme-primary, #6366f1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.appearance-pointer-mark[b-5qgx9qyrmm] {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex: 0 0 auto;
    color: var(--theme-fab-robot, #334155);
}
.appearance-pointer-egg[b-5qgx9qyrmm] { font-size: 1.6rem; line-height: 1; }
.appearance-pointer-text[b-5qgx9qyrmm] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appearance-pointer-text strong[b-5qgx9qyrmm] { color: var(--theme-text-primary, inherit); }
.appearance-pointer-text span[b-5qgx9qyrmm] { font-size: 0.9rem; color: var(--theme-text-secondary, #64748b); }
.appearance-pointer-go[b-5qgx9qyrmm] { margin-left: auto; font-size: 1.2rem; color: var(--theme-primary-ink, var(--theme-primary, #6366f1)); }

/* MENU-TRIM-1 (2026-10-20): the Share & Earn card at the end of the Profile tab - the settings-card
   shell as a link, primary edge, text + chevron. */
.settings-card-invite[b-5qgx9qyrmm] {
    margin-top: 18px;
    border-left-color: var(--theme-primary, #6366f1);
    color: inherit;
    text-decoration: none;
    gap: 14px;
}

.settings-card-invite svg[b-5qgx9qyrmm] {
    flex: none;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.settings-card-invite-text[b-5qgx9qyrmm] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-card-invite-text strong[b-5qgx9qyrmm] {
    font-size: 0.95rem;
}

.settings-card-invite-text span[b-5qgx9qyrmm] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

.settings-card-invite-chev[b-5qgx9qyrmm] {
    flex: none;
    color: var(--theme-text-tertiary, #94a3b8);
    font-size: 1.2rem;
}
/* /Pages/Account/MyCredits.razor.rz.scp.css */
/* ============================================
   MY CREDITS PAGE - Enhanced with Charts
   ============================================ */

.my-credits-page[b-ot92v4oxe4] {
    min-height: calc(100vh - 56px);
    background: #f8fafc;
    padding: 24px;
}

.theme-space.my-credits-page[b-ot92v4oxe4],
.theme-winter.my-credits-page[b-ot92v4oxe4],
.theme-nature.my-credits-page[b-ot92v4oxe4],
.theme-ocean.my-credits-page[b-ot92v4oxe4] {
    background: #1e293b;
}

.credits-container[b-ot92v4oxe4] {
    max-width: 1000px;
    margin: 0 auto;
}

/* Page Header */
.page-header[b-ot92v4oxe4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-ot92v4oxe4] {
    flex: 1;
}

.page-title[b-ot92v4oxe4] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.page-title svg[b-ot92v4oxe4] {
    color: #f59e0b;
}

/* PRO-DARK-2 (2026-07-21): dark groups in this file migrated from four-theme
   comma lists (Mystic/Tron/Slate were all missing) to the `is-dark` marker. */
.is-dark .page-title[b-ot92v4oxe4] {
    color: white;
}

.page-subtitle[b-ot92v4oxe4] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.is-dark .page-subtitle[b-ot92v4oxe4] {
    color: rgba(255, 255, 255, 0.7);
}

/* Loading & Error States */
.loading-state[b-ot92v4oxe4],
.error-state[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #64748b;
}

.spinner[b-ot92v4oxe4] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-ot92v4oxe4 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* ============================================
   TOP ROW: Balance + Prediction
   ============================================ */

.top-row[b-ot92v4oxe4] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* Balance Card */
.balance-card[b-ot92v4oxe4] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 20px;
    padding: 28px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.balance-main[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.balance-label[b-ot92v4oxe4] {
    font-size: 0.85rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.balance-amount[b-ot92v4oxe4] {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.balance-number[b-ot92v4oxe4] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
}

.balance-unit[b-ot92v4oxe4] {
    font-size: 1.25rem;
    opacity: 0.8;
}

.balance-amount.low-balance .balance-number[b-ot92v4oxe4] {
    color: #fef08a;
}

.low-balance-badge[b-ot92v4oxe4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #fef08a;
    width: fit-content;
}

.balance-stats[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-pill[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    text-align: center;
}

.stat-pill .stat-value[b-ot92v4oxe4] {
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-pill .stat-label[b-ot92v4oxe4] {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
}

.stat-pill.auto-refill[b-ot92v4oxe4] {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    background: rgba(34, 197, 94, 0.2);
}

/* Prediction Card */
.prediction-card[b-ot92v4oxe4] {
    background: white;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.is-dark .prediction-card[b-ot92v4oxe4] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.prediction-icon[b-ot92v4oxe4] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 12px;
}

.prediction-content[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prediction-value[b-ot92v4oxe4] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.prediction-value.text-warning[b-ot92v4oxe4] {
    color: #f59e0b;
}

.prediction-label[b-ot92v4oxe4] {
    font-size: 0.9rem;
    color: #64748b;
}

.prediction-detail[b-ot92v4oxe4] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
}

.is-dark .prediction-value[b-ot92v4oxe4] {
    color: white;
}

.is-dark .prediction-label[b-ot92v4oxe4] {
    color: rgba(255, 255, 255, 0.7);
}

/* CR-V-2 (2026-05-02): Inline buy-now CTA on the prediction card. Fires
   when the user has 7 days or fewer of projected runway (or has already
   run out). The .running-low modifier on the parent card upgrades the
   visual treatment so the CTA reads as a soft warning rather than a
   neutral information chip. */
.prediction-cta[b-ot92v4oxe4] {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--theme-primary, #6366f1);
    color: var(--theme-primary-contrast, #ffffff);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.prediction-cta:hover[b-ot92v4oxe4],
.prediction-cta:focus-visible[b-ot92v4oxe4] {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 14px var(--theme-shadow-color, rgba(0, 0, 0, 0.15));
}

.prediction-cta:focus-visible[b-ot92v4oxe4] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.prediction-card.running-low[b-ot92v4oxe4] {
    border: 1px solid color-mix(in srgb, var(--theme-warning, #f59e0b) 35%, transparent);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 5%, white);
}

.is-dark .prediction-card.running-low[b-ot92v4oxe4] {
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 12%, rgba(30, 41, 59, 0.8));
    border-color: color-mix(in srgb, var(--theme-warning, #f59e0b) 35%, rgba(255, 255, 255, 0.1));
}

@media (prefers-reduced-motion: reduce) {
    .prediction-cta[b-ot92v4oxe4],
    .prediction-cta:hover[b-ot92v4oxe4],
    .prediction-cta:focus-visible[b-ot92v4oxe4] {
        transform: none;
        transition: none;
    }
}

/* ============================================
   ANALYTICS ROW
   ============================================ */

.analytics-row[b-ot92v4oxe4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* Section Cards */
.section-card[b-ot92v4oxe4] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.analytics-row .section-card[b-ot92v4oxe4] {
    margin-bottom: 0;
}

.is-dark .section-card[b-ot92v4oxe4] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.section-header[b-ot92v4oxe4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title[b-ot92v4oxe4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 20px 0;
}

.section-title svg[b-ot92v4oxe4] {
    color: #6366f1;
    width: 22px;
    height: 22px;
}

.section-header .section-title[b-ot92v4oxe4] {
    margin-bottom: 0;
}

.is-dark .section-title[b-ot92v4oxe4] {
    color: white;
}

.period-badge[b-ot92v4oxe4] {
    font-size: 0.7rem;
    padding: 4px 8px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 6px;
    font-weight: 500;
    margin-left: auto;
}

.is-dark .period-badge[b-ot92v4oxe4] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   USAGE BY CATEGORY (Horizontal Bars)
   ============================================ */

.category-bars[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.category-bar-item[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-info[b-ot92v4oxe4] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-icon[b-ot92v4oxe4] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-icon.chat[b-ot92v4oxe4] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.category-icon.image[b-ot92v4oxe4] { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.category-icon.report[b-ot92v4oxe4] { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.category-icon.export[b-ot92v4oxe4] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.category-icon.video[b-ot92v4oxe4] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.category-icon.other[b-ot92v4oxe4] { background: rgba(100, 116, 139, 0.1); color: #64748b; }

.category-name[b-ot92v4oxe4] {
    font-weight: 500;
    color: #374151;
    font-size: 0.9rem;
}

.category-count[b-ot92v4oxe4] {
    margin-left: auto;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
}

.is-dark .category-name[b-ot92v4oxe4] {
    color: white;
}

.bar-container[b-ot92v4oxe4] {
    height: 8px;
    background: #f1f5f9;
    border-radius: 4px;
    overflow: hidden;
}

.is-dark .bar-container[b-ot92v4oxe4] {
    background: rgba(255, 255, 255, 0.1);
}

.bar-fill[b-ot92v4oxe4] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bar-fill.bar-chat[b-ot92v4oxe4] { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.bar-fill.bar-image[b-ot92v4oxe4] { background: linear-gradient(90deg, #a855f7, #c084fc); }
.bar-fill.bar-report[b-ot92v4oxe4] { background: linear-gradient(90deg, #22c55e, #4ade80); }
.bar-fill.bar-export[b-ot92v4oxe4] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar-fill.bar-video[b-ot92v4oxe4] { background: linear-gradient(90deg, #ef4444, #f87171); }
.bar-fill.bar-other[b-ot92v4oxe4] { background: linear-gradient(90deg, #64748b, #94a3b8); }

.category-total[b-ot92v4oxe4] {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 0.9rem;
    color: #64748b;
}

.is-dark .category-total[b-ot92v4oxe4] {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.category-total strong[b-ot92v4oxe4] {
    color: #1e293b;
}

.is-dark .category-total strong[b-ot92v4oxe4] {
    color: white;
}

/* ============================================
   DAILY USAGE CHART (Vertical Bars)
   ============================================ */

.daily-chart[b-ot92v4oxe4] {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 120px;
    padding: 0 4px;
}

.chart-bar-wrapper[b-ot92v4oxe4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.chart-bar[b-ot92v4oxe4] {
    width: 100%;
    max-width: 24px;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    cursor: pointer;
    margin-top: auto;
}

.chart-bar:hover[b-ot92v4oxe4] {
    opacity: 0.8;
}

.chart-bar.today[b-ot92v4oxe4] {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.chart-label[b-ot92v4oxe4] {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 6px;
}

.chart-label.today[b-ot92v4oxe4] {
    color: #f59e0b;
    font-weight: 600;
}

.chart-legend[b-ot92v4oxe4] {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.is-dark .chart-legend[b-ot92v4oxe4] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.legend-item[b-ot92v4oxe4] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #64748b;
}

.legend-dot[b-ot92v4oxe4] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.avg[b-ot92v4oxe4] { background: #6366f1; }
.legend-dot.max[b-ot92v4oxe4] { background: #22c55e; }

.empty-chart[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #94a3b8;
}

.empty-chart svg[b-ot92v4oxe4] {
    opacity: 0.3;
    margin-bottom: 8px;
}

.empty-chart p[b-ot92v4oxe4] {
    margin: 0;
    font-size: 0.9rem;
}

/* ============================================
   CREDIT COSTS REFERENCE
   ============================================ */

.costs-reference[b-ot92v4oxe4] {
    margin-bottom: 24px;
}

.costs-grid[b-ot92v4oxe4] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.cost-item[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #f8fafc;
    border-radius: 12px;
    text-align: center;
    gap: 8px;
}

.is-dark .cost-item[b-ot92v4oxe4] {
    background: rgba(255, 255, 255, 0.05);
}

.cost-icon[b-ot92v4oxe4] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cost-icon.chat[b-ot92v4oxe4] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.cost-icon.image[b-ot92v4oxe4] { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.cost-icon.export[b-ot92v4oxe4] { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.cost-icon.video[b-ot92v4oxe4] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.cost-name[b-ot92v4oxe4] {
    font-weight: 500;
    color: #374151;
    font-size: 0.85rem;
}

.cost-value[b-ot92v4oxe4] {
    font-size: 0.75rem;
    color: #64748b;
    background: #e2e8f0;
    padding: 2px 8px;
    border-radius: 10px;
}

.is-dark .cost-name[b-ot92v4oxe4] {
    color: white;
}

.is-dark .cost-value[b-ot92v4oxe4] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   TRANSACTIONS TABLE
   ============================================ */

.transactions-table[b-ot92v4oxe4] {
    overflow-x: auto;
}

.table-header[b-ot92v4oxe4],
.table-row[b-ot92v4oxe4] {
    display: grid;
    grid-template-columns: 140px 1fr 80px 80px;
    gap: 16px;
    padding: 12px 0;
    align-items: center;
}

.table-header[b-ot92v4oxe4] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
}

.is-dark .table-header[b-ot92v4oxe4] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.table-row[b-ot92v4oxe4] {
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.is-dark .table-row[b-ot92v4oxe4] {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.table-row:last-child[b-ot92v4oxe4] {
    border-bottom: none;
}

.col-date[b-ot92v4oxe4] {
    color: #64748b;
    font-size: 0.85rem;
}

.col-action[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.action-badge[b-ot92v4oxe4] {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    width: fit-content;
}

.action-badge.credit[b-ot92v4oxe4] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.action-badge.debit[b-ot92v4oxe4] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.action-badge.expired[b-ot92v4oxe4] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.action-desc[b-ot92v4oxe4] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.col-credits[b-ot92v4oxe4] {
    font-weight: 600;
    text-align: right;
}

.col-credits.positive[b-ot92v4oxe4] {
    color: #16a34a;
}

.col-credits.negative[b-ot92v4oxe4] {
    color: #64748b;
}

.col-balance[b-ot92v4oxe4] {
    text-align: right;
    color: #64748b;
}

.is-dark .col-date[b-ot92v4oxe4],
.is-dark .col-balance[b-ot92v4oxe4] {
    color: rgba(255, 255, 255, 0.6);
}

.table-footer[b-ot92v4oxe4] {
    padding-top: 16px;
    text-align: center;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Empty State */
.empty-state[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

.empty-state svg[b-ot92v4oxe4] {
    opacity: 0.3;
    margin-bottom: 12px;
}

.empty-state p[b-ot92v4oxe4] {
    margin: 0;
    font-weight: 500;
}

.empty-hint[b-ot92v4oxe4] {
    font-size: 0.85rem;
    margin-top: 4px;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */

.quick-actions[b-ot92v4oxe4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.action-card[b-ot92v4oxe4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-family: inherit;
}

.action-card:hover[b-ot92v4oxe4] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: #c7d2fe;
}

.is-dark .action-card[b-ot92v4oxe4] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.action-icon[b-ot92v4oxe4] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.action-icon.buy[b-ot92v4oxe4] { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; }
.action-icon.subscription[b-ot92v4oxe4] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: white; }
.action-icon.settings[b-ot92v4oxe4] { background: linear-gradient(135deg, #64748b 0%, #475569 100%); color: white; }

.action-title[b-ot92v4oxe4] {
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
    margin-bottom: 4px;
}

.quick-actions .action-desc[b-ot92v4oxe4] {
    font-size: 0.85rem;
    color: #64748b;
}

.is-dark .action-title[b-ot92v4oxe4] {
    color: white;
}

.is-dark .quick-actions .action-desc[b-ot92v4oxe4] {
    color: rgba(255, 255, 255, 0.6);
}

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

@media (max-width: 900px) {
    .top-row[b-ot92v4oxe4] {
        grid-template-columns: 1fr;
    }
    
    .analytics-row[b-ot92v4oxe4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .my-credits-page[b-ot92v4oxe4] {
        padding: 16px;
    }

    .balance-card[b-ot92v4oxe4] {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
    }

    .balance-number[b-ot92v4oxe4] {
        font-size: 2.5rem;
    }

    .balance-stats[b-ot92v4oxe4] {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 16px;
    }

    .costs-grid[b-ot92v4oxe4] {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-header[b-ot92v4oxe4],
    .table-row[b-ot92v4oxe4] {
        grid-template-columns: 100px 1fr 70px 70px;
        gap: 8px;
        font-size: 0.85rem;
    }

    .quick-actions[b-ot92v4oxe4] {
        grid-template-columns: 1fr;
    }

    .daily-chart[b-ot92v4oxe4] {
        height: 80px;
    }
}
/* /Pages/Account/MySubscription.razor.rz.scp.css */
/* ============================================
   MY SUBSCRIPTION PAGE - Scoped CSS
   ============================================ */

.my-subscription-page[b-7zb69unzeo] {
    min-height: calc(100vh - 56px);
    padding: 24px;
}

/* Theme backgrounds */
.my-subscription-page.theme-cloud[b-7zb69unzeo] {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #fdf4ff 100%);
}

.my-subscription-page.theme-space[b-7zb69unzeo] {
    background: linear-gradient(135deg, #0f0a1e 0%, #1a0a2e 50%, #0f172a 100%);
}

.my-subscription-page.theme-winter[b-7zb69unzeo] {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e3a8a 50%, #1e1b4b 100%);
}

.my-subscription-page.theme-nature[b-7zb69unzeo] {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #365314 100%);
}

.my-subscription-page.theme-ocean[b-7zb69unzeo] {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0f766e 100%);
}

.subscription-container[b-7zb69unzeo] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Page Header */
.page-header[b-7zb69unzeo] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* SUB-SPACE-1 (2026-07-21): the GLOBAL .page-header rule adds
       margin-bottom: 1.5rem, which stacked with .subscription-container's
       flex gap (24px) — header-to-card read 48px while card-to-card was 24px.
       The container gap owns spacing on this page. */
    margin-bottom: 0;
}

.page-title[b-7zb69unzeo] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.page-title svg[b-7zb69unzeo] {
    color: #6366f1;
}

/* Cards */
.subscription-card[b-7zb69unzeo] {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.card-title[b-7zb69unzeo] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 20px;
}

/* Usage Stat Cards */
.usage-stat-card[b-7zb69unzeo] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-label[b-7zb69unzeo] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 8px;
}

.stat-value-large[b-7zb69unzeo] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #6366f1;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-value[b-7zb69unzeo] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
}

.stat-bar[b-7zb69unzeo] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.stat-bar-fill[b-7zb69unzeo] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.stat-hint[b-7zb69unzeo] {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

/* SUB-HINT-1: upgrade prompt under the Starter plan card (was inline #64748b). */
.upgrade-hint[b-7zb69unzeo] {
    color: #64748b;
    margin: 0 0 16px;
}

/* Status Badges */
.status-badge[b-7zb69unzeo] {
    padding: 6px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-active[b-7zb69unzeo] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

.status-canceled[b-7zb69unzeo] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.status-trial[b-7zb69unzeo] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

/* Product Badges */
.product-badge[b-7zb69unzeo] {
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
}

/* New Tier Badges */
.product-student[b-7zb69unzeo] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.product-user[b-7zb69unzeo] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.product-power-user[b-7zb69unzeo] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

/* Current Tier Badges */
.product-starter[b-7zb69unzeo] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.product-growth[b-7zb69unzeo] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.product-scale[b-7zb69unzeo] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

/* Legacy Badges (for backwards compatibility) */
.product-self-starter[b-7zb69unzeo] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.product-self-employed[b-7zb69unzeo] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.product-teamwork[b-7zb69unzeo] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

/* Plan Details */
.plan-details[b-7zb69unzeo] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    border: 1px solid #e2e8f0;
}

.detail-row[b-7zb69unzeo] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.detail-row:last-child[b-7zb69unzeo] {
    border-bottom: none;
}

.detail-label[b-7zb69unzeo] {
    font-weight: 600;
    color: #64748b;
}

.detail-value[b-7zb69unzeo] {
    color: #1e293b;
    font-weight: 500;
}

.subscription-id[b-7zb69unzeo] {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* No Subscription State */
.no-subscription[b-7zb69unzeo] {
    text-align: center;
    padding: 40px 20px;
}

.no-subscription svg[b-7zb69unzeo] {
    color: #cbd5e1;
    margin-bottom: 20px;
}

.no-subscription h3[b-7zb69unzeo] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.no-subscription p[b-7zb69unzeo] {
    color: #64748b;
    max-width: 500px;
    margin: 0 auto 32px auto;
}

.plan-buttons[b-7zb69unzeo] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Features Grid */
.features-grid[b-7zb69unzeo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.feature-item[b-7zb69unzeo] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.feature-item svg[b-7zb69unzeo] {
    color: #10b981;
    flex-shrink: 0;
}

/* Alerts */
.alert[b-7zb69unzeo] {
    padding: 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
    line-height: 1.5;
}

.alert-warning[b-7zb69unzeo] {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-warning svg[b-7zb69unzeo] {
    color: #f59e0b;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Loading */
.loading-container[b-7zb69unzeo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #64748b;
    gap: 16px;
}

.spinner[b-7zb69unzeo] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #6366f1;
    border-radius: 50%;
    animation: spin-b-7zb69unzeo 1s linear infinite;
}

.spinner-sm[b-7zb69unzeo] {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

@keyframes spin-b-7zb69unzeo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modal markup migrated to <BaseDialog> (BD-1, 2026-06-14) — bespoke modal CSS removed. */

/* Dark Theme Overrides.
   PRO-DARK-2 (2026-07-21): migrated from per-theme comma lists (which enumerated only
   space/winter/nature/ocean — Mystic, Tron, and Slate were all MISSING) to the `is-dark`
   marker class emitted on <html> by AppThemeService/the anti-flash script. New CSS must
   use `.is-dark`; never enumerate theme classes. */
.is-dark .page-header[b-7zb69unzeo],
.is-dark .subscription-card[b-7zb69unzeo] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .page-title[b-7zb69unzeo],
.is-dark .card-title[b-7zb69unzeo] {
    color: #f1f5f9;
}

.is-dark .detail-label[b-7zb69unzeo],
.is-dark .no-subscription p[b-7zb69unzeo],
.is-dark .no-subscription h3[b-7zb69unzeo],
.is-dark .loading-container[b-7zb69unzeo],
.is-dark .upgrade-hint[b-7zb69unzeo] {
    color: #cbd5e1;
}

.is-dark .detail-value[b-7zb69unzeo] {
    color: #f8fafc;
}

.is-dark .plan-details[b-7zb69unzeo] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .detail-row[b-7zb69unzeo] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .feature-item[b-7zb69unzeo] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.is-dark .subscription-id[b-7zb69unzeo] {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

/* PRO-DARK-2: dark overrides that NO theme previously had (stat cards + warning alert
   were light in Space/Winter/etc. too — pre-existing gap, fixed while in here). */
.is-dark .usage-stat-card[b-7zb69unzeo] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .stat-label[b-7zb69unzeo] {
    color: #cbd5e1;
}

.is-dark .stat-value[b-7zb69unzeo] {
    color: #f1f5f9;
}

/* SUB-HINT-1: indigo-500 value + slate hint were both too dim on dark surfaces.
   Same one-step brightening as the ManageAccount tab accent (indigo-500 → 300). */
.is-dark .stat-value-large[b-7zb69unzeo] {
    color: #a5b4fc;
}

.is-dark .stat-hint[b-7zb69unzeo] {
    color: #94a3b8;
}

.is-dark .stat-hint a[b-7zb69unzeo] {
    color: #a5b4fc;
}

.is-dark .stat-bar[b-7zb69unzeo] {
    background: rgba(255, 255, 255, 0.12);
}

.is-dark .alert-warning[b-7zb69unzeo] {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-7zb69unzeo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .my-subscription-page[b-7zb69unzeo] {
        padding: 12px;
    }

    .subscription-container[b-7zb69unzeo] {
        gap: 16px;
    }

    /* Compact header */
    .page-header[b-7zb69unzeo] {
        padding: 14px 16px;
        border-radius: 12px;
    }

    .page-title[b-7zb69unzeo] {
        font-size: 1.35rem;
        gap: 8px;
    }

    .page-title svg[b-7zb69unzeo] {
        width: 24px;
        height: 24px;
    }

    .page-header .nts-btn[b-7zb69unzeo] {
        font-size: 0.82rem;
        padding: 6px 12px;
    }

    /* Compact cards */
    .subscription-card[b-7zb69unzeo] {
        padding: 18px 16px;
        border-radius: 12px;
    }

    .card-title[b-7zb69unzeo] {
        font-size: 1.1rem;
        margin-bottom: 14px;
    }

    .plan-buttons[b-7zb69unzeo] {
        flex-direction: column;
        width: 100%;
    }

    .btn-lg[b-7zb69unzeo] {
        width: 100%;
    }

    .header-content[b-7zb69unzeo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}
/* /Pages/Accounting/AccountDetail.razor.rz.scp.css */
/* ============================================
   ACCOUNT DETAIL PAGE - Scoped CSS
   Uses CSS variables from theme-variables.css
   ============================================ */

/* Page Container — flex column for consistent spacing */
.detail-page-container[b-0z4hfo314a] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header */
.account-header[b-0z4hfo314a] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    padding: 24px 28px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.header-top-row[b-0z4hfo314a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.header-actions[b-0z4hfo314a] {
    display: flex;
    gap: 10px;
}

.header-profile[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.account-avatar-large[b-0z4hfo314a] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--theme-primary, #334155);
    color: var(--theme-btn-text, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 1px;
}

.header-info[b-0z4hfo314a] {
    flex: 1;
    min-width: 0;
}

.account-name[b-0z4hfo314a] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0;
    line-height: 1.2;
}

.account-badges[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.account-badges .detail-status-badge.account-type[b-0z4hfo314a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-badges .detail-status-badge.account-type svg[b-0z4hfo314a] {
    width: 16px;
    height: 16px;
}

/* Relationship-duration subtitle — appears below the badges. Mirrors
   ContactDetail's `.contact-position` styling so the two detail-page
   headers feel like siblings. Renders only when Account.Created is set. */
.account-subtitle[b-0z4hfo314a] {
    margin: 6px 0 0;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #475569);
}

/* Health Stars */
.health-section[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.rating-stars[b-0z4hfo314a] {
    color: #f59e0b;
    display: flex;
    gap: 2px;
}

.rating-stars svg[b-0z4hfo314a] {
    width: 20px;
    height: 20px;
}

/* Stats Overview */
.stats-grid[b-0z4hfo314a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.stat-card[b-0z4hfo314a] {
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-0z4hfo314a] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon[b-0z4hfo314a] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon.primary[b-0z4hfo314a] { color: var(--theme-primary-ink, var(--theme-primary, #334155)); background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.1); }
.stat-icon.info[b-0z4hfo314a] { color: #0ea5e9; background: #e0f2fe; }
.stat-icon.success[b-0z4hfo314a] { color: #10b981; background: #dcfce7; }
.stat-icon.error[b-0z4hfo314a] { color: #ef4444; background: #fee2e2; }

.stat-value[b-0z4hfo314a] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0;
}

.stat-label[b-0z4hfo314a] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
    margin: 4px 0 0 0;
}

/* Info Grid */
.info-grid[b-0z4hfo314a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
}

/* Remove margin-bottom from cards inside info-grid (gap handles spacing) */
.info-grid .detail-card[b-0z4hfo314a] {
    margin-bottom: 0;
}

/* Info Items */
.info-list[b-0z4hfo314a] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item[b-0z4hfo314a] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item.row[b-0z4hfo314a] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.info-label[b-0z4hfo314a] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

.info-value[b-0z4hfo314a] {
    font-size: 0.95rem;
    color: var(--theme-text-primary, #334155);
}

.info-link[b-0z4hfo314a] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    text-decoration: none;
    font-weight: 500;
}

.info-link:hover[b-0z4hfo314a] {
    text-decoration: underline;
    opacity: 0.85;
}

/* Addresses */
.address-grid[b-0z4hfo314a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.address-item[b-0z4hfo314a] {
    background: var(--theme-surface-alt, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    padding: 16px;
}

.address-header[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.address-type[b-0z4hfo314a] {
    font-size: 0.75rem;
    background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
}

.address-primary[b-0z4hfo314a] {
    font-size: 0.75rem;
    border: 1px solid #10b981;
    color: #10b981;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
}

/* Status Chips (used in data tables) */
.status-chip[b-0z4hfo314a] {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-active[b-0z4hfo314a] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-ongoing[b-0z4hfo314a] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-canceled[b-0z4hfo314a] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Tabs */
.tabs-container[b-0z4hfo314a] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.tabs-header[b-0z4hfo314a] {
    display: flex;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    overflow-x: auto;
    padding: 0 16px;
}

.tab-btn[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-0z4hfo314a] {
    color: var(--theme-primary, #334155);
    background: var(--theme-surface-alt, #f8fafc);
}

.tab-btn.active[b-0z4hfo314a] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    border-bottom-color: var(--theme-primary, #334155);
}

.tab-content[b-0z4hfo314a] {
    padding: 24px;
}

/* Mini Stat Cards (inside tabs) */
.mini-stat-card[b-0z4hfo314a] {
    background: var(--theme-surface-alt, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.mini-stat-value[b-0z4hfo314a] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.mini-stat-label[b-0z4hfo314a] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.invoice-stats[b-0z4hfo314a],
.time-stats[b-0z4hfo314a],
.work-stats[b-0z4hfo314a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

/* Data Table */
.data-table[b-0z4hfo314a] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.data-table th[b-0z4hfo314a] {
    text-align: left;
    padding: 12px 16px;
    background: var(--theme-surface-alt, #f8fafc);
    color: var(--theme-text-secondary, #475569);
    font-weight: 600;
    border-bottom: 2px solid var(--theme-border, #e2e8f0);
}

.data-table td[b-0z4hfo314a] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    color: var(--theme-text-primary, #334155);
}

.data-table tr:hover[b-0z4hfo314a] {
    background: var(--theme-surface-alt, #f8fafc);
}

/* Buttons */
.btn-icon[b-0z4hfo314a] {
    padding: 8px;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-0z4hfo314a] {
    background: var(--theme-surface-alt, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
}

/* Section Titles (inside tabs) */
.section-title[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 16px 0;
}

.section-title svg[b-0z4hfo314a] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
}

/* Tab Content Layouts */
.time-entries-content[b-0z4hfo314a],
.work-items-content[b-0z4hfo314a],
.contacts-content[b-0z4hfo314a],
.charts-content[b-0z4hfo314a] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Month Summary Cards */
.month-summary-section[b-0z4hfo314a] {
    margin-bottom: 8px;
}

.month-cards-grid[b-0z4hfo314a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.month-card[b-0z4hfo314a] {
    background: var(--theme-surface-alt, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer; /* Cards are now clickable filters — see ToggleMonthFilter handler. */
    user-select: none;
}

.month-card:hover[b-0z4hfo314a] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.month-card:focus-visible[b-0z4hfo314a] {
    outline: 2px solid var(--theme-primary, #334155);
    outline-offset: 2px;
}

.month-card.current-month[b-0z4hfo314a] {
    background: linear-gradient(135deg, var(--theme-primary, #334155), var(--theme-accent, #475569));
    border-color: transparent;
    color: white;
}

/* Active-filter state — reuses the same primary gradient as `.current-month`
   so the active selection reads at a glance with a real background change
   (a border-only treatment was too subtle). The CURRENT badge stays put
   when both states overlap (filter active on the current month) — the badge
   differentiates "this is now" from "this is what you filtered to."
   When the active filter sits on a non-current month, the gradient alone
   communicates "selected"; no CURRENT badge appears. */
.month-card.is-filter-active[b-0z4hfo314a] {
    background: linear-gradient(135deg, var(--theme-primary, #334155), var(--theme-accent, #475569));
    border-color: transparent;
    color: white;
}

.month-card.is-filter-active .month-name[b-0z4hfo314a],
.month-card.is-filter-active .month-hours[b-0z4hfo314a] {
    color: white;
}

.month-card.is-filter-active .month-entries[b-0z4hfo314a] {
    color: rgba(255, 255, 255, 0.85);
}

/* Subtle outer ring when the filter is active, regardless of current-month
   overlap. Adds a "you clicked this" affordance distinct from the gradient. */
.month-card.is-filter-active[b-0z4hfo314a] {
    box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.18);
}

/* Filter-clear chip — sits next to the "Time Entries — {month} (N)" section
   title when a month filter is active. Pill-shaped with a muted bg + border
   so it reads as a distinct dismissible affordance, not as more title text.
   Smaller font than the h3 so it visually defers to the title.
   Hover bumps the bg + border to a stronger accent so the click target is
   obvious; focus-visible mirrors the hover for keyboard users. */
.filter-clear-chip[b-0z4hfo314a] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 999px;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.filter-clear-chip:hover[b-0z4hfo314a],
.filter-clear-chip:focus-visible[b-0z4hfo314a] {
    background: var(--theme-chip-bg, #e2e8f0);
    border-color: var(--theme-text-secondary, #94a3b8);
    color: var(--theme-text-primary, #1e293b);
    outline: none;
}

.filter-clear-chip svg[b-0z4hfo314a] {
    flex-shrink: 0;
}

/* Dark-theme override — the default pill bg (#f1f5f9) is too bright on
   Space/Mystic/Tron/etc. Use a softer translucent bg that picks up the
   theme's surface tone instead. */
.is-dark .filter-clear-chip[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .filter-clear-chip:hover[b-0z4hfo314a],
.is-dark .filter-clear-chip:focus-visible[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.95);
}

.month-name[b-0z4hfo314a] {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.month-hours[b-0z4hfo314a] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.month-card.current-month .month-hours[b-0z4hfo314a] {
    color: white;
}

.month-entries[b-0z4hfo314a] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    margin-top: 4px;
}

.month-card.current-month .month-entries[b-0z4hfo314a] {
    color: rgba(255, 255, 255, 0.8);
}

.current-badge[b-0z4hfo314a] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #10b981;
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Chart Bars */
.chart-bars[b-0z4hfo314a] {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    height: 280px;
    padding: 20px 10px;
    background: var(--theme-surface-alt, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    gap: 8px;
    overflow-x: auto;
}

.chart-bar-container[b-0z4hfo314a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px;
    max-width: 80px;
    height: 100%;
}

.chart-bar-value[b-0z4hfo314a] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #475569);
    margin-bottom: 8px;
    white-space: nowrap;
}

.chart-bar[b-0z4hfo314a] {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, var(--theme-primary, #334155), var(--theme-accent, #475569));
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.chart-bar-label[b-0z4hfo314a] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary, #64748b);
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
}

/* Net cash-flow chart variant — green-up for positive (income-dominant)
 * months, red-down for negative (expense-dominant). Same shape as the
 * default theme-primary bar but tinted by direction. */
.chart-bar-positive[b-0z4hfo314a] {
    background: linear-gradient(180deg, #22c55e, #16a34a);
}
.chart-bar-negative[b-0z4hfo314a] {
    background: linear-gradient(180deg, #ef4444, #dc2626);
}

/* ============================================
 * FINANCIAL ACCOUNT DETAIL — Transactions / Recurring tabs
 * Drops in alongside the existing Time / Work Items / Contacts tab
 * styles. Reuses .data-table, .empty-state, .section-title from the
 * shared CRM-tab styles above.
 * ============================================ */

/* Top-of-tab summary card grid (Income / Expenses / Net / Count). */
.account-summary-grid[b-0z4hfo314a] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .account-summary-grid[b-0z4hfo314a] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.account-summary-card[b-0z4hfo314a] {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--theme-border, #e2e8f0);
}

.account-summary-label[b-0z4hfo314a] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.account-summary-value[b-0z4hfo314a] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

/* Section header row with a "View all →" affordance pinned right. */
.account-section-header[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 12px 0;
}

.account-view-all-link[b-0z4hfo314a] {
    font-size: 0.875rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
}

.account-view-all-link:hover[b-0z4hfo314a] {
    text-decoration: underline;
}

/* Type pill — Income (green), Expense (red), Transfer (indigo).
 * Mirrors the type tags used on the Transactions list page so the
 * visual language stays consistent across the two surfaces. */
.type-pill[b-0z4hfo314a] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.type-income[b-0z4hfo314a] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.type-expense[b-0z4hfo314a] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.type-transfer[b-0z4hfo314a] {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.type-unknown[b-0z4hfo314a] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}

/* Amount cell — monospace for column-alignment, sign-tinted by Type.
 * Negative for Expense rows, positive (green) for Income, neutral for
 * Transfer (no color override). */
.account-amount-cell[b-0z4hfo314a] {
    font-family: monospace;
    font-weight: 600;
}

.account-amount-cell.amount-negative[b-0z4hfo314a],
.account-amount-cell .amount-negative[b-0z4hfo314a],
.account-amount-cell.text-danger[b-0z4hfo314a] {
    color: #dc2626;
}

.account-amount-cell.amount-positive[b-0z4hfo314a],
.account-amount-cell .amount-positive[b-0z4hfo314a],
.account-amount-cell.text-success[b-0z4hfo314a] {
    color: #16a34a;
}

/* Status pill for the Recurring tab — Active (green) / Paused (slate). */
.status-pill[b-0z4hfo314a] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-active[b-0z4hfo314a] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.status-paused[b-0z4hfo314a] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}

/* Paused recurring rules — visible but de-emphasised. */
.row-inactive[b-0z4hfo314a] {
    opacity: 0.55;
}

/* Wrapper for tables — handles horizontal scroll on narrow screens. */
.data-table-wrapper[b-0z4hfo314a] {
    overflow-x: auto;
}

/* Right-aligned numeric column helper. */
.text-right[b-0z4hfo314a] {
    text-align: right;
}

/* Color helpers for inline value tinting. */
.text-success[b-0z4hfo314a] { color: #16a34a; }
.text-danger[b-0z4hfo314a] { color: #dc2626; }

/* Dark-theme parity for the new components. */
.is-dark .account-summary-card[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .account-summary-value[b-0z4hfo314a] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .status-paused[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

/* Timeline */
.timeline[b-0z4hfo314a] {
    position: relative;
    padding: 24px 0;
    max-width: 800px;
    margin: 0 auto;
}

.timeline[b-0z4hfo314a]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 2px;
    background: var(--theme-border, #e2e8f0);
}

.timeline-item[b-0z4hfo314a] {
    position: relative;
    padding-left: 50px;
    margin-bottom: 24px;
}

.timeline-marker[b-0z4hfo314a] {
    position: absolute;
    left: 11px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-primary, #334155);
    border: 4px solid var(--theme-surface, white);
    box-shadow: 0 0 0 1px var(--theme-border, #e2e8f0);
    z-index: 1;
}

.timeline-content[b-0z4hfo314a] {
    background: var(--theme-surface, white);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.timeline-date[b-0z4hfo314a] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    margin-bottom: 4px;
    font-weight: 500;
}

.timeline-title[b-0z4hfo314a] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 4px 0;
}

.timeline-desc[b-0z4hfo314a] {
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #475569);
    margin: 0;
}

/* Empty State */
.empty-state[b-0z4hfo314a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
}

.empty-state svg[b-0z4hfo314a] {
    opacity: 0.4;
    margin-bottom: 16px;
}

.empty-state p[b-0z4hfo314a] {
    margin: 0;
    font-size: 0.95rem;
}

/* Table Note */
.table-note[b-0z4hfo314a] {
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

/* Utility classes */
.text-success[b-0z4hfo314a] { color: #10b981; }
.text-warning[b-0z4hfo314a] { color: #f59e0b; }
.text-danger[b-0z4hfo314a] { color: #ef4444; }

/* ============================================
   DARK THEME OVERRIDES (all 6 dark themes)
   ============================================ */

.is-dark .account-header[b-0z4hfo314a] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(12px);
}

.is-dark .account-avatar-large[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.is-dark .stat-card[b-0z4hfo314a],
.is-dark .tabs-container[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.is-dark .account-name[b-0z4hfo314a],
.is-dark .stat-value[b-0z4hfo314a],
.is-dark .mini-stat-value[b-0z4hfo314a],
.is-dark .timeline-title[b-0z4hfo314a],
.is-dark .section-title[b-0z4hfo314a],
.is-dark .month-card:not(.current-month) .month-hours[b-0z4hfo314a] {
    color: #f1f5f9;
}

.is-dark .health-section[b-0z4hfo314a],
.is-dark .stat-label[b-0z4hfo314a],
.is-dark .info-label[b-0z4hfo314a],
.is-dark .timeline-date[b-0z4hfo314a],
.is-dark .timeline-desc[b-0z4hfo314a],
.is-dark .chart-bar-label[b-0z4hfo314a],
.is-dark .empty-state[b-0z4hfo314a],
.is-dark .table-note[b-0z4hfo314a],
.is-dark .month-card:not(.current-month) .month-entries[b-0z4hfo314a] {
    color: #cbd5e1;
}

.is-dark .info-value[b-0z4hfo314a],
.is-dark .data-table td[b-0z4hfo314a],
.is-dark .chart-bar-value[b-0z4hfo314a] {
    color: #e2e8f0;
}

.is-dark .info-link[b-0z4hfo314a] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.is-dark .mini-stat-card[b-0z4hfo314a],
.is-dark .month-card:not(.current-month)[b-0z4hfo314a],
.is-dark .chart-bars[b-0z4hfo314a],
.is-dark .address-item[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table th[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table td[b-0z4hfo314a] {
    border-color: rgba(255, 255, 255, 0.05);
}

.is-dark .data-table tr:hover[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .tabs-header[b-0z4hfo314a] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .tab-btn[b-0z4hfo314a] {
    color: #94a3b8;
}

.is-dark .tab-btn:hover[b-0z4hfo314a] {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .tab-btn.active[b-0z4hfo314a] {
    color: white;
    border-bottom-color: var(--theme-primary);
}

.is-dark .timeline[b-0z4hfo314a]::before {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .timeline-content[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .timeline-marker[b-0z4hfo314a] {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.is-dark .address-type[b-0z4hfo314a] {
    background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.2);
}

.is-dark .btn-icon[b-0z4hfo314a] {
    color: #94a3b8;
}

.is-dark .btn-icon:hover[b-0z4hfo314a] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.is-dark .month-card:not(.current-month) .month-name[b-0z4hfo314a] {
    color: #94a3b8;
}

.is-dark .status-active[b-0z4hfo314a] {
    background: rgba(16, 185, 129, 0.2);
}

.is-dark .status-ongoing[b-0z4hfo314a] {
    background: rgba(59, 130, 246, 0.2);
}

.is-dark .status-canceled[b-0z4hfo314a] {
    background: rgba(239, 68, 68, 0.2);
}

/* Responsive */
@media (max-width: 900px) {
    .header-top-row[b-0z4hfo314a] {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-profile[b-0z4hfo314a] {
        flex-direction: column;
        align-items: flex-start;
    }
    .info-grid[b-0z4hfo314a] {
        grid-template-columns: 1fr;
    }
    .month-cards-grid[b-0z4hfo314a] {
        grid-template-columns: repeat(3, 1fr);
    }
    .chart-bars[b-0z4hfo314a] {
        height: 200px;
    }
}

/* Primary Contact Row */
.primary-contact-row[b-0z4hfo314a] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin-top: 4px;
    flex-wrap: wrap;
}

.primary-contact-row svg[b-0z4hfo314a] {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.primary-contact-link[b-0z4hfo314a] {
    color: var(--theme-link-color, var(--theme-primary));
    text-decoration: none;
    transition: color 0.2s;
}

.primary-contact-link:hover[b-0z4hfo314a] {
    color: var(--theme-link-hover-color, var(--theme-primary));
    text-decoration: underline;
}

.primary-contact-divider[b-0z4hfo314a] {
    opacity: 0.4;
}

/* EMAIL-REC-5 (2026-08-03): direction + attachment affordances on the Emails
   tab. The arrow is the fastest read in the table — which way did this move —
   so it gets colour rather than relying on the To column alone. */
.email-direction[b-0z4hfo314a] {
    display: inline-block;
    margin-right: 6px;
    font-weight: 700;
    line-height: 1;
    cursor: default;
}

.email-out[b-0z4hfo314a] {
    color: var(--theme-primary-ink, var(--theme-primary, #3498db));
}

.email-in[b-0z4hfo314a] {
    color: var(--theme-success-color, #2ecc71);
}

.email-attachment-note[b-0z4hfo314a] {
    margin-left: 6px;
    opacity: 0.7;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* EMAIL-REC-6 (2026-08-03): the subject is the read affordance. Styled as a
   link but built as a <button> — it performs an action rather than navigating,
   so the semantics stay honest for keyboard and screen-reader users while the
   appearance follows the mail-client idiom. */
.email-subject-link[b-0z4hfo314a] {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    color: var(--theme-link-color, var(--theme-primary));
    cursor: pointer;
    transition: color 0.2s;
}

.email-subject-link:hover[b-0z4hfo314a],
.email-subject-link:focus-visible[b-0z4hfo314a] {
    color: var(--theme-link-hover-color, var(--theme-primary));
    text-decoration: underline;
}
/* /Pages/Accounting/AccountDialog.razor.rz.scp.css */
/* ============================================
   ACCOUNT DIALOG - Clean Modern Design
   Theme variables eliminate most dark overrides
   ============================================ */

/* Form Layout */
.form-stack[b-ox1o68uk1q] {
    display: flex;
    flex-direction: column;
}

.form-row[b-ox1o68uk1q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

.form-row-3[b-ox1o68uk1q] {
    grid-template-columns: 1fr 80px 100px;
}

.form-row .form-group[b-ox1o68uk1q] {
    margin-bottom: 0;
}

.form-group[b-ox1o68uk1q] {
    margin-bottom: 8px;
}

/* Liability classification toggle (Financial accounts only).
 * Stack label + help text vertically so the explanation reads as
 * a paragraph under the label, not inline next to it. The checkbox
 * sits next to its own label text on the first line; the help text
 * paragraph sits indented underneath on its own block. */
.form-liability-group[b-ox1o68uk1q] {
    margin-top: 12px;
    margin-bottom: 12px;
}

.form-liability-label[b-ox1o68uk1q] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    cursor: pointer;
}

.form-liability-label input[type="checkbox"][b-ox1o68uk1q] {
    margin: 0;
    cursor: pointer;
}

.form-liability-help[b-ox1o68uk1q] {
    margin: 4px 0 0 24px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--theme-text-secondary, #64748b);
}

/* Labels */
.form-label[b-ox1o68uk1q] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-muted, #6b7280);
    margin-bottom: 3px;
}

.required[b-ox1o68uk1q] {
    color: #ef4444;
}

/* Inputs */
.form-input[b-ox1o68uk1q],
.form-textarea[b-ox1o68uk1q] {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.875rem;
    font-family: inherit;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1f2937);
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.form-input:focus[b-ox1o68uk1q],
.form-textarea:focus[b-ox1o68uk1q] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.form-input[b-ox1o68uk1q]::placeholder,
.form-textarea[b-ox1o68uk1q]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

.form-textarea[b-ox1o68uk1q] {
    resize: vertical;
    min-height: 80px;
}

.char-count[b-ox1o68uk1q] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #9ca3af);
    text-align: right;
    margin-top: 2px;
}

/* Section Dividers */
.section-divider[b-ox1o68uk1q] {
    position: relative;
    margin: 16px 0 8px;
    border-top: 1px solid var(--theme-border, #e5e7eb);
}

.section-title[b-ox1o68uk1q] {
    position: absolute;
    top: -9px;
    left: 0;
    padding-right: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #9ca3af);
    background: var(--theme-surface, #ffffff);
}

.is-dark .section-title[b-ox1o68uk1q] {
    background: rgba(30, 41, 59, 0.98);
}

/* Address Cards */
.addresses-section[b-ox1o68uk1q] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.address-card[b-ox1o68uk1q] {
    padding: 12px;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 10px;
    background: var(--theme-surface-secondary, #f9fafb);
}

.is-dark .address-card[b-ox1o68uk1q] {
    background: rgba(255, 255, 255, 0.04);
}

.address-header[b-ox1o68uk1q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.address-title[b-ox1o68uk1q] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.btn-remove[b-ox1o68uk1q] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--theme-text-muted, #9ca3af);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-remove:hover[b-ox1o68uk1q] {
    background: #fee2e2;
    color: #ef4444;
}

.btn-add-address[b-ox1o68uk1q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
    background: transparent;
    border: 1px dashed var(--theme-primary, #3b82f6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-add-address:hover[b-ox1o68uk1q] {
    background: rgba(var(--theme-primary-rgb), 0.05);
}

/* Rating Stars */
.rating-stars[b-ox1o68uk1q] {
    display: flex;
    gap: 2px;
}

.star-btn[b-ox1o68uk1q] {
    padding: 4px;
    font-size: 1.25rem;
    color: var(--theme-border, #d1d5db);
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, color 0.1s;
}

.star-btn:hover[b-ox1o68uk1q] {
    transform: scale(1.15);
}

.star-btn.active[b-ox1o68uk1q] {
    color: #fbbf24;
}

/* Toggle Switches */
.toggles-row[b-ox1o68uk1q] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 8px;
}

.toggle-wrapper[b-ox1o68uk1q] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.toggle-input[b-ox1o68uk1q] {
    display: none;
}

.toggle-switch[b-ox1o68uk1q] {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--theme-border, #d1d5db);
    border-radius: 12px;
    transition: background 0.2s;
}

.toggle-switch[b-ox1o68uk1q]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.toggle-input:checked + .toggle-switch[b-ox1o68uk1q] {
    background: var(--theme-primary, #3b82f6);
}

.toggle-input:checked + .toggle-switch[b-ox1o68uk1q]::after {
    transform: translateX(20px);
}

.toggle-label[b-ox1o68uk1q] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
}

/* Info Banner */
.info-banner[b-ox1o68uk1q] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #1e40af;
    font-size: 0.8125rem;
    margin-bottom: 8px;
}

.info-banner svg[b-ox1o68uk1q] {
    flex-shrink: 0;
    margin-top: 1px;
}

.is-dark .info-banner[b-ox1o68uk1q] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* Meta Info */
.meta-info[b-ox1o68uk1q] {
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px solid var(--theme-border, #e5e7eb);
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #9ca3af);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .form-row[b-ox1o68uk1q],
    .form-row-3[b-ox1o68uk1q] {
        grid-template-columns: 1fr;
    }

    .toggles-row[b-ox1o68uk1q] {
        flex-direction: column;
        gap: 16px;
    }
}

/* ACCT-RATE-1: $ prefix on the Customer default-rate input */
.rate-input-wrap[b-ox1o68uk1q] { position: relative; }
.rate-input-prefix[b-ox1o68uk1q] {
    position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
    color: var(--theme-text-secondary, #6b7280); pointer-events: none; font-size: 0.95rem;
}
.form-input.rate-input[b-ox1o68uk1q],
.rate-input[b-ox1o68uk1q] { padding-left: 1.9rem !important; }

/* PLAID-SYNCED-LABEL-1: hint under Balance when a linked bank keeps it current. */
.form-hint[b-ox1o68uk1q] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--theme-text-secondary, #6b7280);
}
/* /Pages/Accounting/Accounts.razor.rz.scp.css */
/* ============================================
   ACCOUNTS PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   Only modal styles needed here
   ============================================ */

/* Modal Dialog Overlay */
.modal-overlay[b-m5y2annekm] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal-content[b-m5y2annekm] {
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}
/* /Pages/Accounting/RecordEmailDialog.razor.rz.scp.css */
/* EMAIL-REC-1 (2026-07-30): compose-from-record dialog. Only the pieces the
   shared form classes don't cover — hint lines and the custom-address input's
   spacing. Theme colors via variables so all 9 themes render correctly. */

.rec-hint[b-6edhn5bi2j] {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.rec-hint.warn[b-6edhn5bi2j] {
    color: var(--theme-warning, #d97706);
}

.rec-custom-input[b-6edhn5bi2j] {
    margin-top: 8px;
}

.rec-body[b-6edhn5bi2j] {
    resize: vertical;
    min-height: 160px;
    font-family: inherit;
}
/* /Pages/Accounting/RecordEmailViewDialog.razor.rz.scp.css */
/* EMAIL-REC-6 (2026-08-03): read-a-message dialog.
   Reading surface, not a form — the body gets the room and the metadata
   stays quiet above it. */

.msg-meta[b-fi0y1vhpm7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border-color, rgba(128, 128, 128, 0.2));
}

.msg-meta-row[b-fi0y1vhpm7] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.9rem;
}

.msg-meta-label[b-fi0y1vhpm7] {
    flex: 0 0 auto;
    min-width: 44px;
    opacity: 0.6;
}

.msg-meta-value[b-fi0y1vhpm7] {
    color: var(--theme-text-color);
    word-break: break-word;
}

.msg-meta-addr[b-fi0y1vhpm7] {
    margin-left: 6px;
    opacity: 0.6;
}

.msg-subject[b-fi0y1vhpm7] {
    margin: 14px 0 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--theme-text-color);
    word-break: break-word;
}

.msg-attachments[b-fi0y1vhpm7] {
    margin-bottom: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--theme-hover-background, rgba(128, 128, 128, 0.08));
    font-size: 0.85rem;
    word-break: break-word;
}

.msg-attachments small[b-fi0y1vhpm7] {
    display: block;
    margin-top: 2px;
    opacity: 0.6;
}

/* The message itself. white-space: pre-wrap is what preserves the sender's
   line breaks — the body is bound as TEXT (see the security note in the
   .razor), so formatting must come from CSS and never from markup. Capped
   height because a reply typically drags a full quoted history behind it. */
.msg-body[b-fi0y1vhpm7] {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    max-height: 45vh;
    overflow-y: auto;
    padding: 12px;
    border-radius: 6px;
    background: var(--theme-input-background, rgba(128, 128, 128, 0.06));
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--theme-text-color);
}

.msg-body-empty[b-fi0y1vhpm7] {
    padding: 12px;
    opacity: 0.6;
    font-style: italic;
}

/* Footer buttons. GOTCHAS #78: FooterContent renders inside BaseDialog's DOM
   but carries THIS component's scoped-CSS id, so BaseDialog's .dialog-btn rules
   cannot match it — the buttons render as bare text if you reuse those names.
   Own class names, styled here, mirroring BaseDialog's look (and the same
   approach ImportTransactionsDialog uses for its custom footer). */
.msg-footer[b-fi0y1vhpm7] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.msg-btn[b-fi0y1vhpm7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 36px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.msg-btn-cancel[b-fi0y1vhpm7] {
    background: transparent;
    border-color: #d1d5db;
    color: #6b7280;
}

.msg-btn-cancel:hover[b-fi0y1vhpm7] {
    background: #f3f4f6;
    color: #374151;
}

.is-dark .msg-btn-cancel[b-fi0y1vhpm7] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .msg-btn-cancel:hover[b-fi0y1vhpm7] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.msg-btn-primary[b-fi0y1vhpm7] {
    background: var(--theme-cta-gradient);
    color: var(--theme-btn-text);
}

.msg-btn-primary:hover[b-fi0y1vhpm7] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.4);
}
/* /Pages/Achievements/Achievements.razor.rz.scp.css */
/* ============================================
   ACHIEVEMENTS PAGE STYLES - Themed
   ============================================ */

/* Base Variables */
:root[b-kkduhpu0d3] {
    --achievements-radius: 14px;
    --achievements-radius-sm: 8px;
    --achievements-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page container */
.achievements-page[b-kkduhpu0d3] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
}

.achievements-container[b-kkduhpu0d3] {
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
}

/* Header section */
.achievements-header[b-kkduhpu0d3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.achievements-title-section[b-kkduhpu0d3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.achievements-title[b-kkduhpu0d3] {
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.achievements-title .icon[b-kkduhpu0d3] {
    width: 32px;
    height: 32px;
}

.achievements-subtitle[b-kkduhpu0d3] {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.8;
}

/* Buttons */
.btn[b-kkduhpu0d3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--achievements-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--achievements-transition);
    text-decoration: none;
}

.btn .icon[b-kkduhpu0d3] {
    width: 20px;
    height: 20px;
}

.btn-lg[b-kkduhpu0d3] {
    padding: 14px 28px;
    font-size: 1rem;
}

.btn-primary[b-kkduhpu0d3] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover[b-kkduhpu0d3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px transparent;
}

/* Quick Stats Section */
.achievements-stats-section[b-kkduhpu0d3] {
    width: 100%;
    margin-bottom: 24px;
}

.achievements-stats-grid[b-kkduhpu0d3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stat-card[b-kkduhpu0d3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    backdrop-filter: blur(10px);
    border-radius: var(--achievements-radius);
    transition: var(--achievements-transition);
    user-select: none;
    cursor: default;
}

.stat-card:hover[b-kkduhpu0d3] {
    transform: translateY(-2px);
}

.stat-card-icon[b-kkduhpu0d3] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card-icon svg[b-kkduhpu0d3] {
    width: 26px;
    height: 26px;
}

.stat-card-icon.points[b-kkduhpu0d3] { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
.stat-card-icon.unlocked[b-kkduhpu0d3] { background: linear-gradient(135deg, #f093fb, #f5576c); color: white; }
.stat-card-icon.locked[b-kkduhpu0d3] { background: linear-gradient(135deg, #94a3b8, #64748b); color: white; }
.stat-card-icon.completion[b-kkduhpu0d3] { background: linear-gradient(135deg, #10b981, #059669); color: white; }

.stat-card-value[b-kkduhpu0d3] {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.stat-card-label[b-kkduhpu0d3] {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.8;
}

/* Category Section */
.category-section[b-kkduhpu0d3] {
    margin-bottom: 32px;
}

.category-header[b-kkduhpu0d3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    backdrop-filter: blur(10px);
    border-radius: var(--achievements-radius);
    margin-bottom: 16px;
}

.category-title-wrapper[b-kkduhpu0d3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-icon[b-kkduhpu0d3] {
    width: 28px;
    height: 28px;
}

.category-title[b-kkduhpu0d3] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.category-badge[b-kkduhpu0d3] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Achievement Cards Grid */
.achievements-grid[b-kkduhpu0d3] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.achievement-card[b-kkduhpu0d3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    backdrop-filter: blur(10px);
    border-radius: var(--achievements-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--achievements-transition);
}

.achievement-card:hover[b-kkduhpu0d3] {
    transform: translateY(-4px);
}

.achievement-card.unlocked[b-kkduhpu0d3] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.achievement-card.locked[b-kkduhpu0d3] {
    opacity: 0.75;
}

.achievement-icon-wrapper[b-kkduhpu0d3] {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.achievement-icon-wrapper svg[b-kkduhpu0d3] {
    width: 48px;
    height: 48px;
}

.achievement-card.locked .achievement-icon-wrapper[b-kkduhpu0d3] {
    opacity: 0.5;
}

.achievement-name[b-kkduhpu0d3] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.achievement-description[b-kkduhpu0d3] {
    font-size: 0.8rem;
    margin: 0 0 12px;
    opacity: 0.9;
    line-height: 1.4;
}

.achievement-badges[b-kkduhpu0d3] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.achievement-badge[b-kkduhpu0d3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
}

.achievement-badge svg[b-kkduhpu0d3] {
    width: 12px;
    height: 12px;
}

.achievement-card.unlocked .achievement-badge[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Empty State */
.achievements-empty-state[b-kkduhpu0d3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    backdrop-filter: blur(10px);
    border-radius: var(--achievements-radius);
    text-align: center;
    gap: 12px;
}

.empty-icon[b-kkduhpu0d3] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.empty-icon svg[b-kkduhpu0d3] {
    width: 40px;
    height: 40px;
}

.empty-title[b-kkduhpu0d3] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.empty-subtitle[b-kkduhpu0d3] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

/* Quick Actions */
.quick-actions[b-kkduhpu0d3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    backdrop-filter: blur(10px);
    border-radius: var(--achievements-radius);
}

.action-link[b-kkduhpu0d3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--achievements-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--achievements-transition);
    border: none;
    cursor: pointer;
    background: transparent;
}

.action-link svg[b-kkduhpu0d3] {
    width: 18px;
    height: 18px;
}

/* Loading State */
.loading-container[b-kkduhpu0d3] {
    text-align: center;
    padding: 40px 20px;
}

.loading-bar[b-kkduhpu0d3] {
    height: 4px;
    background: rgba(240, 147, 251, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 16px;
}

.loading-bar-inner[b-kkduhpu0d3] {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #f093fb, #f5576c);
    border-radius: 2px;
    animation: loading-slide-b-kkduhpu0d3 1.5s ease-in-out infinite;
}

@keyframes loading-slide-b-kkduhpu0d3 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.loading-text[b-kkduhpu0d3] {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .achievements-grid[b-kkduhpu0d3] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 960px) {
    .achievements-stats-grid[b-kkduhpu0d3] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .achievements-header[b-kkduhpu0d3] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .achievements-grid[b-kkduhpu0d3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .achievements-page[b-kkduhpu0d3] {
        padding: 16px;
        padding-top: 72px;
    }
    
    .achievements-grid[b-kkduhpu0d3] {
        grid-template-columns: 1fr;
    }
    
    .category-header[b-kkduhpu0d3] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ============================================
   ☁️ CLOUD THEME
   ============================================ */
.achievements-page.theme-cloud[b-kkduhpu0d3] {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

.theme-cloud .achievements-title[b-kkduhpu0d3] { color: #1e3a5f; }
.theme-cloud .achievements-subtitle[b-kkduhpu0d3] { color: #475569; }

.theme-cloud .stat-card[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .stat-card:hover[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15);
}

.theme-cloud .stat-card-value[b-kkduhpu0d3] { color: #1e3a5f; }
.theme-cloud .stat-card-label[b-kkduhpu0d3] { color: #64748b; }

.theme-cloud .category-header[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .category-icon[b-kkduhpu0d3] { color: #7c3aed; }
.theme-cloud .category-title[b-kkduhpu0d3] { color: #1e3a5f; }
.theme-cloud .category-badge[b-kkduhpu0d3] { background: #ede9fe; color: #7c3aed; }

.theme-cloud .achievement-card[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .achievement-card:hover[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(240, 147, 251, 0.2);
    border-color: #f093fb;
}

.theme-cloud .achievement-card.locked[b-kkduhpu0d3] { background: rgba(247, 250, 252, 0.9); }
.theme-cloud .achievement-name[b-kkduhpu0d3] { color: #1e3a5f; }
.theme-cloud .achievement-description[b-kkduhpu0d3] { color: #64748b; }
.theme-cloud .achievement-badge[b-kkduhpu0d3] { background: #f1f5f9; color: #475569; }
.theme-cloud .achievement-icon-wrapper[b-kkduhpu0d3] { color: #7c3aed; }

.theme-cloud .achievements-empty-state[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .empty-icon[b-kkduhpu0d3] { background: rgba(240, 147, 251, 0.15); color: #f093fb; }
.theme-cloud .empty-title[b-kkduhpu0d3] { color: #f093fb; }
.theme-cloud .empty-subtitle[b-kkduhpu0d3] { color: #64748b; }

.theme-cloud .quick-actions[b-kkduhpu0d3] {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .action-link[b-kkduhpu0d3] { color: #7c3aed; }
.theme-cloud .action-link:hover[b-kkduhpu0d3] { background: rgba(124, 58, 237, 0.1); }
.theme-cloud .action-link.success[b-kkduhpu0d3] { color: #16a34a; }
.theme-cloud .action-link.success:hover[b-kkduhpu0d3] { background: rgba(22, 163, 74, 0.1); }
.theme-cloud .action-link.info[b-kkduhpu0d3] { color: #0284c7; }
.theme-cloud .action-link.info:hover[b-kkduhpu0d3] { background: rgba(2, 132, 199, 0.1); }

.theme-cloud .btn-primary[b-kkduhpu0d3] {
    background: linear-gradient(135deg, #1e3a5f 0%, #3b5998 100%);
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.3);
}

.theme-cloud .btn-primary:hover[b-kkduhpu0d3] {
    box-shadow: 0 6px 20px rgba(30, 58, 95, 0.4);
}

/* ============================================
   🚀 SPACE THEME
   ============================================ */
.achievements-page.theme-space[b-kkduhpu0d3] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

.theme-space .achievements-title[b-kkduhpu0d3] { color: #f1f5f9; }
.theme-space .achievements-subtitle[b-kkduhpu0d3] { color: #94a3b8; }

.theme-space .stat-card[b-kkduhpu0d3] {
    background: rgba(30, 27, 75, 0.7);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .stat-card:hover[b-kkduhpu0d3] {
    background: rgba(50, 45, 100, 0.8);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.25);
}

.theme-space .stat-card-value[b-kkduhpu0d3] { color: #f1f5f9; }
.theme-space .stat-card-label[b-kkduhpu0d3] { color: #94a3b8; }

.theme-space .category-header[b-kkduhpu0d3] {
    background: rgba(30, 27, 75, 0.7);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .category-icon[b-kkduhpu0d3] { color: #a855f7; }
.theme-space .category-title[b-kkduhpu0d3] { color: #f1f5f9; }
.theme-space .category-badge[b-kkduhpu0d3] { background: rgba(168, 85, 247, 0.2); color: #c4b5fd; }

.theme-space .achievement-card[b-kkduhpu0d3] {
    background: rgba(30, 27, 75, 0.7);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .achievement-card:hover[b-kkduhpu0d3] {
    background: rgba(50, 45, 100, 0.8);
    box-shadow: 0 8px 32px rgba(240, 147, 251, 0.25);
    border-color: #f093fb;
}

.theme-space .achievement-card.locked[b-kkduhpu0d3] { background: rgba(30, 27, 75, 0.5); }
.theme-space .achievement-name[b-kkduhpu0d3] { color: #f1f5f9; }
.theme-space .achievement-description[b-kkduhpu0d3] { color: #94a3b8; }
.theme-space .achievement-badge[b-kkduhpu0d3] { background: rgba(168, 85, 247, 0.2); color: #c4b5fd; }
.theme-space .achievement-icon-wrapper[b-kkduhpu0d3] { color: #a855f7; }

.theme-space .achievements-empty-state[b-kkduhpu0d3] {
    background: rgba(30, 27, 75, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .empty-icon[b-kkduhpu0d3] { background: rgba(240, 147, 251, 0.15); color: #f093fb; }
.theme-space .empty-title[b-kkduhpu0d3] { color: #f093fb; }
.theme-space .empty-subtitle[b-kkduhpu0d3] { color: #94a3b8; }

.theme-space .quick-actions[b-kkduhpu0d3] {
    background: rgba(30, 27, 75, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .action-link[b-kkduhpu0d3] { color: #c4b5fd; }
.theme-space .action-link:hover[b-kkduhpu0d3] { background: rgba(168, 85, 247, 0.15); }
.theme-space .action-link.success[b-kkduhpu0d3] { color: #86efac; }
.theme-space .action-link.success:hover[b-kkduhpu0d3] { background: rgba(134, 239, 172, 0.1); }
.theme-space .action-link.info[b-kkduhpu0d3] { color: #7dd3fc; }
.theme-space .action-link.info:hover[b-kkduhpu0d3] { background: rgba(125, 211, 252, 0.1); }

.theme-space .btn-primary[b-kkduhpu0d3] {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
}

.theme-space .btn-primary:hover[b-kkduhpu0d3] {
    box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4);
}

/* ============================================
   ❄️ WINTER THEME
   ============================================ */
.achievements-page.theme-winter[b-kkduhpu0d3] {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

.theme-winter .achievements-title[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-winter .achievements-subtitle[b-kkduhpu0d3] { color: #bae6fd; }

.theme-winter .stat-card[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .stat-card:hover[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.theme-winter .stat-card-value[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-winter .stat-card-label[b-kkduhpu0d3] { color: #bae6fd; }

.theme-winter .category-header[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .category-icon[b-kkduhpu0d3] { color: #67e8f9; }
.theme-winter .category-title[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-winter .category-badge[b-kkduhpu0d3] { background: rgba(103, 232, 249, 0.2); color: #67e8f9; }

.theme-winter .achievement-card[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .achievement-card:hover[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.3);
    box-shadow: 0 8px 24px rgba(240, 147, 251, 0.2);
    border-color: #f093fb;
}

.theme-winter .achievement-card.locked[b-kkduhpu0d3] { background: rgba(186, 230, 253, 0.1); }
.theme-winter .achievement-name[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-winter .achievement-description[b-kkduhpu0d3] { color: #bae6fd; }
.theme-winter .achievement-badge[b-kkduhpu0d3] { background: rgba(186, 230, 253, 0.2); color: #bae6fd; }
.theme-winter .achievement-icon-wrapper[b-kkduhpu0d3] { color: #67e8f9; }

.theme-winter .achievements-empty-state[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .empty-icon[b-kkduhpu0d3] { background: rgba(103, 232, 249, 0.2); color: #67e8f9; }
.theme-winter .empty-title[b-kkduhpu0d3] { color: #67e8f9; }
.theme-winter .empty-subtitle[b-kkduhpu0d3] { color: #bae6fd; }

.theme-winter .quick-actions[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .action-link[b-kkduhpu0d3] { color: #bae6fd; }
.theme-winter .action-link:hover[b-kkduhpu0d3] { background: rgba(186, 230, 253, 0.2); }
.theme-winter .action-link.success[b-kkduhpu0d3] { color: #86efac; }
.theme-winter .action-link.success:hover[b-kkduhpu0d3] { background: rgba(134, 239, 172, 0.1); }
.theme-winter .action-link.info[b-kkduhpu0d3] { color: #67e8f9; }
.theme-winter .action-link.info:hover[b-kkduhpu0d3] { background: rgba(103, 232, 249, 0.1); }

.theme-winter .btn-primary[b-kkduhpu0d3] {
    background: linear-gradient(135deg, #155e75 0%, #0891b2 100%);
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.3);
}

.theme-winter .btn-primary:hover[b-kkduhpu0d3] {
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
}

/* ============================================
   🌿 NATURE THEME
   ============================================ */
.achievements-page.theme-nature[b-kkduhpu0d3] {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);
}

.theme-nature .achievements-title[b-kkduhpu0d3] { color: #f0fdf4; }
.theme-nature .achievements-subtitle[b-kkduhpu0d3] { color: #bbf7d0; }

.theme-nature .stat-card[b-kkduhpu0d3] {
    background: rgba(187, 247, 208, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .stat-card:hover[b-kkduhpu0d3] {
    background: rgba(187, 247, 208, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.theme-nature .stat-card-value[b-kkduhpu0d3] { color: #f0fdf4; }
.theme-nature .stat-card-label[b-kkduhpu0d3] { color: #bbf7d0; }

.theme-nature .category-header[b-kkduhpu0d3] {
    background: rgba(187, 247, 208, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .category-icon[b-kkduhpu0d3] { color: #86efac; }
.theme-nature .category-title[b-kkduhpu0d3] { color: #f0fdf4; }
.theme-nature .category-badge[b-kkduhpu0d3] { background: rgba(134, 239, 172, 0.2); color: #86efac; }

.theme-nature .achievement-card[b-kkduhpu0d3] {
    background: rgba(187, 247, 208, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .achievement-card:hover[b-kkduhpu0d3] {
    background: rgba(187, 247, 208, 0.3);
    box-shadow: 0 8px 24px rgba(240, 147, 251, 0.2);
    border-color: #f093fb;
}

.theme-nature .achievement-card.locked[b-kkduhpu0d3] { background: rgba(187, 247, 208, 0.1); }
.theme-nature .achievement-name[b-kkduhpu0d3] { color: #f0fdf4; }
.theme-nature .achievement-description[b-kkduhpu0d3] { color: #bbf7d0; }
.theme-nature .achievement-badge[b-kkduhpu0d3] { background: rgba(187, 247, 208, 0.2); color: #bbf7d0; }
.theme-nature .achievement-icon-wrapper[b-kkduhpu0d3] { color: #86efac; }

.theme-nature .achievements-empty-state[b-kkduhpu0d3] {
    background: rgba(187, 247, 208, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .empty-icon[b-kkduhpu0d3] { background: rgba(134, 239, 172, 0.2); color: #86efac; }
.theme-nature .empty-title[b-kkduhpu0d3] { color: #86efac; }
.theme-nature .empty-subtitle[b-kkduhpu0d3] { color: #bbf7d0; }

.theme-nature .quick-actions[b-kkduhpu0d3] {
    background: rgba(187, 247, 208, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .action-link[b-kkduhpu0d3] { color: #bbf7d0; }
.theme-nature .action-link:hover[b-kkduhpu0d3] { background: rgba(187, 247, 208, 0.2); }
.theme-nature .action-link.success[b-kkduhpu0d3] { color: #86efac; }
.theme-nature .action-link.success:hover[b-kkduhpu0d3] { background: rgba(134, 239, 172, 0.15); }
.theme-nature .action-link.info[b-kkduhpu0d3] { color: #7dd3fc; }
.theme-nature .action-link.info:hover[b-kkduhpu0d3] { background: rgba(125, 211, 252, 0.1); }

.theme-nature .btn-primary[b-kkduhpu0d3] {
    background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3);
}

.theme-nature .btn-primary:hover[b-kkduhpu0d3] {
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

/* ============================================
   🌊 OCEAN THEME
   ============================================ */
.achievements-page.theme-ocean[b-kkduhpu0d3] {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 70%, #0ea5e9 100%);
}

.theme-ocean .achievements-title[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-ocean .achievements-subtitle[b-kkduhpu0d3] { color: #bae6fd; }

.theme-ocean .stat-card[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .stat-card:hover[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.theme-ocean .stat-card-value[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-ocean .stat-card-label[b-kkduhpu0d3] { color: #bae6fd; }

.theme-ocean .category-header[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .category-icon[b-kkduhpu0d3] { color: #7dd3fc; }
.theme-ocean .category-title[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-ocean .category-badge[b-kkduhpu0d3] { background: rgba(125, 211, 252, 0.2); color: #7dd3fc; }

.theme-ocean .achievement-card[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .achievement-card:hover[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.3);
    box-shadow: 0 8px 24px rgba(240, 147, 251, 0.2);
    border-color: #f093fb;
}

.theme-ocean .achievement-card.locked[b-kkduhpu0d3] { background: rgba(186, 230, 253, 0.1); }
.theme-ocean .achievement-name[b-kkduhpu0d3] { color: #f0f9ff; }
.theme-ocean .achievement-description[b-kkduhpu0d3] { color: #bae6fd; }
.theme-ocean .achievement-badge[b-kkduhpu0d3] { background: rgba(186, 230, 253, 0.2); color: #bae6fd; }
.theme-ocean .achievement-icon-wrapper[b-kkduhpu0d3] { color: #7dd3fc; }

.theme-ocean .achievements-empty-state[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .empty-icon[b-kkduhpu0d3] { background: rgba(125, 211, 252, 0.2); color: #7dd3fc; }
.theme-ocean .empty-title[b-kkduhpu0d3] { color: #7dd3fc; }
.theme-ocean .empty-subtitle[b-kkduhpu0d3] { color: #bae6fd; }

.theme-ocean .quick-actions[b-kkduhpu0d3] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .action-link[b-kkduhpu0d3] { color: #bae6fd; }
.theme-ocean .action-link:hover[b-kkduhpu0d3] { background: rgba(186, 230, 253, 0.2); }
.theme-ocean .action-link.success[b-kkduhpu0d3] { color: #86efac; }
.theme-ocean .action-link.success:hover[b-kkduhpu0d3] { background: rgba(134, 239, 172, 0.1); }
.theme-ocean .action-link.info[b-kkduhpu0d3] { color: #7dd3fc; }
.theme-ocean .action-link.info:hover[b-kkduhpu0d3] { background: rgba(125, 211, 252, 0.15); }

.theme-ocean .btn-primary[b-kkduhpu0d3] {
    background: linear-gradient(135deg, #075985 0%, #0284c7 100%);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.3);
}

.theme-ocean .btn-primary:hover[b-kkduhpu0d3] {
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}
/* /Pages/ActivateVipAccount.razor.rz.scp.css */
/* Activate VIP Account Page */
.activate-page[b-slr3bklhzf] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

/* Loading & Error States */
.loading-state[b-slr3bklhzf],
.error-state[b-slr3bklhzf],
.success-state[b-slr3bklhzf] {
    text-align: center;
    max-width: 400px;
    color: white;
}

.loading-icon[b-slr3bklhzf],
.success-icon[b-slr3bklhzf] {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: pulse-b-slr3bklhzf 1.5s ease-in-out infinite;
}

@keyframes pulse-b-slr3bklhzf {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.error-state h2[b-slr3bklhzf],
.success-state h2[b-slr3bklhzf],
.already-active-state h2[b-slr3bklhzf] {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: white;
}

.error-state p[b-slr3bklhzf],
.success-state p[b-slr3bklhzf],
.already-active-state p[b-slr3bklhzf] {
    color: rgba(255, 255, 255, 0.8);
}

.already-active-state[b-slr3bklhzf] {
    text-align: center;
}

.already-active-state .success-icon[b-slr3bklhzf] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.login-hint[b-slr3bklhzf] {
    margin-top: 1rem;
    font-size: 0.9rem;
}

.login-hint strong[b-slr3bklhzf] {
    color: white;
}

/* Activate Container */
.activate-container[b-slr3bklhzf] {
    width: 100%;
    max-width: 440px;
}

.activate-card[b-slr3bklhzf] {
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px transparent;
}

.card-header[b-slr3bklhzf] {
    text-align: center;
    margin-bottom: 2rem;
}

.vip-badge[b-slr3bklhzf] {
    display: inline-block;
    padding: 0.35rem 1rem;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.card-header h1[b-slr3bklhzf] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1e293b;
}

.card-header p[b-slr3bklhzf] {
    color: #64748b;
}

/* Form */
.activate-form[b-slr3bklhzf] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group[b-slr3bklhzf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-slr3bklhzf] {
    font-weight: 600;
    font-size: 0.9rem;
    color: #374151;
}

.form-input[b-slr3bklhzf] {
    padding: 0.875rem 1rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    color: #1e293b;
    font-size: 1rem;
    transition: all 0.2s;
}

.form-input[b-slr3bklhzf]::placeholder {
    color: #94a3b8;
}

.form-input:focus[b-slr3bklhzf] {
    outline: none;
    border-color: #6366f1;
    background: white;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-input.disabled[b-slr3bklhzf] {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

.input-hint[b-slr3bklhzf] {
    font-size: 0.8rem;
    color: #94a3b8;
}

.validation-error[b-slr3bklhzf] {
    color: #ef4444;
    font-size: 0.85rem;
}

.error-list[b-slr3bklhzf] {
    padding: 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}

.error-list p[b-slr3bklhzf] {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    color: #dc2626;
}

/* Activate Button */
.btn-activate[b-slr3bklhzf] {
    margin-top: 0.5rem;
    padding: 1rem;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-activate:hover:not(:disabled)[b-slr3bklhzf] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
}

.btn-activate:disabled[b-slr3bklhzf] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Login Link */
.login-link[b-slr3bklhzf] {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #64748b;
}

.login-link a[b-slr3bklhzf] {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

.login-link a:hover[b-slr3bklhzf] {
    text-decoration: underline;
}

/* Theme background variations (card stays white for readability) */
.activate-page.theme-cloud[b-slr3bklhzf] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.activate-page.theme-ocean[b-slr3bklhzf] {
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

.activate-page.theme-nature[b-slr3bklhzf] {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
}

.activate-page.theme-winter[b-slr3bklhzf] {
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
}

.activate-page.theme-mystic[b-slr3bklhzf] {
    background: linear-gradient(135deg, #4a1a6b 0%, #9333ea 50%, #c026d3 100%);
}
/* /Pages/Admin/AchievementEditDialog.razor.rz.scp.css */
.confirm-dialog-overlay[b-kaqmldgfhl] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        animation: fadeIn-b-kaqmldgfhl 0.2s ease;
    }

    .achievement-dialog[b-kaqmldgfhl] {
        background: var(--theme-surface, #fff);
        border-radius: 12px;
        box-shadow: 0 20px 60px transparent;
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: slideIn-b-kaqmldgfhl 0.2s ease;
    }

    .dialog-header[b-kaqmldgfhl] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--theme-border, #e2e8f0);
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }

    .dialog-title[b-kaqmldgfhl] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .close-btn[b-kaqmldgfhl] {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 6px;
        padding: 0.25rem;
        cursor: pointer;
        color: white;
        transition: background 0.2s;
    }
    .close-btn:hover[b-kaqmldgfhl] { background: rgba(255, 255, 255, 0.3); }

    .dialog-content[b-kaqmldgfhl] {
        padding: 1.5rem;
        overflow-y: auto;
        flex: 1;
    }

    .form-group[b-kaqmldgfhl] {
        margin-bottom: 1rem;
    }

    .form-group label[b-kaqmldgfhl] {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--theme-text-secondary, #64748b);
        margin-bottom: 0.375rem;
    }

    .required[b-kaqmldgfhl] { color: #ef4444; }

    .form-input[b-kaqmldgfhl], .form-select[b-kaqmldgfhl], .form-textarea[b-kaqmldgfhl] {
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.9rem;
        border: 1px solid var(--theme-border, #e2e8f0);
        border-radius: 8px;
        background: var(--theme-surface, #fff);
        color: var(--theme-text-primary, #1e293b);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-input:focus[b-kaqmldgfhl], .form-select:focus[b-kaqmldgfhl], .form-textarea:focus[b-kaqmldgfhl] {
        outline: none;
        border-color: #f59e0b;
        box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
    }

    .input-error[b-kaqmldgfhl] {
        border-color: #ef4444 !important;
    }

    .error-message[b-kaqmldgfhl] {
        display: block;
        color: #ef4444;
        font-size: 0.75rem;
        margin-top: 0.25rem;
    }

    .helper-text[b-kaqmldgfhl] {
        display: block;
        font-size: 0.75rem;
        color: var(--theme-text-secondary, #64748b);
        margin-top: 0.25rem;
    }

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

    .dialog-actions[b-kaqmldgfhl] {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--theme-border, #e2e8f0);
        background: var(--theme-surface-secondary, #f8fafc);
    }

    .btn[b-kaqmldgfhl] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-secondary[b-kaqmldgfhl] {
        background: var(--theme-surface, #fff);
        color: var(--theme-text-primary, #1e293b);
        border: 1px solid var(--theme-border, #e2e8f0);
    }
    .btn-secondary:hover[b-kaqmldgfhl] { background: var(--theme-surface-secondary, #f1f5f9); }

    .btn-primary[b-kaqmldgfhl] {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
        color: white;
    }
    .btn-primary:hover:not(:disabled)[b-kaqmldgfhl] { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
    .btn-primary:disabled[b-kaqmldgfhl] { opacity: 0.6; cursor: not-allowed; }

    @keyframes fadeIn-b-kaqmldgfhl { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn-b-kaqmldgfhl { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

    @media (max-width: 600px) {
        .form-row[b-kaqmldgfhl] { grid-template-columns: 1fr; }
    }
/* /Pages/Admin/AIProviders.razor.rz.scp.css */
/* ============================================
   AIProviders.razor.css - Admin AI Configuration
   Scoped CSS following THEMING_INITIATIVE.md
   ============================================ */

/* Page Container */
.ai-providers-page[b-cv8tbwnhu2] {
    width: 100%;
    min-height: calc(100vh - 56px);
    padding: 1.5rem 2rem 2rem;
}

/* Page Header */
.page-header[b-cv8tbwnhu2] {
    margin-bottom: 2rem;
}

.page-header-title[b-cv8tbwnhu2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header-title svg.icon[b-cv8tbwnhu2] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--theme-accent, var(--theme-primary));
}

.page-header-title h1[b-cv8tbwnhu2] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--theme-text-primary);
}

.page-header-title p[b-cv8tbwnhu2] {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
}

/* Card Grid */
.card-grid[b-cv8tbwnhu2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Cards */
.card[b-cv8tbwnhu2] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--theme-border);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.card-header[b-cv8tbwnhu2] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-header.simple[b-cv8tbwnhu2] {
    margin-bottom: 1.5rem;
}

.card-icon[b-cv8tbwnhu2] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon svg[b-cv8tbwnhu2] {
    width: 24px;
    height: 24px;
}

.card-icon.status-success[b-cv8tbwnhu2] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--theme-text-success, #22c55e);
}

.card-icon.status-error[b-cv8tbwnhu2] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--theme-text-danger, #ef4444);
}

.card-title[b-cv8tbwnhu2] {
    flex: 1;
}

.card-title h3[b-cv8tbwnhu2] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.card-title p[b-cv8tbwnhu2] {
    margin: 0;
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
}

.card-title-inline[b-cv8tbwnhu2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.card-title-inline svg.icon[b-cv8tbwnhu2] {
    width: 20px;
    height: 20px;
    color: var(--theme-text-secondary);
    flex-shrink: 0;
}

.card-title-inline h3[b-cv8tbwnhu2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Status Chips */
.status-chip[b-cv8tbwnhu2] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.chip-success[b-cv8tbwnhu2] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--theme-text-success, #22c55e);
}

.chip-error[b-cv8tbwnhu2] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--theme-text-danger, #ef4444);
}

.chip-primary[b-cv8tbwnhu2] {
    background: rgba(99, 102, 241, 0.15);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.chip-info[b-cv8tbwnhu2] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Feature List */
.feature-list[b-cv8tbwnhu2] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list li[b-cv8tbwnhu2] {
    padding: 0.5rem 0;
    color: var(--theme-text-primary);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--theme-border);
}

.feature-list li:last-child[b-cv8tbwnhu2] {
    border-bottom: none;
}

/* Form Elements */
.form-grid[b-cv8tbwnhu2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group[b-cv8tbwnhu2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-cv8tbwnhu2] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-group textarea[b-cv8tbwnhu2],
.form-group input[b-cv8tbwnhu2] {
    padding: 0.75rem 1rem;
    background: var(--theme-surface-secondary, var(--theme-surface));
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text-primary);
    font-size: 0.875rem;
    resize: vertical;
}

.form-group textarea:focus[b-cv8tbwnhu2],
.form-group input:focus[b-cv8tbwnhu2] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-actions[b-cv8tbwnhu2] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-cv8tbwnhu2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary[b-cv8tbwnhu2] {
    background: var(--theme-primary, #6366f1);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-cv8tbwnhu2] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-primary:disabled[b-cv8tbwnhu2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner[b-cv8tbwnhu2] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-cv8tbwnhu2 0.8s linear infinite;
}

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

/* Results */
.result-header[b-cv8tbwnhu2] {
    margin: 1rem 0 0.5rem 0;
}

.result-header h4[b-cv8tbwnhu2] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

.result-box[b-cv8tbwnhu2] {
    background: var(--theme-surface-secondary, var(--theme-surface));
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
}

.result-box pre[b-cv8tbwnhu2] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--theme-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Data Table */
.table-responsive[b-cv8tbwnhu2] {
    overflow-x: auto;
}

.data-table[b-cv8tbwnhu2] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-cv8tbwnhu2],
.data-table td[b-cv8tbwnhu2] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
}

.data-table th[b-cv8tbwnhu2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table td[b-cv8tbwnhu2] {
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.data-table code[b-cv8tbwnhu2] {
    background: rgba(99, 102, 241, 0.15);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.row-highlight[b-cv8tbwnhu2] {
    background: rgba(99, 102, 241, 0.08);
}

/* Details/Summary */
details[b-cv8tbwnhu2] {
    border: none;
}

.summary-header[b-cv8tbwnhu2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    cursor: pointer;
    font-weight: 600;
    color: var(--theme-text-primary);
    list-style: none;
}

.summary-header[b-cv8tbwnhu2]::-webkit-details-marker {
    display: none;
}

.summary-header[b-cv8tbwnhu2]::before {
    content: "▶";
    font-size: 0.75rem;
    transition: transform 0.2s;
    color: var(--theme-text-secondary);
}

details[open] .summary-header[b-cv8tbwnhu2]::before {
    transform: rotate(90deg);
}

.config-steps[b-cv8tbwnhu2] {
    padding: 1rem 0 0 1.5rem;
}

.config-steps p[b-cv8tbwnhu2] {
    margin: 0.5rem 0;
    color: var(--theme-text-primary);
    font-size: 0.875rem;
}

.config-steps code[b-cv8tbwnhu2] {
    background: rgba(99, 102, 241, 0.15);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.config-steps h4[b-cv8tbwnhu2] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
}

.code-block[b-cv8tbwnhu2] {
    background: var(--theme-surface-secondary, var(--theme-surface));
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.8rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    overflow-x: auto;
    margin: 0.5rem 0;
}

hr[b-cv8tbwnhu2] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 1.5rem 0;
}

/* ============================================
   Enhanced Test Section Styles
   ============================================ */

.section-title[b-cv8tbwnhu2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-cv8tbwnhu2] {
    width: 24px;
    height: 24px;
    color: var(--theme-primary-ink, var(--theme-primary));
}

.test-section[b-cv8tbwnhu2] {
    margin-bottom: 1.5rem;
}

.test-grid[b-cv8tbwnhu2] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .test-grid[b-cv8tbwnhu2] {
        grid-template-columns: 1fr;
    }
}

.test-panel[b-cv8tbwnhu2] {
    background: var(--theme-surface);
    border-radius: 16px;
    border: 1px solid var(--theme-border);
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.test-panel:hover[b-cv8tbwnhu2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.15);
}

.panel-header[b-cv8tbwnhu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--theme-border);
}

.openai-panel .panel-header[b-cv8tbwnhu2] {
    background: linear-gradient(135deg, rgba(16, 163, 127, 0.08) 0%, rgba(16, 163, 127, 0.02) 100%);
}

.gemini-panel .panel-header[b-cv8tbwnhu2] {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.08) 0%, rgba(66, 133, 244, 0.02) 100%);
}

.provider-badge[b-cv8tbwnhu2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
}

.provider-badge svg[b-cv8tbwnhu2] {
    width: 24px;
    height: 24px;
}

.provider-badge.openai[b-cv8tbwnhu2] {
    color: #10a37f;
}

.provider-badge.gemini[b-cv8tbwnhu2] {
    color: #4285f4;
}

.status-indicator[b-cv8tbwnhu2] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

.status-indicator.connected[b-cv8tbwnhu2] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.status-indicator.disconnected[b-cv8tbwnhu2] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.panel-body[b-cv8tbwnhu2] {
    padding: 1.25rem;
}

.panel-body .form-group[b-cv8tbwnhu2] {
    margin-bottom: 1rem;
}

.panel-body textarea[b-cv8tbwnhu2] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    color: var(--theme-text-primary);
    font-size: 0.875rem;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.panel-body textarea:focus[b-cv8tbwnhu2] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Provider-specific buttons */
.btn-openai[b-cv8tbwnhu2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #10a37f 0%, #0d8a6a 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-openai:hover:not(:disabled)[b-cv8tbwnhu2] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 163, 127, 0.3);
}

.btn-openai:disabled[b-cv8tbwnhu2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-openai svg[b-cv8tbwnhu2] {
    width: 16px;
    height: 16px;
}

.btn-gemini[b-cv8tbwnhu2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #4285f4 0%, #3367d6 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-gemini:hover:not(:disabled)[b-cv8tbwnhu2] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.btn-gemini:disabled[b-cv8tbwnhu2] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-gemini svg[b-cv8tbwnhu2] {
    width: 16px;
    height: 16px;
}

/* Result container */
.result-container[b-cv8tbwnhu2] {
    margin-top: 1rem;
    animation: fadeIn-b-cv8tbwnhu2 0.3s ease;
}

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

.result-meta[b-cv8tbwnhu2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.response-time[b-cv8tbwnhu2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
    background: rgba(99, 102, 241, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

/* ============================================
   Enhanced Pricing Table Styles
   ============================================ */

.pricing-card .card-title-inline .subtitle[b-cv8tbwnhu2] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    margin-top: 0.125rem;
}

.pricing-table[b-cv8tbwnhu2] {
    border-radius: 12px;
    overflow: hidden;
}

.provider-divider[b-cv8tbwnhu2] {
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.03));
    padding: 0.5rem 1rem !important;
    border-bottom: none !important;
}

.provider-label[b-cv8tbwnhu2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.provider-label.openai[b-cv8tbwnhu2] {
    color: #10a37f;
}

.provider-label.gemini[b-cv8tbwnhu2] {
    color: #4285f4;
}

.model-chip[b-cv8tbwnhu2] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.model-chip.openai[b-cv8tbwnhu2] {
    background: rgba(16, 163, 127, 0.12);
    color: #10a37f;
}

.model-chip.openai-image[b-cv8tbwnhu2] {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}

.model-chip.gemini[b-cv8tbwnhu2] {
    background: rgba(66, 133, 244, 0.12);
    color: #4285f4;
}

.default-badge[b-cv8tbwnhu2] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--theme-primary);
    color: white;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.credit-badge[b-cv8tbwnhu2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, #818cf8 100%);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
}

/* Dark theme adjustments */
:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean) .test-panel[b-cv8tbwnhu2] {
    background: rgba(30, 41, 59, 0.8);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean) .panel-body textarea[b-cv8tbwnhu2] {
    background: rgba(0, 0, 0, 0.2);
}

:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean) .provider-divider[b-cv8tbwnhu2] {
    background: rgba(255, 255, 255, 0.05);
}

/* GEM38-1: the pricing table now renders every catalog provider, not just the two hand-typed ones. */
.provider-label.claude[b-cv8tbwnhu2] {
    color: #d97706;
}

.provider-label.internal[b-cv8tbwnhu2],
.provider-label.local[b-cv8tbwnhu2] {
    color: #6b7280;
}

.model-chip.claude[b-cv8tbwnhu2] {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}

.model-chip.internal[b-cv8tbwnhu2],
.model-chip.local[b-cv8tbwnhu2] {
    background: rgba(107, 114, 128, 0.12);
    color: #4b5563;
}

.pricing-table code[b-cv8tbwnhu2] {
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}
/* /Pages/Admin/AIUsageReport.razor.rz.scp.css */
/* ============================================
   AIUsageReport.razor.css - Admin AI Usage Dashboard
   Scoped CSS following THEMING_INITIATIVE.md
   Updated with VIP tracking analytics
   ============================================ */

/* Scope styles to the page container */
.page-container[b-dl3pxm78ak] {
    width: 100%;
}

/* Page Header */

.header-content h1[b-dl3pxm78ak] {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.title-icon[b-dl3pxm78ak] {
    width: 32px;
    height: 32px;
    color: var(--theme-accent, var(--theme-primary));
}

.subtitle[b-dl3pxm78ak] {
    color: var(--theme-text-secondary);
    margin: 0;
    font-size: 1rem;
}

/* Header Filters */
.header-filters[b-dl3pxm78ak] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--theme-surface);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
}

.date-group[b-dl3pxm78ak] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.date-group label[b-dl3pxm78ak] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    letter-spacing: 0.05em;
}

.form-control[b-dl3pxm78ak] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    background: var(--theme-surface, #fff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.875rem;
    transition: all 0.2s;
}

.form-control:focus[b-dl3pxm78ak] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn[b-dl3pxm78ak] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    height: 38px;
}

.btn-primary[b-dl3pxm78ak] {
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #818cf8) 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-dl3pxm78ak] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn:disabled[b-dl3pxm78ak] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Stats Grid */
.stats-grid[b-dl3pxm78ak] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

.stat-card[b-dl3pxm78ak] {
    background: var(--theme-surface);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.2s;
}

.stat-card:hover[b-dl3pxm78ak] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.stat-card-cost[b-dl3pxm78ak] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.2);
}

.stat-icon[b-dl3pxm78ak] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-users[b-dl3pxm78ak] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.icon-chats[b-dl3pxm78ak] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.icon-images[b-dl3pxm78ak] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.icon-tokens[b-dl3pxm78ak] { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.icon-cost[b-dl3pxm78ak] { background: rgba(16, 185, 129, 0.15); color: #10b981; }

.stat-value[b-dl3pxm78ak] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.stat-label[b-dl3pxm78ak] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
}

/* Analytics Section */
.analytics-section[b-dl3pxm78ak] {
    margin-bottom: 2.5rem;
}

.section-title[b-dl3pxm78ak] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 1.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.analytics-grid[b-dl3pxm78ak] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 1.5rem;
}

.analytics-card[b-dl3pxm78ak] {
    min-height: 280px;
}

.analytics-card .card-header[b-dl3pxm78ak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.analytics-card .card-header h3[b-dl3pxm78ak] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--theme-text-primary);
}

.card-badge[b-dl3pxm78ak] {
    font-size: 0.65rem;
    padding: 0.25rem 0.5rem;
}

.analytics-content[b-dl3pxm78ak] {
    padding: 1rem 1.5rem 1.5rem;
}

/* Analytics Bars */
.analytics-bars[b-dl3pxm78ak] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analytics-bar-item[b-dl3pxm78ak] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.bar-header[b-dl3pxm78ak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bar-label[b-dl3pxm78ak] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bar-value[b-dl3pxm78ak] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    font-variant-numeric: tabular-nums;
}

.bar-track[b-dl3pxm78ak] {
    height: 8px;
    background: var(--theme-surface-secondary, rgba(0,0,0,0.05));
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill[b-dl3pxm78ak] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.bar-vip[b-dl3pxm78ak] { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.bar-referral[b-dl3pxm78ak] { background: linear-gradient(90deg, #6366f1, #818cf8); }
.bar-organic[b-dl3pxm78ak] { background: linear-gradient(90deg, #10b981, #34d399); }
.bar-unknown[b-dl3pxm78ak] { background: linear-gradient(90deg, #64748b, #94a3b8); }

.bar-meta[b-dl3pxm78ak] {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

/* Tier Cards */
.tier-cards[b-dl3pxm78ak] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tier-card[b-dl3pxm78ak] {
    background: var(--theme-surface-secondary, rgba(0,0,0,0.02));
    border-radius: 10px;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--theme-border);
    transition: all 0.2s;
}

.tier-card:hover[b-dl3pxm78ak] {
    background: var(--theme-surface-secondary, rgba(0,0,0,0.04));
    transform: translateX(4px);
}

/* Tier-specific colors */
.tier-scale[b-dl3pxm78ak] { 
    border-left-color: #f59e0b; 
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08), transparent);
}
.tier-growth[b-dl3pxm78ak] { 
    border-left-color: #3b82f6; 
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), transparent);
}
.tier-starter[b-dl3pxm78ak] { 
    border-left-color: #10b981; 
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), transparent);
}
.tier-admin[b-dl3pxm78ak] { 
    border-left-color: #ef4444; 
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), transparent);
}
.tier-default[b-dl3pxm78ak] { 
    border-left-color: #64748b; 
}

.tier-header[b-dl3pxm78ak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.tier-name[b-dl3pxm78ak] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tier-cost[b-dl3pxm78ak] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--theme-text-primary);
    font-variant-numeric: tabular-nums;
}

.tier-stats[b-dl3pxm78ak] {
    display: flex;
    gap: 1.5rem;
}

.tier-stat[b-dl3pxm78ak] {
    display: flex;
    flex-direction: column;
}

.tier-stat-value[b-dl3pxm78ak] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-text-primary);
}

.tier-stat-label[b-dl3pxm78ak] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary);
}

/* Empty State */
.empty-state[b-dl3pxm78ak] {
    padding: 2rem;
    text-align: center;
    color: var(--theme-text-secondary);
}

.empty-state p[b-dl3pxm78ak] {
    margin: 0;
    font-size: 0.875rem;
}

/* Card & Table Styles */
.card[b-dl3pxm78ak] {
    background: var(--theme-surface);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
    overflow: hidden;
}

.card-header[b-dl3pxm78ak] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--theme-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h2[b-dl3pxm78ak] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-count[b-dl3pxm78ak] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    background: var(--theme-surface-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
}

.table-responsive[b-dl3pxm78ak] {
    overflow-x: auto;
}

.data-table[b-dl3pxm78ak] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-dl3pxm78ak],
.data-table td[b-dl3pxm78ak] {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
}

.data-table th[b-dl3pxm78ak] {
    background: var(--theme-surface-secondary);
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
    position: sticky;
    top: 0;
}

.data-table tbody tr[b-dl3pxm78ak] {
    transition: background 0.15s;
}

.data-table tbody tr:hover[b-dl3pxm78ak] {
    background-color: var(--theme-surface-secondary);
}

/* User Cell */
.user-cell[b-dl3pxm78ak] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 200px;
}

.user-avatar[b-dl3pxm78ak] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #a855f7) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Tier-based avatar colors */
.user-avatar.avatar-scale[b-dl3pxm78ak] {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}
.user-avatar.avatar-growth[b-dl3pxm78ak] {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}
.user-avatar.avatar-starter[b-dl3pxm78ak] {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}
.user-avatar.avatar-admin[b-dl3pxm78ak] {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.user-info[b-dl3pxm78ak] {
    min-width: 0;
    flex: 1;
}

.user-name[b-dl3pxm78ak] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.user-email[b-dl3pxm78ak] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.text-right[b-dl3pxm78ak] { text-align: right !important; }
.text-center[b-dl3pxm78ak] { text-align: center !important; }
.text-secondary[b-dl3pxm78ak] { color: var(--theme-text-secondary) !important; }
.tabular-nums[b-dl3pxm78ak] { font-variant-numeric: tabular-nums; }

.cost-cell[b-dl3pxm78ak] {
    font-weight: 500;
    color: #10b981 !important;
}

/* Badges */
.badge[b-dl3pxm78ak] {
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: inline-block;
    white-space: nowrap;
}

.badge-success[b-dl3pxm78ak] { background: rgba(34, 197, 94, 0.15); color: #15803d; }
.badge-info[b-dl3pxm78ak] { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.badge-primary[b-dl3pxm78ak] { background: rgba(99, 102, 241, 0.15); color: #4338ca; }
.badge-warning[b-dl3pxm78ak] { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.badge-danger[b-dl3pxm78ak] { background: rgba(239, 68, 68, 0.15); color: #b91c1c; }
.badge-purple[b-dl3pxm78ak] { background: rgba(168, 85, 247, 0.15); color: #7e22ce; }
.badge-secondary[b-dl3pxm78ak] { background: rgba(100, 116, 139, 0.15); color: #475569; }
.badge-blue[b-dl3pxm78ak] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.badge-green[b-dl3pxm78ak] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.badge-teal[b-dl3pxm78ak] { background: rgba(20, 184, 166, 0.15); color: #0d9488; }
.badge-gold[b-dl3pxm78ak] { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.badge-orange[b-dl3pxm78ak] { background: rgba(249, 115, 22, 0.15); color: #ea580c; }
.badge-red[b-dl3pxm78ak] { background: rgba(239, 68, 68, 0.15); color: #dc2626; }

/* VIP/Source badges */
.badge-vip[b-dl3pxm78ak] { 
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 191, 36, 0.15)); 
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge-referral[b-dl3pxm78ak] { 
    background: rgba(99, 102, 241, 0.15); 
    color: #4f46e5; 
}
.badge-organic[b-dl3pxm78ak] { 
    background: rgba(16, 185, 129, 0.15); 
    color: #059669; 
}

/* Icon Button */
.btn-icon[b-dl3pxm78ak] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    transition: all 0.2s;
}

.btn-icon:hover[b-dl3pxm78ak] {
    background: var(--theme-surface-secondary);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.btn-icon svg[b-dl3pxm78ak] {
    width: 18px;
    height: 18px;
}

/* Loading State */
.loading-state[b-dl3pxm78ak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--theme-text-secondary);
}

.loading-spinner[b-dl3pxm78ak] {
    border: 3px solid rgba(99, 102, 241, 0.1);
    border-left-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-dl3pxm78ak 1s linear infinite;
    margin-bottom: 1rem;
}

.spinner-sm[b-dl3pxm78ak] {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-left-color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin-b-dl3pxm78ak 1s linear infinite;
    display: inline-block;
}

@keyframes spin-b-dl3pxm78ak { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ============================================
   TRON THEME OVERRIDES (Experimental)
   ============================================ */
.theme-tron[b-dl3pxm78ak] {
    --tron-cyan: #00d4ff;
    --tron-orange: #ff6a00;
    --tron-glow: 0 0 20px rgba(0, 212, 255, 0.3);
}

.theme-tron .stat-card[b-dl3pxm78ak] {
    background: rgba(0, 20, 40, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1);
}

.theme-tron .stat-card:hover[b-dl3pxm78ak] {
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.2);
}

.theme-tron .stat-value[b-dl3pxm78ak] {
    color: #00d4ff;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.theme-tron .card[b-dl3pxm78ak] {
    background: rgba(0, 20, 40, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.theme-tron .card-header[b-dl3pxm78ak] {
    border-bottom-color: rgba(0, 212, 255, 0.2);
}

.theme-tron .data-table th[b-dl3pxm78ak] {
    background: rgba(0, 212, 255, 0.1);
    color: #00d4ff;
}

.theme-tron .data-table tbody tr:hover[b-dl3pxm78ak] {
    background: rgba(0, 212, 255, 0.05);
}

.theme-tron .user-avatar[b-dl3pxm78ak] {
    background: linear-gradient(135deg, #00d4ff 0%, #0080ff 100%);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.theme-tron .btn-primary[b-dl3pxm78ak] {
    background: linear-gradient(135deg, #00d4ff 0%, #0080ff 100%);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.theme-tron .btn-primary:hover:not(:disabled)[b-dl3pxm78ak] {
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.5);
}

.theme-tron .cost-cell[b-dl3pxm78ak] {
    color: #00ffaa !important;
    text-shadow: 0 0 5px rgba(0, 255, 170, 0.3);
}

.theme-tron .analytics-card[b-dl3pxm78ak] {
    background: rgba(0, 20, 40, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.theme-tron .bar-vip[b-dl3pxm78ak] { 
    background: linear-gradient(90deg, #ff6a00, #ff9500); 
    box-shadow: 0 0 10px rgba(255, 106, 0, 0.3);
}
.theme-tron .bar-referral[b-dl3pxm78ak] { 
    background: linear-gradient(90deg, #00d4ff, #00ffff); 
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}
.theme-tron .bar-organic[b-dl3pxm78ak] { 
    background: linear-gradient(90deg, #00ff88, #00ffaa); 
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}

.theme-tron .tier-card[b-dl3pxm78ak] {
    background: rgba(0, 212, 255, 0.05);
    border-left-width: 2px;
}

.theme-tron .badge-vip[b-dl3pxm78ak] {
    background: rgba(255, 106, 0, 0.2);
    color: #ff9500;
    border-color: rgba(255, 106, 0, 0.4);
    text-shadow: 0 0 5px rgba(255, 106, 0, 0.3);
}

/* Media Queries */
@media (max-width: 768px) {
    .header-filters[b-dl3pxm78ak] {
        width: 100%;
        justify-content: space-between;
    }
    
    .date-group[b-dl3pxm78ak], .btn[b-dl3pxm78ak] {
        flex: 1;
    }
    
    .stats-grid[b-dl3pxm78ak] {
        grid-template-columns: repeat(2, 1fr);
    }

    .analytics-grid[b-dl3pxm78ak] {
        grid-template-columns: 1fr;
    }
    
    .user-cell[b-dl3pxm78ak] {
        min-width: 150px;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-dl3pxm78ak] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/Analytics.razor.rz.scp.css */
/* ============================================
   Analytics Dashboard - Using Theme Variables
   ============================================ */

.analytics-page[b-j14klvgzki] {
    min-height: calc(100vh - var(--header-height));
    padding: 24px;
    transition: background 0.5s ease;
    background: var(--theme-page-bg);
}

/* Hero Section */
.analytics-hero[b-j14klvgzki] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    border-radius: 16px;
    padding: 32px;
    color: white;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 10px 15px -3px var(--theme-shadow-color);
}

.hero-content h1[b-j14klvgzki] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.hero-content p[b-j14klvgzki] {
    font-size: 1.1rem;
    opacity: 0.9;
    margin: 0;
}

.hero-controls[b-j14klvgzki] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.select-wrapper[b-j14klvgzki] {
    position: relative;
    min-width: 160px;
}

.time-select[b-j14klvgzki] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.time-select option[b-j14klvgzki] {
    background: var(--theme-surface);
    color: var(--theme-text-primary);
}

.time-select:focus[b-j14klvgzki] {
    outline: none;
    background: rgba(255, 255, 255, 0.3);
}

.btn-refresh[b-j14klvgzki] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-refresh:hover[b-j14klvgzki] {
    background: rgba(255, 255, 255, 0.3);
}

/* Metrics Grid */
.metrics-grid[b-j14klvgzki] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.metric-card[b-j14klvgzki] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
    border-top: 4px solid;
    text-align: center;
}

.metric-card.primary[b-j14klvgzki] { border-top-color: #3b82f6; }
.metric-card.success[b-j14klvgzki] { border-top-color: #10b981; }
.metric-card.info[b-j14klvgzki] { border-top-color: #0ea5e9; }
.metric-card.warning[b-j14klvgzki] { border-top-color: #f59e0b; }
.metric-card.error[b-j14klvgzki] { border-top-color: #ef4444; }

.metric-value[b-j14klvgzki] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--theme-text-primary);
    display: block;
}

.metric-label[b-j14klvgzki] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Sections Grid */
.sections-grid[b-j14klvgzki] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.col-full[b-j14klvgzki] { grid-column: span 12; }
.col-half[b-j14klvgzki] { grid-column: span 6; }
.col-card-map[b-j14klvgzki] { grid-column: span 8; }
.col-card-list[b-j14klvgzki] { grid-column: span 4; }

@media (max-width: 960px) {
    .col-card-map[b-j14klvgzki], .col-card-list[b-j14klvgzki], .col-half[b-j14klvgzki] {
        grid-column: span 12;
    }
}

.section-card[b-j14klvgzki] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header[b-j14klvgzki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title[b-j14klvgzki] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Map */
#visitor-map[b-j14klvgzki] {
    height: 400px;
    width: 100%;
    background-color: var(--theme-surface-secondary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
}

/* Lists */
.list-item[b-j14klvgzki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--theme-border);
}

.list-item:last-child[b-j14klvgzki] { border-bottom: none; }

.item-content[b-j14klvgzki] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-text[b-j14klvgzki] {
    font-size: 0.95rem;
    color: var(--theme-text-primary);
    font-weight: 500;
}

.item-caption[b-j14klvgzki] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    display: block;
}

/* Chips */
.chip[b-j14klvgzki] {
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.chip-primary[b-j14klvgzki] { background: var(--theme-bg-info); color: var(--theme-text-info); }
.chip-success[b-j14klvgzki] { background: var(--theme-bg-success); color: var(--theme-text-success); }
.chip-info[b-j14klvgzki] { background: var(--theme-bg-info); color: var(--theme-text-info); }
.chip-warning[b-j14klvgzki] { background: var(--theme-bg-warning); color: var(--theme-text-warning); }
.chip-error[b-j14klvgzki] { background: var(--theme-bg-danger); color: var(--theme-text-danger); }
.chip-secondary[b-j14klvgzki] { background: var(--theme-surface-secondary); border: 1px solid var(--theme-border); color: var(--theme-text-secondary); }
.chip-tour[b-j14klvgzki] { background: rgba(139, 92, 246, 0.16); color: #a78bfa; }

/* ANALYTICS-DARK-1 (2026-09-09, Josh: "this page is tough to read on the dark themes").
   The Cohorts and Guided Tours tables were built from inline styles that dim by OPACITY
   (0.5-0.75) over text that never set a colour, so on the dark themes they inherited a
   muted body ink and then faded it again - header, dates and tour names went to nothing.
   Ink comes from the theme's text tokens; "quieter" is --theme-text-secondary, never
   opacity. Same lesson as TOUR-BTN-SLATE-1. */
.section-card[b-j14klvgzki] { color: var(--theme-text-primary); }

.score-table[b-j14klvgzki] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    color: var(--theme-text-primary);
}
.score-table thead tr[b-j14klvgzki] {
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    font-size: 0.72em;
    letter-spacing: 0.5px;
}
.score-table th[b-j14klvgzki] { padding: 6px 8px; font-weight: 600; text-align: left; }
.score-table th.num[b-j14klvgzki], .score-table td.num[b-j14klvgzki] { text-align: right; }
.score-table td[b-j14klvgzki] { padding: 8px; }
.score-table td.strong[b-j14klvgzki] { font-weight: 600; }
.score-table tbody tr[b-j14klvgzki] { border-top: 1px solid var(--theme-border); }
.score-table tbody tr.clickable[b-j14klvgzki] { cursor: pointer; }
.score-table tbody tr.clickable:hover[b-j14klvgzki] { background: var(--theme-surface-secondary); }
.score-table tbody tr.expanded[b-j14klvgzki] { background: var(--theme-surface-secondary); }
.score-table .mono[b-j14klvgzki] { font-family: monospace; font-size: 0.9em; white-space: nowrap; }
.score-table .dim[b-j14klvgzki] { color: var(--theme-text-secondary); }
.score-table .date[b-j14klvgzki] { color: var(--theme-text-secondary); white-space: nowrap; font-size: 0.85em; }
.score-table .caret[b-j14klvgzki] { color: var(--theme-text-secondary); margin-left: 6px; font-size: 0.95em; }
.score-table .chip[b-j14klvgzki] { vertical-align: middle; }
.score-table tr.detail[b-j14klvgzki] { background: var(--theme-surface-secondary); border-top: none; }
.score-table tr.detail td[b-j14klvgzki] { padding: 4px 8px; font-size: 0.85em; color: var(--theme-text-secondary); }
.score-table tr.detail td.lead[b-j14klvgzki] { padding-left: 28px; border-left: 2px solid var(--detail-accent, var(--theme-accent)); }
.score-table .detail-label[b-j14klvgzki] { text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.5px; margin-right: 4px; }
.toggle-caption[b-j14klvgzki] { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* Funnel */
.funnel-container[b-j14klvgzki] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px 0;
}

.funnel-step[b-j14klvgzki] {
    position: relative;
    margin-bottom: 12px;
}

.funnel-bar[b-j14klvgzki] {
    height: 48px;
    background: var(--theme-surface-secondary);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 16px;
}

.funnel-fill[b-j14klvgzki] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    opacity: 0.15;
    z-index: 1;
    transition: width 1s ease-out;
}

.funnel-content[b-j14klvgzki] {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.btn-text[b-j14klvgzki] {
    background: none;
    border: none;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-text:hover[b-j14klvgzki] { text-decoration: underline; }

/* Geo List */
.geo-country-item[b-j14klvgzki] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    transition: background 0.2s;
}

.geo-country-item:hover[b-j14klvgzki] {
    background: var(--theme-surface-secondary);
}

.country-info[b-j14klvgzki] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.country-flag[b-j14klvgzki] {
    font-size: 1.25rem;
}

.session-badge[b-j14klvgzki] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Empty & Loading States */
.empty-state[b-j14klvgzki] {
    text-align: center;
    padding: 32px;
    color: var(--theme-text-secondary);
}

.spinner[b-j14klvgzki] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-j14klvgzki 1s linear infinite;
    margin: 20px auto;
}

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

/* Responsive */
@media (max-width: 600px) {
    .analytics-page[b-j14klvgzki] {
        padding: 16px;
        padding-top: 70px;
    }
    
    .analytics-hero[b-j14klvgzki] {
        padding: 24px 20px;
    }
    
    .metric-value[b-j14klvgzki] {
        font-size: 1.75rem;
    }
}

/* ANALYTICS-DARK-1: every "quieter" caption on the page - was inline opacity 0.45-0.75. */
.dim-ink[b-j14klvgzki] { color: var(--theme-text-secondary); opacity: 1; }

/* ADMIN-METRICS-1 (2026-09-13): names the population a card is counting, so two cards that
   answer different questions stop looking like they disagree. */
.card-caption[b-j14klvgzki] {
    margin: -0.25rem 0 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--theme-text-secondary);
}
/* /Pages/Admin/Audit.razor.rz.scp.css */
/* ============================================
   AUDIT PAGE STYLES - Following Goals Pattern
   ============================================ */

/* Base Variables */
:root[b-lyl7rw55a0] {
    --audit-radius: 14px;
    --audit-radius-sm: 8px;
    --audit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page Container */
.audit-page[b-lyl7rw55a0] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
}

.audit-container[b-lyl7rw55a0] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

/* Header Section */
.audit-header[b-lyl7rw55a0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.audit-title-section[b-lyl7rw55a0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.audit-title[b-lyl7rw55a0] {
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.audit-title .icon[b-lyl7rw55a0] {
    width: 32px;
    height: 32px;
}

.audit-subtitle[b-lyl7rw55a0] {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.8;
}

/* Filter Section */
.audit-filters[b-lyl7rw55a0] {
    padding: 16px 20px;
    backdrop-filter: blur(10px);
    border-radius: var(--audit-radius);
    margin-bottom: 24px;
}

.filters-grid[b-lyl7rw55a0] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.8fr 0.8fr auto;
    gap: 16px;
    align-items: end;
}

.filter-group[b-lyl7rw55a0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-group-search[b-lyl7rw55a0] {
    grid-column: span 1;
}

.filter-group-btn[b-lyl7rw55a0] {
    display: flex;
    align-items: flex-end;
}

.filter-label[b-lyl7rw55a0] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.search-input-wrapper[b-lyl7rw55a0] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-lyl7rw55a0] {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 20px;
    opacity: 0.5;
    pointer-events: none;
}

.search-input[b-lyl7rw55a0] {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--audit-radius-sm);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    transition: var(--audit-transition);
}

.search-input:focus[b-lyl7rw55a0] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-select[b-lyl7rw55a0],
.filter-input[b-lyl7rw55a0] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: var(--audit-radius-sm);
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: var(--audit-transition);
}

.filter-select:focus[b-lyl7rw55a0],
.filter-input:focus[b-lyl7rw55a0] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Buttons */
.btn[b-lyl7rw55a0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--audit-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--audit-transition);
    text-decoration: none;
}

.btn .icon[b-lyl7rw55a0] {
    width: 20px;
    height: 20px;
}

.btn-primary[b-lyl7rw55a0] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover[b-lyl7rw55a0] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* Table Card */
.audit-table-card[b-lyl7rw55a0] {
    backdrop-filter: blur(10px);
    border-radius: var(--audit-radius);
    overflow: hidden;
}

.table-container[b-lyl7rw55a0] {
    overflow-x: auto;
}

.data-table[b-lyl7rw55a0] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th[b-lyl7rw55a0], .data-table td[b-lyl7rw55a0] {
    padding: 14px 16px;
    text-align: left;
}

.data-table th[b-lyl7rw55a0] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr[b-lyl7rw55a0] {
    transition: var(--audit-transition);
}

/* Cell styles */
.cell-date[b-lyl7rw55a0] {
    font-family: monospace;
    white-space: nowrap;
}

.cell-ip[b-lyl7rw55a0] {
    font-family: monospace;
}

.user-id[b-lyl7rw55a0] {
    font-size: 0.8rem;
    opacity: 0.7;
    font-family: monospace;
}

.user-email[b-lyl7rw55a0] {
    font-weight: 600;
}

.cell-useragent[b-lyl7rw55a0] {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-success[b-lyl7rw55a0] {
    color: #10b981;
    font-weight: 600;
}

.status-failure[b-lyl7rw55a0] {
    color: #ef4444;
    font-weight: 600;
}

/* Loading Bar */
.loading-bar[b-lyl7rw55a0] {
    height: 4px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar-inner[b-lyl7rw55a0] {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 2px;
    animation: loading-slide-b-lyl7rw55a0 1.5s ease-in-out infinite;
}

@keyframes loading-slide-b-lyl7rw55a0 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Empty State */
.empty-state[b-lyl7rw55a0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    gap: 12px;
}

/* Responsive */
@media (max-width: 960px) {
    .filters-grid[b-lyl7rw55a0] {
        grid-template-columns: 1fr 1fr;
    }
    
    .filter-group-search[b-lyl7rw55a0] {
        grid-column: span 2;
    }
    
    .filter-group-btn[b-lyl7rw55a0] {
        grid-column: span 2;
    }
    
    .filter-group-btn .btn[b-lyl7rw55a0] {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .audit-page[b-lyl7rw55a0] {
        padding: 16px;
    }
    
    .filters-grid[b-lyl7rw55a0] {
        grid-template-columns: 1fr;
    }
    
    .filter-group-search[b-lyl7rw55a0] {
        grid-column: span 1;
    }
    
    .filter-group-btn[b-lyl7rw55a0] {
        grid-column: span 1;
    }
}

/* ============================================
   CLOUD THEME
   ============================================ */
.audit-page.theme-cloud[b-lyl7rw55a0] {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

.theme-cloud .audit-title[b-lyl7rw55a0] { color: #1e3a5f; }
.theme-cloud .audit-subtitle[b-lyl7rw55a0] { color: #475569; }

.theme-cloud .audit-filters[b-lyl7rw55a0] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .search-input[b-lyl7rw55a0],
.theme-cloud .filter-select[b-lyl7rw55a0],
.theme-cloud .filter-input[b-lyl7rw55a0] {
    background: rgba(255, 255, 255, 0.8);
    color: #1e3a5f;
}

.theme-cloud .filter-label[b-lyl7rw55a0] { color: #475569; }

.theme-cloud .audit-table-card[b-lyl7rw55a0] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .data-table[b-lyl7rw55a0] { color: #334155; }
.theme-cloud .data-table th[b-lyl7rw55a0] { color: #64748b; background: rgba(248, 250, 252, 0.8); }
.theme-cloud .data-table td[b-lyl7rw55a0] { border-bottom: 1px solid #e2e8f0; }
.theme-cloud .data-table tbody tr:hover[b-lyl7rw55a0] { background: rgba(248, 250, 252, 0.8); }
.theme-cloud .user-email[b-lyl7rw55a0] { color: #1e3a5f; }

.theme-cloud .empty-state[b-lyl7rw55a0] { color: #64748b; }

.theme-cloud .btn-primary[b-lyl7rw55a0] {
    background: linear-gradient(135deg, #1e3a5f 0%, #3b5998 100%);
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.3);
}

/* ============================================
   SPACE THEME
   ============================================ */
.audit-page.theme-space[b-lyl7rw55a0] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

.theme-space .audit-title[b-lyl7rw55a0] { color: #f1f5f9; }
.theme-space .audit-subtitle[b-lyl7rw55a0] { color: #94a3b8; }

.theme-space .audit-filters[b-lyl7rw55a0] {
    background: rgba(30, 27, 75, 0.7);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .search-input[b-lyl7rw55a0],
.theme-space .filter-select[b-lyl7rw55a0],
.theme-space .filter-input[b-lyl7rw55a0] {
    background: rgba(50, 45, 100, 0.6);
    color: #f1f5f9;
    border-color: rgba(168, 85, 247, 0.3);
}

.theme-space .filter-label[b-lyl7rw55a0] { color: #94a3b8; }

.theme-space .audit-table-card[b-lyl7rw55a0] {
    background: rgba(30, 27, 75, 0.8);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .data-table[b-lyl7rw55a0] { color: rgba(255, 255, 255, 0.9); }
.theme-space .data-table th[b-lyl7rw55a0] { color: rgba(255, 255, 255, 0.6); background: rgba(50, 45, 100, 0.5); }
.theme-space .data-table td[b-lyl7rw55a0] { border-bottom: 1px solid rgba(168, 85, 247, 0.15); }
.theme-space .data-table tbody tr:hover[b-lyl7rw55a0] { background: rgba(168, 85, 247, 0.1); }
.theme-space .user-email[b-lyl7rw55a0] { color: #f1f5f9; }

.theme-space .empty-state[b-lyl7rw55a0] { color: #94a3b8; }

.theme-space .btn-primary[b-lyl7rw55a0] {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.3);
}

/* ============================================
   WINTER THEME
   ============================================ */
.audit-page.theme-winter[b-lyl7rw55a0] {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

.theme-winter .audit-title[b-lyl7rw55a0] { color: #f0f9ff; }
.theme-winter .audit-subtitle[b-lyl7rw55a0] { color: #bae6fd; }

.theme-winter .audit-filters[b-lyl7rw55a0] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .search-input[b-lyl7rw55a0],
.theme-winter .filter-select[b-lyl7rw55a0],
.theme-winter .filter-input[b-lyl7rw55a0] {
    background: rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
    border-color: rgba(186, 230, 253, 0.4);
}

.theme-winter .filter-label[b-lyl7rw55a0] { color: #bae6fd; }

.theme-winter .audit-table-card[b-lyl7rw55a0] {
    background: rgba(186, 230, 253, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .data-table[b-lyl7rw55a0] { color: #f0f9ff; }
.theme-winter .data-table th[b-lyl7rw55a0] { color: #bae6fd; background: rgba(186, 230, 253, 0.2); }
.theme-winter .data-table td[b-lyl7rw55a0] { border-bottom: 1px solid rgba(186, 230, 253, 0.2); }
.theme-winter .data-table tbody tr:hover[b-lyl7rw55a0] { background: rgba(186, 230, 253, 0.15); }
.theme-winter .user-email[b-lyl7rw55a0] { color: #f0f9ff; }

.theme-winter .empty-state[b-lyl7rw55a0] { color: #bae6fd; }

.theme-winter .btn-primary[b-lyl7rw55a0] {
    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
    box-shadow: 0 4px 14px rgba(14, 116, 144, 0.3);
}

/* ============================================
   NATURE THEME
   ============================================ */
.audit-page.theme-nature[b-lyl7rw55a0] {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);
}

.theme-nature .audit-title[b-lyl7rw55a0] { color: #f0fdf4; }
.theme-nature .audit-subtitle[b-lyl7rw55a0] { color: #bbf7d0; }

.theme-nature .audit-filters[b-lyl7rw55a0] {
    background: rgba(187, 247, 208, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(187, 247, 208, 0.25);
}

.theme-nature .search-input[b-lyl7rw55a0],
.theme-nature .filter-select[b-lyl7rw55a0],
.theme-nature .filter-input[b-lyl7rw55a0] {
    background: rgba(187, 247, 208, 0.2);
    color: #f0fdf4;
    border-color: rgba(187, 247, 208, 0.3);
}

.theme-nature .filter-label[b-lyl7rw55a0] { color: #bbf7d0; }

.theme-nature .audit-table-card[b-lyl7rw55a0] {
    background: rgba(187, 247, 208, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(187, 247, 208, 0.25);
}

.theme-nature .data-table[b-lyl7rw55a0] { color: #f0fdf4; }
.theme-nature .data-table th[b-lyl7rw55a0] { color: #bbf7d0; background: rgba(187, 247, 208, 0.15); }
.theme-nature .data-table td[b-lyl7rw55a0] { border-bottom: 1px solid rgba(187, 247, 208, 0.2); }
.theme-nature .data-table tbody tr:hover[b-lyl7rw55a0] { background: rgba(187, 247, 208, 0.1); }
.theme-nature .user-email[b-lyl7rw55a0] { color: #f0fdf4; }

.theme-nature .empty-state[b-lyl7rw55a0] { color: #bbf7d0; }

.theme-nature .btn-primary[b-lyl7rw55a0] {
    background: linear-gradient(135deg, #166534 0%, #22c55e 100%);
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.3);
}

/* ============================================
   OCEAN THEME
   ============================================ */
.audit-page.theme-ocean[b-lyl7rw55a0] {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0369a1 70%, #0284c7 100%);
}

.theme-ocean .audit-title[b-lyl7rw55a0] { color: #f0f9ff; }
.theme-ocean .audit-subtitle[b-lyl7rw55a0] { color: #bae6fd; }

.theme-ocean .audit-filters[b-lyl7rw55a0] {
    background: rgba(186, 230, 253, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.25);
}

.theme-ocean .search-input[b-lyl7rw55a0],
.theme-ocean .filter-select[b-lyl7rw55a0],
.theme-ocean .filter-input[b-lyl7rw55a0] {
    background: rgba(186, 230, 253, 0.2);
    color: #f0f9ff;
    border-color: rgba(186, 230, 253, 0.3);
}

.theme-ocean .filter-label[b-lyl7rw55a0] { color: #bae6fd; }

.theme-ocean .audit-table-card[b-lyl7rw55a0] {
    background: rgba(186, 230, 253, 0.12);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.25);
}

.theme-ocean .data-table[b-lyl7rw55a0] { color: #f0f9ff; }
.theme-ocean .data-table th[b-lyl7rw55a0] { color: #bae6fd; background: rgba(186, 230, 253, 0.15); }
.theme-ocean .data-table td[b-lyl7rw55a0] { border-bottom: 1px solid rgba(186, 230, 253, 0.2); }
.theme-ocean .data-table tbody tr:hover[b-lyl7rw55a0] { background: rgba(186, 230, 253, 0.1); }
.theme-ocean .user-email[b-lyl7rw55a0] { color: #f0f9ff; }

.theme-ocean .empty-state[b-lyl7rw55a0] { color: #bae6fd; }

.theme-ocean .btn-primary[b-lyl7rw55a0] {
    background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%);
    box-shadow: 0 4px 14px rgba(3, 105, 161, 0.3);
}

/* Fix for dark mode date picker icons */
.theme-space [b-lyl7rw55a0]::-webkit-calendar-picker-indicator,
.theme-winter [b-lyl7rw55a0]::-webkit-calendar-picker-indicator,
.theme-nature [b-lyl7rw55a0]::-webkit-calendar-picker-indicator,
.theme-ocean [b-lyl7rw55a0]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}
/* /Pages/Admin/BusinessProfileEditDialog.razor.rz.scp.css */
/* Form sections */
.form-section[b-35971ge676] {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--theme-border, rgba(255, 255, 255, 0.08));
}

.form-section:last-child[b-35971ge676] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.form-section h3[b-35971ge676] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-section h3 .material-symbols-rounded[b-35971ge676] {
    font-size: 20px;
}

/* Form groups */
.form-group[b-35971ge676] {
    margin-bottom: 16px;
}

.form-group:last-child[b-35971ge676] {
    margin-bottom: 0;
}

.form-group label[b-35971ge676] {
    display: block;
    margin-bottom: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.form-group input[b-35971ge676],
.form-group select[b-35971ge676],
.form-group textarea[b-35971ge676] {
    width: 100%;
    padding: 8px 10px;
    background: var(--theme-input-bg, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--theme-input-border, rgba(255, 255, 255, 0.15));
    border-radius: 8px;
    color: var(--theme-input-text, var(--theme-text-primary));
    font-size: 0.875rem;
    min-height: 38px;
    transition: border-color 0.2s;
}

.form-group input:focus[b-35971ge676],
.form-group select:focus[b-35971ge676],
.form-group textarea:focus[b-35971ge676] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-accent));
    box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb), 0.15);
}

.form-group input[b-35971ge676]::placeholder,
.form-group textarea[b-35971ge676]::placeholder {
    color: var(--theme-text-muted);
}

.form-group textarea[b-35971ge676] {
    resize: vertical;
    min-height: 90px;
}

.helper-text[b-35971ge676] {
    display: block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

/* Form rows */
.form-row[b-35971ge676] {
    display: grid;
    gap: 16px;
}

.form-row.two-cols[b-35971ge676] {
    grid-template-columns: 1fr 1fr;
}

.form-row.three-cols[b-35971ge676] {
    grid-template-columns: 2fr 1fr 1fr;
}

/* Checkbox */
.checkbox-group[b-35971ge676] {
    padding-top: 8px;
}

.checkbox-label[b-35971ge676] {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400 !important;
}

.checkbox-label input[type="checkbox"][b-35971ge676] {
    width: 20px;
    height: 20px;
    accent-color: var(--theme-accent);
    border-radius: 4px;
}

/* Dialog actions */
.dialog-actions[b-35971ge676] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
}

/* 2026-05: Logo upload section. Preview is bounded so a tall logo doesn't
   blow out the dialog height; remove button sits inline next to it. */
.logo-preview-wrap[b-35971ge676] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.02));
}

.logo-preview[b-35971ge676] {
    max-width: 160px;
    max-height: 60px;
    object-fit: contain;
    background: #ffffff;
    border-radius: 4px;
    padding: 4px;
}

.form-error[b-35971ge676] {
    display: block;
    font-size: 0.8rem;
    color: #dc2626;
    margin-top: 6px;
}

/* Tier-gate lock state — replaces the upload UI for free-tier users with
   a "this is what you'd unlock" affordance + upgrade CTA. */
.logo-upgrade-prompt[b-35971ge676] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--theme-primary, #6366f1) 35%, transparent);
    border-radius: 10px;
}

.logo-upgrade-prompt > .material-symbols-rounded[b-35971ge676] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 28px;
    flex-shrink: 0;
}

.logo-upgrade-prompt-text[b-35971ge676] {
    flex: 1;
    min-width: 0;
}

.logo-upgrade-prompt-text strong[b-35971ge676] {
    display: block;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.logo-upgrade-prompt-text p[b-35971ge676] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.4;
}

/* Dark themes — preview surface stays visually distinct */
.is-dark .logo-preview-wrap[b-35971ge676] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}
/* /Pages/Admin/CipherAdmin.razor.rz.scp.css */
/* Cipher Admin Page Styles */

.page-container[b-6z6cui9e8b] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.header-content h1[b-6z6cui9e8b] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.header-content .subtitle[b-6z6cui9e8b] {
    color: #64748b;
    margin: 4px 0 0;
    font-size: 0.9rem;
}

.header-actions[b-6z6cui9e8b] {
    display: flex;
    gap: 12px;
}

/* Buttons */
.btn[b-6z6cui9e8b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-6z6cui9e8b] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover[b-6z6cui9e8b] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-secondary[b-6z6cui9e8b] {
    background: white;
    color: #475569;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.btn-secondary:hover[b-6z6cui9e8b] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Loading */
.loading-container[b-6z6cui9e8b] {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner[b-6z6cui9e8b] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin-b-6z6cui9e8b 1s linear infinite;
}

@keyframes spin-b-6z6cui9e8b {
    to { transform: rotate(360deg); }
}

/* Tab Navigation */
.tab-navigation[b-6z6cui9e8b] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.tab-btn[b-6z6cui9e8b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    background: white;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tab-btn:hover[b-6z6cui9e8b] {
    background: #f8fafc;
    color: #1e293b;
}

.tab-btn.active[b-6z6cui9e8b] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.tab-badge[b-6z6cui9e8b] {
    background: #ef4444;
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 4px;
}

.tab-btn.active .tab-badge[b-6z6cui9e8b] {
    background: rgba(255, 255, 255, 0.3);
}

/* Stats Grid */
.stats-grid[b-6z6cui9e8b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-6z6cui9e8b] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.stat-card:hover[b-6z6cui9e8b] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-card.highlight[b-6z6cui9e8b] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-color: rgba(99, 102, 241, 0.2);
}

.stat-icon[b-6z6cui9e8b] {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.stat-value[b-6z6cui9e8b] {
    font-size: 1.75rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-6z6cui9e8b] {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

/* Card */
.card[b-6z6cui9e8b] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card h3[b-6z6cui9e8b] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 20px;
}

/* Guess Distribution */
.guess-distribution[b-6z6cui9e8b] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.distribution-row[b-6z6cui9e8b] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guess-number[b-6z6cui9e8b] {
    width: 24px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
}

.distribution-bar-container[b-6z6cui9e8b] {
    flex: 1;
}

.distribution-bar[b-6z6cui9e8b] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: right;
    min-width: 40px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

/* Data Table */
.data-table[b-6z6cui9e8b] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-6z6cui9e8b],
.data-table td[b-6z6cui9e8b] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.data-table th[b-6z6cui9e8b] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8fafc;
}

.data-table tbody tr:hover[b-6z6cui9e8b] {
    background: #f8fafc;
}

.data-table code[b-6z6cui9e8b] {
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 0.9rem;
    font-weight: 700;
}

.word-code[b-6z6cui9e8b] {
    font-size: 1rem;
    letter-spacing: 2px;
}

.highlight-value[b-6z6cui9e8b] {
    font-weight: 700;
    color: #6366f1;
}

/* Filter Buttons */
.filter-buttons[b-6z6cui9e8b] {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-btn[b-6z6cui9e8b] {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover[b-6z6cui9e8b] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.filter-btn.active[b-6z6cui9e8b] {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

/* Status Badges */
.status-badge[b-6z6cui9e8b] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-pending[b-6z6cui9e8b] {
    background: #fef3c7;
    color: #92400e;
}

.status-approved[b-6z6cui9e8b] {
    background: #dcfce7;
    color: #166534;
}

.status-approved-answer[b-6z6cui9e8b] {
    background: #e0e7ff;
    color: #4338ca;
}

.status-rejected[b-6z6cui9e8b] {
    background: #fee2e2;
    color: #991b1b;
}

/* Vote Count */
.vote-count[b-6z6cui9e8b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 4px 8px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #475569;
}

.vote-count.hot[b-6z6cui9e8b] {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
}

/* Action Buttons */
.action-buttons[b-6z6cui9e8b] {
    display: flex;
    gap: 6px;
}

.btn-action[b-6z6cui9e8b] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-approve[b-6z6cui9e8b] {
    background: #dcfce7;
    color: #16a34a;
}

.btn-approve:hover[b-6z6cui9e8b] {
    background: #22c55e;
    color: white;
}

.btn-star[b-6z6cui9e8b] {
    background: #e0e7ff;
    color: #6366f1;
}

.btn-star:hover[b-6z6cui9e8b] {
    background: #6366f1;
    color: white;
}

.btn-reject[b-6z6cui9e8b] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-reject:hover[b-6z6cui9e8b] {
    background: #dc2626;
    color: white;
}

/* Leaderboard Grid */
.leaderboard-grid[b-6z6cui9e8b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

/* Empty State */
.empty-state[b-6z6cui9e8b] {
    text-align: center;
    padding: 60px 20px;
    color: #64748b;
}

.empty-icon[b-6z6cui9e8b] {
    font-size: 3rem;
    margin-bottom: 16px;
}

.text-muted[b-6z6cui9e8b] {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* Dark Theme */
.theme-space .page-container[b-6z6cui9e8b],
.theme-winter .page-container[b-6z6cui9e8b],
.theme-nature .page-container[b-6z6cui9e8b],
.theme-ocean .page-container[b-6z6cui9e8b] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.theme-space .header-content h1[b-6z6cui9e8b],
.theme-winter .header-content h1[b-6z6cui9e8b],
.theme-nature .header-content h1[b-6z6cui9e8b],
.theme-ocean .header-content h1[b-6z6cui9e8b] {
    color: white;
}

.theme-space .header-content .subtitle[b-6z6cui9e8b],
.theme-winter .header-content .subtitle[b-6z6cui9e8b],
.theme-nature .header-content .subtitle[b-6z6cui9e8b],
.theme-ocean .header-content .subtitle[b-6z6cui9e8b] {
    color: #94a3b8;
}

.theme-space .tab-btn[b-6z6cui9e8b],
.theme-winter .tab-btn[b-6z6cui9e8b],
.theme-nature .tab-btn[b-6z6cui9e8b],
.theme-ocean .tab-btn[b-6z6cui9e8b] {
    background: #334155;
    color: #94a3b8;
}

.theme-space .tab-btn:hover[b-6z6cui9e8b],
.theme-winter .tab-btn:hover[b-6z6cui9e8b],
.theme-nature .tab-btn:hover[b-6z6cui9e8b],
.theme-ocean .tab-btn:hover[b-6z6cui9e8b] {
    background: #475569;
    color: white;
}

.theme-space .stat-card[b-6z6cui9e8b],
.theme-winter .stat-card[b-6z6cui9e8b],
.theme-nature .stat-card[b-6z6cui9e8b],
.theme-ocean .stat-card[b-6z6cui9e8b] {
    background: #334155;
    border-color: rgba(99, 102, 241, 0.2);
}

.theme-space .stat-card.highlight[b-6z6cui9e8b],
.theme-winter .stat-card.highlight[b-6z6cui9e8b],
.theme-nature .stat-card.highlight[b-6z6cui9e8b],
.theme-ocean .stat-card.highlight[b-6z6cui9e8b] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
}

.theme-space .card[b-6z6cui9e8b],
.theme-winter .card[b-6z6cui9e8b],
.theme-nature .card[b-6z6cui9e8b],
.theme-ocean .card[b-6z6cui9e8b] {
    background: #334155;
}

.theme-space .card h3[b-6z6cui9e8b],
.theme-winter .card h3[b-6z6cui9e8b],
.theme-nature .card h3[b-6z6cui9e8b],
.theme-ocean .card h3[b-6z6cui9e8b] {
    color: white;
}

.theme-space .data-table th[b-6z6cui9e8b],
.theme-winter .data-table th[b-6z6cui9e8b],
.theme-nature .data-table th[b-6z6cui9e8b],
.theme-ocean .data-table th[b-6z6cui9e8b] {
    background: #1e293b;
    color: #94a3b8;
}

.theme-space .data-table td[b-6z6cui9e8b],
.theme-winter .data-table td[b-6z6cui9e8b],
.theme-nature .data-table td[b-6z6cui9e8b],
.theme-ocean .data-table td[b-6z6cui9e8b] {
    border-color: #475569;
    color: #e2e8f0;
}

.theme-space .data-table tbody tr:hover[b-6z6cui9e8b],
.theme-winter .data-table tbody tr:hover[b-6z6cui9e8b],
.theme-nature .data-table tbody tr:hover[b-6z6cui9e8b],
.theme-ocean .data-table tbody tr:hover[b-6z6cui9e8b] {
    background: #475569;
}

.theme-space .data-table code[b-6z6cui9e8b],
.theme-winter .data-table code[b-6z6cui9e8b],
.theme-nature .data-table code[b-6z6cui9e8b],
.theme-ocean .data-table code[b-6z6cui9e8b] {
    background: #1e293b;
    color: #a5b4fc;
}

.theme-space .filter-btn[b-6z6cui9e8b],
.theme-winter .filter-btn[b-6z6cui9e8b],
.theme-nature .filter-btn[b-6z6cui9e8b],
.theme-ocean .filter-btn[b-6z6cui9e8b] {
    background: #334155;
    border-color: #475569;
    color: #94a3b8;
}

.theme-space .filter-btn:hover[b-6z6cui9e8b],
.theme-winter .filter-btn:hover[b-6z6cui9e8b],
.theme-nature .filter-btn:hover[b-6z6cui9e8b],
.theme-ocean .filter-btn:hover[b-6z6cui9e8b] {
    background: #475569;
    color: white;
}

.theme-space .btn-secondary[b-6z6cui9e8b],
.theme-winter .btn-secondary[b-6z6cui9e8b],
.theme-nature .btn-secondary[b-6z6cui9e8b],
.theme-ocean .btn-secondary[b-6z6cui9e8b] {
    background: #334155;
    border-color: #475569;
    color: #e2e8f0;
}

.theme-space .btn-secondary:hover[b-6z6cui9e8b],
.theme-winter .btn-secondary:hover[b-6z6cui9e8b],
.theme-nature .btn-secondary:hover[b-6z6cui9e8b],
.theme-ocean .btn-secondary:hover[b-6z6cui9e8b] {
    background: #475569;
}

/* Responsive */
@media (max-width: 640px) {
    .stats-grid[b-6z6cui9e8b] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .leaderboard-grid[b-6z6cui9e8b] {
        grid-template-columns: 1fr;
    }
    
    .data-table[b-6z6cui9e8b] {
        font-size: 0.85rem;
    }
    
    .data-table th[b-6z6cui9e8b],
    .data-table td[b-6z6cui9e8b] {
        padding: 8px 12px;
    }
}
/* /Pages/Admin/ClientPortalPreview.razor.rz.scp.css */
.preview-banner[b-2wqtom11ku] {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.stat-card[b-2wqtom11ku] {
    transition: all 0.3s ease;
    border-radius: 12px;
}

.stat-card:hover[b-2wqtom11ku] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

.invoice-card[b-2wqtom11ku] {
    transition: all 0.3s ease;
    border-left: 4px solid;
    cursor: pointer;
}

.invoice-card:hover[b-2wqtom11ku] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
}

.invoice-card-paid[b-2wqtom11ku] {
    border-left-color: #10b981;
}

.invoice-card-sent[b-2wqtom11ku] {
    border-left-color: #3b82f6;
}

.invoice-card-overdue[b-2wqtom11ku] {
    border-left-color: #ef4444;
}

.invoice-card-draft[b-2wqtom11ku] {
    border-left-color: #6b7280;
}

.invoice-card-pending[b-2wqtom11ku] {
    /* ACH in flight \u2014 amber matches the tag-amber chip */
    border-left-color: #f59e0b;
}

.invoice-card-failed[b-2wqtom11ku] {
    /* ACH rejected \u2014 rose matches the tag-rose chip */
    border-left-color: #dc2626;
}

.task-card[b-2wqtom11ku] {
    transition: all 0.3s ease;
    border-left: 4px solid;
}

.task-card-open[b-2wqtom11ku] {
    border-left-color: #3b82f6;
}

.task-card-inprogress[b-2wqtom11ku] {
    border-left-color: #f59e0b;
}

.task-card-complete[b-2wqtom11ku] {
    border-left-color: #10b981;
}

.welcome-banner[b-2wqtom11ku] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    color: white;
}
/* /Pages/Admin/CompanionProgress.razor.rz.scp.css */
.sort-controls[b-3zwpbeut3q] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #64748b;
}

.companion-grid[b-3zwpbeut3q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}

.companion-card[b-3zwpbeut3q] {
    background: white;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.companion-card:hover[b-3zwpbeut3q] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.companion-card.inactive[b-3zwpbeut3q] {
    opacity: 0.7;
}

.companion-card.archived[b-3zwpbeut3q] {
    opacity: 0.55;
    border-style: dashed;
    border-color: #e2e8f0;
}

.companion-card-header[b-3zwpbeut3q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.companion-identity[b-3zwpbeut3q] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stage-badge[b-3zwpbeut3q] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.stage-spark[b-3zwpbeut3q] { background: #f1f5f9; color: #475569; }
.stage-pulse[b-3zwpbeut3q] { background: #dbeafe; color: #1d4ed8; }
.stage-nova[b-3zwpbeut3q] { background: #fef3c7; color: #92400e; }
.stage-zenith[b-3zwpbeut3q] { background: #ede9fe; color: #6d28d9; }
.stage-ascendant[b-3zwpbeut3q] { background: #fee2e2; color: #dc2626; }
.stage-transcendent[b-3zwpbeut3q] { background: #e0f2fe; color: #0369a1; }
.stage-legendary[b-3zwpbeut3q] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }

.stage-number[b-3zwpbeut3q] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.companion-user-info[b-3zwpbeut3q] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.75rem;
}

.companion-user-info strong[b-3zwpbeut3q] {
    font-size: 1.05rem;
    color: #1e293b;
}

.user-detail[b-3zwpbeut3q] {
    font-size: 0.8rem;
    color: #64748b;
}

.user-detail.email[b-3zwpbeut3q] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.energy-bar-container[b-3zwpbeut3q] {
    margin-bottom: 0.75rem;
}

.energy-bar[b-3zwpbeut3q] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.energy-bar-fill[b-3zwpbeut3q] {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.energy-label[b-3zwpbeut3q] {
    font-size: 0.7rem;
    color: #94a3b8;
}

.companion-stats[b-3zwpbeut3q] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 0.75rem;
}

.companion-stat[b-3zwpbeut3q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.stat-value[b-3zwpbeut3q] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.stat-label[b-3zwpbeut3q] {
    font-size: 0.65rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.companion-footer[b-3zwpbeut3q] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.longest-streak[b-3zwpbeut3q] {
    color: #94a3b8;
    font-size: 0.75rem;
}

.last-active[b-3zwpbeut3q] {
    font-size: 0.75rem;
    color: #94a3b8;
}

.companion-card-actions[b-3zwpbeut3q] {
    display: flex;
    justify-content: flex-end;
}

/* Dark theme */
.is-dark .companion-card[b-3zwpbeut3q] {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .companion-user-info strong[b-3zwpbeut3q] {
    color: #f1f5f9;
}

.is-dark .stat-value[b-3zwpbeut3q] {
    color: #f1f5f9;
}

.is-dark .user-detail[b-3zwpbeut3q] {
    color: #94a3b8;
}

.is-dark .energy-bar[b-3zwpbeut3q] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .companion-stats[b-3zwpbeut3q] {
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .sort-controls[b-3zwpbeut3q] {
    color: #94a3b8;
}

@media (max-width: 768px) {
    .companion-grid[b-3zwpbeut3q] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/CreateVipInvite.razor.rz.scp.css */
/* ============================================
   Create VIP Invite - Using Theme Variables
   ============================================ */

.vip-invite-page[b-bv2q8k5erc] {
    min-height: calc(100vh - 56px);
    padding: 2rem;
    background: var(--theme-page-bg);
}

.page-container[b-bv2q8k5erc] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    min-height: auto;
}

.page-header[b-bv2q8k5erc] {
    text-align: center;
    margin-bottom: 2rem;
}

.page-header h1[b-bv2q8k5erc] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--theme-text-primary);
}

.page-header p[b-bv2q8k5erc] {
    color: var(--theme-text-secondary);
}

.header-row[b-bv2q8k5erc] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-back[b-bv2q8k5erc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: var(--theme-secondary);
    color: var(--theme-primary-ink, var(--theme-primary));
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-back:hover[b-bv2q8k5erc] {
    background: var(--theme-secondary-hover);
}

/* Form Card */
.invite-form-card[b-bv2q8k5erc] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
}

.form-section[b-bv2q8k5erc] {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--theme-border);
}

.form-section:last-of-type[b-bv2q8k5erc] {
    border-bottom: none;
    margin-bottom: 1rem;
}

.form-section h2[b-bv2q8k5erc] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--theme-text-primary);
}

.section-hint[b-bv2q8k5erc] {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Form Groups */
.form-group[b-bv2q8k5erc] {
    margin-bottom: 1.5rem;
}

.form-group label[b-bv2q8k5erc] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--theme-text-primary);
}

.form-group input[b-bv2q8k5erc],
.form-group textarea[b-bv2q8k5erc] {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-group input[b-bv2q8k5erc]::placeholder,
.form-group textarea[b-bv2q8k5erc]::placeholder {
    color: var(--theme-text-secondary);
}

.form-group input:hover[b-bv2q8k5erc],
.form-group textarea:hover[b-bv2q8k5erc] {
    border-color: var(--theme-primary);
}

.form-group input:focus[b-bv2q8k5erc],
.form-group textarea:focus[b-bv2q8k5erc] {
    outline: none;
    border-color: var(--theme-primary);
    background: var(--theme-surface);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.form-group textarea[b-bv2q8k5erc] {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

/* Interests Checkboxes */
.interests-checkboxes[b-bv2q8k5erc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.interest-checkbox[b-bv2q8k5erc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--theme-surface-secondary);
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--theme-text-primary);
}

.interest-checkbox:hover[b-bv2q8k5erc] {
    border-color: var(--theme-primary);
}

.interest-checkbox.selected[b-bv2q8k5erc] {
    background: var(--theme-bg-info);
    border-color: var(--theme-primary);
}

.interest-checkbox input[b-bv2q8k5erc] {
    display: none;
}

.interest-icon[b-bv2q8k5erc] {
    font-size: 1.5rem;
}

/* Theme Options */
.theme-options[b-bv2q8k5erc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.theme-option[b-bv2q8k5erc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    background: var(--theme-surface-secondary);
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    color: var(--theme-text-primary);
}

.theme-option:hover[b-bv2q8k5erc] {
    border-color: var(--theme-primary);
}

.theme-option.selected[b-bv2q8k5erc] {
    background: var(--theme-bg-info);
    border-color: var(--theme-primary);
}

.theme-option input[b-bv2q8k5erc] {
    display: none;
}

.theme-preview[b-bv2q8k5erc] {
    width: 60px;
    height: 40px;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.theme-preview.executive[b-bv2q8k5erc] { background: linear-gradient(135deg, #f8fafc, #e2e8f0); border: 1px solid #cbd5e1; }
.theme-preview.cloud[b-bv2q8k5erc] { background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border: 1px solid #bae6fd; }
.theme-preview.space[b-bv2q8k5erc] { background: linear-gradient(135deg, #0f0c29, #302b63); }
.theme-preview.ocean[b-bv2q8k5erc] { background: linear-gradient(135deg, #1a2980, #26d0ce); }
.theme-preview.nature[b-bv2q8k5erc] { background: linear-gradient(135deg, #134e5e, #71b280); }
.theme-preview.winter[b-bv2q8k5erc] { background: linear-gradient(135deg, #2c3e50, #4ca1af); }
.theme-preview.mystic[b-bv2q8k5erc] { background: linear-gradient(135deg, #4a1a6b, #9333ea, #c026d3); }
.theme-preview.tron[b-bv2q8k5erc] { background: linear-gradient(135deg, #0a0a0a, #00d4ff, #0a0a0a); }

.theme-option small[b-bv2q8k5erc] {
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
}

/* VIP Toggle */
.vip-toggle[b-bv2q8k5erc] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--theme-bg-warning);
    border-radius: 12px;
    cursor: pointer;
    color: var(--theme-text-warning);
}

.vip-toggle input[b-bv2q8k5erc] {
    width: 20px;
    height: 20px;
}

.toggle-label[b-bv2q8k5erc] {
    font-weight: 600;
}

.vip-toggle small[b-bv2q8k5erc] {
    width: 100%;
    color: var(--theme-text-warning);
    font-size: 0.85rem;
}

/* Form Actions */
.form-actions[b-bv2q8k5erc] {
    margin-top: 2rem;
}

.btn-create[b-bv2q8k5erc] {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-create:hover:not(:disabled)[b-bv2q8k5erc] {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px var(--theme-shadow-color);
}

.btn-create:disabled[b-bv2q8k5erc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Success Card */
.success-card[b-bv2q8k5erc] {
    margin-top: 2rem;
    padding: 2rem;
    background: var(--theme-bg-success);
    border: 2px solid var(--theme-text-success);
    border-radius: 16px;
    text-align: center;
}

.success-card h2[b-bv2q8k5erc] {
    color: var(--theme-text-success);
    margin-bottom: 0.5rem;
}

.link-box[b-bv2q8k5erc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--theme-surface);
    border-radius: 10px;
    border: 1px solid var(--theme-border);
}

.link-box code[b-bv2q8k5erc] {
    flex: 1;
    font-size: 0.85rem;
    word-break: break-all;
    text-align: left;
    color: var(--theme-text-primary);
}

.btn-copy[b-bv2q8k5erc] {
    padding: 0.5rem 1rem;
    background: var(--theme-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-copy:hover[b-bv2q8k5erc] {
    opacity: 0.9;
}

.action-buttons[b-bv2q8k5erc] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.btn-preview[b-bv2q8k5erc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-preview:hover[b-bv2q8k5erc] {
    background: var(--theme-secondary-hover);
}

.btn-email[b-bv2q8k5erc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-email:hover:not(:disabled)[b-bv2q8k5erc] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-email:disabled[b-bv2q8k5erc] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Email section with inviter name input */
.email-section[b-bv2q8k5erc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.inviter-name-input[b-bv2q8k5erc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.inviter-name-input label[b-bv2q8k5erc] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.inviter-name-input input[b-bv2q8k5erc] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 0.9rem;
    width: 120px;
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
}

.inviter-name-input input:focus[b-bv2q8k5erc] {
    outline: none;
    border-color: var(--theme-primary);
    background: var(--theme-surface);
}

/* Fun Facts */
.fun-facts-list[b-bv2q8k5erc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.fun-fact-row[b-bv2q8k5erc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.fun-fact-row input[b-bv2q8k5erc] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid var(--theme-border);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
    transition: border-color 0.2s;
}

.fun-fact-row input[b-bv2q8k5erc]::placeholder {
    color: var(--theme-text-secondary);
}

.fun-fact-row input:focus[b-bv2q8k5erc] {
    outline: none;
    border-color: var(--theme-primary);
    background: var(--theme-surface);
}

.btn-remove-fact[b-bv2q8k5erc] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-remove-fact:hover[b-bv2q8k5erc] {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.btn-add-fact[b-bv2q8k5erc] {
    padding: 0.6rem 1rem;
    background: none;
    border: 2px dashed var(--theme-border);
    border-radius: 10px;
    color: var(--theme-text-secondary);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-add-fact:hover[b-bv2q8k5erc] {
    border-color: var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* Create Another */
.btn-create-another[b-bv2q8k5erc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--theme-primary);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}

.btn-create-another:hover[b-bv2q8k5erc] {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 640px) {
    .interests-checkboxes[b-bv2q8k5erc],
    .theme-options[b-bv2q8k5erc] {
        grid-template-columns: 1fr;
    }

    .vip-invite-page[b-bv2q8k5erc] {
        padding: 1rem;
    }

    .fun-fact-row[b-bv2q8k5erc] {
        flex-wrap: wrap;
    }

    .fun-fact-row input[b-bv2q8k5erc] {
        min-width: 0;
    }
}
/* /Pages/Admin/DailyBriefingAdmin.razor.rz.scp.css */
.admin-hero[b-u1whf27z85] {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    padding: 40px 20px;
    border-radius: 16px;
    margin-bottom: 30px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3);
}

.stat-card[b-u1whf27z85] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.2s;
}

.stat-card:hover[b-u1whf27z85] {
    transform: translateY(-2px);
}

.stat-value[b-u1whf27z85] {
    font-size: 2.5rem;
    font-weight: 700;
}

.stat-success[b-u1whf27z85] { color: #10b981; }
.stat-error[b-u1whf27z85] { color: #ef4444; }
.stat-warning[b-u1whf27z85] { color: #f59e0b; }
.stat-info[b-u1whf27z85] { color: #3b82f6; }

.status-badge[b-u1whf27z85] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-sent[b-u1whf27z85] { background: #d1fae5; color: #065f46; }
.status-failed[b-u1whf27z85] { background: #fee2e2; color: #991b1b; }
.status-pending[b-u1whf27z85] { background: #fef3c7; color: #92400e; }
.status-generating[b-u1whf27z85] { background: #dbeafe; color: #1e40af; }

.error-message[b-u1whf27z85] {
    background: #fee2e2;
    border-left: 4px solid #ef4444;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 0.875rem;
    color: #991b1b;
}

.newsletter-card[b-u1whf27z85] {
    transition: all 0.3s ease;
    border-left: 4px solid;
}

.newsletter-card.active[b-u1whf27z85] { border-left-color: #10b981; }
.newsletter-card.inactive[b-u1whf27z85] { border-left-color: #9ca3af; }
.newsletter-card.failed[b-u1whf27z85] { border-left-color: #ef4444; }
/* /Pages/Admin/Dashboard.razor.rz.scp.css */
/* ============================================
   ADMIN DASHBOARD - SCOPED STYLES
   Uses shared .list-page classes + admin-specific
   ============================================ */

/* Header Meta */
.admin-header-meta[b-v0kk711ay9] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-updated-badge[b-v0kk711ay9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
}

.admin-updated-badge svg[b-v0kk711ay9] {
    width: 14px;
    height: 14px;
}

/* Loading State */
.admin-loading[b-v0kk711ay9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 80px 24px;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.95rem;
}

.admin-loading-spinner[b-v0kk711ay9] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    border-top-color: var(--theme-primary, #1e3a5f);
    border-radius: 50%;
    animation: admin-spin-b-v0kk711ay9 0.8s linear infinite;
}

@keyframes admin-spin-b-v0kk711ay9 {
    to { transform: rotate(360deg); }
}

/* Overview Banner */
.admin-overview-banner[b-v0kk711ay9] {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 20px 28px;
    border-radius: 14px;
    margin-bottom: 24px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-overview-health[b-v0kk711ay9] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-overview-health svg[b-v0kk711ay9] {
    flex-shrink: 0;
}

.admin-overview-health-text[b-v0kk711ay9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-overview-health-value[b-v0kk711ay9] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.admin-overview-health-label[b-v0kk711ay9] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
}

.admin-overview-divider[b-v0kk711ay9] {
    width: 1px;
    height: 40px;
    background: var(--theme-border, rgba(226, 232, 240, 0.8));
    flex-shrink: 0;
}

.admin-overview-metric[b-v0kk711ay9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-overview-metric-value[b-v0kk711ay9] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--theme-text-primary, #1e293b);
}

.admin-overview-metric-label[b-v0kk711ay9] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
}

/* Subscription Tier Cards */
.admin-tier-grid[b-v0kk711ay9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.admin-tier-card[b-v0kk711ay9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 14px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.admin-tier-card:hover[b-v0kk711ay9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.admin-tier-icon[b-v0kk711ay9] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-tier-icon svg[b-v0kk711ay9] {
    width: 24px;
    height: 24px;
    color: white;
}

.tier-starter .admin-tier-icon[b-v0kk711ay9] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.tier-growth .admin-tier-icon[b-v0kk711ay9] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.tier-scale .admin-tier-icon[b-v0kk711ay9] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.admin-tier-info[b-v0kk711ay9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.admin-tier-count[b-v0kk711ay9] {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--theme-text-primary, #1e293b);
}

.admin-tier-label[b-v0kk711ay9] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.admin-tier-price[b-v0kk711ay9] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
}

/* Section Title */
.admin-section-title[b-v0kk711ay9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--theme-text-primary, #1e293b);
}

.admin-section-title svg[b-v0kk711ay9] {
    width: 22px;
    height: 22px;
}

/* Progress Section */
.admin-progress-section[b-v0kk711ay9] {
    padding: 24px;
    border-radius: 14px;
    margin-bottom: 24px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-progress-grid[b-v0kk711ay9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.admin-progress-item[b-v0kk711ay9] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-progress-header[b-v0kk711ay9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-progress-label[b-v0kk711ay9] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.admin-progress-value[b-v0kk711ay9] {
    font-size: 0.85rem;
    font-weight: 700;
}

.admin-progress-bar[b-v0kk711ay9] {
    height: 8px;
    background: rgba(148, 163, 184, 0.15);
    border-radius: 4px;
    overflow: hidden;
}

.admin-progress-fill[b-v0kk711ay9] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s ease;
}

.admin-progress-desc[b-v0kk711ay9] {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* Insights Section */
.admin-insights-section[b-v0kk711ay9] {
    margin-bottom: 24px;
}

.admin-insights-grid[b-v0kk711ay9] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.admin-insight-card[b-v0kk711ay9] {
    padding: 16px 20px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
}

.admin-insight-card.success[b-v0kk711ay9] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-left: 4px solid #10b981;
}

.admin-insight-card.warning[b-v0kk711ay9] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border-left: 4px solid #f59e0b;
}

.admin-insight-card.danger[b-v0kk711ay9] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-left: 4px solid #ef4444;
}

.admin-insight-card.info[b-v0kk711ay9] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-left: 4px solid #3b82f6;
}

/* Actions Section */
.admin-actions-section[b-v0kk711ay9] {
    margin-bottom: 24px;
}

.admin-actions-grid[b-v0kk711ay9] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.admin-action-link[b-v0kk711ay9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    cursor: pointer;
}

.admin-action-link:hover[b-v0kk711ay9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    border-color: var(--theme-primary, #1e3a5f);
    color: var(--theme-primary-ink, var(--theme-primary, #1e3a5f));
}

.admin-action-link svg[b-v0kk711ay9] {
    width: 24px;
    height: 24px;
    color: var(--theme-text-muted, #94a3b8);
    transition: color 0.2s ease;
}

.admin-action-link:hover svg[b-v0kk711ay9] {
    color: var(--theme-primary-ink, var(--theme-primary, #1e3a5f));
}

/* Dark theme overrides */
.is-dark .admin-overview-banner[b-v0kk711ay9] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .admin-overview-divider[b-v0kk711ay9] {
    background: rgba(255, 255, 255, 0.12);
}

.is-dark .admin-tier-card[b-v0kk711ay9] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .admin-progress-section[b-v0kk711ay9] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .admin-progress-bar[b-v0kk711ay9] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .admin-action-link[b-v0kk711ay9] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .admin-action-link:hover[b-v0kk711ay9] {
    border-color: rgba(255, 255, 255, 0.3);
}

.is-dark .admin-updated-badge[b-v0kk711ay9] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
    .admin-actions-grid[b-v0kk711ay9] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .admin-overview-banner[b-v0kk711ay9] {
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px 20px;
    }

    .admin-overview-divider[b-v0kk711ay9] {
        display: none;
    }

    .admin-tier-grid[b-v0kk711ay9] {
        grid-template-columns: 1fr;
    }

    .admin-progress-grid[b-v0kk711ay9] {
        grid-template-columns: 1fr;
    }

    .admin-insights-grid[b-v0kk711ay9] {
        grid-template-columns: 1fr;
    }

    .admin-actions-grid[b-v0kk711ay9] {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-header-meta[b-v0kk711ay9] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .admin-actions-grid[b-v0kk711ay9] {
        grid-template-columns: 1fr;
    }
}

/* ADMIN-METRICS-1 (2026-09-13): the three tier cards exclude admins, so they come up short
   against Total Users. This line says so instead of leaving the reader to find the gap. */
.admin-tier-footnote[b-v0kk711ay9] {
    margin: -0.25rem 0 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--theme-text-secondary);
}
/* /Pages/Admin/EmailSequenceDetail.razor.rz.scp.css */
/* Email Sequence Detail Page Styles */

.sequence-detail-page[b-cbtwhzyfec] {
    padding: 24px 32px;
    max-width: 100%;
    margin: 0;
}

/* Loading & Error States */
.loading-container[b-cbtwhzyfec],
.error-container[b-cbtwhzyfec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.loading-spinner[b-cbtwhzyfec] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-cbtwhzyfec 1s linear infinite;
    margin-bottom: 16px;
}

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

.error-container h2[b-cbtwhzyfec] {
    color: #dc2626;
    margin-bottom: 8px;
}

/* Page Header */
.page-header[b-cbtwhzyfec] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.theme-space .page-header[b-cbtwhzyfec],
.theme-winter .page-header[b-cbtwhzyfec],
.theme-nature .page-header[b-cbtwhzyfec],
.theme-ocean .page-header[b-cbtwhzyfec] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.header-left[b-cbtwhzyfec] {
    flex: 1;
}

.back-link[b-cbtwhzyfec] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.back-link:hover[b-cbtwhzyfec] {
    text-decoration: underline;
}

.page-header h1[b-cbtwhzyfec] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.page-header .description[b-cbtwhzyfec] {
    color: #64748b;
    margin: 0;
}

.header-actions[b-cbtwhzyfec] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-badge[b-cbtwhzyfec] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active[b-cbtwhzyfec] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.paused[b-cbtwhzyfec] {
    background: #fef3c7;
    color: #92400e;
}

/* Dark theme */
.theme-space .page-header h1[b-cbtwhzyfec],
.theme-winter .page-header h1[b-cbtwhzyfec],
.theme-nature .page-header h1[b-cbtwhzyfec],
.theme-ocean .page-header h1[b-cbtwhzyfec] {
    color: #f1f5f9;
}

.theme-space .page-header .description[b-cbtwhzyfec],
.theme-winter .page-header .description[b-cbtwhzyfec],
.theme-nature .page-header .description[b-cbtwhzyfec],
.theme-ocean .page-header .description[b-cbtwhzyfec] {
    color: #94a3b8;
}

/* Section */
.section[b-cbtwhzyfec] {
    margin-bottom: 28px;
    background: white;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.theme-space .section[b-cbtwhzyfec],
.theme-winter .section[b-cbtwhzyfec],
.theme-nature .section[b-cbtwhzyfec],
.theme-ocean .section[b-cbtwhzyfec] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.section-header[b-cbtwhzyfec] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-header h2[b-cbtwhzyfec] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.section-header h2 svg[b-cbtwhzyfec] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.theme-space .section-header h2[b-cbtwhzyfec],
.theme-winter .section-header h2[b-cbtwhzyfec],
.theme-nature .section-header h2[b-cbtwhzyfec],
.theme-ocean .section-header h2[b-cbtwhzyfec] {
    color: #f1f5f9;
}

/* Empty Steps */
.empty-steps[b-cbtwhzyfec] {
    text-align: center;
    padding: 48px 20px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.03) 0%, rgba(var(--theme-primary-rgb), 0.08) 100%);
    border-radius: 10px;
    border: 2px dashed rgba(var(--theme-primary-rgb), 0.25);
}

.empty-steps svg[b-cbtwhzyfec] {
    color: var(--theme-primary-ink, var(--theme-primary));
    opacity: 0.5;
    margin-bottom: 12px;
}

.empty-steps h3[b-cbtwhzyfec] {
    color: #334155;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
}

.empty-steps p[b-cbtwhzyfec] {
    color: #64748b;
    margin: 0 0 20px 0;
    font-size: 0.9rem;
}

.theme-space .empty-steps[b-cbtwhzyfec],
.theme-winter .empty-steps[b-cbtwhzyfec],
.theme-nature .empty-steps[b-cbtwhzyfec],
.theme-ocean .empty-steps[b-cbtwhzyfec] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.1) 0%, rgba(var(--theme-primary-rgb), 0.05) 100%);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

.theme-space .empty-steps h3[b-cbtwhzyfec],
.theme-winter .empty-steps h3[b-cbtwhzyfec],
.theme-nature .empty-steps h3[b-cbtwhzyfec],
.theme-ocean .empty-steps h3[b-cbtwhzyfec] {
    color: #f1f5f9;
}

.theme-space .empty-steps p[b-cbtwhzyfec],
.theme-winter .empty-steps p[b-cbtwhzyfec],
.theme-nature .empty-steps p[b-cbtwhzyfec],
.theme-ocean .empty-steps p[b-cbtwhzyfec] {
    color: #94a3b8;
}

/* Steps List */
.steps-list[b-cbtwhzyfec] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.step-card[b-cbtwhzyfec] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.step-card:hover[b-cbtwhzyfec] {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.step-card.inactive[b-cbtwhzyfec] {
    opacity: 0.6;
}

.theme-space .step-card[b-cbtwhzyfec],
.theme-winter .step-card[b-cbtwhzyfec],
.theme-nature .step-card[b-cbtwhzyfec],
.theme-ocean .step-card[b-cbtwhzyfec] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.step-number[b-cbtwhzyfec] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.step-content[b-cbtwhzyfec] {
    flex: 1;
    min-width: 0;
}

.step-header[b-cbtwhzyfec] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.step-header h4[b-cbtwhzyfec] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.theme-space .step-header h4[b-cbtwhzyfec],
.theme-winter .step-header h4[b-cbtwhzyfec],
.theme-nature .step-header h4[b-cbtwhzyfec],
.theme-ocean .step-header h4[b-cbtwhzyfec] {
    color: #f1f5f9;
}

.delay-badge[b-cbtwhzyfec] {
    padding: 4px 10px;
    background: #e0e7ff;
    color: #3730a3;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.step-subject[b-cbtwhzyfec] {
    color: #475569;
    font-size: 0.9rem;
    margin: 0 0 4px 0;
}

.step-subject strong[b-cbtwhzyfec] {
    color: #64748b;
}

.step-time[b-cbtwhzyfec] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
}

.step-actions[b-cbtwhzyfec] {
    display: flex;
    gap: 8px;
}

/* Actions Grid */
.actions-grid[b-cbtwhzyfec] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.action-card[b-cbtwhzyfec] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.04) 0%, rgba(var(--theme-primary-rgb), 0.08) 100%);
    border-radius: 10px;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-card:hover[b-cbtwhzyfec] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.08) 0%, rgba(var(--theme-primary-rgb), 0.15) 100%);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    transform: translateY(-2px);
}

.action-card svg[b-cbtwhzyfec] {
    color: var(--theme-primary-ink, var(--theme-primary));
    margin-bottom: 10px;
}

.action-card h4[b-cbtwhzyfec] {
    margin: 0 0 4px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 600;
}

.action-card p[b-cbtwhzyfec] {
    margin: 0;
    color: #64748b;
    font-size: 0.8rem;
}

.theme-space .action-card[b-cbtwhzyfec],
.theme-winter .action-card[b-cbtwhzyfec],
.theme-nature .action-card[b-cbtwhzyfec],
.theme-ocean .action-card[b-cbtwhzyfec] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.15) 0%, rgba(var(--theme-primary-rgb), 0.08) 100%);
    border-color: rgba(var(--theme-primary-rgb), 0.25);
}

.theme-space .action-card:hover[b-cbtwhzyfec],
.theme-winter .action-card:hover[b-cbtwhzyfec],
.theme-nature .action-card:hover[b-cbtwhzyfec],
.theme-ocean .action-card:hover[b-cbtwhzyfec] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.2) 0%, rgba(var(--theme-primary-rgb), 0.12) 100%);
    border-color: rgba(var(--theme-primary-rgb), 0.4);
}

.theme-space .action-card h4[b-cbtwhzyfec],
.theme-winter .action-card h4[b-cbtwhzyfec],
.theme-nature .action-card h4[b-cbtwhzyfec],
.theme-ocean .action-card h4[b-cbtwhzyfec] {
    color: #f1f5f9;
}

.theme-space .action-card p[b-cbtwhzyfec],
.theme-winter .action-card p[b-cbtwhzyfec],
.theme-nature .action-card p[b-cbtwhzyfec],
.theme-ocean .action-card p[b-cbtwhzyfec] {
    color: #94a3b8;
}

/* Buttons */
.btn[b-cbtwhzyfec] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary[b-cbtwhzyfec] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%);
    color: white;
}

.btn-primary:hover[b-cbtwhzyfec] {
    background: linear-gradient(135deg, var(--theme-primary-hover) 0%, var(--theme-primary-hover) 100%);
}

.btn-sm[b-cbtwhzyfec] {
    padding: 8px 14px;
    font-size: 0.85rem;
}

.btn-outline[b-cbtwhzyfec] {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.btn-outline:hover[b-cbtwhzyfec] {
    background: #f1f5f9;
}

.btn-icon[b-cbtwhzyfec] {
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-cbtwhzyfec] {
    background: #f1f5f9;
    color: #1e293b;
}

.btn-icon.btn-danger:hover[b-cbtwhzyfec] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-icon.btn-test:hover[b-cbtwhzyfec] {
    background: #dbeafe;
    color: #2563eb;
}

.theme-space .btn-outline[b-cbtwhzyfec],
.theme-winter .btn-outline[b-cbtwhzyfec],
.theme-nature .btn-outline[b-cbtwhzyfec],
.theme-ocean .btn-outline[b-cbtwhzyfec] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

/* Analytics */
.analytics-grid[b-cbtwhzyfec] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.analytics-card[b-cbtwhzyfec] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
}

.theme-space .analytics-card[b-cbtwhzyfec],
.theme-winter .analytics-card[b-cbtwhzyfec],
.theme-nature .analytics-card[b-cbtwhzyfec],
.theme-ocean .analytics-card[b-cbtwhzyfec] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.analytics-value[b-cbtwhzyfec] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.theme-space .analytics-value[b-cbtwhzyfec],
.theme-winter .analytics-value[b-cbtwhzyfec],
.theme-nature .analytics-value[b-cbtwhzyfec],
.theme-ocean .analytics-value[b-cbtwhzyfec] {
    color: #f1f5f9;
}

.analytics-label[b-cbtwhzyfec] {
    display: block;
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 8px;
}

.analytics-rate[b-cbtwhzyfec] {
    display: block;
    font-size: 0.8rem;
    color: #16a34a;
    font-weight: 600;
    margin-top: 4px;
}

/* Test Email Dialog */
.test-email-info[b-cbtwhzyfec] {
    background: #f1f5f9;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.theme-space .test-email-info[b-cbtwhzyfec],
.theme-winter .test-email-info[b-cbtwhzyfec],
.theme-nature .test-email-info[b-cbtwhzyfec],
.theme-ocean .test-email-info[b-cbtwhzyfec] {
    background: rgba(0, 0, 0, 0.2);
}

/* Form */
.form-group[b-cbtwhzyfec] {
    margin-bottom: 20px;
}

.form-row[b-cbtwhzyfec] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group label[b-cbtwhzyfec] {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.theme-space .form-group label[b-cbtwhzyfec],
.theme-winter .form-group label[b-cbtwhzyfec],
.theme-nature .form-group label[b-cbtwhzyfec],
.theme-ocean .form-group label[b-cbtwhzyfec] {
    color: #e2e8f0;
}

.form-group input[type="text"][b-cbtwhzyfec],
.form-group input[type="number"][b-cbtwhzyfec],
.form-group input[type="time"][b-cbtwhzyfec],
.form-group select[b-cbtwhzyfec],
.form-group textarea[b-cbtwhzyfec] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.form-group input:focus[b-cbtwhzyfec],
.form-group select:focus[b-cbtwhzyfec],
.form-group textarea:focus[b-cbtwhzyfec] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.theme-space .form-group input[b-cbtwhzyfec],
.theme-space .form-group select[b-cbtwhzyfec],
.theme-space .form-group textarea[b-cbtwhzyfec],
.theme-winter .form-group input[b-cbtwhzyfec],
.theme-winter .form-group select[b-cbtwhzyfec],
.theme-winter .form-group textarea[b-cbtwhzyfec],
.theme-nature .form-group input[b-cbtwhzyfec],
.theme-nature .form-group select[b-cbtwhzyfec],
.theme-nature .form-group textarea[b-cbtwhzyfec],
.theme-ocean .form-group input[b-cbtwhzyfec],
.theme-ocean .form-group select[b-cbtwhzyfec],
.theme-ocean .form-group textarea[b-cbtwhzyfec] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.help-text[b-cbtwhzyfec] {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #64748b;
}

.checkbox-label[b-cbtwhzyfec] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-cbtwhzyfec] {
    width: 18px;
    height: 18px;
}

/* Content Layout - Two Column */
.content-layout[b-cbtwhzyfec] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.main-content[b-cbtwhzyfec] {
    min-width: 0;
}

.sidebar[b-cbtwhzyfec] {
    position: sticky;
    top: 24px;
}

.sidebar .section[b-cbtwhzyfec] {
    margin-bottom: 20px;
}

.sidebar .actions-grid[b-cbtwhzyfec] {
    grid-template-columns: 1fr;
    gap: 10px;
}

.sidebar .action-card[b-cbtwhzyfec] {
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
    gap: 14px;
}

.sidebar .action-card svg[b-cbtwhzyfec] {
    margin-bottom: 0;
    flex-shrink: 0;
}

.sidebar .action-card h4[b-cbtwhzyfec] {
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.sidebar .action-card p[b-cbtwhzyfec] {
    font-size: 0.75rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .content-layout[b-cbtwhzyfec] {
        grid-template-columns: 1fr;
    }
    
    .sidebar[b-cbtwhzyfec] {
        position: static;
    }
    
    .sidebar .actions-grid[b-cbtwhzyfec] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .sidebar .action-card[b-cbtwhzyfec] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .sequence-detail-page[b-cbtwhzyfec] {
        padding: 16px;
    }
    
    .page-header[b-cbtwhzyfec] {
        flex-direction: column;
    }
    
    .header-actions[b-cbtwhzyfec] {
        width: 100%;
        justify-content: space-between;
    }
    
    .form-row[b-cbtwhzyfec] {
        grid-template-columns: 1fr;
    }
    
    .step-card[b-cbtwhzyfec] {
        flex-direction: column;
    }
    
    .step-number[b-cbtwhzyfec] {
        align-self: flex-start;
    }
}
/* /Pages/Admin/EmailSequenceRecipients.razor.rz.scp.css */
/* Email Sequence Recipients Page Styles */

.recipients-page[b-snf25yiow7] {
    padding: 24px;
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
}

/* Loading & Error */
.loading-container[b-snf25yiow7],
.error-container[b-snf25yiow7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.loading-spinner[b-snf25yiow7] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-snf25yiow7 1s linear infinite;
    margin-bottom: 16px;
}

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

/* Page Header */
.page-header[b-snf25yiow7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.back-link[b-snf25yiow7] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6366f1;
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.back-link:hover[b-snf25yiow7] {
    text-decoration: underline;
}

.page-header h1[b-snf25yiow7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.page-header .subtitle[b-snf25yiow7] {
    color: #64748b;
    margin: 4px 0 0 0;
    font-size: 0.9rem;
}

.theme-space .page-header h1[b-snf25yiow7],
.theme-winter .page-header h1[b-snf25yiow7],
.theme-nature .page-header h1[b-snf25yiow7],
.theme-ocean .page-header h1[b-snf25yiow7] {
    color: #f1f5f9;
}

/* Stats Row */
.stats-row[b-snf25yiow7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-snf25yiow7] {
    display: flex;
    align-items: center;
    gap: 16px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-space .stat-card[b-snf25yiow7],
.theme-winter .stat-card[b-snf25yiow7],
.theme-nature .stat-card[b-snf25yiow7],
.theme-ocean .stat-card[b-snf25yiow7] {
    background: rgba(30, 41, 59, 0.8);
}

.stat-icon[b-snf25yiow7] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.active[b-snf25yiow7] {
    background: #dcfce7;
    color: #16a34a;
}

.stat-icon.completed[b-snf25yiow7] {
    background: #dbeafe;
    color: #2563eb;
}

.stat-icon.paused[b-snf25yiow7] {
    background: #fef3c7;
    color: #d97706;
}

.stat-icon.cancelled[b-snf25yiow7] {
    background: #fee2e2;
    color: #dc2626;
}

.stat-info[b-snf25yiow7] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-snf25yiow7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label[b-snf25yiow7] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 4px;
}

.theme-space .stat-value[b-snf25yiow7],
.theme-winter .stat-value[b-snf25yiow7],
.theme-nature .stat-value[b-snf25yiow7],
.theme-ocean .stat-value[b-snf25yiow7] {
    color: #f1f5f9;
}

/* Empty State */
.empty-state[b-snf25yiow7] {
    text-align: center;
    padding: 60px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e2e8f0;
}

.empty-state svg[b-snf25yiow7] {
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-state h3[b-snf25yiow7] {
    color: #334155;
    margin: 0 0 8px 0;
}

.empty-state p[b-snf25yiow7] {
    color: #64748b;
    margin: 0 0 20px 0;
}

.theme-space .empty-state[b-snf25yiow7],
.theme-winter .empty-state[b-snf25yiow7],
.theme-nature .empty-state[b-snf25yiow7],
.theme-ocean .empty-state[b-snf25yiow7] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Recipients Table */
.recipients-table-container[b-snf25yiow7] {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-space .recipients-table-container[b-snf25yiow7],
.theme-winter .recipients-table-container[b-snf25yiow7],
.theme-nature .recipients-table-container[b-snf25yiow7],
.theme-ocean .recipients-table-container[b-snf25yiow7] {
    background: rgba(30, 41, 59, 0.8);
}

.recipients-table[b-snf25yiow7] {
    width: 100%;
    border-collapse: collapse;
}

.recipients-table th[b-snf25yiow7],
.recipients-table td[b-snf25yiow7] {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}

.recipients-table th[b-snf25yiow7] {
    background: #f8fafc;
    font-weight: 600;
    color: #64748b;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.theme-space .recipients-table th[b-snf25yiow7],
.theme-winter .recipients-table th[b-snf25yiow7],
.theme-nature .recipients-table th[b-snf25yiow7],
.theme-ocean .recipients-table th[b-snf25yiow7] {
    background: rgba(0, 0, 0, 0.2);
    color: #94a3b8;
}

.theme-space .recipients-table td[b-snf25yiow7],
.theme-winter .recipients-table td[b-snf25yiow7],
.theme-nature .recipients-table td[b-snf25yiow7],
.theme-ocean .recipients-table td[b-snf25yiow7] {
    border-color: rgba(255, 255, 255, 0.05);
}

.user-cell[b-snf25yiow7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar[b-snf25yiow7] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.user-info[b-snf25yiow7] {
    display: flex;
    flex-direction: column;
}

.user-name[b-snf25yiow7] {
    font-weight: 500;
    color: #1e293b;
}

.user-email[b-snf25yiow7] {
    font-size: 0.85rem;
    color: #64748b;
}

.theme-space .user-name[b-snf25yiow7],
.theme-winter .user-name[b-snf25yiow7],
.theme-nature .user-name[b-snf25yiow7],
.theme-ocean .user-name[b-snf25yiow7] {
    color: #f1f5f9;
}

/* Progress Bar */
.progress-cell[b-snf25yiow7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar[b-snf25yiow7] {
    width: 100px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-snf25yiow7] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-snf25yiow7] {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
}

/* Status Badge */
.status-badge[b-snf25yiow7] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-badge.active[b-snf25yiow7] {
    background: #dcfce7;
    color: #166534;
}

.status-badge.completed[b-snf25yiow7] {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge.paused[b-snf25yiow7] {
    background: #fef3c7;
    color: #92400e;
}

.status-badge.cancelled[b-snf25yiow7] {
    background: #f1f5f9;
    color: #64748b;
}

.date[b-snf25yiow7] {
    color: #64748b;
    font-size: 0.9rem;
}

.action-buttons[b-snf25yiow7] {
    display: flex;
    gap: 8px;
}

/* Buttons */
.btn[b-snf25yiow7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary[b-snf25yiow7] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-snf25yiow7] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.btn-primary:disabled[b-snf25yiow7] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-outline[b-snf25yiow7] {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.btn-outline:hover[b-snf25yiow7] {
    background: #f1f5f9;
}

.btn-icon[b-snf25yiow7] {
    padding: 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-snf25yiow7] {
    background: #f1f5f9;
    color: #1e293b;
}

.btn-icon.btn-danger:hover[b-snf25yiow7] {
    background: #fee2e2;
    color: #dc2626;
}

.theme-space .btn-outline[b-snf25yiow7],
.theme-winter .btn-outline[b-snf25yiow7],
.theme-nature .btn-outline[b-snf25yiow7],
.theme-ocean .btn-outline[b-snf25yiow7] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

/* Dialog */
.dialog-overlay[b-snf25yiow7] {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.dialog-content[b-snf25yiow7] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px transparent;
}

.dialog-content.enroll-dialog[b-snf25yiow7] {
    max-width: 550px;
}

.theme-space .dialog-content[b-snf25yiow7],
.theme-winter .dialog-content[b-snf25yiow7],
.theme-nature .dialog-content[b-snf25yiow7],
.theme-ocean .dialog-content[b-snf25yiow7] {
    background: #1e293b;
}

.dialog-header[b-snf25yiow7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.dialog-header h2[b-snf25yiow7] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.btn-close[b-snf25yiow7] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
}

.dialog-body[b-snf25yiow7] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.dialog-footer[b-snf25yiow7] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.theme-space .dialog-header[b-snf25yiow7],
.theme-space .dialog-footer[b-snf25yiow7],
.theme-winter .dialog-header[b-snf25yiow7],
.theme-winter .dialog-footer[b-snf25yiow7],
.theme-nature .dialog-header[b-snf25yiow7],
.theme-nature .dialog-footer[b-snf25yiow7],
.theme-ocean .dialog-header[b-snf25yiow7],
.theme-ocean .dialog-footer[b-snf25yiow7] {
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .dialog-header h2[b-snf25yiow7],
.theme-winter .dialog-header h2[b-snf25yiow7],
.theme-nature .dialog-header h2[b-snf25yiow7],
.theme-ocean .dialog-header h2[b-snf25yiow7] {
    color: #f1f5f9;
}

/* Form */
.form-group[b-snf25yiow7] {
    margin-bottom: 20px;
}

.form-group label[b-snf25yiow7] {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.form-group input[type="text"][b-snf25yiow7] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
}

.form-group input:focus[b-snf25yiow7] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.theme-space .form-group label[b-snf25yiow7],
.theme-winter .form-group label[b-snf25yiow7],
.theme-nature .form-group label[b-snf25yiow7],
.theme-ocean .form-group label[b-snf25yiow7] {
    color: #e2e8f0;
}

.theme-space .form-group input[b-snf25yiow7],
.theme-winter .form-group input[b-snf25yiow7],
.theme-nature .form-group input[b-snf25yiow7],
.theme-ocean .form-group input[b-snf25yiow7] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

/* Users List */
.users-list[b-snf25yiow7] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.theme-space .users-list[b-snf25yiow7],
.theme-winter .users-list[b-snf25yiow7],
.theme-nature .users-list[b-snf25yiow7],
.theme-ocean .users-list[b-snf25yiow7] {
    border-color: rgba(255, 255, 255, 0.1);
}

.no-users[b-snf25yiow7] {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

.user-checkbox[b-snf25yiow7] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s ease;
}

.user-checkbox:last-child[b-snf25yiow7] {
    border-bottom: none;
}

.user-checkbox:hover[b-snf25yiow7] {
    background: #f8fafc;
}

.user-checkbox.selected[b-snf25yiow7] {
    background: #eff6ff;
}

.theme-space .user-checkbox:hover[b-snf25yiow7],
.theme-winter .user-checkbox:hover[b-snf25yiow7],
.theme-nature .user-checkbox:hover[b-snf25yiow7],
.theme-ocean .user-checkbox:hover[b-snf25yiow7] {
    background: rgba(255, 255, 255, 0.05);
}

.theme-space .user-checkbox.selected[b-snf25yiow7],
.theme-winter .user-checkbox.selected[b-snf25yiow7],
.theme-nature .user-checkbox.selected[b-snf25yiow7],
.theme-ocean .user-checkbox.selected[b-snf25yiow7] {
    background: rgba(99, 102, 241, 0.2);
}

.user-checkbox input[type="checkbox"][b-snf25yiow7] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.user-checkbox .avatar[b-snf25yiow7] {
    width: 36px;
    height: 36px;
    font-size: 0.8rem;
}

.user-details[b-snf25yiow7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.user-details .name[b-snf25yiow7] {
    font-weight: 500;
    color: #1e293b;
}

.user-details .email[b-snf25yiow7] {
    font-size: 0.85rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-details .role[b-snf25yiow7] {
    font-size: 0.75rem;
    color: #6366f1;
    margin-top: 2px;
}

.theme-space .user-details .name[b-snf25yiow7],
.theme-winter .user-details .name[b-snf25yiow7],
.theme-nature .user-details .name[b-snf25yiow7],
.theme-ocean .user-details .name[b-snf25yiow7] {
    color: #f1f5f9;
}

.selection-summary[b-snf25yiow7] {
    margin-top: 16px;
    padding: 12px;
    background: #eff6ff;
    border-radius: 8px;
    text-align: center;
    color: #1e40af;
    font-weight: 500;
}

.theme-space .selection-summary[b-snf25yiow7],
.theme-winter .selection-summary[b-snf25yiow7],
.theme-nature .selection-summary[b-snf25yiow7],
.theme-ocean .selection-summary[b-snf25yiow7] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}

/* Responsive */
@media (max-width: 768px) {
    .recipients-page[b-snf25yiow7] {
        padding: 16px;
    }
    
    .page-header[b-snf25yiow7] {
        flex-direction: column;
    }
    
    .stats-row[b-snf25yiow7] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .recipients-table-container[b-snf25yiow7] {
        overflow-x: auto;
    }
    
    .recipients-table[b-snf25yiow7] {
        min-width: 600px;
    }
}
/* /Pages/Admin/EmailSequences.razor.rz.scp.css */
/* Email Sequences Admin Page Styles */

/* ============================================
   Page layout now uses global list-page-* classes
   from utilities.css. Only page-specific styles below.
   ============================================ */

/* Section Header (Scheduled Emails divider) */
.section-header[b-2zi1w810f0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.section-header h2[b-2zi1w810f0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary, #334155);
    margin: 0;
}

.section-header h2 svg[b-2zi1w810f0] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.is-dark .section-header[b-2zi1w810f0] {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Scheduled Emails Table */
.scheduled-emails-table[b-2zi1w810f0] {
    background: var(--theme-surface, white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
}

.is-dark .scheduled-emails-table[b-2zi1w810f0] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(148, 163, 184, 0.15);
}

.scheduled-emails-table table[b-2zi1w810f0] {
    width: 100%;
    border-collapse: collapse;
}

.scheduled-emails-table th[b-2zi1w810f0],
.scheduled-emails-table td[b-2zi1w810f0] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border, #f1f5f9);
}

.scheduled-emails-table th[b-2zi1w810f0] {
    background: var(--theme-surface-secondary, #f8fafc);
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.is-dark .scheduled-emails-table th[b-2zi1w810f0] {
    background: rgba(0, 0, 0, 0.2);
    color: #94a3b8;
}

.is-dark .scheduled-emails-table td[b-2zi1w810f0] {
    border-color: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
}

.recipient-info[b-2zi1w810f0] {
    display: flex;
    flex-direction: column;
}

.recipient-info .name[b-2zi1w810f0] {
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

.recipient-info .email[b-2zi1w810f0] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

.subject[b-2zi1w810f0] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-chip[b-2zi1w810f0] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-chip.pending[b-2zi1w810f0],
.status-chip.scheduled[b-2zi1w810f0] {
    background: #dbeafe;
    color: #1e40af;
}

.status-chip.sent[b-2zi1w810f0] {
    background: #dcfce7;
    color: #166534;
}

.status-chip.failed[b-2zi1w810f0] {
    background: #fee2e2;
    color: #991b1b;
}

.status-chip.cancelled[b-2zi1w810f0] {
    background: #f1f5f9;
    color: #64748b;
}

.status-chip.sending[b-2zi1w810f0] {
    background: #fef3c7;
    color: #92400e;
}

.status-chip.draft[b-2zi1w810f0] {
    background: #f1f5f9;
    color: #64748b;
}

.btn-icon[b-2zi1w810f0] {
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--theme-text-secondary, #64748b);
    transition: all 0.2s ease;
}

.btn-icon:hover[b-2zi1w810f0] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .btn-icon:hover[b-2zi1w810f0] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.empty-scheduled[b-2zi1w810f0] {
    text-align: center;
    padding: 40px;
    color: var(--theme-text-secondary, #64748b);
    background: var(--theme-surface, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
}

.is-dark .empty-scheduled[b-2zi1w810f0] {
    background: rgba(30, 41, 59, 0.5);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.15);
}

.stat-pct[b-2zi1w810f0] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Dialog Buttons */
.btn[b-2zi1w810f0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary[b-2zi1w810f0] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: white;
}

.btn-primary:hover[b-2zi1w810f0] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-1px);
}

.btn-outline[b-2zi1w810f0] {
    background: transparent;
    border: 1px solid var(--theme-border, #e2e8f0);
    color: var(--theme-text-secondary, #475569);
}

.btn-outline:hover[b-2zi1w810f0] {
    background: var(--theme-surface-secondary, #f1f5f9);
    border-color: var(--theme-border, #cbd5e1);
}

.is-dark .btn-outline[b-2zi1w810f0] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.is-dark .btn-outline:hover[b-2zi1w810f0] {
    background: rgba(255, 255, 255, 0.1);
}

/* Form Styles */
.form-group[b-2zi1w810f0] {
    margin-bottom: 20px;
}

.form-group label[b-2zi1w810f0] {
    display: block;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.is-dark .form-group label[b-2zi1w810f0] {
    color: #e2e8f0;
}

.form-group input[type="text"][b-2zi1w810f0],
.form-group input[type="email"][b-2zi1w810f0],
.form-group input[type="datetime-local"][b-2zi1w810f0],
.form-group textarea[b-2zi1w810f0],
.form-group select[b-2zi1w810f0] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--theme-input-bg, white);
    color: var(--theme-text-primary, #1e293b);
    transition: all 0.2s ease;
}

.form-group input:focus[b-2zi1w810f0],
.form-group textarea:focus[b-2zi1w810f0],
.form-group select:focus[b-2zi1w810f0] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.is-dark .form-group input[b-2zi1w810f0],
.is-dark .form-group textarea[b-2zi1w810f0],
.is-dark .form-group select[b-2zi1w810f0] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.form-group textarea[b-2zi1w810f0] {
    min-height: 100px;
    resize: vertical;
}

.form-row[b-2zi1w810f0] {
    display: flex;
    gap: 16px;
}

.checkbox-label[b-2zi1w810f0] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-2zi1w810f0] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Preview Dialog */
.preview-meta[b-2zi1w810f0] {
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.preview-meta p[b-2zi1w810f0] {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #475569);
}

.preview-meta p:last-child[b-2zi1w810f0] {
    margin-bottom: 0;
}

.is-dark .preview-meta[b-2zi1w810f0] {
    background: rgba(0, 0, 0, 0.2);
}

.preview-content[b-2zi1w810f0] {
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

/* Merge Tags */
.merge-tags[b-2zi1w810f0] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.merge-tag-label[b-2zi1w810f0] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.merge-tag[b-2zi1w810f0] {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}

.merge-tag:hover[b-2zi1w810f0] {
    background: #c7d2fe;
}

.is-dark .merge-tag[b-2zi1w810f0] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

/* Send Options */
.send-options[b-2zi1w810f0] {
    display: flex;
    gap: 20px;
}

.radio-label[b-2zi1w810f0] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.radio-label input[type="radio"][b-2zi1w810f0] {
    width: 16px;
    height: 16px;
    accent-color: var(--theme-primary, #6366f1);
}

/* Custom User Selection */
.custom-users-list[b-2zi1w810f0] {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    margin-top: 8px;
    padding: 4px;
}

.is-dark .custom-users-list[b-2zi1w810f0] {
    border-color: rgba(255, 255, 255, 0.1);
}

.user-checkbox[b-2zi1w810f0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.user-checkbox:hover[b-2zi1w810f0] {
    background: var(--theme-surface-secondary, #f1f5f9);
}

.user-checkbox.selected[b-2zi1w810f0] {
    background: #eef2ff;
}

.is-dark .user-checkbox:hover[b-2zi1w810f0] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .user-checkbox.selected[b-2zi1w810f0] {
    background: rgba(99, 102, 241, 0.15);
}

.user-checkbox input[type="checkbox"][b-2zi1w810f0] {
    width: 16px;
    height: 16px;
    accent-color: var(--theme-primary, #6366f1);
}

.user-display[b-2zi1w810f0] {
    font-size: 0.9rem;
    color: var(--theme-text-primary, #334155);
}

.is-dark .user-display[b-2zi1w810f0] {
    color: #e2e8f0;
}

.selection-summary[b-2zi1w810f0] {
    padding: 8px 0 0;
    font-size: 0.85rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 500;
}

/* Responsive */
@media (max-width: 768px) {
    .scheduled-emails-table[b-2zi1w810f0] {
        overflow-x: auto;
    }

    .scheduled-emails-table table[b-2zi1w810f0] {
        min-width: 600px;
    }

    .form-row[b-2zi1w810f0] {
        flex-direction: column;
        gap: 0;
    }

    .section-header[b-2zi1w810f0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
/* /Pages/Admin/EmailTemplates.razor.rz.scp.css */
/* Email Templates Admin Page Styles */

.email-templates-page[b-q93gga4i9v] {
    padding: 24px;
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

.page-header[b-q93gga4i9v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-header h1[b-q93gga4i9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.page-header h1 svg[b-q93gga4i9v] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.page-header .subtitle[b-q93gga4i9v] {
    color: #64748b;
    margin: 4px 0 0 44px;
    font-size: 0.95rem;
}

.header-actions[b-q93gga4i9v] {
    display: flex;
    gap: 8px;
}

/* Dark themes */
.is-dark .page-header h1[b-q93gga4i9v] {
    color: #f1f5f9;
}

.is-dark .page-header .subtitle[b-q93gga4i9v] {
    color: #94a3b8;
}

/* Loading */
.loading-container[b-q93gga4i9v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #64748b;
}

.loading-spinner[b-q93gga4i9v] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-q93gga4i9v 1s linear infinite;
    margin-bottom: 16px;
}

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

/* Empty State */
.empty-state[b-q93gga4i9v] {
    text-align: center;
    padding: 80px 20px;
    background: #f8fafc;
    border-radius: 16px;
    border: 2px dashed #e2e8f0;
}

.empty-state svg[b-q93gga4i9v] { color: #cbd5e1; margin-bottom: 16px; }
.empty-state h2[b-q93gga4i9v] { color: #334155; font-size: 1.5rem; margin: 0 0 8px 0; }
.empty-state p[b-q93gga4i9v] { color: #64748b; margin: 0 0 24px 0; max-width: 400px; display: inline-block; }

.is-dark .empty-state[b-q93gga4i9v] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .empty-state h2[b-q93gga4i9v] {
    color: #f1f5f9;
}

.is-dark .empty-state p[b-q93gga4i9v] {
    color: #94a3b8;
}

/* Templates Grid */
.templates-grid[b-q93gga4i9v] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

.template-card[b-q93gga4i9v] {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.2s ease;
}

.template-card:hover[b-q93gga4i9v] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.is-dark .template-card[b-q93gga4i9v] {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.template-card-header[b-q93gga4i9v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.template-card-header h3[b-q93gga4i9v] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.is-dark .template-card-header h3[b-q93gga4i9v] {
    color: #f1f5f9;
}

.scope-badge[b-q93gga4i9v] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scope-badge.system[b-q93gga4i9v] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.scope-badge.shared[b-q93gga4i9v] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.template-subject[b-q93gga4i9v] {
    font-size: 0.9rem;
    color: #475569;
}

.template-subject .label[b-q93gga4i9v] {
    font-weight: 600;
    color: #64748b;
}

.is-dark .template-subject[b-q93gga4i9v] {
    color: #94a3b8;
}

.template-preview[b-q93gga4i9v] {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    min-height: 40px;
}

.is-dark .template-preview[b-q93gga4i9v] {
    color: #94a3b8;
}

.template-meta[b-q93gga4i9v] {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: #94a3b8;
}

.template-actions[b-q93gga4i9v] {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.is-dark .template-actions[b-q93gga4i9v] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Buttons */
.btn[b-q93gga4i9v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.btn:disabled[b-q93gga4i9v] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-q93gga4i9v] {
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-accent, #764ba2) 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.btn-primary:hover:not(:disabled)[b-q93gga4i9v] {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
    transform: translateY(-1px);
}

.btn-outline[b-q93gga4i9v] {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
}

.btn-outline:hover:not(:disabled)[b-q93gga4i9v] {
    background: #f3f4f6;
}

.is-dark .btn-outline[b-q93gga4i9v] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.is-dark .btn-outline:hover:not(:disabled)[b-q93gga4i9v] {
    background: rgba(255, 255, 255, 0.1);
}

.btn-danger[b-q93gga4i9v] {
    background: #ef4444;
    color: #ffffff;
}

.btn-danger:hover:not(:disabled)[b-q93gga4i9v] {
    background: #dc2626;
}

.btn-danger-outline[b-q93gga4i9v] {
    background: transparent;
    border: 1px solid #fca5a5;
    color: #ef4444;
}

.btn-danger-outline:hover:not(:disabled)[b-q93gga4i9v] {
    background: #fef2f2;
}

.is-dark .btn-danger-outline:hover:not(:disabled)[b-q93gga4i9v] {
    background: rgba(239, 68, 68, 0.15);
}

.btn-sm[b-q93gga4i9v] {
    padding: 6px 14px;
    font-size: 0.8rem;
}

/* Form Styles */
.form-group[b-q93gga4i9v] {
    margin-bottom: 20px;
}

.form-group label[b-q93gga4i9v] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.is-dark .form-group label[b-q93gga4i9v] {
    color: #e2e8f0;
}

.form-group input[b-q93gga4i9v],
.form-group select[b-q93gga4i9v],
.form-group textarea[b-q93gga4i9v] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.form-group input:focus[b-q93gga4i9v],
.form-group select:focus[b-q93gga4i9v],
.form-group textarea:focus[b-q93gga4i9v] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.is-dark .form-group input[b-q93gga4i9v],
.is-dark .form-group select[b-q93gga4i9v],
.is-dark .form-group textarea[b-q93gga4i9v] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
}

.form-group textarea[b-q93gga4i9v] {
    resize: vertical;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.form-group .hint[b-q93gga4i9v] {
    display: block;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
}

.form-group .hint code[b-q93gga4i9v] {
    background: rgba(99, 102, 241, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Merge tags */
.merge-tags[b-q93gga4i9v] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.merge-tag-label[b-q93gga4i9v] {
    font-size: 0.8rem;
    color: #64748b;
}

.merge-tag[b-q93gga4i9v] {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}

.merge-tag:hover[b-q93gga4i9v] {
    background: rgba(99, 102, 241, 0.15);
}

/* Preview */
.preview-meta[b-q93gga4i9v] {
    background: #f8fafc;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.preview-meta p[b-q93gga4i9v] {
    margin: 4px 0;
    font-size: 0.9rem;
}

.is-dark .preview-meta[b-q93gga4i9v] {
    background: rgba(30, 41, 59, 0.5);
}

.preview-content[b-q93gga4i9v] {
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    line-height: 1.6;
    color: #374151;
}

.is-dark .preview-content[b-q93gga4i9v] {
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 768px) {
    .email-templates-page[b-q93gga4i9v] {
        padding: 16px;
    }

    .templates-grid[b-q93gga4i9v] {
        grid-template-columns: 1fr;
    }

    .page-header[b-q93gga4i9v] {
        flex-direction: column;
    }
}
/* /Pages/Admin/EvolutionDebug.razor.rz.scp.css */
/* ============================================
   Evolution Debug Admin Page
   ============================================ */

.debug-search-bar[b-qz1dxc4ww3] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.debug-user-input[b-qz1dxc4ww3] {
    flex: 1;
    max-width: 420px;
    font-family: monospace;
    font-size: 0.875rem;
}

.debug-alert[b-qz1dxc4ww3] {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Grid ---- */

.debug-grid[b-qz1dxc4ww3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1.25rem;
}

.debug-card[b-qz1dxc4ww3] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px var(--theme-shadow-color, rgba(0,0,0,0.04));
}

.debug-card-wide[b-qz1dxc4ww3] {
    grid-column: 1 / -1;
}

.debug-card-title[b-qz1dxc4ww3] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: var(--theme-text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.debug-card-icon[b-qz1dxc4ww3] {
    font-size: 1.1rem;
}

.debug-card-count[b-qz1dxc4ww3] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-muted, #64748b);
    background: var(--theme-bg, #f8fafc);
    padding: 2px 8px;
    border-radius: 20px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.debug-card-hint[b-qz1dxc4ww3] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--theme-text-muted, #64748b);
}

/* ---- Stat Grid ---- */

.debug-stat-grid[b-qz1dxc4ww3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.debug-stat[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.debug-stat-label[b-qz1dxc4ww3] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #94a3b8);
}

.debug-stat-value[b-qz1dxc4ww3] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.debug-stat-unit[b-qz1dxc4ww3] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--theme-text-muted, #94a3b8);
}

.stage-badge[b-qz1dxc4ww3] {
    display: inline-block;
    background: var(--theme-primary, #6366f1);
    color: white;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* ---- Progress Bar ---- */

.debug-progress-wrap[b-qz1dxc4ww3] {
    margin-top: 0.75rem;
}

.debug-progress-label[b-qz1dxc4ww3] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
    margin-bottom: 0.4rem;
}

.debug-progress-bar[b-qz1dxc4ww3] {
    height: 10px;
    border-radius: 99px;
    background: var(--theme-bg, #f1f5f9);
    overflow: hidden;
}

.debug-progress-fill[b-qz1dxc4ww3] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    transition: width 0.4s ease;
}

/* ---- Tables ---- */

.debug-table[b-qz1dxc4ww3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.debug-table th[b-qz1dxc4ww3] {
    text-align: left;
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #94a3b8);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.debug-table td[b-qz1dxc4ww3] {
    padding: 0.5rem 0.6rem;
    color: var(--theme-text-primary, #1e293b);
    border-bottom: 1px solid var(--theme-border-light, #f1f5f9);
}

.debug-row-warning td[b-qz1dxc4ww3] {
    background: rgba(234, 179, 8, 0.06);
}

.debug-row-current td[b-qz1dxc4ww3] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    font-weight: 600;
}

.debug-row-tier-change td[b-qz1dxc4ww3] {
    border-top: 2px solid var(--theme-primary, #6366f1);
}

.debug-current-marker[b-qz1dxc4ww3] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.7rem;
    margin-right: 4px;
}

.debug-missing-badge[b-qz1dxc4ww3] {
    background: #fef2f2;
    color: #dc2626;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
}

.debug-ok[b-qz1dxc4ww3] {
    color: #16a34a;
    font-weight: 700;
}

.debug-equiv[b-qz1dxc4ww3] {
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
}

/* ---- Tier Badges ---- */

.tier-spark[b-qz1dxc4ww3]     { color: #f59e0b; font-weight: 700; }
.tier-pulse[b-qz1dxc4ww3]     { color: #3b82f6; font-weight: 700; }
.tier-nova[b-qz1dxc4ww3]      { color: #8b5cf6; font-weight: 700; }
.tier-zenith[b-qz1dxc4ww3]    { color: #ec4899; font-weight: 700; }
.tier-ascendant[b-qz1dxc4ww3] { color: #06b6d4; font-weight: 700; }
.tier-transcendent[b-qz1dxc4ww3] { color: #10b981; font-weight: 700; }
.tier-legendary[b-qz1dxc4ww3] { color: #f97316; font-weight: 700; }

.debug-tier-badge[b-qz1dxc4ww3] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--theme-bg, #f8fafc);
}

/* ---- Threshold Table ---- */

.debug-threshold-wrap[b-qz1dxc4ww3] {
    max-height: 480px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.debug-threshold-table td[b-qz1dxc4ww3],
.debug-threshold-table th[b-qz1dxc4ww3] {
    border-bottom: 1px solid var(--theme-border-light, #f1f5f9);
}

/* ---- Reason Summary ---- */

.debug-subheader[b-qz1dxc4ww3] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #94a3b8);
    margin: 1.25rem 0 0.6rem;
}

.debug-reason-list[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.debug-reason-row[b-qz1dxc4ww3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: var(--theme-bg, #f8fafc);
    font-size: 0.85rem;
}

.debug-reason-icon[b-qz1dxc4ww3] {
    font-size: 1rem;
    width: 24px;
    text-align: center;
}

.debug-reason-name[b-qz1dxc4ww3] {
    flex: 1;
    color: var(--theme-text-primary, #1e293b);
    font-weight: 500;
}

.debug-reason-count[b-qz1dxc4ww3] {
    color: var(--theme-text-muted, #64748b);
    font-size: 0.8rem;
}

.debug-reason-energy[b-qz1dxc4ww3] {
    color: #16a34a;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ---- Activity Log ---- */

.debug-log-list[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 360px;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.debug-log-row[b-qz1dxc4ww3] {
    display: grid;
    grid-template-columns: 28px 140px 1fr 80px 120px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--theme-border-light, #f8fafc);
}

.debug-log-row:last-child[b-qz1dxc4ww3] {
    border-bottom: none;
}

.debug-log-icon[b-qz1dxc4ww3] {
    text-align: center;
}

.debug-log-reason[b-qz1dxc4ww3] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-log-context[b-qz1dxc4ww3] {
    color: var(--theme-text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.debug-log-energy.positive[b-qz1dxc4ww3] {
    color: #16a34a;
    font-weight: 700;
    text-align: right;
}

.debug-log-energy.neutral[b-qz1dxc4ww3] {
    color: var(--theme-text-muted, #94a3b8);
    text-align: right;
}

.debug-log-date[b-qz1dxc4ww3] {
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.75rem;
    text-align: right;
}

/* ---- Admin Tools ---- */

.debug-tool-section[b-qz1dxc4ww3] {
    padding: 1rem 0;
    border-bottom: 1px solid var(--theme-border-light, #f1f5f9);
}

.debug-tool-section:last-child[b-qz1dxc4ww3] {
    border-bottom: none;
    padding-bottom: 0;
}

.debug-tool-title[b-qz1dxc4ww3] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 0.35rem;
}

.debug-tool-hint[b-qz1dxc4ww3] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
    margin: 0 0 0.75rem;
}

.debug-override-row[b-qz1dxc4ww3] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.debug-stage-input[b-qz1dxc4ww3] {
    width: 90px;
}

.debug-result-alert[b-qz1dxc4ww3] {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
}

/* ---- Empty & No-data states ---- */

.debug-empty-state[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--theme-text-muted, #94a3b8);
    gap: 0.75rem;
}

.debug-empty-icon[b-qz1dxc4ww3] {
    font-size: 3rem;
}

.debug-no-data[b-qz1dxc4ww3] {
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
    font-size: 0.875rem;
    padding: 0.5rem 0;
}

/* ---- System Health Cards ---- */

.debug-health-grid[b-qz1dxc4ww3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.debug-health-card[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 1px 4px var(--theme-shadow-color, rgba(0,0,0,0.03));
}

.debug-health-value[b-qz1dxc4ww3] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.debug-health-label[b-qz1dxc4ww3] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted, #94a3b8);
}

/* ---- User Picker ---- */

.debug-user-select[b-qz1dxc4ww3] {
    min-width: 260px;
    max-width: 400px;
    font-size: 0.85rem;
}

.debug-search-or[b-qz1dxc4ww3] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- View User Link ---- */

.debug-view-user-link[b-qz1dxc4ww3] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
}

.debug-view-user-link:hover[b-qz1dxc4ww3] {
    text-decoration: underline;
}

/* ---- Evolution Projection ---- */

.debug-projection[b-qz1dxc4ww3] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border-light, #f1f5f9);
}

.debug-projection-grid[b-qz1dxc4ww3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.debug-projection-stat[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-radius: 10px;
}

.debug-projection-value[b-qz1dxc4ww3] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.debug-projection-label[b-qz1dxc4ww3] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-muted, #94a3b8);
}

/* ---- Bulk Backfill Errors ---- */

.debug-bulk-errors[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.debug-bulk-error[b-qz1dxc4ww3] {
    font-size: 0.78rem;
    color: #dc2626;
}

/* ---- Spinner ---- */

.btn-spinner[b-qz1dxc4ww3] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-qz1dxc4ww3 0.7s linear infinite;
    margin-right: 6px;
}

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

/* ---- Dark Themes ---- */

.is-dark .debug-card[b-qz1dxc4ww3] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .debug-stat-value[b-qz1dxc4ww3],
.is-dark .debug-card-title[b-qz1dxc4ww3],
.is-dark .debug-table td[b-qz1dxc4ww3],
.is-dark .debug-log-reason[b-qz1dxc4ww3],
.is-dark .debug-tool-title[b-qz1dxc4ww3],
.is-dark .debug-reason-name[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .debug-table th[b-qz1dxc4ww3],
.is-dark .debug-stat-label[b-qz1dxc4ww3],
.is-dark .debug-stat-unit[b-qz1dxc4ww3],
.is-dark .debug-tool-hint[b-qz1dxc4ww3],
.is-dark .debug-log-context[b-qz1dxc4ww3],
.is-dark .debug-log-date[b-qz1dxc4ww3],
.is-dark .debug-reason-count[b-qz1dxc4ww3],
.is-dark .debug-equiv[b-qz1dxc4ww3],
.is-dark .debug-no-data[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.45);
}

.is-dark .debug-table td[b-qz1dxc4ww3] {
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .debug-table th[b-qz1dxc4ww3] {
    border-color: rgba(255, 255, 255, 0.12);
}

.is-dark .debug-progress-bar[b-qz1dxc4ww3] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .debug-reason-row[b-qz1dxc4ww3],
.is-dark .debug-tier-badge[b-qz1dxc4ww3] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .debug-log-list[b-qz1dxc4ww3],
.is-dark .debug-threshold-wrap[b-qz1dxc4ww3] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .debug-log-row[b-qz1dxc4ww3] {
    border-color: rgba(255, 255, 255, 0.05);
}

.is-dark .debug-row-current td[b-qz1dxc4ww3] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.is-dark .debug-row-warning td[b-qz1dxc4ww3] {
    background: rgba(234, 179, 8, 0.08);
}

.is-dark .debug-missing-badge[b-qz1dxc4ww3] {
    background: rgba(220, 38, 38, 0.15);
    color: #f87171;
}

.is-dark .debug-tool-section[b-qz1dxc4ww3] {
    border-color: rgba(255, 255, 255, 0.07);
}

.is-dark .debug-card-count[b-qz1dxc4ww3] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .debug-health-card[b-qz1dxc4ww3] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .debug-health-label[b-qz1dxc4ww3],
.is-dark .debug-search-or[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.45);
}

.is-dark .debug-projection[b-qz1dxc4ww3] {
    border-color: rgba(255, 255, 255, 0.07);
}

.is-dark .debug-projection-stat[b-qz1dxc4ww3] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.is-dark .debug-projection-label[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.45);
}

.is-dark .debug-view-user-link[b-qz1dxc4ww3] {
    color: var(--theme-accent, #8b5cf6);
}

.is-dark .debug-bulk-error[b-qz1dxc4ww3] {
    color: #f87171;
}

/* ---- Memory Files ---- */

.debug-memory-list[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.debug-memory-row[b-qz1dxc4ww3] {
    padding: 0.75rem;
    border-radius: 10px;
    background: var(--theme-bg, #f8fafc);
    border: 1px solid var(--theme-border-light, #f1f5f9);
}

.debug-memory-header[b-qz1dxc4ww3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.debug-memory-icon[b-qz1dxc4ww3] {
    font-size: 1rem;
}

.debug-memory-type[b-qz1dxc4ww3] {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--theme-text-primary, #1e293b);
}

.debug-memory-meta[b-qz1dxc4ww3] {
    display: flex;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.debug-memory-preview[b-qz1dxc4ww3] {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--theme-text-muted, #64748b);
    font-style: italic;
    line-height: 1.4;
    white-space: pre-line;
    overflow: hidden;
    max-height: 3.6em;
}

.debug-memory-content[b-qz1dxc4ww3] {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 0.6rem 0.75rem;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border-light, #f1f5f9);
    border-radius: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.debug-memory-toggle[b-qz1dxc4ww3] {
    margin-top: 0.3rem;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    cursor: pointer;
}

.debug-memory-toggle:hover[b-qz1dxc4ww3] {
    text-decoration: underline;
}

.debug-memory-reset[b-qz1dxc4ww3] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border-light, #f1f5f9);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.debug-memory-reset-hint[b-qz1dxc4ww3] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.is-dark .debug-memory-row[b-qz1dxc4ww3] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .debug-memory-type[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .debug-memory-meta[b-qz1dxc4ww3],
.is-dark .debug-memory-preview[b-qz1dxc4ww3],
.is-dark .debug-memory-reset-hint[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.45);
}

.is-dark .debug-memory-content[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .debug-memory-toggle[b-qz1dxc4ww3] {
    color: var(--theme-accent, #8b5cf6);
}

.is-dark .debug-memory-reset[b-qz1dxc4ww3] {
    border-color: rgba(255, 255, 255, 0.07);
}

/* ---- Sequential Evolution Preview ---- */

.debug-evo-preview-controls[b-qz1dxc4ww3] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.debug-evo-range[b-qz1dxc4ww3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.debug-evo-label[b-qz1dxc4ww3] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.debug-evo-arrow[b-qz1dxc4ww3] {
    font-size: 1.25rem;
    color: var(--theme-text-muted, #94a3b8);
    padding-bottom: 0.4rem;
    font-weight: 700;
}

.debug-evo-speed[b-qz1dxc4ww3] {
    min-width: 180px;
}

.is-dark .debug-evo-label[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .debug-evo-arrow[b-qz1dxc4ww3] {
    color: rgba(255, 255, 255, 0.3);
}
/* /Pages/Admin/FocusToolEditDialog.razor.rz.scp.css */
/* Content */
.dialog-content[b-v9q1bfhmcw] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0;
}

/* Tabs */
.tabs[b-v9q1bfhmcw] {
    display: flex;
    gap: 4px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    overflow-x: auto;
    flex-shrink: 0;
}

.tab[b-v9q1bfhmcw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #64748b);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab:hover[b-v9q1bfhmcw] {
    background: var(--theme-secondary, #f1f5f9);
}

.tab.active[b-v9q1bfhmcw] {
    background: var(--theme-accent);
    color: white;
}

.tab .material-symbols-rounded[b-v9q1bfhmcw] {
    font-size: 18px;
}

/* Tab Content */
.tab-content[b-v9q1bfhmcw] {
    padding: 24px;
}

.form-section[b-v9q1bfhmcw] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-section h4[b-v9q1bfhmcw] {
    margin: 8px 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #475569);
}

/* Form Groups */
.form-group[b-v9q1bfhmcw] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-v9q1bfhmcw] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.form-group input[b-v9q1bfhmcw],
.form-group textarea[b-v9q1bfhmcw],
.form-group select[b-v9q1bfhmcw] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.2s ease;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
}

.form-group input:focus[b-v9q1bfhmcw],
.form-group textarea:focus[b-v9q1bfhmcw],
.form-group select:focus[b-v9q1bfhmcw] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.form-group textarea[b-v9q1bfhmcw] {
    resize: vertical;
    min-height: 60px;
}

.field-hint[b-v9q1bfhmcw] {
    font-size: 0.8rem;
    color: var(--theme-text-hint, #94a3b8);
}

.field-error[b-v9q1bfhmcw] {
    font-size: 0.8rem;
    color: var(--theme-text-danger, #dc2626);
}

/* Form Rows */
.form-row[b-v9q1bfhmcw] {
    display: grid;
    gap: 16px;
}

.form-row.two-cols[b-v9q1bfhmcw] {
    grid-template-columns: 1fr 1fr;
}

.form-row.three-cols[b-v9q1bfhmcw] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Icon Input Group */
.icon-input-group[b-v9q1bfhmcw] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.icon-preview-btn[b-v9q1bfhmcw] {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 2px dashed var(--theme-input-border, #d1d5db);
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.icon-preview-btn:hover[b-v9q1bfhmcw] {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-primary-rgb), 0.1);
    transform: scale(1.05);
}

.icon-preview-btn .material-symbols-rounded[b-v9q1bfhmcw] {
    font-size: 26px;
}

.icon-input-field[b-v9q1bfhmcw] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Gradient Section */
.gradient-section[b-v9q1bfhmcw] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gradient-section > label[b-v9q1bfhmcw] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.color-controls[b-v9q1bfhmcw] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.color-control[b-v9q1bfhmcw] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.color-control input[type="color"][b-v9q1bfhmcw] {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    cursor: pointer;
    background: var(--theme-input-bg, #ffffff);
    flex-shrink: 0;
}

.color-control input[type="text"][b-v9q1bfhmcw] {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
}

.color-arrow[b-v9q1bfhmcw] {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 500;
    flex-shrink: 0;
}

/* Gradient Preview */
.gradient-preview[b-v9q1bfhmcw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    border-radius: 14px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gradient-preview .material-symbols-rounded[b-v9q1bfhmcw] {
    font-size: 28px;
}

.gradient-preview .preview-name[b-v9q1bfhmcw] {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

/* Toggle Group */
.toggle-group[b-v9q1bfhmcw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toggle-item[b-v9q1bfhmcw] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.toggle-item:hover[b-v9q1bfhmcw] {
    background: var(--theme-secondary, #f1f5f9);
    border-color: var(--theme-accent);
}

.toggle-item.standalone[b-v9q1bfhmcw] {
    margin-bottom: 16px;
}

/* Toggle switch */
.toggle-item input[type="checkbox"][b-v9q1bfhmcw] {
    -webkit-appearance: none;
    appearance: none;
    width: 44px;
    height: 24px;
    min-width: 44px;
    background: #cbd5e1;
    border-radius: 12px;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.toggle-item input[type="checkbox"][b-v9q1bfhmcw]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease;
}

.toggle-item input[type="checkbox"]:checked[b-v9q1bfhmcw] {
    background: var(--theme-accent);
}

.toggle-item input[type="checkbox"]:checked[b-v9q1bfhmcw]::after {
    transform: translateX(20px);
}

.toggle-content[b-v9q1bfhmcw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.toggle-title[b-v9q1bfhmcw] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
}

.toggle-desc[b-v9q1bfhmcw] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
    line-height: 1.4;
}

/* Checkbox Group */
.checkbox-group[b-v9q1bfhmcw] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Package Picker */
.package-picker[b-v9q1bfhmcw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    background: var(--theme-input-bg, #ffffff);
}

.checkbox-item[b-v9q1bfhmcw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--theme-text-primary, #1e293b);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.checkbox-item:hover[b-v9q1bfhmcw] {
    background: var(--theme-secondary, #f1f5f9);
    border-color: var(--theme-accent);
}

.checkbox-item input[type="checkbox"][b-v9q1bfhmcw] {
    accent-color: var(--theme-accent);
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Info Box */
.info-box[b-v9q1bfhmcw] {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(var(--theme-primary-rgb), 0.1);
    border-radius: 10px;
    color: var(--theme-accent);
}

.info-box.muted[b-v9q1bfhmcw] {
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-muted, #64748b);
}

.info-box .material-symbols-rounded[b-v9q1bfhmcw] {
    font-size: 20px;
    flex-shrink: 0;
}

.info-box p[b-v9q1bfhmcw] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.info-box strong[b-v9q1bfhmcw] {
    display: block;
    margin-bottom: 4px;
}

/* Loading State */
.loading-state[b-v9q1bfhmcw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--theme-text-muted, #64748b);
}

.loading-state p[b-v9q1bfhmcw] {
    margin-top: 12px;
}

/* Validation */
.validation-message[b-v9q1bfhmcw] {
    font-size: 0.8rem;
    color: var(--theme-text-danger, #dc2626);
    margin-top: 4px;
}

/* Responsive */
@media (max-width: 640px) {
    .tabs[b-v9q1bfhmcw] {
        padding: 12px 16px;
    }

    .tab[b-v9q1bfhmcw] {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .tab .material-symbols-rounded[b-v9q1bfhmcw] {
        display: none;
    }

    .tab-content[b-v9q1bfhmcw] {
        padding: 16px;
    }

    .form-row.two-cols[b-v9q1bfhmcw],
    .form-row.three-cols[b-v9q1bfhmcw] {
        grid-template-columns: 1fr;
    }

    .icon-input-group[b-v9q1bfhmcw] {
        flex-direction: column;
    }

    .icon-preview-btn[b-v9q1bfhmcw] {
        width: 100%;
        height: 48px;
    }

    .color-controls[b-v9q1bfhmcw] {
        flex-direction: column;
        gap: 8px;
    }

    .color-arrow[b-v9q1bfhmcw] {
        transform: rotate(90deg);
    }

    .gradient-preview[b-v9q1bfhmcw] {
        padding: 18px;
    }
}
/* /Pages/Admin/FocusToolsAdmin.razor.rz.scp.css */
/* ============================================
   FOCUS TOOLS ADMIN - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css. Only admin-specific
   styles here (table, cards, toggles, etc.)
   Container max-width is set via inline style.
   ============================================ */

/* ============================================
   VIEW TOGGLE
   ============================================ */
.admin-view-toggle[b-bjuborgy90] {
    display: flex;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.view-btn[b-bjuborgy90] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    transition: all 0.2s ease;
}

.view-btn svg[b-bjuborgy90] {
    width: 20px;
    height: 20px;
}

.view-btn:hover[b-bjuborgy90] {
    color: var(--theme-text-primary, #1e293b);
}

.view-btn.active[b-bjuborgy90] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-accent, #3b82f6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BULK ACTIONS
   ============================================ */
.admin-bulk-actions[b-bjuborgy90] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--theme-bg-info, rgba(59, 130, 246, 0.1));
    border-radius: 8px;
}

.bulk-count[b-bjuborgy90] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-info, #0284c7);
    margin-right: 8px;
}

.admin-bulk-clear[b-bjuborgy90] {
    background: transparent;
    border: none;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 4px 8px;
}

.admin-bulk-clear:hover[b-bjuborgy90] {
    color: var(--theme-text-primary, #1e293b);
}

.admin-results-count[b-bjuborgy90] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    margin-left: auto;
}

/* ============================================
   TOGGLE SWITCH
   ============================================ */
.admin-toggle-switch[b-bjuborgy90] {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.admin-toggle-switch input[b-bjuborgy90] {
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-toggle-switch .toggle-slider[b-bjuborgy90] {
    position: absolute;
    inset: 0;
    background: var(--theme-border, #e2e8f0);
    border-radius: 24px;
    transition: all 0.2s ease;
}

.admin-toggle-switch .toggle-slider[b-bjuborgy90]::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.admin-toggle-switch input:checked + .toggle-slider[b-bjuborgy90] {
    background: #22c55e;
}

.admin-toggle-switch input:checked + .toggle-slider[b-bjuborgy90]::before {
    transform: translateX(20px);
}

/* ============================================
   ADMIN BADGES
   ============================================ */
.admin-badge[b-bjuborgy90] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 14px;
    background: var(--theme-surface-secondary, #f1f5f9);
}

.visibility-badges[b-bjuborgy90] {
    display: flex;
    gap: 4px;
}

/* ============================================
   TABLE VIEW
   ============================================ */
.admin-tools-table-container[b-bjuborgy90] {
    background: var(--theme-surface, #ffffff);
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
}

.admin-tools-table[b-bjuborgy90] {
    width: 100%;
    border-collapse: collapse;
}

.admin-tools-table thead[b-bjuborgy90] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.admin-tools-table th[b-bjuborgy90] {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary, #64748b);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    white-space: nowrap;
}

.admin-tools-table th.sortable[b-bjuborgy90] {
    cursor: pointer;
    user-select: none;
}

.admin-tools-table th.sortable:hover[b-bjuborgy90] {
    color: var(--theme-accent, #3b82f6);
}

.admin-tools-table th.sorted[b-bjuborgy90] {
    color: var(--theme-accent, #3b82f6);
}

.admin-tools-table th .sort-icon[b-bjuborgy90] {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 0.5;
}

.admin-tools-table th.sorted .sort-icon[b-bjuborgy90] {
    opacity: 1;
}

.admin-tools-table td[b-bjuborgy90] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    vertical-align: middle;
}

.admin-tools-table tbody tr[b-bjuborgy90] {
    transition: background 0.2s ease;
}

.admin-tools-table tbody tr:hover[b-bjuborgy90] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.admin-tools-table tbody tr.selected[b-bjuborgy90] {
    background: var(--theme-bg-info, rgba(59, 130, 246, 0.1));
}

.admin-tools-table tbody tr.inactive[b-bjuborgy90] {
    opacity: 0.6;
}

/* Table Columns */
.col-select[b-bjuborgy90] { width: 40px; text-align: center; }
.col-icon[b-bjuborgy90] { width: 60px; }
.col-name[b-bjuborgy90] { min-width: 180px; }
.col-category[b-bjuborgy90] { width: 160px; }
.col-status[b-bjuborgy90] { width: 80px; }
.col-visibility[b-bjuborgy90] { width: 150px; }
.col-order[b-bjuborgy90] { width: 100px; }
.col-actions[b-bjuborgy90] { width: 180px; }

/* Tool Icon */
.tool-icon[b-bjuborgy90] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.tool-icon .material-symbols-rounded[b-bjuborgy90] {
    font-size: 22px;
}

/* Tool Info */
.tool-info[b-bjuborgy90] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tool-name[b-bjuborgy90] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.tool-slug[b-bjuborgy90] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #94a3b8);
    font-family: monospace;
}

/* Package Chips (condensed badges) */
.package-chips[b-bjuborgy90] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    align-items: center;
}

.package-chip[b-bjuborgy90] {
    display: inline-block;
    padding: 2px 7px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 4px;
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.12);
    color: var(--theme-accent, #6366f1);
}

.package-chip.overflow[b-bjuborgy90] {
    background: rgba(var(--theme-text-muted-rgb, 148, 163, 184), 0.15);
    color: var(--theme-text-muted, #94a3b8);
    cursor: default;
}

/* Order Controls */
.order-controls[b-bjuborgy90] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-order[b-bjuborgy90] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-order svg[b-bjuborgy90] {
    width: 18px;
    height: 18px;
}

.btn-order:hover:not(:disabled)[b-bjuborgy90] {
    background: var(--theme-accent, #3b82f6);
    color: white;
}

.btn-order:disabled[b-bjuborgy90] {
    opacity: 0.3;
    cursor: not-allowed;
}

.order-value[b-bjuborgy90] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    min-width: 20px;
    text-align: center;
}

/* ============================================
   CARD VIEW
   ============================================ */
.admin-tools-card-grid[b-bjuborgy90] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.admin-tool-card[b-bjuborgy90] {
    background: var(--theme-surface, #ffffff);
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
    transition: all 0.2s ease;
    position: relative;
}

.admin-tool-card:hover[b-bjuborgy90] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.admin-tool-card.selected[b-bjuborgy90] {
    border-color: var(--theme-accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.admin-tool-card.inactive[b-bjuborgy90] {
    opacity: 0.6;
}

.card-select[b-bjuborgy90] {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

.card-select input[type="checkbox"][b-bjuborgy90] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.card-header[b-bjuborgy90] {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.card-icon[b-bjuborgy90] {
    font-size: 36px;
    color: white;
}

.card-badges[b-bjuborgy90] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
}

.card-badge[b-bjuborgy90] {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.9);
}

.card-body[b-bjuborgy90] {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-title[b-bjuborgy90] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.card-slug[b-bjuborgy90] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #94a3b8);
    font-family: monospace;
}

.card-toggle[b-bjuborgy90] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.toggle-label[b-bjuborgy90] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.card-actions[b-bjuborgy90] {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface-secondary, #f8fafc);
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .admin-tools-table-container[b-bjuborgy90],
.is-dark .admin-tool-card[b-bjuborgy90] {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .admin-tools-table thead[b-bjuborgy90] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .admin-tools-table tbody tr:hover[b-bjuborgy90] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .admin-view-toggle[b-bjuborgy90],
.is-dark .card-actions[b-bjuborgy90] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .view-btn.active[b-bjuborgy90] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .btn-order[b-bjuborgy90],
.is-dark .admin-badge[b-bjuborgy90] {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .admin-tools-table-container[b-bjuborgy90] {
        overflow-x: auto;
    }
    
    .admin-tools-card-grid[b-bjuborgy90] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/HealthDashboard.razor.rz.scp.css */
/* ============================================
   HealthDashboard - Using Theme Variables
   ============================================ */

.health-page[b-efx32p6lm6] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
    background: var(--theme-page-bg);
}

.page-container[b-efx32p6lm6] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
    padding: 0;
    min-height: auto;
}

/* Hero Section */
.health-hero[b-efx32p6lm6] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    padding: 40px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px var(--theme-shadow-color);
}

.overall-status[b-efx32p6lm6] {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 16px;
}

.hero-title[b-efx32p6lm6] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.hero-subtitle[b-efx32p6lm6] {
    opacity: 0.9;
    margin: 0;
}

.metrics-row[b-efx32p6lm6] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 20px;
}

.metric-item[b-efx32p6lm6] {
    text-align: center;
}

.metric-value[b-efx32p6lm6] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.metric-label[b-efx32p6lm6] {
    font-size: 0.875rem;
    opacity: 0.8;
}

.server-time[b-efx32p6lm6] {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.auto-refresh-badge[b-efx32p6lm6] {
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Section Header */
.section-header[b-efx32p6lm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title[b-efx32p6lm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.btn-refresh[b-efx32p6lm6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--theme-primary-ink, var(--theme-primary));
    transition: all 0.2s ease;
}

.btn-refresh:hover:not(:disabled)[b-efx32p6lm6] {
    background: var(--theme-surface-secondary);
    border-color: var(--theme-primary);
}

.btn-refresh:disabled[b-efx32p6lm6] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Health Cards Grid */
.health-cards-grid[b-efx32p6lm6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* Health Card */
.health-card[b-efx32p6lm6] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--theme-border);
    border-left: 4px solid var(--theme-border);
    transition: all 0.3s ease;
}

.health-card:hover[b-efx32p6lm6] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.health-card.healthy[b-efx32p6lm6] { border-left-color: #10b981; }
.health-card.degraded[b-efx32p6lm6] { border-left-color: #f59e0b; }
.health-card.unhealthy[b-efx32p6lm6] { border-left-color: #ef4444; }

.card-header[b-efx32p6lm6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.card-info[b-efx32p6lm6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-icon[b-efx32p6lm6] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.card-icon.api[b-efx32p6lm6] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.card-icon.bot[b-efx32p6lm6] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.card-title[b-efx32p6lm6] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.card-subtitle[b-efx32p6lm6] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    margin: 0;
}

/* Status Badge */
.status-badge[b-efx32p6lm6] {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.status-badge.healthy[b-efx32p6lm6] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.status-badge.degraded[b-efx32p6lm6] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    animation: pulse-b-efx32p6lm6 2s infinite;
}

.status-badge.unhealthy[b-efx32p6lm6] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    animation: pulse-b-efx32p6lm6 1s infinite;
}

@keyframes pulse-b-efx32p6lm6 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Duration */
.duration-display[b-efx32p6lm6] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    margin-bottom: 12px;
}

.duration-value[b-efx32p6lm6] {
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Divider */
.divider[b-efx32p6lm6] {
    height: 1px;
    background: var(--theme-border);
    border: none;
    margin: 12px 0;
}

/* Check Item */
.check-item[b-efx32p6lm6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.check-info[b-efx32p6lm6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-icon[b-efx32p6lm6] {
    width: 20px;
    height: 20px;
}

.check-icon.healthy[b-efx32p6lm6] { color: #10b981; }
.check-icon.degraded[b-efx32p6lm6] { color: #f59e0b; }
.check-icon.unhealthy[b-efx32p6lm6] { color: #ef4444; }

.check-name[b-efx32p6lm6] {
    font-size: 0.9rem;
    color: var(--theme-text-primary);
}

.check-stats[b-efx32p6lm6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-duration[b-efx32p6lm6] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.check-status[b-efx32p6lm6] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.check-status.healthy[b-efx32p6lm6] { background: var(--theme-bg-success); color: var(--theme-text-success); }
.check-status.degraded[b-efx32p6lm6] { background: var(--theme-bg-warning); color: var(--theme-text-warning); }
.check-status.unhealthy[b-efx32p6lm6] { background: var(--theme-bg-danger); color: var(--theme-text-danger); }

/* Error Alert */
.alert-error[b-efx32p6lm6] {
    background: var(--theme-bg-danger);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
    color: var(--theme-text-danger);
    font-size: 0.875rem;
}

/* Endpoints Card */
.endpoints-card[b-efx32p6lm6] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--theme-border);
    margin-bottom: 24px;
}

.endpoints-title[b-efx32p6lm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 16px 0;
}

/* Table */
.data-table[b-efx32p6lm6] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-efx32p6lm6] {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    background: var(--theme-surface-secondary);
    border-bottom: 1px solid var(--theme-border);
}

.data-table td[b-efx32p6lm6] {
    padding: 12px 16px;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-border);
}

.data-table tbody tr:hover[b-efx32p6lm6] {
    background: var(--theme-surface-secondary);
}

.data-table code[b-efx32p6lm6] {
    background: var(--theme-surface-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.8rem;
}

/* Chips */
.chip[b-efx32p6lm6] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.chip-primary[b-efx32p6lm6] { background: var(--theme-bg-info); color: var(--theme-text-info); }
.chip-secondary[b-efx32p6lm6] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.chip-accent[b-efx32p6lm6] { background: rgba(16, 185, 129, 0.15); color: #10b981; }

/* Icon Button */
.icon-btn[b-efx32p6lm6] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-secondary);
    transition: all 0.15s ease;
}

.icon-btn:hover[b-efx32p6lm6] {
    background: var(--theme-surface-secondary);
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* Quick Links */
.quick-links-card[b-efx32p6lm6] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--theme-border);
}

.quick-links-title[b-efx32p6lm6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 16px 0;
}

.quick-links-grid[b-efx32p6lm6] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.quick-link[b-efx32p6lm6] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.quick-link:hover[b-efx32p6lm6] {
    border-color: var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
    background: var(--theme-surface-secondary);
}

/* Spinner */
.spinner[b-efx32p6lm6] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-efx32p6lm6 0.8s linear infinite;
}

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

/* Skeleton Loader */
.skeleton[b-efx32p6lm6] {
    background: linear-gradient(90deg, var(--theme-surface-secondary) 25%, var(--theme-border) 50%, var(--theme-surface-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-efx32p6lm6 1.5s infinite;
    border-radius: 12px;
    height: 180px;
}

@keyframes shimmer-b-efx32p6lm6 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive */
@media (max-width: 768px) {
    .health-page[b-efx32p6lm6] {
        padding: 16px;
    }

    .health-hero[b-efx32p6lm6] {
        padding: 24px 16px;
    }

    .overall-status[b-efx32p6lm6] {
        font-size: 3rem;
    }

    .hero-title[b-efx32p6lm6] {
        font-size: 1.25rem;
    }

    .metrics-row[b-efx32p6lm6] {
        gap: 20px;
    }

    .metric-value[b-efx32p6lm6] {
        font-size: 1.5rem;
    }

    .server-time[b-efx32p6lm6] {
        flex-direction: column;
        gap: 8px;
    }

    .health-cards-grid[b-efx32p6lm6] {
        grid-template-columns: 1fr;
    }

    .quick-links-grid[b-efx32p6lm6] {
        flex-direction: column;
    }

    .quick-link[b-efx32p6lm6] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Admin/InvitesDashboard.razor.rz.scp.css */
/* ============================================
   Invites Dashboard - Using Theme Variables
   ============================================ */

.invites-dashboard[b-2xcj1rdfcw] {
    min-height: calc(100vh - 56px);
    padding: 2rem;
    background: var(--theme-page-bg);
}

.page-container[b-2xcj1rdfcw] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
    padding: 0;
    min-height: auto;
}

/* Header */
.dashboard-header[b-2xcj1rdfcw] {
    margin-bottom: 2rem;
}

.header-content[b-2xcj1rdfcw] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-title h1[b-2xcj1rdfcw] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin-bottom: 0.25rem;
}

.header-title p[b-2xcj1rdfcw] {
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.btn-create[b-2xcj1rdfcw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 4px 12px var(--theme-shadow-color);
}

.btn-create:hover[b-2xcj1rdfcw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--theme-shadow-color);
}

/* Stats Row */
.stats-row[b-2xcj1rdfcw] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card[b-2xcj1rdfcw] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.stat-icon[b-2xcj1rdfcw] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.stat-icon.total[b-2xcj1rdfcw] { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); }
.stat-icon.pending[b-2xcj1rdfcw] { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.stat-icon.used[b-2xcj1rdfcw] { background: linear-gradient(135deg, #d1fae5, #a7f3d0); }
.stat-icon.expired[b-2xcj1rdfcw] { background: linear-gradient(135deg, #fee2e2, #fecaca); }

.stat-info[b-2xcj1rdfcw] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-2xcj1rdfcw] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    line-height: 1;
}

.stat-label[b-2xcj1rdfcw] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    margin-top: 0.25rem;
}

/* Filters Bar */
.filters-bar[b-2xcj1rdfcw] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group[b-2xcj1rdfcw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label[b-2xcj1rdfcw] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.filter-select[b-2xcj1rdfcw],
.filter-input[b-2xcj1rdfcw] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 0.9rem;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
}

.filter-select:focus[b-2xcj1rdfcw],
.filter-input:focus[b-2xcj1rdfcw] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-input[b-2xcj1rdfcw] {
    min-width: 200px;
}

/* Loading & Empty States */
.loading-state[b-2xcj1rdfcw],
.empty-state[b-2xcj1rdfcw] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--theme-surface);
    border-radius: 20px;
    border: 1px solid var(--theme-border);
}

.loading-spinner[b-2xcj1rdfcw] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-2xcj1rdfcw 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-2xcj1rdfcw {
    to { transform: rotate(360deg); }
}

.empty-icon[b-2xcj1rdfcw] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h3[b-2xcj1rdfcw] {
    font-size: 1.25rem;
    color: var(--theme-text-primary);
    margin-bottom: 0.5rem;
}

.empty-state p[b-2xcj1rdfcw] {
    color: var(--theme-text-secondary);
    margin-bottom: 1.5rem;
}

.btn-primary[b-2xcj1rdfcw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* Invites Grid */
.invites-grid[b-2xcj1rdfcw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1.5rem;
}

/* Invite Card */
.invite-card[b-2xcj1rdfcw] {
    background: var(--theme-surface);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 2px solid var(--theme-border);
    transition: all 0.2s;
}

.invite-card:hover[b-2xcj1rdfcw] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.invite-card.status-pending[b-2xcj1rdfcw] { border-color: #fbbf24; }
.invite-card.status-used[b-2xcj1rdfcw] { border-color: #10b981; }
.invite-card.status-expired[b-2xcj1rdfcw] { border-color: #ef4444; opacity: 0.8; }

.invite-header[b-2xcj1rdfcw] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.invite-avatar[b-2xcj1rdfcw] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.invite-title[b-2xcj1rdfcw] {
    flex: 1;
    min-width: 0;
}

.invite-title h3[b-2xcj1rdfcw] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invite-email[b-2xcj1rdfcw] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.status-badge[b-2xcj1rdfcw] {
    padding: 0.35rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.pending[b-2xcj1rdfcw] { background: var(--theme-bg-warning); color: var(--theme-text-warning); }
.status-badge.used[b-2xcj1rdfcw] { background: var(--theme-bg-success); color: var(--theme-text-success); }
.status-badge.expired[b-2xcj1rdfcw] { background: var(--theme-bg-danger); color: var(--theme-text-danger); }

/* Invite Details */
.invite-details[b-2xcj1rdfcw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--theme-surface-secondary);
    border-radius: 12px;
}

.detail-row[b-2xcj1rdfcw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.detail-label[b-2xcj1rdfcw] {
    color: var(--theme-text-secondary);
}

.detail-value[b-2xcj1rdfcw] {
    color: var(--theme-text-primary);
    font-weight: 500;
}

.detail-value.expiring-soon[b-2xcj1rdfcw] {
    color: var(--theme-text-warning);
}

.expiring-badge[b-2xcj1rdfcw] {
    margin-left: 0.5rem;
    padding: 0.15rem 0.5rem;
    background: var(--theme-bg-warning);
    color: var(--theme-text-warning);
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
}

.detail-value.interests[b-2xcj1rdfcw] {
    display: flex;
    gap: 0.25rem;
}

.interest-tag[b-2xcj1rdfcw] {
    font-size: 1rem;
}

.interest-more[b-2xcj1rdfcw] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    margin-left: 0.25rem;
}

/* Message */
.invite-message[b-2xcj1rdfcw] {
    padding: 0.75rem;
    background: var(--theme-bg-info);
    border-radius: 10px;
    margin-bottom: 1rem;
}

.message-label[b-2xcj1rdfcw] {
    font-size: 0.75rem;
    color: var(--theme-text-info);
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.invite-message p[b-2xcj1rdfcw] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    margin: 0;
    font-style: italic;
}

/* Actions */
.invite-actions[b-2xcj1rdfcw] {
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border);
}

.btn-action[b-2xcj1rdfcw] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy[b-2xcj1rdfcw] {
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
}

.btn-copy:hover[b-2xcj1rdfcw] {
    opacity: 0.8;
}

.btn-preview[b-2xcj1rdfcw] {
    background: var(--theme-bg-success);
    color: var(--theme-text-success);
}

.btn-preview:hover[b-2xcj1rdfcw] {
    opacity: 0.8;
}

.btn-delete[b-2xcj1rdfcw] {
    background: var(--theme-bg-danger);
    color: var(--theme-text-danger);
    flex: 0;
    padding: 0.6rem;
}

.btn-delete:hover[b-2xcj1rdfcw] {
    opacity: 0.8;
}

.action-info[b-2xcj1rdfcw] {
    flex: 1;
    text-align: center;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    padding: 0.6rem;
}

/* Send Email Modal — Cancel button (still used in BaseDialog footer) */
.btn-cancel[b-2xcj1rdfcw] {
    padding: 0.75rem 1.5rem;
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover[b-2xcj1rdfcw] {
    background: var(--theme-secondary-hover);
}

/* Responsive */
@media (max-width: 768px) {
    .invites-dashboard[b-2xcj1rdfcw] {
        padding: 1rem;
    }
    
    .invites-grid[b-2xcj1rdfcw] {
        grid-template-columns: 1fr;
    }
    
    .header-content[b-2xcj1rdfcw] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Send Email Button */
.btn-send[b-2xcj1rdfcw] {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.btn-send:hover[b-2xcj1rdfcw] {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Send Email Modal */
.email-form[b-2xcj1rdfcw] {
    text-align: left;
    margin: 1.5rem 0;
}

.email-form label[b-2xcj1rdfcw] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

.email-form label:first-child[b-2xcj1rdfcw] {
    margin-top: 0;
}

.email-input[b-2xcj1rdfcw] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--theme-border);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    transition: border-color 0.2s;
}

.email-input:focus[b-2xcj1rdfcw] {
    outline: none;
    border-color: var(--theme-primary);
}

.email-input[b-2xcj1rdfcw]::placeholder {
    color: var(--theme-text-tertiary);
}

.modal-info[b-2xcj1rdfcw] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    background: var(--theme-bg-info);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0 1.5rem 0;
}

.btn-send-confirm[b-2xcj1rdfcw] {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-send-confirm:hover:not(:disabled)[b-2xcj1rdfcw] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.btn-send-confirm:disabled[b-2xcj1rdfcw] {
    opacity: 0.7;
    cursor: not-allowed;
}

.sending-spinner[b-2xcj1rdfcw] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-2xcj1rdfcw 0.8s linear infinite;
}

@keyframes spin-b-2xcj1rdfcw {
    to { transform: rotate(360deg); }
}

/* /Pages/Admin/JobListingDialog.razor.rz.scp.css */
.dialog[b-mjz0xdjxes] {
    background: var(--theme-surface);
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 80vh;
}

.dialog-header[b-mjz0xdjxes] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--theme-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--theme-surface);
}

.dialog-title[b-mjz0xdjxes] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.dialog-body[b-mjz0xdjxes] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.form-grid[b-mjz0xdjxes] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group[b-mjz0xdjxes] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full[b-mjz0xdjxes] {
    grid-column: 1 / -1;
}

label[b-mjz0xdjxes] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

input[b-mjz0xdjxes], select[b-mjz0xdjxes], textarea[b-mjz0xdjxes] {
    padding: 0.625rem;
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-family: inherit;
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

input:focus[b-mjz0xdjxes], select:focus[b-mjz0xdjxes], textarea:focus[b-mjz0xdjxes] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}

.dialog-actions[b-mjz0xdjxes] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border);
    background: var(--theme-surface-secondary);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.btn[b-mjz0xdjxes] {
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-secondary[b-mjz0xdjxes] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
}

.btn-secondary:hover[b-mjz0xdjxes] {
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
}

.btn-primary[b-mjz0xdjxes] {
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #818cf8) 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-mjz0xdjxes] {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

.btn:disabled[b-mjz0xdjxes] {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .form-grid[b-mjz0xdjxes] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/KnowledgeArticlesAdmin.razor.rz.scp.css */
/* ============================================
   KNOWLEDGE BASE ADMIN PAGE
   ============================================ */

.knowledge-admin[b-5xpc4un8w9] {
    padding: 24px;
    min-height: calc(100vh - 56px);
    background: var(--theme-bg, #0f172a);
}

/* Page Header */
.page-header[b-5xpc4un8w9] {
    margin-bottom: 24px;
}

.header-content[b-5xpc4un8w9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.header-title h1[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
}

.header-title h1 .material-symbols-rounded[b-5xpc4un8w9] {
    color: #3b82f6;
}

.header-title p[b-5xpc4un8w9] {
    margin: 8px 0 0 0;
    color: #94a3b8;
    font-size: 0.9rem;
}

.btn-add[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add:hover[b-5xpc4un8w9] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

/* Stats Bar */
.stats-bar[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    margin-bottom: 20px;
}

.stat-item[b-5xpc4un8w9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-value[b-5xpc4un8w9] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.stat-label[b-5xpc4un8w9] {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider[b-5xpc4un8w9] {
    width: 1px;
    height: 40px;
    background: rgba(148, 163, 184, 0.2);
}

/* Filters Bar */
.filters-bar[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-box[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
}

.search-box .material-symbols-rounded[b-5xpc4un8w9] {
    color: #64748b;
    font-size: 20px;
}

.search-box input[b-5xpc4un8w9] {
    flex: 1;
    border: none;
    background: transparent;
    color: white;
    font-size: 0.9rem;
    outline: none;
}

.search-box input[b-5xpc4un8w9]::placeholder {
    color: #64748b;
}

.filter-select[b-5xpc4un8w9] {
    padding: 10px 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
}

.filter-select option[b-5xpc4un8w9] {
    background: #1e293b;
}

.results-count[b-5xpc4un8w9] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-left: auto;
}

/* Loading & Empty States */
.loading-state[b-5xpc4un8w9],
.empty-state[b-5xpc4un8w9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.spinner.large[b-5xpc4un8w9] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(148, 163, 184, 0.2);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-5xpc4un8w9 0.8s linear infinite;
}

@keyframes spin-b-5xpc4un8w9 {
    to { transform: rotate(360deg); }
}

.empty-state .material-symbols-rounded[b-5xpc4un8w9] {
    font-size: 64px;
    color: #475569;
    margin-bottom: 16px;
}

.empty-state h2[b-5xpc4un8w9] {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    color: white;
}

.empty-state p[b-5xpc4un8w9] {
    margin: 0 0 24px 0;
    color: #94a3b8;
}

.btn-primary[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
}

/* Articles Grid */
.articles-grid[b-5xpc4un8w9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.article-card[b-5xpc4un8w9] {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.2s ease;
}

.article-card:hover[b-5xpc4un8w9] {
    border-color: rgba(148, 163, 184, 0.2);
    transform: translateY(-2px);
}

.article-card.draft[b-5xpc4un8w9] {
    opacity: 0.7;
    border-style: dashed;
}

.article-header[b-5xpc4un8w9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.article-type-badge[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.article-type-badge .material-symbols-rounded[b-5xpc4un8w9] {
    font-size: 16px;
}

.article-type-badge.howto[b-5xpc4un8w9] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.article-type-badge.faq[b-5xpc4un8w9] {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.article-type-badge.tip[b-5xpc4un8w9] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.article-type-badge.tutorial[b-5xpc4un8w9] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.article-type-badge.troubleshooting[b-5xpc4un8w9] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.article-badges[b-5xpc4un8w9] {
    display: flex;
    gap: 6px;
}

.badge[b-5xpc4un8w9] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.badge.featured[b-5xpc4un8w9] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.badge.video[b-5xpc4un8w9] {
    background: rgba(236, 72, 153, 0.15);
    color: #ec4899;
}

.badge.draft[b-5xpc4un8w9] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.article-title[b-5xpc4un8w9] {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

.article-summary[b-5xpc4un8w9] {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: #94a3b8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-meta[b-5xpc4un8w9] {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.meta-item[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: #64748b;
}

.meta-item .material-symbols-rounded[b-5xpc4un8w9] {
    font-size: 16px;
}

.article-tools[b-5xpc4un8w9] {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 16px;
}

.tools-label[b-5xpc4un8w9] {
    margin-right: 6px;
}

.tools-list[b-5xpc4un8w9] {
    color: #94a3b8;
}

.article-actions[b-5xpc4un8w9] {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.btn-icon[b-5xpc4un8w9] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-5xpc4un8w9] {
    background: rgba(148, 163, 184, 0.2);
    color: white;
}

.btn-icon.danger:hover[b-5xpc4un8w9] {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Dialog */
.dialog-overlay[b-5xpc4un8w9] {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.article-dialog[b-5xpc4un8w9] {
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dialog-header[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.dialog-header h3[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.1rem;
    color: white;
}

.dialog-header .material-symbols-rounded[b-5xpc4un8w9] {
    color: #3b82f6;
}

.close-btn[b-5xpc4un8w9] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover[b-5xpc4un8w9] {
    background: rgba(148, 163, 184, 0.1);
    color: white;
}

.dialog-body[b-5xpc4un8w9] {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-5xpc4un8w9] {
    display: flex;
    gap: 16px;
}

.form-row.checkboxes[b-5xpc4un8w9] {
    gap: 24px;
}

.form-group[b-5xpc4un8w9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.flex-2[b-5xpc4un8w9] {
    flex: 2;
}

.form-group label[b-5xpc4un8w9] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
}

.form-group input[b-5xpc4un8w9],
.form-group select[b-5xpc4un8w9],
.form-group textarea[b-5xpc4un8w9] {
    padding: 10px 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.5);
    color: white;
    font-size: 0.9rem;
    font-family: inherit;
}

.form-group input:focus[b-5xpc4un8w9],
.form-group select:focus[b-5xpc4un8w9],
.form-group textarea:focus[b-5xpc4un8w9] {
    outline: none;
    border-color: #3b82f6;
}

.form-group small[b-5xpc4un8w9] {
    font-size: 0.75rem;
    color: #64748b;
}

.checkbox-label[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #94a3b8;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-5xpc4un8w9] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
}

.dialog-footer[b-5xpc4un8w9] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(15, 23, 42, 0.3);
}

.btn-cancel[b-5xpc4un8w9] {
    padding: 10px 20px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.btn-cancel:hover[b-5xpc4un8w9] {
    border-color: rgba(148, 163, 184, 0.5);
    color: white;
}

.btn-save[b-5xpc4un8w9] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: white;
    font-weight: 500;
    cursor: pointer;
}

.btn-save:disabled[b-5xpc4un8w9] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-small[b-5xpc4un8w9] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5xpc4un8w9 0.8s linear infinite;
}

/* Light Theme */
.theme-cloud.knowledge-admin[b-5xpc4un8w9] {
    background: #f1f5f9;
}

.theme-cloud .header-title h1[b-5xpc4un8w9],
.theme-cloud .article-title[b-5xpc4un8w9],
.theme-cloud .empty-state h2[b-5xpc4un8w9] {
    color: #1e3a5f;
}

.theme-cloud .stats-bar[b-5xpc4un8w9],
.theme-cloud .article-card[b-5xpc4un8w9] {
    background: white;
    border-color: rgba(30, 58, 95, 0.1);
}

.theme-cloud .filters-bar[b-5xpc4un8w9] {
    background: white;
}

.theme-cloud .article-dialog[b-5xpc4un8w9] {
    background: white;
}

/* Responsive */
@media (max-width: 768px) {
    .header-content[b-5xpc4un8w9] {
        flex-direction: column;
    }
    
    .articles-grid[b-5xpc4un8w9] {
        grid-template-columns: 1fr;
    }
    
    .form-row[b-5xpc4un8w9] {
        flex-direction: column;
    }
    
    .form-group.flex-2[b-5xpc4un8w9] {
        flex: 1;
    }
}
/* /Pages/Admin/KnowledgeBaseAdmin.razor.rz.scp.css */
/* ============================================
   KnowledgeBaseAdmin — Knowledge Base admin page
   Uses shared .list-page layout + scoped styles
   (sb- prefix retained for class stability — see DECISIONS.md
   "Sales bot terminology phase-out" for the symbol-vs-prose split.)
   ============================================ */

/* Header Actions */
.sb-header-actions[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sb-endpoint-badge[b-ro3vhp2wv5],
.sb-time-badge[b-ro3vhp2wv5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
}

.sb-endpoint-badge[b-ro3vhp2wv5] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.75rem;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-endpoint-badge svg[b-ro3vhp2wv5],
.sb-time-badge svg[b-ro3vhp2wv5] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Overview Banner */
.sb-overview-banner[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 28px;
    border-radius: 14px;
    margin-bottom: 24px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sb-overview-item[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-overview-icon[b-ro3vhp2wv5] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
    flex-shrink: 0;
}

.sb-overview-icon.success[b-ro3vhp2wv5] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.sb-overview-icon svg[b-ro3vhp2wv5] {
    width: 20px;
    height: 20px;
}

.sb-overview-text[b-ro3vhp2wv5] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sb-overview-value[b-ro3vhp2wv5] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--theme-text-primary, #1e293b);
}

.sb-overview-label[b-ro3vhp2wv5] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
}

.sb-overview-divider[b-ro3vhp2wv5] {
    width: 1px;
    height: 36px;
    background: var(--theme-border, rgba(226, 232, 240, 0.8));
    flex-shrink: 0;
}

.sb-overview-refresh[b-ro3vhp2wv5] {
    margin-left: auto;
}

.sb-refresh-label[b-ro3vhp2wv5] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
    white-space: nowrap;
}

/* Error Banner */
.sb-error-banner[b-ro3vhp2wv5] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.sb-error-header[b-ro3vhp2wv5] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.sb-error-header svg[b-ro3vhp2wv5] {
    color: #ef4444;
    flex-shrink: 0;
    margin-top: 1px;
}

.sb-error-header strong[b-ro3vhp2wv5] {
    font-size: 1rem;
    color: var(--theme-text-primary);
}

.sb-error-detail[b-ro3vhp2wv5] {
    margin: 4px 0 0 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

.sb-error-hints[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border);
}

.sb-hint-label[b-ro3vhp2wv5] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.sb-hint-chip[b-ro3vhp2wv5] {
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

/* Section Header */
.sb-section-header[b-ro3vhp2wv5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sb-section-header.sb-section-gap[b-ro3vhp2wv5] {
    margin-top: 32px;
}

.sb-section-title[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

.sb-section-title svg[b-ro3vhp2wv5] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* Refresh Button */
.sb-btn-refresh[b-ro3vhp2wv5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--theme-primary-ink, var(--theme-primary));
    transition: all 0.2s ease;
}

.sb-btn-refresh:hover:not(:disabled)[b-ro3vhp2wv5] {
    background: var(--theme-surface-secondary);
    border-color: var(--theme-primary);
}

.sb-btn-refresh:disabled[b-ro3vhp2wv5] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Spinner */
.sb-spinner[b-ro3vhp2wv5] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: sb-spin-b-ro3vhp2wv5 0.6s linear infinite;
}

@keyframes sb-spin-b-ro3vhp2wv5 {
    to { transform: rotate(360deg); }
}

/* Health Cards Grid */
.sb-health-grid[b-ro3vhp2wv5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 8px;
}

.sb-health-card[b-ro3vhp2wv5] {
    background: var(--theme-surface);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--theme-border);
    border-left: 4px solid var(--theme-border);
    transition: all 0.2s ease;
}

.sb-health-card:hover[b-ro3vhp2wv5] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.sb-health-card.healthy[b-ro3vhp2wv5] { border-left-color: #10b981; }
.sb-health-card.unhealthy[b-ro3vhp2wv5] { border-left-color: #ef4444; }

.sb-card-header[b-ro3vhp2wv5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.sb-card-info[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sb-card-icon[b-ro3vhp2wv5] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.sb-card-icon.accent[b-ro3vhp2wv5] {
    background: rgba(var(--theme-accent-rgb, 139, 92, 246), 0.1);
    color: var(--theme-accent);
}

.sb-card-title[b-ro3vhp2wv5] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.sb-card-subtitle[b-ro3vhp2wv5] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    margin: 2px 0 0 0;
}

/* Status Badge */
.sb-status-badge[b-ro3vhp2wv5] {
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.sb-status-badge.healthy[b-ro3vhp2wv5] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.sb-status-badge.unhealthy[b-ro3vhp2wv5] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.sb-status-badge.inactive[b-ro3vhp2wv5] {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.15);
}

/* Check List */
.sb-check-list[b-ro3vhp2wv5] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sb-check-item[b-ro3vhp2wv5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--theme-border);
}

.sb-check-item:last-child[b-ro3vhp2wv5] {
    border-bottom: none;
    padding-bottom: 0;
}

.sb-check-item:first-child[b-ro3vhp2wv5] {
    padding-top: 0;
}

.sb-check-name[b-ro3vhp2wv5] {
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.sb-check-name.sb-ip-addr[b-ro3vhp2wv5] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.sb-check-status[b-ro3vhp2wv5] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.sb-check-status.success[b-ro3vhp2wv5] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.sb-check-status.error[b-ro3vhp2wv5] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.sb-check-status.warning[b-ro3vhp2wv5] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.sb-check-status.unknown[b-ro3vhp2wv5] { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }

.sb-check-value[b-ro3vhp2wv5] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* Empty State Inline */
.sb-empty-inline[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 4px;
    color: var(--theme-text-secondary);
}

.sb-empty-inline .sb-empty-icon[b-ro3vhp2wv5] {
    font-size: 1.5rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.sb-empty-inline .sb-empty-title[b-ro3vhp2wv5] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    opacity: 0.7;
}

.sb-empty-inline .sb-empty-hint[b-ro3vhp2wv5] {
    display: block;
    font-size: 0.78rem;
    margin-top: 2px;
    opacity: 0.6;
}

.sb-empty-inline code[b-ro3vhp2wv5] {
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    font-size: 0.72rem;
    background: rgba(var(--theme-primary-rgb), 0.08);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Knowledge Files Card */
.sb-files-card[b-ro3vhp2wv5] {
    background: var(--theme-surface);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--theme-border);
    margin-bottom: 8px;
}

.sb-files-header[b-ro3vhp2wv5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.sb-file-count[b-ro3vhp2wv5] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.sb-file-list[b-ro3vhp2wv5] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}

.sb-file-item[b-ro3vhp2wv5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}

.sb-file-item:hover[b-ro3vhp2wv5] {
    background: var(--theme-surface-secondary, rgba(0,0,0,0.03));
}

.sb-file-info[b-ro3vhp2wv5] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sb-file-icon[b-ro3vhp2wv5] {
    color: var(--theme-primary-ink, var(--theme-primary));
    flex-shrink: 0;
    opacity: 0.7;
}

.sb-file-name[b-ro3vhp2wv5] {
    font-size: 0.85rem;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-file-size[b-ro3vhp2wv5] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Query Card */
.sb-query-card[b-ro3vhp2wv5] {
    background: var(--theme-surface);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--theme-border);
}

.sb-query-chips[b-ro3vhp2wv5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.sb-query-chip[b-ro3vhp2wv5] {
    font-size: 0.8rem;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.sb-query-chip:hover:not(:disabled)[b-ro3vhp2wv5] {
    border-color: var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.sb-query-chip:disabled[b-ro3vhp2wv5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sb-query-input-row[b-ro3vhp2wv5] {
    display: flex;
    gap: 10px;
}

.sb-query-input-row .nts-input[b-ro3vhp2wv5] {
    flex: 1;
}

/* Query Results */
.sb-query-results[b-ro3vhp2wv5] {
    margin-top: 16px;
    border-top: 1px solid var(--theme-border);
    padding-top: 16px;
}

.sb-result-meta[b-ro3vhp2wv5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.sb-confidence-badge[b-ro3vhp2wv5] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.sb-confidence-badge.high[b-ro3vhp2wv5] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.sb-confidence-badge.medium[b-ro3vhp2wv5] { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.sb-confidence-badge.low[b-ro3vhp2wv5] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.sb-source-badge[b-ro3vhp2wv5] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.sb-result-context[b-ro3vhp2wv5] {
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 10px;
    padding: 16px;
    overflow-x: auto;
}

.sb-result-context pre[b-ro3vhp2wv5] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--theme-text-primary);
    font-family: 'Cascadia Code', 'Fira Code', Consolas, monospace;
}

/* Dark theme overrides */
.is-dark .sb-overview-banner[b-ro3vhp2wv5] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .sb-overview-divider[b-ro3vhp2wv5] {
    background: rgba(255, 255, 255, 0.12);
}

.is-dark .sb-health-card[b-ro3vhp2wv5] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.is-dark .sb-files-card[b-ro3vhp2wv5],
.is-dark .sb-query-card[b-ro3vhp2wv5] {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.is-dark .sb-error-banner[b-ro3vhp2wv5] {
    background: rgba(30, 41, 59, 0.8);
}

.is-dark .sb-hint-chip[b-ro3vhp2wv5] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.25);
}

.is-dark .sb-result-context[b-ro3vhp2wv5] {
    background: rgba(15, 23, 42, 0.5);
}

.is-dark .sb-file-item:hover[b-ro3vhp2wv5] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .sb-empty-inline code[b-ro3vhp2wv5] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .sb-endpoint-badge[b-ro3vhp2wv5],
.is-dark .sb-time-badge[b-ro3vhp2wv5] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .sb-overview-banner[b-ro3vhp2wv5] {
        flex-wrap: wrap;
        gap: 16px;
        padding: 16px 20px;
    }

    .sb-overview-divider[b-ro3vhp2wv5] {
        display: none;
    }

    .sb-overview-refresh[b-ro3vhp2wv5] {
        width: 100%;
        text-align: center;
    }

    .sb-health-grid[b-ro3vhp2wv5] {
        grid-template-columns: 1fr;
    }

    .sb-query-input-row[b-ro3vhp2wv5] {
        flex-direction: column;
    }

    .sb-file-list[b-ro3vhp2wv5] {
        grid-template-columns: 1fr;
    }

    .sb-header-actions[b-ro3vhp2wv5] {
        width: 100%;
    }
}
/* /Pages/Admin/MemoryDebug.razor.rz.scp.css */
/* ============================================
   Memory Debug Admin Page
   ============================================ */

.mem-search-bar[b-8m65bg12hw] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mem-user-input[b-8m65bg12hw] {
    flex: 1;
    max-width: 420px;
    font-family: monospace;
    font-size: 0.875rem;
}

.mem-alert[b-8m65bg12hw] {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- System Health Grid ---- */

.mem-health-grid[b-8m65bg12hw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.mem-health-card[b-8m65bg12hw] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 1px 4px var(--theme-shadow-color, rgba(0,0,0,0.04));
}

.mem-health-card.accent[b-8m65bg12hw] {
    border-left: 3px solid var(--theme-primary, #6366f1);
}

.mem-health-value[b-8m65bg12hw] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    line-height: 1.2;
}

.mem-health-label[b-8m65bg12hw] {
    display: block;
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    margin-top: 0.25rem;
    font-weight: 500;
}

/* ---- Debug Grid ---- */

.mem-grid[b-8m65bg12hw] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1.25rem;
}

.mem-card[b-8m65bg12hw] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px var(--theme-shadow-color, rgba(0,0,0,0.04));
}

.mem-card-wide[b-8m65bg12hw] {
    grid-column: 1 / -1;
}

.mem-card-title[b-8m65bg12hw] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: var(--theme-text-primary, #1e293b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ---- Stats List ---- */

.mem-stat-list[b-8m65bg12hw] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.mem-stat-row[b-8m65bg12hw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
    border-bottom: 1px solid var(--theme-border, #f1f5f9);
}

.mem-stat-row:last-child[b-8m65bg12hw] {
    border-bottom: none;
}

.mem-stat-label[b-8m65bg12hw] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
}

.mem-stat-value[b-8m65bg12hw] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}

.mem-stat-value.highlight[b-8m65bg12hw] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 1rem;
}

/* ---- Conversation List ---- */

.mem-conversation-list[b-8m65bg12hw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mem-conversation-row[b-8m65bg12hw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    background: var(--theme-surface-alt, rgba(0,0,0,0.02));
}

.mem-conv-icons[b-8m65bg12hw] {
    flex-shrink: 0;
    width: 2rem;
}

.mem-conv-title[b-8m65bg12hw] {
    flex: 1;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--theme-text-primary, #1e293b);
}

.mem-conv-meta[b-8m65bg12hw] {
    flex-shrink: 0;
    color: var(--theme-text-secondary, #94a3b8);
    font-size: 0.75rem;
}

.mem-conv-date[b-8m65bg12hw] {
    flex-shrink: 0;
    color: var(--theme-text-secondary, #94a3b8);
    font-size: 0.75rem;
}

/* ---- Achievement Timeline ---- */

.mem-timeline[b-8m65bg12hw] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-height: 360px;
    overflow-y: auto;
}

.mem-timeline-item[b-8m65bg12hw] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.375rem 0;
}

.mem-timeline-badge[b-8m65bg12hw] {
    flex-shrink: 0;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    min-width: 2.5rem;
    text-align: center;
}

.mem-timeline-badge.big[b-8m65bg12hw] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    font-size: 0.875rem;
}

.mem-timeline-content[b-8m65bg12hw] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mem-timeline-reason[b-8m65bg12hw] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.mem-timeline-context[b-8m65bg12hw] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

.mem-timeline-date[b-8m65bg12hw] {
    font-size: 0.6875rem;
    color: var(--theme-text-secondary, #94a3b8);
}

/* ---- Message Viewer ---- */

.mem-message-viewer[b-8m65bg12hw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 500px;
    overflow-y: auto;
    padding: 0.5rem;
}

.mem-message[b-8m65bg12hw] {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    max-width: 85%;
}

.mem-message.user[b-8m65bg12hw] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.mem-message.assistant[b-8m65bg12hw] {
    background: var(--theme-surface-alt, rgba(0,0,0,0.03));
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.mem-message-header[b-8m65bg12hw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.mem-message-role[b-8m65bg12hw] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--theme-text-secondary, #64748b);
}

.mem-message-model[b-8m65bg12hw] {
    font-size: 0.625rem;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 600;
}

.mem-message-time[b-8m65bg12hw] {
    font-size: 0.625rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin-left: auto;
}

.mem-message-content[b-8m65bg12hw] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--theme-text-primary, #1e293b);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Empty State ---- */

.mem-empty-state[b-8m65bg12hw] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--theme-text-secondary, #94a3b8);
}

.mem-empty-icon[b-8m65bg12hw] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.mem-empty-hint[b-8m65bg12hw] {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #94a3b8);
    font-style: italic;
}

/* ---- Spinner ---- */

.btn-spinner[b-8m65bg12hw] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-8m65bg12hw 0.6s linear infinite;
}

@keyframes spin-b-8m65bg12hw {
    to { transform: rotate(360deg); }
}

/* ---- Dark Theme ---- */

.is-dark .mem-card[b-8m65bg12hw] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .mem-health-card[b-8m65bg12hw] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .mem-conversation-row[b-8m65bg12hw] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .mem-message.assistant[b-8m65bg12hw] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .mem-message.user[b-8m65bg12hw] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
    .mem-grid[b-8m65bg12hw] {
        grid-template-columns: 1fr;
    }

    .mem-health-grid[b-8m65bg12hw] {
        grid-template-columns: repeat(3, 1fr);
    }

    .mem-message[b-8m65bg12hw] {
        max-width: 95%;
    }
}
/* /Pages/Admin/OnboardingAnalytics.razor.rz.scp.css */
/* ============================================
   Onboarding Analytics — Scoped Styles
   Uses list-page design system + NativeDataGrid
   ============================================ */

/* Completion Rate percent sign */
.stat-percent[b-mliy32xd4d] {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.7;
}

/* Distribution Grid */
.distribution-grid[b-mliy32xd4d] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.distribution-card[b-mliy32xd4d] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    padding: 24px;
    transition: all 0.2s ease;
}

.distribution-card:hover[b-mliy32xd4d] {
    box-shadow: 0 6px 20px var(--theme-shadow-color, rgba(0, 0, 0, 0.08));
}

.distribution-card-header[b-mliy32xd4d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.distribution-card-title[b-mliy32xd4d] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.distribution-title-icon[b-mliy32xd4d] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.distribution-title-icon svg[b-mliy32xd4d] {
    color: white;
}

.distribution-title-icon.role-icon[b-mliy32xd4d] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.distribution-title-icon.size-icon[b-mliy32xd4d] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.distribution-card-badge[b-mliy32xd4d] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.distribution-items[b-mliy32xd4d] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.distribution-item[b-mliy32xd4d] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.distribution-header[b-mliy32xd4d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.distribution-label[b-mliy32xd4d] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.distribution-value[b-mliy32xd4d] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.distribution-pct[b-mliy32xd4d] {
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.distribution-bar[b-mliy32xd4d] {
    height: 10px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 5px;
    overflow: hidden;
}

.distribution-bar-fill[b-mliy32xd4d] {
    height: 100%;
    border-radius: 5px;
    min-width: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bar-primary[b-mliy32xd4d] {
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent, var(--theme-primary)));
}

.bar-accent[b-mliy32xd4d] {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.distribution-empty[b-mliy32xd4d] {
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.875rem;
    text-align: center;
    padding: 32px 0;
    margin: 0;
}

/* Section Cards (table wrappers) */
.section-card[b-mliy32xd4d] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, rgba(226, 232, 240, 0.8));
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    margin-bottom: 24px;
    overflow: hidden;
}

.section-card-title[b-mliy32xd4d] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 20px 24px 4px;
}

.section-card-title svg[b-mliy32xd4d] {
    width: 20px;
    height: 20px;
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* User Cell */
.user-cell[b-mliy32xd4d] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-avatar[b-mliy32xd4d] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.avatar-primary[b-mliy32xd4d] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent, var(--theme-primary)));
}

.avatar-warning[b-mliy32xd4d] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Dark theme overrides */
.is-dark .distribution-card[b-mliy32xd4d] {
    background: rgba(30, 41, 59, 0.7);
}

.is-dark .section-card[b-mliy32xd4d] {
    background: rgba(30, 41, 59, 0.7);
}

.is-dark .distribution-bar[b-mliy32xd4d] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .distribution-card-badge[b-mliy32xd4d] {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .distribution-grid[b-mliy32xd4d] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/OnboardingReset.razor.rz.scp.css */
.reset-page[b-jgpbvamtp8] {
    padding: 1.5rem;
    min-height: calc(100vh - 56px);
}

.page-container[b-jgpbvamtp8] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header */
.page-header[b-jgpbvamtp8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.header-info[b-jgpbvamtp8] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-jgpbvamtp8] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    flex-shrink: 0;
}

.header-text h1[b-jgpbvamtp8] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary);
}

.header-text p[b-jgpbvamtp8] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    margin: 0.25rem 0 0;
}

/* Cards */
.card[b-jgpbvamtp8] {
    background: var(--theme-surface);
    border-radius: 16px;
    border: 1px solid var(--theme-border);
    padding: 1.5rem;
    box-shadow: 0 2px 12px var(--theme-shadow-color);
}

.card-title[b-jgpbvamtp8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--theme-text-primary);
}

.card-title svg[b-jgpbvamtp8] {
    color: var(--theme-primary-ink, var(--theme-primary));
    flex-shrink: 0;
}

/* Search */
.search-container[b-jgpbvamtp8] {
    position: relative;
}

.search-results[b-jgpbvamtp8] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    box-shadow: 0 8px 24px var(--theme-shadow-color);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-result-item[b-jgpbvamtp8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.search-result-item:hover[b-jgpbvamtp8],
.search-result-item.selected[b-jgpbvamtp8] {
    background: rgba(var(--theme-primary-rgb), 0.08);
}

.search-result-item:first-child[b-jgpbvamtp8] {
    border-radius: 12px 12px 0 0;
}

.search-result-item:last-child[b-jgpbvamtp8] {
    border-radius: 0 0 12px 12px;
}

.user-avatar-sm[b-jgpbvamtp8] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.user-info[b-jgpbvamtp8] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.user-name[b-jgpbvamtp8] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.user-email[b-jgpbvamtp8] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

/* Selected user */
.selected-user-card[b-jgpbvamtp8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(var(--theme-primary-rgb), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
    border-radius: 12px;
}

.selected-user-info[b-jgpbvamtp8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-avatar-lg[b-jgpbvamtp8] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
    flex-shrink: 0;
}

.selected-user-name[b-jgpbvamtp8] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--theme-text-primary);
}

.selected-user-email[b-jgpbvamtp8] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* Reset Options */
.reset-options[b-jgpbvamtp8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reset-option[b-jgpbvamtp8] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--theme-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-option:hover[b-jgpbvamtp8] {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.04);
}

.reset-option.active[b-jgpbvamtp8] {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.reset-option.danger.active[b-jgpbvamtp8] {
    border-color: var(--theme-text-danger);
    background: rgba(239, 68, 68, 0.06);
}

.reset-option input[type="radio"][b-jgpbvamtp8] {
    margin-top: 0.25rem;
    accent-color: var(--theme-primary);
}

.reset-option.danger input[type="radio"][b-jgpbvamtp8] {
    accent-color: var(--theme-text-danger);
}

.option-content[b-jgpbvamtp8] {
    flex: 1;
}

.option-title[b-jgpbvamtp8] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--theme-text-primary);
    margin-bottom: 0.25rem;
}

.option-description[b-jgpbvamtp8] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    line-height: 1.5;
}

/* Form */
.form-group[b-jgpbvamtp8] {
    margin-bottom: 1rem;
}

.form-group label[b-jgpbvamtp8] {
    display: block;
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--theme-text-primary);
    margin-bottom: 0.4rem;
}

.action-row[b-jgpbvamtp8] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Data Table */
.data-table[b-jgpbvamtp8] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-jgpbvamtp8],
.data-table td[b-jgpbvamtp8] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.85rem;
    color: var(--theme-text-primary);
}

.data-table th[b-jgpbvamtp8] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
}
/* /Pages/Admin/PollDialog.razor.rz.scp.css */
.form-grid[b-n2jaq8xspl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.full-width[b-n2jaq8xspl] {
    grid-column: 1 / -1;
}

.form-group[b-n2jaq8xspl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-n2jaq8xspl] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-input[b-n2jaq8xspl], .form-select[b-n2jaq8xspl] {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--theme-input-border);
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    font-size: 0.875rem;
    min-height: 38px;
    width: 100%;
}

.form-input:focus[b-n2jaq8xspl], .form-select:focus[b-n2jaq8xspl] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

.form-checkbox[b-n2jaq8xspl] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-checkbox label[b-n2jaq8xspl] {
    font-size: 0.95rem;
    color: var(--theme-text-primary);
    cursor: pointer;
}

.divider[b-n2jaq8xspl] {
    height: 1px;
    background: var(--theme-border);
    margin: 8px 0;
}

.options-header[b-n2jaq8xspl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.options-header h4[b-n2jaq8xspl] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.option-row[b-n2jaq8xspl] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.flex-grow[b-n2jaq8xspl] {
    flex-grow: 1;
}

.dialog-actions[b-n2jaq8xspl] {
    margin-top: 32px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
}

@media (max-width: 640px) {
    .form-grid[b-n2jaq8xspl] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/PollResultsDialog.razor.rz.scp.css */
.vote-percentage[b-dz42br9sfl] {
    font-weight: 600;
}

.detail-item[b-dz42br9sfl] {
    display: flex;
    flex-direction: column;
}

.poll-result-item[b-dz42br9sfl] {
    padding: 8px;
    border-radius: 8px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.03);
}
/* /Pages/Admin/ReminderDetailsDialog.razor.rz.scp.css */
/* ============================================
   Reminder Details Dialog - Using Theme Variables
   ============================================ */

.dialog-paper[b-7aszl8o3bw] {
    padding: 1.5rem;
    background: var(--theme-surface-secondary);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.title-text[b-7aszl8o3bw] {
    font-weight: 700;
    color: var(--theme-text-primary);
}

.label-caption[b-7aszl8o3bw] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
    font-weight: 700;
}

.user-id-text[b-7aszl8o3bw] {
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
}

/* Modal specific styles */
.modal-overlay[b-7aszl8o3bw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-7aszl8o3bw 0.3s ease-out;
}

.modal-container[b-7aszl8o3bw] {
    background: var(--theme-surface);
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: slideIn-b-7aszl8o3bw 0.3s ease-out;
    border: 1px solid var(--theme-border);
}

.modal-header[b-7aszl8o3bw] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--theme-border);
}

.modal-header h2[b-7aszl8o3bw] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--theme-text-primary);
}

.modal-body[b-7aszl8o3bw] {
    padding: 1.5rem;
    overflow-y: auto;
}

.modal-actions[b-7aszl8o3bw] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Buttons */
.btn-close[b-7aszl8o3bw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-close:hover[b-7aszl8o3bw] {
    background: var(--theme-secondary-hover);
}

/* Status badges */
.status-badge[b-7aszl8o3bw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.success[b-7aszl8o3bw] { background: var(--theme-bg-success); color: var(--theme-text-success); }
.status-badge.warning[b-7aszl8o3bw] { background: var(--theme-bg-warning); color: var(--theme-text-warning); }
.status-badge.info[b-7aszl8o3bw] { background: var(--theme-bg-info); color: var(--theme-text-info); }

/* Animations */
@keyframes fadeIn-b-7aszl8o3bw {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-7aszl8o3bw {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 640px) {
    .modal-container[b-7aszl8o3bw] {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
}
/* /Pages/Admin/ReminderEditDialog.razor.rz.scp.css */
/* ============================================
   REMINDER EDIT DIALOG - Form-specific Styles
   ============================================ */

/* Form Layout */
.reminder-form[b-cek3d96pjf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reminder-form-row[b-cek3d96pjf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .reminder-form-row[b-cek3d96pjf] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.reminder-form-group[b-cek3d96pjf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reminder-form-group label[b-cek3d96pjf] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
}

.required-indicator[b-cek3d96pjf] {
    color: #ef4444;
}

/* Text & Textarea Inputs */
.reminder-form-input[b-cek3d96pjf] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.reminder-form-textarea[b-cek3d96pjf] {
    resize: vertical;
    min-height: 72px;
}

.reminder-form-input:focus[b-cek3d96pjf] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary, #6366f1));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.reminder-form-input[b-cek3d96pjf]::placeholder,
.reminder-form-textarea[b-cek3d96pjf]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

/* Checkbox Group */
.reminder-checkbox-group label[b-cek3d96pjf] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.reminder-checkbox-group input[type="checkbox"][b-cek3d96pjf] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--theme-primary, #6366f1);
}

/* Helper Text */
.reminder-helper-text[b-cek3d96pjf] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}
/* /Pages/Admin/RemindersAdmin.razor.rz.scp.css */
.reminders-admin[b-jh088n6enp] { display: flex; flex-direction: column; gap: 24px; }
    .hero[b-jh088n6enp] { background: var(--theme-surface, white); padding: 24px; border-radius: 20px; box-shadow: 0 20px 45px rgba(15,23,42,0.08); }
    .stats-grid[b-jh088n6enp] { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 16px; }
    .stat-card[b-jh088n6enp] { background: var(--theme-surface, white); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; box-shadow: 0 10px 30px rgba(15,23,42,0.05); }
    .stat-card.loading[b-jh088n6enp] { min-height: 120px; background: rgba(0,0,0,0.05); animation: pulse-b-jh088n6enp 1.5s infinite; }
    .stat-icon[b-jh088n6enp] { font-size: 1.5rem; }
    .stat-value[b-jh088n6enp] { font-size: 2rem; font-weight: 700; }
    .tab-buttons[b-jh088n6enp] { display: flex; gap: 12px; }
    .tab-button[b-jh088n6enp] { flex: 1; padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(15,23,42,0.1); background: var(--theme-surface, white); cursor: pointer; transition: all 0.2s ease; }
    .tab-button.active[b-jh088n6enp] { background: var(--theme-primary, #6366f1); color: white; border-color: var(--theme-primary, #6366f1); }
    .tab-panel[b-jh088n6enp] { margin-top: 16px; }
    .action-grid[b-jh088n6enp] { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 16px; }
    .action-card[b-jh088n6enp] { background: var(--theme-surface, white); border-radius: 16px; padding: 20px; box-shadow: 0 12px 35px rgba(15,23,42,0.06); display: flex; flex-direction: column; gap: 10px; }
    .action-header span[b-jh088n6enp] { font-weight: 600; font-size: 1rem; }
    .action-header small[b-jh088n6enp] { color: rgba(15,23,42,0.6); }
    .action-description[b-jh088n6enp] { color: rgba(15,23,42,0.7); }
    .info-box[b-jh088n6enp] { padding: 12px; border-radius: 12px; background: rgba(16,185,129,0.1); color: #047857; }
    .info-box.info[b-jh088n6enp] { background: rgba(59,130,246,0.1); color: #1e40af; }
    .info-box.success[b-jh088n6enp] { background: rgba(16,185,129,0.15); }
    .status-line[b-jh088n6enp] { font-size: 0.9rem; color: rgba(15,23,42,0.7); }
    .btn[b-jh088n6enp] { padding: 10px 14px; border-radius: 10px; border: none; font-weight: 600; cursor: pointer; }
    .btn-primary[b-jh088n6enp] { background: var(--theme-primary, #6366f1); color: white; }
    .btn-success[b-jh088n6enp] { background: #10b981; color: white; }
    .btn-warning[b-jh088n6enp] { background: #f97316; color: white; }
    .btn-tertiary[b-jh088n6enp] { background: #a855f7; color: white; }
    .btn-outline[b-jh088n6enp] { background: transparent; border: 1px solid rgba(15,23,42,0.2); color: inherit; }
    .info-card[b-jh088n6enp] { background: var(--theme-surface, white); border-radius: 16px; padding: 24px; box-shadow: 0 12px 35px rgba(15,23,42,0.05); }
    .info-card ul[b-jh088n6enp] { padding-left: 18px; margin: 0; }
    .table-panel[b-jh088n6enp] { background: var(--theme-surface, white); border-radius: 20px; padding: 24px; box-shadow: 0 20px 45px rgba(15,23,42,0.08); }
    .panel-header[b-jh088n6enp] { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
    .panel-actions[b-jh088n6enp] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .panel-actions input[b-jh088n6enp] { border: 1px solid rgba(15,23,42,0.15); border-radius: 12px; padding: 8px 12px; min-width: 200px; }
    .button-group[b-jh088n6enp] { display: flex; gap: 8px; }
    .table-wrapper[b-jh088n6enp] { overflow-x: auto; }
    table[b-jh088n6enp] { width: 100%; border-collapse: collapse; margin-top: 16px; }
    th[b-jh088n6enp], td[b-jh088n6enp] { text-align: left; padding: 12px 8px; border-bottom: 1px solid rgba(15,23,42,0.08); }
    .badge[b-jh088n6enp] { padding: 4px 10px; border-radius: 999px; font-size: 0.85rem; display: inline-flex; align-items: center; }
    .badge.primary[b-jh088n6enp] { background: rgba(59,130,246,0.15); color: #0369a1; }
    .badge.success[b-jh088n6enp] { background: rgba(16,185,129,0.15); color: #047857; }
    .badge.warning[b-jh088n6enp] { background: rgba(251,191,36,0.15); color: #92400e; }
    .badge.info[b-jh088n6enp] { background: rgba(14,165,233,0.15); color: #0ea5e9; }
    .badge.error[b-jh088n6enp] { background: rgba(239,68,68,0.15); color: #b91c1c; }
    .chip-group[b-jh088n6enp] { display: flex; gap: 6px; flex-wrap: wrap; }
    .chip[b-jh088n6enp] { padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; background: rgba(15,23,42,0.08); }
    .chip.primary[b-jh088n6enp] { background: rgba(59,130,246,0.15); color: #0369a1; }
    .chip.info[b-jh088n6enp] { background: rgba(14,165,233,0.15); color: #0ea5e9; }
    .chip.success[b-jh088n6enp] { background: rgba(16,185,129,0.15); color: #047857; }
    .icon-btn[b-jh088n6enp] { border: none; background: none; cursor: pointer; font-size: 1rem; }
    .progress-bar[b-jh088n6enp] { height: 4px; background: rgba(15,23,42,0.2); border-radius: 999px; overflow: hidden; margin: 16px 0; }
    .progress-bar[b-jh088n6enp]::after { content: ""; display: block; height: 100%; width: 100%; background: var(--theme-primary, #6366f1); animation: progress-b-jh088n6enp 1s linear infinite; }
    .empty-state[b-jh088n6enp] { padding: 40px; text-align: center; color: rgba(15,23,42,0.6); }
    @keyframes pulse-b-jh088n6enp { 0% { opacity: 0.2; } 50% { opacity: 0.6; } 100% { opacity: 0.2; } }
    @keyframes progress-b-jh088n6enp { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
    @media (max-width: 900px) { .stats-grid[b-jh088n6enp], .action-grid[b-jh088n6enp] { grid-template-columns: 1fr; } }
/* /Pages/Admin/RemindersManage.razor.rz.scp.css */
/* ============================================
   Reminders Manage - Using Theme Variables
   ============================================ */

.reminders-manage-page[b-irktw1gh35] {
    min-height: calc(100vh - var(--header-height));
    padding: 24px;
    transition: background 0.5s ease;
    background: var(--theme-page-bg);
}

/* Hero Section */
.manage-hero[b-irktw1gh35] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    padding: 60px 20px;
    border-radius: 16px;
    margin-bottom: 24px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px var(--theme-shadow-color);
    position: relative;
    overflow: hidden;
}

.manage-hero[b-irktw1gh35]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
}

.manage-hero-content[b-irktw1gh35] {
    position: relative;
    z-index: 1;
}

.manage-hero h1[b-irktw1gh35] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.manage-hero-subtitle[b-irktw1gh35] {
    font-size: 1.1rem;
    opacity: 0.95;
}

/* Cards */
.card[b-irktw1gh35] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
    margin-bottom: 24px;
}

/* Action Bar */
.action-bar[b-irktw1gh35] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.action-buttons[b-irktw1gh35] {
    display: flex;
    gap: 12px;
}

/* Stats Grid */
.stats-grid[b-irktw1gh35] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .stats-grid[b-irktw1gh35] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stats-card[b-irktw1gh35] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
}

.stats-icon[b-irktw1gh35] {
    opacity: 0.8;
}

.stats-icon.primary[b-irktw1gh35] { color: var(--theme-primary-ink, var(--theme-primary)); }
.stats-icon.info[b-irktw1gh35] { color: var(--theme-text-info); }
.stats-icon.success[b-irktw1gh35] { color: var(--theme-text-success); }
.stats-icon.warning[b-irktw1gh35] { color: var(--theme-text-warning); }

.stats-number[b-irktw1gh35] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stats-label[b-irktw1gh35] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

/* Data Card */
.data-card[b-irktw1gh35] {
    padding: 0;
    overflow: hidden;
}

.data-header[b-irktw1gh35] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--theme-border);
    flex-wrap: wrap;
    gap: 16px;
}

.data-title[b-irktw1gh35] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.data-title h2[b-irktw1gh35] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Search */
.search-wrapper[b-irktw1gh35] {
    position: relative;
    max-width: 300px;
    width: 100%;
}

.search-input[b-irktw1gh35] {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
    transition: all 0.2s;
}

.search-input:focus[b-irktw1gh35] {
    outline: none;
    border-color: var(--theme-primary);
    background: var(--theme-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-icon[b-irktw1gh35] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-secondary);
    pointer-events: none;
}

/* Table */
.data-table[b-irktw1gh35] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-irktw1gh35],
.data-table td[b-irktw1gh35] {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
}

.data-table th[b-irktw1gh35] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    letter-spacing: 0.05em;
}

.data-table td[b-irktw1gh35] {
    color: var(--theme-text-primary);
}

.data-table tbody tr:hover[b-irktw1gh35] {
    background: var(--theme-surface-secondary);
}

/* Buttons */
.btn[b-irktw1gh35] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-irktw1gh35] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
}

.btn-primary:hover:not(:disabled)[b-irktw1gh35] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--theme-shadow-color);
}

.btn-secondary[b-irktw1gh35] {
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border);
}

.btn-secondary:hover:not(:disabled)[b-irktw1gh35] {
    background: var(--theme-secondary-hover);
}

.btn:disabled[b-irktw1gh35] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Chips */
.chip[b-irktw1gh35] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.chip-success[b-irktw1gh35] { background: var(--theme-bg-success); color: var(--theme-text-success); }
.chip-warning[b-irktw1gh35] { background: var(--theme-bg-warning); color: var(--theme-text-warning); }
.chip-info[b-irktw1gh35] { background: var(--theme-bg-info); color: var(--theme-text-info); }
.chip-error[b-irktw1gh35] { background: var(--theme-bg-danger); color: var(--theme-text-danger); }

/* Loading & Empty States */
.loading-container[b-irktw1gh35] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 16px;
}

.spinner[b-irktw1gh35] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-irktw1gh35 1s linear infinite;
}

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

.empty-state[b-irktw1gh35] {
    text-align: center;
    padding: 40px;
    color: var(--theme-text-secondary);
}

/* Responsive */
@media (max-width: 600px) {
    .reminders-manage-page[b-irktw1gh35] {
        padding: 16px;
    }
    
    .manage-hero[b-irktw1gh35] {
        padding: 40px 16px;
    }
    
    .manage-hero h1[b-irktw1gh35] {
        font-size: 1.75rem;
    }
}
/* /Pages/Admin/ScheduledJobs.razor.rz.scp.css */
/* ============================================
   Scheduled Jobs - Using Theme Variables
   ============================================ */

:root[b-v52nwen0zk] {
    --jobs-radius: 16px;
    --jobs-radius-sm: 8px;
    --jobs-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page Container */
.scheduled-jobs-page[b-v52nwen0zk] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
    background: var(--theme-page-bg);
}

.jobs-container[b-v52nwen0zk] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

/* Header */
.page-header[b-v52nwen0zk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.header-left[b-v52nwen0zk] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.btn-back[b-v52nwen0zk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--jobs-transition);
    background: var(--theme-secondary);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.btn-back:hover[b-v52nwen0zk] {
    background: var(--theme-secondary-hover);
}

.btn-back svg[b-v52nwen0zk] {
    width: 24px;
    height: 24px;
}

.page-title[b-v52nwen0zk] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.page-title svg[b-v52nwen0zk] {
    width: 32px;
    height: 32px;
    color: var(--theme-accent);
}

.page-subtitle[b-v52nwen0zk] {
    margin: 4px 0 0;
    font-size: 0.95rem;
    color: var(--theme-text-secondary);
}

/* Buttons */
.btn[b-v52nwen0zk] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--jobs-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--jobs-transition);
}

.btn svg[b-v52nwen0zk] {
    width: 20px;
    height: 20px;
}

.btn-primary[b-v52nwen0zk] {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-v52nwen0zk] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
}

.btn:disabled[b-v52nwen0zk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.spin[b-v52nwen0zk] {
    animation: spin-b-v52nwen0zk 1s linear infinite;
}

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

/* Stats Grid */
.stats-grid[b-v52nwen0zk] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-v52nwen0zk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    border-radius: var(--jobs-radius);
    transition: var(--jobs-transition);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
}

.stat-card:hover[b-v52nwen0zk] {
    transform: translateY(-2px);
}

.stat-icon[b-v52nwen0zk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon svg[b-v52nwen0zk] {
    width: 24px;
    height: 24px;
    color: white;
}

.stat-icon.total[b-v52nwen0zk] { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.stat-icon.active[b-v52nwen0zk] { background: linear-gradient(135deg, #10b981, #059669); }
.stat-icon.pending[b-v52nwen0zk] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-icon.categories[b-v52nwen0zk] { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.stat-value[b-v52nwen0zk] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-label[b-v52nwen0zk] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

/* Loading State */
.loading-container[b-v52nwen0zk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    color: var(--theme-text-secondary);
}

.loading-spinner[b-v52nwen0zk] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-v52nwen0zk 1s linear infinite;
}

/* Empty State */
.empty-state[b-v52nwen0zk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    text-align: center;
}

.empty-state svg[b-v52nwen0zk] {
    width: 64px;
    height: 64px;
    color: var(--theme-text-secondary);
    opacity: 0.5;
}

.empty-state h3[b-v52nwen0zk] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--theme-text-primary);
}

.empty-state p[b-v52nwen0zk] {
    margin: 0;
    color: var(--theme-text-secondary);
}

/* Category Section */
.category-section[b-v52nwen0zk] {
    margin-bottom: 32px;
}

.category-title[b-v52nwen0zk] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--theme-border);
    color: var(--theme-text-primary);
}

/* Jobs Grid */
.jobs-grid[b-v52nwen0zk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 20px;
}

/* Job Card */
.job-card[b-v52nwen0zk] {
    border-radius: var(--jobs-radius);
    padding: 20px;
    border-left: 4px solid;
    transition: var(--jobs-transition);
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-left-width: 4px;
}

.job-card:hover[b-v52nwen0zk] {
    transform: translateY(-4px);
}

.job-card.enabled[b-v52nwen0zk] {
    border-left-color: #10b981;
}

.job-card.disabled[b-v52nwen0zk] {
    border-left-color: #6b7280;
    opacity: 0.7;
}

.job-header[b-v52nwen0zk] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.job-icon[b-v52nwen0zk] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--theme-primary);
}

.job-icon svg[b-v52nwen0zk] {
    width: 24px;
    height: 24px;
    color: white;
}

.job-title-section[b-v52nwen0zk] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.job-title[b-v52nwen0zk] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.job-badge[b-v52nwen0zk] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    width: fit-content;
}

.badge-success[b-v52nwen0zk] {
    background: var(--theme-bg-success);
    color: var(--theme-text-success);
}

.badge-muted[b-v52nwen0zk] {
    background: rgba(107, 114, 128, 0.2);
    color: var(--theme-text-secondary);
}

.job-description[b-v52nwen0zk] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--theme-text-secondary);
}

.job-details[b-v52nwen0zk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-detail[b-v52nwen0zk] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

.job-detail svg[b-v52nwen0zk] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.6;
}

.job-footer[b-v52nwen0zk] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border);
}

.service-name[b-v52nwen0zk] {
    font-size: 0.75rem;
    font-family: 'Consolas', 'Monaco', monospace;
    color: var(--theme-text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .stats-grid[b-v52nwen0zk] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .scheduled-jobs-page[b-v52nwen0zk] {
        padding: 16px;
    }
    
    .stats-grid[b-v52nwen0zk] {
        grid-template-columns: 1fr;
    }
    
    .jobs-grid[b-v52nwen0zk] {
        grid-template-columns: 1fr;
    }
    
    .page-title[b-v52nwen0zk] {
        font-size: 1.5rem;
    }
}
/* /Pages/Admin/SharedVideos.razor.rz.scp.css */
/* SharedVideos.razor.css — scoped styles for admin shared videos page */

.item-taken-down[b-7v6le7nkor] {
    opacity: 0.6;
}

.item-taken-down .list-page-item-title[b-7v6le7nkor] {
    text-decoration: line-through;
}
/* /Pages/Admin/SocialHub.razor.rz.scp.css */
/* Social Hub Dashboard Styles */

.social-hub-page[b-4onsfgjd3n] {
    padding: 24px;
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

/* Page Header */
.page-header[b-4onsfgjd3n] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-left h1[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.theme-space .header-left h1[b-4onsfgjd3n],
.theme-winter .header-left h1[b-4onsfgjd3n],
.theme-nature .header-left h1[b-4onsfgjd3n],
.theme-ocean .header-left h1[b-4onsfgjd3n] {
    color: #f1f5f9;
}

.header-left h1 svg[b-4onsfgjd3n] {
    color: #6366f1;
}

.subtitle[b-4onsfgjd3n] {
    color: #64748b;
    margin: 4px 0 0 44px;
}

/* Loading */
.loading-container[b-4onsfgjd3n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px;
}

.loading-spinner[b-4onsfgjd3n] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-4onsfgjd3n 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-4onsfgjd3n {
    to { transform: rotate(360deg); }
}

/* Stats Grid */
.stats-grid[b-4onsfgjd3n] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-4onsfgjd3n] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}

.stat-card.clickable[b-4onsfgjd3n] {
    cursor: pointer;
}

.stat-card.clickable:hover[b-4onsfgjd3n] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-space .stat-card[b-4onsfgjd3n],
.theme-winter .stat-card[b-4onsfgjd3n],
.theme-nature .stat-card[b-4onsfgjd3n],
.theme-ocean .stat-card[b-4onsfgjd3n] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.stat-icon[b-4onsfgjd3n] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.accounts[b-4onsfgjd3n] { background: #dbeafe; color: #2563eb; }
.stat-icon.scheduled[b-4onsfgjd3n] { background: #fef3c7; color: #d97706; }
.stat-icon.published[b-4onsfgjd3n] { background: #d1fae5; color: #059669; }
.stat-icon.engagement[b-4onsfgjd3n] { background: #fce7f3; color: #db2777; }
.stat-icon.contacts[b-4onsfgjd3n] { background: #e0e7ff; color: #4f46e5; }
.stat-icon.activity[b-4onsfgjd3n] { background: #f1f5f9; color: #64748b; }
.stat-icon.activity.has-unread[b-4onsfgjd3n] { background: #fee2e2; color: #dc2626; }

.stat-content[b-4onsfgjd3n] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-4onsfgjd3n] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.theme-space .stat-value[b-4onsfgjd3n],
.theme-winter .stat-value[b-4onsfgjd3n],
.theme-nature .stat-value[b-4onsfgjd3n],
.theme-ocean .stat-value[b-4onsfgjd3n] {
    color: #f1f5f9;
}

.stat-label[b-4onsfgjd3n] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 4px;
}

/* Content Grid */
.content-grid[b-4onsfgjd3n] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .content-grid[b-4onsfgjd3n] {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.card[b-4onsfgjd3n] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.theme-space .card[b-4onsfgjd3n],
.theme-winter .card[b-4onsfgjd3n],
.theme-nature .card[b-4onsfgjd3n],
.theme-ocean .card[b-4onsfgjd3n] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.card-header[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.theme-space .card-header[b-4onsfgjd3n],
.theme-winter .card-header[b-4onsfgjd3n],
.theme-nature .card-header[b-4onsfgjd3n],
.theme-ocean .card-header[b-4onsfgjd3n] {
    border-color: rgba(255, 255, 255, 0.1);
}

.card-header h2[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.theme-space .card-header h2[b-4onsfgjd3n],
.theme-winter .card-header h2[b-4onsfgjd3n],
.theme-nature .card-header h2[b-4onsfgjd3n],
.theme-ocean .card-header h2[b-4onsfgjd3n] {
    color: #f1f5f9;
}

.card-header h2 svg[b-4onsfgjd3n] {
    color: #6366f1;
}

.card-body[b-4onsfgjd3n] {
    padding: 16px 20px;
}

/* Empty State */
.empty-state[b-4onsfgjd3n] {
    text-align: center;
    padding: 32px 20px;
    color: #64748b;
}

.empty-state p[b-4onsfgjd3n] {
    margin-bottom: 16px;
}

/* Accounts List */
.accounts-list[b-4onsfgjd3n] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.account-item[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    transition: all 0.2s;
}

.theme-space .account-item[b-4onsfgjd3n],
.theme-winter .account-item[b-4onsfgjd3n],
.theme-nature .account-item[b-4onsfgjd3n],
.theme-ocean .account-item[b-4onsfgjd3n] {
    background: rgba(0, 0, 0, 0.2);
}

.account-item.inactive[b-4onsfgjd3n] {
    opacity: 0.6;
}

.account-icon[b-4onsfgjd3n] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.account-icon.linkedin[b-4onsfgjd3n] { background: #e8f4fc; }
.account-icon.twitter[b-4onsfgjd3n] { background: #e8f4fc; }
.account-icon.instagram[b-4onsfgjd3n] { background: #fce7f3; }
.account-icon.facebook[b-4onsfgjd3n] { background: #e8f0fe; }
.account-icon.youtube[b-4onsfgjd3n] { background: #fee2e2; }
.account-icon.tiktok[b-4onsfgjd3n] { background: #f3e8ff; }
.account-icon.bluesky[b-4onsfgjd3n] { background: #dbeafe; }

.account-info[b-4onsfgjd3n] {
    flex: 1;
    min-width: 0;
}

.account-name[b-4onsfgjd3n] {
    display: block;
    font-weight: 500;
    color: #1e293b;
}

.theme-space .account-name[b-4onsfgjd3n],
.theme-winter .account-name[b-4onsfgjd3n],
.theme-nature .account-name[b-4onsfgjd3n],
.theme-ocean .account-name[b-4onsfgjd3n] {
    color: #f1f5f9;
}

.account-handle[b-4onsfgjd3n] {
    font-size: 0.85rem;
    color: #64748b;
}

.account-status[b-4onsfgjd3n] {
    flex-shrink: 0;
}

.status-badge[b-4onsfgjd3n] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.success[b-4onsfgjd3n] { background: #d1fae5; color: #059669; }
.status-badge.warning[b-4onsfgjd3n] { background: #fef3c7; color: #d97706; }
.status-badge.inactive[b-4onsfgjd3n] { background: #f1f5f9; color: #64748b; }
.status-badge.scheduled[b-4onsfgjd3n] { background: #dbeafe; color: #2563eb; }
.status-badge.published[b-4onsfgjd3n] { background: #d1fae5; color: #059669; }
.status-badge.draft[b-4onsfgjd3n] { background: #f1f5f9; color: #64748b; }
.status-badge.failed[b-4onsfgjd3n] { background: #fee2e2; color: #dc2626; }

/* Feed List */
.feed-list[b-4onsfgjd3n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feed-item[b-4onsfgjd3n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    transition: all 0.2s;
}

.theme-space .feed-item[b-4onsfgjd3n],
.theme-winter .feed-item[b-4onsfgjd3n],
.theme-nature .feed-item[b-4onsfgjd3n],
.theme-ocean .feed-item[b-4onsfgjd3n] {
    background: rgba(0, 0, 0, 0.2);
}

.feed-item.high-priority[b-4onsfgjd3n] {
    background: #fef3c7;
    border-left: 3px solid #d97706;
}

.theme-space .feed-item.high-priority[b-4onsfgjd3n],
.theme-winter .feed-item.high-priority[b-4onsfgjd3n],
.theme-nature .feed-item.high-priority[b-4onsfgjd3n],
.theme-ocean .feed-item.high-priority[b-4onsfgjd3n] {
    background: rgba(217, 119, 6, 0.2);
}

.feed-icon[b-4onsfgjd3n] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.feed-icon.post[b-4onsfgjd3n] { background: #dbeafe; }
.feed-icon.activity[b-4onsfgjd3n] { background: #e0e7ff; }
.feed-icon.engagement[b-4onsfgjd3n] { background: #d1fae5; }

.feed-content[b-4onsfgjd3n] {
    flex: 1;
    min-width: 0;
}

.feed-title[b-4onsfgjd3n] {
    display: block;
    font-weight: 500;
    color: #1e293b;
    font-size: 0.9rem;
}

.theme-space .feed-title[b-4onsfgjd3n],
.theme-winter .feed-title[b-4onsfgjd3n],
.theme-nature .feed-title[b-4onsfgjd3n],
.theme-ocean .feed-title[b-4onsfgjd3n] {
    color: #f1f5f9;
}

.feed-summary[b-4onsfgjd3n] {
    display: block;
    font-size: 0.85rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.theme-space .feed-summary[b-4onsfgjd3n],
.theme-winter .feed-summary[b-4onsfgjd3n],
.theme-nature .feed-summary[b-4onsfgjd3n],
.theme-ocean .feed-summary[b-4onsfgjd3n] {
    color: #94a3b8;
}

.feed-meta[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 6px;
}

.contact-link[b-4onsfgjd3n] {
    color: #6366f1;
    text-decoration: none;
}

.contact-link:hover[b-4onsfgjd3n] {
    text-decoration: underline;
}

.feed-link[b-4onsfgjd3n] {
    color: #64748b;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

.feed-link:hover[b-4onsfgjd3n] {
    background: #e2e8f0;
    color: #1e293b;
}

/* Posts List */
.posts-list[b-4onsfgjd3n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.post-item[b-4onsfgjd3n] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.theme-space .post-item[b-4onsfgjd3n],
.theme-winter .post-item[b-4onsfgjd3n],
.theme-nature .post-item[b-4onsfgjd3n],
.theme-ocean .post-item[b-4onsfgjd3n] {
    background: rgba(0, 0, 0, 0.2);
}

.post-platform[b-4onsfgjd3n] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.post-platform.linkedin[b-4onsfgjd3n] { background: #e8f4fc; }
.post-platform.twitter[b-4onsfgjd3n] { background: #e8f4fc; }
.post-platform.instagram[b-4onsfgjd3n] { background: #fce7f3; }
.post-platform.facebook[b-4onsfgjd3n] { background: #e8f0fe; }

.post-content[b-4onsfgjd3n] {
    flex: 1;
    min-width: 0;
}

.post-text[b-4onsfgjd3n] {
    display: block;
    font-size: 0.9rem;
    color: #1e293b;
}

.theme-space .post-text[b-4onsfgjd3n],
.theme-winter .post-text[b-4onsfgjd3n],
.theme-nature .post-text[b-4onsfgjd3n],
.theme-ocean .post-text[b-4onsfgjd3n] {
    color: #e2e8f0;
}

.post-meta[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: #64748b;
}

.post-engagement[b-4onsfgjd3n] {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: #64748b;
}

/* Platform Stats */
.platform-stats-list[b-4onsfgjd3n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.platform-stat-item[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.theme-space .platform-stat-item[b-4onsfgjd3n],
.theme-winter .platform-stat-item[b-4onsfgjd3n],
.theme-nature .platform-stat-item[b-4onsfgjd3n],
.theme-ocean .platform-stat-item[b-4onsfgjd3n] {
    background: rgba(0, 0, 0, 0.2);
}

.platform-name[b-4onsfgjd3n] {
    font-weight: 500;
    color: #1e293b;
}

.theme-space .platform-name[b-4onsfgjd3n],
.theme-winter .platform-name[b-4onsfgjd3n],
.theme-nature .platform-name[b-4onsfgjd3n],
.theme-ocean .platform-name[b-4onsfgjd3n] {
    color: #f1f5f9;
}

.platform-metrics[b-4onsfgjd3n] {
    display: flex;
    gap: 16px;
    font-size: 0.85rem;
    color: #64748b;
}

/* Buttons */
.btn[b-4onsfgjd3n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
}

.btn-sm[b-4onsfgjd3n] { padding: 6px 12px; font-size: 0.85rem; }
.btn-xs[b-4onsfgjd3n] { padding: 4px 8px; font-size: 0.75rem; }

.btn-primary[b-4onsfgjd3n] {
    background: #6366f1;
    color: white;
}

.btn-primary:hover[b-4onsfgjd3n] {
    background: #4f46e5;
}

.btn-outline[b-4onsfgjd3n] {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.btn-outline:hover[b-4onsfgjd3n] {
    background: #f1f5f9;
}

.btn-link[b-4onsfgjd3n] {
    background: none;
    border: none;
    color: #6366f1;
    padding: 0;
}

.btn-link:hover[b-4onsfgjd3n] {
    text-decoration: underline;
}

/* Form Elements */
.form-group[b-4onsfgjd3n] {
    margin-bottom: 16px;
}

.form-group label[b-4onsfgjd3n] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 8px;
}

.theme-space .form-group label[b-4onsfgjd3n],
.theme-winter .form-group label[b-4onsfgjd3n],
.theme-nature .form-group label[b-4onsfgjd3n],
.theme-ocean .form-group label[b-4onsfgjd3n] {
    color: #94a3b8;
}

.form-group textarea[b-4onsfgjd3n],
.form-group input[type="date"][b-4onsfgjd3n],
.form-group input[type="time"][b-4onsfgjd3n] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #1e293b;
    background: white;
    resize: vertical;
}

.theme-space .form-group textarea[b-4onsfgjd3n],
.theme-space .form-group input[b-4onsfgjd3n],
.theme-winter .form-group textarea[b-4onsfgjd3n],
.theme-winter .form-group input[b-4onsfgjd3n],
.theme-nature .form-group textarea[b-4onsfgjd3n],
.theme-nature .form-group input[b-4onsfgjd3n],
.theme-ocean .form-group textarea[b-4onsfgjd3n],
.theme-ocean .form-group input[b-4onsfgjd3n] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
}

.form-group textarea:focus[b-4onsfgjd3n],
.form-group input:focus[b-4onsfgjd3n] {
    outline: none;
    border-color: #6366f1;
}

.char-count[b-4onsfgjd3n] {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

.form-row[b-4onsfgjd3n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkbox-label[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-4onsfgjd3n] {
    width: 18px;
    height: 18px;
}

/* Account Checkboxes */
.account-checkboxes[b-4onsfgjd3n] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-checkbox[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f1f5f9;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.account-checkbox:hover[b-4onsfgjd3n] {
    background: #e2e8f0;
}

.account-checkbox.selected[b-4onsfgjd3n] {
    background: #dbeafe;
    border: 1px solid #3b82f6;
}

.theme-space .account-checkbox[b-4onsfgjd3n],
.theme-winter .account-checkbox[b-4onsfgjd3n],
.theme-nature .account-checkbox[b-4onsfgjd3n],
.theme-ocean .account-checkbox[b-4onsfgjd3n] {
    background: rgba(255, 255, 255, 0.1);
}

.account-checkbox input[type="checkbox"][b-4onsfgjd3n] {
    display: none;
}

.account-checkbox .platform-icon[b-4onsfgjd3n] {
    font-size: 1.1rem;
}

.account-checkbox .account-name[b-4onsfgjd3n] {
    font-size: 0.85rem;
    font-weight: 500;
}

/* Connect Account Dialog */
.connect-dialog[b-4onsfgjd3n] {
    max-width: 480px;
}

.connect-intro[b-4onsfgjd3n] {
    color: #64748b;
    margin-bottom: 20px;
    text-align: center;
}

.platform-options[b-4onsfgjd3n] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.platform-option[b-4onsfgjd3n] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.platform-option:hover:not(.disabled)[b-4onsfgjd3n] {
    border-color: #6366f1;
    background: #f0f9ff;
    transform: translateY(-2px);
}

.platform-option.disabled[b-4onsfgjd3n] {
    opacity: 0.6;
    cursor: not-allowed;
}

.platform-option.linkedin:hover:not(.disabled)[b-4onsfgjd3n] {
    border-color: #0077b5;
    background: #e8f4fc;
}

.theme-space .platform-option[b-4onsfgjd3n],
.theme-winter .platform-option[b-4onsfgjd3n],
.theme-nature .platform-option[b-4onsfgjd3n],
.theme-ocean .platform-option[b-4onsfgjd3n] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .platform-option:hover:not(.disabled)[b-4onsfgjd3n],
.theme-winter .platform-option:hover:not(.disabled)[b-4onsfgjd3n],
.theme-nature .platform-option:hover:not(.disabled)[b-4onsfgjd3n],
.theme-ocean .platform-option:hover:not(.disabled)[b-4onsfgjd3n] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.2);
}

.platform-icon-large[b-4onsfgjd3n] {
    font-size: 2rem;
    flex-shrink: 0;
}

.platform-option .platform-name[b-4onsfgjd3n] {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.theme-space .platform-option .platform-name[b-4onsfgjd3n],
.theme-winter .platform-option .platform-name[b-4onsfgjd3n],
.theme-nature .platform-option .platform-name[b-4onsfgjd3n],
.theme-ocean .platform-option .platform-name[b-4onsfgjd3n] {
    color: #f1f5f9;
}

.platform-option .platform-status[b-4onsfgjd3n] {
    font-size: 0.8rem;
    color: #64748b;
    padding: 4px 10px;
    background: #e2e8f0;
    border-radius: 12px;
}

.platform-option.linkedin .platform-status[b-4onsfgjd3n] {
    background: #d1fae5;
    color: #059669;
}

.theme-space .platform-option .platform-status[b-4onsfgjd3n],
.theme-winter .platform-option .platform-status[b-4onsfgjd3n],
.theme-nature .platform-option .platform-status[b-4onsfgjd3n],
.theme-ocean .platform-option .platform-status[b-4onsfgjd3n] {
    background: rgba(255, 255, 255, 0.1);
}

/* Warning button */
.btn-warning[b-4onsfgjd3n] {
    background: #f59e0b;
    color: white;
    border: none;
}

.btn-warning:hover[b-4onsfgjd3n] {
    background: #d97706;
}
/* /Pages/Admin/SubscriptionManagement.razor.rz.scp.css */
/* ============================================
   Subscription Management - Using Theme Variables
   ============================================ */

.subscriptions-page[b-q2qphun9s5] {
    min-height: calc(100vh - var(--header-height));
    padding: 24px;
    transition: background 0.5s ease;
    background: var(--theme-page-bg);
}

/* Page Title */
.page-header[b-q2qphun9s5] {
    margin-bottom: 24px;
}

.page-title[b-q2qphun9s5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

/* Stats Cards */
.stats-grid[b-q2qphun9s5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-q2qphun9s5] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
    border-left: 4px solid;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.stat-card:hover[b-q2qphun9s5] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.stat-card.active[b-q2qphun9s5] { border-left-color: #10b981; }
.stat-card.trial[b-q2qphun9s5] { border-left-color: #6366f1; }
.stat-card.canceled[b-q2qphun9s5] { border-left-color: #ef4444; }
.stat-card.total[b-q2qphun9s5] { border-left-color: #3b82f6; }

.stat-number[b-q2qphun9s5] {
    font-size: 2.5rem;
    font-weight: 800;
    display: block;
    margin-bottom: 4px;
    line-height: 1;
    color: var(--theme-text-primary);
}

.stat-label[b-q2qphun9s5] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Main Content Card */
.content-card[b-q2qphun9s5] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
}

/* Toolbar */
.toolbar[b-q2qphun9s5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.section-title[b-q2qphun9s5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.search-wrapper[b-q2qphun9s5] {
    position: relative;
    max-width: 300px;
    width: 100%;
}

.search-input[b-q2qphun9s5] {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
    transition: all 0.2s;
}

.search-input:focus[b-q2qphun9s5] {
    outline: none;
    border-color: var(--theme-primary);
    background: var(--theme-surface);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.search-icon[b-q2qphun9s5] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-secondary);
    pointer-events: none;
}

/* Table Styles */
.table-responsive[b-q2qphun9s5] {
    overflow-x: auto;
}

.data-table[b-q2qphun9s5] {
    width: 100%;
    border-collapse: collapse;
    color: var(--theme-text-primary);
    font-size: 0.85rem;
}

.data-table th[b-q2qphun9s5], .data-table td[b-q2qphun9s5] {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
}

.data-table th[b-q2qphun9s5] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
    letter-spacing: 0.05em;
}

.data-table tr:hover td[b-q2qphun9s5] {
    background-color: var(--theme-surface-secondary);
}

/* Status Chips */
.chip[b-q2qphun9s5] {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
}

.chip-success[b-q2qphun9s5] { background: var(--theme-bg-success); color: var(--theme-text-success); }
.chip-info[b-q2qphun9s5] { background: var(--theme-bg-info); color: var(--theme-text-info); }
.chip-error[b-q2qphun9s5] { background: var(--theme-bg-danger); color: var(--theme-text-danger); }
.chip-warning[b-q2qphun9s5] { background: var(--theme-bg-warning); color: var(--theme-text-warning); }
.chip-default[b-q2qphun9s5] { background: rgba(100, 116, 139, 0.1); color: var(--theme-text-secondary); }

/* Action Buttons */
.actions-cell[b-q2qphun9s5] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-q2qphun9s5] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-icon:hover[b-q2qphun9s5] {
    background: var(--theme-surface-secondary);
}

.btn-icon-primary[b-q2qphun9s5] { color: var(--theme-primary-ink, var(--theme-primary)); }
.btn-icon-error[b-q2qphun9s5] { color: var(--theme-text-danger); }

/* Loading & Empty States */
.spinner[b-q2qphun9s5] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-q2qphun9s5 1s linear infinite;
    margin: 40px auto;
}

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

.empty-state[b-q2qphun9s5] {
    text-align: center;
    padding: 40px;
    color: var(--theme-text-secondary);
}

.monospace[b-q2qphun9s5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.85rem;
}

.pager-container[b-q2qphun9s5] {
    padding: 16px;
    border-top: 1px solid var(--theme-border);
    display: flex;
    justify-content: flex-end;
}

/* Responsive */
@media (max-width: 600px) {
    .subscriptions-page[b-q2qphun9s5] {
        padding: 16px;
        padding-top: 70px;
    }
    
    .stat-number[b-q2qphun9s5] {
        font-size: 1.75rem;
    }
}
/* /Pages/Admin/ToolAnalytics.razor.rz.scp.css */
.tool-analytics-page[b-yyml41cl58] {
    min-height: calc(100vh - var(--header-height));
    padding: 24px;
    background: var(--theme-page-bg);
}

/* Hero */
.analytics-hero[b-yyml41cl58] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    border-radius: 16px;
    padding: 32px;
    color: white;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    box-shadow: 0 10px 15px -3px var(--theme-shadow-color);
}

.hero-content h1[b-yyml41cl58] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
}

.hero-content p[b-yyml41cl58] {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

.hero-controls[b-yyml41cl58] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.select-wrapper[b-yyml41cl58] { min-width: 160px; }

.time-select[b-yyml41cl58] {
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 0.95rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.time-select option[b-yyml41cl58] {
    background: var(--theme-surface);
    color: var(--theme-text-primary);
}

.btn-refresh[b-yyml41cl58] {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-refresh:hover[b-yyml41cl58] { background: rgba(255,255,255,0.3); }
.btn-refresh:disabled[b-yyml41cl58] { opacity: 0.5; cursor: not-allowed; }

/* Metrics */
.metrics-grid[b-yyml41cl58] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.metric-card[b-yyml41cl58] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
    border: 1px solid var(--theme-border);
    border-top: 4px solid;
    text-align: center;
}

.metric-card.primary[b-yyml41cl58]   { border-top-color: #3b82f6; }
.metric-card.success[b-yyml41cl58]   { border-top-color: #10b981; }
.metric-card.info[b-yyml41cl58]      { border-top-color: #0ea5e9; }
.metric-card.warning[b-yyml41cl58]   { border-top-color: #f59e0b; }
.metric-card.error[b-yyml41cl58]     { border-top-color: #ef4444; }

.metric-value[b-yyml41cl58] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--theme-text-primary);
    display: block;
    margin-bottom: 4px;
}

.metric-label[b-yyml41cl58] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
}

.metric-sublabel[b-yyml41cl58] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary);
    display: block;
}

/* Layout Grid */
.sections-grid[b-yyml41cl58] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.col-full[b-yyml41cl58] { grid-column: span 12; }
.col-half[b-yyml41cl58] { grid-column: span 6; }

@media (max-width: 900px) {
    .col-half[b-yyml41cl58] { grid-column: span 12; }
}

/* Section Cards */
.section-card[b-yyml41cl58] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06);
    border: 1px solid var(--theme-border);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.section-header[b-yyml41cl58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title[b-yyml41cl58] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Table */
.table-wrapper[b-yyml41cl58] { overflow-x: auto; }

.analytics-table[b-yyml41cl58] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.analytics-table th[b-yyml41cl58] {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--theme-border);
    white-space: nowrap;
}

.analytics-table td[b-yyml41cl58] {
    padding: 12px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    vertical-align: middle;
}

.analytics-table tr:last-child td[b-yyml41cl58] { border-bottom: none; }

.analytics-table tbody tr:hover[b-yyml41cl58] {
    background: var(--theme-surface-secondary, rgba(0,0,0,0.02));
}

.rank-badge[b-yyml41cl58] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.75rem;
    font-weight: 700;
}

.tool-name[b-yyml41cl58] {
    font-weight: 600;
    color: var(--theme-text-primary);
}

.tool-slug[b-yyml41cl58] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary);
    margin-left: 4px;
}

/* Chips */
.chip[b-yyml41cl58] {
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.chip-primary[b-yyml41cl58]   { background: var(--theme-bg-info); color: var(--theme-text-info); }
.chip-success[b-yyml41cl58]   { background: var(--theme-bg-success); color: var(--theme-text-success); }
.chip-warning[b-yyml41cl58]   { background: var(--theme-bg-warning); color: var(--theme-text-warning); }
.chip-error[b-yyml41cl58]     { background: var(--theme-bg-danger); color: var(--theme-text-danger); }
.chip-secondary[b-yyml41cl58] { background: rgba(100,116,139,0.1); color: var(--theme-text-secondary); }

/* Flow list (transitions + least-used + power users) */
.flow-list[b-yyml41cl58] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flow-item[b-yyml41cl58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    gap: 8px;
}

.flow-path[b-yyml41cl58] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.9rem;
}

.flow-tool[b-yyml41cl58] {
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Daily Trend */
.trend-list[b-yyml41cl58] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trend-row[b-yyml41cl58] {
    display: grid;
    grid-template-columns: 52px 1fr 40px;
    align-items: center;
    gap: 10px;
}

.trend-date[b-yyml41cl58] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
}

.trend-bar-bg[b-yyml41cl58] {
    height: 14px;
    background: var(--theme-border);
    border-radius: 7px;
    overflow: hidden;
}

.trend-bar-fill[b-yyml41cl58] {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
    border-radius: 7px;
    min-width: 4px;
    transition: width 0.6s ease;
}

.trend-count[b-yyml41cl58] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    text-align: right;
}

/* Onboarding Paths */
.onboarding-grid[b-yyml41cl58] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.onboarding-path-card[b-yyml41cl58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 16px;
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    text-align: center;
    background: var(--theme-surface-secondary, rgba(0,0,0,0.02));
}

.path-emoji[b-yyml41cl58]  { font-size: 2rem; }
.path-name[b-yyml41cl58]   { font-weight: 700; font-size: 1rem; color: var(--theme-text-primary); }
.path-top-tool[b-yyml41cl58] { font-size: 0.8rem; color: var(--theme-text-secondary); }

/* Empty + Spinner */
.empty-state[b-yyml41cl58] {
    text-align: center;
    padding: 32px 16px;
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
}

.spinner[b-yyml41cl58] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-yyml41cl58 1s linear infinite;
    margin: 40px auto;
}

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

/* Dark theme overrides */
.is-dark .section-card[b-yyml41cl58],
.is-dark .metric-card[b-yyml41cl58] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255,255,255,0.08);
}

.is-dark .flow-item[b-yyml41cl58] {
    border-color: rgba(255,255,255,0.08);
}

.is-dark .analytics-table tbody tr:hover[b-yyml41cl58] {
    background: rgba(255,255,255,0.03);
}

.is-dark .onboarding-path-card[b-yyml41cl58] {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

@media (max-width: 600px) {
    .tool-analytics-page[b-yyml41cl58] { padding: 16px; padding-top: 70px; }
    .analytics-hero[b-yyml41cl58] { padding: 24px 20px; }
    .metric-value[b-yyml41cl58] { font-size: 1.75rem; }
}
/* /Pages/Admin/ToolPackageEditDialog.razor.rz.scp.css */
/* === ANIMATIONS === */
@keyframes dialogFadeIn-b-j0gel0zoyi {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === TABS === */
.tabs[b-j0gel0zoyi] {
    display: flex;
    gap: 4px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    overflow-x: auto;
}

.tab[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #64748b);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab:hover[b-j0gel0zoyi] {
    background: var(--theme-secondary, #f1f5f9);
}

.tab.active[b-j0gel0zoyi] {
    background: var(--theme-accent);
    color: white;
}

/* === TAB CONTENT === */
.tab-content[b-j0gel0zoyi] {
    padding: 24px;
}

.form-section[b-j0gel0zoyi] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* === FORM === */
.form-group[b-j0gel0zoyi] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-j0gel0zoyi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.required[b-j0gel0zoyi] {
    color: #ef4444;
}

.form-input[b-j0gel0zoyi],
.form-textarea[b-j0gel0zoyi],
.form-select[b-j0gel0zoyi] {
    padding: 10px 14px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    width: 100%;
}

.form-input:focus[b-j0gel0zoyi],
.form-textarea:focus[b-j0gel0zoyi],
.form-select:focus[b-j0gel0zoyi] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.form-textarea[b-j0gel0zoyi] {
    resize: vertical;
    min-height: 60px;
}

.input-error[b-j0gel0zoyi] {
    border-color: #ef4444 !important;
}

.error-message[b-j0gel0zoyi] {
    font-size: 0.8rem;
    color: #ef4444;
}

.field-hint[b-j0gel0zoyi] {
    font-size: 0.8rem;
    color: var(--theme-text-hint, #94a3b8);
}

/* === FORM LAYOUT === */
.form-row[b-j0gel0zoyi] {
    display: grid;
    gap: 16px;
}

.form-row.two-cols[b-j0gel0zoyi] {
    grid-template-columns: 1fr 1fr;
}

/* === ICON INPUT === */
.icon-input-group[b-j0gel0zoyi] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.icon-preview[b-j0gel0zoyi] {
    font-size: 24px;
    flex-shrink: 0;
}

.icon-preview-btn[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.icon-preview-btn:hover[b-j0gel0zoyi] {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.icon-input-group .form-input[b-j0gel0zoyi] {
    flex: 1;
}

/* === GRADIENT === */
.gradient-section[b-j0gel0zoyi] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gradient-section > label[b-j0gel0zoyi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.gradient-preview[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    border-radius: 14px;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.gradient-preview .material-symbols-rounded[b-j0gel0zoyi] {
    font-size: 28px;
}

.gradient-preview .preview-name[b-j0gel0zoyi] {
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.color-controls[b-j0gel0zoyi] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.color-control[b-j0gel0zoyi] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.color-control input[type="color"][b-j0gel0zoyi] {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    cursor: pointer;
    background: var(--theme-input-bg, #ffffff);
    flex-shrink: 0;
}

.color-control .form-input[b-j0gel0zoyi] {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
}

.color-arrow[b-j0gel0zoyi] {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 500;
    flex-shrink: 0;
}

/* === TOGGLES === */
.toggle-group[b-j0gel0zoyi] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toggle-item[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toggle-item:hover[b-j0gel0zoyi] {
    background: var(--theme-secondary, #f1f5f9);
}

.toggle-item input[type="checkbox"][b-j0gel0zoyi] {
    width: 18px;
    height: 18px;
    accent-color: var(--theme-accent);
}

.toggle-item span[b-j0gel0zoyi] {
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
}

/* === TOOLS TAB === */
.tools-search[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tools-search .form-input[b-j0gel0zoyi] {
    flex: 1;
}

.section-label[b-j0gel0zoyi] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #94a3b8);
    margin: 0;
}

.tool-list-section[b-j0gel0zoyi] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Assigned tool chips */
.tool-chips[b-j0gel0zoyi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tool-chip[b-j0gel0zoyi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-accent);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.tool-chip-name[b-j0gel0zoyi] {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tool-chip-remove[b-j0gel0zoyi] {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    padding: 0;
    display: flex;
    align-items: center;
}

.tool-chip-remove:hover[b-j0gel0zoyi] {
    opacity: 1;
    color: #ef4444;
}

/* Available tools list */
.tool-list[b-j0gel0zoyi] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.tool-list-item[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tool-list-item:hover[b-j0gel0zoyi] {
    background: var(--theme-secondary, #f1f5f9);
}

.tool-list-item.assigned[b-j0gel0zoyi] {
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.tool-list-item-icon[b-j0gel0zoyi] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-list-item-info[b-j0gel0zoyi] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tool-list-item-name[b-j0gel0zoyi] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #0f172a);
}

.tool-list-item-slug[b-j0gel0zoyi] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    font-family: monospace;
}

.tool-list-item-check[b-j0gel0zoyi] {
    flex-shrink: 0;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === LOADING === */
.loading-state[b-j0gel0zoyi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--theme-text-muted, #64748b);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .form-row.two-cols[b-j0gel0zoyi] {
        grid-template-columns: 1fr;
    }

    .tabs[b-j0gel0zoyi] {
        padding: 12px 16px;
    }

    .tab-content[b-j0gel0zoyi] {
        padding: 16px;
    }
}

/* === DELETE CONFIRMATION BANNER === */
.delete-confirm-banner[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 12px 16px;
    margin: 16px 0 0;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 10px;
    animation: dialogFadeIn-b-j0gel0zoyi 0.15s ease-out;
}

.delete-confirm-content[b-j0gel0zoyi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #ef4444;
    font-weight: 500;
}

.delete-confirm-actions[b-j0gel0zoyi] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.is-dark .delete-confirm-banner[b-j0gel0zoyi] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
}
/* /Pages/Admin/ToolPackagesAdmin.razor.rz.scp.css */
/* === PACKAGE GRID === */

.admin-results-count[b-x6px2nlfxh] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    margin-left: auto;
}

.pkg-grid[b-x6px2nlfxh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.pkg-card[b-x6px2nlfxh] {
    background: var(--theme-surface, #fff);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.pkg-card:hover[b-x6px2nlfxh] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pkg-card.inactive[b-x6px2nlfxh] {
    opacity: 0.6;
}

/* Card Header */
.pkg-card-header[b-x6px2nlfxh] {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 64px;
}

.pkg-icon[b-x6px2nlfxh] {
    font-size: 2rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.pkg-badges[b-x6px2nlfxh] {
    display: flex;
    gap: 0.375rem;
}

.pkg-badge[b-x6px2nlfxh] {
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    backdrop-filter: blur(4px);
}

.pkg-badge.inactive-badge[b-x6px2nlfxh] {
    background: rgba(0, 0, 0, 0.3);
}

/* Card Body */
.pkg-card-body[b-x6px2nlfxh] {
    padding: 1rem 1.25rem;
}

.pkg-name[b-x6px2nlfxh] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.125rem;
    color: var(--theme-text-primary, #0f172a);
}

.pkg-slug[b-x6px2nlfxh] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    font-family: 'SF Mono', 'Consolas', monospace;
}

.pkg-description[b-x6px2nlfxh] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pkg-meta[b-x6px2nlfxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.pkg-meta-item[b-x6px2nlfxh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #94a3b8);
}

/* Card Actions */
.pkg-card-actions[b-x6px2nlfxh] {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--theme-border, #f1f5f9);
    justify-content: flex-end;
}

/* === CONFIRM DIALOG === */
.dialog-overlay[b-x6px2nlfxh] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-x6px2nlfxh 0.15s ease;
}

.confirm-dialog[b-x6px2nlfxh] {
    background: var(--theme-surface, #fff);
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.confirm-icon.danger[b-x6px2nlfxh] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fef2f2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.confirm-dialog h3[b-x6px2nlfxh] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--theme-text-primary, #0f172a);
}

.confirm-dialog p[b-x6px2nlfxh] {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
}

.confirm-actions[b-x6px2nlfxh] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* === DARK THEMES === */
.is-dark .pkg-card[b-x6px2nlfxh] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .pkg-card:hover[b-x6px2nlfxh] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.is-dark .pkg-name[b-x6px2nlfxh] {
    color: #f1f5f9;
}

.is-dark .pkg-slug[b-x6px2nlfxh] {
    color: #94a3b8;
}

.is-dark .pkg-description[b-x6px2nlfxh] {
    color: #94a3b8;
}

.is-dark .pkg-card-actions[b-x6px2nlfxh] {
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .confirm-dialog[b-x6px2nlfxh] {
    background: #1e293b;
}

.is-dark .confirm-dialog h3[b-x6px2nlfxh] {
    color: #f1f5f9;
}

.is-dark .confirm-dialog p[b-x6px2nlfxh] {
    color: #94a3b8;
}

.is-dark .confirm-icon.danger[b-x6px2nlfxh] {
    background: rgba(239, 68, 68, 0.15);
}

/* === EXECUTIVE THEME === */
.theme-executive .pkg-card[b-x6px2nlfxh] {
    border-color: #e2e8f0;
}

.theme-executive .pkg-card:hover[b-x6px2nlfxh] {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .pkg-grid[b-x6px2nlfxh] {
        grid-template-columns: 1fr;
    }
}

@keyframes fadeIn-b-x6px2nlfxh {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Pages/Admin/VisionBoard.razor.rz.scp.css */
/* ============================================
   Vision Board - Using Theme Variables
   ============================================ */

.vision-board-page[b-b3esvppq26] {
    min-height: calc(100vh - var(--header-height));
    padding: 24px;
    transition: background 0.5s ease;
    background: var(--theme-page-bg);
}

/* Hero Section */
.vision-hero[b-b3esvppq26] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    border-radius: 16px;
    padding: 32px;
    color: white;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px var(--theme-shadow-color);
}

.vision-hero-content[b-b3esvppq26] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.vision-hero-info[b-b3esvppq26] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vision-hero-title[b-b3esvppq26] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vision-hero-title h1[b-b3esvppq26] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.vision-hero-title .badge[b-b3esvppq26] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.vision-hero p[b-b3esvppq26] {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Stats Grid */
.stats-grid[b-b3esvppq26] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .stats-grid[b-b3esvppq26] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stats-card[b-b3esvppq26] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--theme-border);
    border-left: 4px solid;
}

.stats-visions[b-b3esvppq26] { border-left-color: var(--theme-primary); }
.stats-completed[b-b3esvppq26] { border-left-color: #10b981; }
.stats-ai[b-b3esvppq26] { border-left-color: #f59e0b; }
.stats-categories[b-b3esvppq26] { border-left-color: #3b82f6; }

.stats-number[b-b3esvppq26] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stats-label[b-b3esvppq26] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

/* Category Filter */
.category-filter[b-b3esvppq26] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--theme-surface);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.category-chip[b-b3esvppq26] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    border: 2px solid transparent;
}

.category-chip:hover[b-b3esvppq26] {
    background: var(--theme-secondary-hover);
    border-color: var(--theme-primary);
}

.category-chip.active[b-b3esvppq26] {
    background: var(--theme-primary);
    color: white;
}

/* Vision Cards Grid */
.vision-grid[b-b3esvppq26] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Add Vision Card */
.add-vision-card[b-b3esvppq26] {
    background: var(--theme-surface);
    border: 3px dashed var(--theme-border);
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-vision-card:hover[b-b3esvppq26] {
    border-color: var(--theme-primary);
    transform: translateY(-4px);
}

.add-icon[b-b3esvppq26] {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--theme-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-primary-ink, var(--theme-primary));
    transition: all 0.3s ease;
}

.add-vision-card:hover .add-icon[b-b3esvppq26] {
    background: var(--theme-primary);
    color: white;
}

.add-vision-card h3[b-b3esvppq26] {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--theme-text-primary);
}

.add-vision-card p[b-b3esvppq26] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

/* Vision Card */
.vision-card[b-b3esvppq26] {
    background: var(--theme-surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--theme-border);
}

.vision-card:hover[b-b3esvppq26] {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.vision-image[b-b3esvppq26] {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.vision-overlay[b-b3esvppq26] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, transparent, transparent);
}

.vision-content[b-b3esvppq26] {
    padding: 16px;
}

.vision-card h3[b-b3esvppq26] {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.vision-card p[b-b3esvppq26] {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    line-height: 1.5;
}

.vision-meta[b-b3esvppq26] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.vision-category[b-b3esvppq26] {
    padding: 2px 8px;
    background: var(--theme-bg-info);
    color: var(--theme-text-info);
    border-radius: 12px;
    font-weight: 500;
}

/* Empty State */
.empty-state[b-b3esvppq26] {
    text-align: center;
    padding: 60px 24px;
}

.empty-state h3[b-b3esvppq26] {
    margin: 0 0 8px;
    color: var(--theme-text-primary);
}

.empty-state p[b-b3esvppq26] {
    margin: 0;
    color: var(--theme-text-secondary);
}

/* Loading State */
.loading-container[b-b3esvppq26] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.spinner[b-b3esvppq26] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-b3esvppq26 1s linear infinite;
}

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

/* Responsive */
@media (max-width: 600px) {
    .vision-board-page[b-b3esvppq26] {
        padding: 16px;
    }
    
    .vision-hero[b-b3esvppq26] {
        padding: 24px;
    }
    
    .vision-hero-title h1[b-b3esvppq26] {
        font-size: 1.5rem;
    }
}

/* VB-PERSIST-1 cleanup (2026-06-13): the create/edit dialog's buttons were converted
   from invented .btn-* names to the .nts-btn design system (which the prototype never
   styled). These rows only needed layout — .nts-btn handles the button chrome. */

/* The global modal-* base has no .modal-header / .modal-body rule, so the header svg+title
   jammed into the top-left corner (no flex, no padding) — the sparkle bled past the rounded
   corner. Style them here. */
.modal-header[b-b3esvppq26] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header-title[b-b3esvppq26] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-header h2[b-b3esvppq26] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Close button — mirrors the Edit Task (WorkItemDialog) dialog's affordance. */
.modal-close[b-b3esvppq26] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.modal-close:hover[b-b3esvppq26] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.08);
}

.modal-body[b-b3esvppq26] {
    padding: 20px 24px;
}

/* Tighter label size/spacing to match the Edit Task dialog (was oversized/loose). */
.modal-body .form-group[b-b3esvppq26] {
    margin-bottom: 16px;
}

.modal-body .form-group label[b-b3esvppq26] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.action-buttons[b-b3esvppq26] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.modal-footer[b-b3esvppq26] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-footer-actions[b-b3esvppq26] {
    display: flex;
    gap: 10px;
    margin-left: auto;
}
/* /Pages/Admin/VoiceLab.razor.rz.scp.css */
/* VOICE-LAB-1 - admin voice workbench. Theme tokens only; ink is never opacity (ANALYTICS-DARK-1). */
.voice-lab[b-vvm7mwhccg] {
    min-height: calc(100vh - var(--header-height));
    padding: 24px;
    background: var(--theme-page-bg);
    color: var(--theme-text-primary);
    max-width: 960px;
    margin: 0 auto;
}

.voice-lab-head h1[b-vvm7mwhccg] { font-size: 1.75rem; font-weight: 800; margin: 0 0 6px 0; color: var(--theme-text-primary); }
.voice-lab-head p[b-vvm7mwhccg] { margin: 0 0 20px 0; color: var(--theme-text-secondary); }

.voice-lab-card[b-vvm7mwhccg] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.voice-lab-card-head[b-vvm7mwhccg] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.voice-lab-card-head h2[b-vvm7mwhccg] { font-size: 1.1rem; font-weight: 700; margin: 0; color: var(--theme-text-primary); }

.voice-lab-label[b-vvm7mwhccg] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
    margin-bottom: 6px;
}

.voice-lab-text[b-vvm7mwhccg], .voice-lab-select[b-vvm7mwhccg] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
}
.voice-lab-text[b-vvm7mwhccg] { resize: vertical; margin-bottom: 14px; }
.voice-lab-select[b-vvm7mwhccg] { min-width: 320px; }

.voice-lab-row[b-vvm7mwhccg] { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }

.voice-lab-btn[b-vvm7mwhccg] {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-secondary);
    color: var(--theme-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
}
.voice-lab-btn:hover[b-vvm7mwhccg] { border-color: var(--theme-primary); }
.voice-lab-btn:disabled[b-vvm7mwhccg] { cursor: default; color: var(--theme-text-secondary); }
.voice-lab-btn.primary[b-vvm7mwhccg] { background: var(--theme-primary); border-color: var(--theme-primary); color: white; }
.voice-lab-btn.primary:disabled[b-vvm7mwhccg] { background: var(--theme-surface-secondary); border-color: var(--theme-border); color: var(--theme-text-secondary); }
.voice-lab-btn.ghost[b-vvm7mwhccg] { background: transparent; border-color: transparent; color: var(--theme-text-secondary); }

.voice-lab-presets[b-vvm7mwhccg] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.voice-lab-presets .voice-lab-label[b-vvm7mwhccg] { margin: 0 4px 0 0; }
.voice-lab-chip[b-vvm7mwhccg] {
    padding: 4px 12px;
    border-radius: 9999px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface-secondary);
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
}
.voice-lab-chip:hover[b-vvm7mwhccg] { color: var(--theme-text-primary); border-color: var(--theme-primary); }

.voice-lab-table[b-vvm7mwhccg] { width: 100%; border-collapse: collapse; font-size: 0.9rem; color: var(--theme-text-primary); }
.voice-lab-table th[b-vvm7mwhccg] { text-align: left; padding: 6px 8px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--theme-text-secondary); }
.voice-lab-table td[b-vvm7mwhccg] { padding: 10px 8px; border-top: 1px solid var(--theme-border); vertical-align: middle; }
.voice-lab-table td.strong[b-vvm7mwhccg] { font-weight: 700; white-space: nowrap; }
.voice-lab-table td.line[b-vvm7mwhccg] { color: var(--theme-text-primary); }
.voice-lab-table td.actions[b-vvm7mwhccg] { white-space: nowrap; text-align: right; }
.voice-lab-table td.actions .voice-lab-btn[b-vvm7mwhccg] { margin-left: 6px; padding: 6px 12px; font-size: 0.8rem; }

.voice-lab-hint[b-vvm7mwhccg] { margin: 12px 0 0 0; font-size: 0.8rem; color: var(--theme-text-secondary); }

@media (max-width: 600px) {
    .voice-lab[b-vvm7mwhccg] { padding: 16px; padding-top: 70px; }
    .voice-lab-select[b-vvm7mwhccg] { min-width: 0; }
}
/* /Pages/Affiliate/AffiliateDashboard.razor.rz.scp.css */
/* ============================================
   AFFILIATE DASHBOARD - Scoped CSS
   ============================================ */

.affiliate-dashboard[b-9sqppvpug5] {
    min-height: calc(100vh - 56px);
    padding: 24px;
}

/* Theme backgrounds */
.affiliate-dashboard.theme-cloud[b-9sqppvpug5] {
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #fdf4ff 100%);
}

.affiliate-dashboard.theme-space[b-9sqppvpug5] {
    background: linear-gradient(135deg, #0f0a1e 0%, #1a0a2e 50%, #0f172a 100%);
}

.affiliate-dashboard.theme-winter[b-9sqppvpug5] {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e3a8a 50%, #1e1b4b 100%);
}

.affiliate-dashboard.theme-nature[b-9sqppvpug5] {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #365314 100%);
}

.affiliate-dashboard.theme-ocean[b-9sqppvpug5] {
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 50%, #0f766e 100%);
}

.dashboard-container[b-9sqppvpug5] {
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Page Header */
.page-header[b-9sqppvpug5] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-content[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon[b-9sqppvpug5] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.header-text h1[b-9sqppvpug5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.header-text .subtitle[b-9sqppvpug5] {
    color: #64748b;
    margin: 4px 0 0 0;
    font-size: 0.95rem;
}

/* Buttons */
.btn[b-9sqppvpug5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-primary[b-9sqppvpug5] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.btn-primary:hover[b-9sqppvpug5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-outline[b-9sqppvpug5] {
    background: transparent;
    border: 2px solid #e2e8f0;
    color: #475569;
}

.btn-outline:hover[b-9sqppvpug5] {
    border-color: #6366f1;
    color: #6366f1;
}

.btn-lg[b-9sqppvpug5] {
    padding: 14px 28px;
    font-size: 1rem;
}

/* Loading */
.loading-container[b-9sqppvpug5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: white;
    border-radius: 16px;
}

.spinner[b-9sqppvpug5] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-9sqppvpug5 1s linear infinite;
}

@keyframes spin-b-9sqppvpug5 {
    to { transform: rotate(360deg); }
}

/* Not Affiliate Card */
.not-affiliate-card[b-9sqppvpug5] {
    background: white;
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.not-affiliate-content[b-9sqppvpug5] {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.not-affiliate-content svg[b-9sqppvpug5] {
    color: #6366f1;
    margin-bottom: 24px;
}

.not-affiliate-content h2[b-9sqppvpug5] {
    font-size: 1.75rem;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.not-affiliate-content > p[b-9sqppvpug5] {
    color: #64748b;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.benefits-list[b-9sqppvpug5] {
    text-align: left;
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
}

.benefit-item[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

.benefit-item:last-child[b-9sqppvpug5] {
    border-bottom: none;
}

.benefit-item svg[b-9sqppvpug5] {
    color: #10b981;
    flex-shrink: 0;
}

.benefit-item span[b-9sqppvpug5] {
    color: #334155;
    font-size: 0.95rem;
}

.cta-text[b-9sqppvpug5] {
    color: #64748b;
    margin: 24px 0 16px 0;
}

/* Earnings Section */
.earnings-section[b-9sqppvpug5] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.earnings-grid[b-9sqppvpug5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.earnings-card[b-9sqppvpug5] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.earnings-card.primary[b-9sqppvpug5] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.earnings-card.credits[b-9sqppvpug5] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.earnings-label[b-9sqppvpug5] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.earnings-value[b-9sqppvpug5] {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.earnings-card:not(.primary):not(.credits) .earnings-value[b-9sqppvpug5] {
    color: #1e293b;
}

.earnings-subtext[b-9sqppvpug5] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.earnings-card:not(.primary):not(.credits) .earnings-subtext[b-9sqppvpug5] {
    color: #64748b;
}

.ready-text[b-9sqppvpug5] {
    color: #fbbf24;
    font-weight: 600;
}

/* Stats Section */
.stats-section[b-9sqppvpug5], .link-section[b-9sqppvpug5], .payout-section[b-9sqppvpug5], .referrals-section[b-9sqppvpug5], .tier-section[b-9sqppvpug5] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.section-title[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 20px 0;
}

.section-title svg[b-9sqppvpug5] {
    color: #6366f1;
}

.stats-grid[b-9sqppvpug5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.stat-card[b-9sqppvpug5] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-card.highlight[b-9sqppvpug5] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.stat-card.highlight .stat-value[b-9sqppvpug5],
.stat-card.highlight .stat-label[b-9sqppvpug5] {
    color: white;
}

.stat-card.highlight .stat-icon[b-9sqppvpug5] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.stat-icon[b-9sqppvpug5] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-9sqppvpug5] {
    width: 24px;
    height: 24px;
}

.stat-icon.clicks[b-9sqppvpug5] { background: #dbeafe; color: #2563eb; }
.stat-icon.signups[b-9sqppvpug5] { background: #d1fae5; color: #059669; }
.stat-icon.converted[b-9sqppvpug5] { background: #fef3c7; color: #d97706; }
.stat-icon.active[b-9sqppvpug5] { background: #f3e8ff; color: #9333ea; }

.stat-content[b-9sqppvpug5] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-9sqppvpug5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.stat-label[b-9sqppvpug5] {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 4px;
}

.conversion-rates[b-9sqppvpug5] {
    display: flex;
    gap: 24px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.rate-item[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate-label[b-9sqppvpug5] {
    color: #64748b;
    font-size: 0.9rem;
}

.rate-value[b-9sqppvpug5] {
    font-weight: 700;
    color: #6366f1;
    font-size: 1rem;
}

/* Link Section */
.link-card[b-9sqppvpug5] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
}

.link-wrapper[b-9sqppvpug5] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.link-input[b-9sqppvpug5] {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.9rem;
    background: white;
    color: #334155;
}

.copy-btn[b-9sqppvpug5] {
    white-space: nowrap;
}

.link-info[b-9sqppvpug5] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 16px 0;
}

.share-buttons[b-9sqppvpug5] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.share-btn[b-9sqppvpug5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    color: white;
    transition: all 0.2s ease;
}

.share-btn svg[b-9sqppvpug5] {
    width: 18px;
    height: 18px;
}

.share-btn.twitter[b-9sqppvpug5] { background: #1da1f2; }
.share-btn.twitter:hover[b-9sqppvpug5] { background: #0d8ddb; }
.share-btn.linkedin[b-9sqppvpug5] { background: #0077b5; }
.share-btn.linkedin:hover[b-9sqppvpug5] { background: #006699; }
.share-btn.email[b-9sqppvpug5] { background: #64748b; }
.share-btn.email:hover[b-9sqppvpug5] { background: #475569; }

/* Payout Section */
.payout-card[b-9sqppvpug5] {
    background: #f8fafc;
    border-radius: 12px;
    padding: 24px;
}

.payout-grid[b-9sqppvpug5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.payout-item[b-9sqppvpug5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payout-label[b-9sqppvpug5] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.payout-value[b-9sqppvpug5] {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}

.payout-warning[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fef3c7;
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
    color: #92400e;
    font-size: 0.9rem;
}

/* Referrals Table */
.referrals-table[b-9sqppvpug5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.referral-row[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    gap: 16px;
}

.referral-user[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.referral-avatar[b-9sqppvpug5] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

.referral-info[b-9sqppvpug5] {
    display: flex;
    flex-direction: column;
}

.referral-name[b-9sqppvpug5] {
    font-weight: 600;
    color: #1e293b;
}

.referral-date[b-9sqppvpug5] {
    font-size: 0.8rem;
    color: #64748b;
}

.referral-status[b-9sqppvpug5] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.referral-status.status-clicked[b-9sqppvpug5] { background: #e2e8f0; color: #475569; }
.referral-status.status-signedup[b-9sqppvpug5] { background: #dbeafe; color: #1e40af; }
.referral-status.status-converted[b-9sqppvpug5] { background: #d1fae5; color: #065f46; }
.referral-status.status-churned[b-9sqppvpug5] { background: #fee2e2; color: #991b1b; }

.referral-earnings[b-9sqppvpug5] {
    text-align: right;
    min-width: 100px;
}

.referral-earnings .commission[b-9sqppvpug5] {
    color: #059669;
    font-weight: 700;
}

.referral-earnings .credits[b-9sqppvpug5] {
    color: #6366f1;
    font-weight: 600;
}

.referral-earnings .pending[b-9sqppvpug5] {
    color: #94a3b8;
}

/* Tier Section */
.tier-card[b-9sqppvpug5] {
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tier-card.tier-standard[b-9sqppvpug5] {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
}

.tier-card.tier-vip[b-9sqppvpug5] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 2px solid #f59e0b;
}

.tier-card.tier-super[b-9sqppvpug5] {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    border: 2px solid #9333ea;
}

.tier-card.tier-partner[b-9sqppvpug5] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 2px solid #10b981;
}

.tier-badge[b-9sqppvpug5] {
    background: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.tier-info[b-9sqppvpug5] {
    flex: 1;
}

.tier-description[b-9sqppvpug5] {
    color: #334155;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.tier-perks[b-9sqppvpug5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perk[b-9sqppvpug5] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 0.9rem;
}

.perk svg[b-9sqppvpug5] {
    color: #10b981;
    flex-shrink: 0;
}

/* Dark Theme Adjustments */
.theme-space .page-header[b-9sqppvpug5],
.theme-winter .page-header[b-9sqppvpug5],
.theme-nature .page-header[b-9sqppvpug5],
.theme-ocean .page-header[b-9sqppvpug5],
.theme-space .earnings-section[b-9sqppvpug5],
.theme-winter .earnings-section[b-9sqppvpug5],
.theme-nature .earnings-section[b-9sqppvpug5],
.theme-ocean .earnings-section[b-9sqppvpug5],
.theme-space .stats-section[b-9sqppvpug5],
.theme-winter .stats-section[b-9sqppvpug5],
.theme-nature .stats-section[b-9sqppvpug5],
.theme-ocean .stats-section[b-9sqppvpug5],
.theme-space .link-section[b-9sqppvpug5],
.theme-winter .link-section[b-9sqppvpug5],
.theme-nature .link-section[b-9sqppvpug5],
.theme-ocean .link-section[b-9sqppvpug5],
.theme-space .payout-section[b-9sqppvpug5],
.theme-winter .payout-section[b-9sqppvpug5],
.theme-nature .payout-section[b-9sqppvpug5],
.theme-ocean .payout-section[b-9sqppvpug5],
.theme-space .referrals-section[b-9sqppvpug5],
.theme-winter .referrals-section[b-9sqppvpug5],
.theme-nature .referrals-section[b-9sqppvpug5],
.theme-ocean .referrals-section[b-9sqppvpug5],
.theme-space .tier-section[b-9sqppvpug5],
.theme-winter .tier-section[b-9sqppvpug5],
.theme-nature .tier-section[b-9sqppvpug5],
.theme-ocean .tier-section[b-9sqppvpug5],
.theme-space .not-affiliate-card[b-9sqppvpug5],
.theme-winter .not-affiliate-card[b-9sqppvpug5],
.theme-nature .not-affiliate-card[b-9sqppvpug5],
.theme-ocean .not-affiliate-card[b-9sqppvpug5] {
    background: rgba(30, 41, 59, 0.95);
}

.theme-space .header-text h1[b-9sqppvpug5],
.theme-winter .header-text h1[b-9sqppvpug5],
.theme-nature .header-text h1[b-9sqppvpug5],
.theme-ocean .header-text h1[b-9sqppvpug5],
.theme-space .section-title[b-9sqppvpug5],
.theme-winter .section-title[b-9sqppvpug5],
.theme-nature .section-title[b-9sqppvpug5],
.theme-ocean .section-title[b-9sqppvpug5],
.theme-space .stat-value[b-9sqppvpug5],
.theme-winter .stat-value[b-9sqppvpug5],
.theme-nature .stat-value[b-9sqppvpug5],
.theme-ocean .stat-value[b-9sqppvpug5],
.theme-space .payout-value[b-9sqppvpug5],
.theme-winter .payout-value[b-9sqppvpug5],
.theme-nature .payout-value[b-9sqppvpug5],
.theme-ocean .payout-value[b-9sqppvpug5],
.theme-space .referral-name[b-9sqppvpug5],
.theme-winter .referral-name[b-9sqppvpug5],
.theme-nature .referral-name[b-9sqppvpug5],
.theme-ocean .referral-name[b-9sqppvpug5],
.theme-space .not-affiliate-content h2[b-9sqppvpug5],
.theme-winter .not-affiliate-content h2[b-9sqppvpug5],
.theme-nature .not-affiliate-content h2[b-9sqppvpug5],
.theme-ocean .not-affiliate-content h2[b-9sqppvpug5] {
    color: #f1f5f9;
}

.theme-space .header-text .subtitle[b-9sqppvpug5],
.theme-winter .header-text .subtitle[b-9sqppvpug5],
.theme-nature .header-text .subtitle[b-9sqppvpug5],
.theme-ocean .header-text .subtitle[b-9sqppvpug5],
.theme-space .stat-label[b-9sqppvpug5],
.theme-winter .stat-label[b-9sqppvpug5],
.theme-nature .stat-label[b-9sqppvpug5],
.theme-ocean .stat-label[b-9sqppvpug5],
.theme-space .payout-label[b-9sqppvpug5],
.theme-winter .payout-label[b-9sqppvpug5],
.theme-nature .payout-label[b-9sqppvpug5],
.theme-ocean .payout-label[b-9sqppvpug5],
.theme-space .referral-date[b-9sqppvpug5],
.theme-winter .referral-date[b-9sqppvpug5],
.theme-nature .referral-date[b-9sqppvpug5],
.theme-ocean .referral-date[b-9sqppvpug5],
.theme-space .not-affiliate-content > p[b-9sqppvpug5],
.theme-winter .not-affiliate-content > p[b-9sqppvpug5],
.theme-nature .not-affiliate-content > p[b-9sqppvpug5],
.theme-ocean .not-affiliate-content > p[b-9sqppvpug5] {
    color: #94a3b8;
}

.theme-space .earnings-card:not(.primary):not(.credits)[b-9sqppvpug5],
.theme-winter .earnings-card:not(.primary):not(.credits)[b-9sqppvpug5],
.theme-nature .earnings-card:not(.primary):not(.credits)[b-9sqppvpug5],
.theme-ocean .earnings-card:not(.primary):not(.credits)[b-9sqppvpug5],
.theme-space .stat-card:not(.highlight)[b-9sqppvpug5],
.theme-winter .stat-card:not(.highlight)[b-9sqppvpug5],
.theme-nature .stat-card:not(.highlight)[b-9sqppvpug5],
.theme-ocean .stat-card:not(.highlight)[b-9sqppvpug5],
.theme-space .link-card[b-9sqppvpug5],
.theme-winter .link-card[b-9sqppvpug5],
.theme-nature .link-card[b-9sqppvpug5],
.theme-ocean .link-card[b-9sqppvpug5],
.theme-space .payout-card[b-9sqppvpug5],
.theme-winter .payout-card[b-9sqppvpug5],
.theme-nature .payout-card[b-9sqppvpug5],
.theme-ocean .payout-card[b-9sqppvpug5],
.theme-space .referral-row[b-9sqppvpug5],
.theme-winter .referral-row[b-9sqppvpug5],
.theme-nature .referral-row[b-9sqppvpug5],
.theme-ocean .referral-row[b-9sqppvpug5],
.theme-space .benefits-list[b-9sqppvpug5],
.theme-winter .benefits-list[b-9sqppvpug5],
.theme-nature .benefits-list[b-9sqppvpug5],
.theme-ocean .benefits-list[b-9sqppvpug5] {
    background: rgba(255, 255, 255, 0.05);
}

.theme-space .earnings-card:not(.primary):not(.credits) .earnings-value[b-9sqppvpug5],
.theme-winter .earnings-card:not(.primary):not(.credits) .earnings-value[b-9sqppvpug5],
.theme-nature .earnings-card:not(.primary):not(.credits) .earnings-value[b-9sqppvpug5],
.theme-ocean .earnings-card:not(.primary):not(.credits) .earnings-value[b-9sqppvpug5] {
    color: #f1f5f9;
}

.theme-space .link-input[b-9sqppvpug5],
.theme-winter .link-input[b-9sqppvpug5],
.theme-nature .link-input[b-9sqppvpug5],
.theme-ocean .link-input[b-9sqppvpug5] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.theme-space .btn-outline[b-9sqppvpug5],
.theme-winter .btn-outline[b-9sqppvpug5],
.theme-nature .btn-outline[b-9sqppvpug5],
.theme-ocean .btn-outline[b-9sqppvpug5] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #e2e8f0;
}

.theme-space .benefit-item span[b-9sqppvpug5],
.theme-winter .benefit-item span[b-9sqppvpug5],
.theme-nature .benefit-item span[b-9sqppvpug5],
.theme-ocean .benefit-item span[b-9sqppvpug5],
.theme-space .tier-description[b-9sqppvpug5],
.theme-winter .tier-description[b-9sqppvpug5],
.theme-nature .tier-description[b-9sqppvpug5],
.theme-ocean .tier-description[b-9sqppvpug5],
.theme-space .perk[b-9sqppvpug5],
.theme-winter .perk[b-9sqppvpug5],
.theme-nature .perk[b-9sqppvpug5],
.theme-ocean .perk[b-9sqppvpug5] {
    color: #cbd5e1;
}

/* Responsive */
@media (max-width: 768px) {
    .affiliate-dashboard[b-9sqppvpug5] {
        padding: 16px;
    }

    .page-header[b-9sqppvpug5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-content[b-9sqppvpug5] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .earnings-grid[b-9sqppvpug5] {
        grid-template-columns: 1fr;
    }

    /* MOBILE-AUDIT-3 (2026-10-02): 1fr tracks grow to content (icon + 1.75rem value);
       on a 390px phone the right card ran off screen. Hold the tracks, stack icon over value. */
    .stats-grid[b-9sqppvpug5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .stat-card[b-9sqppvpug5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px;
        min-width: 0;
    }

    .stat-value[b-9sqppvpug5] {
        font-size: 1.35rem;
        overflow-wrap: anywhere;
    }

    .link-wrapper[b-9sqppvpug5] {
        flex-direction: column;
    }

    .conversion-rates[b-9sqppvpug5] {
        flex-direction: column;
        gap: 12px;
    }

    .tier-card[b-9sqppvpug5] {
        flex-direction: column;
    }

    .referral-row[b-9sqppvpug5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .referral-earnings[b-9sqppvpug5] {
        text-align: left;
    }
}
/* /Pages/Affirmations/AffirmationDialog.razor.rz.scp.css */
/* ============================================
   AFFIRMATION DIALOG - Scoped CSS
   ============================================ */

/* Form Layout */
.form-stack[b-zt1ebktiot] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-zt1ebktiot] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row[b-zt1ebktiot] {
    display: flex;
    gap: 16px;
    align-items: center;
}

.form-row > .form-group[b-zt1ebktiot] {
    flex: 1;
}

.form-label[b-zt1ebktiot] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

/* Form Inputs */
.form-input[b-zt1ebktiot],
.form-textarea[b-zt1ebktiot],
.form-select[b-zt1ebktiot] {
    padding: 10px 12px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.95rem;
    width: 100%;
    transition: all 0.2s;
    background-color: var(--theme-input-bg, #fff);
    color: var(--theme-input-text, #1e293b);
}

.form-input:focus[b-zt1ebktiot],
.form-textarea:focus[b-zt1ebktiot],
.form-select:focus[b-zt1ebktiot] {
    outline: none;
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 0 0 3px var(--theme-shadow-color, rgba(99, 102, 241, 0.1));
}

.form-textarea[b-zt1ebktiot] {
    resize: vertical;
    min-height: 100px;
}

.helper-text[b-zt1ebktiot] {
    font-size: 0.75rem;
    color: var(--theme-text-hint, #94a3b8);
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
}

/* Info Alert */
.info-alert[b-zt1ebktiot] {
    background-color: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin-top: 10px;
}
/* /Pages/Affirmations/Affirmations.razor.rz.scp.css */
/* Affirmations Page - Scoped CSS
   Uses list-page pattern from utilities.css.
   Only page-specific overrides here. */

/* Footer info */
.list-page-footer-info[b-zz9260fvc6] {
    text-align: center;
    margin-top: 16px;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}
/* /Pages/Assets/AssetDialog.razor.rz.scp.css */
/* ============================================
   ASSET DIALOG STYLES
   ============================================ */

/* Form Elements */
.form-stack[b-87n6hgmt24] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group[b-87n6hgmt24] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-row[b-87n6hgmt24] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.form-row > .form-group[b-87n6hgmt24] {
    flex: 1;
}

.form-label[b-87n6hgmt24] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-input[b-87n6hgmt24],
.form-textarea[b-87n6hgmt24],
.form-select[b-87n6hgmt24] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, var(--theme-border));
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    width: 100%;
    background: var(--theme-input-bg, var(--theme-surface));
    color: var(--theme-input-text, var(--theme-text-primary));
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus[b-87n6hgmt24],
.form-textarea:focus[b-87n6hgmt24],
.form-select:focus[b-87n6hgmt24] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.form-input[b-87n6hgmt24]::placeholder,
.form-textarea[b-87n6hgmt24]::placeholder {
    color: var(--theme-text-hint);
}

.form-textarea[b-87n6hgmt24] {
    resize: vertical;
    min-height: 80px;
}

.form-select[b-87n6hgmt24] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 36px;
}

.divider[b-87n6hgmt24] {
    height: 1px;
    background: var(--theme-border);
}

.helper-text[b-87n6hgmt24] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
    display: flex;
    justify-content: space-between;
}
/* /Pages/Assets/Assets.razor.rz.scp.css */
/* ============================================
   ASSETS PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - only Assets-specific
   styles remain here (cards grid, view toggle)
   ============================================ */

/* ============================================
   VIEW TOGGLE BUTTONS
   ============================================ */
.assets-view-toggle[b-suxfboysm3] {
    flex: 0 0 auto;
    min-width: auto;
}

.assets-toggle-btns[b-suxfboysm3] {
    display: flex;
    gap: 4px;
}

.assets-toggle-btn[b-suxfboysm3] {
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}

.assets-toggle-btn svg[b-suxfboysm3] {
    width: 20px;
    height: 20px;
}

.assets-toggle-btn:hover[b-suxfboysm3] {
    background: var(--theme-surface-hover, #e2e8f0);
}

.assets-toggle-btn.active[b-suxfboysm3] {
    background: var(--theme-accent, #3b82f6);
    color: white;
}

/* Dark theme toggle buttons */
.is-dark .assets-toggle-btn[b-suxfboysm3] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .assets-toggle-btn:hover[b-suxfboysm3] {
    background: rgba(255, 255, 255, 0.15);
}

.theme-space .assets-toggle-btn.active[b-suxfboysm3] { background: #7c3aed; }
.theme-winter .assets-toggle-btn.active[b-suxfboysm3] { background: #0891b2; }
.theme-nature .assets-toggle-btn.active[b-suxfboysm3] { background: #22c55e; }
.theme-ocean .assets-toggle-btn.active[b-suxfboysm3] { background: #0284c7; }
.theme-mystic .assets-toggle-btn.active[b-suxfboysm3] { background: #c026d3; }
.theme-tron .assets-toggle-btn.active[b-suxfboysm3] { background: #06b6d4; }

/* ============================================
   ASSETS GRID (Cards View)
   ============================================ */
.assets-grid[b-suxfboysm3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 1024px) {
    .assets-grid[b-suxfboysm3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .assets-grid[b-suxfboysm3] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ASSET CARDS
   ============================================ */
.assets-card[b-suxfboysm3] {
    border-radius: 14px;
    border-left: 4px solid #10b981;
    transition: all 0.3s ease;
    overflow: hidden;
    background: var(--theme-surface, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.assets-card:hover[b-suxfboysm3] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.assets-card-header[b-suxfboysm3] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 20px 12px;
    gap: 12px;
}

.assets-card-name[b-suxfboysm3] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    color: var(--theme-text-primary, #1e293b);
}

.assets-card-body[b-suxfboysm3] {
    padding: 0 20px 16px;
}

.assets-card-description[b-suxfboysm3] {
    font-size: 0.875rem;
    margin: 0 0 12px;
    line-height: 1.5;
    color: var(--theme-text-secondary, #64748b);
}

.assets-card-chips[b-suxfboysm3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.assets-card-actions[b-suxfboysm3] {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--theme-border, #f1f5f9);
}

/* Dark theme cards */
.is-dark .assets-card[b-suxfboysm3] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.is-dark .assets-card:hover[b-suxfboysm3] {
    box-shadow: 0 8px 24px transparent;
}

.is-dark .assets-card-name[b-suxfboysm3] {
    color: #f1f5f9;
}

.is-dark .assets-card-description[b-suxfboysm3] {
    color: #94a3b8;
}

.is-dark .assets-card-actions[b-suxfboysm3] {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .assets-view-toggle[b-suxfboysm3] {
        width: 100%;
        justify-content: flex-end;
    }
    
    .assets-toggle-btns[b-suxfboysm3] {
        justify-content: flex-end;
    }
}
/* /Pages/Calendar/CalendarComp.razor.rz.scp.css */
/* ============================================
   CALENDAR PAGE - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only calendar-specific styles here (sidebar, grid, events)
   ============================================ */

/* Calendar-specific page adjustments */
.calendar-page[b-c01rw34ccs] {
    min-height: calc(100vh - 56px);
}

/* Layout: the grid owns the width; the sidebar is a drawer (CAL-FULL-1, 2026-10-17).
   The old two-column grid (280px 1fr) and its stacking breakpoints below are retired - the
   breakpoint rules still parse but no longer have a column to collapse. */
.calendar-layout[b-c01rw34ccs] {
    display: block;
    position: relative;
}

/* ============================================
   SIDEBAR
   ============================================ */
.calendar-sidebar[b-c01rw34ccs] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-section[b-c01rw34ccs] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    padding: 20px;
    transition: all 0.3s ease;
}

.sidebar-header[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
}

.sidebar-title[b-c01rw34ccs] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

/* Group of icon buttons that sit at the right edge of a calendar list item.
   Without this wrapper the bare buttons stack against each other under
   .calendar-list-item's space-between layout (the label takes the left,
   buttons share the right with no breathing room between them).
   `flex-wrap: nowrap` keeps the badge and leave-icon on the same row even
   when the calendar name is long — the checkbox label handles overflow via
   text-overflow rather than pushing actions onto a second line. */
.calendar-actions[b-c01rw34ccs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* The leave-share variant of .calendar-icon-btn. Quieter than the gear/share
   buttons (which are owner-side actions) — leaving a calendar is a destructive
   action, but a passive one, so we render it as a muted secondary chip rather
   than another solid button. Matches the X icon's visual weight on row hover. */
.calendar-icon-btn-leave[b-c01rw34ccs] {
    background: transparent !important;
    color: var(--theme-text-muted, #94a3b8) !important;
    width: 24px !important;
    height: 24px !important;
}

.calendar-icon-btn-leave:hover[b-c01rw34ccs] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    transform: none !important;
}

.calendar-icon-btn-leave svg[b-c01rw34ccs] {
    width: 14px !important;
    height: 14px !important;
}

/* Inbox-style badge variant of .calendar-icon-btn — used to surface a pending
   suggestion count on owned calendars in the sidebar. The badge sits in the
   top-right corner and only appears when count > 0 (rendered conditionally). */
.calendar-icon-btn-badge[b-c01rw34ccs] {
    position: relative;
}

.calendar-icon-badge[b-c01rw34ccs] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--theme-accent, #6366f1);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* Calendar Icon Button */
.calendar-icon-btn[b-c01rw34ccs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--theme-surface-secondary, rgba(100, 116, 139, 0.1));
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--theme-text-secondary, #64748b);
}

.calendar-icon-btn svg[b-c01rw34ccs] {
    width: 18px;
    height: 18px;
}

.calendar-icon-btn:hover[b-c01rw34ccs] {
    background: var(--theme-accent, #3b82f6);
    color: white;
    transform: scale(1.05);
}

/* Calendar List */
.calendar-list[b-c01rw34ccs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-list-item[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.02));
    transition: all 0.2s ease;
}

.calendar-list-item:hover[b-c01rw34ccs] {
    transform: translateX(4px);
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.04));
}

.calendar-checkbox[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    flex: 1;
    min-width: 0; /* Lets the calendar-name child truncate via text-overflow
                      instead of pushing the calendar-actions group onto a new line. */
}

/* Hide visually but keep focusable for keyboard navigation. `display:none`
   removes the input from the tab order entirely, which broke keyboard a11y on
   the calendar sidebar. The absolute + opacity:0 pattern keeps the underlying
   <input> in the accessibility tree so screen readers and Tab navigation work. */
.calendar-checkbox input[type="checkbox"][b-c01rw34ccs] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.calendar-checkbox input[type="checkbox"]:focus-visible + .checkbox-custom[b-c01rw34ccs] {
    outline: 2px solid var(--theme-accent, #3b82f6);
    outline-offset: 2px;
}

.checkbox-custom[b-c01rw34ccs] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--theme-text-muted, #94a3b8);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    background: transparent;
}

.calendar-checkbox:hover .checkbox-custom[b-c01rw34ccs] {
    border-color: var(--theme-accent, #3b82f6);
}

.calendar-checkbox input:checked + .checkbox-custom[b-c01rw34ccs] {
    background: var(--theme-accent, #3b82f6);
    border-color: var(--theme-accent, #3b82f6);
}

/* SVG check rather than the Unicode "✓" — the latter renders inconsistently
   across system fonts and was producing the heavy, off-center mark visible in
   pre-fix screenshots. The 10x10 SVG draws a clean two-segment polyline that
   scales properly at any DPI. */
.calendar-checkbox input:checked + .checkbox-custom[b-c01rw34ccs]::after {
    content: "";
    width: 10px;
    height: 10px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='3 8.5 6.5 12 13 4.5'/></svg>") no-repeat center / contain;
}

/* 8px round bullet rendered between the checkbox and the calendar name. Only
   shown when the calendar has a custom color (inline style flips display:none).
   Visual pairing with the event-dot-sm and event-chip border so users can
   correlate "this calendar = these events" at a glance. */
.calendar-color-dot[b-c01rw34ccs] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* "+N" shared-with chip surfaced on Shared with Me rows when the calendar has
   multiple recipients. Lets the user know whether this is a private 1-on-1
   share or a broader audience. The full breakdown is in the row tooltip. */
.calendar-shared-count[b-c01rw34ccs] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    background: var(--theme-surface-secondary);
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.calendar-name[b-c01rw34ccs] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-empty[b-c01rw34ccs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: var(--theme-text-muted, #94a3b8);
}

.sidebar-empty svg[b-c01rw34ccs] {
    width: 48px;
    height: 48px;
    opacity: 0.4;
}

.sidebar-empty span[b-c01rw34ccs] {
    font-size: 0.85rem;
}

/* Slim text-button for the empty-state CTA. The original used the large
   .list-page-btn-primary which dominated the sidebar — out of scale for an
   empty state on a side panel. The header already has a + button next to
   "My Calendars", so this CTA can be minimal. */
.sidebar-empty-link[b-c01rw34ccs] {
    background: transparent;
    border: none;
    padding: 4px 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-accent, #3b82f6);
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.sidebar-empty-link:hover[b-c01rw34ccs] {
    background: var(--theme-surface-hover, rgba(99, 102, 241, 0.08));
    text-decoration: underline;
}

/* Stats */
.stats-list[b-c01rw34ccs] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-row[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-label[b-c01rw34ccs] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

.stat-value[b-c01rw34ccs] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
}

.stat-primary[b-c01rw34ccs] { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.stat-info[b-c01rw34ccs] { background: rgba(14, 165, 233, 0.15); color: #0284c7; }

/* ============================================
   CALENDAR MAIN AREA
   ============================================ */
.calendar-main[b-c01rw34ccs] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    padding: 20px;
    min-height: 600px;
}

/* Calendar Navigation */
.calendar-nav[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.nav-btn[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--theme-surface-secondary, rgba(100, 116, 139, 0.1));
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn svg[b-c01rw34ccs] {
    width: 24px;
    height: 24px;
}

.nav-btn:hover[b-c01rw34ccs] {
    background: var(--theme-accent, #3b82f6);
    color: white;
    transform: scale(1.05);
}

.nav-center[b-c01rw34ccs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.current-month[b-c01rw34ccs] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
}

.today-btn[b-c01rw34ccs] {
    padding: 6px 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 20px;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.today-btn:hover[b-c01rw34ccs] {
    border-color: var(--theme-accent, #3b82f6);
    color: var(--theme-accent, #3b82f6);
}

/* Calendar Grid */
.calendar-grid[b-c01rw34ccs] {
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}

.calendar-header-row[b-c01rw34ccs] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--theme-surface-secondary, #f8fafc);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.calendar-header-cell[b-c01rw34ccs] {
    padding: 12px 8px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary, #64748b);
}

.calendar-week[b-c01rw34ccs] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.calendar-day[b-c01rw34ccs] {
    min-height: 100px;
    padding: 8px;
    border-right: 1px solid var(--theme-border, #e2e8f0);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    cursor: pointer;
    transition: background 0.2s ease;
}

.calendar-day:nth-child(7n)[b-c01rw34ccs] {
    border-right: none;
}

.calendar-day:hover[b-c01rw34ccs] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.calendar-day.other-month[b-c01rw34ccs] {
    opacity: 0.4;
}

.calendar-day.today[b-c01rw34ccs] {
    background: rgba(59, 130, 246, 0.05);
}

.day-header[b-c01rw34ccs] {
    margin-bottom: 6px;
}

.day-number[b-c01rw34ccs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.today-number[b-c01rw34ccs] {
    background: var(--theme-accent, #3b82f6);
    color: white;
    border-radius: 50%;
}

/* Event Chips */
.day-events[b-c01rw34ccs] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-chip[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.2s ease;
    overflow: hidden;
}

.event-chip:hover[b-c01rw34ccs] {
    background: rgba(59, 130, 246, 0.2);
}

.event-dot-sm[b-c01rw34ccs] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-accent, #3b82f6);
    flex-shrink: 0;
}

.event-title[b-c01rw34ccs] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-time-sm[b-c01rw34ccs] {
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.65rem;
    flex-shrink: 0;
}

.more-events[b-c01rw34ccs] {
    font-size: 0.7rem;
    color: var(--theme-accent, #3b82f6);
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

.more-events:hover[b-c01rw34ccs] {
    text-decoration: underline;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .sidebar-section[b-c01rw34ccs],
.is-dark .calendar-main[b-c01rw34ccs] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Light themes leave .sidebar-header transparent (it inherits .sidebar-section's
   surface). The global theme stylesheet forces a dark slate background on
   .sidebar-header for the dark themes which makes it pop awkwardly against
   the lighter .sidebar-section card we set above. Match the light-theme
   behaviour by overriding it back to transparent here. */
.is-dark .sidebar-section .sidebar-header[b-c01rw34ccs] {
    background: transparent !important;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.is-dark .calendar-list-item[b-c01rw34ccs] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .calendar-list-item:hover[b-c01rw34ccs] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .calendar-icon-btn[b-c01rw34ccs],
.is-dark .nav-btn[b-c01rw34ccs] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .calendar-header-row[b-c01rw34ccs] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .calendar-grid[b-c01rw34ccs],
.is-dark .calendar-day[b-c01rw34ccs] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .calendar-day:hover[b-c01rw34ccs] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .calendar-day.today[b-c01rw34ccs] {
    background: rgba(59, 130, 246, 0.15);
}

.is-dark .event-chip[b-c01rw34ccs] {
    background: rgba(59, 130, 246, 0.2);
}

.is-dark .event-chip:hover[b-c01rw34ccs] {
    background: rgba(59, 130, 246, 0.3);
}

.is-dark .today-btn[b-c01rw34ccs] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .stat-primary[b-c01rw34ccs] {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.is-dark .stat-info[b-c01rw34ccs] {
    background: rgba(14, 165, 233, 0.2);
    color: #38bdf8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px) {
    .calendar-layout[b-c01rw34ccs] {
        grid-template-columns: 1fr;
    }
    
    .calendar-sidebar[b-c01rw34ccs] {
        order: 2;
    }
    
    .calendar-main[b-c01rw34ccs] {
        order: 1;
    }
}

@media (max-width: 768px) {
    .calendar-day[b-c01rw34ccs] {
        min-height: 60px;
        padding: 4px;
    }
    
    .day-number[b-c01rw34ccs] {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    
    .event-chip[b-c01rw34ccs] {
        display: none;
    }
    
    .more-events[b-c01rw34ccs] {
        display: none;
    }
    
    /* Show event dot indicator on mobile */
    .calendar-day:has(.event-chip)[b-c01rw34ccs]::after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: var(--theme-accent, #3b82f6);
        border-radius: 50%;
        margin: 4px auto 0;
    }
}

@media (max-width: 600px) {
    .calendar-page[b-c01rw34ccs] {
        padding: 16px;
        padding-top: 72px;
    }
    
    .current-month[b-c01rw34ccs] {
        font-size: 1.25rem;
    }
}

/* ============================================
   RESPONSIVE / MOBILE
   ============================================
   At narrow widths the 280px-fixed sidebar starves the calendar grid (a 7-column
   layout doesn't survive below ~600px without horizontal scroll). The breakpoint
   at 900px collapses to a single column so the sidebar sits above the grid; the
   600px breakpoint shrinks day cells, hides the time-of-day chip on event chips,
   and tightens padding so the grid still fits on a phone. */
@media (max-width: 900px) {
    .calendar-layout[b-c01rw34ccs] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .calendar-sidebar[b-c01rw34ccs] {
        gap: 12px;
    }
    .sidebar-section[b-c01rw34ccs] {
        padding: 14px;
    }
}

/* Phone-narrow viewports (≤600px): the 7-column month grid doesn't have room
   for readable event chips, so we collapse each event to a colored dot indicator
   on the day cell. Tapping a day with events drills into the Day view (see
   OnDayClicked / CAL-MOBILE-1) where the full chip detail is rendered.
   The Week view's tall cells still show full chips since week mode collapses
   to a single row of cells that DO have room.

   IMPORTANT: a pre-existing 768px breakpoint (further up) hides .event-chip and
   adds a `.calendar-day:has(.event-chip)::after` pseudo-element to render a single
   dot per cell. That pseudo runs concurrently with our chip-as-dot collapse below,
   producing TWO dots on every event-day at phone widths. We kill the pseudo here
   so only our per-event dot indicators render. */
@media (max-width: 600px) {
    .calendar-grid:not(.calendar-grid-week) .calendar-day:has(.event-chip)[b-c01rw34ccs]::after {
        content: none;
    }

    .calendar-day[b-c01rw34ccs] {
        min-height: 70px;
        padding: 4px;
    }
    .calendar-header-cell[b-c01rw34ccs] {
        padding: 6px 0;
        font-size: 0.7rem;
    }
    .day-number[b-c01rw34ccs] {
        font-size: 0.75rem;
    }

    /* In month mode: collapse chips to a row of small dots. Each chip becomes
       a 6×6 colored circle (color from the calendar's hex via the inline style
       on the chip border-left, which we re-apply as the dot's background via
       currentColor). The title, time, dot, and chip background all hide so
       the only visible element is a tappable indicator. */
    .calendar-grid:not(.calendar-grid-week) .event-chip[b-c01rw34ccs] {
        width: 6px;
        height: 6px;
        padding: 0;
        margin: 1px;
        border-radius: 50%;
        border-left: none !important;
        background: var(--theme-text-muted) !important;
        display: inline-block;
        overflow: hidden;
    }
    .calendar-grid:not(.calendar-grid-week) .event-chip > *[b-c01rw34ccs] {
        display: none;
    }
    /* When the chip has a calendar color (via the inline border-left set in
       EventChipStyle), tint the dot to match. We achieve this with a CSS
       custom property the inline style sets — see EventChipDotColor helper
       in the razor file's @code section. The fallback is the muted gray above. */
    .calendar-grid:not(.calendar-grid-week) .event-chip.event-chip-colored[b-c01rw34ccs] {
        background: var(--cal-color, var(--theme-accent)) !important;
    }
    /* Day-events container becomes a horizontal flex of dots so multiple
       events on the same day show as a row of indicators (max ~6 visible
       at this width before wrap). */
    .calendar-grid:not(.calendar-grid-week) .day-events[b-c01rw34ccs] {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        align-items: center;
    }
    .calendar-grid:not(.calendar-grid-week) .more-events[b-c01rw34ccs] {
        font-size: 0.65rem;
        margin-left: 2px;
    }

    /* Week view at phone widths: keep full chips since cells are tall enough,
       but tighten typography. Day view styling unchanged (it's already a
       single-column list designed for narrow widths). */
    .calendar-grid-week .event-chip[b-c01rw34ccs] {
        padding: 4px 6px;
        font-size: 0.75rem;
    }
    .calendar-grid-week .event-time-sm[b-c01rw34ccs] {
        font-size: 0.7rem;
    }

    .calendar-nav .current-month[b-c01rw34ccs] {
        font-size: 1rem;
    }
    .nav-btn[b-c01rw34ccs] {
        width: 32px;
        height: 32px;
    }
    .list-page-actions[b-c01rw34ccs] {
        flex-wrap: wrap;
        gap: 8px;
    }
    .list-page-btn-primary[b-c01rw34ccs],
    .list-page-btn-secondary[b-c01rw34ccs] {
        flex: 1;
        min-width: 130px;
        justify-content: center;
    }
}

/* View mode toggle — segmented control between the calendar nav and the grid.
   Each button is a tab in a single-row pill; the active tab gets the theme
   accent fill. Used by the Month / Week / Day view switcher. */
.calendar-view-toggle[b-c01rw34ccs] {
    display: inline-flex;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.04));
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 16px;
    gap: 2px;
}

.view-toggle-btn[b-c01rw34ccs] {
    background: transparent;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.view-toggle-btn:hover[b-c01rw34ccs] {
    color: var(--theme-text-primary);
}

.view-toggle-active[b-c01rw34ccs] {
    background: var(--theme-accent, #3b82f6);
    color: #ffffff;
}

.view-toggle-active:hover[b-c01rw34ccs] {
    color: #ffffff;
}

/* Day view — single-column event list zoomed all the way in. Each row is the
   full event detail, full width. Empty state shows when there's nothing scheduled. */
.calendar-day-view[b-c01rw34ccs] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.day-view-event[b-c01rw34ccs] {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.04));
    border-left: 3px solid var(--theme-accent, #3b82f6);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.day-view-event:hover[b-c01rw34ccs] {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.day-view-time[b-c01rw34ccs] {
    font-weight: 600;
    color: var(--theme-text-primary);
    font-size: 0.85rem;
}

.day-view-title[b-c01rw34ccs] {
    font-size: 0.95rem;
    color: var(--theme-text-primary);
}

.day-view-cal[b-c01rw34ccs] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.day-view-empty[b-c01rw34ccs] {
    text-align: center;
    color: var(--theme-text-muted);
    padding: 32px 16px;
    margin: 0;
    font-size: 0.9rem;
}

/* Drag-to-reschedule visual cues. The chip gets a "grab" cursor when draggable;
   the drop target day cell highlights while a drag hovers over it.
   Read-only events on shared calendars don't get the grab cursor or the
   drag attribute, so they visually indicate "you can't move me". */
.event-chip[draggable="true"][b-c01rw34ccs] {
    cursor: grab;
}
.event-chip[draggable="true"]:active[b-c01rw34ccs] {
    cursor: grabbing;
}

.calendar-day-drag-hover[b-c01rw34ccs] {
    background: var(--theme-accent, #3b82f6) !important;
    background: color-mix(in srgb, var(--theme-accent, #3b82f6) 12%, transparent) !important;
    outline: 2px dashed var(--theme-accent, #3b82f6);
    outline-offset: -2px;
}

/* Week view: a single tall row across 7 day-columns. Each cell stretches to
   show every event without "+N more" truncation, with full time-of-day stamps
   visible on each chip. The 360px min-height is calibrated for ~10 events
   before vertical scroll kicks in inside the cell — enough for any realistic
   single day. */
.calendar-grid-week .calendar-day[b-c01rw34ccs] {
    min-height: 360px;
}

.calendar-grid-week .day-events[b-c01rw34ccs] {
    overflow-y: auto;
    max-height: 320px;
}

.calendar-grid-week .event-chip[b-c01rw34ccs] {
    padding: 6px 8px;
    margin-bottom: 4px;
}

.calendar-grid-week .event-time-sm[b-c01rw34ccs] {
    margin-left: auto;
    font-weight: 600;
}

/* Header in week view shows the day name AND date, with today highlighted
   so the user knows which column is "now" without scanning the cells. */
.calendar-grid-week .calendar-header-cell[b-c01rw34ccs] {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
}

.header-cell-day[b-c01rw34ccs] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-cell-date[b-c01rw34ccs] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.header-cell-today[b-c01rw34ccs] {
    color: #ffffff;
    background: var(--theme-accent, #3b82f6);
    /* Flex centering matches the working .day-number / .today-number pattern
       in month view. Bumped to 32×32 (vs the 28×28 used in month view) because
       the week header inherits a larger 1.1rem font from .header-cell-date —
       the previous 28×28 + line-height-based centering was visibly clipping
       the digit. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Dragged-chip fade — the source chip dims and slightly shrinks while in flight
   so the user sees clearly that the original is "lifted" rather than left
   behind. The browser also renders its own native drag image at the cursor;
   together those two cues read as "the event is being moved". */
.event-chip-dragging[b-c01rw34ccs] {
    opacity: 0.35;
    transform: scale(0.96);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

/* The day cell the drag originated from. A subtle dotted outline keeps the
   user oriented — they can see where the event was without the source cell
   disappearing entirely. Pairs with .calendar-day-drag-hover (the destination
   highlight) so source-and-target are both visible at once. */
.calendar-day-drag-source[b-c01rw34ccs] {
    outline: 1px dashed var(--theme-text-muted, #94a3b8);
    outline-offset: -1px;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.02));
}

/* CAL-TAB-1 (2026-10-15): "Show this week on my Home screen" opt-in (sidebar). */
.calendar-home-toggle[b-c01rw34ccs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--theme-text-primary, #1e293b);
    cursor: pointer;
}
.calendar-home-toggle input[b-c01rw34ccs] { accent-color: var(--theme-primary); }

/* ============================================
   CAL-FULL-1 (2026-10-17): sidebar as a right-hand drawer
   Josh: "we can get the calendar here full screen - the sidebar should be
   a slide out option, not the default." Closed by default; opened from the
   "Calendars" header button; backdrop click, the X, or Escape closes.
   ============================================ */
.calendar-page-container[b-c01rw34ccs] {
    max-width: min(100%, 1900px);
}

.calendar-drawer-toggle[b-c01rw34ccs] {
    position: relative;
}
.calendar-drawer-count[b-c01rw34ccs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--theme-primary);
    color: var(--theme-primary-contrast, #fff);
}

.calendar-drawer-backdrop[b-c01rw34ccs] {
    position: fixed;
    inset: var(--header-height, 56px) 0 0 0;
    z-index: 1090;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px);
    animation: calendar-drawer-fade-b-c01rw34ccs 0.18s ease-out;
}

.calendar-sidebar[b-c01rw34ccs] {
    position: fixed;
    top: var(--header-height, 56px);   /* the app bar sits above the drawer's z-index; start below it */
    right: 0;
    bottom: 0;
    z-index: 1095;
    width: min(340px, 92vw);
    padding: 16px;
    gap: 0;
    overflow-y: auto;
    background: var(--theme-surface, #fff);
    border-left: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
.calendar-sidebar--open[b-c01rw34ccs] {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.22s ease, visibility 0s;
}
/* The drawer sections sit on an opaque panel now - drop their translucent card chrome. */
.calendar-sidebar .sidebar-section[b-c01rw34ccs] {
    background: transparent;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    padding: 12px 4px;
}
.calendar-sidebar .sidebar-section + .sidebar-section[b-c01rw34ccs] {
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
}

.calendar-drawer-head[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
}
.calendar-drawer-title[b-c01rw34ccs] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

@keyframes calendar-drawer-fade-b-c01rw34ccs {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .calendar-sidebar[b-c01rw34ccs], .calendar-sidebar--open[b-c01rw34ccs] { transition: none; }
    .calendar-drawer-backdrop[b-c01rw34ccs] { animation: none; }
}

@media (max-width: 600px) {
    .calendar-sidebar[b-c01rw34ccs] {
        width: 100vw;
        border-left: 0;
    }
    .calendar-drawer-toggle span:not(.calendar-drawer-count)[b-c01rw34ccs] {
        display: none;   /* icon + count only on phones; the header is already tight */
    }
}

/* ============================================
   CAL-FULL-2 (2026-10-17): single toolbar row above the grid
   ============================================ */
.calendar-toolbar[b-c01rw34ccs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
/* The nav is now a left-aligned inline group, not a full-width space-between row. */
.calendar-toolbar .calendar-nav[b-c01rw34ccs] {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 0;
}
.calendar-toolbar .current-month[b-c01rw34ccs] {
    font-size: 1.25rem;
    min-width: 11ch;          /* "September 2026" - keeps the › from hopping month to month */
    text-align: center;
}
.calendar-toolbar .today-btn[b-c01rw34ccs] {
    margin-left: 4px;
}
.calendar-toolbar .calendar-view-toggle[b-c01rw34ccs] {
    margin-bottom: 0;
}
.calendar-main[b-c01rw34ccs] {
    min-height: 0;            /* the grid sets its own height now; no 600px floor on a short viewport */
}

@media (max-width: 600px) {
    .calendar-toolbar[b-c01rw34ccs] {
        gap: 8px;
    }
    .calendar-toolbar .calendar-nav[b-c01rw34ccs] {
        width: 100%;
        justify-content: space-between;
    }
    .calendar-toolbar .current-month[b-c01rw34ccs] {
        min-width: 0;
        flex: 1;
    }
    .calendar-toolbar .calendar-view-toggle[b-c01rw34ccs] {
        width: 100%;
        justify-content: stretch;
    }
    .calendar-toolbar .view-toggle-btn[b-c01rw34ccs] {
        flex: 1;
    }
}

/* ============================================
   CAL-FULL-3 (2026-10-17): Google-Calendar density
   Josh compared against Google Calendar at 140% zoom, where the whole month
   still fits. Two things get us there: (1) the page header shrinks to one
   line (title inline with the actions, no subtitle); (2) the grid fills the
   viewport and the six week rows SHARE that height instead of each claiming
   100px+ - cells shrink, "+N more" (already at 3 chips) absorbs overflow.
   Desktop/tablet only (>=901px); phones keep natural flow + the 600px dot grid.
   ============================================ */
.calendar-page-container .list-page-header[b-c01rw34ccs] {
    align-items: center;
    margin-bottom: 12px;
}
.calendar-page-container .list-page-title[b-c01rw34ccs] {
    font-size: 1.35rem;
}
.calendar-page-container .list-page-subtitle[b-c01rw34ccs] {
    display: none;
}
.calendar-page-container .list-page-btn-primary[b-c01rw34ccs],
.calendar-page-container .list-page-btn-secondary[b-c01rw34ccs] {
    padding: 9px 16px;
}

@media (min-width: 901px) {
    /* 56 app header + 24 container top pad + ~44 page header + 12 margin + 20+20 card pad + ~40 toolbar
       + 14 margin + 24 container bottom pad ≈ 254. Floor keeps a row usable on short viewports. */
    .calendar-main[b-c01rw34ccs] {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 214px);
        height: calc(100dvh - 214px);   /* measured 10/17: 254 left ~90px slack under the card */
        min-height: 440px;
        padding: 16px 20px 20px;
    }
    .calendar-view[b-c01rw34ccs] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .calendar-grid[b-c01rw34ccs] {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
    .calendar-header-row[b-c01rw34ccs] {
        flex: 0 0 auto;
    }
    .calendar-header-cell[b-c01rw34ccs] {
        padding: 8px 8px;
    }
    .calendar-week[b-c01rw34ccs] {
        flex: 1 1 0;
        min-height: 0;
    }
    .calendar-day[b-c01rw34ccs] {
        min-height: 0;
        padding: 6px 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .calendar-day .day-events[b-c01rw34ccs] {
        min-height: 0;
        overflow: hidden;
    }
    .day-header[b-c01rw34ccs] {
        margin-bottom: 4px;
    }
    .day-number[b-c01rw34ccs] {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
    }
    /* Week view: one tall row - let it take the whole height. */
    .calendar-grid-week .calendar-day[b-c01rw34ccs] {
        min-height: 0;
    }
    /* Day view isn't a grid; keep it scrolling inside the card instead of growing it. */
    .calendar-day-view[b-c01rw34ccs] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
}
/* /Pages/Calendar/CalendarDialog.razor.rz.scp.css */
/* Form Elements */
.form-stack[b-74h5mflder] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-74h5mflder] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.helper-text[b-74h5mflder] {
    font-size: 0.75rem;
    color: var(--theme-text-hint, #6b7280);
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
}

.divider[b-74h5mflder] {
    height: 1px;
    background: var(--theme-border, #e2e8f0);
    margin: 8px 0;
}

/* Toggle Switch */
.switch-wrapper[b-74h5mflder] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.switch[b-74h5mflder] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input[b-74h5mflder] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-74h5mflder] {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #d1d5db;
    transition: .3s;
    border-radius: 24px;
}

.slider[b-74h5mflder]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}

input:checked + .slider[b-74h5mflder] {
    background-color: var(--theme-primary, #6366f1);
}

input:checked + .slider[b-74h5mflder]:before {
    transform: translateX(20px);
}

.switch-label[b-74h5mflder] {
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */
.is-dark .divider[b-74h5mflder] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .helper-text[b-74h5mflder] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .switch-label[b-74h5mflder] {
    color: white;
}

.is-dark .slider[b-74h5mflder] {
    background-color: rgba(255, 255, 255, 0.2);
}
/* /Pages/Calendar/EventDialog.razor.rz.scp.css */
/* ============================================
   EVENT DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.event-form[b-2knx03yhvc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-form-row[b-2knx03yhvc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .event-form-row[b-2knx03yhvc] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.event-form-group[b-2knx03yhvc] {
    margin-bottom: 8px;
}

.event-form-group label[b-2knx03yhvc] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.required-indicator[b-2knx03yhvc] {
    color: #ef4444;
}

/* Form Inputs */
.event-form-input[b-2knx03yhvc],
.event-form-textarea[b-2knx03yhvc] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    font-family: inherit;
}

.event-form-textarea[b-2knx03yhvc] {
    resize: vertical;
    min-height: 80px;
}

.event-form-input:focus[b-2knx03yhvc],
.event-form-textarea:focus[b-2knx03yhvc] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

/* Character counter */
.event-char-counter[b-2knx03yhvc] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    text-align: right;
    margin-top: 2px;
}

/* Placeholder styling */
.event-form-input[b-2knx03yhvc]::placeholder,
.event-form-textarea[b-2knx03yhvc]::placeholder {
    color: #9ca3af;
}

.is-dark .event-form-input[b-2knx03yhvc]::placeholder,
.is-dark .event-form-textarea[b-2knx03yhvc]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Toggle Switch */
.event-switch-wrapper[b-2knx03yhvc] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
}

.event-switch[b-2knx03yhvc] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.event-switch input[b-2knx03yhvc] {
    opacity: 0;
    width: 0;
    height: 0;
}

.event-slider[b-2knx03yhvc] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-input-border);
    transition: 0.3s;
    border-radius: 24px;
}

.event-slider[b-2knx03yhvc]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .event-slider[b-2knx03yhvc] {
    background-color: var(--theme-accent);
}

input:checked + .event-slider[b-2knx03yhvc]:before {
    transform: translateX(20px);
}

.event-switch-text[b-2knx03yhvc] {
    display: flex;
    flex-direction: column;
}

.event-switch-label[b-2knx03yhvc] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.event-switch-hint[b-2knx03yhvc] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

/* Metadata */
.event-metadata[b-2knx03yhvc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border);
    margin-top: 4px;
}

.event-metadata span[b-2knx03yhvc] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

/* Radio group for the "this event / whole series" choice when editing a
   recurring occurrence. Visual style mirrors a vertically-stacked option list
   common in calendar apps for this exact prompt. */
.event-radio-group[b-2knx03yhvc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.04));
    border-radius: 8px;
}

.event-radio[b-2knx03yhvc] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
}

.event-radio input[type="radio"][b-2knx03yhvc] {
    accent-color: var(--theme-accent, #3b82f6);
    cursor: pointer;
}
/* /Pages/Calendar/ShareCalendarDialog.razor.rz.scp.css */
.share-dialog-body[b-xbo20xhc5e] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.share-dialog-subtitle[b-xbo20xhc5e] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
}

.share-search-row[b-xbo20xhc5e] {
    display: flex;
    gap: 10px;
}

.share-search-status[b-xbo20xhc5e] {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    padding: 6px 0;
}

.share-search-results[b-xbo20xhc5e] {
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 8px;
}

.share-search-result-row[b-xbo20xhc5e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--theme-border);
}

.share-search-result-row:last-child[b-xbo20xhc5e] {
    border-bottom: none;
}

.share-search-result-row:hover[b-xbo20xhc5e] {
    background: var(--theme-surface-hover);
}

.share-add-row[b-xbo20xhc5e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.share-user-info[b-xbo20xhc5e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.share-user-name[b-xbo20xhc5e] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.share-user-email[b-xbo20xhc5e] {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

.share-permission-select[b-xbo20xhc5e] {
    font-size: 0.8rem;
    padding: 4px 8px;
    height: auto;
    width: auto;
    min-width: 130px;
}

.share-current[b-xbo20xhc5e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-list[b-xbo20xhc5e] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.share-list-row[b-xbo20xhc5e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
}

.share-list-controls[b-xbo20xhc5e] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.share-empty-hint[b-xbo20xhc5e] {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    margin: 0;
}

.dialog-footer-row[b-xbo20xhc5e] {
    display: flex;
    align-items: center;
}
/* /Pages/Checkout/Cancel.razor.rz.scp.css */
.cancel-page[b-hnk4hojb41] { max-width: 700px; margin: 80px auto; padding: 0 1rem; }
    .cancel-container[b-hnk4hojb41] {
        text-align: center;
        padding: 60px 40px;
        background: white;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    }
    .cancel-icon[b-hnk4hojb41] { color: #f59e0b; margin-bottom: 30px; }
    .cancel-icon svg[b-hnk4hojb41] { width: 96px; height: 96px; fill: currentColor; }
    .cancel-title[b-hnk4hojb41] { font-size: 2.5rem; font-weight: 800; color: #2d3748; margin-bottom: 20px; }
    .cancel-message[b-hnk4hojb41] { font-size: 1.2rem; color: #718096; line-height: 1.7; margin-bottom: 40px; }
    .info-box[b-hnk4hojb41] { background: #fef3c7; border: 2px solid #f59e0b; border-radius: 12px; padding: 25px; margin: 30px 0; text-align: left; }
    .info-box h4[b-hnk4hojb41] { color: #92400e; margin-bottom: 15px; font-weight: 700; }
    .info-box p[b-hnk4hojb41] { color: #78350f; margin: 0; }
    .btn-row[b-hnk4hojb41] { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; }
    .btn[b-hnk4hojb41] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 1.5rem; height: 56px; font-size: 1.1rem; font-weight: 600; border-radius: 10px; text-decoration: none; cursor: pointer; transition: all 0.2s ease; }
    .btn svg[b-hnk4hojb41] { fill: currentColor; width: 20px; height: 20px; }
    .btn-outline[b-hnk4hojb41] { background: transparent; border: 2px solid var(--theme-primary, #7c3aed); color: var(--theme-primary-ink, var(--theme-primary, #7c3aed)); }
    .btn-outline:hover[b-hnk4hojb41] { background: rgba(124, 58, 237, 0.1); }
    .btn-warning[b-hnk4hojb41] { background: #f59e0b; border: none; color: white; }
    .btn-warning:hover[b-hnk4hojb41] { background: #d97706; }
    .divider[b-hnk4hojb41] { border: none; border-top: 1px solid #e2e8f0; margin: 1.5rem 0; }
    .help-text[b-hnk4hojb41] { color: #718096; font-size: 0.95rem; }
    .help-text a[b-hnk4hojb41] { color: #f59e0b; text-decoration: none; }
    .help-text a:hover[b-hnk4hojb41] { text-decoration: underline; }
/* /Pages/Cipher/Cipher.razor.rz.scp.css */
/* Cipher Word Game Styles */

.cipher-page[b-z3x22qqmnb] {
    min-height: calc(100vh - 56px);
    padding: 20px;
    display: flex;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    /* Prevent double-tap zoom on mobile */
    touch-action: manipulation;
}

.cipher-container[b-z3x22qqmnb] {
    max-width: 500px;
    width: 100%;
}

/* Header */
.cipher-header[b-z3x22qqmnb] {
    text-align: center;
    margin-bottom: 16px;
}

.cipher-header h1[b-z3x22qqmnb] {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cipher-subtitle[b-z3x22qqmnb] {
    color: #64748b;
    margin: 8px 0 0;
    font-size: 1rem;
}

/* ==================== Streak Banner ==================== */
.streak-banner[b-z3x22qqmnb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 12px;
    margin-bottom: 16px;
    animation: streakSlideIn-b-z3x22qqmnb 0.5s ease;
    flex-wrap: wrap;
}

@keyframes streakSlideIn-b-z3x22qqmnb {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.streak-fire[b-z3x22qqmnb] {
    font-size: 1.5rem;
    animation: fireFlicker-b-z3x22qqmnb 1.5s ease-in-out infinite;
}

@keyframes fireFlicker-b-z3x22qqmnb {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.streak-count[b-z3x22qqmnb] {
    font-weight: 700;
    font-size: 1rem;
}

.streak-warning[b-z3x22qqmnb] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    animation: warningPulse-b-z3x22qqmnb 2s ease-in-out infinite;
}

@keyframes warningPulse-b-z3x22qqmnb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Streak Tier Styles */
.streak-starting[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.1), rgba(var(--theme-accent-rgb), 0.1));
    border: 1px solid rgba(var(--theme-primary-rgb), 0.3);
}

.streak-starting .streak-count[b-z3x22qqmnb] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.streak-starting .streak-warning[b-z3x22qqmnb] {
    background: rgba(234, 179, 8, 0.2);
    color: #ca8a04;
}

.streak-warm[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.15), rgba(245, 158, 11, 0.15));
    border: 1px solid rgba(234, 179, 8, 0.4);
}

.streak-warm .streak-count[b-z3x22qqmnb] {
    color: #b45309;
}

.streak-warm .streak-warning[b-z3x22qqmnb] {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.streak-hot[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(249, 115, 22, 0.15));
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.streak-hot .streak-count[b-z3x22qqmnb] {
    color: #dc2626;
}

.streak-hot .streak-warning[b-z3x22qqmnb] {
    background: rgba(255, 255, 255, 0.2);
    color: #dc2626;
}

.streak-epic[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.2), rgba(236, 72, 153, 0.2));
    border: 1px solid rgba(var(--theme-accent-rgb), 0.5);
}

.streak-epic .streak-count[b-z3x22qqmnb] {
    background: linear-gradient(135deg, var(--theme-accent), #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.streak-epic .streak-warning[b-z3x22qqmnb] {
    background: rgba(255, 255, 255, 0.3);
    color: var(--theme-accent);
}

.streak-legendary[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.25), rgba(249, 115, 22, 0.25));
    border: 2px solid rgba(234, 179, 8, 0.6);
    box-shadow: 0 4px 20px rgba(234, 179, 8, 0.3);
}

.streak-legendary .streak-fire[b-z3x22qqmnb] {
    animation: fireFlicker-b-z3x22qqmnb 0.8s ease-in-out infinite;
}

.streak-legendary .streak-count[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #eab308, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem;
}

.streak-legendary .streak-warning[b-z3x22qqmnb] {
    background: rgba(220, 38, 38, 0.3);
    color: #fef2f2;
}

/* Dark Theme - Streak Banner */
.theme-space .streak-starting[b-z3x22qqmnb],
.theme-winter .streak-starting[b-z3x22qqmnb],
.theme-nature .streak-starting[b-z3x22qqmnb],
.theme-ocean .streak-starting[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.2), rgba(var(--theme-accent-rgb), 0.2));
    border-color: rgba(var(--theme-primary-rgb), 0.4);
}

.theme-space .streak-starting .streak-count[b-z3x22qqmnb],
.theme-winter .streak-starting .streak-count[b-z3x22qqmnb],
.theme-nature .streak-starting .streak-count[b-z3x22qqmnb],
.theme-ocean .streak-starting .streak-count[b-z3x22qqmnb] {
    color: #a5b4fc;
}

.theme-space .streak-warm[b-z3x22qqmnb],
.theme-winter .streak-warm[b-z3x22qqmnb],
.theme-nature .streak-warm[b-z3x22qqmnb],
.theme-ocean .streak-warm[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(245, 158, 11, 0.2));
}

.theme-space .streak-warm .streak-count[b-z3x22qqmnb],
.theme-winter .streak-warm .streak-count[b-z3x22qqmnb],
.theme-nature .streak-warm .streak-count[b-z3x22qqmnb],
.theme-ocean .streak-warm .streak-count[b-z3x22qqmnb] {
    color: #fbbf24;
}

.theme-space .streak-hot[b-z3x22qqmnb],
.theme-winter .streak-hot[b-z3x22qqmnb],
.theme-nature .streak-hot[b-z3x22qqmnb],
.theme-ocean .streak-hot[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.2));
}

.theme-space .streak-hot .streak-count[b-z3x22qqmnb],
.theme-winter .streak-hot .streak-count[b-z3x22qqmnb],
.theme-nature .streak-hot .streak-count[b-z3x22qqmnb],
.theme-ocean .streak-hot .streak-count[b-z3x22qqmnb] {
    color: #f87171;
}

.theme-space .streak-epic[b-z3x22qqmnb],
.theme-winter .streak-epic[b-z3x22qqmnb],
.theme-nature .streak-epic[b-z3x22qqmnb],
.theme-ocean .streak-epic[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.25), rgba(236, 72, 153, 0.25));
}

.theme-space .streak-legendary[b-z3x22qqmnb],
.theme-winter .streak-legendary[b-z3x22qqmnb],
.theme-nature .streak-legendary[b-z3x22qqmnb],
.theme-ocean .streak-legendary[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(249, 115, 22, 0.3));
    box-shadow: 0 4px 24px rgba(234, 179, 8, 0.4);
}

/* ==================== Streak Milestone Celebration ==================== */
.streak-milestone-overlay[b-z3x22qqmnb] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn-b-z3x22qqmnb 0.3s ease;
    backdrop-filter: blur(12px);
}

.streak-milestone-panel[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 28px;
    padding: 40px 32px;
    max-width: 380px;
    width: 90%;
    position: relative;
    animation: milestonePopIn-b-z3x22qqmnb 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 30px 100px transparent, 
                0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
}

@keyframes milestonePopIn-b-z3x22qqmnb {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    60% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.milestone-fireworks[b-z3x22qqmnb] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.firework[b-z3x22qqmnb] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    animation: fireworkBurst-b-z3x22qqmnb 2s ease-out forwards;
    animation-delay: calc(var(--i) * 0.05s);
}

.firework:nth-child(5n+1)[b-z3x22qqmnb] {
    background: #f59e0b;
    left: calc(20% + var(--i) * 2%);
    top: 30%;
}

.firework:nth-child(5n+2)[b-z3x22qqmnb] {
    background: #ef4444;
    left: calc(60% + var(--i) * 1%);
    top: 20%;
}

.firework:nth-child(5n+3)[b-z3x22qqmnb] {
    background: var(--theme-accent);
    left: calc(40% - var(--i) * 1%);
    top: 40%;
}

.firework:nth-child(5n+4)[b-z3x22qqmnb] {
    background: #22c55e;
    left: calc(80% - var(--i) * 2%);
    top: 35%;
}

.firework:nth-child(5n+5)[b-z3x22qqmnb] {
    background: #ec4899;
    left: calc(30% + var(--i) * 1.5%);
    top: 25%;
}

@keyframes fireworkBurst-b-z3x22qqmnb {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 1;
    }
    20% {
        opacity: 1;
        transform: scale(1.5);
    }
    100% {
        transform: translate(calc((var(--i) - 15) * 10px), calc(var(--i) * 8px)) scale(0);
        opacity: 0;
    }
}

.milestone-content[b-z3x22qqmnb] {
    position: relative;
    z-index: 1;
    text-align: center;
}

.milestone-emoji[b-z3x22qqmnb] {
    font-size: 4rem;
    margin-bottom: 12px;
    animation: emojiPulse-b-z3x22qqmnb 1s ease-in-out infinite;
}

@keyframes emojiPulse-b-z3x22qqmnb {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    75% { transform: scale(1.1) rotate(5deg); }
}

.streak-milestone-panel h2[b-z3x22qqmnb] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 8px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.milestone-streak[b-z3x22qqmnb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 16px 0 8px;
}

.milestone-message[b-z3x22qqmnb] {
    font-size: 1rem;
    color: #64748b;
    margin: 0 0 24px;
    line-height: 1.5;
}

/* Dark Theme - Milestone */
.theme-space .streak-milestone-panel[b-z3x22qqmnb],
.theme-winter .streak-milestone-panel[b-z3x22qqmnb],
.theme-nature .streak-milestone-panel[b-z3x22qqmnb],
.theme-ocean .streak-milestone-panel[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    box-shadow: 0 30px 100px transparent, 
                0 0 0 1px rgba(var(--theme-primary-rgb), 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-space .milestone-streak[b-z3x22qqmnb],
.theme-winter .milestone-streak[b-z3x22qqmnb],
.theme-nature .milestone-streak[b-z3x22qqmnb],
.theme-ocean .milestone-streak[b-z3x22qqmnb] {
    color: white;
}

.theme-space .milestone-message[b-z3x22qqmnb],
.theme-winter .milestone-message[b-z3x22qqmnb],
.theme-nature .milestone-message[b-z3x22qqmnb],
.theme-ocean .milestone-message[b-z3x22qqmnb] {
    color: #94a3b8;
}

/* Loading State */
.cipher-loading[b-z3x22qqmnb] {
    text-align: center;
    padding: 60px 20px;
}

.loading-spinner[b-z3x22qqmnb] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin-b-z3x22qqmnb 1s linear infinite;
}

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

/* Confetti Animation */
.confetti-container[b-z3x22qqmnb] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1000;
}

.confetti[b-z3x22qqmnb] {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    opacity: 0;
    animation: confetti-fall-b-z3x22qqmnb 3s ease-out forwards;
    animation-delay: calc(var(--i) * 0.05s);
}

/* Randomize confetti properties using CSS custom property --i */
.confetti:nth-child(5n+1)[b-z3x22qqmnb] {
    background: var(--theme-primary);
    left: calc(var(--i) * 2%);
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.confetti:nth-child(5n+2)[b-z3x22qqmnb] {
    background: #22c55e;
    left: calc(var(--i) * 2% + 5%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.confetti:nth-child(5n+3)[b-z3x22qqmnb] {
    background: #eab308;
    left: calc(var(--i) * 2% + 10%);
    width: 10px;
    height: 6px;
    border-radius: 1px;
}

.confetti:nth-child(5n+4)[b-z3x22qqmnb] {
    background: #ec4899;
    left: calc(var(--i) * 2% + 15%);
    width: 6px;
    height: 10px;
    border-radius: 2px;
}

.confetti:nth-child(5n+5)[b-z3x22qqmnb] {
    background: var(--theme-accent);
    left: calc(var(--i) * 2% + 20%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

@keyframes confetti-fall-b-z3x22qqmnb {
    0% {
        top: -10px;
        opacity: 1;
        transform: translateX(0) rotateZ(0deg);
    }
    25% {
        opacity: 1;
        transform: translateX(25px) rotateZ(90deg);
    }
    50% {
        opacity: 1;
        transform: translateX(-15px) rotateZ(180deg);
    }
    75% {
        opacity: 0.8;
        transform: translateX(20px) rotateZ(270deg);
    }
    100% {
        top: 100vh;
        opacity: 0;
        transform: translateX(-10px) rotateZ(360deg);
    }
}

/* Vary the fall speed and path for more natural look */
.confetti:nth-child(3n)[b-z3x22qqmnb] {
    animation-duration: 3.5s;
}

.confetti:nth-child(3n+1)[b-z3x22qqmnb] {
    animation-duration: 2.8s;
}

.confetti:nth-child(3n+2)[b-z3x22qqmnb] {
    animation-duration: 3.2s;
}

.confetti:nth-child(7n)[b-z3x22qqmnb] {
    animation-timing-function: ease-in-out;
}

.confetti:nth-child(11n)[b-z3x22qqmnb] {
    animation-timing-function: linear;
}

/* Game Board */
.cipher-board[b-z3x22qqmnb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.cipher-row[b-z3x22qqmnb] {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.cipher-tile[b-z3x22qqmnb] {
    width: 58px;
    height: 58px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
    background: white;
    transition: transform 0.1s ease, border-color 0.15s ease;
    /* Prevent double-tap zoom on mobile */
    touch-action: manipulation;
}

.cipher-tile.filled[b-z3x22qqmnb] {
    border-color: #9ca3af;
    animation: pop-b-z3x22qqmnb 0.1s ease;
}

@keyframes pop-b-z3x22qqmnb {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Revealed tiles with flip animation */
.cipher-tile.revealed[b-z3x22qqmnb] {
    animation: flip-b-z3x22qqmnb 0.5s ease forwards;
    color: white;
    border-color: transparent !important;
}

@keyframes flip-b-z3x22qqmnb {
    0% {
        transform: rotateX(0);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0);
    }
}

.cipher-tile.correct[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    border-color: transparent !important;
}

.cipher-tile.present[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #eab308, #ca8a04) !important;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.4);
    border-color: transparent !important;
}

.cipher-tile.absent[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    border-color: transparent !important;
}

/* Current row highlight */
.cipher-row.current .cipher-tile[b-z3x22qqmnb] {
    border-color: #a5b4fc;
}

/* Win animation */
.cipher-row.submitted .cipher-tile.correct[b-z3x22qqmnb] {
    animation: flip-b-z3x22qqmnb 0.5s ease forwards, bounce-b-z3x22qqmnb 0.5s ease 0.6s;
}

@keyframes bounce-b-z3x22qqmnb {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Letter Hints Panel */
.letter-hints[b-z3x22qqmnb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.08), rgba(var(--theme-accent-rgb), 0.08));
    border-radius: 12px;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.hint-group[b-z3x22qqmnb] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.hint-label[b-z3x22qqmnb] {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 120px;
}

.hint-correct .hint-label[b-z3x22qqmnb] {
    color: #16a34a;
}

.hint-present .hint-label[b-z3x22qqmnb] {
    color: #ca8a04;
}

.hint-letters[b-z3x22qqmnb] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.hint-letter[b-z3x22qqmnb] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 6px;
    animation: hintPop-b-z3x22qqmnb 0.3s ease;
}

@keyframes hintPop-b-z3x22qqmnb {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.hint-correct .hint-letter[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.hint-present .hint-letter[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

/* Error Message */
.cipher-error[b-z3x22qqmnb] {
    background: #fef2f2;
    color: #dc2626;
    padding: 12px 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 16px;
    font-weight: 600;
    border: 1px solid #fecaca;
}

.cipher-error.shake[b-z3x22qqmnb] {
    animation: shake-b-z3x22qqmnb 0.5s ease;
}

@keyframes shake-b-z3x22qqmnb {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Report Missing Word Button */
.cipher-error[b-z3x22qqmnb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.report-word-btn[b-z3x22qqmnb] {
    background: transparent;
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #dc2626;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.report-word-btn:hover:not(:disabled)[b-z3x22qqmnb] {
    background: rgba(220, 38, 38, 0.1);
    border-color: #dc2626;
}

.report-word-btn:disabled[b-z3x22qqmnb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark Theme - Report Button */
.theme-space .report-word-btn[b-z3x22qqmnb],
.theme-winter .report-word-btn[b-z3x22qqmnb],
.theme-nature .report-word-btn[b-z3x22qqmnb],
.theme-ocean .report-word-btn[b-z3x22qqmnb] {
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.3);
}

.theme-space .report-word-btn:hover:not(:disabled)[b-z3x22qqmnb],
.theme-winter .report-word-btn:hover:not(:disabled)[b-z3x22qqmnb],
.theme-nature .report-word-btn:hover:not(:disabled)[b-z3x22qqmnb],
.theme-ocean .report-word-btn:hover:not(:disabled)[b-z3x22qqmnb] {
    background: rgba(252, 165, 165, 0.15);
    border-color: #fca5a5;
}

/* Keyboard */
.cipher-keyboard[b-z3x22qqmnb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

.keyboard-row[b-z3x22qqmnb] {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.key[b-z3x22qqmnb] {
    min-width: 36px;
    height: 52px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(to bottom, #f8fafc, #e2e8f0);
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Prevent double-tap zoom and ensure fast tap response on mobile */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.key:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.key:active[b-z3x22qqmnb] {
    transform: translateY(0);
}

.key-wide[b-z3x22qqmnb] {
    min-width: 60px;
    font-size: 0.75rem;
}

/* Key state indicator icons */
.key-indicator[b-z3x22qqmnb] {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1;
}

.key-indicator-correct[b-z3x22qqmnb] {
    color: #166534;
}

.key-indicator-present[b-z3x22qqmnb] {
    color: #854d0e;
}

.key-correct[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.key-correct .key-indicator-correct[b-z3x22qqmnb] {
    color: rgba(255, 255, 255, 0.9);
}

.key-present[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

.key-present .key-indicator-present[b-z3x22qqmnb] {
    color: rgba(255, 255, 255, 0.9);
}

.key-absent[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: #9ca3af;
    opacity: 0.6;
    box-shadow: none;
}

/* Game Result */
.cipher-result[b-z3x22qqmnb] {
    text-align: center;
    padding: 20px 24px;
    border-radius: 16px;
    margin-bottom: 16px;
    animation: fadeIn-b-z3x22qqmnb 0.5s ease;
}

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

.cipher-win[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 2px solid #86efac;
}

.cipher-lose[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #fef9c3, #fef08a);
    border: 2px solid #fde047;
}

.result-icon[b-z3x22qqmnb] {
    font-size: 2.5rem;
    margin-bottom: 4px;
    animation: resultBounce-b-z3x22qqmnb 0.6s ease;
}

@keyframes resultBounce-b-z3x22qqmnb {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.cipher-result h2[b-z3x22qqmnb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
}

.cipher-result p[b-z3x22qqmnb] {
    color: #475569;
    margin: 0 0 4px;
}

.time-display[b-z3x22qqmnb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
    margin-top: 4px !important;
}

/* Word Definition */
.word-definition[b-z3x22qqmnb] {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
    text-align: left;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.definition-header[b-z3x22qqmnb] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.definition-word[b-z3x22qqmnb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.definition-phonetic[b-z3x22qqmnb] {
    font-size: 0.95rem;
    color: #64748b;
    font-style: italic;
}

.definition-meaning[b-z3x22qqmnb] {
    margin-bottom: 12px;
}

.definition-meaning:last-child[b-z3x22qqmnb] {
    margin-bottom: 0;
}

.part-of-speech[b-z3x22qqmnb] {
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-bottom: 8px;
    text-transform: lowercase;
}

.definitions-list[b-z3x22qqmnb] {
    margin: 0 0 0 20px;
    padding: 0;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.5;
}

.definitions-list li[b-z3x22qqmnb] {
    margin-bottom: 4px;
}

.definitions-list li:last-child[b-z3x22qqmnb] {
    margin-bottom: 0;
}

.definition-example[b-z3x22qqmnb] {
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
    margin: 8px 0 0 20px;
    padding-left: 12px;
    border-left: 2px solid #d1d5db;
}

/* Button */
.cipher-btn[b-z3x22qqmnb] {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
    /* Prevent double-tap zoom on mobile */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.cipher-btn-primary[b-z3x22qqmnb] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.4);
}

.cipher-btn-primary:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb), 0.5);
}

/* Result Actions */
.result-actions[b-z3x22qqmnb] {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
}

.cipher-btn-share[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
}

.cipher-btn-share:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.cipher-btn-share svg[b-z3x22qqmnb] {
    flex-shrink: 0;
}

/* Share Panel */
.share-panel[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    padding: 28px 32px 32px;
    max-width: 400px;
    width: 90%;
    position: relative;
    animation: slideUp-b-z3x22qqmnb 0.3s ease;
    box-shadow: 0 25px 80px transparent, 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.share-panel h2[b-z3x22qqmnb] {
    text-align: center;
    margin: 0 0 20px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
}

.share-preview[b-z3x22qqmnb] {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.share-text[b-z3x22qqmnb] {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: #334155;
    text-align: center;
}

.share-buttons[b-z3x22qqmnb] {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.share-btn[b-z3x22qqmnb] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.share-btn svg[b-z3x22qqmnb] {
    flex-shrink: 0;
}

.share-btn-copy[b-z3x22qqmnb] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3);
}

.share-btn-copy:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb), 0.4);
}

.share-btn-copy.copied[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.share-btn-twitter[b-z3x22qqmnb] {
    background: #000000;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.share-btn-twitter:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px transparent;
}

.share-btn-native[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.share-btn-native:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.share-btn-link[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3);
}

.share-btn-link:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(100, 116, 139, 0.4);
}

.share-btn-link.copied[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.share-tagline[b-z3x22qqmnb] {
    text-align: center;
    margin: 20px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.share-tagline strong[b-z3x22qqmnb] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* Guest Sign-in Prompt */
.guest-prompt[b-z3x22qqmnb] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.1), rgba(var(--theme-accent-rgb), 0.1));
    border: 1px solid rgba(var(--theme-primary-rgb), 0.25);
    border-radius: 14px;
    animation: fadeIn-b-z3x22qqmnb 0.5s ease;
}

.guest-prompt-icon[b-z3x22qqmnb] {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.guest-prompt-content[b-z3x22qqmnb] {
    flex: 1;
    min-width: 0;
}

.guest-prompt-title[b-z3x22qqmnb] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
    margin: 0 0 2px;
}

.guest-prompt-text[b-z3x22qqmnb] {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.guest-prompt-btn[b-z3x22qqmnb] {
    flex-shrink: 0;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.3);
}

.guest-prompt-btn:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--theme-primary-rgb), 0.4);
}

/* Dark theme - Guest Prompt */
.theme-space .guest-prompt[b-z3x22qqmnb],
.theme-winter .guest-prompt[b-z3x22qqmnb],
.theme-nature .guest-prompt[b-z3x22qqmnb],
.theme-ocean .guest-prompt[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.15), rgba(var(--theme-accent-rgb), 0.15));
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

.theme-space .guest-prompt-title[b-z3x22qqmnb],
.theme-winter .guest-prompt-title[b-z3x22qqmnb],
.theme-nature .guest-prompt-title[b-z3x22qqmnb],
.theme-ocean .guest-prompt-title[b-z3x22qqmnb] {
    color: white;
}

.theme-space .guest-prompt-text[b-z3x22qqmnb],
.theme-winter .guest-prompt-text[b-z3x22qqmnb],
.theme-nature .guest-prompt-text[b-z3x22qqmnb],
.theme-ocean .guest-prompt-text[b-z3x22qqmnb] {
    color: #94a3b8;
}



/* Stats Overlay */
.cipher-stats-overlay[b-z3x22qqmnb] {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-z3x22qqmnb 0.2s ease;
    backdrop-filter: blur(8px);
}

.cipher-stats-panel[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    padding: 28px 24px 32px;
    max-width: 380px;
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    position: relative;
    animation: slideUp-b-z3x22qqmnb 0.3s ease;
    box-shadow: 0 25px 80px transparent, 0 0 0 1px rgba(255, 255, 255, 0.1);
}

@keyframes slideUp-b-z3x22qqmnb {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.stats-close[b-z3x22qqmnb] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-close:hover[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
    color: #1e293b;
    transform: rotate(90deg);
}

.cipher-stats-panel h2[b-z3x22qqmnb] {
    text-align: center;
    margin: 0 0 16px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
}

.cipher-stats-panel h3[b-z3x22qqmnb] {
    text-align: center;
    margin: 18px 0 12px;
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Stats Grid */
.stats-grid[b-z3x22qqmnb] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}

.stat-item[b-z3x22qqmnb] {
    padding: 12px 6px;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-item:hover[b-z3x22qqmnb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.15);
}

.stat-value[b-z3x22qqmnb] {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label[b-z3x22qqmnb] {
    font-size: 0.6rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* Guess Distribution */
.guess-distribution[b-z3x22qqmnb] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 4px;
}

.distribution-row[b-z3x22qqmnb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.guess-number[b-z3x22qqmnb] {
    width: 16px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
}

.distribution-bar[b-z3x22qqmnb] {
    background: linear-gradient(90deg, #94a3b8, #64748b);
    color: white;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 28px;
    text-align: right;
    transition: all 0.5s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.distribution-bar.current[b-z3x22qqmnb] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
    animation: barPulse-b-z3x22qqmnb 2s ease infinite;
}

@keyframes barPulse-b-z3x22qqmnb {
    0%, 100% { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(34, 197, 94, 0.6); }
}

.time-stats[b-z3x22qqmnb] {
    margin-top: 16px;
    padding: 14px;
    border-radius: 12px;
    background: linear-gradient(145deg, #f8fafc, #f1f5f9);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.1);
    text-align: center;
}

.time-stats p[b-z3x22qqmnb] {
    margin: 4px 0;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
}

.time-stats p:first-child[b-z3x22qqmnb] {
    color: var(--theme-primary-ink, var(--theme-primary));
    font-weight: 600;
}

/* Stats Share Button */
.stats-share-btn[b-z3x22qqmnb] {
    width: 100%;
    margin-top: 20px;
    justify-content: center;
}

/* Dark Theme Styles */
.theme-space .cipher-page[b-z3x22qqmnb],
.theme-winter .cipher-page[b-z3x22qqmnb],
.theme-nature .cipher-page[b-z3x22qqmnb],
.theme-ocean .cipher-page[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.theme-space .cipher-header h1[b-z3x22qqmnb],
.theme-winter .cipher-header h1[b-z3x22qqmnb],
.theme-nature .cipher-header h1[b-z3x22qqmnb],
.theme-ocean .cipher-header h1[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
}

.theme-space .cipher-subtitle[b-z3x22qqmnb],
.theme-winter .cipher-subtitle[b-z3x22qqmnb],
.theme-nature .cipher-subtitle[b-z3x22qqmnb],
.theme-ocean .cipher-subtitle[b-z3x22qqmnb] {
    color: #94a3b8;
}

/* Dark theme - Letter Hints */
.theme-space .letter-hints[b-z3x22qqmnb],
.theme-winter .letter-hints[b-z3x22qqmnb],
.theme-nature .letter-hints[b-z3x22qqmnb],
.theme-ocean .letter-hints[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.15), rgba(var(--theme-accent-rgb), 0.15));
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

.theme-space .hint-correct .hint-label[b-z3x22qqmnb],
.theme-winter .hint-correct .hint-label[b-z3x22qqmnb],
.theme-nature .hint-correct .hint-label[b-z3x22qqmnb],
.theme-ocean .hint-correct .hint-label[b-z3x22qqmnb] {
    color: #4ade80;
}

.theme-space .hint-present .hint-label[b-z3x22qqmnb],
.theme-winter .hint-present .hint-label[b-z3x22qqmnb],
.theme-nature .hint-present .hint-label[b-z3x22qqmnb],
.theme-ocean .hint-present .hint-label[b-z3x22qqmnb] {
    color: #fbbf24;
}

.theme-space .cipher-tile[b-z3x22qqmnb],
.theme-winter .cipher-tile[b-z3x22qqmnb],
.theme-nature .cipher-tile[b-z3x22qqmnb],
.theme-ocean .cipher-tile[b-z3x22qqmnb] {
    background: #1e293b;
    border-color: #475569;
    color: white;
}

/* Dark theme - Tile colors (must override base tile styles) */
.theme-space .cipher-tile.correct[b-z3x22qqmnb],
.theme-winter .cipher-tile.correct[b-z3x22qqmnb],
.theme-nature .cipher-tile.correct[b-z3x22qqmnb],
.theme-ocean .cipher-tile.correct[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border-color: #22c55e !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5);
}

.theme-space .cipher-tile.present[b-z3x22qqmnb],
.theme-winter .cipher-tile.present[b-z3x22qqmnb],
.theme-nature .cipher-tile.present[b-z3x22qqmnb],
.theme-ocean .cipher-tile.present[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #eab308, #ca8a04) !important;
    border-color: #eab308 !important;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.5);
}

.theme-space .cipher-tile.absent[b-z3x22qqmnb],
.theme-winter .cipher-tile.absent[b-z3x22qqmnb],
.theme-nature .cipher-tile.absent[b-z3x22qqmnb],
.theme-ocean .cipher-tile.absent[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #475569, #334155) !important;
    border-color: #475569 !important;
    box-shadow: 0 2px 8px rgba(71, 85, 105, 0.3);
}

.theme-space .cipher-row.current .cipher-tile[b-z3x22qqmnb],
.theme-winter .cipher-row.current .cipher-tile[b-z3x22qqmnb],
.theme-nature .cipher-row.current .cipher-tile[b-z3x22qqmnb],
.theme-ocean .cipher-row.current .cipher-tile[b-z3x22qqmnb] {
    border-color: #818cf8;
}

.theme-space .key[b-z3x22qqmnb],
.theme-winter .key[b-z3x22qqmnb],
.theme-nature .key[b-z3x22qqmnb],
.theme-ocean .key[b-z3x22qqmnb] {
    background: linear-gradient(to bottom, #334155, #1e293b);
    color: white;
}

.theme-space .key-correct[b-z3x22qqmnb],
.theme-winter .key-correct[b-z3x22qqmnb],
.theme-nature .key-correct[b-z3x22qqmnb],
.theme-ocean .key-correct[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.theme-space .key-present[b-z3x22qqmnb],
.theme-winter .key-present[b-z3x22qqmnb],
.theme-nature .key-present[b-z3x22qqmnb],
.theme-ocean .key-present[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: white;
    box-shadow: 0 2px 8px rgba(234, 179, 8, 0.4);
}

.theme-space .key-absent[b-z3x22qqmnb],
.theme-winter .key-absent[b-z3x22qqmnb],
.theme-nature .key-absent[b-z3x22qqmnb],
.theme-ocean .key-absent[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #374151, #1f2937);
    color: #6b7280;
    opacity: 0.7;
}

/* Dark theme - Key indicators */
.theme-space .key-indicator-correct[b-z3x22qqmnb],
.theme-winter .key-indicator-correct[b-z3x22qqmnb],
.theme-nature .key-indicator-correct[b-z3x22qqmnb],
.theme-ocean .key-indicator-correct[b-z3x22qqmnb] {
    color: #4ade80;
}

.theme-space .key-indicator-present[b-z3x22qqmnb],
.theme-winter .key-indicator-present[b-z3x22qqmnb],
.theme-nature .key-indicator-present[b-z3x22qqmnb],
.theme-ocean .key-indicator-present[b-z3x22qqmnb] {
    color: #fbbf24;
}

.theme-space .cipher-stats-panel[b-z3x22qqmnb],
.theme-winter .cipher-stats-panel[b-z3x22qqmnb],
.theme-nature .cipher-stats-panel[b-z3x22qqmnb],
.theme-ocean .cipher-stats-panel[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    color: white;
}

.theme-space .cipher-stats-panel h2[b-z3x22qqmnb],
.theme-winter .cipher-stats-panel h2[b-z3x22qqmnb],
.theme-nature .cipher-stats-panel h2[b-z3x22qqmnb],
.theme-ocean .cipher-stats-panel h2[b-z3x22qqmnb] {
    color: white;
}

.theme-space .cipher-stats-panel h3[b-z3x22qqmnb],
.theme-winter .cipher-stats-panel h3[b-z3x22qqmnb],
.theme-nature .cipher-stats-panel h3[b-z3x22qqmnb],
.theme-ocean .cipher-stats-panel h3[b-z3x22qqmnb] {
    color: #94a3b8;
}

.theme-space .stat-item[b-z3x22qqmnb],
.theme-winter .stat-item[b-z3x22qqmnb],
.theme-nature .stat-item[b-z3x22qqmnb],
.theme-ocean .stat-item[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #334155, #1e293b);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
}

.theme-space .stat-item:hover[b-z3x22qqmnb],
.theme-winter .stat-item:hover[b-z3x22qqmnb],
.theme-nature .stat-item:hover[b-z3x22qqmnb],
.theme-ocean .stat-item:hover[b-z3x22qqmnb] {
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb), 0.25);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

.theme-space .stat-value[b-z3x22qqmnb],
.theme-winter .stat-value[b-z3x22qqmnb],
.theme-nature .stat-value[b-z3x22qqmnb],
.theme-ocean .stat-value[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #818cf8, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-space .stat-label[b-z3x22qqmnb],
.theme-winter .stat-label[b-z3x22qqmnb],
.theme-nature .stat-label[b-z3x22qqmnb],
.theme-ocean .stat-label[b-z3x22qqmnb] {
    color: #94a3b8;
}

.theme-space .guess-number[b-z3x22qqmnb],
.theme-winter .guess-number[b-z3x22qqmnb],
.theme-nature .guess-number[b-z3x22qqmnb],
.theme-ocean .guess-number[b-z3x22qqmnb] {
    color: #94a3b8;
}

.theme-space .distribution-bar[b-z3x22qqmnb],
.theme-winter .distribution-bar[b-z3x22qqmnb],
.theme-nature .distribution-bar[b-z3x22qqmnb],
.theme-ocean .distribution-bar[b-z3x22qqmnb] {
    background: linear-gradient(90deg, #475569, #334155);
}

.theme-space .distribution-bar.current[b-z3x22qqmnb],
.theme-winter .distribution-bar.current[b-z3x22qqmnb],
.theme-nature .distribution-bar.current[b-z3x22qqmnb],
.theme-ocean .distribution-bar.current[b-z3x22qqmnb] {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.theme-space .stats-close[b-z3x22qqmnb],
.theme-winter .stats-close[b-z3x22qqmnb],
.theme-nature .stats-close[b-z3x22qqmnb],
.theme-ocean .stats-close[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #475569, #334155);
    color: #94a3b8;
}

.theme-space .stats-close:hover[b-z3x22qqmnb],
.theme-winter .stats-close:hover[b-z3x22qqmnb],
.theme-nature .stats-close:hover[b-z3x22qqmnb],
.theme-ocean .stats-close:hover[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #64748b, #475569);
    color: white;
}

.theme-space .time-stats[b-z3x22qqmnb],
.theme-winter .time-stats[b-z3x22qqmnb],
.theme-nature .time-stats[b-z3x22qqmnb],
.theme-ocean .time-stats[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #334155, #1e293b);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
}

.theme-space .time-stats p[b-z3x22qqmnb],
.theme-winter .time-stats p[b-z3x22qqmnb],
.theme-nature .time-stats p[b-z3x22qqmnb],
.theme-ocean .time-stats p[b-z3x22qqmnb] {
    color: #94a3b8;
}

.theme-space .time-stats p:first-child[b-z3x22qqmnb],
.theme-winter .time-stats p:first-child[b-z3x22qqmnb],
.theme-nature .time-stats p:first-child[b-z3x22qqmnb],
.theme-ocean .time-stats p:first-child[b-z3x22qqmnb] {
    color: #a5b4fc;
}

.theme-space .cipher-win[b-z3x22qqmnb],
.theme-winter .cipher-win[b-z3x22qqmnb],
.theme-nature .cipher-win[b-z3x22qqmnb],
.theme-ocean .cipher-win[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
    border-color: #22c55e;
}

.theme-space .cipher-lose[b-z3x22qqmnb],
.theme-winter .cipher-lose[b-z3x22qqmnb],
.theme-nature .cipher-lose[b-z3x22qqmnb],
.theme-ocean .cipher-lose[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(202, 138, 4, 0.2));
    border-color: #eab308;
}

.theme-space .cipher-result h2[b-z3x22qqmnb],
.theme-winter .cipher-result h2[b-z3x22qqmnb],
.theme-nature .cipher-result h2[b-z3x22qqmnb],
.theme-ocean .cipher-result h2[b-z3x22qqmnb] {
    color: white;
}

.theme-space .cipher-result p[b-z3x22qqmnb],
.theme-winter .cipher-result p[b-z3x22qqmnb],
.theme-nature .cipher-result p[b-z3x22qqmnb],
.theme-ocean .cipher-result p[b-z3x22qqmnb] {
    color: #94a3b8;
}

/* Dark theme - Word Definition */
.theme-space .word-definition[b-z3x22qqmnb],
.theme-winter .word-definition[b-z3x22qqmnb],
.theme-nature .word-definition[b-z3x22qqmnb],
.theme-ocean .word-definition[b-z3x22qqmnb] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(var(--theme-primary-rgb), 0.2);
}

.theme-space .definition-word[b-z3x22qqmnb],
.theme-winter .definition-word[b-z3x22qqmnb],
.theme-nature .definition-word[b-z3x22qqmnb],
.theme-ocean .definition-word[b-z3x22qqmnb] {
    color: #f1f5f9;
}

.theme-space .definition-phonetic[b-z3x22qqmnb],
.theme-winter .definition-phonetic[b-z3x22qqmnb],
.theme-nature .definition-phonetic[b-z3x22qqmnb],
.theme-ocean .definition-phonetic[b-z3x22qqmnb] {
    color: #94a3b8;
}

.theme-space .definitions-list[b-z3x22qqmnb],
.theme-winter .definitions-list[b-z3x22qqmnb],
.theme-nature .definitions-list[b-z3x22qqmnb],
.theme-ocean .definitions-list[b-z3x22qqmnb] {
    color: #cbd5e1;
}

.theme-space .definition-example[b-z3x22qqmnb],
.theme-winter .definition-example[b-z3x22qqmnb],
.theme-nature .definition-example[b-z3x22qqmnb],
.theme-ocean .definition-example[b-z3x22qqmnb] {
    color: #94a3b8;
    border-left-color: #475569;
}

.theme-space .cipher-error[b-z3x22qqmnb],
.theme-winter .cipher-error[b-z3x22qqmnb],
.theme-nature .cipher-error[b-z3x22qqmnb],
.theme-ocean .cipher-error[b-z3x22qqmnb] {
    background: rgba(220, 38, 38, 0.2);
    border-color: #dc2626;
}

/* Dark theme - Share Panel */
.theme-space .share-panel[b-z3x22qqmnb],
.theme-winter .share-panel[b-z3x22qqmnb],
.theme-nature .share-panel[b-z3x22qqmnb],
.theme-ocean .share-panel[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #1e293b, #0f172a);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.theme-space .share-panel h2[b-z3x22qqmnb],
.theme-winter .share-panel h2[b-z3x22qqmnb],
.theme-nature .share-panel h2[b-z3x22qqmnb],
.theme-ocean .share-panel h2[b-z3x22qqmnb] {
    color: white;
}

.theme-space .share-preview[b-z3x22qqmnb],
.theme-winter .share-preview[b-z3x22qqmnb],
.theme-nature .share-preview[b-z3x22qqmnb],
.theme-ocean .share-preview[b-z3x22qqmnb] {
    background: linear-gradient(145deg, #334155, #1e293b);
    border-color: rgba(var(--theme-primary-rgb), 0.15);
}

.theme-space .share-text[b-z3x22qqmnb],
.theme-winter .share-text[b-z3x22qqmnb],
.theme-nature .share-text[b-z3x22qqmnb],
.theme-ocean .share-text[b-z3x22qqmnb] {
    color: #e2e8f0;
}

.theme-space .share-tagline[b-z3x22qqmnb],
.theme-winter .share-tagline[b-z3x22qqmnb],
.theme-nature .share-tagline[b-z3x22qqmnb],
.theme-ocean .share-tagline[b-z3x22qqmnb] {
    color: #94a3b8;
}

.theme-space .share-tagline strong[b-z3x22qqmnb],
.theme-winter .share-tagline strong[b-z3x22qqmnb],
.theme-nature .share-tagline strong[b-z3x22qqmnb],
.theme-ocean .share-tagline strong[b-z3x22qqmnb] {
    color: #a5b4fc;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .cipher-tile[b-z3x22qqmnb] {
        width: 52px;
        height: 52px;
        font-size: 1.5rem;
    }
    
    .key[b-z3x22qqmnb] {
        min-width: 30px;
        height: 48px;
        font-size: 0.8rem;
    }
    
    .key-wide[b-z3x22qqmnb] {
        min-width: 50px;
        font-size: 0.65rem;
    }
    
    .cipher-header h1[b-z3x22qqmnb] {
        font-size: 2rem;
    }
}

/* Next Puzzle Countdown */
.next-puzzle-countdown[b-z3x22qqmnb] {
    margin-top: 20px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.1), rgba(var(--theme-accent-rgb), 0.1));
    border: 1px solid rgba(var(--theme-primary-rgb), 0.25);
    border-radius: 16px;
    text-align: center;
    animation: fadeIn-b-z3x22qqmnb 0.5s ease;
}

.countdown-label[b-z3x22qqmnb] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.countdown-timer[b-z3x22qqmnb] {
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    animation: pulse-b-z3x22qqmnb 2s ease-in-out infinite;
}

@keyframes pulse-b-z3x22qqmnb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Dark Theme - Countdown */
.theme-space .next-puzzle-countdown[b-z3x22qqmnb],
.theme-winter .next-puzzle-countdown[b-z3x22qqmnb],
.theme-nature .next-puzzle-countdown[b-z3x22qqmnb],
.theme-ocean .next-puzzle-countdown[b-z3x22qqmnb] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.15), rgba(var(--theme-accent-rgb), 0.15));
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

.theme-space .countdown-label[b-z3x22qqmnb],
.theme-winter .countdown-label[b-z3x22qqmnb],
.theme-nature .countdown-label[b-z3x22qqmnb],
.theme-ocean .countdown-label[b-z3x22qqmnb] {
    color: #94a3b8;
}

.theme-space .countdown-timer[b-z3x22qqmnb],
.theme-winter .countdown-timer[b-z3x22qqmnb],
.theme-nature .countdown-timer[b-z3x22qqmnb],
.theme-ocean .countdown-timer[b-z3x22qqmnb] {
    background: linear-gradient(135deg, #818cf8, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* /Pages/Client/ClientInvoices.razor.rz.scp.css */
/* ============================================
   CLIENT INVOICES PAGE STYLES
   ============================================ */

/* Page wrapper */
.client-portal-page[b-eh5ekay2or] {
    min-height: calc(100vh - 56px);
    background: transparent; /* layout paints the themed page bg (THEME-TOKENS-1) */
    padding: 24px;
}

.client-container[b-eh5ekay2or] {
    max-width: 1200px;
    margin: 0 auto;
}

.stack-4[b-eh5ekay2or] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stack-1[b-eh5ekay2or] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Header */
.page-header[b-eh5ekay2or] {
    background: var(--theme-surface);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--theme-border);
}

.flex-between-center[b-eh5ekay2or] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.page-title[b-eh5ekay2or] {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

/* Breadcrumb */
.breadcrumb[b-eh5ekay2or] {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.breadcrumb-item + .breadcrumb-item[b-eh5ekay2or]::before {
    content: "/";
    padding-right: 0.5rem;
    color: var(--theme-text-muted);
}

.breadcrumb-item a[b-eh5ekay2or] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
}

.breadcrumb-item a:hover[b-eh5ekay2or] {
    text-decoration: underline;
}

.breadcrumb-item.active[b-eh5ekay2or] {
    color: var(--theme-text-secondary);
}

.back-btn[b-eh5ekay2or] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
    border-radius: 6px;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.back-btn:hover[b-eh5ekay2or] {
    background: var(--theme-primary-light);
}

/* Stats grid */
.grid-stats[b-eh5ekay2or] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card[b-eh5ekay2or] {
    padding: 1rem;
    background: var(--theme-surface);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--theme-border);
}

.stat-content[b-eh5ekay2or] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.stat-icon[b-eh5ekay2or] {
    margin-bottom: 0.5rem;
}

.stat-value[b-eh5ekay2or] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.stat-label[b-eh5ekay2or] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

/* Filters */
.filter-section[b-eh5ekay2or] {
    background: var(--theme-surface);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid var(--theme-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.filter-item[b-eh5ekay2or] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-label[b-eh5ekay2or] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.input-with-icon[b-eh5ekay2or] {
    position: relative;
}

.input-with-icon .input-icon[b-eh5ekay2or] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-muted);
    pointer-events: none;
}

.input-with-icon .form-input[b-eh5ekay2or] {
    padding-left: 36px;
}

.form-input[b-eh5ekay2or],
.form-select[b-eh5ekay2or] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s;
}

.form-input:focus[b-eh5ekay2or],
.form-select:focus[b-eh5ekay2or] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

/* View toggle */
.view-toggle[b-eh5ekay2or] {
    display: flex;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    overflow: hidden;
}

.toggle-btn[b-eh5ekay2or] {
    padding: 8px 12px;
    border: none;
    background: var(--theme-surface);
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.toggle-btn.active[b-eh5ekay2or] {
    background: var(--theme-primary);
    color: white;
}

.toggle-btn:not(.active):hover[b-eh5ekay2or] {
    background: var(--theme-surface-secondary);
}

/* Invoice cards */
.invoice-grid[b-eh5ekay2or] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.invoice-card[b-eh5ekay2or] {
    transition: all 0.3s ease;
    border-left: 4px solid;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    border-radius: 12px;
    padding: 0;
    border-top: 1px solid var(--theme-border);
    border-right: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
}

.invoice-card:hover[b-eh5ekay2or] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.invoice-card-draft[b-eh5ekay2or] { border-left-color: #6b7280; }
.invoice-card-sent[b-eh5ekay2or] { border-left-color: #3b82f6; }
.invoice-card-paid[b-eh5ekay2or] { border-left-color: #10b981; }
.invoice-card-overdue[b-eh5ekay2or] { border-left-color: #ef4444; }

.invoice-card-content[b-eh5ekay2or] {
    padding: 1rem;
}

.invoice-card-actions[b-eh5ekay2or] {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-border);
}

.card-header[b-eh5ekay2or] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.card-divider[b-eh5ekay2or] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 0.75rem 0;
}

.invoice-number[b-eh5ekay2or] {
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary);
}

.invoice-amount[b-eh5ekay2or] {
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary));
    margin: 0;
}

.card-row[b-eh5ekay2or] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.label-tiny[b-eh5ekay2or] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

/* Status chips */
.status-chip[b-eh5ekay2or] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-draft[b-eh5ekay2or] { background: rgba(107, 114, 128, 0.1); color: #6b7280; }
.status-sent[b-eh5ekay2or] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.status-paid[b-eh5ekay2or] { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.status-overdue[b-eh5ekay2or] { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Data table */
.data-table-container[b-eh5ekay2or] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--theme-border);
}

.data-table[b-eh5ekay2or] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-eh5ekay2or] {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
    background: var(--theme-surface-secondary);
    border-bottom: 1px solid var(--theme-border);
}

.data-table td[b-eh5ekay2or] {
    padding: 12px 16px;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-border);
}

.data-table tr:last-child td[b-eh5ekay2or] {
    border-bottom: none;
}

.data-table .text-right[b-eh5ekay2or] { text-align: right; }
.data-table .text-center[b-eh5ekay2or] { text-align: center; }

/* Button styles */
.btn-icon[b-eh5ekay2or] {
    padding: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
}

.btn-icon:hover[b-eh5ekay2or] {
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.btn-text-primary[b-eh5ekay2or] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
}

.btn-text-primary:hover[b-eh5ekay2or] {
    background: rgba(var(--theme-primary-rgb), 0.1);
}

/* Loading bar */
.loading-bar[b-eh5ekay2or] {
    height: 4px;
    background: var(--theme-border);
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar-inner[b-eh5ekay2or] {
    height: 100%;
    width: 30%;
    background: var(--theme-primary);
    border-radius: 2px;
    animation: loading-slide-b-eh5ekay2or 1.2s ease-in-out infinite;
}

@keyframes loading-slide-b-eh5ekay2or {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Empty state */
.empty-state[b-eh5ekay2or] {
    padding: 3rem 1rem;
    text-align: center;
}

.empty-content[b-eh5ekay2or] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.empty-title[b-eh5ekay2or] {
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.empty-description[b-eh5ekay2or] {
    color: var(--theme-text-secondary);
    margin: 0;
}

/* Text color helpers */
.text-primary[b-eh5ekay2or] { color: var(--theme-primary-ink, var(--theme-primary)); }
.text-secondary[b-eh5ekay2or] { color: var(--theme-text-secondary); }
.text-success[b-eh5ekay2or] { color: #10b981; }
.text-info[b-eh5ekay2or] { color: #3b82f6; }
.text-warning[b-eh5ekay2or] { color: #f59e0b; }
.text-danger[b-eh5ekay2or] { color: #ef4444; }

.row-text[b-eh5ekay2or] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.mr-1[b-eh5ekay2or] { margin-right: 0.25rem; }
.mr-2[b-eh5ekay2or] { margin-right: 0.5rem; }

/* Responsive */
@media (max-width: 768px) {
    .client-portal-page[b-eh5ekay2or] {
        padding: 16px;
    }

    .flex-between-center[b-eh5ekay2or] {
        flex-direction: column;
        align-items: flex-start;
    }

    .back-btn[b-eh5ekay2or] {
        align-self: flex-start;
    }

    .grid-stats[b-eh5ekay2or] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-section[b-eh5ekay2or] {
        grid-template-columns: 1fr;
    }

    .invoice-grid[b-eh5ekay2or] {
        grid-template-columns: 1fr;
    }

    .view-toggle-wrapper[b-eh5ekay2or] {
        justify-self: start;
    }
}

@media (max-width: 600px) {
    .client-portal-page[b-eh5ekay2or] {
        padding: 12px;
    }

    .page-title[b-eh5ekay2or] {
        font-size: 1.25rem;
    }

    .page-header[b-eh5ekay2or] {
        padding: 1rem;
    }

    .grid-stats[b-eh5ekay2or] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .stat-value[b-eh5ekay2or] {
        font-size: 1.25rem;
    }

    .data-table th[b-eh5ekay2or],
    .data-table td[b-eh5ekay2or] {
        padding: 8px 10px;
        font-size: 0.8rem;
    }
}

/* Dark theme overrides */
.is-dark .page-header[b-eh5ekay2or],
.is-dark .stat-card[b-eh5ekay2or],
.is-dark .filter-section[b-eh5ekay2or],
.is-dark .data-table-container[b-eh5ekay2or] {
    background: rgba(30, 41, 59, 0.7);
}

.is-dark .invoice-card[b-eh5ekay2or],
.is-dark .toggle-btn:not(.active)[b-eh5ekay2or] {
    background: rgba(30, 41, 59, 0.5);
}

.is-dark .form-input[b-eh5ekay2or],
.is-dark .form-select[b-eh5ekay2or] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .data-table th[b-eh5ekay2or] {
    background: rgba(30, 41, 59, 0.9);
}

.is-dark .data-table tr:hover td[b-eh5ekay2or] {
    background: rgba(255, 255, 255, 0.05);
}
/* /Pages/Client/ClientPortal.razor.rz.scp.css */
/* ============================================
   CLIENT PORTAL DASHBOARD STYLES
   ============================================ */

.client-portal[b-kqs6wa6qce] {
    min-height: calc(100vh - 56px);
    background: transparent; /* layout paints the themed page bg (THEME-TOKENS-1) */
    padding: 24px;
}

.portal-container[b-kqs6wa6qce] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Loading */
.loading-state[b-kqs6wa6qce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--theme-text-secondary);
}

.loading-spinner[b-kqs6wa6qce] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-kqs6wa6qce 0.8s linear infinite;
}

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

/* Unlinked Account */
.unlinked-card[b-kqs6wa6qce] {
    max-width: 500px;
    margin: 3rem auto;
    padding: 3rem;
    text-align: center;
    background: var(--theme-surface);
    border-radius: 16px;
    border: 1px solid var(--theme-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.unlinked-icon[b-kqs6wa6qce] {
    color: #f59e0b;
    margin-bottom: 1rem;
}

.unlinked-card h3[b-kqs6wa6qce] {
    color: var(--theme-text-primary);
    margin: 0 0 0.5rem;
}

.unlinked-text[b-kqs6wa6qce] {
    color: var(--theme-text-secondary);
    margin-bottom: 1.5rem;
}

/* Welcome Banner */
.welcome-banner[b-kqs6wa6qce] {
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-accent, #764ba2) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    color: white;
}

.welcome-content[b-kqs6wa6qce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.welcome-title[b-kqs6wa6qce] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
}

.welcome-subtitle[b-kqs6wa6qce] {
    margin: 0;
    opacity: 0.9;
}

.welcome-icon[b-kqs6wa6qce] {
    width: 64px;
    height: 64px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* Section Headers */
.section-header[b-kqs6wa6qce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-title[b-kqs6wa6qce] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.section-title svg[b-kqs6wa6qce] {
    width: 24px;
    height: 24px;
    color: var(--theme-text-secondary);
}

.billing-section-title[b-kqs6wa6qce] {
    margin-top: 0.5rem;
}

.section-link[b-kqs6wa6qce] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    font-weight: 500;
}

.section-link:hover[b-kqs6wa6qce] {
    text-decoration: underline;
}

.section-link svg[b-kqs6wa6qce] {
    width: 16px;
    height: 16px;
}

/* Stats Grid */
.stats-grid[b-kqs6wa6qce] {
    display: grid;
    gap: 1rem;
}

.stats-grid-4[b-kqs6wa6qce] {
    grid-template-columns: repeat(4, 1fr);
}

.stat-card[b-kqs6wa6qce] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-card:hover[b-kqs6wa6qce] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-icon-wrap[b-kqs6wa6qce] {
    margin-bottom: 0.5rem;
}

.stat-icon-wrap svg[b-kqs6wa6qce] {
    width: 32px;
    height: 32px;
}

.stat-value[b-kqs6wa6qce] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-label[b-kqs6wa6qce] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

/* Text colors */
.text-primary[b-kqs6wa6qce] { color: var(--theme-primary-ink, var(--theme-primary)); }
.text-info[b-kqs6wa6qce] { color: #3b82f6; }
.text-warning[b-kqs6wa6qce] { color: #f59e0b; }
.text-success[b-kqs6wa6qce] { color: #10b981; }
.text-danger[b-kqs6wa6qce] { color: #ef4444; }

/* Content Cards */
.content-card[b-kqs6wa6qce] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.card-title-row[b-kqs6wa6qce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.card-title[b-kqs6wa6qce] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.card-title svg[b-kqs6wa6qce] {
    width: 24px;
    height: 24px;
    color: var(--theme-text-secondary);
}

/* Task Grid */
.task-grid[b-kqs6wa6qce] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.task-card[b-kqs6wa6qce] {
    border-left: 4px solid;
    border-radius: 10px;
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
    border-right: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.3s ease;
}

.task-card:hover[b-kqs6wa6qce] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.task-card-open[b-kqs6wa6qce] { border-left-color: #3b82f6; }
.task-card-inprogress[b-kqs6wa6qce] { border-left-color: #f59e0b; }
.task-card-complete[b-kqs6wa6qce] { border-left-color: #10b981; }

.task-card-inner[b-kqs6wa6qce] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.task-card-header[b-kqs6wa6qce] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.task-title[b-kqs6wa6qce] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.task-description[b-kqs6wa6qce] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta[b-kqs6wa6qce] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.task-meta svg[b-kqs6wa6qce] {
    width: 16px;
    height: 16px;
}

/* Invoice Summary Stats */
.summary-stats[b-kqs6wa6qce] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.summary-stat[b-kqs6wa6qce] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.summary-icon[b-kqs6wa6qce] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.summary-icon svg[b-kqs6wa6qce] {
    width: 24px;
    height: 24px;
}

.bg-primary-soft[b-kqs6wa6qce] { background: rgba(var(--theme-primary-rgb), 0.15); color: var(--theme-primary-ink, var(--theme-primary)); }
.bg-success-soft[b-kqs6wa6qce] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.bg-info-soft[b-kqs6wa6qce] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.bg-danger-soft[b-kqs6wa6qce] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.summary-value[b-kqs6wa6qce] {
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

.summary-label[b-kqs6wa6qce] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* Invoice Grid */
.invoice-grid[b-kqs6wa6qce] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.invoice-card[b-kqs6wa6qce] {
    border-left: 4px solid;
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
    border-right: 1px solid var(--theme-border);
    border-bottom: 1px solid var(--theme-border);
    transition: all 0.3s ease;
}

.invoice-card:hover[b-kqs6wa6qce] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.invoice-card-paid[b-kqs6wa6qce] { border-left-color: #10b981; }
.invoice-card-sent[b-kqs6wa6qce] { border-left-color: #3b82f6; }
.invoice-card-overdue[b-kqs6wa6qce] { border-left-color: #ef4444; }
.invoice-card-draft[b-kqs6wa6qce] { border-left-color: #6b7280; }

.invoice-card-row[b-kqs6wa6qce] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-header-row[b-kqs6wa6qce] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.invoice-number[b-kqs6wa6qce] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.invoice-date[b-kqs6wa6qce] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.invoice-amount[b-kqs6wa6qce] {
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* Empty State */
.empty-state[b-kqs6wa6qce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 0.5rem;
    color: var(--theme-text-secondary);
}

.empty-state svg[b-kqs6wa6qce] {
    width: 48px;
    height: 48px;
}

/* Quick Actions */
.actions-grid[b-kqs6wa6qce] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

.action-btn[b-kqs6wa6qce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.action-btn:hover[b-kqs6wa6qce] {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.05);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.action-btn svg[b-kqs6wa6qce] {
    width: 32px;
    height: 32px;
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* Dark theme overrides */
.is-dark .stat-card[b-kqs6wa6qce],
.is-dark .content-card[b-kqs6wa6qce],
.is-dark .unlinked-card[b-kqs6wa6qce] {
    background: rgba(30, 41, 59, 0.7);
}

.is-dark .task-card[b-kqs6wa6qce],
.is-dark .invoice-card[b-kqs6wa6qce],
.is-dark .action-btn[b-kqs6wa6qce] {
    background: rgba(30, 41, 59, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .client-portal[b-kqs6wa6qce] {
        padding: 16px;
    }

    .stats-grid-4[b-kqs6wa6qce] {
        grid-template-columns: repeat(2, 1fr);
    }

    .task-grid[b-kqs6wa6qce] {
        grid-template-columns: repeat(2, 1fr);
    }

    .invoice-grid[b-kqs6wa6qce] {
        grid-template-columns: 1fr;
    }

    .summary-stats[b-kqs6wa6qce] {
        grid-template-columns: repeat(2, 1fr);
    }

    .actions-grid[b-kqs6wa6qce] {
        grid-template-columns: 1fr;
    }

    .welcome-icon[b-kqs6wa6qce] {
        display: none;
    }
}

@media (max-width: 600px) {
    .client-portal[b-kqs6wa6qce] {
        padding: 12px;
    }

    .portal-container[b-kqs6wa6qce] {
        gap: 1rem;
    }

    .welcome-banner[b-kqs6wa6qce] {
        padding: 1rem;
    }

    .welcome-title[b-kqs6wa6qce] {
        font-size: 1.25rem;
    }

    .stats-grid-4[b-kqs6wa6qce] {
        grid-template-columns: 1fr 1fr;
    }

    .stat-value[b-kqs6wa6qce] {
        font-size: 1.25rem;
    }

    .task-grid[b-kqs6wa6qce] {
        grid-template-columns: 1fr;
    }

    .summary-stats[b-kqs6wa6qce] {
        grid-template-columns: 1fr 1fr;
    }

    .content-card[b-kqs6wa6qce] {
        padding: 1rem;
    }

    .section-title[b-kqs6wa6qce] {
        font-size: 1rem;
    }
}
/* /Pages/Client/ClientPortalProjects.razor.rz.scp.css */
/* ============================================
   CLIENT PORTAL PROJECTS STYLES
   ============================================ */

.client-projects[b-y1nlwcg86m] {
    min-height: calc(100vh - 56px);
    background: transparent; /* layout paints the themed page bg (THEME-TOKENS-1) */
    padding: 24px;
}

.projects-container[b-y1nlwcg86m] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.projects-header[b-y1nlwcg86m] {
    margin-bottom: 32px;
}

.header-left[b-y1nlwcg86m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-y1nlwcg86m] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
    width: fit-content;
}

.back-link:hover[b-y1nlwcg86m] {
    color: var(--theme-accent, #3b82f6);
}

.back-link svg[b-y1nlwcg86m] {
    width: 18px;
    height: 18px;
}

.page-title[b-y1nlwcg86m] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 8px 0 0;
}

.page-title svg[b-y1nlwcg86m] {
    width: 32px;
    height: 32px;
    color: var(--theme-accent, #3b82f6);
}

.page-subtitle[b-y1nlwcg86m] {
    color: var(--theme-text-secondary, #64748b);
    margin: 4px 0 0;
}

/* Loading State */
.loading-state[b-y1nlwcg86m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--theme-text-secondary, #64748b);
}

.loading-spinner[b-y1nlwcg86m] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-accent, #3b82f6);
    border-radius: 50%;
    animation: spin-b-y1nlwcg86m 0.8s linear infinite;
    margin-bottom: 16px;
}

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

/* Empty State */
.empty-state[b-y1nlwcg86m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.empty-state svg[b-y1nlwcg86m] {
    width: 64px;
    height: 64px;
    color: var(--theme-text-muted, #94a3b8);
    margin-bottom: 20px;
}

.empty-state h3[b-y1nlwcg86m] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 8px;
}

.empty-state p[b-y1nlwcg86m] {
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 24px;
}

/* Summary Stats */
.summary-stats[b-y1nlwcg86m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-y1nlwcg86m] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.stat-icon[b-y1nlwcg86m] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-y1nlwcg86m] {
    width: 24px;
    height: 24px;
}

.stat-icon.icon-blue[b-y1nlwcg86m] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.stat-icon.icon-amber[b-y1nlwcg86m] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.stat-icon.icon-green[b-y1nlwcg86m] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.stat-icon.icon-purple[b-y1nlwcg86m] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.stat-content[b-y1nlwcg86m] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-y1nlwcg86m] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.stat-label[b-y1nlwcg86m] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Projects Grid */
.projects-grid[b-y1nlwcg86m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 24px;
}

.project-card[b-y1nlwcg86m] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: all 0.2s ease;
}

.project-card:hover[b-y1nlwcg86m] {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.project-card.completed[b-y1nlwcg86m] {
    border-color: rgba(34, 197, 94, 0.3);
}

/* Project Header */
.project-header[b-y1nlwcg86m] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.project-info[b-y1nlwcg86m] {
    flex: 1;
    min-width: 0;
}

.project-name[b-y1nlwcg86m] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 4px;
}

.project-description[b-y1nlwcg86m] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progress Section */
.project-progress[b-y1nlwcg86m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-header[b-y1nlwcg86m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.progress-label[b-y1nlwcg86m] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.progress-value[b-y1nlwcg86m] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.progress-bar[b-y1nlwcg86m] {
    height: 8px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-y1nlwcg86m] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-fill.progress-start[b-y1nlwcg86m] {
    background: #94a3b8;
}

.progress-fill.progress-low[b-y1nlwcg86m] {
    background: #f59e0b;
}

.progress-fill.progress-medium[b-y1nlwcg86m] {
    background: #3b82f6;
}

.progress-fill.progress-high[b-y1nlwcg86m] {
    background: #22c55e;
}

.progress-fill.progress-complete[b-y1nlwcg86m] {
    background: linear-gradient(90deg, #22c55e, #10b981);
}

.progress-stats[b-y1nlwcg86m] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* Tasks Section */
.project-tasks[b-y1nlwcg86m] {
    border-top: 1px solid var(--theme-border, #e2e8f0);
    padding-top: 16px;
}

.tasks-title[b-y1nlwcg86m] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tasks-list[b-y1nlwcg86m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-item[b-y1nlwcg86m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 8px;
}

.task-status[b-y1nlwcg86m] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.task-status svg[b-y1nlwcg86m] {
    width: 16px;
    height: 16px;
}

.task-status.status-complete[b-y1nlwcg86m] {
    color: #22c55e;
}

.task-status.status-progress[b-y1nlwcg86m] {
    color: #f59e0b;
}

.task-status.status-open[b-y1nlwcg86m] {
    color: #94a3b8;
}

.task-info[b-y1nlwcg86m] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.task-title[b-y1nlwcg86m] {
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-meta[b-y1nlwcg86m] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* Project Footer */
.project-footer[b-y1nlwcg86m] {
    display: flex;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.project-date[b-y1nlwcg86m] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--theme-text-muted, #94a3b8);
}

.project-date svg[b-y1nlwcg86m] {
    width: 14px;
    height: 14px;
}

/* Dark Theme */
.theme-space .client-projects[b-y1nlwcg86m],
.theme-winter .client-projects[b-y1nlwcg86m],
.theme-nature .client-projects[b-y1nlwcg86m],
.theme-ocean .client-projects[b-y1nlwcg86m],
.theme-mystic .client-projects[b-y1nlwcg86m],
.theme-tron .client-projects[b-y1nlwcg86m] {
    background: transparent;
}

.theme-space .stat-card[b-y1nlwcg86m],
.theme-winter .stat-card[b-y1nlwcg86m],
.theme-nature .stat-card[b-y1nlwcg86m],
.theme-ocean .stat-card[b-y1nlwcg86m],
.theme-mystic .stat-card[b-y1nlwcg86m],
.theme-tron .stat-card[b-y1nlwcg86m],
.theme-space .project-card[b-y1nlwcg86m],
.theme-winter .project-card[b-y1nlwcg86m],
.theme-nature .project-card[b-y1nlwcg86m],
.theme-ocean .project-card[b-y1nlwcg86m],
.theme-mystic .project-card[b-y1nlwcg86m],
.theme-tron .project-card[b-y1nlwcg86m],
.theme-space .empty-state[b-y1nlwcg86m],
.theme-winter .empty-state[b-y1nlwcg86m],
.theme-nature .empty-state[b-y1nlwcg86m],
.theme-ocean .empty-state[b-y1nlwcg86m],
.theme-mystic .empty-state[b-y1nlwcg86m],
.theme-tron .empty-state[b-y1nlwcg86m] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.theme-space .page-title[b-y1nlwcg86m],
.theme-winter .page-title[b-y1nlwcg86m],
.theme-nature .page-title[b-y1nlwcg86m],
.theme-ocean .page-title[b-y1nlwcg86m],
.theme-mystic .page-title[b-y1nlwcg86m],
.theme-tron .page-title[b-y1nlwcg86m],
.theme-space .stat-value[b-y1nlwcg86m],
.theme-winter .stat-value[b-y1nlwcg86m],
.theme-nature .stat-value[b-y1nlwcg86m],
.theme-ocean .stat-value[b-y1nlwcg86m],
.theme-mystic .stat-value[b-y1nlwcg86m],
.theme-tron .stat-value[b-y1nlwcg86m],
.theme-space .project-name[b-y1nlwcg86m],
.theme-winter .project-name[b-y1nlwcg86m],
.theme-nature .project-name[b-y1nlwcg86m],
.theme-ocean .project-name[b-y1nlwcg86m],
.theme-mystic .project-name[b-y1nlwcg86m],
.theme-tron .project-name[b-y1nlwcg86m],
.theme-space .progress-value[b-y1nlwcg86m],
.theme-winter .progress-value[b-y1nlwcg86m],
.theme-nature .progress-value[b-y1nlwcg86m],
.theme-ocean .progress-value[b-y1nlwcg86m],
.theme-mystic .progress-value[b-y1nlwcg86m],
.theme-tron .progress-value[b-y1nlwcg86m],
.theme-space .task-title[b-y1nlwcg86m],
.theme-winter .task-title[b-y1nlwcg86m],
.theme-nature .task-title[b-y1nlwcg86m],
.theme-ocean .task-title[b-y1nlwcg86m],
.theme-mystic .task-title[b-y1nlwcg86m],
.theme-tron .task-title[b-y1nlwcg86m],
.theme-space .empty-state h3[b-y1nlwcg86m],
.theme-winter .empty-state h3[b-y1nlwcg86m],
.theme-nature .empty-state h3[b-y1nlwcg86m],
.theme-ocean .empty-state h3[b-y1nlwcg86m],
.theme-mystic .empty-state h3[b-y1nlwcg86m],
.theme-tron .empty-state h3[b-y1nlwcg86m] {
    color: rgba(255, 255, 255, 0.95);
}

.theme-space .back-link[b-y1nlwcg86m],
.theme-winter .back-link[b-y1nlwcg86m],
.theme-nature .back-link[b-y1nlwcg86m],
.theme-ocean .back-link[b-y1nlwcg86m],
.theme-mystic .back-link[b-y1nlwcg86m],
.theme-tron .back-link[b-y1nlwcg86m],
.theme-space .page-subtitle[b-y1nlwcg86m],
.theme-winter .page-subtitle[b-y1nlwcg86m],
.theme-nature .page-subtitle[b-y1nlwcg86m],
.theme-ocean .page-subtitle[b-y1nlwcg86m],
.theme-mystic .page-subtitle[b-y1nlwcg86m],
.theme-tron .page-subtitle[b-y1nlwcg86m],
.theme-space .stat-label[b-y1nlwcg86m],
.theme-winter .stat-label[b-y1nlwcg86m],
.theme-nature .stat-label[b-y1nlwcg86m],
.theme-ocean .stat-label[b-y1nlwcg86m],
.theme-mystic .stat-label[b-y1nlwcg86m],
.theme-tron .stat-label[b-y1nlwcg86m],
.theme-space .project-description[b-y1nlwcg86m],
.theme-winter .project-description[b-y1nlwcg86m],
.theme-nature .project-description[b-y1nlwcg86m],
.theme-ocean .project-description[b-y1nlwcg86m],
.theme-mystic .project-description[b-y1nlwcg86m],
.theme-tron .project-description[b-y1nlwcg86m],
.theme-space .progress-label[b-y1nlwcg86m],
.theme-winter .progress-label[b-y1nlwcg86m],
.theme-nature .progress-label[b-y1nlwcg86m],
.theme-ocean .progress-label[b-y1nlwcg86m],
.theme-mystic .progress-label[b-y1nlwcg86m],
.theme-tron .progress-label[b-y1nlwcg86m],
.theme-space .tasks-title[b-y1nlwcg86m],
.theme-winter .tasks-title[b-y1nlwcg86m],
.theme-nature .tasks-title[b-y1nlwcg86m],
.theme-ocean .tasks-title[b-y1nlwcg86m],
.theme-mystic .tasks-title[b-y1nlwcg86m],
.theme-tron .tasks-title[b-y1nlwcg86m] {
    color: rgba(255, 255, 255, 0.7);
}

.theme-space .project-tasks[b-y1nlwcg86m],
.theme-winter .project-tasks[b-y1nlwcg86m],
.theme-nature .project-tasks[b-y1nlwcg86m],
.theme-ocean .project-tasks[b-y1nlwcg86m],
.theme-mystic .project-tasks[b-y1nlwcg86m],
.theme-tron .project-tasks[b-y1nlwcg86m],
.theme-space .project-footer[b-y1nlwcg86m],
.theme-winter .project-footer[b-y1nlwcg86m],
.theme-nature .project-footer[b-y1nlwcg86m],
.theme-ocean .project-footer[b-y1nlwcg86m],
.theme-mystic .project-footer[b-y1nlwcg86m],
.theme-tron .project-footer[b-y1nlwcg86m] {
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .task-item[b-y1nlwcg86m],
.theme-winter .task-item[b-y1nlwcg86m],
.theme-nature .task-item[b-y1nlwcg86m],
.theme-ocean .task-item[b-y1nlwcg86m],
.theme-mystic .task-item[b-y1nlwcg86m],
.theme-tron .task-item[b-y1nlwcg86m] {
    background: rgba(255, 255, 255, 0.05);
}

.theme-space .progress-bar[b-y1nlwcg86m],
.theme-winter .progress-bar[b-y1nlwcg86m],
.theme-nature .progress-bar[b-y1nlwcg86m],
.theme-ocean .progress-bar[b-y1nlwcg86m],
.theme-mystic .progress-bar[b-y1nlwcg86m],
.theme-tron .progress-bar[b-y1nlwcg86m] {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .client-projects[b-y1nlwcg86m] {
        padding: 16px;
    }

    .projects-grid[b-y1nlwcg86m] {
        grid-template-columns: 1fr;
    }

    .summary-stats[b-y1nlwcg86m] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .client-projects[b-y1nlwcg86m] {
        padding: 12px;
    }

    .page-title[b-y1nlwcg86m] {
        font-size: 1.35rem;
    }

    .page-title svg[b-y1nlwcg86m] {
        width: 24px;
        height: 24px;
    }

    .summary-stats[b-y1nlwcg86m] {
        grid-template-columns: 1fr;
    }

    .projects-header[b-y1nlwcg86m] {
        margin-bottom: 20px;
    }
}
/* /Pages/Client/ClientPortalTimeEntries.razor.rz.scp.css */
/* ============================================
   CLIENT PORTAL TIME ENTRIES STYLES
   ============================================ */

.client-time-entries[b-g3af2zcov4] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    background: var(--theme-bg, #f8fafc);
    transition: background 0.3s ease;
}

.page-container[b-g3af2zcov4] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
    min-height: auto;
}

/* Header */
.page-header[b-g3af2zcov4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

.header-content[b-g3af2zcov4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-title[b-g3af2zcov4] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
}

.page-title svg[b-g3af2zcov4] {
    color: #6366f1;
}

.page-subtitle[b-g3af2zcov4] {
    margin: 0;
    color: #64748b;
    font-size: 0.95rem;
}

/* Buttons */
.btn[b-g3af2zcov4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.btn-primary[b-g3af2zcov4] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover[b-g3af2zcov4] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Cards */
.card[b-g3af2zcov4] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Loading State */
.loading-state[b-g3af2zcov4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px;
    color: #64748b;
}

.spinner[b-g3af2zcov4] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin-b-g3af2zcov4 0.8s linear infinite;
}

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

/* Empty State */
.empty-state[b-g3af2zcov4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    gap: 16px;
}

.empty-icon[b-g3af2zcov4] {
    color: #cbd5e1;
}

.empty-state h2[b-g3af2zcov4] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
}

.empty-state p[b-g3af2zcov4] {
    margin: 0;
    color: #64748b;
    line-height: 1.6;
}

/* Summary Card */
.summary-card[b-g3af2zcov4] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #0ea5e9;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.summary-grid[b-g3af2zcov4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.summary-item[b-g3af2zcov4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.summary-value[b-g3af2zcov4] {
    font-size: 1.75rem;
    font-weight: 700;
}

.summary-value.info[b-g3af2zcov4] { color: #0ea5e9; }
.summary-value.primary[b-g3af2zcov4] { color: #6366f1; }
.summary-value.success[b-g3af2zcov4] { color: #10b981; }

.summary-label[b-g3af2zcov4] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Table */
.table-card[b-g3af2zcov4] {
    overflow: hidden;
}

.table-wrapper[b-g3af2zcov4] {
    overflow-x: auto;
}

.data-table[b-g3af2zcov4] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th[b-g3af2zcov4] {
    background: #f7fafc;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.data-table td[b-g3af2zcov4] {
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}

.data-table tbody tr:hover[b-g3af2zcov4] {
    background: #f8fafc;
}

.data-table tbody tr:nth-child(even)[b-g3af2zcov4] {
    background: #fafafa;
}

.data-table tbody tr:nth-child(even):hover[b-g3af2zcov4] {
    background: #f1f5f9;
}

.date-cell[b-g3af2zcov4] {
    white-space: nowrap;
}

.hours-cell[b-g3af2zcov4] {
    text-align: right;
    white-space: nowrap;
    font-weight: 500;
}

.total-row[b-g3af2zcov4] {
    background: #e0f2fe !important;
}

.total-row td[b-g3af2zcov4] {
    font-weight: 700;
    color: #0369a1;
}

/* Info Note */
.info-note[b-g3af2zcov4] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin-top: 16px;
}

.info-note svg[b-g3af2zcov4] {
    color: #d97706;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-note p[b-g3af2zcov4] {
    margin: 0;
    color: #92400e;
    font-size: 0.9rem;
    line-height: 1.5;
}

.info-note a[b-g3af2zcov4] {
    color: #d97706;
    font-weight: 600;
    text-decoration: none;
}

.info-note a:hover[b-g3af2zcov4] {
    text-decoration: underline;
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */
.theme-space[b-g3af2zcov4],
.theme-winter[b-g3af2zcov4],
.theme-nature[b-g3af2zcov4],
.theme-ocean[b-g3af2zcov4],
.theme-mystic[b-g3af2zcov4],
.theme-tron[b-g3af2zcov4] {
    background: transparent;
}

.theme-space .page-title[b-g3af2zcov4],
.theme-winter .page-title[b-g3af2zcov4],
.theme-nature .page-title[b-g3af2zcov4],
.theme-ocean .page-title[b-g3af2zcov4],
.theme-mystic .page-title[b-g3af2zcov4],
.theme-tron .page-title[b-g3af2zcov4] {
    color: #f1f5f9;
}

.theme-space .page-subtitle[b-g3af2zcov4],
.theme-winter .page-subtitle[b-g3af2zcov4],
.theme-nature .page-subtitle[b-g3af2zcov4],
.theme-ocean .page-subtitle[b-g3af2zcov4],
.theme-mystic .page-subtitle[b-g3af2zcov4],
.theme-tron .page-subtitle[b-g3af2zcov4] {
    color: #94a3b8;
}

.theme-space .card[b-g3af2zcov4],
.theme-winter .card[b-g3af2zcov4],
.theme-nature .card[b-g3af2zcov4],
.theme-ocean .card[b-g3af2zcov4],
.theme-mystic .card[b-g3af2zcov4],
.theme-tron .card[b-g3af2zcov4] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .summary-card[b-g3af2zcov4],
.theme-winter .summary-card[b-g3af2zcov4],
.theme-nature .summary-card[b-g3af2zcov4],
.theme-ocean .summary-card[b-g3af2zcov4],
.theme-mystic .summary-card[b-g3af2zcov4],
.theme-tron .summary-card[b-g3af2zcov4] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
    border-left-color: #0ea5e9;
}

.theme-space .summary-label[b-g3af2zcov4],
.theme-winter .summary-label[b-g3af2zcov4],
.theme-nature .summary-label[b-g3af2zcov4],
.theme-ocean .summary-label[b-g3af2zcov4],
.theme-mystic .summary-label[b-g3af2zcov4],
.theme-tron .summary-label[b-g3af2zcov4] {
    color: #94a3b8;
}

.theme-space .data-table th[b-g3af2zcov4],
.theme-winter .data-table th[b-g3af2zcov4],
.theme-nature .data-table th[b-g3af2zcov4],
.theme-ocean .data-table th[b-g3af2zcov4],
.theme-mystic .data-table th[b-g3af2zcov4],
.theme-tron .data-table th[b-g3af2zcov4] {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-space .data-table td[b-g3af2zcov4],
.theme-winter .data-table td[b-g3af2zcov4],
.theme-nature .data-table td[b-g3af2zcov4],
.theme-ocean .data-table td[b-g3af2zcov4],
.theme-mystic .data-table td[b-g3af2zcov4],
.theme-tron .data-table td[b-g3af2zcov4] {
    color: #e2e8f0;
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.theme-space .data-table tbody tr:hover[b-g3af2zcov4],
.theme-winter .data-table tbody tr:hover[b-g3af2zcov4],
.theme-nature .data-table tbody tr:hover[b-g3af2zcov4],
.theme-ocean .data-table tbody tr:hover[b-g3af2zcov4],
.theme-mystic .data-table tbody tr:hover[b-g3af2zcov4],
.theme-tron .data-table tbody tr:hover[b-g3af2zcov4] {
    background: rgba(255, 255, 255, 0.05);
}

.theme-space .data-table tbody tr:nth-child(even)[b-g3af2zcov4],
.theme-winter .data-table tbody tr:nth-child(even)[b-g3af2zcov4],
.theme-nature .data-table tbody tr:nth-child(even)[b-g3af2zcov4],
.theme-ocean .data-table tbody tr:nth-child(even)[b-g3af2zcov4],
.theme-mystic .data-table tbody tr:nth-child(even)[b-g3af2zcov4],
.theme-tron .data-table tbody tr:nth-child(even)[b-g3af2zcov4] {
    background: rgba(255, 255, 255, 0.02);
}

.theme-space .total-row[b-g3af2zcov4],
.theme-winter .total-row[b-g3af2zcov4],
.theme-nature .total-row[b-g3af2zcov4],
.theme-ocean .total-row[b-g3af2zcov4],
.theme-mystic .total-row[b-g3af2zcov4],
.theme-tron .total-row[b-g3af2zcov4] {
    background: rgba(14, 165, 233, 0.2) !important;
}

.theme-space .total-row td[b-g3af2zcov4],
.theme-winter .total-row td[b-g3af2zcov4],
.theme-nature .total-row td[b-g3af2zcov4],
.theme-ocean .total-row td[b-g3af2zcov4],
.theme-mystic .total-row td[b-g3af2zcov4],
.theme-tron .total-row td[b-g3af2zcov4] {
    color: #7dd3fc;
}

.theme-space .info-note[b-g3af2zcov4],
.theme-winter .info-note[b-g3af2zcov4],
.theme-nature .info-note[b-g3af2zcov4],
.theme-ocean .info-note[b-g3af2zcov4],
.theme-mystic .info-note[b-g3af2zcov4],
.theme-tron .info-note[b-g3af2zcov4] {
    background: rgba(245, 158, 11, 0.15);
}

.theme-space .info-note p[b-g3af2zcov4],
.theme-winter .info-note p[b-g3af2zcov4],
.theme-nature .info-note p[b-g3af2zcov4],
.theme-ocean .info-note p[b-g3af2zcov4],
.theme-mystic .info-note p[b-g3af2zcov4],
.theme-tron .info-note p[b-g3af2zcov4] {
    color: #fcd34d;
}

.theme-space .info-note a[b-g3af2zcov4],
.theme-winter .info-note a[b-g3af2zcov4],
.theme-nature .info-note a[b-g3af2zcov4],
.theme-ocean .info-note a[b-g3af2zcov4],
.theme-mystic .info-note a[b-g3af2zcov4],
.theme-tron .info-note a[b-g3af2zcov4] {
    color: #fbbf24;
}

.theme-space .empty-state h2[b-g3af2zcov4],
.theme-winter .empty-state h2[b-g3af2zcov4],
.theme-nature .empty-state h2[b-g3af2zcov4],
.theme-ocean .empty-state h2[b-g3af2zcov4],
.theme-mystic .empty-state h2[b-g3af2zcov4],
.theme-tron .empty-state h2[b-g3af2zcov4] {
    color: #f1f5f9;
}

.theme-space .empty-state p[b-g3af2zcov4],
.theme-winter .empty-state p[b-g3af2zcov4],
.theme-nature .empty-state p[b-g3af2zcov4],
.theme-ocean .empty-state p[b-g3af2zcov4],
.theme-mystic .empty-state p[b-g3af2zcov4],
.theme-tron .empty-state p[b-g3af2zcov4] {
    color: #94a3b8;
}

.theme-space .loading-state[b-g3af2zcov4],
.theme-winter .loading-state[b-g3af2zcov4],
.theme-nature .loading-state[b-g3af2zcov4],
.theme-ocean .loading-state[b-g3af2zcov4],
.theme-mystic .loading-state[b-g3af2zcov4],
.theme-tron .loading-state[b-g3af2zcov4] {
    color: #94a3b8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .client-time-entries[b-g3af2zcov4] {
        padding: 16px;
    }
    
    .page-header[b-g3af2zcov4] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-title[b-g3af2zcov4] {
        font-size: 1.5rem;
    }
    
    .summary-grid[b-g3af2zcov4] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .summary-item[b-g3af2zcov4] {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .summary-item:last-child[b-g3af2zcov4] {
        border-bottom: none;
    }
}
/* /Pages/Client/ClientTasks.razor.rz.scp.css */
/* ============================================
   CLIENT TASKS WITH APPROVAL STYLES
   ============================================ */

.client-tasks[b-9axbqymrqp] {
    min-height: calc(100vh - 56px);
    background: transparent; /* layout paints the themed page bg (THEME-TOKENS-1) */
    padding: 24px;
}

.tasks-container[b-9axbqymrqp] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.tasks-header[b-9axbqymrqp] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 20px;
}

.header-left[b-9axbqymrqp] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-9axbqymrqp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
    width: fit-content;
}

.back-link:hover[b-9axbqymrqp] {
    color: var(--theme-accent, #3b82f6);
}

.back-link svg[b-9axbqymrqp] {
    width: 18px;
    height: 18px;
}

.page-title[b-9axbqymrqp] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 8px 0 0;
}

.page-title svg[b-9axbqymrqp] {
    width: 32px;
    height: 32px;
    color: var(--theme-accent, #3b82f6);
}

.page-subtitle[b-9axbqymrqp] {
    color: var(--theme-text-secondary, #64748b);
    margin: 4px 0 0;
}

.header-actions[b-9axbqymrqp] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-wrapper[b-9axbqymrqp] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-wrapper svg[b-9axbqymrqp] {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--theme-text-muted, #94a3b8);
}

.search-input[b-9axbqymrqp] {
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
    width: 280px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus[b-9axbqymrqp] {
    outline: none;
    border-color: var(--theme-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Section Title */
.section-title[b-9axbqymrqp] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 16px;
}

.section-title svg[b-9axbqymrqp] {
    width: 22px;
    height: 22px;
    color: var(--theme-accent, #3b82f6);
}

.section-title .badge[b-9axbqymrqp] {
    background: var(--theme-bg-warning, rgba(245, 158, 11, 0.1));
    color: var(--theme-warning, #f59e0b);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.section-title .count[b-9axbqymrqp] {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 400;
    font-size: 0.9rem;
}

/* Loading State */
.loading-state[b-9axbqymrqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--theme-text-secondary, #64748b);
}

.loading-spinner[b-9axbqymrqp] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-accent, #3b82f6);
    border-radius: 50%;
    animation: spin-b-9axbqymrqp 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-9axbqymrqp {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-9axbqymrqp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.empty-state svg[b-9axbqymrqp] {
    width: 64px;
    height: 64px;
    color: var(--theme-text-muted, #94a3b8);
    margin-bottom: 20px;
}

.empty-state h3[b-9axbqymrqp] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 8px;
}

.empty-state p[b-9axbqymrqp] {
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

/* Pending Approvals Section */
.pending-approvals-section[b-9axbqymrqp] {
    margin-bottom: 32px;
}

.approval-cards[b-9axbqymrqp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.approval-card[b-9axbqymrqp] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 2px solid var(--theme-warning, #f59e0b);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.approval-card-header[b-9axbqymrqp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.task-id[b-9axbqymrqp] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 500;
}

.task-title[b-9axbqymrqp] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.task-description[b-9axbqymrqp] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

.task-meta[b-9axbqymrqp] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.meta-item[b-9axbqymrqp] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--theme-text-muted, #94a3b8);
}

.meta-item svg[b-9axbqymrqp] {
    width: 16px;
    height: 16px;
}

.approval-feedback[b-9axbqymrqp] {
    margin-top: 8px;
}

.feedback-input[b-9axbqymrqp] {
    width: 100%;
    min-height: 60px;
    resize: vertical;
}

.approval-actions[b-9axbqymrqp] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.approval-actions button[b-9axbqymrqp] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.approval-actions svg[b-9axbqymrqp] {
    width: 18px;
    height: 18px;
}

/* All Tasks Section */
.all-tasks-section[b-9axbqymrqp] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    padding: 24px;
}

.tasks-list[b-9axbqymrqp] {
    display: flex;
    flex-direction: column;
}

.task-row[b-9axbqymrqp] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.task-row:last-child[b-9axbqymrqp] {
    border-bottom: none;
}

.task-row.pending-approval[b-9axbqymrqp] {
    background: var(--theme-bg-warning, rgba(245, 158, 11, 0.05));
    margin: 0 -24px;
    padding: 16px 24px;
    border-radius: 8px;
}

.task-main[b-9axbqymrqp] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.task-row .task-id[b-9axbqymrqp] {
    flex-shrink: 0;
    width: 60px;
}

.task-info[b-9axbqymrqp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.task-row .task-title[b-9axbqymrqp] {
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-project[b-9axbqymrqp] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #94a3b8);
}

.task-badges[b-9axbqymrqp] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.task-date[b-9axbqymrqp] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #94a3b8);
    flex-shrink: 0;
    width: 100px;
    text-align: right;
}

/* Dark Theme */
.theme-space .client-tasks[b-9axbqymrqp],
.theme-winter .client-tasks[b-9axbqymrqp],
.theme-nature .client-tasks[b-9axbqymrqp],
.theme-ocean .client-tasks[b-9axbqymrqp],
.theme-mystic .client-tasks[b-9axbqymrqp],
.theme-tron .client-tasks[b-9axbqymrqp] {
    background: transparent;
}

.theme-space .approval-card[b-9axbqymrqp],
.theme-winter .approval-card[b-9axbqymrqp],
.theme-nature .approval-card[b-9axbqymrqp],
.theme-ocean .approval-card[b-9axbqymrqp],
.theme-mystic .approval-card[b-9axbqymrqp],
.theme-tron .approval-card[b-9axbqymrqp],
.theme-space .all-tasks-section[b-9axbqymrqp],
.theme-winter .all-tasks-section[b-9axbqymrqp],
.theme-nature .all-tasks-section[b-9axbqymrqp],
.theme-ocean .all-tasks-section[b-9axbqymrqp],
.theme-mystic .all-tasks-section[b-9axbqymrqp],
.theme-tron .all-tasks-section[b-9axbqymrqp],
.theme-space .empty-state[b-9axbqymrqp],
.theme-winter .empty-state[b-9axbqymrqp],
.theme-nature .empty-state[b-9axbqymrqp],
.theme-ocean .empty-state[b-9axbqymrqp],
.theme-mystic .empty-state[b-9axbqymrqp],
.theme-tron .empty-state[b-9axbqymrqp] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.theme-space .approval-card[b-9axbqymrqp],
.theme-winter .approval-card[b-9axbqymrqp],
.theme-nature .approval-card[b-9axbqymrqp],
.theme-ocean .approval-card[b-9axbqymrqp],
.theme-mystic .approval-card[b-9axbqymrqp],
.theme-tron .approval-card[b-9axbqymrqp] {
    border-color: var(--theme-warning, #f59e0b);
}

.theme-space .page-title[b-9axbqymrqp],
.theme-winter .page-title[b-9axbqymrqp],
.theme-nature .page-title[b-9axbqymrqp],
.theme-ocean .page-title[b-9axbqymrqp],
.theme-mystic .page-title[b-9axbqymrqp],
.theme-tron .page-title[b-9axbqymrqp],
.theme-space .section-title[b-9axbqymrqp],
.theme-winter .section-title[b-9axbqymrqp],
.theme-nature .section-title[b-9axbqymrqp],
.theme-ocean .section-title[b-9axbqymrqp],
.theme-mystic .section-title[b-9axbqymrqp],
.theme-tron .section-title[b-9axbqymrqp],
.theme-space .task-title[b-9axbqymrqp],
.theme-winter .task-title[b-9axbqymrqp],
.theme-nature .task-title[b-9axbqymrqp],
.theme-ocean .task-title[b-9axbqymrqp],
.theme-mystic .task-title[b-9axbqymrqp],
.theme-tron .task-title[b-9axbqymrqp],
.theme-space .empty-state h3[b-9axbqymrqp],
.theme-winter .empty-state h3[b-9axbqymrqp],
.theme-nature .empty-state h3[b-9axbqymrqp],
.theme-ocean .empty-state h3[b-9axbqymrqp],
.theme-mystic .empty-state h3[b-9axbqymrqp],
.theme-tron .empty-state h3[b-9axbqymrqp] {
    color: rgba(255, 255, 255, 0.95);
}

.theme-space .back-link[b-9axbqymrqp],
.theme-winter .back-link[b-9axbqymrqp],
.theme-nature .back-link[b-9axbqymrqp],
.theme-ocean .back-link[b-9axbqymrqp],
.theme-mystic .back-link[b-9axbqymrqp],
.theme-tron .back-link[b-9axbqymrqp],
.theme-space .page-subtitle[b-9axbqymrqp],
.theme-winter .page-subtitle[b-9axbqymrqp],
.theme-nature .page-subtitle[b-9axbqymrqp],
.theme-ocean .page-subtitle[b-9axbqymrqp],
.theme-mystic .page-subtitle[b-9axbqymrqp],
.theme-tron .page-subtitle[b-9axbqymrqp],
.theme-space .task-description[b-9axbqymrqp],
.theme-winter .task-description[b-9axbqymrqp],
.theme-nature .task-description[b-9axbqymrqp],
.theme-ocean .task-description[b-9axbqymrqp],
.theme-mystic .task-description[b-9axbqymrqp],
.theme-tron .task-description[b-9axbqymrqp] {
    color: rgba(255, 255, 255, 0.7);
}

.theme-space .task-row[b-9axbqymrqp],
.theme-winter .task-row[b-9axbqymrqp],
.theme-nature .task-row[b-9axbqymrqp],
.theme-ocean .task-row[b-9axbqymrqp],
.theme-mystic .task-row[b-9axbqymrqp],
.theme-tron .task-row[b-9axbqymrqp] {
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .search-input[b-9axbqymrqp],
.theme-winter .search-input[b-9axbqymrqp],
.theme-nature .search-input[b-9axbqymrqp],
.theme-ocean .search-input[b-9axbqymrqp],
.theme-mystic .search-input[b-9axbqymrqp],
.theme-tron .search-input[b-9axbqymrqp] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 768px) {
    .client-tasks[b-9axbqymrqp] {
        padding: 16px;
    }

    .tasks-header[b-9axbqymrqp] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-9axbqymrqp] {
        justify-content: stretch;
    }

    .search-input[b-9axbqymrqp] {
        width: 100%;
    }

    .approval-cards[b-9axbqymrqp] {
        grid-template-columns: 1fr;
    }

    .task-row[b-9axbqymrqp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .task-main[b-9axbqymrqp] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .task-badges[b-9axbqymrqp] {
        flex-wrap: wrap;
    }

    .task-date[b-9axbqymrqp] {
        width: auto;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .client-tasks[b-9axbqymrqp] {
        padding: 12px;
    }

    .page-title[b-9axbqymrqp] {
        font-size: 1.35rem;
    }

    .page-title svg[b-9axbqymrqp] {
        width: 24px;
        height: 24px;
    }

    .tasks-header[b-9axbqymrqp] {
        margin-bottom: 20px;
        gap: 12px;
    }

    .task-row[b-9axbqymrqp] {
        gap: 8px;
    }
}
/* /Pages/Community/CommunityPulse.razor.rz.scp.css */
/* ============================================
   Community Pulse Page Layout
   ============================================ */

.community-page[b-twm9g56k9j] {
    /* PULSE-MERGE Phase 3.2 (2026-05-14): widened from 560 → 720px for
       desktop breathing room. Mobile @media query below the component's
       rules caps it to viewport width on narrow screens, so this only
       affects 600px+ widths. Page wrapper + the embedded
       <CommunityPulse> component's max-width are both bumped in lockstep
       so the header + composer + feed cards still align (the 3.1 fix
       that established the same-width invariant). */
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    color: var(--theme-text-primary, #1e293b);
}

.community-page-header[b-twm9g56k9j] {
    margin-bottom: 1.5rem;
}

.community-page-title-row[b-twm9g56k9j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.community-page-icon[b-twm9g56k9j] {
    font-size: 1.75rem;
}

.community-page-title-row h1[b-twm9g56k9j] {
    font-size: 1.5rem;
    font-weight: 700;
    color: inherit;
    margin: 0;
}

.community-page-subtitle[b-twm9g56k9j] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}
/* /Pages/Companion/CompanionProfile.razor.rz.scp.css */
/* =============================================
   Companion Profile Page — Scoped CSS
   ============================================= */

.companion-profile[b-42n3vh45n2] {
    /* PROFILE-WIDE-1 (2026-10-19): 800px contained; Wide (LAYOUT-WIDTH-1) lifts it to 1280px, not
       the full 1840 - a hero + timeline page is prose, and the Your AI cards only need enough for
       all six 120px sleeve tiles on one row and voice/brain cards 4-across (HUB-WIDE-1 precedent).
       min() collapses to 0 in Contained, so max() keeps 800 there exactly. */
    max-width: max(800px, min(var(--content-wide-max, 0px), 1280px));
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* ---- Loading & Empty States ---- */

.profile-loading[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    color: var(--theme-text-secondary);
}

.profile-loading-spinner[b-42n3vh45n2] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: profile-spin-b-42n3vh45n2 0.8s linear infinite;
}

@keyframes profile-spin-b-42n3vh45n2 {
    to { transform: rotate(360deg); }
}

.profile-empty[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 1rem;
    text-align: center;
    color: var(--theme-text-secondary);
}

.profile-empty-icon[b-42n3vh45n2] {
    font-size: 4rem;
}

.profile-empty h2[b-42n3vh45n2] {
    color: var(--theme-text-primary);
    margin: 0;
}

.profile-empty p[b-42n3vh45n2] {
    margin: 0;
    max-width: 400px;
}

/* ---- Hero Section ---- */

.profile-hero[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background: var(--theme-surface);
    border-radius: 20px;
    border: 1px solid var(--theme-border);
    position: relative;
}

.profile-back-btn[b-42n3vh45n2] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}

.profile-back-btn:hover[b-42n3vh45n2] {
    color: var(--theme-text-primary);
    background: rgba(var(--theme-primary-rgb), 0.08);
}

.hero-avatar[b-42n3vh45n2] {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: opacity 0.5s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none;
}

/* AIC-V-3 (2026-05-23): Click-to-chat affordance on the hero avatar. Only the
   "active Glitch" state is clickable — when the chat is already open (i.e. the
   avatar is in the .is-companion-away ghost state), interaction is suppressed
   so the user doesn't trigger no-ops by clicking the faded sphere. */
.hero-avatar:not(.is-companion-away)[b-42n3vh45n2] {
    cursor: pointer;
}

/* PROFILE-SLEEVE-1: the halo / robot sleeves on the profile hero. Mirrors Home's
   .pro-hero-mark - the mark paints itself (HALO-1e), the wrapper only supplies the
   robot's ink and the depth shadow; the ring drops the solid-head shadow (HALO-1e). */
.hero-mark[b-42n3vh45n2] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-fab-robot, #334155);
    filter: drop-shadow(0 4px 10px var(--theme-shadow-color, rgba(15, 23, 42, 0.28)));
    transition: transform 0.25s ease;
}

.hero-mark--halo[b-42n3vh45n2] {
    filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.30));
}

.hero-avatar:not(.is-companion-away):hover .hero-mark[b-42n3vh45n2] {
    transform: scale(1.05);
}

.hero-avatar:not(.is-companion-away):hover[b-42n3vh45n2] {
    transform: scale(1.05);
}

.hero-avatar:not(.is-companion-away):active[b-42n3vh45n2] {
    transform: scale(0.98);
    transition: transform 0.08s ease;
}

.hero-avatar:not(.is-companion-away):focus-visible[b-42n3vh45n2] {
    box-shadow: 0 0 0 3px var(--theme-primary, rgba(124, 58, 237, 0.5)),
                0 0 24px 4px var(--theme-primary-soft, rgba(124, 58, 237, 0.25));
    border-radius: 50%;
}

/* AIC-V-2 (2026-05-23): Profile-hero "Glitch is in chat with you" empty state.
   When the FAB chat is open, the same companion renders twice on screen — once
   here, once in the chat overlay. The companion is a singular identity in the
   user's mental model; showing two of him breaks the illusion. We fade the
   page-side avatar to a faint glow and let the FAB-side companion own the
   active presence. ::deep is needed because CompanionEntity is a child
   component and scoped CSS doesn't pass through without it. */
.hero-avatar.is-companion-away[b-42n3vh45n2]  .companion-entity,
.hero-avatar.is-companion-away[b-42n3vh45n2]  > * {
    opacity: 0.15;
    transform: scale(0.92);
    filter: blur(1.5px);
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
}

/* Soft pulsing "perch" — a subtle radial glow that breathes in place when
   Glitch is away. Tells the eye "he's not here right now" without leaving a
   blank hole on the page. */
.hero-avatar.is-companion-away[b-42n3vh45n2]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, var(--theme-primary-soft, rgba(124, 58, 237, 0.18)) 0%, transparent 60%);
    animation: hero-avatar-perch-pulse-b-42n3vh45n2 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes hero-avatar-perch-pulse-b-42n3vh45n2 {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 0.6;  transform: scale(1.0); }
}

.hero-info[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.hero-name[b-42n3vh45n2] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary);
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stage-badges[b-42n3vh45n2] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hero-energy-section[b-42n3vh45n2] {
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.energy-bar-container[b-42n3vh45n2] {
    width: 100%;
    height: 10px;
    background: var(--theme-border);
    border-radius: 5px;
    overflow: hidden;
}

.energy-bar-fill[b-42n3vh45n2] {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
    border-radius: 5px;
    transition: width 0.6s ease;
    min-width: 2px;
}

.energy-label[b-42n3vh45n2] {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

.hero-last-seen[b-42n3vh45n2] {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
    margin: 0;
}

/* ---- Sections ---- */

.profile-section[b-42n3vh45n2] {
    margin-bottom: 2rem;
}

.section-title[b-42n3vh45n2] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 1rem;
}

/* M-V-1 (2026-05): subtitle pairs with the Memories section title to
   disambiguate from the companion's "Memory Files" feature. Quiet — secondary
   text color, smaller font — so it doesn't compete with the cards. */
.section-subtitle[b-42n3vh45n2] {
    margin: -0.75rem 0 1rem;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    font-style: italic;
}

/* ---- Stats Grid ---- */

.stats-grid[b-42n3vh45n2] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.stat-card[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.5rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    text-align: center;
}

.stat-icon[b-42n3vh45n2] {
    font-size: 1.5rem;
}

.stat-value[b-42n3vh45n2] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-label[b-42n3vh45n2] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    line-height: 1.2;
}

/* ---- Evolution Track ---- */

.evolution-track[b-42n3vh45n2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 1rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
}

.evolution-stage[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    position: relative;
}

.evolution-node[b-42n3vh45n2] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--theme-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.evolution-stage.active .evolution-node[b-42n3vh45n2] {
    background: rgba(var(--theme-primary-rgb), 0.15);
    border-color: var(--theme-primary);
}

.evolution-stage.current .evolution-node[b-42n3vh45n2] {
    box-shadow: 0 0 16px rgba(var(--theme-primary-rgb), 0.3);
    animation: pulse-glow-b-42n3vh45n2 2s ease-in-out infinite;
}

@keyframes pulse-glow-b-42n3vh45n2 {
    0%, 100% { box-shadow: 0 0 12px rgba(var(--theme-primary-rgb), 0.2); }
    50% { box-shadow: 0 0 24px rgba(var(--theme-primary-rgb), 0.4); }
}

.evolution-emoji[b-42n3vh45n2] {
    font-size: 1.5rem;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.evolution-stage.active .evolution-emoji[b-42n3vh45n2] {
    opacity: 1;
}

.evolution-name[b-42n3vh45n2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    transition: color 0.3s;
}

.evolution-stage.active .evolution-name[b-42n3vh45n2] {
    color: var(--theme-text-primary);
}

.evolution-current-badge[b-42n3vh45n2] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.evolution-connector[b-42n3vh45n2] {
    width: 40px;
    height: 3px;
    background: var(--theme-border);
    border-radius: 2px;
    margin: 0 0.25rem;
    margin-bottom: 2rem;
    transition: background 0.3s;
}

.evolution-connector.active[b-42n3vh45n2] {
    background: var(--theme-primary);
}

/* ---- Memories Grid ---- */

.memories-grid[b-42n3vh45n2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.memory-card[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.memory-card.available:hover[b-42n3vh45n2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb), 0.12);
}

.memory-card.locked[b-42n3vh45n2] {
    opacity: 0.6;
}

/* M-D-2 (2026-05): focus-visible outline so keyboard users get a clear ring.
   Theme-token tinted; falls back to primary if -rgb token is missing. */
.memory-card:focus-visible[b-42n3vh45n2] {
    outline: 2px solid var(--theme-primary, #fbbf24);
    outline-offset: 2px;
}

/* M-V-3 (2026-05): interactive cards (Birthday, future linked milestones) get
   the same hover lift as .available so they read as actionable. cursor:pointer
   reinforces the intent. */
.memory-card.interactive[b-42n3vh45n2] {
    cursor: pointer;
}

.memory-card.interactive:hover[b-42n3vh45n2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb), 0.12);
}

/* M-V-3 (2026-05): "View activity →" hint appears at the bottom of the
   interactive Birthday card. Soft until hover, then warms up to primary. */
.memory-card-hint[b-42n3vh45n2] {
    margin-top: 0.4rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    transition: color 0.2s ease;
}

.memory-card.interactive:hover .memory-card-hint[b-42n3vh45n2] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.memory-icon[b-42n3vh45n2] {
    font-size: 2rem;
}

.memory-card h3[b-42n3vh45n2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.memory-card p[b-42n3vh45n2] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

.memory-detail[b-42n3vh45n2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* ---- AURA-SRC-1 (2026-10-19): per-reason breakdown ahead of the timeline ---- */
/* Same family as .stat-card (lifetime) but a little lighter, and auto-fill so Wide gets a
   single row and a 390px phone gets 2-up. */
.activity-source-grid[b-42n3vh45n2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.activity-source-card[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.9rem 0.5rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
    text-align: center;
    min-width: 0;
}

.activity-source-icon[b-42n3vh45n2] { font-size: 1.5rem; line-height: 1; }

.activity-source-amount[b-42n3vh45n2] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary));
    white-space: nowrap;
}
.activity-source-amount.negative[b-42n3vh45n2] { color: var(--theme-text-danger, #ef4444); }

.activity-source-label[b-42n3vh45n2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    line-height: 1.2;
}

.activity-source-count[b-42n3vh45n2] {
    font-size: 0.72rem;
    color: var(--theme-text-muted);
}

.activity-details-toggle[b-42n3vh45n2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 44px;
    margin-bottom: 0.75rem;
    padding: 0.55rem 1rem;
    background: transparent;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    color: var(--theme-text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.activity-details-toggle:hover[b-42n3vh45n2] {
    color: var(--theme-text-primary);
    background: rgba(var(--theme-primary-rgb), 0.06);
    border-color: var(--theme-primary, #6366f1);
}

.activity-details-toggle:focus-visible[b-42n3vh45n2] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

.activity-details-toggle svg[b-42n3vh45n2] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.activity-details-toggle[aria-expanded="true"] svg[b-42n3vh45n2] { transform: rotate(180deg); }

/* ---- Progress Timeline ---- */

.timeline[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-entry[b-42n3vh45n2] {
    display: flex;
    gap: 0.75rem;
    position: relative;
}

.timeline-icon-col[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 40px;
}

.timeline-icon[b-42n3vh45n2] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(var(--theme-primary-rgb), 0.1);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.timeline-line[b-42n3vh45n2] {
    width: 2px;
    flex: 1;
    background: var(--theme-border);
    min-height: 12px;
}

.timeline-entry:last-child .timeline-line[b-42n3vh45n2] {
    display: none;
}

.timeline-card[b-42n3vh45n2] {
    flex: 1;
    /* MOBILE-AUDIT-2 (2026-10-02): a flex item's min-width defaults to its content, and
       .timeline-context is nowrap - one long context line pushed the card to 733px on a
       390px phone, cutting it off. min-width:0 lets the ellipsis actually engage. */
    min-width: 0;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.timeline-card:hover[b-42n3vh45n2] {
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.08);
}

.timeline-card-header[b-42n3vh45n2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.timeline-reason[b-42n3vh45n2] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.timeline-energy-badge[b-42n3vh45n2] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
}

.timeline-energy-badge.positive[b-42n3vh45n2] {
    color: var(--theme-primary-ink, var(--theme-primary));
    background: rgba(var(--theme-primary-rgb), 0.12);
}

.timeline-energy-badge.negative[b-42n3vh45n2] {
    color: var(--theme-text-danger, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

.timeline-context[b-42n3vh45n2] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.timeline-time[b-42n3vh45n2] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.timeline-empty[b-42n3vh45n2] {
    padding: 2rem;
    text-align: center;
    color: var(--theme-text-muted);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
}

.timeline-empty p[b-42n3vh45n2] {
    margin: 0;
    font-size: 0.9rem;
}

/* ---- Dark Theme Overrides ---- */

.is-dark .profile-hero[b-42n3vh45n2] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .stat-card[b-42n3vh45n2],
.is-dark .evolution-track[b-42n3vh45n2],
.is-dark .memory-card[b-42n3vh45n2],
.is-dark .timeline-card[b-42n3vh45n2],
.is-dark .timeline-empty[b-42n3vh45n2] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .timeline-icon[b-42n3vh45n2] {
    background: rgba(var(--theme-primary-rgb), 0.15);
    border-color: rgba(var(--theme-primary-rgb), 0.25);
}

.is-dark .timeline-line[b-42n3vh45n2] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .evolution-node[b-42n3vh45n2] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .evolution-stage.active .evolution-node[b-42n3vh45n2] {
    background: rgba(var(--theme-primary-rgb), 0.2);
}

.is-dark .energy-bar-container[b-42n3vh45n2] {
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .timeline[b-42n3vh45n2] {
    border-left-color: rgba(255, 255, 255, 0.1);
}

.is-dark .evolution-connector[b-42n3vh45n2] {
    background: rgba(255, 255, 255, 0.1);
}

/* ---- Responsive ---- */

/* ===== ARMS-UNLOCK (2026-07-30): Customize (wardrobe) section =====
   Theme-variable driven so all 9 themes (incl. Slate) render without
   per-theme enumeration — see the .is-dark sweep rule. */
.wardrobe-card[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 14px;
}

.wardrobe-group[b-42n3vh45n2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wardrobe-group-label[b-42n3vh45n2] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
}

.wardrobe-swatches[b-42n3vh45n2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.wardrobe-swatch[b-42n3vh45n2] {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid var(--theme-border);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* "Classic" = the natural (no-tint) sprite — gold-ish swatch, not the raw
   #3498db sentinel, which would misleadingly read as blue (CE-V-3 gotcha). */
.wardrobe-swatch.classic[b-42n3vh45n2] {
    background: radial-gradient(circle at 35% 35%, #ffe9a8, #f0b429 70%);
}

.wardrobe-swatch:hover:not(:disabled)[b-42n3vh45n2] {
    transform: scale(1.1);
}

.wardrobe-swatch.is-selected[b-42n3vh45n2] {
    box-shadow: 0 0 0 3px var(--theme-primary);
}

.wardrobe-chips[b-42n3vh45n2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.wardrobe-chip[b-42n3vh45n2] {
    position: relative;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    background: transparent;
    color: var(--theme-text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.wardrobe-chip:hover:not(:disabled)[b-42n3vh45n2] {
    border-color: var(--theme-primary);
}

.wardrobe-chip.is-selected[b-42n3vh45n2] {
    background: rgba(var(--theme-primary-rgb), 0.12);
    border-color: var(--theme-primary);
    font-weight: 600;
}

.wardrobe-swatch.is-locked[b-42n3vh45n2],
.wardrobe-chip.is-locked[b-42n3vh45n2] {
    opacity: 0.45;
    cursor: not-allowed;
}

.wardrobe-lock[b-42n3vh45n2] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    font-size: 0.7rem;
}

.wardrobe-actions[b-42n3vh45n2] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--theme-border);
}

@media (max-width: 640px) {
    .companion-profile[b-42n3vh45n2] {
        padding: 1rem;
    }

    .stats-grid[b-42n3vh45n2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .evolution-track[b-42n3vh45n2] {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem;
    }

    .evolution-connector[b-42n3vh45n2] {
        display: none;
    }

    .memories-grid[b-42n3vh45n2] {
        grid-template-columns: 1fr;
    }

    .hero-name[b-42n3vh45n2] {
        font-size: 1.4rem;
    }
}

/* ===== YOUR-AI-1 (2026-10-18): the five axes - Sleeve · Voice · Brain · Memory · Context ===== */
/* Josh (12:05): "I'd rather one column stacked instead of two." One card per row; each
   card is a two-column grid - label + help on the left, the control on the right - so a
   full-width row carries its control instead of leaving half the card empty. */
.your-ai-grid[b-42n3vh45n2] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.your-ai-card[b-42n3vh45n2] {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 1.5rem;
    row-gap: 0.25rem;
    padding: 1rem 1.25rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.25));
    border-radius: 12px;
    min-width: 0;
}

.your-ai-card-title[b-42n3vh45n2] {
    grid-column: 1;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.your-ai-card-help[b-42n3vh45n2] {
    grid-column: 1;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--theme-text-secondary);
}

.your-ai-card-body[b-42n3vh45n2] {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-width: 0;
}

@media (max-width: 640px) {
    .your-ai-card[b-42n3vh45n2] { grid-template-columns: 1fr; }
    .your-ai-card-body[b-42n3vh45n2] { grid-column: 1; grid-row: auto; margin-top: 0.4rem; }
}

.your-ai-muted[b-42n3vh45n2] { color: var(--theme-text-secondary); font-size: 0.9rem; margin: 0; }

/* Brain */
.your-ai-brain[b-42n3vh45n2] { display: flex; align-items: center; gap: 0.7rem; }
.your-ai-brain-emoji[b-42n3vh45n2] { font-size: 1.6rem; line-height: 1; }
.your-ai-brain-text[b-42n3vh45n2] { display: flex; flex-direction: column; min-width: 0; }
.your-ai-brain-text strong[b-42n3vh45n2] { color: var(--theme-text-primary); }
.your-ai-brain-text span[b-42n3vh45n2] { font-size: 0.85rem; color: var(--theme-text-secondary); }
/* VOICE-CARDS-1: brain tiles (admin). Same family as the Sleeve / Voice tiles. */
.brain-grid[b-42n3vh45n2] { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.brain-card[b-42n3vh45n2] {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    padding: 12px 14px;
    border: 2px solid var(--theme-border, #e2e8f0); border-radius: 12px;
    background: var(--theme-surface, #fff); color: inherit; font: inherit; cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.brain-card:hover:not(:disabled)[b-42n3vh45n2] { border-color: #94a3b8; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.brain-card.selected[b-42n3vh45n2] { border-color: var(--theme-primary, #6366f1); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.brain-card:disabled[b-42n3vh45n2] { cursor: default; opacity: 0.7; }
.brain-card-emoji[b-42n3vh45n2] { font-size: 1.3rem; line-height: 1.2; }
.brain-card-text[b-42n3vh45n2] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brain-card-name[b-42n3vh45n2] { font-weight: 600; color: var(--theme-text-primary); }
.brain-card-desc[b-42n3vh45n2] { font-size: 0.82rem; line-height: 1.35; color: var(--theme-text-secondary); }
.brain-card-cost[b-42n3vh45n2] { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--theme-primary-ink, var(--theme-primary, #6366f1)); margin-top: 2px; }

/* Memory */
.your-ai-memory[b-42n3vh45n2] { display: flex; flex-direction: column; gap: 0.35rem; }
.your-ai-memory-file[b-42n3vh45n2] { border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.25)); border-radius: 8px; padding: 0.4rem 0.6rem; }
.your-ai-memory-file summary[b-42n3vh45n2] { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-size: 0.9rem; }
.your-ai-memory-file summary[b-42n3vh45n2]::-webkit-details-marker { display: none; }
.your-ai-memory-type[b-42n3vh45n2] { font-weight: 600; color: var(--theme-text-primary); }
.your-ai-memory-count[b-42n3vh45n2] { font-size: 0.8rem; color: var(--theme-text-secondary); }
.your-ai-memory-body[b-42n3vh45n2] {
    margin: 0.5rem 0 0.2rem;
    white-space: pre-wrap;
    font: inherit;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--theme-text-secondary);
    max-height: 220px;
    overflow: auto;
}

/* Context */
.your-ai-context[b-42n3vh45n2] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.6rem 1.25rem; }
.your-ai-context li[b-42n3vh45n2] { display: grid; grid-template-columns: 1fr; gap: 0.1rem; font-size: 0.9rem; }
.your-ai-context strong[b-42n3vh45n2] { color: var(--theme-text-primary); font-weight: 600; }
.your-ai-context span[b-42n3vh45n2] { color: var(--theme-text-secondary); }
.your-ai-context a[b-42n3vh45n2] { font-size: 0.8rem; color: var(--theme-primary-ink, var(--theme-primary, #6366f1)); justify-self: start; }

/* AUDIO-DIAG-1 (2026-10-18): admin-only, per-device audio A/B switches under the voice picker. */
.audio-diag[b-42n3vh45n2] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--theme-border, rgba(100, 116, 139, 0.45));
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}
.audio-diag-title[b-42n3vh45n2] {
    font-weight: 600;
    color: var(--theme-text-primary);
}
.audio-diag-scope[b-42n3vh45n2] {
    font-weight: 400;
    color: var(--theme-text-secondary);
    margin-left: 0.3rem;
}
.audio-diag-row[b-42n3vh45n2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;   /* a finger target on the phone it exists for */
    cursor: pointer;
    color: var(--theme-text-primary);
}
.audio-diag-row input[b-42n3vh45n2] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
.audio-diag-help[b-42n3vh45n2] { font-size: 0.75rem; }

/* NAME-FIELD-1 (2026-10-20): the hero name is the rename field. The button inherits the gradient text;
   the pencil sits in the name's own ink and only shows on hover/focus so the hero stays a name, not a form. */
.hero-name-btn[b-42n3vh45n2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    -webkit-text-fill-color: inherit;
    cursor: text;
    border-radius: 8px;
}
.hero-name-btn svg[b-42n3vh45n2] {
    flex: 0 0 auto;
    opacity: 0;
    color: var(--theme-text-secondary);
    -webkit-text-fill-color: var(--theme-text-secondary);
    transition: opacity 0.15s ease;
}
.hero-name-btn:hover svg[b-42n3vh45n2],
.hero-name-btn:focus-visible svg[b-42n3vh45n2],
.hero-name--unnamed .hero-name-btn svg[b-42n3vh45n2] { opacity: 1; }
.hero-name-btn:focus-visible[b-42n3vh45n2] { outline: 2px solid var(--theme-primary); outline-offset: 4px; }
.hero-name--unnamed[b-42n3vh45n2] {
    background: none;
    -webkit-text-fill-color: var(--theme-text-secondary);
    color: var(--theme-text-secondary);
    font-weight: 600;
}
.hero-name-edit[b-42n3vh45n2] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    max-width: 420px;
}
.hero-name-input[b-42n3vh45n2] {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    width: 220px;
    max-width: 100%;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--theme-border, #cbd5e1);
    border-radius: 10px;
    background: var(--theme-surface, #fff);
    color: var(--theme-text-primary);
}
.hero-name-input:focus[b-42n3vh45n2] { outline: 2px solid var(--theme-primary); outline-offset: 2px; }
.hero-name-save[b-42n3vh45n2],
.hero-name-cancel[b-42n3vh45n2] {
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--theme-border, #cbd5e1);
    background: var(--theme-surface, #fff);
    color: var(--theme-text-primary);
}
.hero-name-save[b-42n3vh45n2] { background: var(--theme-primary); border-color: var(--theme-primary); color: #fff; }
.hero-name-save:disabled[b-42n3vh45n2], .hero-name-cancel:disabled[b-42n3vh45n2] { opacity: 0.6; cursor: default; }
.hero-name-error[b-42n3vh45n2] {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.8125rem;
    color: var(--theme-danger, #dc2626);
    text-align: center;
}
/* /Pages/Company/Services.razor.rz.scp.css */
/* SITE-CO-1 /services — the company page beside the product. Theme tokens only; the
   product page keeps its own established look, this one is plainer on purpose. */

.svc-page[b-c9w1aq24z1] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 24px 72px;
    color: var(--theme-text-primary, #1a202c);
}

.svc-kicker[b-c9w1aq24z1] {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.svc-hero[b-c9w1aq24z1] { padding: 24px 0 40px; max-width: 760px; }
.svc-hero h1[b-c9w1aq24z1] {
    margin: 0 0 16px;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.svc-sub[b-c9w1aq24z1] {
    margin: 0 0 24px;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--theme-text-secondary, #64748b);
}
.svc-hero-actions[b-c9w1aq24z1] { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.svc-btn-primary[b-c9w1aq24z1] {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 10px;
    border: none;
    background: var(--theme-cta-gradient, var(--theme-primary, #6366f1));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px -6px var(--theme-shadow-color, rgba(99, 102, 241, 0.45));
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.svc-btn-primary:hover[b-c9w1aq24z1] { transform: translateY(-1px); }
.svc-btn-primary:disabled[b-c9w1aq24z1] { opacity: 0.7; cursor: default; transform: none; }

.svc-link[b-c9w1aq24z1] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    text-decoration: none;
}
.svc-link:hover[b-c9w1aq24z1] { text-decoration: underline; }

.svc-offers[b-c9w1aq24z1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 8px 0 48px;
}
.svc-offer[b-c9w1aq24z1] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 24px;
}
.svc-offer h2[b-c9w1aq24z1] { margin: 0 0 4px; font-size: 1.35rem; font-weight: 800; }
.svc-offer-lead[b-c9w1aq24z1] { margin: 0 0 12px; font-weight: 600; color: var(--theme-text-primary, #1a202c); }
.svc-offer p[b-c9w1aq24z1] { line-height: 1.55; color: var(--theme-text-secondary, #64748b); }
.svc-example[b-c9w1aq24z1] {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    font-size: 0.9rem;
    font-style: italic;
}

/* The form card spans the full container so its edges line up with the three offer
   cards above it (Josh, 9/12). Running text keeps the 760px reading measure - a box
   that misses the grid reads as a mistake, a paragraph that stops short does not. */
.svc-start[b-c9w1aq24z1] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 20px;
    padding: 32px;
}
.svc-start h2[b-c9w1aq24z1] { margin: 0 0 6px; font-size: 1.6rem; font-weight: 800; }
.svc-start-sub[b-c9w1aq24z1] { margin: 0 0 20px; color: var(--theme-text-secondary, #64748b); line-height: 1.55; }

.svc-form[b-c9w1aq24z1] { display: flex; flex-direction: column; gap: 14px; }
.svc-form-row[b-c9w1aq24z1] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.svc-form label[b-c9w1aq24z1] { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.svc-form input[b-c9w1aq24z1], .svc-form textarea[b-c9w1aq24z1] {
    width: 100%;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-primary, #1a202c);
    font: inherit;
    font-weight: 400;
}
.svc-form input:focus[b-c9w1aq24z1], .svc-form textarea:focus[b-c9w1aq24z1] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #6366f1) 20%, transparent);
}
.svc-form textarea[b-c9w1aq24z1] { resize: vertical; min-height: 120px; }
.svc-form .svc-btn-primary[b-c9w1aq24z1] { align-self: flex-start; }
.svc-fine[b-c9w1aq24z1] { margin: 0; font-size: 0.85rem; color: var(--theme-text-secondary, #64748b); }
.svc-error[b-c9w1aq24z1] { margin: 0; color: var(--theme-text-danger, #dc2626); font-weight: 600; }

.svc-hp[b-c9w1aq24z1] { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.svc-success h2[b-c9w1aq24z1] { margin: 0 0 8px; font-size: 1.6rem; font-weight: 800; }
.svc-success p[b-c9w1aq24z1] { line-height: 1.6; color: var(--theme-text-secondary, #64748b); }

@media (max-width: 860px) {
    .svc-offers[b-c9w1aq24z1] { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .svc-page[b-c9w1aq24z1] { padding: 16px 16px 56px; }
    .svc-form-row[b-c9w1aq24z1] { grid-template-columns: 1fr; }
    .svc-start[b-c9w1aq24z1] { padding: 22px; }
}
/* /Pages/Company/Work.razor.rz.scp.css */
/* SITE-CO-1 /work — case studies. Same plain register as /services. */

.work-page[b-llsrx7l82j] {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 24px 72px;
    color: var(--theme-text-primary, #1a202c);
}

.work-kicker[b-llsrx7l82j] {
    margin: 0 0 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}
.work-hero[b-llsrx7l82j] { padding: 24px 0 36px; max-width: 760px; }
.work-hero h1[b-llsrx7l82j] {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.work-sub[b-llsrx7l82j] { margin: 0; font-size: 1.15rem; line-height: 1.6; color: var(--theme-text-secondary, #64748b); }

.work-list[b-llsrx7l82j] { display: flex; flex-direction: column; gap: 20px; padding-bottom: 48px; }

.work-case[b-llsrx7l82j] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 20px;
    padding: 28px;
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 28px;
}
.work-case header[b-llsrx7l82j] { min-width: 0; }
/* The industry leads (Josh, 9/12): a visitor's first question is "have you built for a
   business like mine?", so the sector gets the h2 and the client name sits under it. */
.work-client[b-llsrx7l82j] {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}
.work-tag[b-llsrx7l82j] {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}
.work-case h2[b-llsrx7l82j] { margin: 0 0 2px; font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.work-problem[b-llsrx7l82j] { margin: 0; font-weight: 600; line-height: 1.4; }
.work-body p[b-llsrx7l82j] { margin: 0 0 12px; line-height: 1.6; color: var(--theme-text-secondary, #64748b); }
.work-actions[b-llsrx7l82j] { margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.work-sep[b-llsrx7l82j] { color: var(--theme-text-secondary, #64748b); }
.work-link[b-llsrx7l82j] { color: var(--theme-primary-ink, var(--theme-primary, #6366f1)); font-weight: 600; text-decoration: none; }
.work-link:hover[b-llsrx7l82j] { text-decoration: underline; }

/* The flagship gets its screenshot, full width under the text. */
.work-case--nts[b-llsrx7l82j] { grid-template-rows: auto auto; }
.work-shot[b-llsrx7l82j] {
    grid-column: 1 / -1;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--theme-border, #e2e8f0);
}
.work-shot img[b-llsrx7l82j] { display: block; width: 100%; height: auto; }

.work-close[b-llsrx7l82j] {
    text-align: center;
    padding: 8px 0 0;
}
.work-close h2[b-llsrx7l82j] { margin: 0 0 8px; font-size: 1.6rem; font-weight: 800; }
.work-close p[b-llsrx7l82j] { margin: 0 auto 18px; max-width: 560px; line-height: 1.6; color: var(--theme-text-secondary, #64748b); }
.work-btn-primary[b-llsrx7l82j] {
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    border-radius: 10px;
    background: var(--theme-cta-gradient, var(--theme-primary, #6366f1));
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px -6px var(--theme-shadow-color, rgba(99, 102, 241, 0.45));
    transition: transform 150ms ease;
}
.work-btn-primary:hover[b-llsrx7l82j] { transform: translateY(-1px); }

@media (max-width: 760px) {
    .work-case[b-llsrx7l82j] { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
}
@media (max-width: 600px) {
    .work-page[b-llsrx7l82j] { padding: 16px 16px 56px; }
}
/* /Pages/Contacts/ContactDetail.razor.rz.scp.css */
/* ============================================
   CONTACT DETAIL PAGE — Professional Design
   Uses CSS variables from theme-variables.css
   for automatic theme adaptation.
   ============================================ */

/* Page Container — flex column for consistent spacing */
.detail-page-container[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Header — clean card surface, no gradient */
.contact-header[b-3tq98mglpt] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.header-top-row[b-3tq98mglpt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.header-actions[b-3tq98mglpt] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.header-profile[b-3tq98mglpt] {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Avatar — solid professional background */
.contact-avatar-large[b-3tq98mglpt] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--theme-primary, #334155);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-btn-text, #ffffff);
    flex-shrink: 0;
    letter-spacing: 1px;
}

/* Photo variant: when ContactImage is populated, the avatar element is an
   <img> instead of a <div>. Override the flex-centering rules (which don't
   apply to img anyway) and use object-fit: cover so non-square photos crop
   to the circle without distortion. The .contact-avatar-large base rule
   above gives the size + circle shape; this rule just handles the image
   case. */
img.contact-avatar-photo[b-3tq98mglpt] {
    object-fit: cover;
    background: var(--theme-surface, #f1f5f9);
}

.header-info[b-3tq98mglpt] {
    flex: 1;
    min-width: 0;
}

.contact-name[b-3tq98mglpt] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    line-height: 1.2;
}

.contact-position[b-3tq98mglpt] {
    margin: 4px 0 10px;
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #475569);
}

/* "{Type} since {Mon yyyy}" line below the badges. Mirrors AccountDetail's
   .account-subtitle pattern so the relationship-duration affordance reads
   consistently across both detail pages. Same tone as .contact-position
   (muted secondary) so it doesn't compete with the name. */
.contact-subtitle[b-3tq98mglpt] {
    margin: 10px 0 0;
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Email/phone reachability row in the header — counterpart to AccountDetail's
   .primary-contact-row but anchored on the contact's own contact info rather
   than the linked primary contact. Inline icons + clickable links. */
.contact-reach-row[b-3tq98mglpt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
}

.contact-reach-link[b-3tq98mglpt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--theme-link-color, var(--theme-primary, #334155));
    text-decoration: none;
}

.contact-reach-link:hover[b-3tq98mglpt] {
    text-decoration: underline;
}

.contact-reach-divider[b-3tq98mglpt] {
    opacity: 0.4;
}

.contact-badges[b-3tq98mglpt] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Content Grid */
/* CAMP-INFO-POLISH (2026-06-19): single-column stack so every section (Contact Information, Social Media,
   Customer Journey, …) is uniform full-width — was auto-fit, which left Social Media at a lonely half-width
   beside the full-width cards. .full-width is now a harmless no-op (already full-width in one column). */
.contact-content[b-3tq98mglpt] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.contact-content .full-width[b-3tq98mglpt] {
    grid-column: 1 / -1;
}

/* Journey card — remove default detail-card padding */
.journey-card[b-3tq98mglpt] {
    padding: 0 !important;
    overflow: hidden;
}

/* Info Items — clean key-value rows */
.info-items[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
}

.info-item[b-3tq98mglpt] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.info-item:last-child[b-3tq98mglpt] {
    border-bottom: none;
    padding-bottom: 0;
}

.info-item:first-child[b-3tq98mglpt] {
    padding-top: 0;
}

.info-label[b-3tq98mglpt] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--theme-text-secondary, #475569);
}

.info-label svg[b-3tq98mglpt] {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    color: var(--theme-accent, #475569);
}

.info-value[b-3tq98mglpt] {
    flex: 1;
    word-break: break-word;
    color: var(--theme-text-primary, #0f172a);
    font-size: 0.925rem;
}

.info-link[b-3tq98mglpt] {
    text-decoration: none;
    color: var(--theme-accent, #475569);
    transition: color 0.2s ease;
}

.info-link:hover[b-3tq98mglpt] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    text-decoration: underline;
}

/* Social Links */
.social-links[b-3tq98mglpt] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-link[b-3tq98mglpt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.social-link svg[b-3tq98mglpt] {
    width: 22px;
    height: 22px;
}

.social-link:hover[b-3tq98mglpt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.social-link.linkedin[b-3tq98mglpt] { background: #0077b5; color: white; }
.social-link.twitter[b-3tq98mglpt] { background: #1da1f2; color: white; }
.social-link.facebook[b-3tq98mglpt] { background: #4267b2; color: white; }
.social-link.instagram[b-3tq98mglpt] { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; }
.social-link.skype[b-3tq98mglpt] { background: #00aff0; color: white; }

/* Description */
.description-text[b-3tq98mglpt] {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.925rem;
}

/* Addresses */
.addresses-list[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.address-item[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.address-type[b-3tq98mglpt] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-accent, #475569);
}

.address-content[b-3tq98mglpt] {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--theme-text-primary, #0f172a);
    font-size: 0.925rem;
}

/* Loading / Empty States */
.detail-loading[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 16px;
    color: var(--theme-text-secondary, #64748b);
}

.spinner[b-3tq98mglpt] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #334155);
    border-radius: 50%;
    animation: spin-b-3tq98mglpt 0.8s linear infinite;
}

@keyframes spin-b-3tq98mglpt {
    to { transform: rotate(360deg); }
}

.detail-empty[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    gap: 12px;
    padding: 40px;
}

.detail-empty svg[b-3tq98mglpt] {
    width: 64px;
    height: 64px;
    color: var(--theme-text-muted, #94a3b8);
}

.detail-empty h2[b-3tq98mglpt] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--theme-text-primary, #0f172a);
}

.detail-empty p[b-3tq98mglpt] {
    margin: 0;
    color: var(--theme-text-secondary, #64748b);
}

/* ============================================
   DARK THEME OVERRIDES
   Applies to all 6 dark themes via :is()
   ============================================ */
.is-dark .contact-header[b-3tq98mglpt] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .contact-avatar-large[b-3tq98mglpt] {
    background: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.is-dark .info-item[b-3tq98mglpt] {
    border-color: rgba(148, 163, 184, 0.12);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .contact-header[b-3tq98mglpt] {
        padding: 20px;
    }

    .header-top-row[b-3tq98mglpt] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .header-profile[b-3tq98mglpt] {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .contact-name[b-3tq98mglpt] {
        font-size: 1.3rem;
    }

    .contact-badges[b-3tq98mglpt] {
        justify-content: center;
    }

    .header-actions[b-3tq98mglpt] {
        width: 100%;
        justify-content: flex-end;
    }

    .contact-content[b-3tq98mglpt] {
        grid-template-columns: 1fr;
    }

    .info-item[b-3tq98mglpt] {
        flex-direction: column;
        gap: 4px;
    }

    .info-label[b-3tq98mglpt] {
        min-width: auto;
    }
}

/* Account link in contact info and badge */
.account-link[b-3tq98mglpt] {
    cursor: pointer;
    color: var(--theme-link-color, var(--theme-primary));
    transition: color 0.2s;
}

.account-link:hover[b-3tq98mglpt] {
    color: var(--theme-link-hover-color, var(--theme-primary));
    text-decoration: underline;
}

button.account-link[b-3tq98mglpt] {
    background: none;
    border: none;
    font: inherit;
    padding: inherit;
}

/* When the .account-link button is ALSO a .detail-status-badge (the LIENMASTER
   pill in the contact header), the visual semantic is "this is a clickable
   chip" not "this is a text link." Drop the link-style underline and color
   override entirely so the chip reads as a badge first; the cursor: pointer
   + the subtle hover-bg lift below carry the affordance.

   IMPORTANT: explicitly re-apply the badge's padding + font-size here. The
   sibling `button.account-link { padding: inherit; font: inherit }` rule
   above is more specific than `.detail-status-badge` and silently inherits
   the parent's (large) padding + font, blowing the chip up to several times
   its intended size. This rule wins via the doubled-class specificity and
   restores the badge's intended dimensions.

   The earlier hybrid treatment (badge bg + link underline + inherited
   padding) made the chip look unfinished — neither a real badge nor a real
   link, and grossly oversized. See DECISIONS.md → "2026-04-29: CRM
   detail-pages polish arc → Contacts polish bundle → addendum (account chip
   visual fix)". */
button.detail-status-badge.account-link[b-3tq98mglpt] {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
    /* Re-apply badge sizing — overrides the padding: inherit / font: inherit
       from the sibling button.account-link rule above. */
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: normal;
}

button.detail-status-badge.account-link:hover[b-3tq98mglpt],
button.detail-status-badge.account-link:focus[b-3tq98mglpt],
button.detail-status-badge.account-link:active[b-3tq98mglpt] {
    color: inherit;
    text-decoration: none;
    /* Subtle interactive lift — slight brightness bump on hover lets the
       chip respond to the cursor without competing with the more-saturated
       Type/Category badges next to it. */
    filter: brightness(1.1);
    outline: none;
}

button.detail-status-badge.account-link:focus-visible[b-3tq98mglpt] {
    /* Keyboard focus needs a visible ring; brightness alone isn't enough. */
    box-shadow: 0 0 0 2px var(--theme-primary, #334155);
}

/* ============================================
   Related Work card — opportunities + invoices + work items
   surfaced for the contact (and the contact's linked account).
   Three-bucket grid that collapses to one column on narrow viewports.
   See DECISIONS.md → "2026-04-29: CRM detail-pages polish arc →
   Contacts polish bundle → V-1".
   ============================================ */

.related-work-card .detail-card-title[b-3tq98mglpt] {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.related-work-via[b-3tq98mglpt] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--theme-text-muted, #64748b);
    margin-left: 4px;
}

.related-work-account-link[b-3tq98mglpt] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--theme-link-color, var(--theme-primary));
    cursor: pointer;
    text-decoration: none;
}

.related-work-account-link:hover[b-3tq98mglpt] {
    text-decoration: underline;
}

.related-work-grid[b-3tq98mglpt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.related-work-bucket[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--theme-surface-subtle, rgba(241, 245, 249, 0.5));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    min-width: 0;
}

.related-work-bucket-header[b-3tq98mglpt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bucket-label[b-3tq98mglpt] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary, #475569);
}

.bucket-count[b-3tq98mglpt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--theme-primary, #334155);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
}

.related-work-list[b-3tq98mglpt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related-work-item[b-3tq98mglpt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--theme-border-subtle, rgba(226, 232, 240, 0.5));
    min-width: 0;
}

.related-work-item:last-child[b-3tq98mglpt] {
    border-bottom: none;
}

.related-work-item-title[b-3tq98mglpt] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.related-work-item-title[b-3tq98mglpt] {
    color: var(--theme-link-color, var(--theme-primary));
}

a.related-work-item-title:hover[b-3tq98mglpt] {
    text-decoration: underline;
}

.related-work-item-meta[b-3tq98mglpt] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
}

.related-work-bucket-more[b-3tq98mglpt] {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--theme-link-color, var(--theme-primary));
    text-decoration: none;
}

.related-work-bucket-more:hover[b-3tq98mglpt] {
    text-decoration: underline;
}

/* Dark theme variants — the bucket needs a quieter background and the
   text-primary fallback flips to a light tone so item titles remain
   legible on the dark surface. */
.is-dark .related-work-bucket[b-3tq98mglpt] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .related-work-item[b-3tq98mglpt] {
    border-color: rgba(148, 163, 184, 0.1);
}

.is-dark .related-work-item-title[b-3tq98mglpt] {
    color: #f1f5f9;
}

.is-dark .bucket-label[b-3tq98mglpt] {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   Stats Grid — mirrors AccountDetail.razor.css's stats-grid /
   stat-card pattern so both CRM detail pages have the same
   visual rhythm below the header. Same minmax(220px, 1fr)
   auto-fit grid, same 4-card row at desktop widths, same
   primary/info/success/error/warning icon variants.
   ============================================ */
.stats-grid[b-3tq98mglpt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-3tq98mglpt] {
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-3tq98mglpt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon[b-3tq98mglpt] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon.primary[b-3tq98mglpt] { color: var(--theme-primary-ink, var(--theme-primary, #334155)); background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.1); }
.stat-icon.info[b-3tq98mglpt] { color: #0ea5e9; background: #e0f2fe; }
.stat-icon.success[b-3tq98mglpt] { color: #10b981; background: #dcfce7; }
.stat-icon.error[b-3tq98mglpt] { color: #ef4444; background: #fee2e2; }
/* Warning variant for the Invoices stat — amber accent matches the lifecycle
   tag color used elsewhere for "needs attention" states. AccountDetail.razor.css
   doesn't define this variant yet (its stats use only primary/info/success/error),
   so this is a Contacts-page addition; could be promoted to shared CSS if/when
   AccountDetail wants the variant too. */
.stat-icon.warning[b-3tq98mglpt] { color: #f59e0b; background: #fef3c7; }

.stat-value[b-3tq98mglpt] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0;
}

.stat-label[b-3tq98mglpt] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
    margin: 4px 0 0 0;
}

/* Dark theme overrides — match AccountDetail's treatment so stats look
   consistent across both pages on the dark themes. */
.is-dark .stat-card[b-3tq98mglpt] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .stat-value[b-3tq98mglpt] {
    color: #f1f5f9;
}

.is-dark .stat-label[b-3tq98mglpt] {
    color: #cbd5e1;
}

/* /Pages/Contacts/ContactDialog.razor.rz.scp.css */
/* ============================================
   CONTACT DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.contact-form[b-cq7dyyb2x8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form-row[b-cq7dyyb2x8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .contact-form-row[b-cq7dyyb2x8] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.contact-form-group[b-cq7dyyb2x8] {
    margin-bottom: 8px;
}

.contact-form-group label[b-cq7dyyb2x8] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.required-indicator[b-cq7dyyb2x8] {
    color: #ef4444;
}

/* LEAD-MODEL-1: "name or company" hint under the company fields. Theme
   variable only, so it follows all nine themes (incl. Slate). */
.contact-form-hint[b-cq7dyyb2x8] {
    margin: -4px 0 4px;
    font-size: 0.8125rem;
    color: var(--theme-text-secondary);
}

/* Form Inputs */
.contact-form-input[b-cq7dyyb2x8] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    font-family: inherit;
}

.contact-form-input:focus[b-cq7dyyb2x8] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

.contact-form-input.input-error[b-cq7dyyb2x8] {
    border-color: var(--theme-text-danger);
}

/* Placeholder styling */
.contact-form-input[b-cq7dyyb2x8]::placeholder {
    color: #9ca3af;
}

.is-dark .contact-form-input[b-cq7dyyb2x8]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
/* /Pages/Contacts/Contacts.razor.rz.scp.css */
/* ============================================
   CONTACTS PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - minimal overrides here
   ============================================ */

/* Clickable stat-card variant (used by the "Other" stat which doubles
   as a quick-filter into ContactType.Other rows). Mirrors the AccountDetail
   Monthly Summary clickable-card pattern. Visual cue (cursor + hover)
   only renders when the card has a non-zero count, since clicking an
   empty bucket is a no-op. The .is-active treatment matches the
   Monthly Summary primary-gradient style so the "active filter" affordance
   reads consistently across the app. */
.list-page-stat-card.stat-card-clickable[b-ao2s9tyffm] {
    cursor: pointer;
}

.list-page-stat-card.stat-card-clickable:focus-visible[b-ao2s9tyffm] {
    outline: 2px solid var(--theme-primary, #334155);
    outline-offset: 2px;
}

.list-page-stat-card.is-active[b-ao2s9tyffm] {
    background: linear-gradient(135deg, var(--theme-primary, #334155), var(--theme-accent, #475569));
    border-color: transparent;
    color: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.list-page-stat-card.is-active .list-page-stat-value[b-ao2s9tyffm],
.list-page-stat-card.is-active .list-page-stat-label[b-ao2s9tyffm] {
    color: white;
}

/* /Pages/Courses/CourseCard.razor.rz.scp.css */
.course-card[b-a0n0vr8uud] {
    background: var(--card-bg, white);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-direction: column;
}

.course-card:hover[b-a0n0vr8uud] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.course-card.enrolled[b-a0n0vr8uud] {
    border-color: var(--accent-color, #6366f1);
}

/* Image Section */
.course-image[b-a0n0vr8uud] {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bg-secondary, #f1f5f9);
}

.course-image img[b-a0n0vr8uud] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-card:hover .course-image img[b-a0n0vr8uud] {
    transform: scale(1.05);
}

.placeholder-image[b-a0n0vr8uud] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

/* Badges */
.badge[b-a0n0vr8uud] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-free[b-a0n0vr8uud] {
    background: #10b981;
    color: white;
}

.badge-credits[b-a0n0vr8uud] {
    background: #f59e0b;
    color: white;
}

.enrolled-badge[b-a0n0vr8uud] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    background: rgba(99, 102, 241, 0.9);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.enrolled-badge svg[b-a0n0vr8uud] {
    width: 14px;
    height: 14px;
}

/* Content Section */
.course-content[b-a0n0vr8uud] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1;
}

/* Meta Info */
.course-meta[b-a0n0vr8uud] {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

.course-level[b-a0n0vr8uud] {
    padding: 0.2rem 0.5rem;
    background: var(--bg-secondary, #f1f5f9);
    border-radius: 4px;
    font-weight: 500;
}

.course-duration[b-a0n0vr8uud] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.course-duration svg[b-a0n0vr8uud] {
    width: 14px;
    height: 14px;
}

/* Title & Description */
.course-title[b-a0n0vr8uud] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-description[b-a0n0vr8uud] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer */
.course-footer[b-a0n0vr8uud] {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.course-stats[b-a0n0vr8uud] {
    display: flex;
    gap: 1rem;
}

.stat[b-a0n0vr8uud] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

.stat svg[b-a0n0vr8uud] {
    width: 14px;
    height: 14px;
}

.stat.certificate[b-a0n0vr8uud] {
    color: #f59e0b;
}

/* Progress Indicator */
.progress-indicator[b-a0n0vr8uud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.progress-bar[b-a0n0vr8uud] {
    width: 60px;
    height: 6px;
    background: var(--bg-secondary, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-a0n0vr8uud] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px;
}

.progress-text[b-a0n0vr8uud] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-color, #6366f1);
}

/* Instructor */
.instructor[b-a0n0vr8uud] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.instructor-image[b-a0n0vr8uud] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.instructor-name[b-a0n0vr8uud] {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

/* Dark Theme */
:global(.theme-space) .course-card[b-a0n0vr8uud],
:global(.theme-winter) .course-card[b-a0n0vr8uud],
:global(.theme-nature) .course-card[b-a0n0vr8uud],
:global(.theme-ocean) .course-card[b-a0n0vr8uud],
:global(.theme-mystic) .course-card[b-a0n0vr8uud],
:global(.theme-tron) .course-card[b-a0n0vr8uud] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .course-level[b-a0n0vr8uud],
:global(.theme-winter) .course-level[b-a0n0vr8uud],
:global(.theme-nature) .course-level[b-a0n0vr8uud],
:global(.theme-ocean) .course-level[b-a0n0vr8uud],
:global(.theme-mystic) .course-level[b-a0n0vr8uud],
:global(.theme-tron) .course-level[b-a0n0vr8uud] {
    background: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .course-title[b-a0n0vr8uud],
:global(.theme-winter) .course-title[b-a0n0vr8uud],
:global(.theme-nature) .course-title[b-a0n0vr8uud],
:global(.theme-ocean) .course-title[b-a0n0vr8uud],
:global(.theme-mystic) .course-title[b-a0n0vr8uud],
:global(.theme-tron) .course-title[b-a0n0vr8uud] {
    color: #f1f5f9;
}

:global(.theme-space) .course-footer[b-a0n0vr8uud],
:global(.theme-winter) .course-footer[b-a0n0vr8uud],
:global(.theme-nature) .course-footer[b-a0n0vr8uud],
:global(.theme-ocean) .course-footer[b-a0n0vr8uud],
:global(.theme-mystic) .course-footer[b-a0n0vr8uud],
:global(.theme-tron) .course-footer[b-a0n0vr8uud] {
    border-color: rgba(255, 255, 255, 0.1);
}
/* /Pages/Courses/CourseDetail.razor.rz.scp.css */
.course-detail-page[b-c4jmgqs09z] {
    min-height: calc(100vh - 56px);
    background: var(--bg-primary, #f8fafc);
}

/* Loading & Error States */
.loading-container[b-c4jmgqs09z],
.error-container[b-c4jmgqs09z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    text-align: center;
}

.loading-spinner[b-c4jmgqs09z] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--accent-color, #6366f1);
    border-radius: 50%;
    animation: spin-b-c4jmgqs09z 1s linear infinite;
}

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

/* Banner */
.course-banner[b-c4jmgqs09z] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    background-size: cover;
    background-position: center;
    min-height: 350px;
    position: relative;
}

.banner-overlay[b-c4jmgqs09z] {
    background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.7));
    min-height: 350px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.banner-content[b-c4jmgqs09z] {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    color: white;
}

.back-btn[b-c4jmgqs09z] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
}

.back-btn:hover[b-c4jmgqs09z] {
    background: rgba(255,255,255,0.2);
}

.back-btn svg[b-c4jmgqs09z] {
    width: 20px;
    height: 20px;
}

.course-badges[b-c4jmgqs09z] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.badge[b-c4jmgqs09z] {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.level-badge[b-c4jmgqs09z] {
    background: rgba(255,255,255,0.2);
}

.category-badge[b-c4jmgqs09z] {
    background: rgba(255,255,255,0.2);
}

.free-badge[b-c4jmgqs09z] {
    background: #10b981;
}

.course-title[b-c4jmgqs09z] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.course-subtitle[b-c4jmgqs09z] {
    font-size: 1.25rem;
    opacity: 0.9;
    margin: 0 0 1.5rem 0;
}

.course-meta[b-c4jmgqs09z] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.meta-item[b-c4jmgqs09z] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    opacity: 0.9;
}

.meta-item svg[b-c4jmgqs09z] {
    width: 18px;
    height: 18px;
}

.meta-item.certificate[b-c4jmgqs09z] {
    color: #fbbf24;
}

/* Main Content */
.course-detail-container[b-c4jmgqs09z] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
}

.course-section[b-c4jmgqs09z] {
    background: var(--card-bg, white);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color, #e2e8f0);
}

.course-section h2[b-c4jmgqs09z] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 1rem 0;
}

.course-description[b-c4jmgqs09z] {
    color: var(--text-secondary, #64748b);
    line-height: 1.7;
}

/* Learning Outcomes */
.outcomes-list[b-c4jmgqs09z] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.outcomes-list li[b-c4jmgqs09z] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-primary, #1e293b);
}

.outcomes-list svg[b-c4jmgqs09z] {
    width: 20px;
    height: 20px;
    color: #10b981;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Modules */
.modules-list[b-c4jmgqs09z] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.module-card[b-c4jmgqs09z] {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.module-header[b-c4jmgqs09z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary, #f8fafc);
    cursor: pointer;
    transition: background 0.2s ease;
}

.module-header:hover[b-c4jmgqs09z] {
    background: var(--bg-tertiary, #f1f5f9);
}

.module-info[b-c4jmgqs09z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.expand-icon[b-c4jmgqs09z] {
    width: 24px;
    height: 24px;
    color: var(--text-secondary, #64748b);
    transition: transform 0.2s ease;
}

.module-card.expanded .expand-icon[b-c4jmgqs09z] {
    transform: rotate(90deg);
}

.module-info h3[b-c4jmgqs09z] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.module-meta[b-c4jmgqs09z] {
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}

.module-progress[b-c4jmgqs09z] {
    font-size: 0.85rem;
    color: var(--accent-color, #6366f1);
    font-weight: 500;
}

/* Lessons */
.module-lessons[b-c4jmgqs09z] {
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.lesson-item[b-c4jmgqs09z] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem 0.875rem 3rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    cursor: pointer;
    transition: background 0.2s ease;
}

.lesson-item:last-child[b-c4jmgqs09z] {
    border-bottom: none;
}

.lesson-item:hover[b-c4jmgqs09z] {
    background: var(--bg-secondary, #f8fafc);
}

.lesson-item.locked[b-c4jmgqs09z] {
    opacity: 0.6;
    cursor: not-allowed;
}

.lesson-item.completed .lesson-title[b-c4jmgqs09z] {
    text-decoration: line-through;
    opacity: 0.7;
}

.lesson-icon[b-c4jmgqs09z] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lesson-icon svg[b-c4jmgqs09z] {
    width: 20px;
    height: 20px;
}

.completed-icon[b-c4jmgqs09z] {
    color: #10b981;
}

.locked-icon[b-c4jmgqs09z] {
    color: var(--text-secondary, #94a3b8);
}

.type-icon[b-c4jmgqs09z] {
    font-size: 1.25rem;
}

.lesson-info[b-c4jmgqs09z] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lesson-title[b-c4jmgqs09z] {
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.lesson-meta[b-c4jmgqs09z] {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.quiz-badge[b-c4jmgqs09z],
.preview-badge[b-c4jmgqs09z] {
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
}

.quiz-badge[b-c4jmgqs09z] {
    background: #fef3c7;
    color: #d97706;
}

.preview-badge[b-c4jmgqs09z] {
    background: #d1fae5;
    color: #059669;
}

/* Instructor */
.instructor-card[b-c4jmgqs09z] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.instructor-image[b-c4jmgqs09z] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.instructor-placeholder[b-c4jmgqs09z] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-secondary, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.instructor-info h3[b-c4jmgqs09z] {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    color: var(--text-primary, #1e293b);
}

.instructor-title[b-c4jmgqs09z] {
    margin: 0 0 0.75rem 0;
    color: var(--accent-color, #6366f1);
    font-weight: 500;
}

.instructor-bio[b-c4jmgqs09z] {
    margin: 0;
    color: var(--text-secondary, #64748b);
    line-height: 1.6;
}

/* Sidebar */
.course-sidebar[b-c4jmgqs09z] {
    position: sticky;
    top: 2rem;
    height: fit-content;
}

.enrollment-card[b-c4jmgqs09z] {
    background: var(--card-bg, white);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.enrolled-status[b-c4jmgqs09z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: #d1fae5;
    color: #059669;
    border-radius: 8px;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.enrolled-status svg[b-c4jmgqs09z] {
    width: 20px;
    height: 20px;
}

.progress-section[b-c4jmgqs09z] {
    margin-bottom: 1.5rem;
}

.progress-header[b-c4jmgqs09z] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #64748b);
}

.progress-value[b-c4jmgqs09z] {
    font-weight: 600;
    color: var(--accent-color, #6366f1);
}

.progress-bar[b-c4jmgqs09z] {
    height: 8px;
    background: var(--bg-secondary, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-c4jmgqs09z] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.price-section[b-c4jmgqs09z] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.price[b-c4jmgqs09z] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.btn[b-c4jmgqs09z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 1rem;
}

.btn-block[b-c4jmgqs09z] {
    width: 100%;
}

.course-includes[b-c4jmgqs09z] {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.course-includes li[b-c4jmgqs09z] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #64748b);
}

.course-includes svg[b-c4jmgqs09z] {
    width: 18px;
    height: 18px;
    color: var(--accent-color, #6366f1);
}

/* Dark Theme */
.theme-space[b-c4jmgqs09z],
.theme-winter[b-c4jmgqs09z],
.theme-nature[b-c4jmgqs09z],
.theme-ocean[b-c4jmgqs09z],
.theme-mystic[b-c4jmgqs09z],
.theme-tron[b-c4jmgqs09z] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --card-bg: rgba(30, 41, 59, 0.95);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 968px) {
    .course-detail-container[b-c4jmgqs09z] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .course-sidebar[b-c4jmgqs09z] {
        position: static;
        order: -1;
    }

    .course-title[b-c4jmgqs09z] {
        font-size: 1.75rem;
    }

    .banner-content[b-c4jmgqs09z] {
        padding: 1rem;
    }
}

@media (max-width: 640px) {
    .course-meta[b-c4jmgqs09z] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .outcomes-list[b-c4jmgqs09z] {
        grid-template-columns: 1fr;
    }

    .instructor-card[b-c4jmgqs09z] {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}
/* /Pages/Courses/Courses.razor.rz.scp.css */
.learn-page[b-c81gt0e3u6] {
    min-height: calc(100vh - 56px);
    background: var(--bg-primary, #f8fafc);
    padding: 2rem;
}

.learn-container[b-c81gt0e3u6] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

/* Header */
.learn-header[b-c81gt0e3u6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.learn-title[b-c81gt0e3u6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
}

.learn-title .icon[b-c81gt0e3u6] {
    width: 2rem;
    height: 2rem;
    color: var(--accent-color, #6366f1);
}

.learn-subtitle[b-c81gt0e3u6] {
    color: var(--text-secondary, #64748b);
    margin: 0.5rem 0 0 0;
    font-size: 1.1rem;
}

.header-actions[b-c81gt0e3u6] {
    display: flex;
    gap: 0.75rem;
}

/* Loading */
.loading-container[b-c81gt0e3u6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
}

.loading-spinner[b-c81gt0e3u6] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--accent-color, #6366f1);
    border-radius: 50%;
    animation: spin-b-c81gt0e3u6 1s linear infinite;
}

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

/* Section Titles */
.section-title[b-c81gt0e3u6] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 1.25rem 0;
}

/* My Progress Section */
.my-progress-section[b-c81gt0e3u6] {
    margin-bottom: 2.5rem;
}

.progress-cards[b-c81gt0e3u6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.progress-card[b-c81gt0e3u6] {
    display: flex;
    gap: 1rem;
    background: var(--card-bg, white);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color, #e2e8f0);
}

.progress-card:hover[b-c81gt0e3u6] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.progress-card-image[b-c81gt0e3u6] {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.progress-card-image img[b-c81gt0e3u6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.placeholder-image[b-c81gt0e3u6] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f1f5f9);
    font-size: 2rem;
}

.progress-card-content[b-c81gt0e3u6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.progress-card-content h3[b-c81gt0e3u6] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    line-height: 1.3;
}

.progress-bar[b-c81gt0e3u6] {
    height: 6px;
    background: var(--bg-secondary, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-c81gt0e3u6] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text[b-c81gt0e3u6] {
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}

/* Featured Section */
.featured-section[b-c81gt0e3u6] {
    margin-bottom: 2.5rem;
}

/* Filters */
.filters-section[b-c81gt0e3u6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.category-filters[b-c81gt0e3u6] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn[b-c81gt0e3u6] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 20px;
    background: var(--card-bg, white);
    color: var(--text-secondary, #64748b);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-btn:hover[b-c81gt0e3u6] {
    border-color: var(--accent-color, #6366f1);
    color: var(--accent-color, #6366f1);
}

.filter-btn.active[b-c81gt0e3u6] {
    background: var(--accent-color, #6366f1);
    border-color: var(--accent-color, #6366f1);
    color: white;
}

.level-select[b-c81gt0e3u6] {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--card-bg, white);
    color: var(--text-primary, #1e293b);
    font-size: 0.9rem;
    cursor: pointer;
}

/* Course Grid */
.course-grid[b-c81gt0e3u6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Empty State */
.empty-state[b-c81gt0e3u6] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary, #64748b);
}

.empty-state svg[b-c81gt0e3u6] {
    width: 64px;
    height: 64px;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.empty-state h3[b-c81gt0e3u6] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary, #1e293b);
}

/* Buttons */
.btn[b-c81gt0e3u6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 0.95rem;
}

.btn .icon[b-c81gt0e3u6] {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-outline[b-c81gt0e3u6] {
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

.btn-outline:hover[b-c81gt0e3u6] {
    background: var(--bg-secondary, #f1f5f9);
    border-color: var(--accent-color, #6366f1);
}

/* Dark Theme Overrides */
.theme-space[b-c81gt0e3u6],
.theme-winter[b-c81gt0e3u6],
.theme-nature[b-c81gt0e3u6],
.theme-ocean[b-c81gt0e3u6],
.theme-mystic[b-c81gt0e3u6],
.theme-tron[b-c81gt0e3u6] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --card-bg: rgba(30, 41, 59, 0.95);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .learn-page[b-c81gt0e3u6],
.theme-winter .learn-page[b-c81gt0e3u6],
.theme-nature .learn-page[b-c81gt0e3u6],
.theme-ocean .learn-page[b-c81gt0e3u6],
.theme-mystic .learn-page[b-c81gt0e3u6],
.theme-tron .learn-page[b-c81gt0e3u6] {
    background: var(--bg-primary);
}

.theme-space .progress-card[b-c81gt0e3u6],
.theme-winter .progress-card[b-c81gt0e3u6],
.theme-nature .progress-card[b-c81gt0e3u6],
.theme-ocean .progress-card[b-c81gt0e3u6],
.theme-mystic .progress-card[b-c81gt0e3u6],
.theme-tron .progress-card[b-c81gt0e3u6] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.theme-space .filter-btn[b-c81gt0e3u6],
.theme-winter .filter-btn[b-c81gt0e3u6],
.theme-nature .filter-btn[b-c81gt0e3u6],
.theme-ocean .filter-btn[b-c81gt0e3u6],
.theme-mystic .filter-btn[b-c81gt0e3u6],
.theme-tron .filter-btn[b-c81gt0e3u6] {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.theme-space .level-select[b-c81gt0e3u6],
.theme-winter .level-select[b-c81gt0e3u6],
.theme-nature .level-select[b-c81gt0e3u6],
.theme-ocean .level-select[b-c81gt0e3u6],
.theme-mystic .level-select[b-c81gt0e3u6],
.theme-tron .level-select[b-c81gt0e3u6] {
    background: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .learn-page[b-c81gt0e3u6] {
        padding: 1rem;
    }

    .learn-header[b-c81gt0e3u6] {
        flex-direction: column;
    }

    .learn-title[b-c81gt0e3u6] {
        font-size: 1.5rem;
    }

    .category-filters[b-c81gt0e3u6] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }

    .filter-btn[b-c81gt0e3u6] {
        white-space: nowrap;
    }

    .course-grid[b-c81gt0e3u6] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Courses/LessonView.razor.rz.scp.css */
.lesson-page[b-3f16bfe2m4] {
    min-height: calc(100vh - 56px);
    background: var(--bg-primary, #f8fafc);
}

/* Loading & Error */
.loading-container[b-3f16bfe2m4],
.error-container[b-3f16bfe2m4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

.loading-spinner[b-3f16bfe2m4] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color, #e2e8f0);
    border-top-color: var(--accent-color, #6366f1);
    border-radius: 50%;
    animation: spin-b-3f16bfe2m4 1s linear infinite;
}

@keyframes spin-b-3f16bfe2m4 {
    to { transform: rotate(360deg); }
}

/* Header */
.lesson-header[b-3f16bfe2m4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: var(--card-bg, white);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.back-btn[b-3f16bfe2m4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.back-btn:hover[b-3f16bfe2m4] {
    background: var(--bg-secondary, #f1f5f9);
    color: var(--text-primary, #1e293b);
}

.back-btn svg[b-3f16bfe2m4] {
    width: 18px;
    height: 18px;
}

.lesson-meta[b-3f16bfe2m4] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.lesson-type[b-3f16bfe2m4],
.lesson-duration[b-3f16bfe2m4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #64748b);
}

.lesson-type svg[b-3f16bfe2m4],
.lesson-duration svg[b-3f16bfe2m4] {
    width: 16px;
    height: 16px;
}

/* Main Container */
.lesson-container[b-3f16bfe2m4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 2rem;
}

/* Main Content */
.lesson-main[b-3f16bfe2m4] {
    background: var(--card-bg, white);
    border-radius: 12px;
    padding: 2rem;
    border: 1px solid var(--border-color, #e2e8f0);
}

.lesson-title[b-3f16bfe2m4] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0 0 0.5rem 0;
}

.lesson-description[b-3f16bfe2m4] {
    color: var(--text-secondary, #64748b);
    font-size: 1.1rem;
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

/* Video */
.video-container[b-3f16bfe2m4] {
    margin-bottom: 2rem;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.lesson-video[b-3f16bfe2m4] {
    width: 100%;
    display: block;
    max-height: 500px;
}

/* Content */
.lesson-content[b-3f16bfe2m4] {
    color: var(--text-primary, #1e293b);
    line-height: 1.8;
    font-size: 1rem;
}

.lesson-content h1[b-3f16bfe2m4],
.lesson-content h2[b-3f16bfe2m4],
.lesson-content h3[b-3f16bfe2m4] {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-primary, #1e293b);
}

.lesson-content h1[b-3f16bfe2m4] { font-size: 1.5rem; }
.lesson-content h2[b-3f16bfe2m4] { font-size: 1.25rem; }
.lesson-content h3[b-3f16bfe2m4] { font-size: 1.1rem; }

.lesson-content p[b-3f16bfe2m4] {
    margin-bottom: 1rem;
}

.lesson-content ul[b-3f16bfe2m4],
.lesson-content ol[b-3f16bfe2m4] {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.lesson-content li[b-3f16bfe2m4] {
    margin-bottom: 0.5rem;
}

.lesson-content code[b-3f16bfe2m4] {
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Consolas', monospace;
    font-size: 0.9em;
}

.lesson-content pre[b-3f16bfe2m4] {
    background: var(--bg-secondary, #1e293b);
    color: #f1f5f9;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.lesson-content pre code[b-3f16bfe2m4] {
    background: transparent;
    padding: 0;
}

.lesson-content blockquote[b-3f16bfe2m4] {
    border-left: 4px solid var(--accent-color, #6366f1);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--text-secondary, #64748b);
    font-style: italic;
}

.lesson-content strong[b-3f16bfe2m4] {
    font-weight: 600;
}

/* External & Download Links */
.external-link-section[b-3f16bfe2m4],
.download-section[b-3f16bfe2m4] {
    margin: 1.5rem 0;
}

/* Resources */
.resources-section[b-3f16bfe2m4] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.resources-section h3[b-3f16bfe2m4] {
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary, #1e293b);
}

.resources-list[b-3f16bfe2m4] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.resources-list li[b-3f16bfe2m4] {
    margin-bottom: 0.5rem;
}

.resources-list a[b-3f16bfe2m4] {
    color: var(--accent-color, #6366f1);
    text-decoration: none;
}

.resources-list a:hover[b-3f16bfe2m4] {
    text-decoration: underline;
}

/* Quiz Section */
.quiz-section[b-3f16bfe2m4] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.quiz-section h3[b-3f16bfe2m4] {
    font-size: 1.25rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary, #1e293b);
}

.quiz-info[b-3f16bfe2m4] {
    margin-bottom: 1.5rem;
    color: var(--text-secondary, #64748b);
}

.attempts-info[b-3f16bfe2m4] {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.quiz-questions[b-3f16bfe2m4] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.question-card[b-3f16bfe2m4] {
    background: var(--bg-secondary, #f8fafc);
    border-radius: 10px;
    padding: 1.25rem;
}

.question-text[b-3f16bfe2m4] {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 1rem 0;
}

.options-list[b-3f16bfe2m4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.option-item[b-3f16bfe2m4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg, white);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.option-item:hover[b-3f16bfe2m4] {
    border-color: var(--accent-color, #6366f1);
}

.option-item.selected[b-3f16bfe2m4] {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--accent-color, #6366f1);
}

.option-item input[b-3f16bfe2m4] {
    accent-color: var(--accent-color, #6366f1);
}

.option-text[b-3f16bfe2m4] {
    color: var(--text-primary, #1e293b);
}

/* Quiz Result */
.quiz-result[b-3f16bfe2m4] {
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
}

.quiz-result.passed[b-3f16bfe2m4] {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    border: 1px solid #10b981;
}

.quiz-result.failed[b-3f16bfe2m4] {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
}

.result-header[b-3f16bfe2m4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.result-icon[b-3f16bfe2m4] {
    font-size: 2.5rem;
}

.result-header h4[b-3f16bfe2m4] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text-primary, #1e293b);
}

.result-score[b-3f16bfe2m4] {
    font-size: 1.1rem;
    color: var(--text-secondary, #475569);
    margin: 0 0 1rem 0;
}

/* Completion Section */
.completion-section[b-3f16bfe2m4] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    text-align: center;
}

.completed-badge[b-3f16bfe2m4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #d1fae5;
    color: #059669;
    border-radius: 30px;
    font-weight: 600;
    font-size: 1rem;
}

.completed-badge svg[b-3f16bfe2m4] {
    width: 20px;
    height: 20px;
}

/* Sidebar */
.lesson-sidebar[b-3f16bfe2m4] {
    position: sticky;
    top: 2rem;
    height: fit-content;
}

.nav-buttons[b-3f16bfe2m4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nav-buttons .btn[b-3f16bfe2m4] {
    width: 100%;
    justify-content: center;
}

/* Buttons */
.btn[b-3f16bfe2m4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-size: 0.95rem;
}

.btn svg[b-3f16bfe2m4] {
    width: 18px;
    height: 18px;
}

.btn-primary[b-3f16bfe2m4] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-3f16bfe2m4] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.btn-primary:disabled[b-3f16bfe2m4] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-outline[b-3f16bfe2m4] {
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary, #1e293b);
}

.btn-outline:hover[b-3f16bfe2m4] {
    background: var(--bg-secondary, #f1f5f9);
    border-color: var(--accent-color, #6366f1);
}

.btn-lg[b-3f16bfe2m4] {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Dark Theme */
.theme-space[b-3f16bfe2m4],
.theme-winter[b-3f16bfe2m4],
.theme-nature[b-3f16bfe2m4],
.theme-ocean[b-3f16bfe2m4],
.theme-mystic[b-3f16bfe2m4],
.theme-tron[b-3f16bfe2m4] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --card-bg: rgba(30, 41, 59, 0.95);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .lesson-header[b-3f16bfe2m4],
.theme-winter .lesson-header[b-3f16bfe2m4],
.theme-nature .lesson-header[b-3f16bfe2m4],
.theme-ocean .lesson-header[b-3f16bfe2m4],
.theme-mystic .lesson-header[b-3f16bfe2m4],
.theme-tron .lesson-header[b-3f16bfe2m4] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.theme-space .lesson-main[b-3f16bfe2m4],
.theme-winter .lesson-main[b-3f16bfe2m4],
.theme-nature .lesson-main[b-3f16bfe2m4],
.theme-ocean .lesson-main[b-3f16bfe2m4],
.theme-mystic .lesson-main[b-3f16bfe2m4],
.theme-tron .lesson-main[b-3f16bfe2m4] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.theme-space .question-card[b-3f16bfe2m4],
.theme-winter .question-card[b-3f16bfe2m4],
.theme-nature .question-card[b-3f16bfe2m4],
.theme-ocean .question-card[b-3f16bfe2m4],
.theme-mystic .question-card[b-3f16bfe2m4],
.theme-tron .question-card[b-3f16bfe2m4] {
    background: rgba(15, 23, 42, 0.5);
}

.theme-space .option-item[b-3f16bfe2m4],
.theme-winter .option-item[b-3f16bfe2m4],
.theme-nature .option-item[b-3f16bfe2m4],
.theme-ocean .option-item[b-3f16bfe2m4],
.theme-mystic .option-item[b-3f16bfe2m4],
.theme-tron .option-item[b-3f16bfe2m4] {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.theme-space .lesson-content pre[b-3f16bfe2m4],
.theme-winter .lesson-content pre[b-3f16bfe2m4],
.theme-nature .lesson-content pre[b-3f16bfe2m4],
.theme-ocean .lesson-content pre[b-3f16bfe2m4],
.theme-mystic .lesson-content pre[b-3f16bfe2m4],
.theme-tron .lesson-content pre[b-3f16bfe2m4] {
    background: #0f172a;
}

/* Responsive */
@media (max-width: 968px) {
    .lesson-container[b-3f16bfe2m4] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

    .lesson-sidebar[b-3f16bfe2m4] {
        position: static;
        order: -1;
    }

    .nav-buttons[b-3f16bfe2m4] {
        flex-direction: row;
    }

    .lesson-header[b-3f16bfe2m4] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .lesson-title[b-3f16bfe2m4] {
        font-size: 1.5rem;
    }

    .lesson-main[b-3f16bfe2m4] {
        padding: 1.25rem;
    }
}
/* /Pages/DailyBriefing/DailyBriefing.razor.rz.scp.css */
/* ============================================
   DAILY BRIEFING PAGE STYLES

   All structural classes use a "db-" prefix for the same reason the
   Progress Report History page uses "pr-":
   - Global .stat-chip / .topic-item / .history-item / .stat-pill in
     home-integrated.css + utilities.css can beat CSS-isolation specificity
     through load order, producing stacked badges, drifted radii, and
     mis-colored hover states. Prefixing with "db-" removes the conflict
     entirely rather than relying on specificity arithmetic.

   Matches the theme-aware hero + card pattern established in
   ProgressReportHistory.razor.css:
   - Hero gradient uses --theme-primary / --theme-primary-hover
   - Cards have left accent borders using --theme-primary
   - Uniform chip pills, rounded 999px, row-direction defensive rule
   - Dark themes swap card backgrounds to semi-transparent slate
   ============================================ */

.daily-briefing-page[b-qraf2kk6c3] {
    min-height: calc(100vh - 56px);
    background: var(--theme-bg, #f8fafc);
    /* DP-UNIFY-5 (2026-05-20): outer-page padding moved INTO .db-page-container so the
       effective hero card width matches /daily-progress. Pre-fix, this carried
       `padding: 24px` on the outer wrapper and the inner container had zero horizontal
       padding — at wide viewports the hero stretched the full 1200px, whereas /daily-progress
       (via utilities.css `.list-page-container { padding: 24px }`) renders at 1152px
       effective. The 48px gap was visible in side-by-side launch QA. */
}

/* Hero + page content share this max width so they visually align.
   DP-ALIGN (2026-05-20): standardized at 1200px to match /daily-progress.
   1400px read as too generous; 1200 keeps topic-card grid breathing room
   without making the page feel sparse on ultrawide displays.
   DP-UNIFY-5 (2026-05-20): horizontal padding lives here (not on .daily-briefing-page)
   so the container's effective content width = 1200px - 48px = 1152px, matching
   .list-page-container's behavior on /daily-progress (which uses padding:24px shorthand
   on the 1200px box, overridden bottom for FAB clearance). Mirror that pattern exactly. */
.db-page-container[b-qraf2kk6c3] {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 24px;
    /* DB-FAB-CLEARANCE (2026-05-19): floating chat FAB sits ~90px tall in the bottom-right
       corner. Without this padding the last Recent Deliveries row gets visually covered
       by the FAB on short-content pages, making it unclickable. Same pattern other
       FAB-bearing pages should use — bottom padding > FAB footprint. */
    padding-bottom: 110px;
}

/* ============================================
   HERO
   Same pattern as .pr-hero — gradient from --theme-primary →
   --theme-primary-hover, white text, a soft inner highlight from a
   top-right radial gradient so contrast stays consistent across themes.
   ============================================ */
.db-hero[b-qraf2kk6c3] {
    position: relative;
    /* Flat solid using the theme's primary — drops the diagonal gradient + top-right radial
       highlight so the hero reads as a clean Executive-style surface rather than a marketing
       hero card. Theme-coherent because --theme-primary follows whatever theme is active. */
    background: var(--theme-primary, #667eea);
    color: var(--theme-btn-text, #ffffff);
    padding: 36px 40px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 12px 32px var(--theme-shadow-color, rgba(102, 126, 234, 0.3));
    width: 100%;
    box-sizing: border-box;
}

.db-hero-content[b-qraf2kk6c3] {
    position: relative;
}

.db-hero-heading[b-qraf2kk6c3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.db-hero-title[b-qraf2kk6c3] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.db-hero-title svg[b-qraf2kk6c3] {
    flex-shrink: 0;
}

/* Status pill sits inline with the title on the gradient. The ::before dot
   gives it a live/paused affordance so the badge isn't just text colour. */
.db-hero-badge[b-qraf2kk6c3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.db-hero-badge[b-qraf2kk6c3]::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fbbf24;
}

.db-hero-badge.active[b-qraf2kk6c3]::before {
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

.db-hero-subtitle[b-qraf2kk6c3] {
    margin: 0 0 22px;
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
}

.db-hero-stats[b-qraf2kk6c3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.db-hero-stat[b-qraf2kk6c3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.db-hero-stat strong[b-qraf2kk6c3] {
    font-weight: 700;
    font-size: 1rem;
}

.db-hero-stat svg[b-qraf2kk6c3] {
    flex-shrink: 0;
}

/* ============================================
   STATUS CARDS (loading / setup / empty)
   ============================================ */
.db-status-card[b-qraf2kk6c3] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.db-status-card p[b-qraf2kk6c3] {
    color: #64748b;
    margin: 0;
    max-width: 480px;
    line-height: 1.5;
}

.db-spinner[b-qraf2kk6c3] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: db-spin-b-qraf2kk6c3 0.8s linear infinite;
}

@keyframes db-spin-b-qraf2kk6c3 {
    to { transform: rotate(360deg); }
}

/* Setup card: same sheet style as the status card but a bit taller,
   centers its own content, holds feature row + CTA button. */
.db-setup-card[b-qraf2kk6c3] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 40px;
    gap: 18px;
    width: 100%;
    max-width: 620px;
    margin: 32px auto 0;
    box-sizing: border-box;
}

.db-setup-icon[b-qraf2kk6c3] {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    margin-bottom: 4px;
}

.db-setup-card h1[b-qraf2kk6c3] {
    margin: 0;
    font-size: 1.6rem;
    color: #0f172a;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.db-setup-card p[b-qraf2kk6c3] {
    margin: 0;
    color: #64748b;
    max-width: 480px;
    line-height: 1.6;
}

.db-setup-features[b-qraf2kk6c3] {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 8px 0 6px;
}

.db-setup-feature[b-qraf2kk6c3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.db-setup-feature svg[b-qraf2kk6c3] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    opacity: 0.75;
}

.db-primary-button[b-qraf2kk6c3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-hover, #764ba2) 100%);
    border: none;
    border-radius: 8px;
    color: var(--theme-btn-text, #ffffff);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.db-primary-button:hover[b-qraf2kk6c3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--theme-shadow-color, rgba(102, 126, 234, 0.4));
}

/* ============================================
   ACTION BAR
   White card holding the primary actions + a right-aligned Settings
   ghost. Mirrors the card rhythm of .db-topic-card below.
   ============================================ */
.db-actions-bar[b-qraf2kk6c3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 14px;
    margin-bottom: 24px;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.db-actions-left[b-qraf2kk6c3] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ============================================
   SECTION HEADINGS
   ============================================ */
.db-section[b-qraf2kk6c3] {
    margin-bottom: 28px;
}

.db-section-title[b-qraf2kk6c3] {
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.db-section-title svg[b-qraf2kk6c3] {
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    opacity: 0.75;
    flex-shrink: 0;
}

/* ============================================
   TOPICS GRID + CARD
   Grid shape matches .pr-reports-grid. Card shape matches
   .pr-report-card (rounded white card, left-accent stripe in the
   theme primary colour, subtle lift on hover).
   ============================================ */
.db-topics-grid[b-qraf2kk6c3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    width: 100%;
}

.db-topic-card[b-qraf2kk6c3] {
    position: relative;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--theme-primary, #667eea);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.db-topic-card:hover[b-qraf2kk6c3] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    border-color: var(--theme-primary, #667eea);
}

.db-topic-card.db-is-inactive[b-qraf2kk6c3] {
    opacity: 0.6;
    border-left-color: #94a3b8;
}

.db-topic-top[b-qraf2kk6c3] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.db-topic-icon[b-qraf2kk6c3] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
    transition: transform 0.25s ease;
}

.db-topic-card:hover .db-topic-icon[b-qraf2kk6c3] {
    transform: scale(1.08);
}

.db-topic-info[b-qraf2kk6c3] {
    flex: 1;
    min-width: 0;
}

.db-topic-header[b-qraf2kk6c3] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.db-topic-title[b-qraf2kk6c3] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.db-topic-desc[b-qraf2kk6c3] {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
}

.db-topic-actions[b-qraf2kk6c3] {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.2s;
}

.db-topic-card:hover .db-topic-actions[b-qraf2kk6c3] {
    opacity: 1;
}

.db-topic-keywords[b-qraf2kk6c3] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ============================================
   CHIPS + KEYWORDS
   Explicit flex-direction: row defends against the legacy global
   .stat-chip / keyword-tag rules in home-integrated.css.
   ============================================ */
.db-chip[b-qraf2kk6c3] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    min-width: 0;
    flex: 0 0 auto;
    width: auto;
}

.db-chip-muted[b-qraf2kk6c3] {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
    border-color: rgba(100, 116, 139, 0.25);
}

.db-chip-success[b-qraf2kk6c3] {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}

.db-chip-info[b-qraf2kk6c3] {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.25);
}

.db-chip-warning[b-qraf2kk6c3] {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.3);
}

.db-chip-danger[b-qraf2kk6c3] {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.25);
}

.db-keyword[b-qraf2kk6c3] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(var(--theme-accent-rgb, 71, 85, 105), 0.1);
    color: var(--theme-accent, #475569);
    border: 1px solid rgba(var(--theme-accent-rgb, 71, 85, 105), 0.18);
    flex: 0 0 auto;
}

/* ============================================
   ICON BUTTONS (topic actions, history view)
   ============================================ */
.db-icon-btn[b-qraf2kk6c3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    color: #94a3b8;
}

.db-icon-btn:disabled[b-qraf2kk6c3] {
    opacity: 0.35;
    cursor: not-allowed;
}

.db-icon-btn svg[b-qraf2kk6c3] {
    width: 16px;
    height: 16px;
}

.db-icon-btn:hover:not(:disabled)[b-qraf2kk6c3] {
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.1);
    color: #0f172a;
    transform: scale(1.08);
}

.db-icon-btn.danger:hover:not(:disabled)[b-qraf2kk6c3] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

/* ============================================
   TOPICS EMPTY STATE
   ============================================ */
.db-topics-empty[b-qraf2kk6c3] {
    background: white;
    border-radius: 16px;
    border: 2px dashed rgba(0, 0, 0, 0.08);
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.db-empty-icon[b-qraf2kk6c3] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #334155));
}

.db-topics-empty h3[b-qraf2kk6c3] {
    font-size: 1.15rem;
    color: #334155;
    margin: 0;
}

.db-topics-empty p[b-qraf2kk6c3] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    max-width: 420px;
    line-height: 1.55;
}

/* ============================================
   DELIVERY HISTORY LIST
   ============================================ */
.db-history-list[b-qraf2kk6c3] {
    background: white;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.db-history-item[b-qraf2kk6c3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.2s;
}

.db-history-item:last-child[b-qraf2kk6c3] {
    border-bottom: none;
}

.db-history-item:hover[b-qraf2kk6c3] {
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.03);
}

/* DB-HISTORY-CLICK (2026-05-19): whole-row clickable affordance for Sent deliveries.
   Failed/Pending rows don't get this class — they have no content to open. */
.db-history-item.is-clickable[b-qraf2kk6c3] {
    cursor: pointer;
}

.db-history-item.is-clickable:hover[b-qraf2kk6c3] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
}

.db-history-date[b-qraf2kk6c3] {
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 180px;
    color: #0f172a;
}

.db-history-topics[b-qraf2kk6c3] {
    font-size: 0.82rem;
    color: #94a3b8;
    flex: 1;
}

/* ============================================
   DARK THEME SUPPORT (Space/Winter/Nature/Ocean/Mystic/Tron)
   Mirrors the dark-theme block in ProgressReportHistory.razor.css.
   ============================================ */
.theme-space[b-qraf2kk6c3],
.theme-winter[b-qraf2kk6c3],
.theme-nature[b-qraf2kk6c3],
.theme-ocean[b-qraf2kk6c3],
.theme-mystic[b-qraf2kk6c3],
.theme-tron[b-qraf2kk6c3] {
    background: transparent;
}

.is-dark .db-actions-bar[b-qraf2kk6c3],
.is-dark .db-topic-card[b-qraf2kk6c3],
.is-dark .db-history-list[b-qraf2kk6c3],
.is-dark .db-status-card[b-qraf2kk6c3],
.is-dark .db-setup-card[b-qraf2kk6c3],
.is-dark .db-topics-empty[b-qraf2kk6c3] {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.is-dark .db-topic-title[b-qraf2kk6c3],
.is-dark .db-history-date[b-qraf2kk6c3],
.is-dark .db-setup-card h1[b-qraf2kk6c3],
.is-dark .db-topics-empty h3[b-qraf2kk6c3] {
    color: #f1f5f9;
}

.is-dark .db-section-title[b-qraf2kk6c3] {
    color: #cbd5e1;
}

.is-dark .db-topic-desc[b-qraf2kk6c3],
.is-dark .db-history-topics[b-qraf2kk6c3],
.is-dark .db-topics-empty p[b-qraf2kk6c3],
.is-dark .db-setup-card p[b-qraf2kk6c3],
.is-dark .db-status-card p[b-qraf2kk6c3] {
    color: #cbd5e1;
}

.is-dark .db-topic-icon[b-qraf2kk6c3],
.is-dark .db-empty-icon[b-qraf2kk6c3],
.is-dark .db-setup-icon[b-qraf2kk6c3] {
    background: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.25);
}

.is-dark .db-icon-btn[b-qraf2kk6c3] {
    color: rgba(255, 255, 255, 0.55);
}

.is-dark .db-icon-btn:hover:not(:disabled)[b-qraf2kk6c3] {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}

.is-dark .db-history-item[b-qraf2kk6c3] {
    border-color: rgba(255, 255, 255, 0.05);
}

.is-dark .db-history-item:hover[b-qraf2kk6c3] {
    background: rgba(255, 255, 255, 0.04);
}

/* Chips get a touch more luminance so they read on dark surfaces. */
.is-dark .db-chip[b-qraf2kk6c3],
.is-dark .db-keyword[b-qraf2kk6c3] {
    filter: brightness(1.2);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .db-actions-bar[b-qraf2kk6c3] {
        flex-direction: column;
        align-items: stretch;
    }

    .db-actions-left[b-qraf2kk6c3] {
        width: 100%;
    }

    .db-actions-left .nts-btn[b-qraf2kk6c3] {
        flex: 1;
    }

    .db-topic-actions[b-qraf2kk6c3] {
        opacity: 1;
    }
}

@media (max-width: 640px) {
    /* DP-UNIFY-5 (2026-05-20): mobile padding mirrors /daily-progress's
       .list-page-container { padding: 16px } @ 600px override. Lives on the
       inner container now, not the outer page wrapper. */
    .db-page-container[b-qraf2kk6c3] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .db-hero[b-qraf2kk6c3] {
        padding: 24px;
    }

    .db-hero-title[b-qraf2kk6c3] {
        font-size: 1.5rem;
        gap: 10px;
    }

    .db-hero-title svg[b-qraf2kk6c3] {
        width: 26px;
        height: 26px;
    }

    .db-hero-subtitle[b-qraf2kk6c3] {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .db-hero-stat[b-qraf2kk6c3] {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .db-topics-grid[b-qraf2kk6c3] {
        grid-template-columns: 1fr;
    }

    .db-setup-card[b-qraf2kk6c3] {
        padding: 36px 20px;
    }

    .db-setup-features[b-qraf2kk6c3] {
        gap: 22px;
    }

    .db-history-item[b-qraf2kk6c3] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .db-history-date[b-qraf2kk6c3] {
        min-width: 100%;
    }

    .db-topic-top[b-qraf2kk6c3] {
        flex-wrap: wrap;
    }

    .db-topic-actions[b-qraf2kk6c3] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ─────────────────────────────────────────────────────────
   DB-V-3 (2026-05): Failed-delivery warning banner.
   Theme-token-driven so the alert reads correctly across all
   8 themes; flex layout collapses to stacked on narrow widths.
   ───────────────────────────────────────────────────────── */
.db-failure-banner[b-qraf2kk6c3] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background-color: var(--theme-danger-soft, #fef2f2);
    border: 1px solid var(--theme-danger, #ef4444);
    border-radius: 12px;
}

.db-failure-icon[b-qraf2kk6c3] {
    flex: 0 0 auto;
    color: var(--theme-danger, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
}

.db-failure-body[b-qraf2kk6c3] {
    flex: 1 1 auto;
    min-width: 0;
}

.db-failure-title[b-qraf2kk6c3] {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text-primary, #111827);
}

.db-failure-detail[b-qraf2kk6c3] {
    margin: 0;
    font-size: 13px;
    color: var(--theme-text-muted, #4b5563);
    line-height: 1.5;
}

.db-failure-reason[b-qraf2kk6c3] {
    color: var(--theme-text-muted, #4b5563);
    font-style: italic;
}

@media (max-width: 640px) {
    .db-failure-banner[b-qraf2kk6c3] {
        flex-wrap: wrap;
    }

    .db-failure-banner .db-action-btn[b-qraf2kk6c3] {
        width: 100%;
    }
}

/* BRIEF-MERGE-1 (2026-08-07): back-link to the Briefing this page is an add-on of. */
.db-backlink[b-qraf2kk6c3] {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
}

.db-backlink:hover[b-qraf2kk6c3] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}
/* /Pages/DailyBriefing/DailyBriefingPreviewDialog.razor.rz.scp.css */
.modal-overlay[b-oep79x4y1w] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn-b-oep79x4y1w 0.3s ease-out;
}

.modal-container[b-oep79x4y1w] {
    background: white;
    width: 100%;
    max-width: 800px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    animation: slideIn-b-oep79x4y1w 0.3s ease-out;
}

.modal-header[b-oep79x4y1w] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.modal-header h3[b-oep79x4y1w] {
    margin: 0;
    font-size: 1.25rem;
    color: #1e293b;
}

.close-btn[b-oep79x4y1w] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.modal-body[b-oep79x4y1w] {
    padding: 1.5rem;
    overflow-y: auto;
    background: #f1f5f9;
}

.modal-footer[b-oep79x4y1w] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #f8fafc;
}

.preview-content[b-oep79x4y1w] {
    background: white;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-height: 400px;
    color: #1e293b;
    line-height: 1.6;
}

.preview-content h1[b-oep79x4y1w], .preview-content h2[b-oep79x4y1w], .preview-content h3[b-oep79x4y1w] {
    color: #0f172a;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.preview-content p[b-oep79x4y1w] {
    margin-bottom: 1rem;
}

.btn[b-oep79x4y1w] {
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-primary[b-oep79x4y1w] { background: #3b82f6; color: white; }

@keyframes fadeIn-b-oep79x4y1w { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn-b-oep79x4y1w { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Theme support */
.theme-space .modal-container[b-oep79x4y1w], .theme-winter .modal-container[b-oep79x4y1w], .theme-nature .modal-container[b-oep79x4y1w], .theme-ocean .modal-container[b-oep79x4y1w] { background: #1e293b; color: #f1f5f9; }
.theme-space .modal-header[b-oep79x4y1w], .theme-space .modal-footer[b-oep79x4y1w], .theme-winter .modal-header[b-oep79x4y1w], .theme-winter .modal-footer[b-oep79x4y1w], .theme-nature .modal-header[b-oep79x4y1w], .theme-nature .modal-footer[b-oep79x4y1w], .theme-ocean .modal-header[b-oep79x4y1w], .theme-ocean .modal-footer[b-oep79x4y1w] { background: #0f172a; border-color: #334155; }
.theme-space .modal-body[b-oep79x4y1w], .theme-winter .modal-body[b-oep79x4y1w], .theme-nature .modal-body[b-oep79x4y1w], .theme-ocean .modal-body[b-oep79x4y1w] { background: #0f172a; }
.theme-space .preview-content[b-oep79x4y1w], .theme-winter .preview-content[b-oep79x4y1w], .theme-nature .preview-content[b-oep79x4y1w], .theme-ocean .preview-content[b-oep79x4y1w] { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; }
.theme-space .preview-content h1[b-oep79x4y1w], .theme-space .preview-content h2[b-oep79x4y1w], .theme-space .preview-content h3[b-oep79x4y1w] { color: #f1f5f9; }
/* /Pages/DailyBriefing/DailyBriefingSettingsDialog.razor.rz.scp.css */
/* --- Form layout --- */

.form-group[b-mnms9nlkrh] {
    margin-bottom: 1rem;
}

/* VOICE-SYNC-1 UI cleanup (2026-06-19): 2-column schedule grid matching the Progress Report dialog. */
.form-grid[b-mnms9nlkrh] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 12px;
    margin-bottom: 16px;
}

.form-grid .form-group[b-mnms9nlkrh] {
    margin-bottom: 0;
}

.form-group label[b-mnms9nlkrh] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500; /* VOICE-SYNC-1 UI cleanup: match Progress Report dialog label weight */
    color: var(--theme-text-secondary);
    margin-bottom: 4px;
}

.form-input[b-mnms9nlkrh],
.form-select[b-mnms9nlkrh] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    transition: border-color 0.2s;
}

.form-input:focus[b-mnms9nlkrh],
.form-select:focus[b-mnms9nlkrh] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.char-count[b-mnms9nlkrh] {
    float: right;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

/* --- Switch toggle --- */

.switch-group[b-mnms9nlkrh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.switch[b-mnms9nlkrh] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
}

.switch input[b-mnms9nlkrh] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-mnms9nlkrh] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--theme-border);
    transition: 0.3s;
    border-radius: 34px;
}

.slider[b-mnms9nlkrh]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider[b-mnms9nlkrh] {
    background-color: #22c55e;
}

input:checked + .slider[b-mnms9nlkrh]:before {
    transform: translateX(20px);
}

/* VOICE-SYNC-1 UI cleanup (2026-06-19): stack title over description (matches the Progress Report
   dialog) so the toggle label sits on one line instead of wrapping. */
.switch-label[b-mnms9nlkrh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.switch-label > span[b-mnms9nlkrh] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.switch-label small[b-mnms9nlkrh] {
    font-size: 0.8rem;
}

.helper-text[b-mnms9nlkrh] {
    color: var(--theme-text-hint); /* VOICE-SYNC-1 UI cleanup: match Progress Report dialog helper styling */
    font-size: 0.75rem;
}

/* --- Divider & subtitle --- */

.divider[b-mnms9nlkrh] {
    height: 1px;
    background: var(--theme-border);
    margin: 16px 0; /* VOICE-SYNC-1 UI cleanup: match Progress Report dialog divider spacing */
}

.subtitle[b-mnms9nlkrh] {
    font-size: 1rem;
    font-weight: 700; /* VOICE-SYNC-1 UI cleanup: match Progress Report dialog section heading (h4) weight */
    margin-bottom: 0.75rem;
    color: var(--theme-text-primary);
}

/* --- Day chips --- */

.day-chips[b-mnms9nlkrh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.chip[b-mnms9nlkrh] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-secondary);
    transition: all 0.2s;
}

.chip:hover[b-mnms9nlkrh] {
    border-color: var(--theme-primary);
}

.chip.active[b-mnms9nlkrh] {
    background: var(--theme-primary);
    color: var(--theme-btn-text, #fff);
    border-color: var(--theme-primary);
}

.chip-btn-group[b-mnms9nlkrh] {
    display: flex;
    gap: 0.5rem;
}

.btn-text-sm[b-mnms9nlkrh] {
    background: none;
    border: none;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: background 0.2s;
}

.btn-text-sm:hover[b-mnms9nlkrh] {
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.summary-text[b-mnms9nlkrh] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

/* --- Experience mode cards --- */

.mode-card-grid[b-mnms9nlkrh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.mode-card[b-mnms9nlkrh] {
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    border: 2px solid var(--theme-border);
    background: var(--theme-surface);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.mode-card:hover[b-mnms9nlkrh] {
    border-color: var(--theme-primary);
}

.mode-card.active[b-mnms9nlkrh] {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.mode-card-icon[b-mnms9nlkrh] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.mode-card-title[b-mnms9nlkrh] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-text-primary);
}

.mode-card-desc[b-mnms9nlkrh] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary);
    margin-top: 0.15rem;
}

.summary-text[b-mnms9nlkrh] {
    font-size: 0.8125rem;
    color: #64748b;
}

.btn[b-mnms9nlkrh] {
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-primary[b-mnms9nlkrh] { background: #3b82f6; color: white; }
.btn-primary:disabled[b-mnms9nlkrh] { background: #94a3b8; cursor: not-allowed; }
.btn-secondary[b-mnms9nlkrh] { background: #e2e8f0; color: #475569; }

@keyframes fadeIn-b-mnms9nlkrh { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn-b-mnms9nlkrh { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Theme support */
.theme-space .modal-container[b-mnms9nlkrh], .theme-winter .modal-container[b-mnms9nlkrh], .theme-nature .modal-container[b-mnms9nlkrh], .theme-ocean .modal-container[b-mnms9nlkrh] { background: #1e293b; color: #f1f5f9; }
.theme-space .modal-header[b-mnms9nlkrh], .theme-space .modal-footer[b-mnms9nlkrh], .theme-winter .modal-header[b-mnms9nlkrh], .theme-winter .modal-footer[b-mnms9nlkrh], .theme-nature .modal-header[b-mnms9nlkrh], .theme-nature .modal-footer[b-mnms9nlkrh], .theme-ocean .modal-header[b-mnms9nlkrh], .theme-ocean .modal-footer[b-mnms9nlkrh] { background: #0f172a; border-color: #334155; }
.theme-space .form-input[b-mnms9nlkrh], .theme-space .form-select[b-mnms9nlkrh], .theme-winter .form-input[b-mnms9nlkrh], .theme-winter .form-select[b-mnms9nlkrh], .theme-nature .form-input[b-mnms9nlkrh], .theme-nature .form-select[b-mnms9nlkrh], .theme-ocean .form-input[b-mnms9nlkrh], .theme-ocean .form-select[b-mnms9nlkrh] { background: #0f172a; border-color: #334155; color: #f1f5f9; }
.theme-space .subtitle[b-mnms9nlkrh], .theme-winter .subtitle[b-mnms9nlkrh], .theme-nature .subtitle[b-mnms9nlkrh], .theme-ocean .subtitle[b-mnms9nlkrh] { color: #f1f5f9; }
.theme-space .chip[b-mnms9nlkrh], .theme-winter .chip[b-mnms9nlkrh], .theme-nature .chip[b-mnms9nlkrh], .theme-ocean .chip[b-mnms9nlkrh] { background: #334155; border-color: #475569; color: #cbd5e1; }
.theme-space .chip.active[b-mnms9nlkrh], .theme-winter .chip.active[b-mnms9nlkrh], .theme-nature .chip.active[b-mnms9nlkrh], .theme-ocean .chip.active[b-mnms9nlkrh] { background: #3b82f6; color: white; }
/* /Pages/DailyBriefing/DailyBriefingTopicDialog.razor.rz.scp.css */
/* Form-specific styles for DailyDownloadTopicDialog */
.form-group[b-6z35tu66cr] {
    margin-bottom: 1.25rem;
}

.switch-group[b-6z35tu66cr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.switch[b-6z35tu66cr] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input[b-6z35tu66cr] { opacity: 0; width: 0; height: 0; }

.slider[b-6z35tu66cr] {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider[b-6z35tu66cr]:before {
    position: absolute;
    content: "";
    height: 16px; width: 16px;
    left: 2px; bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider[b-6z35tu66cr] { background-color: #22c55e; }
input:checked + .slider[b-6z35tu66cr]:before { transform: translateX(20px); }
/* /Pages/DailyBriefing/ViewDailyBriefing.razor.rz.scp.css */
.view-briefing-page[b-q9phst5cre] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}
    
.back-button[b-q9phst5cre] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    /* Hero uses --theme-primary gradient; --theme-btn-text (white across all 8 themes)
       is guaranteed to have correct contrast against --theme-primary. */
    color: var(--theme-btn-text, #ffffff);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(10px);
    z-index: 1;
}

.back-button:hover[b-q9phst5cre] {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateX(-2px);
}

.back-button svg[b-q9phst5cre] {
    width: 14px;
    height: 14px;
}
    
.report-container[b-q9phst5cre] {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    }
    
    .report-header[b-q9phst5cre] {
        position: relative;
        /* Pair --theme-primary with --theme-btn-text (white across all 8 themes)
           — gives every theme its own signature gradient without the purple bias. */
        background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-hover, #764ba2) 100%);
        color: var(--theme-btn-text, #ffffff);
        /* padding-right reserves space for the absolutely-positioned .back-button
           so long h1 titles don't run under it. */
        padding: 30px 120px 30px 30px;
    }
    
    .report-header h1[b-q9phst5cre] {
        margin: 0 0 8px 0;
        font-size: 1.75rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    
    .report-header h1 svg[b-q9phst5cre] {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    
    .report-date[b-q9phst5cre] {
        opacity: 0.9;
        font-size: 1rem;
        margin-bottom: 16px;
    }
    
    .report-stats[b-q9phst5cre] {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .stat-badge[b-q9phst5cre] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.2);
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.85rem;
    }
    
    .stat-badge svg[b-q9phst5cre] {
        width: 16px;
        height: 16px;
    }
    
    .report-content[b-q9phst5cre] {
        padding: 0;
        background: white;
    }
    
    .report-content iframe[b-q9phst5cre] {
        width: 100%;
        min-height: 800px;
        border: none;
        display: block;
    }
    
    .no-content[b-q9phst5cre] {
        padding: 60px 40px;
        text-align: center;
        color: #6b7280;
    }
    
    .loading-state[b-q9phst5cre], .empty-state[b-q9phst5cre] {
        background: white;
        border-radius: 16px;
        padding: 60px 40px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }
    
    .loading-state .spinner[b-q9phst5cre] {
        width: 40px;
        height: 40px;
        border: 4px solid var(--theme-border, #e5e7eb);
        border-top-color: var(--theme-primary, #667eea);
        border-radius: 50%;
        animation: spin-b-q9phst5cre 0.8s linear infinite;
        margin: 0 auto 16px;
    }
    
    @keyframes spin-b-q9phst5cre {
        to { transform: rotate(360deg); }
    }
    
    .empty-state svg[b-q9phst5cre] {
        width: 64px;
        height: 64px;
        color: #9ca3af;
        margin-bottom: 16px;
    }
    
    .empty-state h2[b-q9phst5cre] {
        margin: 0 0 8px 0;
        color: #374151;
        font-size: 1.25rem;
    }
    
    .empty-state p[b-q9phst5cre] {
        color: #6b7280;
        margin: 0 0 20px 0;
    }
    
    .primary-button[b-q9phst5cre] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-hover, #764ba2) 100%);
        border: none;
        border-radius: 8px;
        color: var(--theme-btn-text, #ffffff);
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .primary-button:hover[b-q9phst5cre] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px var(--theme-shadow-color, rgba(102, 126, 234, 0.4));
    }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .view-briefing-page[b-q9phst5cre] {
        padding: 12px;
    }

    .back-button[b-q9phst5cre] {
        top: 10px;
        right: 10px;
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .report-header[b-q9phst5cre] {
        padding: 18px 90px 18px 16px;
    }

    .report-header h1[b-q9phst5cre] {
        font-size: 1.3rem;
        gap: 8px;
    }

    .report-header h1 svg[b-q9phst5cre] {
        width: 24px;
        height: 24px;
    }

    .report-date[b-q9phst5cre] {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }

    .stat-badge[b-q9phst5cre] {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .report-container[b-q9phst5cre] {
        border-radius: 12px;
    }

    .empty-state svg[b-q9phst5cre] {
        width: 48px;
        height: 48px;
    }

    .empty-state h2[b-q9phst5cre] {
        font-size: 1.1rem;
    }
}


/* SHARED-LC-v2 (2026-05-19): all .view-listen-card / .view-pill / .view-play-btn /
   .view-prepare-btn / .view-stop-btn / .view-skip-btn / .view-voice-select /
   .view-save-voice-btn / .view-pill-hint / .view-now-playing / .view-companion-sphere /
   .view-talk-bar / .view-progress-track / .view-progress-fill / .view-caption-bubble
   rules were moved to NTS_CRM/Components/Audio/ListenCard.razor.css when the inline
   Listen card was extracted to a shared component. If you need to tweak the Listen
   card's appearance, edit there. */
/* /Pages/DailyProgress/DailyProgress.razor.rz.scp.css */
/* ============================================
   DAILY PROGRESS PAGE - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only daily-progress-specific styles here
   ============================================ */

/* Page-specific adjustments */
.daily-progress-page[b-umz3pbnl3h] {
    min-height: calc(100vh - 56px);
}

/* ============================================
   PAGE CONTAINER (DP-ALIGN, 2026-05-20)
   Standardized at 1200px to match /daily-briefing's .db-page-container.
   Pre-DP-ALIGN was inline 900px on the .list-page-container element; the
   wider container gives the two-column Recent Deliveries grid + (eventual)
   settings panel room without feeling sparse on ultrawide displays.
   ============================================ */
.dp-page-container[b-umz3pbnl3h] {
    max-width: 1200px;
    /* Match .db-page-container's FAB clearance — floating chat is ~90px tall;
       110px keeps the last Recent Deliveries row clickable. */
    padding-bottom: 110px;
}

/* ============================================
   HERO CARD (DP-ALIGN, 2026-05-20)
   Mirrors /daily-briefing's `.db-hero` so the two surfaces feel like siblings.
   Filled theme-primary background, white text + status badge, subtitle, inline
   stat pills. CSS values intentionally kept in sync with .db-hero* — if you
   tune one, tune both (or extract to shared utilities).
   ============================================ */
.dp-hero[b-umz3pbnl3h] {
    position: relative;
    background: var(--theme-primary, #667eea);
    color: var(--theme-btn-text, #ffffff);
    padding: 36px 40px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 12px 32px var(--theme-shadow-color, rgba(102, 126, 234, 0.3));
    width: 100%;
    box-sizing: border-box;
}

.dp-hero-content[b-umz3pbnl3h] {
    position: relative;
}

.dp-hero-heading[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.dp-hero-title[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.dp-hero-title svg[b-umz3pbnl3h] {
    flex-shrink: 0;
}

.dp-hero-badge[b-umz3pbnl3h] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dp-hero-badge[b-umz3pbnl3h]::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fbbf24;
}

.dp-hero-badge.active[b-umz3pbnl3h]::before {
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.7);
}

.dp-hero-subtitle[b-umz3pbnl3h] {
    margin: 0 0 22px;
    font-size: 1.05rem;
    max-width: 640px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.95);
}

.dp-hero-stats[b-umz3pbnl3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dp-hero-stat[b-umz3pbnl3h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(8px);
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.9rem;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

.dp-hero-stat strong[b-umz3pbnl3h] {
    font-weight: 700;
    font-size: 1rem;
}

.dp-hero-stat svg[b-umz3pbnl3h] {
    flex-shrink: 0;
}

/* Mobile — same scaling as Briefing for visual parity. */
@media (max-width: 640px) {
    .dp-hero[b-umz3pbnl3h] {
        padding: 24px;
    }

    .dp-hero-title[b-umz3pbnl3h] {
        font-size: 1.5rem;
        gap: 10px;
    }

    .dp-hero-title svg[b-umz3pbnl3h] {
        width: 26px;
        height: 26px;
    }

    .dp-hero-subtitle[b-umz3pbnl3h] {
        font-size: 0.95rem;
        margin-bottom: 16px;
    }

    .dp-hero-stat[b-umz3pbnl3h] {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* ============================================
   TITLE ROW (badge inline with title) — LEGACY pre-DP-ALIGN
   Pre-DP-ALIGN the page used a plain title + .nts-badge row instead of the
   hero card. Class retained because no other consumer was audited, but the
   main page render no longer uses it. Safe to remove if a future sweep
   confirms nothing else references .dp-title-row.
   ============================================ */
.dp-title-row[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ============================================
   STATS BAR (delivery info pills)
   ============================================ */
.dp-stats-bar[b-umz3pbnl3h] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* DP-PILL-FLATTEN (2026-05-20): pills read as info chips, not buttons.
   Previously had card-style elevation (white background + border + shadow +
   hover lift) which created a false affordance — they looked clickable but
   weren't. Settings button below remains the canonical edit path. Now: flat
   tinted background, no shadow, no hover transform, lighter weight, tighter
   padding. The "Active" badge in the header is the only real interactive-
   looking pill now, which sharpens the visual hierarchy. */
.stat-pill[b-umz3pbnl3h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.04));
    border: none;
}

.stat-pill svg[b-umz3pbnl3h] {
    width: 14px;
    height: 14px;
    color: var(--theme-text-muted, #94a3b8);
    opacity: 0.8;
}

/* ============================================
   ACTION BUTTONS BAR
   ============================================ */
.dp-actions[b-umz3pbnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 16px;
    margin-bottom: 28px;
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 4px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.actions-left[b-umz3pbnl3h] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dp-actions .icon[b-umz3pbnl3h] {
    width: 16px;
    height: 16px;
}

/* ============================================
   HISTORY SECTION
   ============================================ */
.dp-settings-title[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 24px;
    color: var(--theme-text-primary, #1e293b);
}

.dp-settings-title svg[b-umz3pbnl3h] {
    width: 22px;
    height: 22px;
    color: var(--theme-text-secondary, #64748b);
}

.dp-history-section[b-umz3pbnl3h] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    padding: 24px;
    margin-bottom: 20px;
}

.dp-history-list[b-umz3pbnl3h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ============================================
   DP-MERGE (2026-05-20): polished report card grid.
   Ported from the retired /progress-reports page. Whole card is a single
   <button> for a11y (one click target). TODAY card gets a brighter left
   border and a soft theme-colored ring. Quiet-day note replaces the stats
   row when nothing happened. Pr-* prefix swapped to dp-* to match the
   page's existing convention.
   ============================================ */
.dp-reports-grid[b-umz3pbnl3h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    width: 100%;
}

.dp-report-card[b-umz3pbnl3h] {
    /* Reset button defaults so the whole surface reads as a card. */
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    cursor: pointer;

    position: relative;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-left: 4px solid var(--theme-primary, #667eea);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    text-align: left;
}

.dp-report-card:hover[b-umz3pbnl3h],
.dp-report-card:focus-visible[b-umz3pbnl3h] {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    border-color: var(--theme-primary, #667eea);
}

.dp-report-card:focus-visible[b-umz3pbnl3h] {
    outline: 2px solid var(--theme-primary, #667eea);
    outline-offset: 2px;
}

.dp-report-card.dp-is-getting-started[b-umz3pbnl3h] {
    border-left-color: #10b981;
}

.dp-report-card.dp-is-today[b-umz3pbnl3h] {
    border-left-width: 5px;
    box-shadow: 0 4px 16px var(--theme-shadow-color, rgba(102, 126, 234, 0.25));
    outline: 2px solid color-mix(in srgb, var(--theme-primary, #667eea) 30%, transparent);
    outline-offset: -1px;
}

.dp-card-top[b-umz3pbnl3h] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.dp-card-date-block[b-umz3pbnl3h] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dp-today-pill[b-umz3pbnl3h] {
    display: inline-block;
    align-self: flex-start;
    background: var(--theme-primary, #667eea);
    color: var(--theme-btn-text, #ffffff);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.dp-card-day[b-umz3pbnl3h] {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.dp-card-date[b-umz3pbnl3h] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.dp-card-top-right[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dp-card-time[b-umz3pbnl3h] {
    color: #94a3b8;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
}

.dp-card-chevron[b-umz3pbnl3h] {
    color: #cbd5e1;
    transition: color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.dp-report-card:hover .dp-card-chevron[b-umz3pbnl3h],
.dp-report-card:focus-visible .dp-card-chevron[b-umz3pbnl3h] {
    color: var(--theme-primary-ink, var(--theme-primary, #667eea));
    transform: translateX(3px);
}

.dp-card-body[b-umz3pbnl3h] {
    /* Reserve consistent height so cards have similar footprint regardless
       of how many chips they contain. */
    min-height: 28px;
    display: flex;
    align-items: center;
}

.dp-stats-row[b-umz3pbnl3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Horizontal pill — explicit flex-direction defends against the legacy
   global .stat-chip rule in home-integrated.css (flex-direction: column
   + min-width: 85px) that wins on specificity ties. */
.dp-chip[b-umz3pbnl3h] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid transparent;
    min-width: 0;
    flex: 0 0 auto;
    width: auto;
}

.dp-chip svg[b-umz3pbnl3h] {
    flex-shrink: 0;
}

.dp-chip-success[b-umz3pbnl3h] {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}

.dp-chip-info[b-umz3pbnl3h] {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.25);
}

.dp-chip-warning[b-umz3pbnl3h] {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.3);
}

.dp-chip-error[b-umz3pbnl3h] {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.25);
}

.dp-chip-getting-started[b-umz3pbnl3h] {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
    border-color: rgba(16, 185, 129, 0.25);
}

.dp-quiet-day[b-umz3pbnl3h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.8rem;
    font-style: italic;
}

/* Dark-theme adjustments for the report card. Mirrors the .pr-* dark-mode
   block in the retired page so the cards keep luminance on dark themes. */
.is-dark .dp-report-card[b-umz3pbnl3h] {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.is-dark .dp-card-date[b-umz3pbnl3h] {
    color: #f1f5f9;
}

.is-dark .dp-card-day[b-umz3pbnl3h],
.is-dark .dp-card-time[b-umz3pbnl3h],
.is-dark .dp-quiet-day[b-umz3pbnl3h] {
    color: #cbd5e1;
}

.is-dark .dp-card-chevron[b-umz3pbnl3h] {
    color: rgba(255, 255, 255, 0.35);
}

.is-dark .dp-chip[b-umz3pbnl3h] {
    filter: brightness(1.2);
}

@media (max-width: 640px) {
    .dp-reports-grid[b-umz3pbnl3h] {
        grid-template-columns: 1fr;
    }

    .dp-card-date[b-umz3pbnl3h] {
        font-size: 1.05rem;
    }
}

.icon-btn[b-umz3pbnl3h] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.icon-btn:hover[b-umz3pbnl3h] {
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.05));
    color: var(--theme-text-primary, #1e293b);
}

.icon-btn svg[b-umz3pbnl3h] {
    width: 18px;
    height: 18px;
}

/* History Empty State */
.dp-history-empty[b-umz3pbnl3h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 16px;
    text-align: center;
}

.dp-history-empty svg[b-umz3pbnl3h] {
    width: 36px;
    height: 36px;
    color: var(--theme-text-muted, #94a3b8);
    opacity: 0.5;
}

.dp-history-empty p[b-umz3pbnl3h] {
    font-size: 0.875rem;
    color: var(--theme-text-muted, #94a3b8);
    margin: 0;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .stat-pill[b-umz3pbnl3h] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .stat-pill svg[b-umz3pbnl3h] {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

.is-dark .dp-actions[b-umz3pbnl3h] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .dp-history-section[b-umz3pbnl3h] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE — MOBILE
   ============================================ */
@media (max-width: 768px) {
    .dp-actions[b-umz3pbnl3h] {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-left[b-umz3pbnl3h] {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    /* Tighter header */
    .daily-progress-page .list-page-header[b-umz3pbnl3h] {
        margin-bottom: 14px;
        gap: 8px;
    }

    .daily-progress-page .list-page-title[b-umz3pbnl3h] {
        font-size: 1.35rem;
        gap: 8px;
    }

    .daily-progress-page .list-page-title svg[b-umz3pbnl3h] {
        width: 22px;
        height: 22px;
    }

    .daily-progress-page .list-page-subtitle[b-umz3pbnl3h] {
        font-size: 0.8rem;
    }

    /* Compact stat pills */
    .dp-stats-bar[b-umz3pbnl3h] {
        gap: 6px;
        margin-bottom: 14px;
    }

    .stat-pill[b-umz3pbnl3h] {
        padding: 5px 10px;
        font-size: 0.75rem;
        gap: 5px;
    }

    .stat-pill svg[b-umz3pbnl3h] {
        width: 12px;
        height: 12px;
    }

    /* Compact action bar */
    .dp-actions[b-umz3pbnl3h] {
        padding: 12px 14px;
        margin-bottom: 16px;
        border-radius: 12px;
        gap: 8px;
    }

    .actions-left[b-umz3pbnl3h] {
        gap: 6px;
        width: 100%;
    }

    .actions-left .nts-btn[b-umz3pbnl3h] {
        flex: 1;
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    /* Compact history section */
    .dp-history-section[b-umz3pbnl3h] {
        padding: 16px;
        border-radius: 12px;
    }

    .dp-settings-title[b-umz3pbnl3h] {
        font-size: 0.95rem;
        margin-bottom: 16px;
        gap: 8px;
    }

    .dp-settings-title svg[b-umz3pbnl3h] {
        width: 18px;
        height: 18px;
    }

    .dp-history-item[b-umz3pbnl3h] {
        padding: 10px 12px;
    }

    .dp-history-date[b-umz3pbnl3h] {
        font-size: 0.82rem;
    }

    .dp-history-stats[b-umz3pbnl3h] {
        font-size: 0.75rem;
    }

    .icon-btn[b-umz3pbnl3h] {
        width: 32px;
        height: 32px;
    }

    .icon-btn svg[b-umz3pbnl3h] {
        width: 16px;
        height: 16px;
    }

    .dp-history-empty[b-umz3pbnl3h] {
        padding: 24px 12px;
    }

    .dp-history-empty svg[b-umz3pbnl3h] {
        width: 28px;
        height: 28px;
    }

    .dp-history-empty p[b-umz3pbnl3h] {
        font-size: 0.8rem;
    }
}

.is-dark .dp-history-item:hover[b-umz3pbnl3h] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .icon-btn:hover[b-umz3pbnl3h] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .dp-stats-bar[b-umz3pbnl3h] {
        flex-direction: column;
    }

    .dp-actions[b-umz3pbnl3h] {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-left[b-umz3pbnl3h] {
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────
   DP-V-3 (2026-05): Missed-delivery warning banner.
   Mirrors the DB-V-3 db-failure-banner styles — same theme-
   token-driven shape, same mobile collapse rule. The dp-
   prefix keeps it disambiguated from the Daily Briefing copy.
   ───────────────────────────────────────────────────────── */
.dp-failure-banner-section[b-umz3pbnl3h] {
    margin: 16px 0;
}

.dp-failure-banner[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background-color: var(--theme-danger-soft, #fef2f2);
    border: 1px solid var(--theme-danger, #ef4444);
    border-radius: 12px;
}

.dp-failure-icon[b-umz3pbnl3h] {
    flex: 0 0 auto;
    color: var(--theme-danger, #ef4444);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dp-failure-body[b-umz3pbnl3h] {
    flex: 1 1 auto;
    min-width: 0;
}

.dp-failure-title[b-umz3pbnl3h] {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--theme-text-primary, #111827);
}

.dp-failure-detail[b-umz3pbnl3h] {
    margin: 0;
    font-size: 13px;
    color: var(--theme-text-muted, #4b5563);
    line-height: 1.5;
}

@media (max-width: 640px) {
    .dp-failure-banner[b-umz3pbnl3h] {
        flex-wrap: wrap;
    }

    .dp-failure-banner .nts-btn[b-umz3pbnl3h] {
        width: 100%;
    }
}

/* BRIEF-MERGE-1 Phase 1-lite (2026-08-07): the News add-on wayfinding card. */
.dp-news-addon[b-umz3pbnl3h] {
    margin-top: 1.5rem;
}

.dp-news-addon-card[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(16, 185, 129, 0.06));
}

.dp-news-addon-icon[b-umz3pbnl3h] {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
}

.dp-news-addon-text[b-umz3pbnl3h] {
    flex: 1;
    min-width: 0;
}

.dp-news-addon-text h3[b-umz3pbnl3h] {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text, #1e293b);
}

.dp-news-addon-text p[b-umz3pbnl3h] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--theme-text-secondary, #64748b);
}

.dp-news-addon-link[b-umz3pbnl3h] {
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
}

.dp-news-addon-link:hover[b-umz3pbnl3h] {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .dp-news-addon-card[b-umz3pbnl3h] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* BRIEF-SLOT-TRUTH-1b (2026-08-08): hero link to the real schedule owner (/delivery-schedule). */
.dp-hero-schedule-link[b-umz3pbnl3h] {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.dp-hero-schedule-link:hover[b-umz3pbnl3h] {
    color: #ffffff;
    text-decoration: underline;
}

/* ── BRIEF-P1-1 (2026-08-08): on-page News Topics manager ── */
.dp-news-manager[b-umz3pbnl3h] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    padding: 20px 22px;
}

.dp-news-manager-head[b-umz3pbnl3h] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
}

.dp-news-manager-head .dp-news-addon-text[b-umz3pbnl3h] {
    flex: 1;
    min-width: 220px;
}

.dp-news-manager-actions[b-umz3pbnl3h] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.dp-news-empty[b-umz3pbnl3h] {
    margin: 14px 0 0 0;
    font-size: 0.88rem;
    color: var(--theme-text-secondary, #64748b);
}

.dp-news-topic-list[b-umz3pbnl3h] {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dp-news-topic[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-left: 3px solid var(--theme-primary, #6366f1);
    border-radius: 10px;
}

.dp-news-topic-paused[b-umz3pbnl3h] {
    opacity: 0.6;
    border-left-color: var(--theme-border, #cbd5e1);
}

.dp-news-topic-info[b-umz3pbnl3h] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.dp-news-topic-title[b-umz3pbnl3h] {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--theme-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-news-topic-chip[b-umz3pbnl3h] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--theme-border, #e2e8f0);
    color: var(--theme-text-secondary, #64748b);
}

.dp-news-topic-actions[b-umz3pbnl3h] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.dp-news-icon-btn[b-umz3pbnl3h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
}

.dp-news-icon-btn:hover:not(:disabled)[b-umz3pbnl3h] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.dp-news-icon-btn.dp-news-icon-danger:hover:not(:disabled)[b-umz3pbnl3h] {
    border-color: #ef4444;
    color: #ef4444;
}

.dp-news-icon-btn:disabled[b-umz3pbnl3h] {
    opacity: 0.5;
    cursor: default;
}

.dp-news-more-link[b-umz3pbnl3h] {
    display: inline-block;
    margin-top: 14px;
}
/* /Pages/DailyProgress/DailyProgressSettingsDialog.razor.rz.scp.css */
/* ============================================
   DAILY PROGRESS SETTINGS DIALOG STYLES
   ============================================ */

.settings-section h4[b-tm1yqr70sr] {
    margin: 0 0 12px 0;
    font-size: 1rem;
    color: var(--theme-text-primary);
}

/* Toggle Switch */
.switch-group[b-tm1yqr70sr] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* VOICE-SYNC-1 UI cleanup (2026-06-19): unified to the app-standard toggle (matches the Daily
   Briefing dialog + ManageAccount etc.) — 40x20, #22c55e, rounding baked into .slider so no .round. */
.switch[b-tm1yqr70sr] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    flex-shrink: 0;
}

.switch input[b-tm1yqr70sr] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-tm1yqr70sr] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: var(--theme-border);
    transition: 0.3s;
    border-radius: 34px;
}

.slider[b-tm1yqr70sr]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

input:checked + .slider[b-tm1yqr70sr] {
    background-color: #22c55e;
}

input:checked + .slider[b-tm1yqr70sr]:before {
    transform: translateX(20px);
}

.switch-label[b-tm1yqr70sr] {
    display: flex;
    flex-direction: column;
}

.switch-label small[b-tm1yqr70sr] {
    font-size: 0.8rem;
}

.divider[b-tm1yqr70sr] {
    margin: 16px 0;
    border: 0;
    border-top: 1px solid var(--theme-border);
}

/* Form Layout */
.form-grid[b-tm1yqr70sr] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 12px;
    margin-bottom: 16px;
}

.form-group[b-tm1yqr70sr] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.form-group label[b-tm1yqr70sr] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-control[b-tm1yqr70sr],
.form-select[b-tm1yqr70sr] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, var(--theme-border));
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg, var(--theme-surface));
    color: var(--theme-input-text, var(--theme-text-primary));
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus[b-tm1yqr70sr],
.form-select:focus[b-tm1yqr70sr] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.helper-text[b-tm1yqr70sr] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

/* Day Selector */
.days-header[b-tm1yqr70sr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.days-presets[b-tm1yqr70sr] {
    display: flex;
    gap: 8px;
}

.btn-preset[b-tm1yqr70sr] {
    background: none;
    border: none;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}

.btn-preset:hover[b-tm1yqr70sr] {
    text-decoration: underline;
}

.days-chips[b-tm1yqr70sr] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.chip[b-tm1yqr70sr] {
    padding: 4px 12px;
    border-radius: 16px;
    background: var(--theme-chip-bg, var(--theme-surface-secondary));
    color: var(--theme-chip-color, var(--theme-text-primary));
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.chip.active[b-tm1yqr70sr] {
    background: var(--theme-primary);
    color: white;
}

.schedule-summary[b-tm1yqr70sr] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    margin: 0;
}

/* Checkboxes */
.checkbox-list[b-tm1yqr70sr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group[b-tm1yqr70sr] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-label[b-tm1yqr70sr] {
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

/* Mode Cards */
.mode-card-grid[b-tm1yqr70sr] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.mode-card-grid-2[b-tm1yqr70sr] {
    grid-template-columns: repeat(2, 1fr);
}

.mode-card[b-tm1yqr70sr] {
    padding: 0.75rem 0.5rem;
    border-radius: 10px;
    border: 2px solid var(--theme-border);
    background: var(--theme-surface);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.mode-card:hover[b-tm1yqr70sr] {
    border-color: var(--theme-primary);
}

.mode-card.active[b-tm1yqr70sr] {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.mode-card-icon[b-tm1yqr70sr] {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.mode-card-title[b-tm1yqr70sr] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-text-primary);
}

.mode-card-desc[b-tm1yqr70sr] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary);
    margin-top: 0.15rem;
}

.text-success[b-tm1yqr70sr] {
    color: var(--theme-success, #28a745);
}

.text-secondary[b-tm1yqr70sr] {
    color: var(--theme-text-secondary);
}
/* /Pages/DeliverySchedule/DeliverySchedule.razor.rz.scp.css */
.ds-page[b-ukmy962x7c] {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

.ds-hero[b-ukmy962x7c] {
    background: var(--theme-surface-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.ds-hero h1[b-ukmy962x7c] {
    margin: 0 0 8px;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--theme-text-primary);
}

.ds-hero p[b-ukmy962x7c] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--theme-text-secondary);
}

.ds-hero p.ds-tz[b-ukmy962x7c] {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--theme-text-muted);
}

.ds-hero p.ds-tz a[b-ukmy962x7c] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    font-weight: 600;
}

.ds-hero p.ds-tz a:hover[b-ukmy962x7c] {
    text-decoration: underline;
}

.ds-loading[b-ukmy962x7c] {
    padding: 32px;
    text-align: center;
    color: var(--theme-text-muted);
}

.ds-slots[b-ukmy962x7c] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ds-empty[b-ukmy962x7c] {
    border: 1px dashed var(--theme-border);
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    color: var(--theme-text-secondary);
}

.ds-empty p[b-ukmy962x7c] { margin: 0 0 6px; }
.ds-empty-sub[b-ukmy962x7c] { font-size: 0.85rem; color: var(--theme-text-muted); }

.ds-slot[b-ukmy962x7c] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 14px 18px;
}

.ds-slot--paused[b-ukmy962x7c] { opacity: 0.6; }

.ds-slot-time[b-ukmy962x7c] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
}

.ds-time[b-ukmy962x7c] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.ds-label[b-ukmy962x7c] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
}

.ds-days[b-ukmy962x7c] {
    font-size: 0.8rem;
    color: var(--theme-text-muted);
}

.ds-slot-what[b-ukmy962x7c] {
    flex: 1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ds-chip[b-ukmy962x7c] {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
}

.ds-chip--combined[b-ukmy962x7c] { border-color: var(--theme-primary); color: var(--theme-primary-ink, var(--theme-primary)); }
.ds-chip--progress[b-ukmy962x7c] { }
.ds-chip--news[b-ukmy962x7c] { }
.ds-chip--paused[b-ukmy962x7c] { color: var(--theme-text-muted); }

.ds-slot-actions[b-ukmy962x7c] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ds-danger[b-ukmy962x7c] { color: var(--theme-danger); }

.ds-add[b-ukmy962x7c] { margin-top: 8px; align-self: flex-start; }

/* ── Editor dialog ─────────────────────────────────────────────── */
.ds-form[b-ukmy962x7c] { display: flex; flex-direction: column; gap: 18px; }

.ds-form-row[b-ukmy962x7c] { display: flex; flex-direction: column; gap: 8px; }

.ds-form-row > label[b-ukmy962x7c] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.ds-optional[b-ukmy962x7c] { font-weight: 400; color: var(--theme-text-muted); }

.ds-day-chips[b-ukmy962x7c] { display: flex; gap: 6px; flex-wrap: wrap; }

.ds-day[b-ukmy962x7c] {
    min-width: 44px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.ds-day--on[b-ukmy962x7c] {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-btn-text);
}

.ds-includes[b-ukmy962x7c] { display: flex; flex-direction: column; gap: 8px; }

.ds-check[b-ukmy962x7c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
    cursor: pointer;
}

.ds-hint[b-ukmy962x7c] { margin: 4px 0 0; font-size: 0.8rem; color: var(--theme-text-muted); }
.ds-hint--warn[b-ukmy962x7c] { color: var(--theme-danger); }

.ds-text[b-ukmy962x7c] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.9rem;
}

.ds-form-footer[b-ukmy962x7c] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}
/* /Pages/Finance/BankConnections.razor.rz.scp.css */
/* PLAID-1 (2026-10-08): Bank Connections. Header, buttons and empty states use the shared
   list-page-* classes; only the bank cards and the mapping table are local, and they use
   theme VARIABLES only - no theme enumeration, no hardcoded colors - so Cloud, Executive,
   Slate and every .is-dark theme get them right (see the Slate legacy-enumeration note). */
.bc-muted[b-i2hzzg2of9] { color: var(--theme-text-muted); font-size: .875rem; }
.bc-hint[b-i2hzzg2of9] { margin-top: 8px; }
.bc-item[b-i2hzzg2of9] {
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 16px 0;
}
.bc-item-head[b-i2hzzg2of9] { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.bc-item-head h2[b-i2hzzg2of9] { font-size: 1.1rem; margin: 0 8px 4px 0; display: inline-block; color: var(--theme-text-primary); }
.bc-item-actions[b-i2hzzg2of9] { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bc-badge[b-i2hzzg2of9] {
    display: inline-block; font-size: .75rem; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--theme-border); color: var(--theme-text-secondary); margin-right: 6px;
}
.bc-badge-warn[b-i2hzzg2of9] { border-color: var(--theme-text-danger); color: var(--theme-text-danger); }
.bc-confirm[b-i2hzzg2of9] { font-size: .875rem; color: var(--theme-text-secondary); }
.bc-error[b-i2hzzg2of9] { color: var(--theme-text-danger); margin: 8px 0 0; }
.bc-sync-result[b-i2hzzg2of9] { margin: 6px 0 0; font-size: .9rem; color: var(--theme-text-secondary); }
.bc-sync-result a[b-i2hzzg2of9] { color: var(--theme-primary); }
.bc-table[b-i2hzzg2of9] { width: 100%; border-collapse: collapse; margin-top: 12px; }
.bc-table th[b-i2hzzg2of9] {
    text-align: left; font-weight: 600; font-size: .8rem; padding: 6px 8px;
    color: var(--theme-text-muted);
}
.bc-table td[b-i2hzzg2of9] { padding: 8px; vertical-align: middle; border-top: 1px solid var(--theme-border); color: var(--theme-text-primary); }
.bc-table select[b-i2hzzg2of9], .bc-table input[type=date][b-i2hzzg2of9] {
    min-width: 160px; padding: 6px 8px; border-radius: 8px;
    background: var(--theme-input-bg); color: var(--theme-input-text, var(--theme-text-primary));
    border: 1px solid var(--theme-input-border, var(--theme-border));
}
.bc-acct-name[b-i2hzzg2of9] { font-weight: 500; }
@media (max-width: 720px) {
    .bc-table thead[b-i2hzzg2of9] { display: none; }
    .bc-table tr[b-i2hzzg2of9] { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 0; }
    .bc-table td[b-i2hzzg2of9] { border-top: none; padding: 2px 0; }
}
.bc-check[b-i2hzzg2of9] { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; color: var(--theme-text-primary); white-space: nowrap; }
/* /Pages/Finance/Budget.razor.rz.scp.css */
/* ============================================
   BUDGET PAGE - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only budget-specific styles here (tabs, form, table, insights)
   ============================================ */

/* Budget-specific page adjustments */
.budget-page[b-381xcec2h2] {
    min-height: calc(100vh - 56px);
}

/* ============================================
   BUDGET INSIGHTS
   ============================================ */
.budget-insights-card[b-381xcec2h2] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    padding: 24px;
    margin-bottom: 20px;
}

.budget-insights-card h3[b-381xcec2h2] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--theme-text-primary, #1e293b);
}

.budget-insights-content[b-381xcec2h2] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.budget-alert[b-381xcec2h2] {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.budget-alert-success[b-381xcec2h2] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.budget-alert-warning[b-381xcec2h2] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

/* Info variant — used for "trending off track" (forecast-bad but actuals-OK).
 * Less alarming than warning (the user isn't actually missing yet), more
 * informational than success. */
.budget-alert-info[b-381xcec2h2] {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

/* ============================================
 * Per-budget status alerts
 *
 * Each alert is now a header (status label + count) followed by a list of
 * budget names with their variance detail. Replaces the previous one-line
 * aggregate counts which left users guessing *which* budgets were in trouble.
 * ============================================ */
.budget-alert-header[b-381xcec2h2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

/* Subtle "X of Y" count to the right of the header — same hue as the alert
 * but slightly demoted so the status label reads first. */
.budget-alert-count[b-381xcec2h2] {
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0.75;
}

.budget-alert-list[b-381xcec2h2] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.budget-alert-list li[b-381xcec2h2] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.budget-alert-list li:first-child[b-381xcec2h2] {
    border-top: none;
    padding-top: 2px;
}

.budget-alert-name[b-381xcec2h2] {
    font-weight: 600;
}

/* Variance detail (e.g. "$33 under cap") — slightly smaller and lighter so
 * the eye lands on the budget name first, then the explanation. */
.budget-alert-detail[b-381xcec2h2] {
    font-size: 0.825rem;
    opacity: 0.85;
    text-align: right;
}

/* Dark-theme: list dividers need a brighter neutral or they vanish against
 * the rgba(30, 41, 59, 0.6) alert backgrounds inherited from the card. */
.is-dark .budget-alert-list li[b-381xcec2h2] {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.budget-insight-row[b-381xcec2h2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Forecast row — visually demoted vs the actuals rows above it because
 * forecast is a derived/predictive number, not a measured one. Italic +
 * lighter weight signals "this is a projection." */
.budget-insight-forecast[b-381xcec2h2] {
    font-style: italic;
    border-top: 1px dashed var(--theme-border, #e2e8f0);
    margin-top: 4px;
    padding-top: 12px;
}

/* Inline info-tip — small ⓘ icon next to a metric label that uses the native
 * HTML title attribute for the tooltip text. Subtle by default, brightens on
 * hover to signal interactivity. If this pattern spreads to 3+ pages, lift it
 * into a shared <InfoTip> component with consistent styling. For now inline
 * keeps the surface small. */
.info-tip[b-381xcec2h2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: var(--theme-text-secondary, #94a3b8);
    font-size: 0.85em;
    cursor: help;
    transition: color 0.15s ease;
    user-select: none;
}

.info-tip:hover[b-381xcec2h2] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

/* ============================================
 * Budget FAQ — expandable Q&A cluster
 *
 * Sits between the Insights card and the All Budgets table. Closed by default
 * — users who know the answers aren't bothered, users who don't have a
 * discoverable explanation right where they need it. Uses native <details>
 * for keyboard + screen-reader accessibility without a JS dependency.
 * ============================================ */

.budget-faq[b-381xcec2h2] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.15s ease;
}

.budget-faq[open][b-381xcec2h2] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.budget-faq-summary[b-381xcec2h2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--theme-text-primary, #1e293b);
    font-weight: 500;
    list-style: none;
    user-select: none;
}

/* Hide default disclosure marker — we render our own chevron. */
.budget-faq-summary[b-381xcec2h2]::-webkit-details-marker { display: none; }
.budget-faq-summary[b-381xcec2h2]::marker { content: ""; }

.budget-faq-summary:hover[b-381xcec2h2] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.budget-faq-icon[b-381xcec2h2] {
    font-size: 1.1rem;
    line-height: 1;
}

.budget-faq-chevron[b-381xcec2h2] {
    margin-left: auto;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #94a3b8);
    transition: transform 0.2s ease;
}

.budget-faq[open] .budget-faq-chevron[b-381xcec2h2] {
    transform: rotate(180deg);
}

.budget-faq-content[b-381xcec2h2] {
    padding: 4px 18px 18px 18px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.budget-faq-item h4[b-381xcec2h2] {
    margin: 12px 0 6px 0;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
}

.budget-faq-item p[b-381xcec2h2] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--theme-text-secondary, #64748b);
}

/* Dark-theme overrides — match the rest of the budget page surface. */
.is-dark .budget-faq[b-381xcec2h2] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .budget-faq-summary:hover[b-381xcec2h2] {
    background: rgba(255, 255, 255, 0.04);
}

.is-dark .budget-faq-content[b-381xcec2h2] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.text-success[b-381xcec2h2] { color: #22c55e; }
.text-error[b-381xcec2h2] { color: #ef4444; }

.budget-progress-container[b-381xcec2h2] {
    height: 8px;
    background: var(--theme-surface-secondary, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.budget-progress-bar[b-381xcec2h2] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.budget-progress-bar.success[b-381xcec2h2] { background: linear-gradient(90deg, #22c55e, #4ade80); }
.budget-progress-bar.error[b-381xcec2h2] { background: linear-gradient(90deg, #ef4444, #f87171); }

/* ============================================
   BUDGET TABLE
   ============================================ */
.budget-table-card[b-381xcec2h2] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    padding: 24px;
}

.budget-table-card h3[b-381xcec2h2] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--theme-text-primary, #1e293b);
}

.budget-table-container[b-381xcec2h2] {
    overflow-x: auto;
}

.budget-table[b-381xcec2h2] {
    width: 100%;
    border-collapse: collapse;
}

.budget-table th[b-381xcec2h2],
.budget-table td[b-381xcec2h2] {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    white-space: nowrap;
}

/* Default cell text color — bare <td> cells inherit theme-aware color
   instead of falling through to browser-default black on dark themes.
   Class-based modifiers (e.g. .text-success, .text-error) still override. */
.budget-table td[b-381xcec2h2] {
    color: var(--theme-text-primary, #1e293b);
}

.budget-table th[b-381xcec2h2] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary, #64748b);
    background: var(--theme-surface-secondary, #f8fafc);
}

.budget-table tbody tr:hover[b-381xcec2h2] {
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.02));
}

.budget-name-cell[b-381xcec2h2] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.budget-icon[b-381xcec2h2] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
}

.budget-icon.icon-green[b-381xcec2h2] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.budget-icon.icon-rose[b-381xcec2h2] { background: rgba(244, 63, 94, 0.15); color: #f43f5e; }
.budget-icon.icon-cyan[b-381xcec2h2] { background: rgba(14, 165, 233, 0.15); color: #0ea5e9; }

/* Toggle Switch */
.budget-toggle[b-381xcec2h2] {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    vertical-align: middle;
}

.budget-toggle input[b-381xcec2h2] {
    opacity: 0;
    width: 0;
    height: 0;
}

.budget-toggle-slider[b-381xcec2h2] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    border-radius: 11px;
    transition: 0.3s;
}

.budget-toggle-slider[b-381xcec2h2]:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

.budget-toggle input:checked + .budget-toggle-slider[b-381xcec2h2] {
    background-color: #22c55e;
}

.budget-toggle input:checked + .budget-toggle-slider[b-381xcec2h2]:before {
    transform: translateX(18px);
}

.budget-status-label[b-381xcec2h2] {
    margin-left: 8px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Row Actions */
.budget-row-actions[b-381xcec2h2] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.budget-action-btn[b-381xcec2h2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: var(--theme-surface-secondary, rgba(100, 116, 139, 0.1));
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--theme-text-secondary, #64748b);
}

.budget-action-btn svg[b-381xcec2h2] {
    width: 16px;
    height: 16px;
}

.budget-action-btn:hover[b-381xcec2h2] {
    background: var(--theme-accent, #3b82f6);
    color: white;
    transform: scale(1.05);
}

.budget-action-btn.action-danger:hover[b-381xcec2h2] {
    background: #ef4444;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .budget-insights-card[b-381xcec2h2],
.is-dark .budget-table-card[b-381xcec2h2] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .budget-table th[b-381xcec2h2] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .budget-table tbody tr:hover[b-381xcec2h2] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .budget-action-btn[b-381xcec2h2] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .budget-progress-container[b-381xcec2h2] {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .budget-table-container[b-381xcec2h2] {
        margin: 0 -24px;
        padding: 0 24px;
    }
}

@media (max-width: 600px) {
    .budget-page[b-381xcec2h2] {
        padding: 16px;
        padding-top: 72px;
    }
}

/* FIN-PULSE-1: opt-in toggles under Budget Insights */
.budget-pulse-optin[b-381xcec2h2] {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.budget-pulse-toggle[b-381xcec2h2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    font-size: 0.9rem;
    cursor: pointer;
}
/* /Pages/Finance/BudgetDialog.razor.rz.scp.css */
/* ============================================
   BUDGET DIALOG - Form-specific Styles
   ============================================
   FIN-DLG-1 (2026-06-17): the .budget-form / .budget-form-row /
   .budget-form-group / .budget-form-input / .budget-input-with-prefix /
   .budget-input-prefix / .required-indicator rules that used to live here
   were SCOPED to this component, so RecurringExpenseDialog (which reuses the
   same class names) got none of them — its rows stacked and the "$" prefix
   rendered above the input instead of inside it.

   They now live GLOBALLY in wwwroot/css/themes.css under
   "SHARED FINANCE DIALOG FORM" (next to the global .with-prefix padding rule),
   so BudgetDialog and RecurringExpenseDialog share one source of truth.
   Add Budget-ONLY overrides here if any are ever needed. */
/* /Pages/Finance/ExpenseReport.razor.rz.scp.css */
/* Scoped CSS for ExpenseReport.razor */

/* ============================================
   COMPARE-TO-PREVIOUS-PERIOD
   `er-` prefix to keep the scope hash from colliding with IncomeStatement's
   `is-` prefix. Same visual treatment otherwise — the toggle pill, the
   stat-card delta caption, the in-row delta chip and prior-line subtitle.
   Hoisted from FinancialSummary in 2026-04. See DECISIONS.md →
   "Reports Compare-to-previous-period hoist".
   ============================================ */

.er-compare-controls[b-vcjg8pe74o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Print button — paired with the Compare toggle in the header. Same shape +
 * dark-theme treatment as the Compare toggle so they read as one control
 * cluster. Hidden on print output (see utilities.css @media print). */
.er-print-btn[b-vcjg8pe74o] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.625rem;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.er-print-btn:hover[b-vcjg8pe74o] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.04));
    border-color: var(--theme-border-hover, #cbd5e1);
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .er-print-btn[b-vcjg8pe74o] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .er-print-btn:hover[b-vcjg8pe74o] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

.er-compare-toggle[b-vcjg8pe74o] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.er-compare-toggle:hover[b-vcjg8pe74o] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.04));
    border-color: var(--theme-border-hover, #cbd5e1);
}

.er-compare-toggle input[type="checkbox"][b-vcjg8pe74o] {
    cursor: pointer;
    accent-color: var(--theme-primary, #6366f1);
}

.is-dark .er-compare-toggle[b-vcjg8pe74o] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .er-compare-toggle:hover[b-vcjg8pe74o] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Stat-card delta caption — same treatment as IncomeStatement's `.is-stat-delta`
 * but scoped to this page. Two-line layout with the % delta on top (color-coded),
 * the prior absolute value below in muted text. */
.er-stat-delta[b-vcjg8pe74o] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.er-stat-delta.delta-positive[b-vcjg8pe74o] { color: #22c55e; }
.er-stat-delta.delta-negative[b-vcjg8pe74o] { color: #ef4444; }
.er-stat-delta.delta-neutral[b-vcjg8pe74o] { color: var(--theme-text-muted, #94a3b8); }

.er-stat-delta-prior[b-vcjg8pe74o] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
}

.is-dark .er-stat-delta.delta-positive[b-vcjg8pe74o] { color: #4ade80; }
.is-dark .er-stat-delta.delta-negative[b-vcjg8pe74o] { color: #f87171; }
.is-dark .er-stat-delta.delta-neutral[b-vcjg8pe74o] { color: rgba(255, 255, 255, 0.55); }
.is-dark .er-stat-delta-prior[b-vcjg8pe74o] { color: rgba(255, 255, 255, 0.5); }

/* In-row delta chip — sits next to the amount in Top Categories. Smaller and
 * tighter than the stat-card chip because it shares horizontal space with the
 * % chip and amount. The prior-line below the bar carries the absolute prior
 * value; this chip carries just the percent for fast scanning. */
.er-cat-delta[b-vcjg8pe74o] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: rgba(148, 163, 184, 0.12);
    color: var(--theme-text-muted, #94a3b8);
    vertical-align: middle;
}

.er-cat-delta.delta-positive[b-vcjg8pe74o] {
    background-color: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.er-cat-delta.delta-negative[b-vcjg8pe74o] {
    background-color: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.er-cat-prior-line[b-vcjg8pe74o] {
    margin-top: 0.25rem;
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
    text-align: right;
}

.is-dark .er-cat-delta[b-vcjg8pe74o] {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .er-cat-delta.delta-positive[b-vcjg8pe74o] {
    background-color: rgba(74, 222, 128, 0.18);
    color: #4ade80;
}

.is-dark .er-cat-delta.delta-negative[b-vcjg8pe74o] {
    background-color: rgba(248, 113, 113, 0.18);
    color: #f87171;
}

.is-dark .er-cat-prior-line[b-vcjg8pe74o] {
    color: rgba(255, 255, 255, 0.5);
}


.page-container[b-vcjg8pe74o] {
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: var(--theme-bg-main);
    color: var(--theme-text-primary);
}

/* Header */

.page-title[b-vcjg8pe74o] {
    color: var(--theme-text-primary);
    margin: 0;
}

.page-subtitle[b-vcjg8pe74o] {
    margin: 0.5rem 0 0 calc(24px + 1rem); /* Align with text start */
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.icon[b-vcjg8pe74o] {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Controls / Filters */
.controls-section[b-vcjg8pe74o] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: end;
    flex-wrap: wrap;
    background-color: var(--theme-surface-glass);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--theme-border);
    backdrop-filter: blur(10px);
}

.filter-group[b-vcjg8pe74o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label[b-vcjg8pe74o] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-control[b-vcjg8pe74o] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg-input);
    color: var(--theme-text-primary);
    font-size: 1rem;
    min-width: 150px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus[b-vcjg8pe74o] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-alpha);
}

.btn[b-vcjg8pe74o] {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-vcjg8pe74o] {
    background-color: var(--theme-primary);
    color: white;
}

.btn-primary:hover[b-vcjg8pe74o] {
    background-color: var(--theme-primary-dark);
}

/* Stats Grid */
.stats-grid[b-vcjg8pe74o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-vcjg8pe74o] {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.stat-card:hover[b-vcjg8pe74o] {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.stat-header[b-vcjg8pe74o] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 0.5rem;
}

.stat-icon[b-vcjg8pe74o] {
    padding: 0.75rem;
    border-radius: 0.75rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.expenses[b-vcjg8pe74o] { background-color: #ef4444; } /* Red */
.stat-icon.average[b-vcjg8pe74o] { background-color: #f59e0b; } /* Amber */
.stat-icon.count[b-vcjg8pe74o] { background-color: #3b82f6; } /* Blue */

.stat-value[b-vcjg8pe74o] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-label[b-vcjg8pe74o] {
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}

/* Breakdown & Table Layout */
.report-content[b-vcjg8pe74o] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .report-content[b-vcjg8pe74o] {
        grid-template-columns: 1fr;
    }
}

/* Generic Section Card */
.section-card[b-vcjg8pe74o] {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.section-title[b-vcjg8pe74o] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Category Progress Bars */
.category-list[b-vcjg8pe74o] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.category-item[b-vcjg8pe74o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
}

/* Clickable variant — drill-down rows that navigate to /transactions filtered
 * by the clicked category + active period. Mirrors Income Statement's
 * .category-item.clickable hover treatment. The padding + radius soak up
 * the hover background so the row reads as a single tappable surface,
 * including the progress bar underneath. Added 2026-04. */
.category-item.clickable[b-vcjg8pe74o] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.category-item.clickable:hover[b-vcjg8pe74o] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.06));
}

.category-item.clickable:focus-visible[b-vcjg8pe74o] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

.is-dark .category-item.clickable:hover[b-vcjg8pe74o] {
    background-color: rgba(255, 255, 255, 0.06);
}

.category-info[b-vcjg8pe74o] {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 500;
    align-items: baseline;
}

.category-name[b-vcjg8pe74o] { color: var(--theme-text-primary); }

.category-amount[b-vcjg8pe74o] {
    color: var(--theme-text-secondary);
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

/* Percentage chip — small leading qualifier on the amount column. Lets
 * the user compare relative size at a glance even when two bars look
 * visually similar (e.g. Shopping 4% vs Travel 3% would both render at
 * roughly the same width given how truncated bar widths get with small
 * percentages). */
.category-pct[b-vcjg8pe74o] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background-color: rgba(99, 102, 241, 0.1);
    padding: 0.1rem 0.4rem;
    border-radius: 0.5rem;
    letter-spacing: 0.01em;
}

.is-dark .category-pct[b-vcjg8pe74o] {
    color: rgba(199, 210, 254, 0.95);
    background-color: rgba(99, 102, 241, 0.22);
}

/* Progress track + bar — bumped from 8px to 12px (50% taller) per 2026-04
 * audit feedback. The original 8px reads as razor-thin on dark themes
 * where the track-vs-bar contrast is already limited. The dark-theme
 * override below also lifts the track to a more visible white-rgba so
 * the empty portion of the bar is legible. */
.progress-track[b-vcjg8pe74o] {
    background-color: var(--theme-bg-secondary);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar[b-vcjg8pe74o] {
    height: 100%;
    background-color: var(--theme-primary);
    border-radius: 6px;
    transition: width 0.5s ease;
}

.is-dark .progress-track[b-vcjg8pe74o] {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Table */
.table-container[b-vcjg8pe74o] {
    overflow-x: auto;
}

.data-table[b-vcjg8pe74o] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-vcjg8pe74o] {
    text-align: left;
    padding: 1rem;
    color: var(--theme-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.875rem;
}

.data-table td[b-vcjg8pe74o] {
    padding: 1rem;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    font-size: 0.95rem;
}

.data-table tr:last-child td[b-vcjg8pe74o] {
    border-bottom: none;
}

.category-badge[b-vcjg8pe74o] {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.money[b-vcjg8pe74o] {
    font-family: monospace;
    font-weight: 600;
}

/* Loading */
.loading-spinner[b-vcjg8pe74o] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-vcjg8pe74o] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-bg-secondary);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-vcjg8pe74o 1s linear infinite;
}

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

/* Empty State */
.empty-state[b-vcjg8pe74o] {
    text-align: center;
    padding: 3rem;
    color: var(--theme-text-secondary);
}

.empty-icon[b-vcjg8pe74o] {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Colors for themes (if variables strictly not enough, but usually vars handle it) */
/* Assuming var(--theme-primary) changes with global theme */

/* Dark Theme Overrides */
.is-dark .section-card[b-vcjg8pe74o] {
    background-color: rgba(30, 41, 59, 0.7);
}

.is-dark .stat-card[b-vcjg8pe74o] {
    background-color: rgba(30, 41, 59, 0.7);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .controls-section[b-vcjg8pe74o] { flex-direction: column; gap: 1rem; }
    .filter-group[b-vcjg8pe74o] { width: 100%; }
    .form-control[b-vcjg8pe74o] { min-width: unset; width: 100%; }
}

@media (max-width: 600px) {
    .page-subtitle[b-vcjg8pe74o] { margin-left: 0; font-size: 0.875rem; }
    .stat-value[b-vcjg8pe74o] { font-size: 1.5rem; }
    .stats-grid[b-vcjg8pe74o] { gap: 1rem; }
}
/* /Pages/Finance/FinanceDashboard.razor.rz.scp.css */
/* ============================================
   FINANCE DASHBOARD - Scoped Styles
   ============================================ */

/* Loading State */
.finance-loading[b-z2hkb4ck94] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--theme-text-secondary);
}

.finance-loading-spinner[b-z2hkb4ck94] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-z2hkb4ck94 0.8s linear infinite;
}

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

/* Sections */
.finance-section[b-z2hkb4ck94] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.finance-section-header[b-z2hkb4ck94] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.finance-section-header h2[b-z2hkb4ck94] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.finance-view-all[b-z2hkb4ck94] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
}

.finance-view-all:hover[b-z2hkb4ck94] {
    text-decoration: underline;
}

/* Recent Transactions */
.finance-recent-list[b-z2hkb4ck94] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.finance-recent-item[b-z2hkb4ck94] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.finance-recent-item:hover[b-z2hkb4ck94] {
    background: var(--theme-link-hover-bg, #f8fafc);
}

.finance-recent-icon[b-z2hkb4ck94] {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.finance-recent-icon svg[b-z2hkb4ck94] {
    width: 18px;
    height: 18px;
}

.finance-recent-icon.type-income[b-z2hkb4ck94] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.finance-recent-icon.type-expense[b-z2hkb4ck94] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.finance-recent-icon.type-transfer[b-z2hkb4ck94] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.finance-recent-info[b-z2hkb4ck94] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.finance-recent-desc[b-z2hkb4ck94] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.finance-recent-meta[b-z2hkb4ck94] {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* Base color matters here — Transfer rows (Type=2) come through with an
 * empty class from GetAmountClass, so they'd otherwise fall to the
 * user-agent default (#000000) which renders as black on dark themes.
 * theme-text-primary picks up the theme's foreground in both light and
 * dark themes. amount-positive / amount-negative still override for
 * Income (green) / Expense (red) rows. */
.finance-recent-amount[b-z2hkb4ck94] {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--theme-text-primary, #1e293b);
}

.amount-positive[b-z2hkb4ck94] { color: #22c55e; }
.amount-negative[b-z2hkb4ck94] { color: #ef4444; }

/* Belt-and-suspenders for dark themes — same reasoning as utilities.css's
 * stat-value override. If the cascade ever loses the theme variable,
 * the value still renders white-95% rather than black. */
.is-dark .finance-recent-amount[b-z2hkb4ck94] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .finance-recent-amount.amount-positive[b-z2hkb4ck94] {
    color: #4ade80;
}

.is-dark .finance-recent-amount.amount-negative[b-z2hkb4ck94] {
    color: #f87171;
}

/* Budget Status */
.finance-budget-list[b-z2hkb4ck94] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.finance-budget-item[b-z2hkb4ck94] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.finance-budget-info[b-z2hkb4ck94] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.finance-budget-name[b-z2hkb4ck94] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.finance-budget-amounts[b-z2hkb4ck94] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.finance-budget-bar[b-z2hkb4ck94] {
    height: 8px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.finance-budget-fill[b-z2hkb4ck94] {
    height: 100%;
    background: var(--theme-primary, #6366f1);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.finance-budget-fill.over-budget[b-z2hkb4ck94] {
    background: #ef4444;
}

/* ============================================
   CASH-FLOW SECTION (2026-05-25)
   Sparkline + projected end-of-period net.
   ============================================ */
.finance-cashflow-range[b-z2hkb4ck94] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    font-weight: 500;
}

.finance-cashflow-body[b-z2hkb4ck94] {
    display: flex;
    gap: 24px;
    align-items: stretch;
    padding: 16px 0 8px;
}

.finance-cashflow-chart[b-z2hkb4ck94] {
    flex: 1 1 auto;
    min-width: 0;
    /* Faint background panel anchors the sparkline visually without competing
       with the line itself for attention. */
    background: rgba(99, 102, 241, 0.04);
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
}

.finance-sparkline[b-z2hkb4ck94] {
    width: 100%;
    height: 80px;
    display: block;
    color: var(--text-secondary, #6b7280);
}

.finance-cashflow-projection[b-z2hkb4ck94] {
    flex: 0 0 auto;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 24px;
    border-left: 1px solid var(--border-color, rgba(0,0,0,0.08));
}

.finance-cashflow-projection-stat[b-z2hkb4ck94] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.finance-cashflow-projection-label[b-z2hkb4ck94] {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #6b7280);
}

.finance-cashflow-projection-value[b-z2hkb4ck94] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

/* PRO-DARK-2 (2026-07-21): the markup applies stat-positive/stat-negative but no
   on-screen rule existed for them in this file (only @media print in utilities.css
   and scoped rules in OTHER components, which CSS isolation keeps away from here) —
   so the value inherited the page's base dark text and read near-black on dark
   themes. Wire the polarity colors, mirroring FinancialSummary's palette. */
.finance-cashflow-projection-value.stat-positive[b-z2hkb4ck94] {
    color: #16a34a;
}

.finance-cashflow-projection-value.stat-negative[b-z2hkb4ck94] {
    color: #dc2626;
}

.is-dark .finance-cashflow-projection-value.stat-positive[b-z2hkb4ck94] {
    color: #4ade80;
}

.is-dark .finance-cashflow-projection-value.stat-negative[b-z2hkb4ck94] {
    color: #f87171;
}

.finance-cashflow-projection-meta[b-z2hkb4ck94] {
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 2px;
}

/* Stack on narrow viewports — sparkline above, projection below. */
@media (max-width: 768px) {
    .finance-cashflow-body[b-z2hkb4ck94] {
        flex-direction: column;
        gap: 12px;
    }

    .finance-cashflow-projection[b-z2hkb4ck94] {
        min-width: 0;
        padding-left: 0;
        padding-top: 16px;
        border-left: none;
        border-top: 1px solid var(--border-color, rgba(0,0,0,0.08));
    }
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */
.is-dark .finance-section[b-z2hkb4ck94] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .finance-recent-item:hover[b-z2hkb4ck94] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .finance-cashflow-chart[b-z2hkb4ck94] {
    background: rgba(255, 255, 255, 0.04);
}

.is-dark .finance-cashflow-projection[b-z2hkb4ck94] {
    border-left-color: rgba(255, 255, 255, 0.1);
}

.is-dark .finance-budget-bar[b-z2hkb4ck94] {
    background: rgba(255, 255, 255, 0.1);
}
/* /Pages/Finance/FinancialSummary.razor.rz.scp.css */
/* ── Financial Summary Page ── */

.financial-summary-page[b-pqajmkup1h] {
    padding-bottom: 60px;
}

/* ── Year Controls ── */
.fs-year-controls[b-pqajmkup1h] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fs-year-group[b-pqajmkup1h] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fs-year-label[b-pqajmkup1h] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* FIN-WS-TOGGLE-1: matched to .is-compare-toggle / .er-compare-toggle so all
 * three period reports share the bordered pill (was a bare checkbox here). */
.fs-compare-toggle[b-pqajmkup1h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.fs-compare-toggle:hover[b-pqajmkup1h] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.04));
    border-color: var(--theme-border-hover, #cbd5e1);
}

.fs-compare-toggle input[type="checkbox"][b-pqajmkup1h] {
    accent-color: var(--theme-primary, #6366f1);
    cursor: pointer;
}

.is-dark .fs-compare-toggle[b-pqajmkup1h] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .fs-compare-toggle:hover[b-pqajmkup1h] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Print button — paired with Compare toggle in fs-year-controls. Same pill
 * shape as the print buttons on Income Statement / Expense Report / Balance
 * Sheet for visual consistency across the four reports. Hidden on print
 * output (see utilities.css @media print). */
.fs-print-btn[b-pqajmkup1h] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.625rem;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fs-print-btn:hover[b-pqajmkup1h] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.04));
    border-color: var(--theme-border-hover, #cbd5e1);
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .fs-print-btn[b-pqajmkup1h] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .fs-print-btn:hover[b-pqajmkup1h] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

/* ── Sections ── */
.fs-section[b-pqajmkup1h] {
    margin-top: 32px;
}

.fs-section-title[b-pqajmkup1h] {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 4px 0;
}

/* `.fs-section-subtitle` removed 2026-04 in the Reports header unification
 * pass — the only consumer was the redundant "Consolidated income and
 * expenses" sub-subtitle under the duplicated H2 page heading, both
 * dropped in favor of the standard list-page-stats stat-row. */

/* ── Table ── */
.fs-table-wrapper[b-pqajmkup1h] {
    background: var(--theme-surface);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
    box-shadow: 0 1px 4px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.fs-table[b-pqajmkup1h] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.fs-table thead th[b-pqajmkup1h] {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary);
    border-bottom: 2px solid var(--theme-border, #e2e8f0);
    text-align: left;
    white-space: nowrap;
}

.fs-table tbody tr[b-pqajmkup1h] {
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    transition: background 0.15s ease;
}

.fs-table tbody tr:last-child[b-pqajmkup1h] {
    border-bottom: none;
}

.fs-table tbody tr:hover[b-pqajmkup1h] {
    background: var(--theme-hover, rgba(0, 0, 0, 0.02));
}

.fs-table tbody td[b-pqajmkup1h] {
    padding: 14px 16px;
    /* Default cell text color so bare <td> cells (without .fs-cell-primary
       or .fs-cell-secondary) inherit a theme-aware color instead of falling
       through to browser-default black on dark themes. */
    color: var(--theme-text-primary);
}

/* Column widths */
.fs-col-wide[b-pqajmkup1h] {
    width: 40%;
}

.fs-col-name[b-pqajmkup1h] {
    width: 20%;
}

.fs-col-amount[b-pqajmkup1h] {
    width: 15%;
    text-align: right;
}

.fs-col-actions[b-pqajmkup1h] {
    width: 10%;
    text-align: right;
}

/* Cell styles */
.fs-cell-primary[b-pqajmkup1h] {
    font-weight: 500;
    color: var(--theme-text-primary);
}

.fs-cell-secondary[b-pqajmkup1h] {
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
}

.fs-cell-amount[b-pqajmkup1h] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--theme-text-primary);
}

.fs-cell-actions[b-pqajmkup1h] {
    text-align: right;
}

.fs-empty-row[b-pqajmkup1h] {
    text-align: center;
    color: var(--theme-text-muted);
    font-style: italic;
    padding: 24px 16px !important;
}

/* ── Expandable Rows ── */
.fs-expand-icon[b-pqajmkup1h] {
    display: inline-block;
    width: 18px;
    color: var(--theme-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
}

.fs-row-expanded[b-pqajmkup1h] {
    background: var(--theme-hover, rgba(0, 0, 0, 0.02));
}

.fs-detail-row[b-pqajmkup1h] {
    background: var(--theme-hover, rgba(0, 0, 0, 0.015));
}

.fs-detail-row:hover[b-pqajmkup1h] {
    background: var(--theme-hover, rgba(0, 0, 0, 0.04)) !important;
}

.fs-cell-detail[b-pqajmkup1h] {
    padding-left: 40px !important;
    font-size: 0.88rem;
    color: var(--theme-text-secondary);
}

.fs-cell-detail-amount[b-pqajmkup1h] {
    font-size: 0.88rem;
    color: var(--theme-text-secondary);
}

/* ── Inline Controls ── */
.fs-cell-inline-controls[b-pqajmkup1h] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

.fs-inline-select[b-pqajmkup1h] {
    padding: 4px 6px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.78rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.fs-inline-select:hover[b-pqajmkup1h],
.fs-inline-select:focus[b-pqajmkup1h] {
    border-color: var(--theme-primary, #3b82f6);
}

.fs-inline-class[b-pqajmkup1h] {
    width: 90px;
}

.fs-inline-cat[b-pqajmkup1h] {
    width: 130px;
}

.fs-txn-desc[b-pqajmkup1h] {
    display: inline-block;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-dark .fs-inline-select[b-pqajmkup1h] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--theme-text-primary);
}

.fs-invoice-customer[b-pqajmkup1h] {
    color: var(--theme-text-muted);
    font-size: 0.85rem;
    margin-left: 4px;
}

/* ── Total Row (footer) ── */
.fs-total-row[b-pqajmkup1h] {
    background: var(--theme-surface-alt, rgba(0, 0, 0, 0.03));
    border-top: 2px solid var(--theme-border, #e2e8f0);
}

.fs-total-row td[b-pqajmkup1h] {
    padding: 14px 16px;
    font-size: 0.95rem;
    /* Footer total rows live in <tfoot> so the .fs-table tbody td default
       above doesn't reach them. Bare <td><strong>…</strong></td> cells
       (e.g. "Net Business Income", "Net Income (All)", "Total Income")
       fall through to browser-default black on dark themes without this. */
    color: var(--theme-text-primary);
}

.fs-total-row .fs-cell-amount[b-pqajmkup1h] {
    font-weight: 700;
}

/* ── Net Summary ── */
.fs-net-summary[b-pqajmkup1h] {
    display: flex;
    gap: 24px;
    padding: 24px;
    background: var(--theme-surface);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 4px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.fs-net-item[b-pqajmkup1h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fs-net-label[b-pqajmkup1h] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary);
}

.fs-net-value[b-pqajmkup1h] {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fs-yoy-pct[b-pqajmkup1h] {
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0.8;
}

/* Positive/negative color */
.stat-positive[b-pqajmkup1h] {
    color: #16a34a;
}

.stat-negative[b-pqajmkup1h] {
    color: #ef4444;
}

/* ── Dark theme overrides ── */
.is-dark .fs-table-wrapper[b-pqajmkup1h],
.is-dark .fs-net-summary[b-pqajmkup1h] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .fs-table tbody tr:hover[b-pqajmkup1h],
.is-dark .fs-row-expanded[b-pqajmkup1h] {
    background: rgba(255, 255, 255, 0.04);
}

.is-dark .fs-detail-row[b-pqajmkup1h] {
    background: rgba(255, 255, 255, 0.02);
}

.is-dark .fs-total-row[b-pqajmkup1h] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .stat-positive[b-pqajmkup1h] {
    color: #4ade80;
}

.is-dark .stat-negative[b-pqajmkup1h] {
    color: #f87171;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .fs-year-controls[b-pqajmkup1h] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .fs-net-summary[b-pqajmkup1h] {
        flex-direction: column;
        gap: 16px;
    }

    .fs-col-wide[b-pqajmkup1h] {
        width: auto;
    }

    .fs-col-name[b-pqajmkup1h] {
        display: none;
    }

    .fs-table[b-pqajmkup1h] {
        font-size: 0.88rem;
    }

    .fs-table thead th[b-pqajmkup1h],
    .fs-table tbody td[b-pqajmkup1h],
    .fs-total-row td[b-pqajmkup1h] {
        padding: 10px 12px;
    }
}
/* /Pages/Finance/IncomeStatement.razor.rz.scp.css */
/* Scoped CSS for IncomeStatement.razor */

/* ============================================
   COMPARE-TO-PREVIOUS-PERIOD
   Same toggle pattern as FinancialSummary's `.fs-compare-toggle`,
   but with `is-` prefix to scope to this page's CSS hash. Lifted to
   Income Statement + Expense Report in 2026-04 — see DECISIONS.md →
   "Reports Compare-to-previous-period hoist".
   ============================================ */

.is-compare-controls[b-ledbmhkyfc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Print button — paired with the Compare toggle in the header upper-right.
 * Shares visual treatment with the toggle (pill border + hover lift) so the
 * two read as a control pair, not as competing elements. The button itself
 * is hidden from print output (see utilities.css @media print rules). */
.is-print-btn[b-ledbmhkyfc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.625rem;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.is-print-btn:hover[b-ledbmhkyfc] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.04));
    border-color: var(--theme-border-hover, #cbd5e1);
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .is-print-btn[b-ledbmhkyfc] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .is-print-btn:hover[b-ledbmhkyfc] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

.is-compare-toggle[b-ledbmhkyfc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.is-compare-toggle:hover[b-ledbmhkyfc] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.04));
    border-color: var(--theme-border-hover, #cbd5e1);
}

.is-compare-toggle input[type="checkbox"][b-ledbmhkyfc] {
    cursor: pointer;
    accent-color: var(--theme-primary, #6366f1);
}

.is-dark .is-compare-toggle[b-ledbmhkyfc] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .is-compare-toggle:hover[b-ledbmhkyfc] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ============================================
   STAT-CARD DELTA CAPTION
   Renders below the stat-value when Compare is on. Two-line layout:
   the percentage delta on top (color-coded by direction), the prior
   absolute value below in muted text.
   ============================================ */

.is-stat-delta[b-ledbmhkyfc] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.is-stat-delta.delta-positive[b-ledbmhkyfc] { color: #22c55e; }
.is-stat-delta.delta-negative[b-ledbmhkyfc] { color: #ef4444; }

.is-stat-delta-prior[b-ledbmhkyfc] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
}

.is-dark .is-stat-delta.delta-positive[b-ledbmhkyfc] { color: #4ade80; }
.is-dark .is-stat-delta.delta-negative[b-ledbmhkyfc] { color: #f87171; }
.is-dark .is-stat-delta-prior[b-ledbmhkyfc] { color: rgba(255, 255, 255, 0.5); }

/* ============================================
   CATEGORY-ITEM COMPARE LAYOUT
   When the toggle is on, the row gets `with-compare` and a 4-column
   grid (Name | Prior | Current | Delta) replaces the default flex
   space-between. Without with-compare, the existing 2-column flex
   layout still applies — no regression for users who never toggle on.
   ============================================ */

.category-item.with-compare[b-ledbmhkyfc] {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: 0.75rem;
    align-items: center;
}

.category-amount-prior[b-ledbmhkyfc] {
    font-family: monospace;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.875rem;
    white-space: nowrap;
    text-align: right;
    min-width: 5rem;
}

.category-delta[b-ledbmhkyfc] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    min-width: 3.5rem;
    text-align: center;
    background-color: rgba(148, 163, 184, 0.12);
    color: var(--theme-text-muted, #94a3b8);
}

.category-delta.delta-positive[b-ledbmhkyfc] {
    background-color: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.category-delta.delta-negative[b-ledbmhkyfc] {
    background-color: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.is-dark .category-amount-prior[b-ledbmhkyfc] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .category-delta[b-ledbmhkyfc] {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .category-delta.delta-positive[b-ledbmhkyfc] {
    background-color: rgba(74, 222, 128, 0.18);
    color: #4ade80;
}

.is-dark .category-delta.delta-negative[b-ledbmhkyfc] {
    background-color: rgba(248, 113, 113, 0.18);
    color: #f87171;
}

/* Mobile: collapse the 4-col grid to two rows so prior+delta sit
 * below the name+amount row. Without this, the four columns squish
 * into illegible widths on narrow screens. */
@media (max-width: 640px) {
    .category-item.with-compare[b-ledbmhkyfc] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name current"
            "prior delta";
    }
    .category-item.with-compare .category-name[b-ledbmhkyfc] { grid-area: name; }
    .category-item.with-compare .category-amount[b-ledbmhkyfc] { grid-area: current; }
    .category-item.with-compare .category-amount-prior[b-ledbmhkyfc] { grid-area: prior; text-align: left; }
    .category-item.with-compare .category-delta[b-ledbmhkyfc] { grid-area: delta; justify-self: end; }
}


.page-container[b-ledbmhkyfc] {
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: var(--theme-bg-main);
    color: var(--theme-text-primary);
}

/* Header */

.page-title[b-ledbmhkyfc] {
    color: var(--theme-text-primary);
    margin: 0;
}

.page-subtitle[b-ledbmhkyfc] {
    margin: 0.5rem 0 0 calc(24px + 1rem);
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.icon[b-ledbmhkyfc] {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Controls */
.controls-section[b-ledbmhkyfc] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: end;
    flex-wrap: wrap;
    background-color: var(--theme-surface-glass);
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--theme-border);
    backdrop-filter: blur(10px);
}

.filter-group[b-ledbmhkyfc] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label[b-ledbmhkyfc] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-control[b-ledbmhkyfc] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg-input);
    color: var(--theme-text-primary);
    font-size: 1rem;
    min-width: 150px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus[b-ledbmhkyfc] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-alpha);
}

.btn[b-ledbmhkyfc] {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-ledbmhkyfc] {
    background-color: var(--theme-primary);
    color: white;
}

.btn-primary:hover[b-ledbmhkyfc] {
    background-color: var(--theme-primary-dark);
}

/* Stats */
.stats-grid[b-ledbmhkyfc] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-ledbmhkyfc] {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.stat-header[b-ledbmhkyfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stat-icon[b-ledbmhkyfc] {
    padding: 0.75rem;
    border-radius: 0.75rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon.income[b-ledbmhkyfc] { background-color: #10b981; } /* Green */
.stat-icon.expenses[b-ledbmhkyfc] { background-color: #ef4444; } /* Red */
.stat-icon.net.positive[b-ledbmhkyfc] { background-color: #3b82f6; } /* Blue */
.stat-icon.net.negative[b-ledbmhkyfc] { background-color: #f59e0b; } /* Orange/Warning */

.stat-value[b-ledbmhkyfc] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-label[b-ledbmhkyfc] {
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}

.text-success[b-ledbmhkyfc] { color: #10b981; }
.text-danger[b-ledbmhkyfc] { color: #ef4444; }

/* Content sections */
.statement-grid[b-ledbmhkyfc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 1024px) {
    .statement-grid[b-ledbmhkyfc] {
        grid-template-columns: 1fr;
    }
}

.section-card[b-ledbmhkyfc] {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.section-title[b-ledbmhkyfc] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Category lists */
.category-list[b-ledbmhkyfc] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.category-item[b-ledbmhkyfc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--theme-border-light);
}

.category-item:last-child[b-ledbmhkyfc] {
    border-bottom: none;
}

/* Clickable variant — drill-down rows that navigate to /transactions filtered
 * by category + active period. Subtle hover so the affordance reads as
 * interactive without competing visually with the section title. The active
 * period flows through PeriodService (singleton), so only the category goes
 * in the URL. Added 2026-04 — see DECISIONS.md → "Income Statement
 * row drill-down". */
.category-item.clickable[b-ledbmhkyfc] {
    cursor: pointer;
    transition: background-color 0.15s ease, padding 0.15s ease;
    border-radius: 0.5rem;
}

.category-item.clickable:hover[b-ledbmhkyfc] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.06));
    padding-left: 1rem;
    padding-right: 1rem;
}

.category-item.clickable:focus-visible[b-ledbmhkyfc] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

.is-dark .category-item.clickable:hover[b-ledbmhkyfc] {
    background-color: rgba(255, 255, 255, 0.06);
}

.category-name[b-ledbmhkyfc] {
    font-weight: 500;
    color: var(--theme-text-primary);
}

.category-amount[b-ledbmhkyfc] {
    font-family: monospace;
    font-weight: 600;
}

.summary-row[b-ledbmhkyfc] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--theme-border);
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Loading & Empty */
.loading-spinner[b-ledbmhkyfc] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-ledbmhkyfc] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-bg-secondary);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-ledbmhkyfc 1s linear infinite;
}

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

.empty-state[b-ledbmhkyfc] {
    text-align: center;
    padding: 3rem;
    color: var(--theme-text-secondary);
}

.empty-icon[b-ledbmhkyfc] {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Dark Theme Overrides */
.is-dark .section-card[b-ledbmhkyfc] {
    background-color: rgba(30, 41, 59, 0.7);
}

.is-dark .stat-card[b-ledbmhkyfc] {
    background-color: rgba(30, 41, 59, 0.7);
}
/* /Pages/Finance/RecurringExpenses.razor.rz.scp.css */
/* ============================================
   RECURRING EXPENSES PAGE
   Page-scoped tweaks layered on top of the .list-page shell + reusable
   classes. Structural styles inherit from theme variables so all 8 themes
   work without per-theme overrides. Visual primitives (.section-card,
   .data-table, etc.) are duplicated from ExpenseReport.razor.css because
   Blazor's scoped CSS limits them to their declaring page.
   (Renamed from `.projections-page` 2026-04 — see DECISIONS.md → "Projections
   → Recurring Expenses rename".)
   ============================================ */

/* ---------- Lookahead control ---------- */
.recurring-lookahead[b-54rvuwdy1s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.recurring-lookahead label[b-54rvuwdy1s] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
}

.lookahead-select[b-54rvuwdy1s] {
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.875rem;
}

/* Paused recurring rules: visible but de-emphasised. */
.inactive-row[b-54rvuwdy1s] {
    opacity: 0.55;
}

/* ---------- Row-action button cluster ----------
   Wraps the Record + Skip pair so they sit as a tight 2-button group on the
   right edge of an Upcoming row. Right-aligns naturally inside the
   table cell (the wrapper is inline-flex so the buttons hug content). */
.recurring-row-actions[b-54rvuwdy1s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

/* ---------- Row-action buttons ----------
   Compact text+icon buttons sized for table rows, NOT for top-level CTAs.
   Two variants:
     • .primary — solid theme-primary fill. Used for Record (the affirmative
       row action that posts the occurrence to the ledger).
     • .ghost   — transparent with hover hint. Used for Skip (dismiss as
       handled elsewhere) AND for Edit on the All-Scheduled table.
   Replaces the old `.list-page-btn-primary` which was sized for hero CTAs
   like "+ New Transaction" and dwarfed the table row. */
.recurring-row-btn[b-54rvuwdy1s] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    white-space: nowrap;
}

.recurring-row-btn svg[b-54rvuwdy1s] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.recurring-row-btn:disabled[b-54rvuwdy1s] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary variant — Record */
.recurring-row-btn.primary[b-54rvuwdy1s] {
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
}

.recurring-row-btn.primary:hover:not(:disabled)[b-54rvuwdy1s] {
    background: var(--theme-primary-hover, #4f46e5);
}

/* Ghost variant — Edit */
.recurring-row-btn.ghost[b-54rvuwdy1s] {
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    border-color: var(--theme-border, #e2e8f0);
}

.recurring-row-btn.ghost:hover:not(:disabled)[b-54rvuwdy1s] {
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.04));
    color: var(--theme-text-primary, #1e293b);
    border-color: var(--theme-border-hover, #cbd5e1);
}

/* Dark-theme parity. */
.is-dark .recurring-row-btn.ghost[b-54rvuwdy1s] {
    color: rgba(255, 255, 255, 0.75);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .recurring-row-btn.ghost:hover:not(:disabled)[b-54rvuwdy1s] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ---------- Section card ---------- */
.section-card[b-54rvuwdy1s] {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.section-title[b-54rvuwdy1s] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-title .icon[b-54rvuwdy1s] {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* ---------- Table ---------- */
.table-container[b-54rvuwdy1s] {
    overflow-x: auto;
}

.data-table[b-54rvuwdy1s] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-54rvuwdy1s] {
    text-align: left;
    padding: 1rem;
    color: var(--theme-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.875rem;
}

.data-table td[b-54rvuwdy1s] {
    padding: 1rem;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    font-size: 0.95rem;
}

.data-table tr:last-child td[b-54rvuwdy1s] {
    border-bottom: none;
}

/* Empty-state filler when a recurring rule has no Category set. Matches the
 * surrounding cell font-size (handled by .data-table td) — only muted via
 * color + italics so the placeholder reads as "no value" rather than as a
 * real category. Replaces the previous `.category-badge` pill which made
 * Home/Maintenance render in a smaller font-size than every other column. */
.category-empty[b-54rvuwdy1s] {
    color: var(--theme-text-secondary, #94a3b8);
    font-style: italic;
}

/* Category pill — same visual treatment for both Upcoming and Scheduled
 * tables. Tinted theme-primary subtly so the category reads as a tag
 * rather than plain prose. Matches the type-pill family on the Account
 * Detail Transactions tab in shape; uses a softer color since category
 * values are user-defined and shouldn't compete with the type-tag visual
 * weight on rows that have both. */
.category-pill[b-54rvuwdy1s] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 1rem;
    background-color: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.8125rem;
    font-weight: 500;
}

.is-dark .category-pill[b-54rvuwdy1s] {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* Inactive-rule indicator next to the rule name. A small status pill is
 * legitimately small here — "paused" is metadata, not row-content, so the
 * font-size mismatch with other columns is the right intent. */
.paused-tag[b-54rvuwdy1s] {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.625rem;
    border-radius: 1rem;
    background-color: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.money[b-54rvuwdy1s] {
    font-family: monospace;
    font-weight: 600;
}

.text-secondary[b-54rvuwdy1s] { color: var(--theme-text-secondary); }
.text-center[b-54rvuwdy1s] { text-align: center; }

/* ---------- Loading + empty ---------- */
.loading-spinner[b-54rvuwdy1s] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-54rvuwdy1s] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-bg-secondary);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-54rvuwdy1s 1s linear infinite;
}

@keyframes spin-b-54rvuwdy1s {
    to { transform: rotate(360deg); }
}

.empty-icon[b-54rvuwdy1s] {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* ---------- Dark themes ---------- */
.is-dark .section-card[b-54rvuwdy1s] {
    background-color: rgba(30, 41, 59, 0.7);
}

.is-dark .lookahead-select[b-54rvuwdy1s] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.95);
}

/* RECUR-WIDE-1 (2026-09-23): actions column hugs its buttons so Amount sits next to them. */
.data-table th.col-actions[b-54rvuwdy1s],
.data-table td.col-actions[b-54rvuwdy1s] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.due-rel[b-54rvuwdy1s] {
    display: block;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.due-rel.due-soon[b-54rvuwdy1s] { color: #d97706; font-weight: 600; }
.due-rel.due-overdue[b-54rvuwdy1s] { color: #dc2626; font-weight: 600; }
.is-dark .due-rel.due-soon[b-54rvuwdy1s] { color: #fbbf24; }
.is-dark .due-rel.due-overdue[b-54rvuwdy1s] { color: #f87171; }
/* /Pages/Finance/TransactionDialog.razor.rz.scp.css */
/* ============================================
   TRANSACTION DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.transaction-form[b-pdo5zgvfwb] {
    display: flex;
    flex-direction: column;
}

.transaction-form-row[b-pdo5zgvfwb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .transaction-form-row[b-pdo5zgvfwb] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.transaction-form-group[b-pdo5zgvfwb] {
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.transaction-form-group label[b-pdo5zgvfwb] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 3px;
    color: var(--theme-text-secondary, #374151);
}

/* Wraps a label + an optional secondary affordance (e.g. "View account ↗")
 * on the same line. Justifies to push the affordance to the right edge
 * while the label stays left. Drops the label's own margin-bottom so the
 * containing row keeps the same spacing as a plain label. */
.transaction-form-label-row[b-pdo5zgvfwb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.transaction-form-label-row label[b-pdo5zgvfwb] {
    margin-bottom: 0;
}

/* Secondary-affordance link next to From/To Account labels. Tiny text,
 * theme-primary tint, no underline until hover. Opens in a new tab so
 * mid-edit dialog state is preserved. */
.transaction-form-account-link[b-pdo5zgvfwb] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
    white-space: nowrap;
}

.transaction-form-account-link:hover[b-pdo5zgvfwb] {
    text-decoration: underline;
}

/* Form Inputs */
.transaction-form-input[b-pdo5zgvfwb],
.transaction-form-textarea[b-pdo5zgvfwb] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
}

.transaction-form-textarea[b-pdo5zgvfwb] {
    resize: vertical;
    min-height: 80px;
}

/* Focus states */
.transaction-form-input:focus[b-pdo5zgvfwb],
.transaction-form-textarea:focus[b-pdo5zgvfwb] {
    outline: none;
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

/* Placeholder styling */
.transaction-form-input[b-pdo5zgvfwb]::placeholder,
.transaction-form-textarea[b-pdo5zgvfwb]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}
/* /Pages/Finance/Transactions.razor.rz.scp.css */
/* ============================================
   TRANSACTIONS PAGE - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only transaction-specific styles here
   ============================================ */

/* Stats - Full Width 4 columns */
.transactions-page .list-page-stats[b-hgucg1p7qz] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Stat Value Colors */
.stat-positive[b-hgucg1p7qz] { color: #22c55e !important; }
.stat-negative[b-hgucg1p7qz] { color: #ef4444 !important; }

/* Header actions wrapper — keeps "Import CSV" and "+ New Transaction" buttons
 * side-by-side on the right edge of the page header. The list-page-header
 * itself is flex with justify-content: space-between, so this wrapper just
 * controls inter-button spacing. */
.list-page-header-actions[b-hgucg1p7qz] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Grid column widths.
 *
 * IMPORTANT: these rules need ::deep because the <th>/<td> elements are
 * rendered by the NativeDataGrid component (not by Transactions.razor's own
 * markup). Blazor's scoped-CSS attribute (b-{hash}) is per-component, so
 * un-deep'd .col-description rules in this file would compile under
 * Transactions' scope but would never match a cell rendered under
 * NativeDataGrid's scope. Symptom of forgetting ::deep: rules silently no-op
 * with zero compiler warning. Confirmed via DevTools: only .ndg td selectors
 * (NativeDataGrid's own scope) win without ::deep. See GOTCHAS.md → scoped
 * CSS + child-component-rendered DOM.
 *
 * Widths sum to 100% exactly — anything over forces horizontal overflow and
 * the rightmost column (Amount) gets clipped at the page edge. April 2026:
 * description trimmed 30→22% to give Amount enough room to render five-figure
 * currency strings ("-$146,507.65") without truncation. .transaction-description
 * has text-overflow:ellipsis so longer descriptions still degrade gracefully
 * in the narrower column. */
/* table-layout: fixed turns the column widths below from hints into rules.
 * Without it, NativeDataGrid's default `table-layout: auto` lets content
 * push columns wider than my %s, and the .ndg-container's `overflow: auto`
 * silently hides the rightmost columns (Amount, Actions) behind a horizontal
 * scrollbar. Fixed layout sizes columns strictly by these rules; over-long
 * content gets clipped within the cell (text-overflow:ellipsis on
 * .transaction-description handles the visual fallback). */
.transactions-page[b-hgucg1p7qz]  .ndg { table-layout: fixed; }

.transactions-page[b-hgucg1p7qz]  .col-description { width: 22%; min-width: 180px; }
.transactions-page[b-hgucg1p7qz]  .col-date { width: 12%; min-width: 110px; }
.transactions-page[b-hgucg1p7qz]  .col-type { width: 8%; min-width: 80px; }
.transactions-page[b-hgucg1p7qz]  .col-classification { width: 10%; min-width: 95px; }
.transactions-page[b-hgucg1p7qz]  .col-category { width: 13%; min-width: 120px; }
.transactions-page[b-hgucg1p7qz]  .col-account { width: 12%; min-width: 90px; }
.transactions-page[b-hgucg1p7qz]  .col-amount { width: 14%; min-width: 130px; }
.transactions-page[b-hgucg1p7qz]  .col-actions { width: 9%; min-width: 80px; }

/* Tighten horizontal padding on cells that hold inline-edit <select> dropdowns.
 * .ndg td defaults to padding: 12px 16px which eats ~32px of cell width — fine
 * for plain-text cells but it truncates the dropdown text ("Busine..." instead
 * of "Business", "Miscellaneou..." instead of "Miscellaneous") inside columns
 * that hold a <select>. The select has its own padding + border + chevron, so
 * we don't need additional cell padding around it. Vertical padding stays so
 * row height doesn't change. */
.transactions-page[b-hgucg1p7qz]  td.col-classification,
.transactions-page[b-hgucg1p7qz]  td.col-category {
    padding-left: 6px;
    padding-right: 6px;
}

/* Transaction Type Icon (used in grid cells) */
.transaction-type-icon[b-hgucg1p7qz] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-type-icon svg[b-hgucg1p7qz] {
    width: 18px;
    height: 18px;
}

.transaction-type-icon.income[b-hgucg1p7qz] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.transaction-type-icon.expense[b-hgucg1p7qz] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.transaction-type-icon.transfer[b-hgucg1p7qz] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

/* Inline select for quick editing */
.txn-inline-select[b-hgucg1p7qz] {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.txn-inline-select:hover[b-hgucg1p7qz],
.txn-inline-select:focus[b-hgucg1p7qz] {
    border-color: var(--theme-primary, #3b82f6);
}

.is-dark .txn-inline-select[b-hgucg1p7qz] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--theme-text-primary);
}

/* Grid cell styles */
.transaction-description[b-hgucg1p7qz] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-primary, #1e293b);
}

.transaction-date-cell[b-hgucg1p7qz] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    white-space: nowrap;
}

.transaction-account-cell[b-hgucg1p7qz] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Linked variant of the account-cell — same size + base color so the
 * row layout stays identical, but tinted theme-primary on hover and
 * gets a cursor pointer. The href takes the user to /account/{guid}.
 * Drops the default browser-blue + underline; we want the cell to
 * read as data first, navigation affordance second. */
.transaction-account-cell-link[b-hgucg1p7qz] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
    cursor: pointer;
}

.transaction-account-cell-link:hover[b-hgucg1p7qz] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: underline;
}

.transaction-amount[b-hgucg1p7qz] {
    font-weight: 700;
    white-space: nowrap;
}

.amount-positive[b-hgucg1p7qz] { color: #22c55e; }
.amount-negative[b-hgucg1p7qz] { color: #ef4444; }

.text-right[b-hgucg1p7qz] {
    text-align: right;
}

/* Type tag colors */
.tag-income[b-hgucg1p7qz] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.tag-expense[b-hgucg1p7qz] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.tag-transfer[b-hgucg1p7qz] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }

.transaction-item-actions[b-hgucg1p7qz] {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.transaction-item-actions .list-page-action-btn[b-hgucg1p7qz] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

/* Responsive Design */
@media (max-width: 960px) {
    .transactions-page .list-page-stats[b-hgucg1p7qz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .transactions-page .list-page-filters[b-hgucg1p7qz] {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    /* MOBILE-AUDIT-6: phones use the shared one-row stat strip (utilities.css). */
    .transactions-page .list-page-stats[b-hgucg1p7qz] {
        grid-template-columns: none;
        gap: 8px;
    }

    .transactions-page .list-page-stat-value[b-hgucg1p7qz] {
        font-size: 1.1rem;
    }
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */
.is-dark .transaction-description[b-hgucg1p7qz] {
    /* Use the theme primary text token instead of a one-off slate-100 hex
       — `--theme-text-primary` already resolves to a near-white on every
       dark theme, so this stays consistent if a theme tweaks its palette. */
    color: var(--theme-text-primary);
}

.is-dark .transaction-date-cell[b-hgucg1p7qz],
.is-dark .transaction-account-cell[b-hgucg1p7qz] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .transaction-account-cell-link[b-hgucg1p7qz] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .transaction-account-cell-link:hover[b-hgucg1p7qz] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .transaction-item-actions .list-page-action-btn[b-hgucg1p7qz] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .transaction-item-actions .list-page-action-btn:hover[b-hgucg1p7qz] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* ============================================
   INVOICE LINK BADGE
   Renders next to a transaction description when InvoiceId is set — i.e. the
   transaction was created from a Mark-as-Paid prompt or the Backfill flow.
   Visually subtle so it doesn't compete with the description, but clickable.
   ============================================ */
.transaction-invoice-link[b-hgucg1p7qz] {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.transaction-invoice-link:hover[b-hgucg1p7qz] {
    background: rgba(59, 130, 246, 0.22);
    text-decoration: none;
}

.is-dark .transaction-invoice-link[b-hgucg1p7qz] {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

.is-dark .transaction-invoice-link:hover[b-hgucg1p7qz] {
    background: rgba(59, 130, 246, 0.32);
}
/* /Pages/Focus/Explore.razor.rz.scp.css */
/*
 * /explore page — full catalog, grouped by package.
 * Colors come from theme-variables.css tokens so all 8 themes adapt.
 */

.explore-page[b-q8gfj4mex6] {
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* ---- Hero ---- */

.explore-hero[b-q8gfj4mex6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.5rem 0 0.5rem;
}

.hero-eyebrow[b-q8gfj4mex6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: color-mix(in srgb, var(--theme-primary) 10%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary));
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.eyebrow-icon[b-q8gfj4mex6] {
    font-size: 0.9rem;
}

.hero-heading[b-q8gfj4mex6] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}

.hero-description[b-q8gfj4mex6] {
    font-size: 1rem;
    color: var(--theme-text-secondary);
    margin: 0;
    max-width: 60ch;
    line-height: 1.55;
}

/* ---- Loading + Empty ---- */

.explore-loading[b-q8gfj4mex6],
.explore-empty[b-q8gfj4mex6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--theme-text-secondary);
    text-align: center;
}

.explore-empty h2[b-q8gfj4mex6] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--theme-text-primary);
}

.explore-empty p[b-q8gfj4mex6] {
    margin: 0;
}

.explore-empty a[b-q8gfj4mex6] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: underline;
}

/* ---- Package Group ---- */

.explore-group[b-q8gfj4mex6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.group-header[b-q8gfj4mex6] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--theme-border);
}

.group-icon[b-q8gfj4mex6] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.group-icon .material-symbols-rounded[b-q8gfj4mex6] {
    color: #fff;
    font-size: 24px;
}

.group-icon-other[b-q8gfj4mex6] {
    background: var(--theme-surface-secondary, var(--theme-surface));
    border: 1px dashed var(--theme-border);
}

.group-icon-other .material-symbols-rounded[b-q8gfj4mex6] {
    color: var(--theme-text-secondary);
}

.group-info[b-q8gfj4mex6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.group-info h2[b-q8gfj4mex6] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.group-info p[b-q8gfj4mex6] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

.group-count[b-q8gfj4mex6] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

/* ---- Tools Grid ---- */

.group-grid[b-q8gfj4mex6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.tool-card[b-q8gfj4mex6] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    transition: border-color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

.tool-card:hover[b-q8gfj4mex6] {
    border-color: var(--theme-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tool-card:focus-visible[b-q8gfj4mex6] {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

.tool-icon[b-q8gfj4mex6] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-icon .material-symbols-rounded[b-q8gfj4mex6] {
    color: #fff;
    font-size: 22px;
}

.tool-body[b-q8gfj4mex6] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.tool-title-row[b-q8gfj4mex6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tool-title-row h3[b-q8gfj4mex6] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.tool-in-focus[b-q8gfj4mex6] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-primary) 12%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary));
    white-space: nowrap;
}

.tool-body p[b-q8gfj4mex6] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-action[b-q8gfj4mex6] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted, var(--theme-text-secondary));
    opacity: 0.5;
    transition: opacity 150ms ease, transform 150ms ease, color 150ms ease;
    flex-shrink: 0;
}

.tool-card:hover .tool-action[b-q8gfj4mex6] {
    opacity: 1;
    transform: translateX(2px);
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* ---- Responsive ---- */

@media (max-width: 640px) {
    .explore-page[b-q8gfj4mex6] {
        padding: 1.25rem 1rem 3rem;
        gap: 2rem;
    }

    .group-header[b-q8gfj4mex6] {
        grid-template-columns: auto 1fr;
    }

    .group-count[b-q8gfj4mex6] {
        grid-column: 1 / -1;
        text-align: left;
    }

    .group-grid[b-q8gfj4mex6] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Focus/FocusHome.razor.rz.scp.css */
/* ============================================
   FOCUS PAGE - Premium Modern Design
   Inspired by Linear, Vercel, Stripe
   ============================================ */

/* === BASE === */
.focus-page[b-k0dla9k8ts] {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-x: hidden;
    background: #fafafa;
}

.focus-content[b-k0dla9k8ts] {
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
    padding: 60px 24px 80px;
    position: relative;
    z-index: 1;
}

/* === ANIMATED MESH GRADIENT BACKGROUND === */
.mesh-gradient[b-k0dla9k8ts] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 0.6;
}

.mesh-blob[b-k0dla9k8ts] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    animation: float-b-k0dla9k8ts 25s ease-in-out infinite;
    will-change: transform;
}

.mesh-1[b-k0dla9k8ts] {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -100px;
    background: linear-gradient(135deg, #c084fc, #f472b6);
    animation-delay: 0s;
}

.mesh-2[b-k0dla9k8ts] {
    width: 500px;
    height: 500px;
    bottom: -100px;
    left: -100px;
    background: linear-gradient(135deg, #60a5fa, #34d399);
    animation-delay: -8s;
}

.mesh-3[b-k0dla9k8ts] {
    width: 400px;
    height: 400px;
    top: 50%;
    left: 30%;
    background: linear-gradient(135deg, #fbbf24, #fb923c);
    animation-delay: -16s;
}

.mesh-4[b-k0dla9k8ts] {
    width: 350px;
    height: 350px;
    top: 20%;
    right: 20%;
    background: linear-gradient(135deg, #a78bfa, #38bdf8);
    animation-delay: -12s;
}

@keyframes float-b-k0dla9k8ts {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    25% { transform: translate(50px, -50px) rotate(5deg) scale(1.05); }
    50% { transform: translate(-30px, 30px) rotate(-5deg) scale(0.95); }
    75% { transform: translate(30px, 50px) rotate(3deg) scale(1.02); }
}

/* === HERO SECTION === */
.hero[b-k0dla9k8ts] {
    text-align: center;
    margin-bottom: 64px;
    padding-top: 20px;
}

.hero-eyebrow[b-k0dla9k8ts] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    animation: fadeInDown-b-k0dla9k8ts 0.6s ease;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.eyebrow-icon[b-k0dla9k8ts] {
    font-size: 0.9rem;
}

.hero-heading[b-k0dla9k8ts] {
    /* TM-NAV-1 polish (2026-05-09): downsized from clamp(2.5rem, 6vw, 4rem) — the
       headline is now a descriptive label ("Browse Platform Tools") rather than
       an aspirational two-line hook, so it earns less vertical real estate. */
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: #0f172a;
    animation: fadeInUp-b-k0dla9k8ts 0.6s ease 0.1s both;
}

.gradient-text[b-k0dla9k8ts] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description[b-k0dla9k8ts] {
    font-size: 1.15rem;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
    color: #64748b;
    animation: fadeInUp-b-k0dla9k8ts 0.6s ease 0.2s both;
}

@keyframes fadeInUp-b-k0dla9k8ts {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown-b-k0dla9k8ts {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === CATEGORIES GRID === */
.categories[b-k0dla9k8ts] {
    margin-bottom: 72px;
}

.categories-grid[b-k0dla9k8ts] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* === CATEGORY CARD === */
.card[b-k0dla9k8ts] {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 28px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.card[b-k0dla9k8ts]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.5) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover[b-k0dla9k8ts] {
    transform: translateY(-8px);
    box-shadow: 
        0 20px 40px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

.card:hover[b-k0dla9k8ts]::before {
    opacity: 1;
}

.card-accent[b-k0dla9k8ts] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .card-accent[b-k0dla9k8ts] {
    opacity: 1;
}

.card-icon[b-k0dla9k8ts] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover .card-icon[b-k0dla9k8ts] {
    transform: scale(1.08);
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.2);
}

.card-icon svg[b-k0dla9k8ts] {
    width: 28px;
    height: 28px;
    color: white;
}

.card-icon .material-symbols-rounded[b-k0dla9k8ts] {
    font-size: 28px;
    color: white;
}

.card-body[b-k0dla9k8ts] {
    flex: 1;
    position: relative;
    z-index: 1;
}

.card-title[b-k0dla9k8ts] {
    font-size: 1.2rem;
    font-weight: 650;
    margin: 0 0 8px;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.card-desc[b-k0dla9k8ts] {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    color: #64748b;
}

.card-footer[b-k0dla9k8ts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
}

.card-count[b-k0dla9k8ts] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card-action[b-k0dla9k8ts] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.card-action svg[b-k0dla9k8ts] {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.card:hover .card-action[b-k0dla9k8ts] {
    opacity: 1;
    transform: translateX(0);
}

.card:hover .card-action svg[b-k0dla9k8ts] {
    transform: translateX(4px);
}

/* === SKELETON LOADING === */
.card-skeleton[b-k0dla9k8ts] {
    min-height: 220px;
    overflow: hidden;
}

.skeleton-shimmer[b-k0dla9k8ts] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.04) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: shimmer-b-k0dla9k8ts 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-k0dla9k8ts {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* === POPULAR TOOLS SECTION === */
/* FOCUS-POP-GAP-1 (2026-09-14): margin-TOP was missing, so this section sat
   flush against the last .package-section and "Popular Tools" read as a
   subheading of Track & Monitor instead of a new section.
   Why it happened: the 48px rhythm between package sections comes from
   `.packages-stack { gap: 48px }` — a flex gap only spaces siblings INSIDE the
   stack and adds nothing after the last child. .popular-tools is a sibling
   AFTER .packages-stack, so it inherited none of it and had no top margin of
   its own. Measured gap on prod before this fix: 0px, against 48px everywhere
   else on the page. Same 48px reused deliberately — no new value invented. */
.popular-tools[b-k0dla9k8ts] {
    margin-top: 48px;
    margin-bottom: 48px;
}

.section-header[b-k0dla9k8ts] {
    margin-bottom: 24px;
}

.section-header h2[b-k0dla9k8ts] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.4rem;
    font-weight: 650;
    margin: 0 0 6px;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.section-icon[b-k0dla9k8ts] {
    font-size: 1.2rem;
}

.section-header p[b-k0dla9k8ts] {
    margin: 0;
    font-size: 0.95rem;
    color: #64748b;
}

.tools-grid[b-k0dla9k8ts] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.tool-card[b-k0dla9k8ts] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: #0f172a;
    transition: all 0.25s ease;
    position: relative;
}

.tool-card:hover[b-k0dla9k8ts] {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

.tool-icon[b-k0dla9k8ts] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.tool-card:hover .tool-icon[b-k0dla9k8ts] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
}

.tool-icon svg[b-k0dla9k8ts] {
    width: 20px;
    height: 20px;
    color: #64748b;
    transition: color 0.25s ease;
}

.tool-card:hover .tool-icon svg[b-k0dla9k8ts] {
    color: white;
}

.tool-icon .material-symbols-rounded[b-k0dla9k8ts] {
    font-size: 20px;
    color: #64748b;
    transition: color 0.25s ease;
}

.tool-card:hover .tool-icon .material-symbols-rounded[b-k0dla9k8ts] {
    color: white;
}

.tool-name[b-k0dla9k8ts] {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 550;
}

.tool-arrow[b-k0dla9k8ts] {
    width: 18px;
    height: 18px;
    color: #cbd5e1;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: all 0.25s ease;
}

.tool-card:hover .tool-arrow[b-k0dla9k8ts] {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* === PROGRESSIVE DISCOVERY: LOCKED TOOLS === */
.tool-card.locked[b-k0dla9k8ts] {
    cursor: not-allowed;
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.tool-card.locked .blurred[b-k0dla9k8ts] {
    filter: blur(3px);
    opacity: 0.5;
    user-select: none;
}

.lock-overlay[b-k0dla9k8ts] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    border-radius: inherit;
}

.lock-icon[b-k0dla9k8ts] {
    font-size: 1.2rem;
}

.unlock-hint[b-k0dla9k8ts] {
    font-size: 0.7rem;
    color: #64748b;
    text-align: center;
    padding: 0 12px;
    line-height: 1.3;
}

.locked-section[b-k0dla9k8ts] {
    opacity: 0.85;
}

/* === PROGRESSIVE DISCOVERY: NEWLY UNLOCKED === */
.tool-card.newly-unlocked[b-k0dla9k8ts] {
    position: relative;
    animation: unlockGlow-b-k0dla9k8ts 2s ease-in-out infinite alternate;
}

.unlock-badge[b-k0dla9k8ts] {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b, #eab308);
    color: #1a1a1a;
    z-index: 3;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    letter-spacing: 0.02em;
}

@keyframes unlockGlow-b-k0dla9k8ts {
    from {
        box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb, 99, 102, 241), 0);
    }
    to {
        box-shadow: 0 0 12px 2px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    }
}

/* === BOTTOM HINT === */
.bottom-hint[b-k0dla9k8ts] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Secondary hint under the Ctrl+K shortcut — links to /explore for users
   who want to see the full catalog regardless of their persona filter.
   See DECISIONS.md → "2026-04: Persona-seeded tool discovery" for the
   persona-seeds-defaults-explicit-intent-bypasses rule. */
.bottom-hint-secondary[b-k0dla9k8ts] {
    display: flex;
    justify-content: center;
    margin-top: 6px;
    font-size: 0.85rem;
}

.bottom-hint-secondary a[b-k0dla9k8ts] {
    color: #94a3b8;
    text-decoration: none;
    transition: color 150ms ease;
}

.bottom-hint-secondary a:hover[b-k0dla9k8ts] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: underline;
}

.bottom-hint kbd[b-k0dla9k8ts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    color: #64748b;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* === BOTTOM CTA (Anonymous) === */
.bottom-cta[b-k0dla9k8ts] {
    text-align: center;
    padding: 24px 0 0;
}

.bottom-cta p[b-k0dla9k8ts] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0 0 16px;
}

.bottom-cta-btn[b-k0dla9k8ts] {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.bottom-cta-btn:hover[b-k0dla9k8ts] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
    color: white;
}

/* === EMPTY STATE === */
.empty[b-k0dla9k8ts] {
    text-align: center;
    padding: 80px 24px;
    grid-column: 1 / -1;
}

.empty-icon[b-k0dla9k8ts] {
    font-size: 3rem;
    margin-bottom: 16px;
}

.empty h3[b-k0dla9k8ts] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px;
    color: #0f172a;
}

.empty p[b-k0dla9k8ts] {
    margin: 0;
    color: #64748b;
}

/* ============================================
   DARK THEMES
   ============================================ */

/* Progressive Discovery — dark theme overrides */
.is-dark .lock-overlay[b-k0dla9k8ts] {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(2px);
}

.is-dark .unlock-hint[b-k0dla9k8ts] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .lock-icon[b-k0dla9k8ts] {
    filter: brightness(1.2);
}

/* === SPACE THEME === */
.focus-page.theme-space[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #0f0a1e 0%, #1e1b4b 50%, #0f172a 100%);
}

.theme-space .mesh-blob[b-k0dla9k8ts] { opacity: 0.4; }
.theme-space .mesh-1[b-k0dla9k8ts] { background: linear-gradient(135deg, #8b5cf6, #c084fc); }
.theme-space .mesh-2[b-k0dla9k8ts] { background: linear-gradient(135deg, #6366f1, #a78bfa); }

.theme-space .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}

.theme-space .hero-heading[b-k0dla9k8ts] { color: #f8fafc; }
.theme-space .gradient-text[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #a78bfa 0%, #c084fc 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-space .hero-description[b-k0dla9k8ts] { color: #a5b4fc; }

.theme-space .card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.15);
}

.theme-space .card:hover[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 20px 40px -12px rgba(139, 92, 246, 0.25);
}

.theme-space .card-title[b-k0dla9k8ts] { color: #f8fafc; }
.theme-space .card-desc[b-k0dla9k8ts] { color: #a5b4fc; }
.theme-space .card-count[b-k0dla9k8ts] { color: #818cf8; }
.theme-space .card-footer[b-k0dla9k8ts] { border-top-color: rgba(139, 92, 246, 0.15); }

.theme-space .section-header h2[b-k0dla9k8ts] { color: #f8fafc; }
.theme-space .section-header p[b-k0dla9k8ts] { color: #a5b4fc; }

.theme-space .tool-card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(139, 92, 246, 0.15);
    color: #f8fafc;
}

.theme-space .tool-card:hover[b-k0dla9k8ts] {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
}

.theme-space .tool-icon[b-k0dla9k8ts] {
    background: rgba(139, 92, 246, 0.2);
}

.theme-space .tool-icon svg[b-k0dla9k8ts] { color: #a78bfa; }

.theme-space .bottom-hint[b-k0dla9k8ts] { color: #818cf8; }
.theme-space .bottom-hint kbd[b-k0dla9k8ts] {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.3);
    color: #c4b5fd;
}
.theme-space .bottom-cta p[b-k0dla9k8ts] { color: #a5b4fc; }
.theme-space .bottom-cta-btn[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
}

.theme-space .card-skeleton[b-k0dla9k8ts] { background: rgba(255, 255, 255, 0.03); }
.theme-space .skeleton-shimmer[b-k0dla9k8ts] {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
}

/* === WINTER THEME === */
.focus-page.theme-winter[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #0c4a6e 0%, #164e63 50%, #0f172a 100%);
}

.theme-winter .mesh-1[b-k0dla9k8ts] { background: linear-gradient(135deg, #38bdf8, #7dd3fc); }
.theme-winter .mesh-2[b-k0dla9k8ts] { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.theme-winter .mesh-blob[b-k0dla9k8ts] { opacity: 0.35; }

.theme-winter .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

.theme-winter .hero-heading[b-k0dla9k8ts] { color: #f8fafc; }
.theme-winter .gradient-text[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 50%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-winter .hero-description[b-k0dla9k8ts] { color: #7dd3fc; }

.theme-winter .card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(56, 189, 248, 0.15);
}

.theme-winter .card:hover[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(56, 189, 248, 0.3);
    box-shadow: 0 20px 40px -12px rgba(56, 189, 248, 0.2);
}

.theme-winter .card-title[b-k0dla9k8ts] { color: #f8fafc; }
.theme-winter .card-desc[b-k0dla9k8ts] { color: #7dd3fc; }
.theme-winter .card-count[b-k0dla9k8ts] { color: #38bdf8; }
.theme-winter .card-footer[b-k0dla9k8ts] { border-top-color: rgba(56, 189, 248, 0.15); }
.theme-winter .card-action[b-k0dla9k8ts] { color: #38bdf8 !important; }

.theme-winter .section-header h2[b-k0dla9k8ts] { color: #f8fafc; }
.theme-winter .section-header p[b-k0dla9k8ts] { color: #7dd3fc; }

.theme-winter .tool-card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(56, 189, 248, 0.15);
    color: #f8fafc;
}

.theme-winter .tool-card:hover[b-k0dla9k8ts] {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.4);
}

.theme-winter .tool-icon[b-k0dla9k8ts] { background: rgba(56, 189, 248, 0.2); }
.theme-winter .tool-icon svg[b-k0dla9k8ts] { color: #38bdf8; }
.theme-winter .tool-card:hover .tool-icon[b-k0dla9k8ts] { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
.theme-winter .tool-card:hover .tool-icon svg[b-k0dla9k8ts] { color: white; }
.theme-winter .tool-arrow[b-k0dla9k8ts] { color: #38bdf8; }

.theme-winter .bottom-hint[b-k0dla9k8ts] { color: #38bdf8; }
.theme-winter .bottom-hint kbd[b-k0dla9k8ts] {
    background: rgba(56, 189, 248, 0.15);
    border-color: rgba(56, 189, 248, 0.3);
    color: #7dd3fc;
}

/* === NATURE THEME === */
.focus-page.theme-nature[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #15803d 100%);
}

.theme-nature .mesh-1[b-k0dla9k8ts] { background: linear-gradient(135deg, #4ade80, #86efac); }
.theme-nature .mesh-2[b-k0dla9k8ts] { background: linear-gradient(135deg, #22c55e, #4ade80); }
.theme-nature .mesh-blob[b-k0dla9k8ts] { opacity: 0.3; }

.theme-nature .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #86efac;
}

.theme-nature .hero-heading[b-k0dla9k8ts] { color: #f8fafc; }
.theme-nature .gradient-text[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #86efac 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-nature .hero-description[b-k0dla9k8ts] { color: #86efac; }

.theme-nature .card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(74, 222, 128, 0.15);
}

.theme-nature .card:hover[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 0 20px 40px -12px rgba(74, 222, 128, 0.2);
}

.theme-nature .card-title[b-k0dla9k8ts] { color: #f8fafc; }
.theme-nature .card-desc[b-k0dla9k8ts] { color: #86efac; }
.theme-nature .card-count[b-k0dla9k8ts] { color: #4ade80; }
.theme-nature .card-footer[b-k0dla9k8ts] { border-top-color: rgba(74, 222, 128, 0.15); }
.theme-nature .card-action[b-k0dla9k8ts] { color: #4ade80 !important; }

.theme-nature .section-header h2[b-k0dla9k8ts] { color: #f8fafc; }
.theme-nature .section-header p[b-k0dla9k8ts] { color: #86efac; }

.theme-nature .tool-card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(74, 222, 128, 0.15);
    color: #f8fafc;
}

.theme-nature .tool-card:hover[b-k0dla9k8ts] {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.4);
}

.theme-nature .tool-icon[b-k0dla9k8ts] { background: rgba(74, 222, 128, 0.2); }
.theme-nature .tool-icon svg[b-k0dla9k8ts] { color: #4ade80; }
.theme-nature .tool-card:hover .tool-icon[b-k0dla9k8ts] { background: linear-gradient(135deg, #22c55e, #4ade80); }
.theme-nature .tool-card:hover .tool-icon svg[b-k0dla9k8ts] { color: white; }
.theme-nature .tool-arrow[b-k0dla9k8ts] { color: #4ade80; }

.theme-nature .bottom-hint[b-k0dla9k8ts] { color: #4ade80; }
.theme-nature .bottom-hint kbd[b-k0dla9k8ts] {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.3);
    color: #86efac;
}

/* === OCEAN THEME === */
.focus-page.theme-ocean[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #0c4a6e 0%, #164e63 50%, #0f766e 100%);
}

.theme-ocean .mesh-1[b-k0dla9k8ts] { background: linear-gradient(135deg, #22d3ee, #67e8f9); }
.theme-ocean .mesh-2[b-k0dla9k8ts] { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.theme-ocean .mesh-blob[b-k0dla9k8ts] { opacity: 0.35; }

.theme-ocean .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.3);
    color: #67e8f9;
}

.theme-ocean .hero-heading[b-k0dla9k8ts] { color: #f8fafc; }
.theme-ocean .gradient-text[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 50%, #14b8a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-ocean .hero-description[b-k0dla9k8ts] { color: #67e8f9; }

.theme-ocean .card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(34, 211, 238, 0.15);
}

.theme-ocean .card:hover[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
    box-shadow: 0 20px 40px -12px rgba(34, 211, 238, 0.2);
}

.theme-ocean .card-title[b-k0dla9k8ts] { color: #f8fafc; }
.theme-ocean .card-desc[b-k0dla9k8ts] { color: #67e8f9; }
.theme-ocean .card-count[b-k0dla9k8ts] { color: #22d3ee; }
.theme-ocean .card-footer[b-k0dla9k8ts] { border-top-color: rgba(34, 211, 238, 0.15); }
.theme-ocean .card-action[b-k0dla9k8ts] { color: #22d3ee !important; }

.theme-ocean .section-header h2[b-k0dla9k8ts] { color: #f8fafc; }
.theme-ocean .section-header p[b-k0dla9k8ts] { color: #67e8f9; }

.theme-ocean .tool-card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(34, 211, 238, 0.15);
    color: #f8fafc;
}

.theme-ocean .tool-card:hover[b-k0dla9k8ts] {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.4);
}

.theme-ocean .tool-icon[b-k0dla9k8ts] { background: rgba(34, 211, 238, 0.2); }
.theme-ocean .tool-icon svg[b-k0dla9k8ts] { color: #22d3ee; }
.theme-ocean .tool-card:hover .tool-icon[b-k0dla9k8ts] { background: linear-gradient(135deg, #06b6d4, #22d3ee); }
.theme-ocean .tool-card:hover .tool-icon svg[b-k0dla9k8ts] { color: white; }
.theme-ocean .tool-arrow[b-k0dla9k8ts] { color: #22d3ee; }

.theme-ocean .bottom-hint[b-k0dla9k8ts] { color: #22d3ee; }
.theme-ocean .bottom-hint kbd[b-k0dla9k8ts] {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.3);
    color: #67e8f9;
}

/* === MYSTIC THEME === */
.focus-page.theme-mystic[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #3b0764 0%, #581c87 50%, #4c1d95 100%);
}

.theme-mystic .mesh-1[b-k0dla9k8ts] { background: linear-gradient(135deg, #e879f9, #f0abfc); }
.theme-mystic .mesh-2[b-k0dla9k8ts] { background: linear-gradient(135deg, #d946ef, #e879f9); }
.theme-mystic .mesh-blob[b-k0dla9k8ts] { opacity: 0.4; }

.theme-mystic .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(232, 121, 249, 0.15);
    border-color: rgba(232, 121, 249, 0.3);
    color: #f0abfc;
}

.theme-mystic .hero-heading[b-k0dla9k8ts] { color: #faf5ff; }
.theme-mystic .gradient-text[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #e879f9 0%, #d946ef 50%, #f0abfc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-mystic .hero-description[b-k0dla9k8ts] { color: #f0abfc; }

.theme-mystic .card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(232, 121, 249, 0.15);
}

.theme-mystic .card:hover[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(232, 121, 249, 0.3);
    box-shadow: 0 20px 40px -12px rgba(232, 121, 249, 0.25);
}

.theme-mystic .card-title[b-k0dla9k8ts] { color: #faf5ff; }
.theme-mystic .card-desc[b-k0dla9k8ts] { color: #f0abfc; }
.theme-mystic .card-count[b-k0dla9k8ts] { color: #e879f9; }
.theme-mystic .card-footer[b-k0dla9k8ts] { border-top-color: rgba(232, 121, 249, 0.15); }
.theme-mystic .card-action[b-k0dla9k8ts] { color: #e879f9 !important; }

.theme-mystic .section-header h2[b-k0dla9k8ts] { color: #faf5ff; }
.theme-mystic .section-header p[b-k0dla9k8ts] { color: #f0abfc; }

.theme-mystic .tool-card[b-k0dla9k8ts] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(232, 121, 249, 0.15);
    color: #faf5ff;
}

.theme-mystic .tool-card:hover[b-k0dla9k8ts] {
    background: rgba(232, 121, 249, 0.15);
    border-color: rgba(232, 121, 249, 0.4);
}

.theme-mystic .tool-icon[b-k0dla9k8ts] { background: rgba(232, 121, 249, 0.2); }
.theme-mystic .tool-icon svg[b-k0dla9k8ts] { color: #e879f9; }
.theme-mystic .tool-card:hover .tool-icon[b-k0dla9k8ts] { background: linear-gradient(135deg, #d946ef, #e879f9); }
.theme-mystic .tool-card:hover .tool-icon svg[b-k0dla9k8ts] { color: white; }
.theme-mystic .tool-arrow[b-k0dla9k8ts] { color: #e879f9; }

.theme-mystic .bottom-hint[b-k0dla9k8ts] { color: #e879f9; }
.theme-mystic .bottom-hint kbd[b-k0dla9k8ts] {
    background: rgba(232, 121, 249, 0.15);
    border-color: rgba(232, 121, 249, 0.3);
    color: #f0abfc;
}

/* === TRON THEME === */
.focus-page.theme-tron[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #0a0a0a 0%, #171717 50%, #0a0a0a 100%);
}

.theme-tron .mesh-1[b-k0dla9k8ts] { background: linear-gradient(135deg, #00ffff, #00d4ff); }
.theme-tron .mesh-2[b-k0dla9k8ts] { background: linear-gradient(135deg, #ff6600, #ff9500); }
.theme-tron .mesh-blob[b-k0dla9k8ts] { opacity: 0.25; }

.theme-tron .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.4);
    color: #00ffff;
}

.theme-tron .hero-heading[b-k0dla9k8ts] { color: #f5f5f5; }
.theme-tron .gradient-text[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #00ffff 0%, #00d4ff 50%, #00ffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-tron .hero-description[b-k0dla9k8ts] { color: rgba(0, 255, 255, 0.8); }

.theme-tron .card[b-k0dla9k8ts] {
    background: rgba(0, 255, 255, 0.03);
    border-color: rgba(0, 255, 255, 0.2);
}

.theme-tron .card:hover[b-k0dla9k8ts] {
    background: rgba(0, 255, 255, 0.06);
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 
        0 0 30px rgba(0, 255, 255, 0.15),
        inset 0 1px 0 rgba(0, 255, 255, 0.1);
}

.theme-tron .card-title[b-k0dla9k8ts] { color: #f5f5f5; }
.theme-tron .card-desc[b-k0dla9k8ts] { color: rgba(0, 255, 255, 0.7); }
.theme-tron .card-count[b-k0dla9k8ts] { color: rgba(0, 255, 255, 0.6); }
.theme-tron .card-footer[b-k0dla9k8ts] { border-top-color: rgba(0, 255, 255, 0.2); }
.theme-tron .card-action[b-k0dla9k8ts] { color: #00ffff !important; }
.theme-tron .card-accent[b-k0dla9k8ts] { background: linear-gradient(90deg, #00ffff, #00d4ff) !important; }

.theme-tron .section-header h2[b-k0dla9k8ts] { color: #f5f5f5; }
.theme-tron .section-header p[b-k0dla9k8ts] { color: rgba(0, 255, 255, 0.7); }

.theme-tron .tool-card[b-k0dla9k8ts] {
    background: rgba(0, 255, 255, 0.03);
    border-color: rgba(0, 255, 255, 0.2);
    color: #f5f5f5;
}

.theme-tron .tool-card:hover[b-k0dla9k8ts] {
    background: rgba(0, 255, 255, 0.08);
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.15);
}

.theme-tron .tool-icon[b-k0dla9k8ts] {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
}
.theme-tron .tool-icon svg[b-k0dla9k8ts] { color: #00ffff; }
.theme-tron .tool-card:hover .tool-icon[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #00d4ff, #00ffff);
    border-color: transparent;
}
.theme-tron .tool-card:hover .tool-icon svg[b-k0dla9k8ts] { color: #0a0a0a; }
.theme-tron .tool-arrow[b-k0dla9k8ts] { color: #00ffff; }

.theme-tron .bottom-hint[b-k0dla9k8ts] { color: rgba(0, 255, 255, 0.6); }
.theme-tron .bottom-hint kbd[b-k0dla9k8ts] {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.3);
    color: #00ffff;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1024px) {
    .categories-grid[b-k0dla9k8ts] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tools-grid[b-k0dla9k8ts] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .focus-content[b-k0dla9k8ts] {
        padding: 40px 20px 60px;
    }
    
    .hero[b-k0dla9k8ts] {
        margin-bottom: 48px;
    }
    
    .hero-heading[b-k0dla9k8ts] {
        font-size: 1.75rem;
    }

    .hero-description[b-k0dla9k8ts] {
        font-size: 1rem;
    }
    
    .categories-grid[b-k0dla9k8ts] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .card[b-k0dla9k8ts] {
        min-height: auto;
        padding: 24px;
    }
    
    .tools-grid[b-k0dla9k8ts] {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .tool-card[b-k0dla9k8ts] {
        padding: 14px 18px;
    }
    
    .mesh-gradient[b-k0dla9k8ts] {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-heading[b-k0dla9k8ts] {
        font-size: 1.5rem;
    }
    
    .hero-eyebrow[b-k0dla9k8ts] {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
    
    .card-icon[b-k0dla9k8ts] {
        width: 48px;
        height: 48px;
    }
    
    .card-icon svg[b-k0dla9k8ts] {
        width: 24px;
        height: 24px;
    }
    
    .bottom-hint[b-k0dla9k8ts] {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ============================================
   💼 EXECUTIVE THEME (Light - Professional)
   Clean slate/charcoal, no colorful gradients
   ============================================ */
.focus-page.theme-executive[b-k0dla9k8ts] {
    background: linear-gradient(180deg, #f5f5f5 0%, #efefef 35%, #e8e8e8 65%, #e0e0e0 100%);
}

/* Hide colorful mesh blobs - too playful for executive */
.theme-executive .mesh-blob[b-k0dla9k8ts] {
    opacity: 0.08;
}
.theme-executive .mesh-1[b-k0dla9k8ts] { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }
.theme-executive .mesh-2[b-k0dla9k8ts] { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }
.theme-executive .mesh-3[b-k0dla9k8ts] { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }
.theme-executive .mesh-4[b-k0dla9k8ts] { background: linear-gradient(135deg, #94a3b8, #cbd5e1); }

/* Hero eyebrow pill - slate instead of indigo */
.theme-executive .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(51, 65, 85, 0.08);
    color: #334155;
    border-color: rgba(51, 65, 85, 0.15);
}

/* Heading */
.theme-executive .hero-heading[b-k0dla9k8ts] { color: #0f172a; }
.theme-executive .gradient-text[b-k0dla9k8ts] {
    background: #1e293b;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-executive .hero-description[b-k0dla9k8ts] { color: #475569; }

/* Category cards */
.theme-executive .card[b-k0dla9k8ts] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.theme-executive .card:hover[b-k0dla9k8ts] {
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(51, 65, 85, 0.08);
}

.theme-executive .card-icon[b-k0dla9k8ts] {
    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
}

.theme-executive .card:hover .card-icon[b-k0dla9k8ts] {
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.2);
}

.theme-executive .card-title[b-k0dla9k8ts] { color: #0f172a; }
.theme-executive .card-desc[b-k0dla9k8ts] { color: #475569; }
.theme-executive .card-count[b-k0dla9k8ts] { color: #94a3b8; }
.theme-executive .card-footer[b-k0dla9k8ts] { border-top-color: rgba(51, 65, 85, 0.08); }

/* All card action links - unified slate color */
.theme-executive .card-action[b-k0dla9k8ts] { color: #334155 !important; }
.theme-executive .card-accent[b-k0dla9k8ts] { background: #334155 !important; }

/* Section headers */
.theme-executive .section-header h2[b-k0dla9k8ts] { color: #0f172a; }
.theme-executive .section-header p[b-k0dla9k8ts] { color: #475569; }

/* Tool cards */
.theme-executive .tool-card[b-k0dla9k8ts] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
    color: #0f172a;
}

.theme-executive .tool-card:hover[b-k0dla9k8ts] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.2);
    box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.1);
}

.theme-executive .tool-icon[b-k0dla9k8ts] {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
}
.theme-executive .tool-icon svg[b-k0dla9k8ts] { color: #475569; }
.theme-executive .tool-card:hover .tool-icon[b-k0dla9k8ts] {
    background: #1e293b;
}
.theme-executive .tool-card:hover .tool-icon svg[b-k0dla9k8ts] { color: white; }
.theme-executive .tool-arrow[b-k0dla9k8ts] { color: #475569; }

/* Bottom hint */
.theme-executive .bottom-hint[b-k0dla9k8ts] { color: #94a3b8; }
.theme-executive .bottom-hint kbd[b-k0dla9k8ts] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.12);
    color: #334155;
}
.theme-executive .bottom-cta p[b-k0dla9k8ts] { color: #475569; }
.theme-executive .bottom-cta-btn[b-k0dla9k8ts] {
    background: #059669;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
}
.theme-executive .bottom-cta-btn:hover[b-k0dla9k8ts] {
    background: #047857;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.4);
}

/* ============================================
   🌑 SLATE THEME (Dark - Professional)
   FOCUS-SLATE-1 (2026-09-28): AppTheme.ExecutiveDark / .theme-executivedark.
   This page styles each theme with its own block and had none for Slate, so
   Slate fell through to the LIGHT base rules: a #0f172a hero heading on a dark
   page ("Browse" invisible), white-glass tool cards carrying Slate's light
   --theme-text-* (titles/descriptions unreadable), a pink gradient headline.
   This is the dark half of the Executive block above — same restraint (flat
   text, near-invisible blobs, no color tint), values from theme-variables.css.
   ============================================ */
.focus-page.theme-executivedark[b-k0dla9k8ts] {
    background: linear-gradient(180deg, #0f172a 0%, #131c2e 35%, #172033 65%, #1a2438 100%);
}

.theme-executivedark .mesh-blob[b-k0dla9k8ts] { opacity: 0.06; }
.theme-executivedark .mesh-1[b-k0dla9k8ts],
.theme-executivedark .mesh-2[b-k0dla9k8ts],
.theme-executivedark .mesh-3[b-k0dla9k8ts],
.theme-executivedark .mesh-4[b-k0dla9k8ts] { background: linear-gradient(135deg, #475569, #64748b); }

.theme-executivedark .hero-eyebrow[b-k0dla9k8ts] {
    background: rgba(148, 163, 184, 0.10);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.25);
}

.theme-executivedark .hero-heading[b-k0dla9k8ts] { color: #f8fafc; }
.theme-executivedark .gradient-text[b-k0dla9k8ts] {
    background: #cbd5e1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.theme-executivedark .hero-description[b-k0dla9k8ts] { color: #cbd5e1; }

.theme-executivedark .card[b-k0dla9k8ts] {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.14);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.theme-executivedark .card:hover[b-k0dla9k8ts] {
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(148, 163, 184, 0.2);
}
.theme-executivedark .card-title[b-k0dla9k8ts] { color: #f1f5f9; }
.theme-executivedark .card-desc[b-k0dla9k8ts] { color: #cbd5e1; }
.theme-executivedark .card-count[b-k0dla9k8ts] { color: #94a3b8; }
.theme-executivedark .card-footer[b-k0dla9k8ts] { border-top-color: rgba(148, 163, 184, 0.14); }
.theme-executivedark .card-action[b-k0dla9k8ts] { color: #cbd5e1 !important; }
.theme-executivedark .card-accent[b-k0dla9k8ts] { background: #64748b !important; }

.theme-executivedark .section-header h2[b-k0dla9k8ts] { color: #f1f5f9; }
.theme-executivedark .section-header p[b-k0dla9k8ts] { color: #cbd5e1; }

.theme-executivedark .tool-card[b-k0dla9k8ts] {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.14);
    color: #f1f5f9;
}
.theme-executivedark .tool-card:hover[b-k0dla9k8ts] {
    background: #243247;
    border-color: rgba(148, 163, 184, 0.32);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.theme-executivedark .tool-icon[b-k0dla9k8ts] { background: #334155; }
.theme-executivedark .tool-icon svg[b-k0dla9k8ts],
.theme-executivedark .tool-icon .material-symbols-rounded[b-k0dla9k8ts] { color: #cbd5e1; }
.theme-executivedark .tool-card:hover .tool-icon[b-k0dla9k8ts] { background: #64748b; }
.theme-executivedark .tool-card:hover .tool-icon svg[b-k0dla9k8ts],
.theme-executivedark .tool-card:hover .tool-icon .material-symbols-rounded[b-k0dla9k8ts] { color: #ffffff; }
.theme-executivedark .tool-arrow[b-k0dla9k8ts],
.theme-executivedark .tool-card:hover .tool-arrow[b-k0dla9k8ts] { color: #94a3b8; }

.theme-executivedark .package-section-header[b-k0dla9k8ts] { border-bottom-color: rgba(148, 163, 184, 0.14); }
.theme-executivedark .package-section-count[b-k0dla9k8ts] {
    background: rgba(148, 163, 184, 0.12);
    color: #cbd5e1;
}

.theme-executivedark .bottom-hint[b-k0dla9k8ts] { color: #94a3b8; }
.theme-executivedark .bottom-hint kbd[b-k0dla9k8ts] {
    background: #1e293b;
    border-color: rgba(148, 163, 184, 0.25);
    color: #cbd5e1;
}
.theme-executivedark .bottom-cta p[b-k0dla9k8ts] { color: #cbd5e1; }

/* ============================================
   TM-NAV-1 (2026-05-09): Collapsed /focus + /focus/{package} into one page.
   .packages-stack contains the full per-package sections, replacing the old
   .categories-grid of 5 package cards. Each package gets:
     - a quick-jump pill in .packages-jump (anchor nav at the top)
     - its own .package-section with all its tools listed inline
   /focus/{package} routes redirect to /focus#{slug} via CategoryPage.razor.
   ============================================ */

.packages-stack[b-k0dla9k8ts] {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Quick-jump anchor pill nav — replaces the 5-package-cards grid as the
   "navigate to a package" surface. Pills jump within the page via #anchor. */
.packages-jump[b-k0dla9k8ts] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 8px;
    margin-bottom: 16px;
    position: sticky;
    top: 12px;
    z-index: 5;
    background: rgba(250, 250, 250, 0.85);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.packages-jump-pill[b-k0dla9k8ts] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px 8px 8px;
    border-radius: 999px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    color: var(--theme-text-primary, #1a202c);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 150ms ease;
}

.packages-jump-pill:hover[b-k0dla9k8ts] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--theme-primary, rgba(0, 0, 0, 0.2));
}

.packages-jump-icon[b-k0dla9k8ts] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: white;
}

.packages-jump-icon .material-symbols-rounded[b-k0dla9k8ts] {
    font-size: 16px;
}

.packages-jump-label[b-k0dla9k8ts] {
    line-height: 1;
}

.packages-jump-count[b-k0dla9k8ts] {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.06));
    color: var(--theme-text-secondary, #6b7280);
    line-height: 1.4;
}

/* === Per-package section === */

.package-section[b-k0dla9k8ts] {
    /* Anchor offset so /focus#planning lands the heading below the sticky jump nav. */
    scroll-margin-top: 80px;
}

.package-section-header[b-k0dla9k8ts] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
}

.package-section-icon[b-k0dla9k8ts] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.package-section-icon .material-symbols-rounded[b-k0dla9k8ts] {
    font-size: 28px;
}

.package-section-meta[b-k0dla9k8ts] {
    flex: 1;
    min-width: 0;
}

.package-section-title[b-k0dla9k8ts] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--theme-text-primary, #1a202c);
}

.package-section-desc[b-k0dla9k8ts] {
    margin: 0;
    color: var(--theme-text-secondary, #6b7280);
    font-size: 0.95rem;
}

.package-section-count[b-k0dla9k8ts] {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #6b7280);
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.05));
}

/* Package's tools — grid of cards. Reuses .tool-card / .tool-icon classes
   already defined elsewhere in this file, with two new inner classes
   (.tool-card-body, .tool-card-desc) for the description-line variant. */
.package-tools-grid[b-k0dla9k8ts] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.package-tools-grid .tool-card[b-k0dla9k8ts] {
    /* Override the existing centered/vertical .tool-card layout used elsewhere
       on this page — here we want a horizontal row (icon + title/desc + arrow). */
    flex-direction: row;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
    gap: 12px;
}

.tool-card-body[b-k0dla9k8ts] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.package-tools-grid .tool-card .tool-name[b-k0dla9k8ts] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1a202c);
}

.tool-card-desc[b-k0dla9k8ts] {
    font-size: 0.825rem;
    color: var(--theme-text-secondary, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.35;
}

.package-tools-grid .tool-card .tool-arrow[b-k0dla9k8ts] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--theme-text-secondary, #6b7280);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.package-tools-grid .tool-card:hover .tool-arrow[b-k0dla9k8ts] {
    opacity: 1;
    transform: translateX(0);
}

.package-tools-empty[b-k0dla9k8ts] {
    padding: 24px;
    text-align: center;
    color: var(--theme-text-secondary, #6b7280);
    font-style: italic;
    background: var(--theme-surface-hover, rgba(0, 0, 0, 0.03));
    border-radius: 12px;
}

/* Responsive — stack jump pills tighter, drop the sticky behavior on small
   screens so it doesn't hog vertical space. */
@media (max-width: 768px) {
    .packages-jump[b-k0dla9k8ts] {
        position: static;
        padding: 4px;
        gap: 6px;
    }

    .packages-jump-pill[b-k0dla9k8ts] {
        padding: 6px 12px 6px 6px;
        font-size: 0.825rem;
    }

    .package-section-header[b-k0dla9k8ts] {
        flex-wrap: wrap;
    }

    .package-section-title[b-k0dla9k8ts] {
        font-size: 1.25rem;
    }

    .package-tools-grid[b-k0dla9k8ts] {
        grid-template-columns: 1fr;
    }
}

/* FOCUS-KBD-1 (2026-10-02, phone walk): the "⌘ + K to open your AI assistant" hint is a keyboard
   shortcut - meaningless on a phone or tablet. Hide it where there's no hover-capable pointer or the
   screen is phone-width; "Or browse every tool →" stays. */
@media (hover: none), (max-width: 600px) {
    .bottom-hint[b-k0dla9k8ts] {
        display: none;
    }
}
/* /Pages/Focus/ToolLanding.razor.rz.scp.css */
.tool-landing[b-66tnbwhqzh] {
        min-height: calc(100vh - 56px);
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 1;
    }
    
    .error-state[b-66tnbwhqzh] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        color: #64748b;
    }
    
    .error-state h2[b-66tnbwhqzh] {
        margin: 0;
        color: #334155;
    }
    
    .error-state p[b-66tnbwhqzh] {
        margin: 0;
    }
    
    /* Header */
    .landing-header[b-66tnbwhqzh] {
        display: flex;
        justify-content: center;
        padding: 24px;
    }
    
    .landing-logo img[b-66tnbwhqzh] {
        height: 36px;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }
    
    .landing-logo:hover img[b-66tnbwhqzh] {
        opacity: 1;
    }
    
    /* Main */
    .landing-main[b-66tnbwhqzh] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 24px 60px;
    }
    
    .landing-hero[b-66tnbwhqzh] {
        text-align: center;
        max-width: 600px;
    }
    
    /* Icon */
    .hero-icon-wrapper[b-66tnbwhqzh] {
        position: relative;
        display: inline-block;
        margin-bottom: 32px;
    }
    
    .hero-icon[b-66tnbwhqzh] {
        width: 100px;
        height: 100px;
        border-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
        animation: iconFloat-b-66tnbwhqzh 3s ease-in-out infinite;
    }
    
    .hero-icon .material-symbols-rounded[b-66tnbwhqzh] {
        font-size: 50px;
        color: white;
    }

    /* PUB-BOT-2 (2026-08-11): the companion slug renders <ProBot> instead of a
       Material glyph. The rule above targets the font span and does NOT match an
       <svg>, and ProBot paints its head with currentColor — without this the
       robot renders BLACK on the gradient tile. (GOTCHAS #269c, same trap.) */
    .hero-icon .pro-bot[b-66tnbwhqzh] {
        color: #fff;
    }

    /* CHAIN-MARK-1 (2026-09-30): chain SVG fills the tile; the tool glyph is a
       corner badge. Both paint with currentColor - the same #269c trap as ProBot. */
    .hero-icon .chain-mark[b-66tnbwhqzh] {
        width: 64px;
        height: 64px;
        color: #fff;
        overflow: visible;
    }

    .hero-icon .tool-badge[b-66tnbwhqzh] {
        position: absolute;
        right: -8px;
        bottom: -8px;
        width: 34px;
        height: 34px;
        border-radius: 11px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    }

    .hero-icon .tool-badge .material-symbols-rounded[b-66tnbwhqzh] {
        font-size: 20px;
        color: inherit;
    }
    
    .icon-glow[b-66tnbwhqzh] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
        border-radius: 30px;
        filter: blur(30px);
        opacity: 0.3;
        z-index: 1;
        animation: glowPulse-b-66tnbwhqzh 3s ease-in-out infinite;
    }
    
    @keyframes iconFloat-b-66tnbwhqzh {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    
    @keyframes glowPulse-b-66tnbwhqzh {
        0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 0.5; transform: translate(-50%, -50%) scale(1.1); }
    }
    
    /* Title */
    .hero-title[b-66tnbwhqzh] {
        font-size: 2.75rem;
        font-weight: 800;
        color: #1e293b;
        margin: 0 0 16px;
        line-height: 1.1;
    }
    
    .hero-description[b-66tnbwhqzh] {
        font-size: 1.2rem;
        color: #64748b;
        margin: 0 0 28px;
        line-height: 1.6;
    }

    /* FUNNEL-3 answer arm only (ToolLanding IsAnswerArm) */
    /* WCAG AA on the light hero bg: #6366f1 is 4.27:1 and FAILS (GOTCHAS #451).
       #4f46e5 is 6.01:1. Keep both this base and the theme override >= 4.5:1. */
    .hero-eyebrow[b-66tnbwhqzh] {
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #4f46e5;
        margin: 0 0 12px;
    }

    /* #94a3b8 is 2.45:1 and FAILS. Italic + 0.95rem already read as quieter than
       the body, so the colour does not need to do it: same #64748b, 4.55:1. */
    .hero-byline[b-66tnbwhqzh] {
        font-size: 0.95rem;
        font-style: italic;
        color: #64748b;
        margin: -14px 0 28px;
    }
    
    /* Feature Pills */
    .feature-pills[b-66tnbwhqzh] {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        margin-bottom: 36px;
    }
    
    .feature-pill[b-66tnbwhqzh] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        background: rgba(var(--theme-primary-rgb), 0.08);
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--theme-primary-hover);
    }
    
    .feature-pill .pill-check[b-66tnbwhqzh] {
        width: 16px;
        height: 16px;
    }
    
    /* CTA */
    .cta-section[b-66tnbwhqzh] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .cta-button[b-66tnbwhqzh] {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 600;
        font-size: 1.1rem;
        padding: 16px 40px;
        color: white;
        background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
        box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb), 0.3);
        transition: all 0.2s ease;
    }
    
    .cta-button svg[b-66tnbwhqzh] {
        width: 20px;
        height: 20px;
    }
    
    .cta-button:hover[b-66tnbwhqzh] {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(var(--theme-primary-rgb), 0.4);
    }
    
    .cta-subtext[b-66tnbwhqzh] {
        font-size: 0.85rem;
        color: #94a3b8;
        margin: 0;
    }

    /* R4-SWITCH-1: second subtext line under the hero CTA (competitor-switch note). */
    .cta-subtext.cta-switching[b-66tnbwhqzh] {
        margin-top: 10px;
        max-width: 32rem;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Social Proof */
    .social-proof[b-66tnbwhqzh] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 48px;
        font-size: 0.85rem;
        color: #94a3b8;
    }
    
    .social-proof svg[b-66tnbwhqzh] {
        width: 20px;
        height: 20px;
    }
    
    /* Memory Reel Section (TL-COPY-5, 2026-05-26)
       Optional proof-of-specificity block between final CTA and related-tools.
       Designed to feel like a quiet aside — narrower than the CTA, slightly
       muted, with a clear visual gap above and below so it reads as its own
       moment instead of bleeding into adjacent sections. */
    .memory-reel-section[b-66tnbwhqzh] {
        max-width: 720px;
        margin: 16px auto 8px;
        padding: 32px 32px;
        text-align: center;
    }

    .memory-reel-title[b-66tnbwhqzh] {
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        margin: 0 0 14px;
    }

    .memory-reel-prose[b-66tnbwhqzh] {
        font-size: 1.0625rem;
        line-height: 1.65;
        color: #475569;
        margin: 0;
        /* Tight letter spacing pulls the prose together visually so each
           specific example reads as part of a single mental list. */
        letter-spacing: -0.005em;
    }

    /* FAQ Section (SEO-8). Long-tail Q&A; native <details> accordion (no JS).
       Mirrors the memory-reel palette so it reads as part of the same calm
       lower-page rhythm. */
    .faq-section[b-66tnbwhqzh] {
        max-width: 720px;
        margin: 8px auto 16px;
        padding: 8px 24px 24px;
    }

    .faq-title[b-66tnbwhqzh] {
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        text-align: center;
        margin: 0 0 18px;
    }

    .faq-list[b-66tnbwhqzh] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .faq-item[b-66tnbwhqzh] {
        border: 1px solid rgba(100, 116, 139, 0.18);
        border-radius: 12px;
        padding: 2px 18px;
        background: rgba(148, 163, 184, 0.06);
    }

    .faq-question[b-66tnbwhqzh] {
        font-size: 1rem;
        font-weight: 600;
        color: #334155;
        cursor: pointer;
        padding: 14px 0;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    /* Hide the default disclosure triangle; use a +/- glyph instead. */
    .faq-question[b-66tnbwhqzh]::-webkit-details-marker { display: none; }

    .faq-question[b-66tnbwhqzh]::after {
        content: "+";
        color: #94a3b8;
        font-size: 1.25rem;
        line-height: 1;
        flex-shrink: 0;
    }

    .faq-item[open] .faq-question[b-66tnbwhqzh]::after { content: "\2212"; } /* minus sign */

    .faq-answer[b-66tnbwhqzh] {
        font-size: 0.975rem;
        line-height: 1.6;
        color: #475569;
        margin: 0 0 14px;
    }

    /* Related Section */
    .related-section[b-66tnbwhqzh] {
        padding: 32px 24px;
        text-align: center;
    }
    
    .related-intro[b-66tnbwhqzh] {
        font-size: 0.9rem;
        color: #94a3b8;
        margin: 0 0 20px;
    }
    
    .related-grid[b-66tnbwhqzh] {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .related-card[b-66tnbwhqzh] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: white;
        border-radius: 12px;
        text-decoration: none;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    
    .related-card:hover[b-66tnbwhqzh] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }
    
    .related-icon[b-66tnbwhqzh] {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .related-icon .material-symbols-rounded[b-66tnbwhqzh] {
        font-size: 18px;
        color: white;
    }
    
    .related-name[b-66tnbwhqzh] {
        font-size: 0.9rem;
            font-weight: 500;
            color: #334155;
        }
    
        /* Responsive */
        @media (max-width: 768px) {
                .hero-title[b-66tnbwhqzh] {
                    font-size: 2rem;
                }
        
                .hero-description[b-66tnbwhqzh] {
                    font-size: 1rem;
                }
        
                .hero-icon[b-66tnbwhqzh] {
                    width: 80px;
                    height: 80px;
                    border-radius: 20px;
                }
        
                .hero-icon .material-symbols-rounded[b-66tnbwhqzh] {
                    font-size: 40px;
                }

                .hero-icon .chain-mark[b-66tnbwhqzh] { width: 52px; height: 52px; }
                .hero-icon .tool-badge[b-66tnbwhqzh] { width: 28px; height: 28px; border-radius: 9px; right: -6px; bottom: -6px; }
                .hero-icon .tool-badge .material-symbols-rounded[b-66tnbwhqzh] { font-size: 16px; }
            }
    
            /* ============================================
               THEME OVERRIDES
               ============================================ */
    
            /* ☁️ Cloud Theme (default - light) */
            .tool-landing.theme-cloud .hero-title[b-66tnbwhqzh] { color: #1e293b; }
        .tool-landing.theme-cloud .hero-description[b-66tnbwhqzh] { color: #64748b; }
        .tool-landing.theme-cloud .hero-eyebrow[b-66tnbwhqzh] { color: #4f46e5; }
        .tool-landing.theme-cloud .hero-byline[b-66tnbwhqzh] { color: #64748b; }
        .tool-landing.theme-cloud .feature-pill[b-66tnbwhqzh] { background: rgba(99, 102, 241, 0.08); color: #4f46e5; }
        .tool-landing.theme-cloud .cta-subtext[b-66tnbwhqzh] { color: #64748b; }  /* was #94a3b8 = 2.45:1 */
        .tool-landing.theme-cloud .social-proof[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-cloud .related-intro[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-cloud .related-card[b-66tnbwhqzh] { background: white; }
        .tool-landing.theme-cloud .related-name[b-66tnbwhqzh] { color: #334155; }
        .tool-landing.theme-cloud .landing-footer[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-cloud .footer-links a[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-cloud .footer-links a:hover[b-66tnbwhqzh] { color: #64748b; }
    
        /* 🚀 Space Theme (dark) */
        .tool-landing.theme-space .hero-title[b-66tnbwhqzh] { color: #f1f5f9; text-shadow: 0 0 40px rgba(168, 85, 247, 0.5); }
        .tool-landing.theme-space .hero-description[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .feature-pill[b-66tnbwhqzh] { background: rgba(168, 85, 247, 0.2); color: #c4b5fd; }
        .tool-landing.theme-space .feature-pill .pill-check[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-space .cta-subtext[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .social-proof[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .related-intro[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .related-card[b-66tnbwhqzh] { background: rgba(30, 27, 75, 0.7); border: 1px solid rgba(168, 85, 247, 0.2); }
        .tool-landing.theme-space .related-name[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-space .landing-footer[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .footer-links a[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .footer-links a:hover[b-66tnbwhqzh] { color: #f1f5f9; }
    
        /* ❄️ Winter Theme */
        .tool-landing.theme-winter .hero-title[b-66tnbwhqzh] { color: #f0f9ff; text-shadow: 0 2px 20px rgba(186, 230, 253, 0.4); }
        .tool-landing.theme-winter .hero-description[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .feature-pill[b-66tnbwhqzh] { background: rgba(186, 230, 253, 0.15); color: #e0f2fe; }
        .tool-landing.theme-winter .feature-pill .pill-check[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-winter .cta-subtext[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .social-proof[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .related-intro[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .related-card[b-66tnbwhqzh] { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(186, 230, 253, 0.2); }
        .tool-landing.theme-winter .related-name[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-winter .landing-footer[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .footer-links a[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .footer-links a:hover[b-66tnbwhqzh] { color: #f0f9ff; }
    
        /* 🌿 Nature Theme */
        .tool-landing.theme-nature .hero-title[b-66tnbwhqzh] { color: #f0fdf4; text-shadow: 0 2px 20px rgba(5, 46, 22, 0.4); }
        .tool-landing.theme-nature .hero-description[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .feature-pill[b-66tnbwhqzh] { background: rgba(134, 239, 172, 0.15); color: #dcfce7; }
        .tool-landing.theme-nature .feature-pill .pill-check[b-66tnbwhqzh] { color: #dcfce7; }
        .tool-landing.theme-nature .cta-subtext[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .social-proof[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .related-intro[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .related-card[b-66tnbwhqzh] { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(134, 239, 172, 0.2); }
        .tool-landing.theme-nature .related-name[b-66tnbwhqzh] { color: #f0fdf4; }
        .tool-landing.theme-nature .landing-footer[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .footer-links a[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .footer-links a:hover[b-66tnbwhqzh] { color: #f0fdf4; }
    
        /* 🌊 Ocean Theme */
        .tool-landing.theme-ocean .hero-title[b-66tnbwhqzh] { color: #f0f9ff; text-shadow: 0 2px 20px rgba(7, 89, 133, 0.5); }
        .tool-landing.theme-ocean .hero-description[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-ocean .feature-pill[b-66tnbwhqzh] { background: rgba(125, 211, 252, 0.15); color: #e0f2fe; }
        .tool-landing.theme-ocean .feature-pill .pill-check[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-ocean .cta-subtext[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-ocean .social-proof[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-ocean .related-intro[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-ocean .related-card[b-66tnbwhqzh] { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(125, 211, 252, 0.25); }
        .tool-landing.theme-ocean .related-name[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-ocean .landing-footer[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-ocean .footer-links a[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-ocean .footer-links a:hover[b-66tnbwhqzh] { color: #f0f9ff; }

        /* ============================================
           CTA BUTTON THEME OVERRIDES
           ============================================ */

        /* ☁️ Cloud Theme - Default indigo gradient with white text */
        .tool-landing.theme-cloud .cta-button[b-66tnbwhqzh] {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
        }
        .tool-landing.theme-cloud .cta-button:hover[b-66tnbwhqzh] {
            box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
            color: white;
        }

        /* 🚀 Space Theme - Purple/violet, white bg for contrast */
        .tool-landing.theme-space .cta-button[b-66tnbwhqzh] {
            background: white;
            color: #a855f7;
            box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
        }
        .tool-landing.theme-space .cta-button:hover[b-66tnbwhqzh] {
            background: linear-gradient(135deg, #a855f7, #ec4899);
            color: white;
            box-shadow: 0 12px 32px rgba(168, 85, 247, 0.5);
        }

        /* ❄️ Winter Theme - Ice blue, white bg for contrast */
        .tool-landing.theme-winter .cta-button[b-66tnbwhqzh] {
            background: white;
            color: #0ea5e9;
            box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
        }
        .tool-landing.theme-winter .cta-button:hover[b-66tnbwhqzh] {
            background: linear-gradient(135deg, #38bdf8, #0ea5e9);
            color: white;
            box-shadow: 0 12px 32px rgba(56, 189, 248, 0.5);
        }

        /* 🌿 Nature Theme - Green gradient, white bg for contrast */
        .tool-landing.theme-nature .cta-button[b-66tnbwhqzh] {
            background: white;
            color: #16a34a;
            box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
        }
        .tool-landing.theme-nature .cta-button:hover[b-66tnbwhqzh] {
            background: linear-gradient(135deg, #22c55e, #16a34a);
            color: white;
            box-shadow: 0 12px 32px rgba(34, 197, 94, 0.5);
        }

        /* 🌊 Ocean Theme - Teal/cyan, white bg for contrast */
        .tool-landing.theme-ocean .cta-button[b-66tnbwhqzh] {
            background: white;
            color: #0891b2;
            box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
        }
        .tool-landing.theme-ocean .cta-button:hover[b-66tnbwhqzh] {
            background: linear-gradient(135deg, #06b6d4, #0891b2);
            color: white;
            box-shadow: 0 12px 32px rgba(6, 182, 212, 0.5);
        }

        /* ============================================
           SECONDARY CTA STYLES
           ============================================ */
        .secondary-cta[b-66tnbwhqzh] {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--theme-primary-ink, var(--theme-primary));
            font-size: 0.9rem;
            font-weight: 500;
            text-decoration: none;
            margin-top: 8px;
            transition: all 0.2s ease;
        }
        .secondary-cta svg[b-66tnbwhqzh] {
            width: 18px;
            height: 18px;
            transition: transform 0.2s ease;
        }
        .secondary-cta:hover[b-66tnbwhqzh] {
            color: var(--theme-primary-hover);
        }
        .secondary-cta:hover svg[b-66tnbwhqzh] {
            transform: translateY(2px);
        }

        /* Theme overrides for secondary CTA */
        .tool-landing.theme-space .secondary-cta[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-space .secondary-cta:hover[b-66tnbwhqzh] { color: #e9d5ff; }
        .tool-landing.theme-winter .secondary-cta[b-66tnbwhqzh] { color: #7dd3fc; }
        .tool-landing.theme-winter .secondary-cta:hover[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-nature .secondary-cta[b-66tnbwhqzh] { color: #86efac; }
        .tool-landing.theme-nature .secondary-cta:hover[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-ocean .secondary-cta[b-66tnbwhqzh] { color: #67e8f9; }
        .tool-landing.theme-ocean .secondary-cta:hover[b-66tnbwhqzh] { color: #a5f3fc; }

        /* ============================================
           SOCIAL PROOF SECTION STYLES
           ============================================ */
        .social-proof-section[b-66tnbwhqzh] {
            margin-top: 48px;
            padding: 24px 0;
        }
        .proof-stats[b-66tnbwhqzh] {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 32px;
            flex-wrap: wrap;
        }
        .stat-item[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .stat-number[b-66tnbwhqzh] {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1e293b;
        }
        .stat-label[b-66tnbwhqzh] {
            font-size: 0.8rem;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .stat-divider[b-66tnbwhqzh] {
            width: 1px;
            height: 40px;
            background: #e2e8f0;
        }

        /* Social proof theme overrides */
        .tool-landing.theme-space .stat-number[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-space .stat-label[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .stat-divider[b-66tnbwhqzh] { background: rgba(168, 85, 247, 0.3); }
        .tool-landing.theme-winter .stat-number[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-winter .stat-label[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .stat-divider[b-66tnbwhqzh] { background: rgba(186, 230, 253, 0.3); }
        .tool-landing.theme-nature .stat-number[b-66tnbwhqzh] { color: #f0fdf4; }
        .tool-landing.theme-nature .stat-label[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .stat-divider[b-66tnbwhqzh] { background: rgba(134, 239, 172, 0.3); }
        .tool-landing.theme-ocean .stat-number[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-ocean .stat-label[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-ocean .stat-divider[b-66tnbwhqzh] { background: rgba(125, 211, 252, 0.3); }

        /* ============================================
           PREVIEW SECTION STYLES
           ============================================ */
        .preview-section[b-66tnbwhqzh] {
            padding: 60px 24px;
            background: #f8fafc;
        }
        .preview-container[b-66tnbwhqzh] {
            max-width: 900px;
            margin: 0 auto;
        }
        .preview-header[b-66tnbwhqzh] {
            text-align: center;
            margin-bottom: 32px;
        }
        .preview-badge[b-66tnbwhqzh] {
            display: inline-block;
            padding: 4px 12px;
            background: rgba(var(--theme-primary-rgb), 0.1);
            color: var(--theme-primary-ink, var(--theme-primary));
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 12px;
        }
        .preview-title[b-66tnbwhqzh] {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1e293b;
            margin: 0;
        }
        .preview-mockup[b-66tnbwhqzh] {
            display: flex;
            justify-content: center;
        }
        .mockup-browser[b-66tnbwhqzh] {
            width: 100%;
            max-width: 700px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }
        .browser-header[b-66tnbwhqzh] {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: #f1f5f9;
            border-bottom: 1px solid #e2e8f0;
        }
        .browser-dots[b-66tnbwhqzh] {
            display: flex;
            gap: 6px;
        }
        .browser-dots .dot[b-66tnbwhqzh] {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        .browser-dots .dot.red[b-66tnbwhqzh] { background: #ef4444; }
        .browser-dots .dot.yellow[b-66tnbwhqzh] { background: #f59e0b; }
        .browser-dots .dot.green[b-66tnbwhqzh] { background: #22c55e; }
        .browser-url[b-66tnbwhqzh] {
            flex: 1;
            background: white;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            color: #64748b;
            font-family: monospace;
        }
        .browser-content[b-66tnbwhqzh] {
            padding: 24px;
            min-height: 300px;
        }

        /* Mockup content styles */
        .mockup-header-bar[b-66tnbwhqzh] {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e2e8f0;
        }
        .mockup-title[b-66tnbwhqzh] {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
        }
        .mockup-date[b-66tnbwhqzh], .mockup-badge[b-66tnbwhqzh] {
            font-size: 0.8rem;
            color: #64748b;
        }
        .mockup-badge[b-66tnbwhqzh] {
            background: #f1f5f9;
            padding: 4px 10px;
            border-radius: 12px;
        }
        .mockup-status[b-66tnbwhqzh] {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .mockup-status.paid[b-66tnbwhqzh] {
            background: #dcfce7;
            color: #16a34a;
        }

        /* Budget mockup */
        .mockup-summary[b-66tnbwhqzh] {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        .summary-card[b-66tnbwhqzh] {
            padding: 16px;
            border-radius: 10px;
            text-align: center;
        }
        .summary-card.green[b-66tnbwhqzh] { background: #f0fdf4; }
        .summary-card.blue[b-66tnbwhqzh] { background: #eff6ff; }
        .summary-card.purple[b-66tnbwhqzh] { background: #faf5ff; }
        .summary-label[b-66tnbwhqzh] {
            display: block;
            font-size: 0.75rem;
            color: #64748b;
            margin-bottom: 4px;
        }
        .summary-value[b-66tnbwhqzh] {
            font-size: 1.25rem;
            font-weight: 700;
            color: #1e293b;
        }
        .mockup-categories[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .category-row[b-66tnbwhqzh] {
            display: grid;
            grid-template-columns: 140px 1fr 100px;
            align-items: center;
            gap: 12px;
        }
        .category-name[b-66tnbwhqzh] {
            font-size: 0.85rem;
            color: #334155;
        }
        .progress-bar[b-66tnbwhqzh] {
            height: 8px;
            background: #f1f5f9;
            border-radius: 4px;
            overflow: hidden;
        }
        .progress-fill[b-66tnbwhqzh] {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        .category-amount[b-66tnbwhqzh] {
            font-size: 0.8rem;
            color: #64748b;
            text-align: right;
        }
        .category-row.warning .category-amount[b-66tnbwhqzh] {
            color: #f59e0b;
            font-weight: 600;
        }

        /* Tasks mockup */
        .task-list[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .task-item[b-66tnbwhqzh] {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: #f8fafc;
            border-radius: 8px;
        }
        .task-item.completed[b-66tnbwhqzh] {
            opacity: 0.6;
        }
        .task-item.completed .task-text[b-66tnbwhqzh] {
            text-decoration: line-through;
        }
        .task-check[b-66tnbwhqzh] {
            width: 20px;
            height: 20px;
            border: 2px solid #d1d5db;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            color: #22c55e;
        }
        .task-item.completed .task-check[b-66tnbwhqzh] {
            background: #22c55e;
            border-color: #22c55e;
            color: white;
        }
        .task-text[b-66tnbwhqzh] {
            flex: 1;
            font-size: 0.9rem;
            color: #334155;
        }
        .task-priority[b-66tnbwhqzh] {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        .task-priority.high[b-66tnbwhqzh] { background: #fee2e2; color: #dc2626; }
        .task-priority.medium[b-66tnbwhqzh] { background: #fef3c7; color: #d97706; }
        .task-priority.low[b-66tnbwhqzh] { background: #f0fdf4; color: #16a34a; }

        /* Invoice mockup */
        .invoice-details[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .invoice-row[b-66tnbwhqzh] {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f1f5f9;
        }
        .invoice-row .amount[b-66tnbwhqzh] {
            font-weight: 700;
            color: #1e293b;
            font-size: 1.1rem;
        }

        /* Generic mockup */
        .mockup-placeholder[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            color: #94a3b8;
        }
        .mockup-placeholder .material-symbols-rounded[b-66tnbwhqzh] {
            font-size: 48px;
            margin-bottom: 12px;
        }

        /* Preview section theme overrides */
        .tool-landing.theme-space .preview-section[b-66tnbwhqzh] { background: rgba(30, 27, 75, 0.5); }
        .tool-landing.theme-space .preview-badge[b-66tnbwhqzh] { background: rgba(168, 85, 247, 0.2); color: #c4b5fd; }
        .tool-landing.theme-space .preview-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-space .mockup-browser[b-66tnbwhqzh] { background: rgba(30, 41, 59, 0.95); }
        .tool-landing.theme-space .browser-header[b-66tnbwhqzh] { background: rgba(51, 65, 85, 0.8); border-color: rgba(168, 85, 247, 0.2); }
        .tool-landing.theme-space .browser-url[b-66tnbwhqzh] { background: rgba(15, 23, 42, 0.8); color: #94a3b8; }
        .tool-landing.theme-space .mockup-header-bar[b-66tnbwhqzh] { border-color: rgba(168, 85, 247, 0.2); }
        .tool-landing.theme-space .mockup-title[b-66tnbwhqzh] { color: #f1f5f9; }

        .tool-landing.theme-winter .preview-section[b-66tnbwhqzh] { background: rgba(12, 74, 110, 0.3); }
        .tool-landing.theme-winter .preview-badge[b-66tnbwhqzh] { background: rgba(186, 230, 253, 0.15); color: #e0f2fe; }
        .tool-landing.theme-winter .preview-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-winter .mockup-browser[b-66tnbwhqzh] { background: rgba(30, 41, 59, 0.95); }
        .tool-landing.theme-winter .browser-header[b-66tnbwhqzh] { background: rgba(51, 65, 85, 0.8); border-color: rgba(186, 230, 253, 0.2); }
        .tool-landing.theme-winter .browser-url[b-66tnbwhqzh] { background: rgba(15, 23, 42, 0.8); color: #bae6fd; }

        .tool-landing.theme-nature .preview-section[b-66tnbwhqzh] { background: rgba(5, 46, 22, 0.3); }
        .tool-landing.theme-nature .preview-badge[b-66tnbwhqzh] { background: rgba(134, 239, 172, 0.15); color: #dcfce7; }
        .tool-landing.theme-nature .preview-title[b-66tnbwhqzh] { color: #f0fdf4; }
        .tool-landing.theme-nature .mockup-browser[b-66tnbwhqzh] { background: rgba(30, 41, 59, 0.95); }
        .tool-landing.theme-nature .browser-header[b-66tnbwhqzh] { background: rgba(51, 65, 85, 0.8); border-color: rgba(134, 239, 172, 0.2); }
        .tool-landing.theme-nature .browser-url[b-66tnbwhqzh] { background: rgba(15, 23, 42, 0.8); color: #bbf7d0; }

        .tool-landing.theme-ocean .preview-section[b-66tnbwhqzh] { background: rgba(7, 89, 133, 0.3); }
        .tool-landing.theme-ocean .preview-badge[b-66tnbwhqzh] { background: rgba(125, 211, 252, 0.15); color: #e0f2fe; }
        .tool-landing.theme-ocean .preview-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-ocean .mockup-browser[b-66tnbwhqzh] { background: rgba(30, 41, 59, 0.95); }
        .tool-landing.theme-ocean .browser-header[b-66tnbwhqzh] { background: rgba(51, 65, 85, 0.8); border-color: rgba(125, 211, 252, 0.2); }
        .tool-landing.theme-ocean .browser-url[b-66tnbwhqzh] { background: rgba(15, 23, 42, 0.8); color: #bae6fd; }

        /* ============================================
           HOW IT WORKS SECTION STYLES
           ============================================ */
        .how-it-works-section[b-66tnbwhqzh] {
            padding: 60px 24px;
            text-align: center;
        }
        .section-title[b-66tnbwhqzh] {
            font-size: 1.75rem;
            font-weight: 700;
            color: #1e293b;
            margin: 0 0 40px;
        }
        .steps-grid[b-66tnbwhqzh] {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            max-width: 900px;
            margin: 0 auto;
        }
        .step-card[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 24px;
        }
        .step-number[b-66tnbwhqzh] {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            margin-bottom: 16px;
        }
        .step-icon[b-66tnbwhqzh] {
            width: 48px;
            height: 48px;
            color: var(--theme-primary-ink, var(--theme-primary));
            margin-bottom: 16px;
        }
        .step-icon svg[b-66tnbwhqzh] {
            width: 100%;
            height: 100%;
        }
        .step-title[b-66tnbwhqzh] {
            font-size: 1.1rem;
            font-weight: 600;
            color: #1e293b;
            margin: 0 0 8px;
        }
        .step-description[b-66tnbwhqzh] {
            font-size: 0.9rem;
            color: #64748b;
            margin: 0;
            line-height: 1.5;
        }

        /* How it works theme overrides */
        .tool-landing.theme-space .section-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-space .step-number[b-66tnbwhqzh] { background: linear-gradient(135deg, #a855f7, #ec4899); }
        .tool-landing.theme-space .step-icon[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-space .step-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-space .step-description[b-66tnbwhqzh] { color: #94a3b8; }

        .tool-landing.theme-winter .section-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-winter .step-number[b-66tnbwhqzh] { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
        .tool-landing.theme-winter .step-icon[b-66tnbwhqzh] { color: #7dd3fc; }
        .tool-landing.theme-winter .step-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-winter .step-description[b-66tnbwhqzh] { color: #bae6fd; }

        .tool-landing.theme-nature .section-title[b-66tnbwhqzh] { color: #f0fdf4; }
        .tool-landing.theme-nature .step-number[b-66tnbwhqzh] { background: linear-gradient(135deg, #22c55e, #16a34a); }
        .tool-landing.theme-nature .step-icon[b-66tnbwhqzh] { color: #86efac; }
        .tool-landing.theme-nature .step-title[b-66tnbwhqzh] { color: #f0fdf4; }
        .tool-landing.theme-nature .step-description[b-66tnbwhqzh] { color: #bbf7d0; }

        .tool-landing.theme-ocean .section-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-ocean .step-number[b-66tnbwhqzh] { background: linear-gradient(135deg, #06b6d4, #0891b2); }
        .tool-landing.theme-ocean .step-icon[b-66tnbwhqzh] { color: #67e8f9; }
        .tool-landing.theme-ocean .step-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-ocean .step-description[b-66tnbwhqzh] { color: #bae6fd; }

        /* ============================================
           TESTIMONIAL SECTION STYLES
           ============================================ */
        .testimonial-section[b-66tnbwhqzh] {
            padding: 40px 24px 60px;
        }
        .testimonial-card[b-66tnbwhqzh] {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
            padding: 32px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        }
        .quote-icon[b-66tnbwhqzh] {
            width: 32px;
            height: 32px;
            color: #e2e8f0;
            margin-bottom: 16px;
        }
        .testimonial-text[b-66tnbwhqzh] {
            font-size: 1.1rem;
            color: #334155;
            line-height: 1.7;
            margin: 0 0 24px;
            font-style: italic;
        }
        .testimonial-author[b-66tnbwhqzh] {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        .author-avatar[b-66tnbwhqzh] {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
        }
        .author-info[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
        .author-name[b-66tnbwhqzh] {
            font-weight: 600;
            color: #1e293b;
            font-size: 0.95rem;
        }
        .author-role[b-66tnbwhqzh] {
            color: #64748b;
            font-size: 0.8rem;
        }

        /* Testimonial theme overrides */
        .tool-landing.theme-space .testimonial-card[b-66tnbwhqzh] { background: rgba(30, 27, 75, 0.7); border: 1px solid rgba(168, 85, 247, 0.2); }
        .tool-landing.theme-space .quote-icon[b-66tnbwhqzh] { color: rgba(168, 85, 247, 0.4); }
        .tool-landing.theme-space .testimonial-text[b-66tnbwhqzh] { color: #e2e8f0; }
        .tool-landing.theme-space .author-name[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-space .author-role[b-66tnbwhqzh] { color: #94a3b8; }

        .tool-landing.theme-winter .testimonial-card[b-66tnbwhqzh] { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(186, 230, 253, 0.2); }
        .tool-landing.theme-winter .quote-icon[b-66tnbwhqzh] { color: rgba(186, 230, 253, 0.4); }
        .tool-landing.theme-winter .testimonial-text[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-winter .author-name[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-winter .author-role[b-66tnbwhqzh] { color: #bae6fd; }

        .tool-landing.theme-nature .testimonial-card[b-66tnbwhqzh] { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(134, 239, 172, 0.2); }
        .tool-landing.theme-nature .quote-icon[b-66tnbwhqzh] { color: rgba(134, 239, 172, 0.4); }
        .tool-landing.theme-nature .testimonial-text[b-66tnbwhqzh] { color: #dcfce7; }
        .tool-landing.theme-nature .author-name[b-66tnbwhqzh] { color: #f0fdf4; }
        .tool-landing.theme-nature .author-role[b-66tnbwhqzh] { color: #bbf7d0; }

        .tool-landing.theme-ocean .testimonial-card[b-66tnbwhqzh] { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(125, 211, 252, 0.25); }
        .tool-landing.theme-ocean .quote-icon[b-66tnbwhqzh] { color: rgba(125, 211, 252, 0.4); }
        .tool-landing.theme-ocean .testimonial-text[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-ocean .author-name[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-ocean .author-role[b-66tnbwhqzh] { color: #bae6fd; }

        /* ============================================
           FINAL CTA SECTION STYLES
           ============================================ */
        .final-cta-section[b-66tnbwhqzh] {
            padding: 60px 24px;
            text-align: center;
            background: linear-gradient(180deg, transparent, rgba(var(--theme-primary-rgb), 0.05));
        }
        .final-cta-title[b-66tnbwhqzh] {
            font-size: 2rem;
            font-weight: 700;
            color: #1e293b;
            margin: 0 0 12px;
        }
        .final-cta-subtitle[b-66tnbwhqzh] {
            font-size: 1.1rem;
            color: #64748b;
            margin: 0 0 32px;
        }
        .cta-button.large[b-66tnbwhqzh] {
            padding: 18px 48px;
            font-size: 1.15rem;
        }
        .final-cta-note[b-66tnbwhqzh] {
            margin-top: 16px;
            font-size: 0.85rem;
            color: #94a3b8;
        }

        /* Final CTA theme overrides */
        .tool-landing.theme-space .final-cta-section[b-66tnbwhqzh] { background: linear-gradient(180deg, transparent, rgba(168, 85, 247, 0.1)); }
        .tool-landing.theme-space .final-cta-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-space .final-cta-subtitle[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-space .final-cta-note[b-66tnbwhqzh] { color: #94a3b8; }

        .tool-landing.theme-winter .final-cta-section[b-66tnbwhqzh] { background: linear-gradient(180deg, transparent, rgba(186, 230, 253, 0.1)); }
        .tool-landing.theme-winter .final-cta-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-winter .final-cta-subtitle[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-winter .final-cta-note[b-66tnbwhqzh] { color: #bae6fd; }

        .tool-landing.theme-nature .final-cta-section[b-66tnbwhqzh] { background: linear-gradient(180deg, transparent, rgba(134, 239, 172, 0.1)); }
        .tool-landing.theme-nature .final-cta-title[b-66tnbwhqzh] { color: #f0fdf4; }
        .tool-landing.theme-nature .final-cta-subtitle[b-66tnbwhqzh] { color: #bbf7d0; }
        .tool-landing.theme-nature .final-cta-note[b-66tnbwhqzh] { color: #bbf7d0; }

        .tool-landing.theme-ocean .final-cta-section[b-66tnbwhqzh] { background: linear-gradient(180deg, transparent, rgba(125, 211, 252, 0.1)); }
        .tool-landing.theme-ocean .final-cta-title[b-66tnbwhqzh] { color: #f0f9ff; }
        .tool-landing.theme-ocean .final-cta-subtitle[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-ocean .final-cta-note[b-66tnbwhqzh] { color: #bae6fd; }

        /* Memory Reel theme overrides — pale prose against the dark
           backgrounds. Title stays subtle (eyebrow-style); body needs more
           lift so the specific examples land. */
        .tool-landing.theme-space .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-winter .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-nature .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-ocean .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-mystic .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-tron .memory-reel-title[b-66tnbwhqzh] { color: #94a3b8; }

        .tool-landing.theme-space .memory-reel-prose[b-66tnbwhqzh] { color: #cbd5e1; }
        .tool-landing.theme-winter .memory-reel-prose[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-nature .memory-reel-prose[b-66tnbwhqzh] { color: #dcfce7; }
        .tool-landing.theme-ocean .memory-reel-prose[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-mystic .memory-reel-prose[b-66tnbwhqzh] { color: #ede9fe; }
        .tool-landing.theme-tron .memory-reel-prose[b-66tnbwhqzh] { color: #cffafe; }

        /* FAQ theme overrides (SEO-8) — mirror the memory-reel treatment:
           subtle eyebrow title, lifted question/answer text, and a faint
           card so the items read on dark backgrounds. */
        .tool-landing.theme-space .faq-title[b-66tnbwhqzh],
        .tool-landing.theme-winter .faq-title[b-66tnbwhqzh],
        .tool-landing.theme-nature .faq-title[b-66tnbwhqzh],
        .tool-landing.theme-ocean .faq-title[b-66tnbwhqzh],
        .tool-landing.theme-mystic .faq-title[b-66tnbwhqzh],
        .tool-landing.theme-tron .faq-title[b-66tnbwhqzh] { color: #94a3b8; }

        .tool-landing.theme-space .faq-item[b-66tnbwhqzh],
        .tool-landing.theme-winter .faq-item[b-66tnbwhqzh],
        .tool-landing.theme-nature .faq-item[b-66tnbwhqzh],
        .tool-landing.theme-ocean .faq-item[b-66tnbwhqzh],
        .tool-landing.theme-mystic .faq-item[b-66tnbwhqzh],
        .tool-landing.theme-tron .faq-item[b-66tnbwhqzh] {
            border-color: rgba(148, 163, 184, 0.28);
            background: rgba(148, 163, 184, 0.10);
        }

        .tool-landing.theme-space .faq-question[b-66tnbwhqzh],
        .tool-landing.theme-winter .faq-question[b-66tnbwhqzh],
        .tool-landing.theme-nature .faq-question[b-66tnbwhqzh],
        .tool-landing.theme-ocean .faq-question[b-66tnbwhqzh],
        .tool-landing.theme-mystic .faq-question[b-66tnbwhqzh],
        .tool-landing.theme-tron .faq-question[b-66tnbwhqzh] { color: #f1f5f9; }

        .tool-landing.theme-space .faq-answer[b-66tnbwhqzh] { color: #cbd5e1; }
        .tool-landing.theme-winter .faq-answer[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-nature .faq-answer[b-66tnbwhqzh] { color: #dcfce7; }
        .tool-landing.theme-ocean .faq-answer[b-66tnbwhqzh] { color: #e0f2fe; }
        .tool-landing.theme-mystic .faq-answer[b-66tnbwhqzh] { color: #ede9fe; }
        .tool-landing.theme-tron .faq-answer[b-66tnbwhqzh] { color: #cffafe; }

        /* ============================================
           RESPONSIVE STYLES
           ============================================ */
        @media (max-width: 768px) {
            .steps-grid[b-66tnbwhqzh] {
                grid-template-columns: 1fr;
                gap: 24px;
            }
            .mockup-summary[b-66tnbwhqzh] {
                grid-template-columns: 1fr;
            }
            .category-row[b-66tnbwhqzh] {
                grid-template-columns: 1fr;
                gap: 8px;
            }
            .category-amount[b-66tnbwhqzh] {
                text-align: left;
            }
            .proof-stats[b-66tnbwhqzh] {
                gap: 24px;
            }
            .stat-divider[b-66tnbwhqzh] {
                display: none;
            }
            .final-cta-title[b-66tnbwhqzh] {
                font-size: 1.5rem;
            }
        }

        /* ============================================
           VIDEO PLAYER STYLES
           ============================================ */
        .browser-content.has-video[b-66tnbwhqzh] {
            padding: 0;
            min-height: auto;
            position: relative;
            overflow: hidden;
        }
        
        .video-wrapper[b-66tnbwhqzh] {
            position: relative;
            width: 100%;
            background: #0f172a;
        }
        
        .demo-video[b-66tnbwhqzh] {
            width: 100%;
            height: auto;
            display: block;
            max-height: 400px;
            object-fit: cover;
        }

        /* LAND-TOUR-3 (2026-09-05): a narrated tour is a whole frame - the app header at
           the top and the caption bar + transport at the bottom are the point. The 400px
           cover-crop that suited the silent loops was taking ~30px off each edge (half the
           wordmark, the playback controls). Narrated clips show at their own height. */
        .demo-video.narrated[b-66tnbwhqzh] {
            max-height: none;
            object-fit: contain;
        }
        
        .video-controls[b-66tnbwhqzh] {
            display: flex;
            gap: 8px;
            align-items: center;
            position: absolute;
            /* LAND-TOUR-1 (2026-09-05): moved from bottom-left to top-right. A recorded
               tour carries the app's own reading bar along the bottom of the frame; a
               pill down there sat on the caption text. */
            top: 16px;
            right: 16px;
            z-index: 10;
        }
        
        .sound-toggle[b-66tnbwhqzh] {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            color: white;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .sound-toggle:hover[b-66tnbwhqzh] {
            background: rgba(0, 0, 0, 0.85);
            border-color: rgba(255, 255, 255, 0.4);
            transform: scale(1.02);
        }
        
        .sound-toggle svg[b-66tnbwhqzh] {
            width: 18px;
            height: 18px;
        }
        
        .sound-toggle.muted[b-66tnbwhqzh] {
            animation: pulseHint-b-66tnbwhqzh 2s ease-in-out infinite;
        }
        
        .sound-toggle.unmuted[b-66tnbwhqzh] {
            background: rgba(var(--theme-primary-rgb), 0.9);
            border-color: rgba(var(--theme-primary-rgb), 0.5);
        }
        
        @keyframes pulseHint-b-66tnbwhqzh {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb), 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(var(--theme-primary-rgb), 0); }
        }
        
        .video-loading[b-66tnbwhqzh] {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15, 23, 42, 0.8);
        }
        
        .loading-spinner[b-66tnbwhqzh] {
            width: 40px;
            height: 40px;
            border: 3px solid rgba(255, 255, 255, 0.2);
            border-top-color: var(--theme-primary);
            border-radius: 50%;
            animation: spin-b-66tnbwhqzh 1s linear infinite;
        }
        
        @keyframes spin-b-66tnbwhqzh {
            to { transform: rotate(360deg); }
        }

        /* TL-V-6 (AUD-LAND-4): click-to-play fallback when autoplay is blocked.
           Hidden by default; JS adds .autoplay-blocked to .video-wrapper when
           video.play() rejects on a cold load (Edge "Limit" policy, private
           windows). Centered over the poster frame; theme-primary accent ring
           matches the loading spinner's accent treatment. */
        .video-play-fallback[b-66tnbwhqzh] {
            display: none;
        }

        .video-wrapper.autoplay-blocked .video-play-fallback[b-66tnbwhqzh] {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 72px;
            height: 72px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.35);
            background: rgba(15, 23, 42, 0.72);
            color: #fff;
            cursor: pointer;
            transition: background 0.15s ease, transform 0.15s ease;
            animation: playPulse-b-66tnbwhqzh 2.2s ease-in-out infinite;
        }

        .video-wrapper.autoplay-blocked .video-play-fallback:hover[b-66tnbwhqzh] {
            background: rgba(15, 23, 42, 0.9);
            transform: translate(-50%, -50%) scale(1.06);
        }

        .video-wrapper.autoplay-blocked .video-play-fallback svg[b-66tnbwhqzh] {
            margin-left: 4px; /* optically center the triangle */
        }

        @keyframes playPulse-b-66tnbwhqzh {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb), 0.45); }
            50% { box-shadow: 0 0 0 10px rgba(var(--theme-primary-rgb), 0); }
        }

        .preview-note[b-66tnbwhqzh] {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 16px;
            font-size: 0.85rem;
            color: #94a3b8;
        }
        
        .preview-note svg[b-66tnbwhqzh] {
            opacity: 0.6;
        }

        /* ============================================
           START-NAV-1: prev/next tool sequence nav
           TL-SEQ-POS-1 (2026-09-13): moved out of the
           demo section to below the related row, so it
           needs its own container padding — .preview-
           section used to supply it. Mirrors
           .related-section, its new neighbour.
           ============================================ */
        .tool-seq-section[b-66tnbwhqzh] {
            padding: 0 24px 32px;
        }

        .tool-seq-nav[b-66tnbwhqzh] {
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 12px;
            margin-top: 24px;
        }

        .tool-seq-link[b-66tnbwhqzh] {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: 10px 16px;
            border: 1px solid rgba(var(--theme-primary-rgb), 0.25);
            border-radius: 10px;
            background: rgba(var(--theme-primary-rgb), 0.06);
            text-decoration: none;
            transition: background 0.15s ease, border-color 0.15s ease;
            max-width: 42%;
        }

        .tool-seq-link:hover[b-66tnbwhqzh] {
            background: rgba(var(--theme-primary-rgb), 0.12);
            border-color: rgba(var(--theme-primary-rgb), 0.45);
        }

        .tool-seq-prev[b-66tnbwhqzh] { text-align: left; }
        /* No margin-left:auto here — with justify-content:space-between it
           would absorb the free space and shove "All tools" against the
           Previous pill instead of centering it (caught in first QA). */
        .tool-seq-next[b-66tnbwhqzh] { text-align: right; }

        .tool-seq-dir[b-66tnbwhqzh] {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: var(--theme-primary-ink, var(--theme-primary));
        }

        .tool-seq-name[b-66tnbwhqzh] {
            font-size: 0.95rem;
            font-weight: 600;
            color: #0f172a;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .tool-seq-all[b-66tnbwhqzh] {
            align-self: center;
            font-size: 0.85rem;
            font-weight: 500;
            color: #64748b;
            text-decoration: none;
        }

        .tool-seq-all:hover[b-66tnbwhqzh] { color: var(--theme-primary-ink, var(--theme-primary)); }

        /* Dark-theme legibility */
        .tool-landing.theme-space .tool-seq-name[b-66tnbwhqzh],
        .tool-landing.theme-winter .tool-seq-name[b-66tnbwhqzh],
        .tool-landing.theme-nature .tool-seq-name[b-66tnbwhqzh],
        .tool-landing.theme-ocean .tool-seq-name[b-66tnbwhqzh],
        .tool-landing.theme-mystic .tool-seq-name[b-66tnbwhqzh],
        .tool-landing.theme-tron .tool-seq-name[b-66tnbwhqzh] {
            color: #f1f5f9;
        }

        .tool-landing.theme-space .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-winter .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-nature .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-ocean .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-mystic .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-tron .tool-seq-all[b-66tnbwhqzh] {
            color: #94a3b8;
        }

        @media (max-width: 640px) {
            .tool-seq-nav[b-66tnbwhqzh] {
                flex-direction: column;
                align-items: stretch;
            }
            .tool-seq-link[b-66tnbwhqzh] { max-width: none; }
            .tool-seq-next[b-66tnbwhqzh] { margin-left: 0; }
            .tool-seq-all[b-66tnbwhqzh] { order: 3; text-align: center; padding-top: 4px; }
        }

        /* Video theme overrides */
        .tool-landing.theme-space .sound-toggle.unmuted[b-66tnbwhqzh] { background: rgba(168, 85, 247, 0.9); border-color: rgba(168, 85, 247, 0.5); }
        .tool-landing.theme-winter .sound-toggle.unmuted[b-66tnbwhqzh] { background: rgba(56, 189, 248, 0.9); border-color: rgba(56, 189, 248, 0.5); }
        .tool-landing.theme-nature .sound-toggle.unmuted[b-66tnbwhqzh] { background: rgba(34, 197, 94, 0.9); border-color: rgba(34, 197, 94, 0.5); }
        .tool-landing.theme-ocean .sound-toggle.unmuted[b-66tnbwhqzh] { background: rgba(6, 182, 212, 0.9); border-color: rgba(6, 182, 212, 0.5); }
        
        .tool-landing.theme-space .preview-note[b-66tnbwhqzh],
        .tool-landing.theme-winter .preview-note[b-66tnbwhqzh],
        .tool-landing.theme-nature .preview-note[b-66tnbwhqzh],
        .tool-landing.theme-ocean .preview-note[b-66tnbwhqzh] { color: rgba(255, 255, 255, 0.6); }

        /* Mobile video adjustments */
        @media (max-width: 768px) {
            .sound-toggle span[b-66tnbwhqzh] {
                display: none;
            }
            .sound-toggle[b-66tnbwhqzh] {
                padding: 10px;
                border-radius: 50%;
            }
            .demo-video[b-66tnbwhqzh] {
                max-height: 250px;
            }
        }

        /* ============================================
           💼 EXECUTIVE THEME - Professional overrides
           Slate/charcoal, no indigo/purple accents
           ============================================ */
        .tool-landing.theme-executive[b-66tnbwhqzh] {
            background: linear-gradient(180deg, #f5f5f5 0%, #efefef 35%, #e8e8e8 65%, #e0e0e0 100%);
        }

        /* CTA button - solid charcoal */
        .tool-landing.theme-executive .cta-button[b-66tnbwhqzh] {
            background: #1e293b;
            color: white;
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
        }
        .tool-landing.theme-executive .cta-button:hover[b-66tnbwhqzh] {
            background: #0f172a;
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
            color: white;
        }

        /* Secondary CTA */
        .tool-landing.theme-executive .secondary-cta[b-66tnbwhqzh] { color: #334155; }
        .tool-landing.theme-executive .secondary-cta:hover[b-66tnbwhqzh] { color: #0f172a; }

        /* Preview badge */
        .tool-landing.theme-executive .preview-badge[b-66tnbwhqzh] {
            background: rgba(51, 65, 85, 0.08);
            color: #334155;
        }

        /* Preview section */
        .tool-landing.theme-executive .preview-section[b-66tnbwhqzh] {
            background: #f1f5f9;
        }

        /* Step numbers */
        .tool-landing.theme-executive .step-number[b-66tnbwhqzh] {
            background: #1e293b;
        }

        /* Step icon */
        .tool-landing.theme-executive .step-icon[b-66tnbwhqzh] {
            color: #475569;
        }

        /* Loading spinner */
        .tool-landing.theme-executive .loading-spinner[b-66tnbwhqzh] {
            border-top-color: #334155;
        }

        /* Sound toggle */
        .tool-landing.theme-executive .sound-toggle.unmuted[b-66tnbwhqzh] {
            background: rgba(30, 41, 59, 0.9);
            border-color: rgba(30, 41, 59, 0.5);
        }

        /* ============================================
           🌑 SLATE THEME - dark professional overrides
           FOCUS-SLATE-1 (2026-09-28): AppTheme.ExecutiveDark / .theme-executivedark.
           Every dark theme on this page has its own per-section overrides; Slate had
           none, so it fell through to the LIGHT base rules — #1e293b hero title on a
           dark page (the tool name invisible), dim description and pills, and a white
           #f8fafc preview band cutting the page in half. Dark half of the Executive
           block above: flat slate greys, no color tint, no glow. The mockup browser
           is deliberately left light — it reads as an app screenshot on the dark band.
           ============================================ */
        .tool-landing.theme-executivedark[b-66tnbwhqzh] {
            background: linear-gradient(180deg, #0f172a 0%, #131c2e 35%, #172033 65%, #1a2438 100%);
        }

        /* Hero */
        .tool-landing.theme-executivedark .hero-title[b-66tnbwhqzh] { color: #f8fafc; }
        .tool-landing.theme-executivedark .hero-description[b-66tnbwhqzh] { color: #cbd5e1; }
        .tool-landing.theme-executivedark .hero-eyebrow[b-66tnbwhqzh] { color: #cbd5e1; }
        .tool-landing.theme-executivedark .hero-byline[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .feature-pill[b-66tnbwhqzh] {
            background: rgba(148, 163, 184, 0.12);
            border-color: rgba(148, 163, 184, 0.22);
            color: #e2e8f0;
        }
        .tool-landing.theme-executivedark .feature-pill .pill-check[b-66tnbwhqzh] { color: #cbd5e1; }

        /* CTA - light on dark, the one bright thing on the page */
        .tool-landing.theme-executivedark .cta-button[b-66tnbwhqzh] {
            background: #e2e8f0;
            color: #0f172a;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        }
        .tool-landing.theme-executivedark .cta-button:hover[b-66tnbwhqzh] {
            background: #f8fafc;
            color: #0f172a;
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
        }
        .tool-landing.theme-executivedark .cta-subtext[b-66tnbwhqzh],
        .tool-landing.theme-executivedark .social-proof[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .secondary-cta[b-66tnbwhqzh] { color: #cbd5e1; }
        .tool-landing.theme-executivedark .secondary-cta:hover[b-66tnbwhqzh] { color: #f8fafc; }

        /* Social proof stats */
        .tool-landing.theme-executivedark .stat-number[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-executivedark .stat-label[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .stat-divider[b-66tnbwhqzh] { background: rgba(148, 163, 184, 0.25); }

        /* Preview / demo band */
        .tool-landing.theme-executivedark .preview-section[b-66tnbwhqzh] { background: rgba(30, 41, 59, 0.6); }
        .tool-landing.theme-executivedark .preview-badge[b-66tnbwhqzh] {
            background: rgba(148, 163, 184, 0.14);
            color: #cbd5e1;
        }
        .tool-landing.theme-executivedark .preview-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-executivedark .preview-note[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .sound-toggle.unmuted[b-66tnbwhqzh] {
            background: rgba(71, 85, 105, 0.9);
            border-color: rgba(148, 163, 184, 0.5);
        }
        .tool-landing.theme-executivedark .loading-spinner[b-66tnbwhqzh] { border-top-color: #cbd5e1; }

        /* How it works */
        .tool-landing.theme-executivedark .section-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-executivedark .step-number[b-66tnbwhqzh] { background: #475569; }
        .tool-landing.theme-executivedark .step-icon[b-66tnbwhqzh] { color: #cbd5e1; }
        .tool-landing.theme-executivedark .step-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-executivedark .step-description[b-66tnbwhqzh] { color: #94a3b8; }

        /* Testimonial */
        .tool-landing.theme-executivedark .testimonial-card[b-66tnbwhqzh] {
            background: #1e293b;
            border: 1px solid rgba(148, 163, 184, 0.16);
        }
        .tool-landing.theme-executivedark .quote-icon[b-66tnbwhqzh] { color: rgba(148, 163, 184, 0.4); }
        .tool-landing.theme-executivedark .testimonial-text[b-66tnbwhqzh] { color: #e2e8f0; }
        .tool-landing.theme-executivedark .author-name[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-executivedark .author-role[b-66tnbwhqzh] { color: #94a3b8; }

        /* Memory reel + FAQ */
        .tool-landing.theme-executivedark .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-executivedark .faq-title[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .memory-reel-prose[b-66tnbwhqzh],
        .tool-landing.theme-executivedark .faq-answer[b-66tnbwhqzh] { color: #cbd5e1; }
        .tool-landing.theme-executivedark .faq-item[b-66tnbwhqzh] {
            border-color: rgba(148, 163, 184, 0.22);
            background: rgba(148, 163, 184, 0.08);
        }
        .tool-landing.theme-executivedark .faq-question[b-66tnbwhqzh] { color: #f1f5f9; }

        /* Related tools + prev/next sequence */
        .tool-landing.theme-executivedark .related-intro[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .related-card[b-66tnbwhqzh] {
            background: #1e293b;
            border: 1px solid rgba(148, 163, 184, 0.16);
        }
        .tool-landing.theme-executivedark .related-card:hover[b-66tnbwhqzh] { border-color: rgba(148, 163, 184, 0.35); }
        .tool-landing.theme-executivedark .related-name[b-66tnbwhqzh],
        .tool-landing.theme-executivedark .tool-seq-name[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-executivedark .tool-seq-all[b-66tnbwhqzh] { color: #94a3b8; }
        /* --theme-primary is #475569 in Slate — the PREVIOUS/NEXT labels and pill borders
           painted in it all but vanished on the dark page. */
        .tool-landing.theme-executivedark .tool-seq-dir[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .tool-seq-link[b-66tnbwhqzh] {
            background: rgba(148, 163, 184, 0.06);
            border-color: rgba(148, 163, 184, 0.22);
        }
        .tool-landing.theme-executivedark .tool-seq-link:hover[b-66tnbwhqzh] {
            background: rgba(148, 163, 184, 0.12);
            border-color: rgba(148, 163, 184, 0.4);
        }

        /* Final CTA + footer */
        .tool-landing.theme-executivedark .final-cta-section[b-66tnbwhqzh] { background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.06)); }
        .tool-landing.theme-executivedark .final-cta-title[b-66tnbwhqzh] { color: #f1f5f9; }
        .tool-landing.theme-executivedark .final-cta-subtitle[b-66tnbwhqzh],
        .tool-landing.theme-executivedark .final-cta-note[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .landing-footer[b-66tnbwhqzh],
        .tool-landing.theme-executivedark .footer-links a[b-66tnbwhqzh] { color: #94a3b8; }
        .tool-landing.theme-executivedark .footer-links a:hover[b-66tnbwhqzh] { color: #f1f5f9; }

        /* ============================================
           🔮 MYSTIC THEME - dark overrides (FOCUS-SLATE-1 follow-up, 2026-09-28)
           Same gap as Slate: this theme had no hero/preview/steps/testimonial/
           related/footer overrides, so it inherited the LIGHT base — #1e293b
           tool name on the dark page, dim description, white #f8fafc demo band.
           Page background comes from the theme's --theme-page-bg; CTA + pills
           keep the theme's own primary. Mockup browser stays light on purpose.
           ============================================ */
        .tool-landing.theme-mystic .hero-title[b-66tnbwhqzh] { color: #faf5ff; text-shadow: 0 0 40px rgba(249, 115, 22, 0.35); }
        .tool-landing.theme-mystic .hero-description[b-66tnbwhqzh] { color: #e9d5ff; }
        .tool-landing.theme-mystic .hero-eyebrow[b-66tnbwhqzh] { color: #fdba74; }
        .tool-landing.theme-mystic .hero-byline[b-66tnbwhqzh],
        .tool-landing.theme-mystic .cta-subtext[b-66tnbwhqzh],
        .tool-landing.theme-mystic .social-proof[b-66tnbwhqzh] { color: #c4b5fd; }

        .tool-landing.theme-mystic .secondary-cta[b-66tnbwhqzh] { color: #fdba74; }
        .tool-landing.theme-mystic .secondary-cta:hover[b-66tnbwhqzh] { color: #faf5ff; }

        .tool-landing.theme-mystic .stat-number[b-66tnbwhqzh] { color: #faf5ff; }
        .tool-landing.theme-mystic .stat-label[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-mystic .stat-divider[b-66tnbwhqzh] { background: rgba(124, 58, 237, 0.35); }

        .tool-landing.theme-mystic .preview-section[b-66tnbwhqzh] { background: rgba(45, 27, 78, 0.55); }
        .tool-landing.theme-mystic .preview-badge[b-66tnbwhqzh] { background: rgba(249, 115, 22, 0.12); color: #fdba74; }
        .tool-landing.theme-mystic .preview-title[b-66tnbwhqzh] { color: #faf5ff; }
        .tool-landing.theme-mystic .preview-note[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-mystic .sound-toggle.unmuted[b-66tnbwhqzh] { background: rgba(249, 115, 22, 0.9); border-color: rgba(124, 58, 237, 0.35); }

        .tool-landing.theme-mystic .section-title[b-66tnbwhqzh] { color: #faf5ff; }
        .tool-landing.theme-mystic .step-icon[b-66tnbwhqzh] { color: #fdba74; }
        .tool-landing.theme-mystic .step-title[b-66tnbwhqzh] { color: #faf5ff; }
        .tool-landing.theme-mystic .step-description[b-66tnbwhqzh] { color: #c4b5fd; }

        .tool-landing.theme-mystic .testimonial-card[b-66tnbwhqzh] { background: rgba(45, 27, 78, 0.75); border: 1px solid rgba(124, 58, 237, 0.35); }
        .tool-landing.theme-mystic .quote-icon[b-66tnbwhqzh] { color: rgba(124, 58, 237, 0.35); }
        .tool-landing.theme-mystic .testimonial-text[b-66tnbwhqzh] { color: #e9d5ff; }
        .tool-landing.theme-mystic .author-name[b-66tnbwhqzh] { color: #faf5ff; }
        .tool-landing.theme-mystic .author-role[b-66tnbwhqzh] { color: #c4b5fd; }

        .tool-landing.theme-mystic .related-intro[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-mystic .related-card[b-66tnbwhqzh] { background: rgba(45, 27, 78, 0.75); border: 1px solid rgba(124, 58, 237, 0.35); }
        .tool-landing.theme-mystic .related-name[b-66tnbwhqzh] { color: #faf5ff; }

        .tool-landing.theme-mystic .final-cta-section[b-66tnbwhqzh] { background: linear-gradient(180deg, transparent, rgba(249, 115, 22, 0.12)); }
        .tool-landing.theme-mystic .final-cta-title[b-66tnbwhqzh] { color: #faf5ff; }
        .tool-landing.theme-mystic .final-cta-subtitle[b-66tnbwhqzh],
        .tool-landing.theme-mystic .final-cta-note[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-mystic .landing-footer[b-66tnbwhqzh],
        .tool-landing.theme-mystic .footer-links a[b-66tnbwhqzh] { color: #c4b5fd; }
        .tool-landing.theme-mystic .footer-links a:hover[b-66tnbwhqzh] { color: #faf5ff; }


        /* ============================================
           🟦 GRID THEME (internal: theme-tron) - dark overrides (FOCUS-SLATE-1 follow-up, 2026-09-28)
           Same gap as Slate: this theme had no hero/preview/steps/testimonial/
           related/footer overrides, so it inherited the LIGHT base — #1e293b
           tool name on the dark page, dim description, white #f8fafc demo band.
           Page background comes from the theme's --theme-page-bg; CTA + pills
           keep the theme's own primary. Mockup browser stays light on purpose.
           ============================================ */
        .tool-landing.theme-tron .hero-title[b-66tnbwhqzh] { color: #e0f7ff; text-shadow: 0 0 40px rgba(0, 212, 255, 0.35); }
        .tool-landing.theme-tron .hero-description[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-tron .hero-eyebrow[b-66tnbwhqzh] { color: #00d4ff; }
        .tool-landing.theme-tron .hero-byline[b-66tnbwhqzh],
        .tool-landing.theme-tron .cta-subtext[b-66tnbwhqzh],
        .tool-landing.theme-tron .social-proof[b-66tnbwhqzh] { color: #7dd3fc; }

        .tool-landing.theme-tron .cta-button[b-66tnbwhqzh] {
            background: #00d4ff;
            color: #0a0a12;
            box-shadow: 0 0 24px rgba(0, 212, 255, 0.35);
        }
        .tool-landing.theme-tron .cta-button:hover[b-66tnbwhqzh] {
            background: #67e8f9;
            color: #0a0a12;
            box-shadow: 0 0 32px rgba(0, 212, 255, 0.5);
        }

        .tool-landing.theme-tron .secondary-cta[b-66tnbwhqzh] { color: #00d4ff; }
        .tool-landing.theme-tron .secondary-cta:hover[b-66tnbwhqzh] { color: #e0f7ff; }

        .tool-landing.theme-tron .stat-number[b-66tnbwhqzh] { color: #e0f7ff; }
        .tool-landing.theme-tron .stat-label[b-66tnbwhqzh] { color: #7dd3fc; }
        .tool-landing.theme-tron .stat-divider[b-66tnbwhqzh] { background: rgba(0, 212, 255, 0.3); }

        .tool-landing.theme-tron .preview-section[b-66tnbwhqzh] { background: rgba(0, 212, 255, 0.04); }
        .tool-landing.theme-tron .preview-badge[b-66tnbwhqzh] { background: rgba(0, 212, 255, 0.10); color: #00d4ff; }
        .tool-landing.theme-tron .preview-title[b-66tnbwhqzh] { color: #e0f7ff; }
        .tool-landing.theme-tron .preview-note[b-66tnbwhqzh] { color: #7dd3fc; }
        .tool-landing.theme-tron .sound-toggle.unmuted[b-66tnbwhqzh] { background: rgba(0, 212, 255, 0.85); border-color: rgba(0, 212, 255, 0.3); }

        .tool-landing.theme-tron .section-title[b-66tnbwhqzh] { color: #e0f7ff; }
        .tool-landing.theme-tron .step-icon[b-66tnbwhqzh] { color: #00d4ff; }
        .tool-landing.theme-tron .step-title[b-66tnbwhqzh] { color: #e0f7ff; }
        .tool-landing.theme-tron .step-description[b-66tnbwhqzh] { color: #7dd3fc; }

        .tool-landing.theme-tron .testimonial-card[b-66tnbwhqzh] { background: rgba(10, 10, 18, 0.85); border: 1px solid rgba(0, 212, 255, 0.3); }
        .tool-landing.theme-tron .quote-icon[b-66tnbwhqzh] { color: rgba(0, 212, 255, 0.3); }
        .tool-landing.theme-tron .testimonial-text[b-66tnbwhqzh] { color: #bae6fd; }
        .tool-landing.theme-tron .author-name[b-66tnbwhqzh] { color: #e0f7ff; }
        .tool-landing.theme-tron .author-role[b-66tnbwhqzh] { color: #7dd3fc; }

        .tool-landing.theme-tron .related-intro[b-66tnbwhqzh] { color: #7dd3fc; }
        .tool-landing.theme-tron .related-card[b-66tnbwhqzh] { background: rgba(10, 10, 18, 0.85); border: 1px solid rgba(0, 212, 255, 0.3); }
        .tool-landing.theme-tron .related-name[b-66tnbwhqzh] { color: #e0f7ff; }

        .tool-landing.theme-tron .final-cta-section[b-66tnbwhqzh] { background: linear-gradient(180deg, transparent, rgba(0, 212, 255, 0.10)); }
        .tool-landing.theme-tron .final-cta-title[b-66tnbwhqzh] { color: #e0f7ff; }
        .tool-landing.theme-tron .final-cta-subtitle[b-66tnbwhqzh],
        .tool-landing.theme-tron .final-cta-note[b-66tnbwhqzh] { color: #7dd3fc; }
        .tool-landing.theme-tron .landing-footer[b-66tnbwhqzh],
        .tool-landing.theme-tron .footer-links a[b-66tnbwhqzh] { color: #7dd3fc; }
        .tool-landing.theme-tron .footer-links a:hover[b-66tnbwhqzh] { color: #e0f7ff; }

        /* ============================================
           ACCENT-ON-SELF (2026-09-28): Nature, Winter and Ocean use an accent
           (--theme-primary) that is the SAME hue as the bottom of their own page
           gradient (Nature #22c55e on #22c55e, Winter/Ocean #0ea5e9 on #0891b2/
           #0ea5e9). Anything painted in the accent near the bottom of the page
           vanished: the PREVIOUS / NEXT labels, the prev/next pill borders.
           The slate #94a3b8 eyebrows ("What lives in a project", FAQ) also read
           grey-on-green. Use each theme's own light text tokens instead.
           ============================================ */
        .tool-landing.theme-nature .tool-seq-dir[b-66tnbwhqzh],
        .tool-landing.theme-winter .tool-seq-dir[b-66tnbwhqzh],
        .tool-landing.theme-ocean .tool-seq-dir[b-66tnbwhqzh],
        .tool-landing.theme-nature .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-winter .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-ocean .tool-seq-all[b-66tnbwhqzh],
        .tool-landing.theme-nature .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-winter .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-ocean .memory-reel-title[b-66tnbwhqzh],
        .tool-landing.theme-nature .faq-title[b-66tnbwhqzh],
        .tool-landing.theme-winter .faq-title[b-66tnbwhqzh],
        .tool-landing.theme-ocean .faq-title[b-66tnbwhqzh] {
            color: var(--theme-text-secondary);
        }
        .tool-landing.theme-nature .tool-seq-all:hover[b-66tnbwhqzh],
        .tool-landing.theme-winter .tool-seq-all:hover[b-66tnbwhqzh],
        .tool-landing.theme-ocean .tool-seq-all:hover[b-66tnbwhqzh] {
            color: var(--theme-text-primary);
        }
        .tool-landing.theme-nature .tool-seq-link[b-66tnbwhqzh],
        .tool-landing.theme-winter .tool-seq-link[b-66tnbwhqzh],
        .tool-landing.theme-ocean .tool-seq-link[b-66tnbwhqzh] {
            background: rgba(255, 255, 255, 0.10);
            border-color: rgba(255, 255, 255, 0.28);
        }
        .tool-landing.theme-nature .tool-seq-link:hover[b-66tnbwhqzh],
        .tool-landing.theme-winter .tool-seq-link:hover[b-66tnbwhqzh],
        .tool-landing.theme-ocean .tool-seq-link:hover[b-66tnbwhqzh] {
            background: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.45);
        }
/* /Pages/Games/Battleship.razor.rz.scp.css */
/* =====================================================
   BATTLESHIP - NAVAL WARFARE
   Epic 2-Player Game with Stunning Graphics
   ===================================================== */

/* ==================== PAGE LAYOUT ==================== */
.battleship-page[b-luv76tp6bv] {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #0a1628 0%, #1a365d 50%, #0d2847 100%);
    padding: 1rem;
}

.battleship-container[b-luv76tp6bv] {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

/* ==================== OCEAN BACKGROUND ==================== */
.ocean-background[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.wave[b-luv76tp6bv] {
    position: absolute;
    width: 200%;
    height: 200px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M0,192L48,181.3C96,171,192,149,288,154.7C384,160,480,192,576,186.7C672,181,768,139,864,138.7C960,139,1056,181,1152,186.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 50% 100%;
    bottom: 0;
    left: 0;
    animation: waveFlow-b-luv76tp6bv 15s linear infinite;
}

.wave1[b-luv76tp6bv] { opacity: 0.6; animation-duration: 12s; bottom: -20px; }
.wave2[b-luv76tp6bv] { opacity: 0.4; animation-duration: 18s; bottom: -40px; animation-delay: -5s; }
.wave3[b-luv76tp6bv] { opacity: 0.2; animation-duration: 24s; bottom: -60px; animation-delay: -10s; }

@keyframes waveFlow-b-luv76tp6bv {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.bubbles[b-luv76tp6bv] {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bubble[b-luv76tp6bv] {
    position: absolute;
    width: calc(10px + var(--i) * 2px);
    height: calc(10px + var(--i) * 2px);
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
    border-radius: 50%;
    bottom: -50px;
    left: calc(var(--i) * 6.5%);
    animation: bubbleRise-b-luv76tp6bv calc(8s + var(--i) * 0.5s) ease-in infinite;
    animation-delay: calc(var(--i) * -0.8s);
}

@keyframes bubbleRise-b-luv76tp6bv {
    0% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}

/* ==================== GLASS CARD ==================== */
.glass-card[b-luv76tp6bv] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    box-shadow: 
        0 8px 32px transparent,
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ==================== HEADER ==================== */
.battleship-header[b-luv76tp6bv] {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

.title-section[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0.5rem;
}

.battleship-title[b-luv76tp6bv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.title-main[b-luv76tp6bv] {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
    letter-spacing: 0.1em;
    animation: titleGlow-b-luv76tp6bv 3s ease-in-out infinite;
}

.title-sub[b-luv76tp6bv] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

@keyframes titleGlow-b-luv76tp6bv {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.battleship-subtitle[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* Radar Icon */
.radar-icon[b-luv76tp6bv] {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(34, 197, 94, 0.5);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1), transparent);
}

.radar-icon.mirrored[b-luv76tp6bv] {
    transform: scaleX(-1);
}

.radar-sweep[b-luv76tp6bv] {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.6));
    animation: radarSweep-b-luv76tp6bv 2s linear infinite;
}

@keyframes radarSweep-b-luv76tp6bv {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.radar-dot[b-luv76tp6bv] {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px #22c55e;
    animation: dotPulse-b-luv76tp6bv 1s ease-in-out infinite;
}

@keyframes dotPulse-b-luv76tp6bv {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.3); }
}

/* ==================== STATUS BAR ==================== */
.game-status-bar[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem 2rem;
    background: transparent;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-indicator[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}

.status-indicator.active[b-luv76tp6bv] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.5);
    animation: statusPulse-b-luv76tp6bv 2s ease-in-out infinite;
}

@keyframes statusPulse-b-luv76tp6bv {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.2); }
}

.status-icon[b-luv76tp6bv] {
    font-size: 1.5rem;
}

.status-text[b-luv76tp6bv] {
    color: white;
    font-weight: 600;
}

.turn-indicator[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.turn-indicator.player1[b-luv76tp6bv] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.turn-indicator.player2[b-luv76tp6bv] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.turn-arrow[b-luv76tp6bv] {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid currentColor;
    animation: arrowBounce-b-luv76tp6bv 0.6s ease-in-out infinite;
}

@keyframes arrowBounce-b-luv76tp6bv {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* ==================== SETUP PHASE ==================== */
.setup-phase[b-luv76tp6bv] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.setup-card[b-luv76tp6bv] {
    padding: 3rem;
    text-align: center;
    max-width: 600px;
    width: 100%;
}

.setup-icon[b-luv76tp6bv] {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: shipFloat-b-luv76tp6bv 3s ease-in-out infinite;
}

@keyframes shipFloat-b-luv76tp6bv {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

.setup-card h2[b-luv76tp6bv] {
    color: white;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.setup-card p[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 2rem;
}

.player-names-setup[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.name-input-group[b-luv76tp6bv] {
    flex: 1;
    min-width: 200px;
}

.name-input-group label[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.player-badge[b-luv76tp6bv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.8rem;
}

.player-badge.p1[b-luv76tp6bv] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.player-badge.p2[b-luv76tp6bv] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
}

.name-input-group input[b-luv76tp6bv] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.name-input-group input:focus[b-luv76tp6bv] {
    outline: none;
    border-color: #3b82f6;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.name-input-group input[b-luv76tp6bv]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.vs-divider[b-luv76tp6bv] {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.5);
}

.fleet-preview[b-luv76tp6bv] {
    background: transparent;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.fleet-preview h3[b-luv76tp6bv] {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.ship-list[b-luv76tp6bv] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.ship-preview-item[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ship-icon[b-luv76tp6bv] {
    font-size: 1.25rem;
}

.ship-name[b-luv76tp6bv] {
    color: white;
    font-weight: 600;
}

.ship-size[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* ==================== BUTTONS ==================== */
.btn[b-luv76tp6bv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary[b-luv76tp6bv] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.btn-primary:hover[b-luv76tp6bv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}

.btn-secondary[b-luv76tp6bv] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover[b-luv76tp6bv] {
    background: rgba(255, 255, 255, 0.2);
}

.btn-success[b-luv76tp6bv] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.btn-success:hover[b-luv76tp6bv] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(34, 197, 94, 0.5);
}

.btn-lg[b-luv76tp6bv] {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.btn:disabled[b-luv76tp6bv] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.start-btn[b-luv76tp6bv] {
    position: relative;
}

.btn-shine[b-luv76tp6bv] {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btnShine-b-luv76tp6bv 3s ease-in-out infinite;
}

@keyframes btnShine-b-luv76tp6bv {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* ==================== PLACEMENT PHASE ==================== */
.placement-phase[b-luv76tp6bv] {
    padding: 1rem;
}

.placement-header[b-luv76tp6bv] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.placement-header h2[b-luv76tp6bv] {
    color: white;
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.placement-instruction[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
}

.placement-instruction kbd[b-luv76tp6bv] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    font-family: monospace;
    margin: 0 0.25rem;
}

.placement-area[b-luv76tp6bv] {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.ships-to-place[b-luv76tp6bv] {
    background: transparent;
    border-radius: 16px;
    padding: 1.25rem;
    min-width: 200px;
}

.ships-to-place h3[b-luv76tp6bv] {
    color: white;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-align: center;
}

.ship-status[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
}

.ship-status.current[b-luv76tp6bv] {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    animation: shipPulse-b-luv76tp6bv 1.5s ease-in-out infinite;
}

@keyframes shipPulse-b-luv76tp6bv {
    0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
    50% { box-shadow: 0 0 15px 5px rgba(59, 130, 246, 0.2); }
}

.ship-status.placed[b-luv76tp6bv] {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.5);
}

.ship-status .ship-icon[b-luv76tp6bv] {
    font-size: 1.5rem;
}

.ship-status .ship-name[b-luv76tp6bv] {
    flex: 1;
    color: white;
}

.ship-check[b-luv76tp6bv] {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.3);
}

.ship-status.placed .ship-check[b-luv76tp6bv] {
    color: #22c55e;
}

/* ==================== GAME BOARD ==================== */
.placement-board-container[b-luv76tp6bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.board-frame[b-luv76tp6bv] {
    position: relative;
    padding: 1rem;
    background: linear-gradient(145deg, rgba(0, 50, 100, 0.8), rgba(0, 30, 60, 0.9));
    border-radius: 20px;
    border: 3px solid rgba(100, 180, 255, 0.3);
    box-shadow: 
        0 0 30px rgba(59, 130, 246, 0.3),
        inset 0 0 60px transparent;
}

.corner-decoration[b-luv76tp6bv] {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(100, 180, 255, 0.5);
}

.corner-decoration.tl[b-luv76tp6bv] { top: 5px; left: 5px; border-right: none; border-bottom: none; border-radius: 8px 0 0 0; }
.corner-decoration.tr[b-luv76tp6bv] { top: 5px; right: 5px; border-left: none; border-bottom: none; border-radius: 0 8px 0 0; }
.corner-decoration.bl[b-luv76tp6bv] { bottom: 5px; left: 5px; border-right: none; border-top: none; border-radius: 0 0 0 8px; }
.corner-decoration.br[b-luv76tp6bv] { bottom: 5px; right: 5px; border-left: none; border-top: none; border-radius: 0 0 8px 0; }

.board-labels[b-luv76tp6bv] {
    display: flex;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    font-size: 0.85rem;
}

.board-labels.top[b-luv76tp6bv] {
    justify-content: space-around;
    margin-bottom: 0.5rem;
    padding-left: 2rem;
}

.board-labels.top span[b-luv76tp6bv] {
    width: 36px;
    text-align: center;
}

.board-labels.left[b-luv76tp6bv] {
    flex-direction: column;
    justify-content: space-around;
    margin-right: 0.5rem;
}

.board-labels.left span[b-luv76tp6bv] {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
}

.board-labels.small span[b-luv76tp6bv] {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
}

.board-with-labels[b-luv76tp6bv] {
    display: flex;
}

.game-board[b-luv76tp6bv] {
    display: grid;
    grid-template-columns: repeat(10, 36px);
    grid-template-rows: repeat(10, 36px);
    gap: 2px;
    background: transparent;
    padding: 2px;
    border-radius: 8px;
}

.game-board.mini[b-luv76tp6bv] {
    grid-template-columns: repeat(10, 24px);
    grid-template-rows: repeat(10, 24px);
    gap: 1px;
}

.board-cell[b-luv76tp6bv] {
    position: relative;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.cell-water[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, #1e3a5f, #0f2744);
    border: 1px solid rgba(100, 180, 255, 0.1);
}

.board-cell:hover .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #264a73, #1a3d5c);
    border-color: rgba(100, 180, 255, 0.3);
}

.board-cell.ship .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #1e4a1e, #0f330f);
    border-color: rgba(100, 255, 100, 0.3);
}

.cell-ship[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    animation: shipPlace-b-luv76tp6bv 0.3s ease-out;
}

@keyframes shipPlace-b-luv76tp6bv {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.board-cell.preview .cell-preview[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    background: rgba(59, 130, 246, 0.4);
    border: 2px dashed #3b82f6;
    animation: previewPulse-b-luv76tp6bv 0.8s ease-in-out infinite;
}

.board-cell.preview.invalid .cell-preview[b-luv76tp6bv] {
    background: rgba(239, 68, 68, 0.4);
    border-color: #ef4444;
}

@keyframes previewPulse-b-luv76tp6bv {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.placement-controls[b-luv76tp6bv] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ==================== TRANSITION PHASE ==================== */
.transition-phase[b-luv76tp6bv] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 2rem;
}

.transition-card[b-luv76tp6bv] {
    padding: 3rem;
    text-align: center;
    max-width: 400px;
}

.shield-icon[b-luv76tp6bv] {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: shieldPulse-b-luv76tp6bv 2s ease-in-out infinite;
}

@keyframes shieldPulse-b-luv76tp6bv {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.transition-card h2[b-luv76tp6bv] {
    color: white;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.transition-card p[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.5rem;
}

.transition-warning[b-luv76tp6bv] {
    color: #fbbf24 !important;
    font-weight: 600;
    margin-bottom: 1.5rem !important;
}

/* ==================== GAME PHASE ==================== */
.game-phase[b-luv76tp6bv] {
    padding: 1rem;
}

.battlefield-container[b-luv76tp6bv] {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.board-section[b-luv76tp6bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.board-title[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border-radius: 12px;
}

.board-title h3[b-luv76tp6bv] {
    color: white;
    margin: 0;
    font-size: 1.1rem;
}

.target-icon[b-luv76tp6bv], .home-icon[b-luv76tp6bv] {
    font-size: 1.5rem;
}

.fleet-status[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.attack-frame[b-luv76tp6bv] {
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 
        0 0 30px rgba(239, 68, 68, 0.2),
        inset 0 0 60px transparent;
}

.own-frame[b-luv76tp6bv] {
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 
        0 0 20px rgba(34, 197, 94, 0.2),
        inset 0 0 40px transparent;
    padding: 0.75rem;
}

.attack-board .board-cell.attackable:hover[b-luv76tp6bv] {
    transform: scale(1.1);
    z-index: 5;
}

.attack-board .board-cell.attackable:hover .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #4a3030, #3d2020);
    border-color: rgba(255, 100, 100, 0.5);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.water-ripple[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 30%, rgba(100, 180, 255, 0.1) 70%);
    opacity: 0;
    animation: waterRipple-b-luv76tp6bv 3s ease-in-out infinite;
}

@keyframes waterRipple-b-luv76tp6bv {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
}

.board-cell.hit .cell-hit[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.8), transparent);
}

.board-cell.hit .explosion[b-luv76tp6bv] {
    font-size: 1.5rem;
    animation: explosion-b-luv76tp6bv 0.5s ease-out;
}

@keyframes explosion-b-luv76tp6bv {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 1; }
    100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

.board-cell.hit .fire[b-luv76tp6bv] {
    position: absolute;
    font-size: 0.8rem;
    animation: fireFlicker-b-luv76tp6bv 0.5s ease-in-out infinite alternate;
}

@keyframes fireFlicker-b-luv76tp6bv {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    100% { transform: translateY(-3px) scale(1.1); opacity: 1; }
}

.board-cell.miss .cell-miss[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(100, 180, 255, 0.3), transparent);
}

.board-cell.miss .splash[b-luv76tp6bv] {
    font-size: 1.25rem;
    animation: splash-b-luv76tp6bv 0.4s ease-out;
}

@keyframes splash-b-luv76tp6bv {
    0% { transform: scale(0) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.board-cell.sunk .cell-sunk[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.8), rgba(100, 0, 0, 0.5));
    font-size: 1.5rem;
    animation: sunkSkull-b-luv76tp6bv 0.6s ease-out;
}

@keyframes sunkSkull-b-luv76tp6bv {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Mini board */
.mini-ship[b-luv76tp6bv] {
    position: absolute;
    inset: 2px;
    background: linear-gradient(145deg, #22c55e, #16a34a);
    border-radius: 2px;
}

.mini-hit[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: rgba(239, 68, 68, 0.8);
    border-radius: 2px;
}

.mini-miss[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
}

/* ==================== BATTLE LOG ==================== */
.battle-log[b-luv76tp6bv] {
    max-width: 600px;
    margin: 0 auto;
    padding: 1.25rem;
}

.battle-log h4[b-luv76tp6bv] {
    color: white;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.log-entries[b-luv76tp6bv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.log-entry[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    animation: logSlide-b-luv76tp6bv 0.3s ease-out;
}

@keyframes logSlide-b-luv76tp6bv {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.log-entry.hit[b-luv76tp6bv] {
    background: rgba(239, 68, 68, 0.2);
    border-left: 3px solid #ef4444;
}

.log-entry.miss[b-luv76tp6bv] {
    background: rgba(100, 180, 255, 0.1);
    border-left: 3px solid #60a5fa;
}

.log-entry.sunk[b-luv76tp6bv] {
    background: rgba(168, 85, 247, 0.2);
    border-left: 3px solid #a855f7;
}

.log-entry.success[b-luv76tp6bv] {
    background: rgba(34, 197, 94, 0.2);
    border-left: 3px solid #22c55e;
}

.log-entry.warning[b-luv76tp6bv] {
    background: rgba(251, 191, 36, 0.2);
    border-left: 3px solid #fbbf24;
}

.log-entry.victory[b-luv76tp6bv] {
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.3), rgba(245, 158, 11, 0.2));
    border-left: 3px solid #fbbf24;
}

.log-icon[b-luv76tp6bv] {
    font-size: 1.25rem;
}

.log-text[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

/* ==================== GAME OVER ==================== */
.gameover-phase[b-luv76tp6bv] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.victory-card[b-luv76tp6bv] {
    padding: 3rem;
    text-align: center;
    max-width: 500px;
    position: relative;
    overflow: hidden;
}

.confetti-container[b-luv76tp6bv] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.confetti[b-luv76tp6bv] {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -20px;
    left: calc(var(--i) * 2%);
    background: hsl(calc(var(--i) * 25), 80%, 60%);
    animation: confettiFall-b-luv76tp6bv calc(2s + var(--i) * 0.1s) ease-in infinite;
    animation-delay: calc(var(--i) * -0.1s);
}

.confetti:nth-child(odd)[b-luv76tp6bv] {
    border-radius: 50%;
}

@keyframes confettiFall-b-luv76tp6bv {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(500px) rotate(720deg); opacity: 0; }
}

.victory-icon[b-luv76tp6bv] {
    font-size: 6rem;
    margin-bottom: 1rem;
    animation: trophyBounce-b-luv76tp6bv 1s ease-out;
}

@keyframes trophyBounce-b-luv76tp6bv {
    0% { transform: scale(0) rotate(-20deg); }
    60% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.victory-title[b-luv76tp6bv] {
    font-size: 3rem;
    font-weight: 900;
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    animation: victoryShine-b-luv76tp6bv 2s ease-in-out infinite;
}

@keyframes victoryShine-b-luv76tp6bv {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.winner-name[b-luv76tp6bv] {
    color: white;
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.final-stats[b-luv76tp6bv] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.stat-card[b-luv76tp6bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border-radius: 12px;
    min-width: 100px;
}

.stat-card .stat-icon[b-luv76tp6bv] {
    font-size: 1.5rem;
}

.stat-card .stat-value[b-luv76tp6bv] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
}

.stat-card .stat-label[b-luv76tp6bv] {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.gameover-buttons[b-luv76tp6bv] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==================== THEME VARIATIONS ==================== */

/* Space Theme */
.battleship-page.theme-space[b-luv76tp6bv] {
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a3e 50%, #0d0d20 100%);
}

.theme-space .board-frame[b-luv76tp6bv] {
    background: linear-gradient(145deg, rgba(30, 30, 80, 0.8), rgba(15, 15, 40, 0.9));
    border-color: rgba(147, 51, 234, 0.4);
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.3), inset 0 0 60px transparent;
}

.theme-space .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #1e1e4a, #0f0f30);
    border-color: rgba(147, 51, 234, 0.2);
}

.theme-space .title-main[b-luv76tp6bv] {
    background: linear-gradient(135deg, #a78bfa, #8b5cf6, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Winter Theme */
.battleship-page.theme-winter[b-luv76tp6bv] {
    background: linear-gradient(180deg, #1e3a5f 0%, #2d4a6f 50%, #1a3050 100%);
}

.theme-winter .board-frame[b-luv76tp6bv] {
    background: linear-gradient(145deg, rgba(100, 150, 200, 0.3), rgba(50, 100, 150, 0.4));
    border-color: rgba(200, 230, 255, 0.4);
    box-shadow: 0 0 30px rgba(200, 230, 255, 0.2), inset 0 0 60px rgba(0, 50, 100, 0.3);
}

.theme-winter .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #3d6a8f, #2d5070);
    border-color: rgba(200, 230, 255, 0.2);
}

.theme-winter .title-main[b-luv76tp6bv] {
    background: linear-gradient(135deg, #93c5fd, #60a5fa, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Nature Theme */
.battleship-page.theme-nature[b-luv76tp6bv] {
    background: linear-gradient(180deg, #1a3d2e 0%, #2d5a45 50%, #1a4030 100%);
}

.theme-nature .board-frame[b-luv76tp6bv] {
    background: linear-gradient(145deg, rgba(30, 80, 50, 0.8), rgba(20, 50, 30, 0.9));
    border-color: rgba(100, 200, 130, 0.4);
    box-shadow: 0 0 30px rgba(100, 200, 130, 0.2), inset 0 0 60px rgba(0, 30, 20, 0.5);
}

.theme-nature .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #1e4a3a, #0f3025);
    border-color: rgba(100, 200, 130, 0.2);
}

.theme-nature .title-main[b-luv76tp6bv] {
    background: linear-gradient(135deg, #86efac, #4ade80, #22c55e);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Ocean Theme */
.battleship-page.theme-ocean[b-luv76tp6bv] {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 50%, #0369a1 100%);
}

.theme-ocean .board-frame[b-luv76tp6bv] {
    background: linear-gradient(145deg, rgba(20, 80, 120, 0.8), rgba(10, 50, 80, 0.9));
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.3), inset 0 0 60px rgba(0, 30, 50, 0.5);
}

.theme-ocean .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #0c4a6e, #0a3d5c);
    border-color: rgba(56, 189, 248, 0.2);
}

.theme-ocean .title-main[b-luv76tp6bv] {
    background: linear-gradient(135deg, #7dd3fc, #38bdf8, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Mystic Theme */
.battleship-page.theme-mystic[b-luv76tp6bv] {
    background: linear-gradient(180deg, #2d1b4e 0%, #4a2c7a 50%, #3d2066 100%);
}

.theme-mystic .board-frame[b-luv76tp6bv] {
    background: linear-gradient(145deg, rgba(80, 40, 120, 0.8), rgba(50, 25, 80, 0.9));
    border-color: rgba(236, 72, 153, 0.4);
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.3), inset 0 0 60px rgba(20, 10, 30, 0.5);
}

.theme-mystic .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #4a2c7a, #3d2066);
    border-color: rgba(236, 72, 153, 0.2);
}

.theme-mystic .title-main[b-luv76tp6bv] {
    background: linear-gradient(135deg, #f9a8d4, #ec4899, #db2777);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Tron Theme */
.battleship-page.theme-tron[b-luv76tp6bv] {
    background: linear-gradient(180deg, #000000 0%, #0a1520 50%, #000510 100%);
}

.theme-tron .board-frame[b-luv76tp6bv] {
    background: linear-gradient(145deg, rgba(0, 30, 40, 0.9), rgba(0, 10, 20, 0.95));
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), inset 0 0 60px rgba(0, 0, 0, 0.8);
}

.theme-tron .cell-water[b-luv76tp6bv] {
    background: linear-gradient(145deg, #001520, #000a10);
    border-color: rgba(0, 255, 255, 0.3);
}

.theme-tron .board-cell:hover .cell-water[b-luv76tp6bv] {
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.theme-tron .title-main[b-luv76tp6bv] {
    background: linear-gradient(135deg, #00ffff, #00d4ff, #0099ff);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
}

.theme-tron .glass-card[b-luv76tp6bv] {
    border-color: rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), inset 0 1px 0 rgba(0, 255, 255, 0.1);
}

.theme-tron .btn-primary[b-luv76tp6bv] {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(0, 200, 255, 0.3));
    border: 1px solid rgba(0, 255, 255, 0.5);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.theme-tron .btn-primary:hover[b-luv76tp6bv] {
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.5);
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
    .title-main[b-luv76tp6bv] {
        font-size: 2rem;
    }

    .title-section[b-luv76tp6bv] {
        gap: 0.75rem;
    }

    .radar-icon[b-luv76tp6bv] {
        width: 40px;
        height: 40px;
        display: none;
    }

    .game-board[b-luv76tp6bv] {
        grid-template-columns: repeat(10, 28px);
        grid-template-rows: repeat(10, 28px);
    }

    .game-board.mini[b-luv76tp6bv] {
        grid-template-columns: repeat(10, 20px);
        grid-template-rows: repeat(10, 20px);
    }

    .board-labels.top span[b-luv76tp6bv] {
        width: 28px;
    }

    .board-labels.left span[b-luv76tp6bv] {
        height: 28px;
    }

    .placement-area[b-luv76tp6bv] {
        flex-direction: column;
        align-items: center;
    }

    .ships-to-place[b-luv76tp6bv] {
        width: 100%;
        max-width: 350px;
    }

    .battlefield-container[b-luv76tp6bv] {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 500px) {
    .battleship-page[b-luv76tp6bv] {
        padding: 0.5rem;
    }

    .title-main[b-luv76tp6bv] {
        font-size: 1.5rem;
        letter-spacing: 0.05em;
    }

    .title-sub[b-luv76tp6bv] {
        font-size: 0.75rem;
    }

    .game-status-bar[b-luv76tp6bv] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .game-board[b-luv76tp6bv] {
        grid-template-columns: repeat(10, 24px);
        grid-template-rows: repeat(10, 24px);
    }

    .board-labels.top span[b-luv76tp6bv] {
        width: 24px;
        font-size: 0.7rem;
    }

    .board-labels.left span[b-luv76tp6bv] {
        height: 24px;
        font-size: 0.7rem;
        width: 1rem;
    }

    .setup-card[b-luv76tp6bv],
    .transition-card[b-luv76tp6bv],
    .victory-card[b-luv76tp6bv] {
        padding: 1.5rem;
    }

    .setup-icon[b-luv76tp6bv],
    .shield-icon[b-luv76tp6bv] {
        font-size: 3.5rem;
    }

    .victory-icon[b-luv76tp6bv] {
        font-size: 4rem;
    }

    .victory-title[b-luv76tp6bv] {
        font-size: 2rem;
    }

    .player-names-setup[b-luv76tp6bv] {
        flex-direction: column;
    }

    .vs-divider[b-luv76tp6bv] {
        transform: rotate(90deg);
    }
}

/* =====================================================
   MODE SELECTION - Choose Local or Online
   ===================================================== */
.mode-selection-phase[b-luv76tp6bv] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    min-height: 400px;
}

.mode-cards[b-luv76tp6bv] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.mode-card[b-luv76tp6bv] {
    padding: 2.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 280px;
    max-width: 320px;
    position: relative;
    overflow: hidden;
}

.mode-card:hover[b-luv76tp6bv] {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px transparent;
}

.mode-card[b-luv76tp6bv]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mode-card:hover[b-luv76tp6bv]::before {
    opacity: 1;
}

.mode-icon[b-luv76tp6bv] {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.mode-card h3[b-luv76tp6bv] {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.mode-card p[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1.5rem;
}

.mode-badge[b-luv76tp6bv] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.9rem;
}

.mode-badge.online[b-luv76tp6bv] {
    background: rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.online-dot[b-luv76tp6bv] {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: onlinePulse-b-luv76tp6bv 2s ease-in-out infinite;
}

@keyframes onlinePulse-b-luv76tp6bv {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

.mode-card.connecting .mode-badge[b-luv76tp6bv] {
    background: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

/* =====================================================
   ONLINE LOBBY
   ===================================================== */
.online-lobby[b-luv76tp6bv] {
    padding: 1rem;
}

.lobby-header[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: transparent;
    border-radius: 16px;
}

.lobby-header h2[b-luv76tp6bv] {
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-ghost[b-luv76tp6bv] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost:hover[b-luv76tp6bv] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.connection-status[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.connection-status.connected[b-luv76tp6bv] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.connection-status.disconnected[b-luv76tp6bv] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.status-dot[b-luv76tp6bv] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.lobby-content[b-luv76tp6bv] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .lobby-content[b-luv76tp6bv] {
        grid-template-columns: 1fr;
    }
}

.players-list[b-luv76tp6bv] {
    padding: 1.5rem;
}

.players-list h3[b-luv76tp6bv] {
    color: white;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.player-count[b-luv76tp6bv] {
    background: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-left: auto;
}

.no-players[b-luv76tp6bv] {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.5);
}

.empty-icon[b-luv76tp6bv] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.no-players .hint[b-luv76tp6bv] {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.player-list-items[b-luv76tp6bv] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.player-item[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.player-item:hover[b-luv76tp6bv] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.player-item.ingame[b-luv76tp6bv] {
    opacity: 0.6;
}

.player-avatar[b-luv76tp6bv] {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
}

.player-info[b-luv76tp6bv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.player-name[b-luv76tp6bv] {
    color: white;
    font-weight: 600;
}

.player-status[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.btn-challenge[b-luv76tp6bv] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-challenge:hover[b-luv76tp6bv] {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.lobby-info[b-luv76tp6bv] {
    padding: 1.5rem;
}

.lobby-info h3[b-luv76tp6bv] {
    color: white;
    margin-bottom: 1rem;
}

.lobby-info ol[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.7);
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.lobby-info li[b-luv76tp6bv] {
    margin-bottom: 0.5rem;
}

.your-status[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.status-badge[b-luv76tp6bv] {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge.available[b-luv76tp6bv] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.status-badge.ingame[b-luv76tp6bv] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

/* Challenge Modal */
.challenge-modal-overlay[b-luv76tp6bv] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-luv76tp6bv 0.3s ease;
}

@keyframes fadeIn-b-luv76tp6bv {
    from { opacity: 0; }
    to { opacity: 1; }
}

.challenge-modal[b-luv76tp6bv] {
    padding: 2.5rem;
    text-align: center;
    max-width: 400px;
    animation: modalSlide-b-luv76tp6bv 0.3s ease;
}

@keyframes modalSlide-b-luv76tp6bv {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.challenge-icon[b-luv76tp6bv] {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: swordsCross-b-luv76tp6bv 0.5s ease;
}

@keyframes swordsCross-b-luv76tp6bv {
    0% { transform: scale(0) rotate(-45deg); }
    50% { transform: scale(1.2) rotate(15deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.challenge-modal h3[b-luv76tp6bv] {
    color: white;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.challenge-modal p[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
}

.challenge-timer[b-luv76tp6bv] {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.timer-bar[b-luv76tp6bv] {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #fbbf24);
    width: 100%;
    animation: timerShrink-b-luv76tp6bv var(--duration) linear forwards;
}

@keyframes timerShrink-b-luv76tp6bv {
    from { width: 100%; }
    to { width: 0%; }
}

.challenge-buttons[b-luv76tp6bv] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Challenge Waiting */
.challenge-waiting[b-luv76tp6bv] {
    padding: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.waiting-spinner[b-luv76tp6bv] {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #3b82f6;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin-b-luv76tp6bv 1s linear infinite;
}

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

.challenge-waiting p[b-luv76tp6bv] {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

/* =====================================================
   ONLINE GAME SPECIFIC STYLES
   ===================================================== */
.online-placement .placement-header h2[b-luv76tp6bv] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
}

.online-badge[b-luv76tp6bv] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
}

.opponent-ready[b-luv76tp6bv] {
    color: #4ade80;
    font-weight: 600;
}

.opponent-waiting[b-luv76tp6bv] {
    color: #fbbf24;
}

.online-status[b-luv76tp6bv] {
    justify-content: space-between;
}

.turn-indicator.my-turn[b-luv76tp6bv] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: turnPulse-b-luv76tp6bv 1.5s ease-in-out infinite;
}

.turn-indicator.opponent-turn[b-luv76tp6bv] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

@keyframes turnPulse-b-luv76tp6bv {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { box-shadow: 0 0 20px 5px rgba(34, 197, 94, 0.2); }
}

.forfeit-btn[b-luv76tp6bv] {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.btn-danger[b-luv76tp6bv] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: none;
}

.btn-danger:hover[b-luv76tp6bv] {
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.btn-sm[b-luv76tp6bv] {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.board-frame.disabled[b-luv76tp6bv] {
    opacity: 0.6;
    pointer-events: none;
}

.log-entry.defeat[b-luv76tp6bv] {
    background: rgba(239, 68, 68, 0.2);
    border-left: 3px solid #ef4444;
}

/* Responsive adjustments for online mode */
@media (max-width: 600px) {
    .mode-cards[b-luv76tp6bv] {
        flex-direction: column;
    }
    
    .mode-card[b-luv76tp6bv] {
        min-width: unset;
        width: 100%;
    }
    
    .lobby-header[b-luv76tp6bv] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    
    .challenge-buttons[b-luv76tp6bv] {
        flex-direction: column;
    }
}
/* /Pages/Games/KeyQuest.razor.rz.scp.css */
/* ============================================
   KEYQUEST GAME STYLES
   ============================================ */

.kq-page[b-u8jvu6roxa] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
    overscroll-behavior: none;
}

.kq-container[b-u8jvu6roxa] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Section */
.kq-header[b-u8jvu6roxa] {
    text-align: center;
    margin-bottom: 32px;
}

.kq-title[b-u8jvu6roxa] {
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 12px;
}

.kq-title span[b-u8jvu6roxa] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kq-subtitle[b-u8jvu6roxa] {
    font-size: 1.1rem;
    opacity: 0.8;
    margin: 0;
}

/* Mode Selector */
.mode-selector[b-u8jvu6roxa] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    margin-top: 20px;
}

.mode-icon[b-u8jvu6roxa] {
    font-size: 1.4rem;
}

.mode-label[b-u8jvu6roxa] {
    font-weight: 600;
    font-size: 0.95rem;
}

.mode-select[b-u8jvu6roxa] {
    border: none;
    border-radius: 8px;
    padding: 10px 36px 10px 14px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231e293b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 160px;
    transition: all 0.2s ease;
}

.mode-select:hover[b-u8jvu6roxa] {
    transform: translateY(-1px);
}

.mode-select:focus[b-u8jvu6roxa] {
    outline: none;
}

.guest-counter[b-u8jvu6roxa] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    margin-top: 12px;
    font-size: 0.85rem;
    font-weight: 500;
}

.guest-counter svg[b-u8jvu6roxa] {
    width: 16px;
    height: 16px;
}

/* Game Card */
.game-card[b-u8jvu6roxa] {
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
}

.level-badge[b-u8jvu6roxa] {
    display: inline-block;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}

/* Start/Loading/Limit Sections */
.start-section[b-u8jvu6roxa],
.loading-section[b-u8jvu6roxa],
.guest-limit-section[b-u8jvu6roxa] {
    text-align: center;
    padding: 40px 20px;
    border-radius: 16px;
    margin-bottom: 24px;
}

.start-icon[b-u8jvu6roxa],
.limit-icon[b-u8jvu6roxa] {
    font-size: 3rem;
    margin-bottom: 16px;
}

.start-section h3[b-u8jvu6roxa],
.guest-limit-section h3[b-u8jvu6roxa] {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.start-section p[b-u8jvu6roxa],
.guest-limit-section p[b-u8jvu6roxa] {
    margin: 0 0 8px;
    opacity: 0.9;
}

.loading-text[b-u8jvu6roxa] {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 16px;
}

.loading-dots[b-u8jvu6roxa] {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.loading-dots span[b-u8jvu6roxa] {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    border-radius: 50%;
    animation: bounce-b-u8jvu6roxa 1.4s infinite ease-in-out both;
}

.loading-dots span:nth-child(1)[b-u8jvu6roxa] { animation-delay: -0.32s; }
.loading-dots span:nth-child(2)[b-u8jvu6roxa] { animation-delay: -0.16s; }
.loading-dots span:nth-child(3)[b-u8jvu6roxa] { animation-delay: 0s; }

@keyframes bounce-b-u8jvu6roxa {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Typing Area */
.typing-sentence[b-u8jvu6roxa] {
    font-size: 1.5rem;
    line-height: 1.7;
    min-height: 80px;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.typing-sentence .correct[b-u8jvu6roxa] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 3px;
}

.typing-sentence .incorrect[b-u8jvu6roxa] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 3px;
    text-decoration: underline wavy;
}

.typing-sentence .space-char[b-u8jvu6roxa] {
    display: inline;
    white-space: pre;
}

.typing-input[b-u8jvu6roxa] {
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    border-radius: 12px;
    margin-bottom: 24px;
    font-family: 'Courier New', monospace;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.typing-input:focus[b-u8jvu6roxa] {
    outline: none;
}

/* Stats Grid */
.stats-grid[b-u8jvu6roxa] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-u8jvu6roxa] {
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    color: white;
}

.stat-card.blue[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.stat-card.purple[b-u8jvu6roxa] {
    background: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-primary) 100%);
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}

.stat-card.green[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.stat-card.orange[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.stat-label[b-u8jvu6roxa] {
    font-size: 0.75rem;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-value[b-u8jvu6roxa] {
    font-size: 1.75rem;
    font-weight: 800;
}

.stat-value span[b-u8jvu6roxa] {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Buttons */
.action-buttons[b-u8jvu6roxa] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn[b-u8jvu6roxa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    flex: 1;
    min-width: 140px;
}

.btn svg[b-u8jvu6roxa] {
    width: 18px;
    height: 18px;
}

.btn-lg[b-u8jvu6roxa] {
    padding: 14px 24px;
    font-size: 1rem;
    margin-top: 16px;
}

.btn-sm[b-u8jvu6roxa] {
    padding: 8px 14px;
    font-size: 0.85rem;
    flex: none;
    min-width: auto;
}

.btn-primary[b-u8jvu6roxa] {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}

.btn-primary:hover[b-u8jvu6roxa] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--theme-accent-rgb), 0.4);
}

.btn-secondary[b-u8jvu6roxa] {
    background: transparent;
    border: 2px solid currentColor;
    color: inherit;
}

.btn-secondary:hover[b-u8jvu6roxa] {
    transform: translateY(-2px);
}

.btn-warning[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-text[b-u8jvu6roxa] {
    background: transparent;
    color: inherit;
    opacity: 0.7;
    padding: 8px 12px;
    flex: none;
    min-width: auto;
}

.btn-text:hover[b-u8jvu6roxa] {
    opacity: 1;
}

/* Message Card */
.message-card[b-u8jvu6roxa] {
    padding: 16px 20px;
    border-radius: 12px;
    margin-top: 20px;
    font-weight: 500;
    text-align: center;
}

/* Achievements */
.achievements-section[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    color: white;
    text-align: center;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.achievements-title[b-u8jvu6roxa] {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 12px;
}

.achievements-list[b-u8jvu6roxa] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.achievement-badge[b-u8jvu6roxa] {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Confetti */
.confetti-container[b-u8jvu6roxa] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.show-confetti[b-u8jvu6roxa]::after {
    content: "🎉";
    font-size: 3rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: celebrate-b-u8jvu6roxa 2s ease-out;
}

@keyframes celebrate-b-u8jvu6roxa {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(2); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* Grid Layout */
.kq-grid[b-u8jvu6roxa] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Panel Cards */
.panel-card[b-u8jvu6roxa] {
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.panel-title[b-u8jvu6roxa] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-title svg[b-u8jvu6roxa] {
    width: 24px;
    height: 24px;
}

/* Data Table */
.table-wrapper[b-u8jvu6roxa] {
    overflow-x: auto;
}

.data-table[b-u8jvu6roxa] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
}

.data-table thead th[b-u8jvu6roxa] {
    font-weight: 600;
    padding: 12px;
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table thead th:first-child[b-u8jvu6roxa] {
    border-radius: 8px 0 0 0;
}

.data-table thead th:last-child[b-u8jvu6roxa] {
    border-radius: 0 8px 0 0;
}

.data-table tbody td[b-u8jvu6roxa] {
    padding: 12px;
}

.sentence-cell[b-u8jvu6roxa] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goal-cell[b-u8jvu6roxa] {
    font-size: 0.8rem;
    opacity: 0.8;
}

.points[b-u8jvu6roxa] {
    color: #f59e0b;
    font-weight: 700;
}

/* Rank Badges */
.rank-badge[b-u8jvu6roxa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    color: white;
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}

.rank-gold[b-u8jvu6roxa] { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 2px 8px rgba(251, 191, 36, 0.4); }
.rank-silver[b-u8jvu6roxa] { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); box-shadow: 0 2px 8px rgba(148, 163, 184, 0.4); }
.rank-bronze[b-u8jvu6roxa] { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); box-shadow: 0 2px 8px rgba(251, 146, 60, 0.4); }

/* Empty State */
.empty-state[b-u8jvu6roxa] {
    text-align: center;
    padding: 32px 20px;
}

.empty-icon[b-u8jvu6roxa] {
    font-size: 3rem;
    margin-bottom: 12px;
}

.empty-state .title[b-u8jvu6roxa] {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 8px;
}

.empty-state p[b-u8jvu6roxa] {
    margin: 0 0 8px;
    opacity: 0.8;
}

/* Gamer Tag Section */
.gamer-tag-section[b-u8jvu6roxa] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-radius: 10px;
    margin-top: 20px;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.gamer-tag-section svg[b-u8jvu6roxa] {
    flex-shrink: 0;
}

.warning-text[b-u8jvu6roxa] {
    color: #f59e0b;
    font-weight: 500;
}

.highlight[b-u8jvu6roxa] {
    color: var(--theme-accent);
}

/* Responsive */
@media (max-width: 900px) {
    .kq-grid[b-u8jvu6roxa] {
        grid-template-columns: 1fr;
    }
    
    .stats-grid[b-u8jvu6roxa] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .kq-page[b-u8jvu6roxa] {
        padding: 16px;
        padding-top: 72px;
    }
    
    .kq-title[b-u8jvu6roxa] {
        font-size: 2rem;
    }
    
    .game-card[b-u8jvu6roxa],
    .panel-card[b-u8jvu6roxa] {
        padding: 20px;
        border-radius: 16px;
    }
    
    .typing-sentence[b-u8jvu6roxa] {
        font-size: 1.2rem;
    }
    
    .action-buttons[b-u8jvu6roxa] {
        flex-direction: column;
    }
    
    .btn[b-u8jvu6roxa] {
        width: 100%;
    }
    
    .gamer-tag-section[b-u8jvu6roxa] {
        flex-direction: column;
        text-align: center;
    }
}

/* ============================================
   ☁️ CLOUD THEME
   ============================================ */
.kq-page.theme-cloud[b-u8jvu6roxa] {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

.theme-cloud .kq-title[b-u8jvu6roxa] { color: #1e3a5f; }
.theme-cloud .kq-subtitle[b-u8jvu6roxa] { color: #64748b; }

.theme-cloud .mode-selector[b-u8jvu6roxa] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.theme-cloud .mode-label[b-u8jvu6roxa] { color: #1e3a5f; }

.theme-cloud .mode-select[b-u8jvu6roxa] {
    background-color: white;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-cloud .guest-counter[b-u8jvu6roxa] {
    background: rgba(255, 255, 255, 0.7);
    color: #64748b;
}

.theme-cloud .game-card[b-u8jvu6roxa] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .start-section[b-u8jvu6roxa],
.theme-cloud .loading-section[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
}

.theme-cloud .start-section h3[b-u8jvu6roxa],
.theme-cloud .loading-text[b-u8jvu6roxa] { color: #1e3a5f; }
.theme-cloud .start-section p[b-u8jvu6roxa] { color: #64748b; }

.theme-cloud .guest-limit-section[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
}

.theme-cloud .guest-limit-section h3[b-u8jvu6roxa] { color: #92400e; }
.theme-cloud .guest-limit-section p[b-u8jvu6roxa] { color: #a16207; }

.theme-cloud .typing-sentence[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    color: #1e293b;
}

.theme-cloud .typing-input[b-u8jvu6roxa] {
    background: white;
    border-color: #e2e8f0;
    color: #1e293b;
}

.theme-cloud .typing-input:focus[b-u8jvu6roxa] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.theme-cloud .message-card[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
}

.theme-cloud .btn-secondary[b-u8jvu6roxa] {
    color: #3b82f6;
    border-color: #3b82f6;
}

.theme-cloud .panel-card[b-u8jvu6roxa] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .panel-title[b-u8jvu6roxa] { color: #1e3a5f; }
.theme-cloud .panel-title svg[b-u8jvu6roxa] { color: #3b82f6; }

.theme-cloud .data-table thead th[b-u8jvu6roxa] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e3a5f;
    border-bottom: 2px solid #bfdbfe;
}

.theme-cloud .data-table tbody tr:hover[b-u8jvu6roxa] {
    background: #f8fafc;
}

.theme-cloud .data-table tbody td[b-u8jvu6roxa] {
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
}

.theme-cloud .empty-state[b-u8jvu6roxa] { color: #64748b; }

.theme-cloud .gamer-tag-section[b-u8jvu6roxa] {
    background: #f8fafc;
    color: #64748b;
}

/* ============================================
   🚀 SPACE THEME
   ============================================ */
.kq-page.theme-space[b-u8jvu6roxa] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

.theme-space .kq-title[b-u8jvu6roxa] { color: #f1f5f9; }
.theme-space .kq-subtitle[b-u8jvu6roxa] { color: #94a3b8; }

.theme-space .mode-selector[b-u8jvu6roxa] {
    background: rgba(30, 27, 75, 0.6);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.theme-space .mode-label[b-u8jvu6roxa] { color: #c4b5fd; }

.theme-space .mode-select[b-u8jvu6roxa] {
    background-color: rgba(50, 45, 100, 0.8);
    color: #f1f5f9;
    box-shadow: 0 2px 8px transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c4b5fd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.theme-space .guest-counter[b-u8jvu6roxa] {
    background: rgba(168, 85, 247, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.theme-space .game-card[b-u8jvu6roxa] {
    background: rgba(30, 27, 75, 0.8);
    box-shadow: 0 8px 32px transparent;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.theme-space .start-section[b-u8jvu6roxa],
.theme-space .loading-section[b-u8jvu6roxa] {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.theme-space .start-section h3[b-u8jvu6roxa],
.theme-space .loading-text[b-u8jvu6roxa] { color: #f1f5f9; }
.theme-space .start-section p[b-u8jvu6roxa] { color: #c4b5fd; }

.theme-space .guest-limit-section[b-u8jvu6roxa] {
    background: rgba(245, 158, 11, 0.2);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.theme-space .guest-limit-section h3[b-u8jvu6roxa] { color: #fef3c7; }
.theme-space .guest-limit-section p[b-u8jvu6roxa] { color: #fcd34d; }

.theme-space .typing-sentence[b-u8jvu6roxa] {
    background: rgba(50, 45, 100, 0.5);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #e2e8f0;
}

.theme-space .typing-input[b-u8jvu6roxa] {
    background: rgba(30, 27, 75, 0.8);
    border-color: rgba(168, 85, 247, 0.3);
    color: #f1f5f9;
}

.theme-space .typing-input:focus[b-u8jvu6roxa] {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.theme-space .typing-input[b-u8jvu6roxa]::placeholder {
    color: #94a3b8;
}

.theme-space .message-card[b-u8jvu6roxa] {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c4b5fd;
}

.theme-space .btn-secondary[b-u8jvu6roxa] {
    color: #c4b5fd;
    border-color: #a855f7;
}

.theme-space .panel-card[b-u8jvu6roxa] {
    background: rgba(30, 27, 75, 0.8);
    box-shadow: 0 8px 32px transparent;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.theme-space .panel-title[b-u8jvu6roxa] { color: #f1f5f9; }
.theme-space .panel-title svg[b-u8jvu6roxa] { color: #a855f7; }

.theme-space .data-table thead th[b-u8jvu6roxa] {
    background: rgba(124, 58, 237, 0.2);
    color: #c4b5fd;
    border-bottom: 2px solid rgba(168, 85, 247, 0.3);
}

.theme-space .data-table tbody tr:hover[b-u8jvu6roxa] {
    background: rgba(124, 58, 237, 0.1);
}

.theme-space .data-table tbody td[b-u8jvu6roxa] {
    color: #c4b5fd;
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .empty-state[b-u8jvu6roxa] { color: #94a3b8; }

.theme-space .gamer-tag-section[b-u8jvu6roxa] {
    background: rgba(50, 45, 100, 0.5);
    color: #c4b5fd;
}

.theme-space .highlight[b-u8jvu6roxa] { color: #c4b5fd; }

/* ============================================
   ❄️ WINTER THEME
   ============================================ */
.kq-page.theme-winter[b-u8jvu6roxa] {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

.theme-winter .kq-title[b-u8jvu6roxa] { color: #f0f9ff; }
.theme-winter .kq-subtitle[b-u8jvu6roxa] { color: #bae6fd; }

.theme-winter .mode-selector[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .mode-label[b-u8jvu6roxa] { color: #e0f2fe; }

.theme-winter .mode-select[b-u8jvu6roxa] {
    background-color: rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bae6fd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.theme-winter .guest-counter[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    color: #bae6fd;
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .game-card[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .start-section[b-u8jvu6roxa],
.theme-winter .loading-section[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.4);
}

.theme-winter .start-section h3[b-u8jvu6roxa],
.theme-winter .loading-text[b-u8jvu6roxa] { color: #f0f9ff; }
.theme-winter .start-section p[b-u8jvu6roxa] { color: #bae6fd; }

.theme-winter .guest-limit-section[b-u8jvu6roxa] {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.theme-winter .guest-limit-section h3[b-u8jvu6roxa] { color: #fef3c7; }
.theme-winter .guest-limit-section p[b-u8jvu6roxa] { color: #fcd34d; }

.theme-winter .typing-sentence[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-winter .typing-input[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border-color: rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-winter .typing-input:focus[b-u8jvu6roxa] {
    border-color: #67e8f9;
    box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.2);
}

.theme-winter .typing-input[b-u8jvu6roxa]::placeholder {
    color: #7dd3fc;
}

.theme-winter .message-card[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.4);
    color: #7dd3fc;
}

.theme-winter .btn-secondary[b-u8jvu6roxa] {
    color: #7dd3fc;
    border-color: #67e8f9;
}

.theme-winter .panel-card[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .panel-title[b-u8jvu6roxa] { color: #f0f9ff; }
.theme-winter .panel-title svg[b-u8jvu6roxa] { color: #67e8f9; }

.theme-winter .data-table thead th[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    color: #e0f2fe;
    border-bottom: 2px solid rgba(186, 230, 253, 0.4);
}

.theme-winter .data-table tbody tr:hover[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.15);
}

.theme-winter .data-table tbody td[b-u8jvu6roxa] {
    color: #bae6fd;
    border-bottom: 1px solid rgba(186, 230, 253, 0.2);
}

.theme-winter .empty-state[b-u8jvu6roxa] { color: #bae6fd; }

.theme-winter .gamer-tag-section[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.15);
    color: #bae6fd;
}

.theme-winter .highlight[b-u8jvu6roxa] { color: #67e8f9; }

/* ============================================
   🌿 NATURE THEME
   ============================================ */
.kq-page.theme-nature[b-u8jvu6roxa] {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);
}

.theme-nature .kq-title[b-u8jvu6roxa] { color: #f0fdf4; }
.theme-nature .kq-subtitle[b-u8jvu6roxa] { color: #bbf7d0; }

.theme-nature .mode-selector[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .mode-label[b-u8jvu6roxa] { color: #dcfce7; }

.theme-nature .mode-select[b-u8jvu6roxa] {
    background-color: rgba(187, 247, 208, 0.3);
    color: #f0fdf4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bbf7d0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.theme-nature .guest-counter[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.2);
    color: #bbf7d0;
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .game-card[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .start-section[b-u8jvu6roxa],
.theme-nature .loading-section[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.4);
}

.theme-nature .start-section h3[b-u8jvu6roxa],
.theme-nature .loading-text[b-u8jvu6roxa] { color: #f0fdf4; }
.theme-nature .start-section p[b-u8jvu6roxa] { color: #bbf7d0; }

.theme-nature .guest-limit-section[b-u8jvu6roxa] {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.theme-nature .guest-limit-section h3[b-u8jvu6roxa] { color: #fef3c7; }
.theme-nature .guest-limit-section p[b-u8jvu6roxa] { color: #fcd34d; }

.theme-nature .typing-sentence[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.15);
    border: 1px solid rgba(187, 247, 208, 0.3);
    color: #f0fdf4;
}

.theme-nature .typing-input[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.2);
    border-color: rgba(187, 247, 208, 0.3);
    color: #f0fdf4;
}

.theme-nature .typing-input:focus[b-u8jvu6roxa] {
    border-color: #86efac;
    box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.2);
}

.theme-nature .typing-input[b-u8jvu6roxa]::placeholder {
    color: #86efac;
}

.theme-nature .message-card[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.4);
    color: #86efac;
}

.theme-nature .btn-secondary[b-u8jvu6roxa] {
    color: #86efac;
    border-color: #86efac;
}

.theme-nature .panel-card[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .panel-title[b-u8jvu6roxa] { color: #f0fdf4; }
.theme-nature .panel-title svg[b-u8jvu6roxa] { color: #86efac; }

.theme-nature .data-table thead th[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.2);
    color: #dcfce7;
    border-bottom: 2px solid rgba(187, 247, 208, 0.4);
}

.theme-nature .data-table tbody tr:hover[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.15);
}

.theme-nature .data-table tbody td[b-u8jvu6roxa] {
    color: #bbf7d0;
    border-bottom: 1px solid rgba(187, 247, 208, 0.2);
}

.theme-nature .empty-state[b-u8jvu6roxa] { color: #bbf7d0; }

.theme-nature .gamer-tag-section[b-u8jvu6roxa] {
    background: rgba(187, 247, 208, 0.15);
    color: #bbf7d0;
}

.theme-nature .highlight[b-u8jvu6roxa] { color: #86efac; }

/* ============================================
   🌊 OCEAN THEME
   ============================================ */
.kq-page.theme-ocean[b-u8jvu6roxa] {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 70%, #0ea5e9 100%);
}

.theme-ocean .kq-title[b-u8jvu6roxa] { color: #f0f9ff; }
.theme-ocean .kq-subtitle[b-u8jvu6roxa] { color: #bae6fd; }

.theme-ocean .mode-selector[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .mode-label[b-u8jvu6roxa] { color: #e0f2fe; }

.theme-ocean .mode-select[b-u8jvu6roxa] {
    background-color: rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23bae6fd' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

.theme-ocean .guest-counter[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    color: #bae6fd;
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .game-card[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .start-section[b-u8jvu6roxa],
.theme-ocean .loading-section[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.4);
}

.theme-ocean .start-section h3[b-u8jvu6roxa],
.theme-ocean .loading-text[b-u8jvu6roxa] { color: #f0f9ff; }
.theme-ocean .start-section p[b-u8jvu6roxa] { color: #bae6fd; }

.theme-ocean .guest-limit-section[b-u8jvu6roxa] {
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.theme-ocean .guest-limit-section h3[b-u8jvu6roxa] { color: #fef3c7; }
.theme-ocean .guest-limit-section p[b-u8jvu6roxa] { color: #fcd34d; }

.theme-ocean .typing-sentence[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-ocean .typing-input[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border-color: rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-ocean .typing-input:focus[b-u8jvu6roxa] {
    border-color: #7dd3fc;
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.2);
}

.theme-ocean .typing-input[b-u8jvu6roxa]::placeholder {
    color: #7dd3fc;
}

.theme-ocean .message-card[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.4);
    color: #7dd3fc;
}

.theme-ocean .btn-secondary[b-u8jvu6roxa] {
    color: #7dd3fc;
    border-color: #7dd3fc;
}

.theme-ocean .panel-card[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .panel-title[b-u8jvu6roxa] { color: #f0f9ff; }
.theme-ocean .panel-title svg[b-u8jvu6roxa] { color: #7dd3fc; }

.theme-ocean .data-table thead th[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.2);
    color: #e0f2fe;
    border-bottom: 2px solid rgba(186, 230, 253, 0.4);
}

.theme-ocean .data-table tbody tr:hover[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.15);
}

.theme-ocean .data-table tbody td[b-u8jvu6roxa] {
    color: #bae6fd;
    border-bottom: 1px solid rgba(186, 230, 253, 0.2);
}

.theme-ocean .empty-state[b-u8jvu6roxa] { color: #bae6fd; }

.theme-ocean .gamer-tag-section[b-u8jvu6roxa] {
    background: rgba(186, 230, 253, 0.15);
    color: #bae6fd;
}

.theme-ocean .highlight[b-u8jvu6roxa] { color: #7dd3fc; }
/* /Pages/Global/ActivityTimeline.razor.rz.scp.css */
/* Activity Timeline Page Styles */
    
.activity-container[b-p7ahgnruwh] {
    max-width: 900px;
    margin: 0 auto;
}

.header-title[b-p7ahgnruwh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-title svg[b-p7ahgnruwh] {
    fill: var(--theme-primary, #6366f1);
}

.header-title h1[b-p7ahgnruwh] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.activity-stats[b-p7ahgnruwh] {
    display: flex;
    gap: 0.5rem;
}

.stat-badge[b-p7ahgnruwh] {
    background: var(--theme-bg-info, #e0f2fe);
    color: var(--theme-text-info, #0369a1);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.filter-bar[b-p7ahgnruwh] {
    margin-bottom: 1.5rem;
}

.filter-select[b-p7ahgnruwh] {
    padding: 0.625rem 1rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-surface, white);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
    min-width: 160px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-select:focus[b-p7ahgnruwh] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.loading-state[b-p7ahgnruwh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
}

.spinner[b-p7ahgnruwh] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-p7ahgnruwh 0.8s linear infinite;
}

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

.loading-text[b-p7ahgnruwh] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 1rem;
    margin: 0;
}

.empty-state[b-p7ahgnruwh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--theme-surface, white);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.empty-icon[b-p7ahgnruwh] {
    fill: var(--theme-text-secondary, #64748b);
    opacity: 0.4;
}

.empty-title[b-p7ahgnruwh] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.empty-text[b-p7ahgnruwh] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.95rem;
    max-width: 400px;
    margin: 0;
    line-height: 1.5;
}

.btn-clear-filter[b-p7ahgnruwh] {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--theme-primary, #6366f1);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-clear-filter:hover[b-p7ahgnruwh] {
    background: var(--theme-primary-hover, #4f46e5);
}

.timeline-container[b-p7ahgnruwh] {
    position: relative;
    padding-left: 2rem;
    border-left: 2px solid var(--theme-border, #e2e8f0);
}

.timeline-item[b-p7ahgnruwh] {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.timeline-item:last-child[b-p7ahgnruwh] {
    margin-bottom: 0;
}

.timeline-marker[b-p7ahgnruwh] {
    position: absolute;
    left: -2.6rem;
    top: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--theme-primary, #6366f1);
    border: 3px solid var(--theme-surface, white);
    box-shadow: 0 0 0 2px var(--theme-border, #e2e8f0);
}

.timeline-marker.marker-login[b-p7ahgnruwh] { background-color: #0ea5e9; }
.timeline-marker.marker-task[b-p7ahgnruwh] { background-color: #8b5cf6; }
.timeline-marker.marker-goal[b-p7ahgnruwh], .timeline-marker.marker-objective[b-p7ahgnruwh] { background-color: #10b981; }
.timeline-marker.marker-account[b-p7ahgnruwh] { background-color: #f59e0b; }
.timeline-marker.marker-transaction[b-p7ahgnruwh] { background-color: #ef4444; }
.timeline-marker.marker-contact[b-p7ahgnruwh] { background-color: #ec4899; }
.timeline-marker.marker-project[b-p7ahgnruwh] { background-color: #06b6d4; }
.timeline-marker.marker-time[b-p7ahgnruwh] { background-color: #64748b; }
.timeline-marker.marker-campaign[b-p7ahgnruwh] { background-color: #f97316; }

.timeline-date[b-p7ahgnruwh] {
    font-size: 0.85rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.timeline-content.card[b-p7ahgnruwh] {
    background-color: var(--theme-surface, white);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid var(--theme-border, #e2e8f0);
    transition: transform 0.2s, box-shadow 0.2s;
}

.timeline-content.card:hover[b-p7ahgnruwh] {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card-header-row[b-p7ahgnruwh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.timestamp-full[b-p7ahgnruwh] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

.activity-type-badge[b-p7ahgnruwh] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-login[b-p7ahgnruwh] { background-color: #e0f2fe; color: #0369a1; }
.badge-task[b-p7ahgnruwh] { background-color: #f3e8ff; color: #7c3aed; }
.badge-goal[b-p7ahgnruwh], .badge-objective[b-p7ahgnruwh] { background-color: #d1fae5; color: #059669; }
.badge-account[b-p7ahgnruwh] { background-color: #fef3c7; color: #d97706; }
.badge-transaction[b-p7ahgnruwh] { background-color: #fee2e2; color: #dc2626; }
.badge-contact[b-p7ahgnruwh] { background-color: #fce7f3; color: #db2777; }
.badge-project[b-p7ahgnruwh] { background-color: #cffafe; color: #0891b2; }
.badge-time[b-p7ahgnruwh] { background-color: #f1f5f9; color: #475569; }
.badge-campaign[b-p7ahgnruwh] { background-color: #ffedd5; color: #ea580c; }
.badge-default[b-p7ahgnruwh] { background-color: #f3f4f6; color: #6b7280; }

.card-title[b-p7ahgnruwh] {
    margin: 0 0 0.375rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.card-text[b-p7ahgnruwh] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.4;
}

.show-more-btn[b-p7ahgnruwh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem auto 0;
    padding: 0.75rem 1.5rem;
    background: var(--theme-primary, #6366f1);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.show-more-btn:hover[b-p7ahgnruwh] {
    background: var(--theme-primary-hover, #4f46e5);
    transform: translateY(-1px);
}

.show-more-btn svg[b-p7ahgnruwh] {
    fill: white;
}

/* Dark theme support */
.theme-space[b-p7ahgnruwh], .theme-winter[b-p7ahgnruwh], .theme-nature[b-p7ahgnruwh], .theme-ocean[b-p7ahgnruwh] {
    --dark-surface: rgba(30, 41, 59, 0.8);
    --dark-border: rgba(255, 255, 255, 0.1);
}

.theme-space .header-title h1[b-p7ahgnruwh],
.theme-winter .header-title h1[b-p7ahgnruwh],
.theme-nature .header-title h1[b-p7ahgnruwh],
.theme-ocean .header-title h1[b-p7ahgnruwh] {
    color: white;
}

.theme-space .empty-state[b-p7ahgnruwh],
.theme-winter .empty-state[b-p7ahgnruwh],
.theme-nature .empty-state[b-p7ahgnruwh],
.theme-ocean .empty-state[b-p7ahgnruwh],
.theme-space .timeline-content.card[b-p7ahgnruwh],
.theme-winter .timeline-content.card[b-p7ahgnruwh],
.theme-nature .timeline-content.card[b-p7ahgnruwh],
.theme-ocean .timeline-content.card[b-p7ahgnruwh] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.theme-space .timeline-container[b-p7ahgnruwh],
.theme-winter .timeline-container[b-p7ahgnruwh],
.theme-nature .timeline-container[b-p7ahgnruwh],
.theme-ocean .timeline-container[b-p7ahgnruwh] {
    border-left-color: rgba(255, 255, 255, 0.15);
}

.theme-space .timeline-marker[b-p7ahgnruwh],
.theme-winter .timeline-marker[b-p7ahgnruwh],
.theme-nature .timeline-marker[b-p7ahgnruwh],
.theme-ocean .timeline-marker[b-p7ahgnruwh] {
    border-color: rgba(30, 41, 59, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.theme-space .filter-select[b-p7ahgnruwh],
.theme-winter .filter-select[b-p7ahgnruwh],
.theme-nature .filter-select[b-p7ahgnruwh],
.theme-ocean .filter-select[b-p7ahgnruwh] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.theme-space .filter-select option[b-p7ahgnruwh],
.theme-winter .filter-select option[b-p7ahgnruwh],
.theme-nature .filter-select option[b-p7ahgnruwh],
.theme-ocean .filter-select option[b-p7ahgnruwh] {
    background: #1e293b;
    color: white;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .header-title h1[b-p7ahgnruwh] {
        font-size: 1.35rem;
    }

    .header-title svg[b-p7ahgnruwh] {
        width: 24px;
        height: 24px;
    }

    .activity-stats[b-p7ahgnruwh] {
        gap: 0.35rem;
    }

    .stat-badge[b-p7ahgnruwh] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .timeline-container[b-p7ahgnruwh] {
        padding-left: 20px;
    }

    .timeline-content.card[b-p7ahgnruwh] {
        padding: 14px;
    }
}

.theme-space .empty-title[b-p7ahgnruwh],
.theme-winter .empty-title[b-p7ahgnruwh],
.theme-nature .empty-title[b-p7ahgnruwh],
.theme-ocean .empty-title[b-p7ahgnruwh],
.theme-space .card-title[b-p7ahgnruwh],
.theme-winter .card-title[b-p7ahgnruwh],
.theme-nature .card-title[b-p7ahgnruwh],
.theme-ocean .card-title[b-p7ahgnruwh] {
    color: white;
}

.theme-space .empty-text[b-p7ahgnruwh],
.theme-winter .empty-text[b-p7ahgnruwh],
.theme-nature .empty-text[b-p7ahgnruwh],
.theme-ocean .empty-text[b-p7ahgnruwh],
.theme-space .card-text[b-p7ahgnruwh],
.theme-winter .card-text[b-p7ahgnruwh],
.theme-nature .card-text[b-p7ahgnruwh],
.theme-ocean .card-text[b-p7ahgnruwh],
.theme-space .timestamp-full[b-p7ahgnruwh],
.theme-winter .timestamp-full[b-p7ahgnruwh],
.theme-nature .timestamp-full[b-p7ahgnruwh],
.theme-ocean .timestamp-full[b-p7ahgnruwh] {
    color: rgba(255, 255, 255, 0.7);
}

.theme-space .stat-badge[b-p7ahgnruwh],
.theme-winter .stat-badge[b-p7ahgnruwh],
.theme-nature .stat-badge[b-p7ahgnruwh],
.theme-ocean .stat-badge[b-p7ahgnruwh] {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
}
/* /Pages/Global/Chatbot.razor.rz.scp.css */
/* ============================================
   Chatbot.razor.css - Full Page AI Chatbot
   Parent-scoped styles only.
   Child component styles live in their own .razor.css files:
     - ChatSidebar.razor.css
     - ChatHeader.razor.css
     - ChatHelpPanel.razor.css
     - ChatWelcome.razor.css
     - ChatMessageBubble.razor.css
     - ChatTypingIndicator.razor.css
     - ChatInput.razor.css
   ============================================ */

/* Themed Container - Full Screen */
.chatbot-container[b-5ya2gjkkub] {
    min-height: calc(100vh - 56px);
    height: calc(100vh - 56px);
    position: relative;
    overflow: hidden;
    transition: background 0.5s ease;
}

/* Theme Backgrounds */
.chatbot-container.theme-cloud[b-5ya2gjkkub] {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 30%, #7dd3fc 70%, #38bdf8 100%);
}

.chatbot-container.theme-space[b-5ya2gjkkub] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

.chatbot-container.theme-winter[b-5ya2gjkkub] {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

.chatbot-container.theme-nature[b-5ya2gjkkub] {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #16a34a 100%);
}

.chatbot-container.theme-ocean[b-5ya2gjkkub] {
    background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 30%, #0284c7 70%, #0ea5e9 100%);
}

.chatbot-layout[b-5ya2gjkkub] {
    display: flex;
    height: calc(100% - 32px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
    position: relative;
    gap: 16px;
}

/* Mobile Sidebar Backdrop */
.sidebar-backdrop[b-5ya2gjkkub] {
    display: none;
}

/* ============================================
   MAIN CHAT AREA
   ============================================ */

.chatbot-page[b-5ya2gjkkub] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Messages Area */
.chatbot-messages[b-5ya2gjkkub] {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #f8fafc;
}

/* Scrollbar */
.chatbot-messages[b-5ya2gjkkub]::-webkit-scrollbar {
    width: 6px;
}

.chatbot-messages[b-5ya2gjkkub]::-webkit-scrollbar-track {
    background: transparent;
}

.chatbot-messages[b-5ya2gjkkub]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.chatbot-messages[b-5ya2gjkkub]::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Animations */
.fade-in[b-5ya2gjkkub] {
    animation: fadeIn-b-5ya2gjkkub 0.3s ease-out;
}

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

/* ============================================
   DARK THEME STYLES
   ============================================ */

/* Main Chat Area - Dark Themes */
.chatbot-container.theme-space .chatbot-page[b-5ya2gjkkub],
.chatbot-container.theme-winter .chatbot-page[b-5ya2gjkkub],
.chatbot-container.theme-nature .chatbot-page[b-5ya2gjkkub],
.chatbot-container.theme-ocean .chatbot-page[b-5ya2gjkkub] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Messages Area - Dark Themes */
.chatbot-container.theme-space .chatbot-messages[b-5ya2gjkkub],
.chatbot-container.theme-winter .chatbot-messages[b-5ya2gjkkub],
.chatbot-container.theme-nature .chatbot-messages[b-5ya2gjkkub],
.chatbot-container.theme-ocean .chatbot-messages[b-5ya2gjkkub] {
    background: #1e293b;
}

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

@media (max-width: 900px) {
    .sidebar-backdrop[b-5ya2gjkkub] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        z-index: 999;
        animation: fadeIn-b-5ya2gjkkub 0.2s ease-out;
    }

    .chatbot-layout[b-5ya2gjkkub] {
        padding: 0;
        gap: 0;
    }

    .chatbot-page[b-5ya2gjkkub] {
        border-radius: 0;
    }
}

@media (max-width: 768px) {
    .chatbot-container[b-5ya2gjkkub] {
        height: calc(100dvh - 56px);
    }

    .chatbot-layout[b-5ya2gjkkub] {
        height: 100%;
        padding: 0;
        margin: 0;
        max-width: 100%;
    }

    .chatbot-page[b-5ya2gjkkub] {
        height: 100%;
        border-radius: 0;
    }

    .chatbot-messages[b-5ya2gjkkub] {
        padding: 12px 8px;
    }
}

@media (max-width: 400px) {
    .chatbot-messages[b-5ya2gjkkub] {
        padding: 8px 6px;
        gap: 12px;
    }
}
/* /Pages/Global/Connections.razor.rz.scp.css */
/* ============================================
   CONNECTIONS — People Management
   ============================================ */
.connections-page[b-08djxsv61e] {
    --c-primary: var(--theme-primary, #6366f1);
    --c-primary-light: var(--theme-accent, #818cf8);
    --c-primary-glow: rgba(99, 102, 241, 0.15);
    --c-surface: var(--theme-surface, #ffffff);
    --c-surface-elevated: var(--theme-surface, #ffffff);
    --c-background: var(--theme-surface-secondary, #f8fafc);
    --c-text: var(--theme-text-primary, #1e293b);
    --c-text-secondary: var(--theme-text-secondary, #64748b);
    --c-text-muted: var(--theme-text-muted, #94a3b8);
    --c-border: var(--theme-border, #e2e8f0);
    --c-hover: var(--theme-link-hover-bg, #f1f5f9);
    --c-success: #10b981;
    --c-danger: #ef4444;

    min-height: calc(100vh - 56px);
    background: var(--c-background);
    padding: 0;
}

/* Dark theme overrides */
.connections-page.theme-space[b-08djxsv61e],
.connections-page.theme-winter[b-08djxsv61e],
.connections-page.theme-nature[b-08djxsv61e],
.connections-page.theme-ocean[b-08djxsv61e],
.connections-page.theme-mystic[b-08djxsv61e],
.connections-page.theme-tron[b-08djxsv61e] {
    --c-surface: rgba(30, 41, 59, 0.95);
    --c-surface-elevated: rgba(51, 65, 85, 0.9);
    --c-background: rgba(15, 23, 42, 0.9);
    --c-hover: rgba(51, 65, 85, 0.5);
    --c-border: rgba(71, 85, 105, 0.5);
}

/* ============================================
   HEADER
   ============================================ */
.page-header[b-08djxsv61e] {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    padding: 24px 32px;
}

.header-brand[b-08djxsv61e] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.header-icon[b-08djxsv61e] {
    width: 32px;
    height: 32px;
    color: var(--c-primary);
}

.page-header h1[b-08djxsv61e] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   CONTENT
   ============================================ */
.connections-content[b-08djxsv61e] {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 32px;
}

/* Tab Bar */
.tab-bar[b-08djxsv61e] {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--c-surface);
    border-radius: 12px;
    padding: 4px;
    border: 1px solid var(--c-border);
}

.tab[b-08djxsv61e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    background: none;
    color: var(--c-text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.tab:hover[b-08djxsv61e] {
    color: var(--c-text);
    background: var(--c-hover);
}

.tab.active[b-08djxsv61e] {
    color: white;
    background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.tab-count[b-08djxsv61e] {
    background: rgba(255,255,255,0.2);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
}

.tab:not(.active) .tab-count[b-08djxsv61e] {
    background: var(--c-hover);
    color: var(--c-text-secondary);
}

.tab-count.highlight[b-08djxsv61e] {
    background: rgba(255,255,255,0.3);
    animation: pulse-badge-b-08djxsv61e 2s infinite;
}

@keyframes pulse-badge-b-08djxsv61e {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================
   CARD GRID
   ============================================ */
.card-grid[b-08djxsv61e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.person-card[b-08djxsv61e] {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    transition: all 0.2s;
}

.person-card:hover[b-08djxsv61e] {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.person-card.pending-card[b-08djxsv61e] {
    border-color: var(--c-primary-light);
    background: linear-gradient(180deg, var(--c-primary-glow) 0%, var(--c-surface) 40%);
}

.person-avatar[b-08djxsv61e] {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.person-avatar.large[b-08djxsv61e] {
    width: 64px;
    height: 64px;
    font-size: 1.2rem;
}

.person-name[b-08djxsv61e] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--c-text);
}

.connected-since[b-08djxsv61e] {
    font-size: 0.78rem;
    color: var(--c-text-muted);
}

.request-message[b-08djxsv61e] {
    font-size: 0.82rem;
    color: var(--c-text-secondary);
    font-style: italic;
    margin: 0;
    line-height: 1.4;
}

.request-time[b-08djxsv61e] {
    font-size: 0.75rem;
    color: var(--c-text-muted);
}

/* Card Actions */
.card-actions[b-08djxsv61e] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
}

.btn-accept[b-08djxsv61e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--c-success) 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-accept:hover[b-08djxsv61e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.btn-accept svg[b-08djxsv61e] {
    width: 16px;
    height: 16px;
}

.btn-decline[b-08djxsv61e] {
    padding: 8px 16px;
    background: none;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-decline:hover[b-08djxsv61e] {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: rgba(239, 68, 68, 0.05);
}

.btn-message[b-08djxsv61e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-message:hover[b-08djxsv61e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-message svg[b-08djxsv61e] {
    width: 14px;
    height: 14px;
}

.btn-remove[b-08djxsv61e] {
    padding: 8px 12px;
    background: none;
    color: var(--c-text-muted);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-remove:hover[b-08djxsv61e] {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: rgba(239, 68, 68, 0.05);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state[b-08djxsv61e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state svg[b-08djxsv61e] {
    width: 56px;
    height: 56px;
    color: var(--c-text-muted);
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-state h3[b-08djxsv61e] {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: var(--c-text);
}

.empty-state p[b-08djxsv61e] {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.9rem;
}

.btn-discover[b-08djxsv61e] {
    margin-top: 16px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-discover:hover[b-08djxsv61e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* ============================================
   DISCOVER SECTION
   ============================================ */
.discover-section[b-08djxsv61e] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.search-bar[b-08djxsv61e] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 12px;
    padding: 6px 12px;
    transition: border-color 0.2s;
}

.search-bar:focus-within[b-08djxsv61e] {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-glow);
}

.search-icon[b-08djxsv61e] {
    width: 20px;
    height: 20px;
    color: var(--c-text-muted);
    flex-shrink: 0;
}

.search-input[b-08djxsv61e] {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: 0.92rem;
    color: var(--c-text);
    padding: 8px 4px;
}

.search-input[b-08djxsv61e]::placeholder {
    color: var(--c-text-muted);
}

.search-clear[b-08djxsv61e] {
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}

.search-clear:hover[b-08djxsv61e] {
    color: var(--c-text);
    background: var(--c-hover);
}

.search-btn[b-08djxsv61e] {
    padding: 8px 18px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.search-btn:hover:not(:disabled)[b-08djxsv61e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.search-btn:disabled[b-08djxsv61e] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Connect Button */
.btn-connect[b-08djxsv61e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--c-primary) 0%, #a855f7 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-connect:hover[b-08djxsv61e] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-connect svg[b-08djxsv61e] {
    width: 16px;
    height: 16px;
}

/* Status Badges */
.status-badge[b-08djxsv61e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-badge.connected[b-08djxsv61e] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--c-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.pending[b-08djxsv61e] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ============================================
   SKELETON
   ============================================ */
.person-card.skeleton[b-08djxsv61e] {
    pointer-events: none;
}

.skeleton-avatar-xl[b-08djxsv61e] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--c-hover);
    animation: shimmer-b-08djxsv61e 1.5s infinite;
}

.skeleton-line[b-08djxsv61e] {
    height: 12px;
    border-radius: 6px;
    background: var(--c-hover);
    animation: shimmer-b-08djxsv61e 1.5s infinite;
}

.skeleton-line.short[b-08djxsv61e] { width: 60%; }
.skeleton-line.shorter[b-08djxsv61e] { width: 40%; }

@keyframes shimmer-b-08djxsv61e {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .page-header[b-08djxsv61e] {
        padding: 20px 16px;
    }

    .connections-content[b-08djxsv61e] {
        padding: 16px;
    }

    .card-grid[b-08djxsv61e] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Global/MailBox.razor.rz.scp.css */
/* ============================================
   TRANSMIT - Modern Messaging Experience
   ============================================ */
.transmit-page[b-39go3zpjoh] {
    --tx-primary: var(--theme-primary, #6366f1);
    --tx-primary-light: var(--theme-accent, #818cf8);
    --tx-primary-glow: rgba(99, 102, 241, 0.3);
    --tx-success: var(--theme-text-success, #10b981);
    --tx-warning: var(--theme-text-warning, #f59e0b);
    --tx-danger: var(--theme-text-danger, #ef4444);
    --tx-surface: var(--theme-surface, #ffffff);
    --tx-surface-elevated: var(--theme-surface, #ffffff);
    --tx-background: var(--theme-surface-secondary, #f8fafc);
    --tx-text: var(--theme-text-primary, #1e293b);
    --tx-text-secondary: var(--theme-text-secondary, #64748b);
    --tx-text-muted: var(--theme-text-muted, #94a3b8);
    --tx-border: var(--theme-border, #e2e8f0);
    --tx-hover: var(--theme-link-hover-bg, #f1f5f9);
    --tx-input-bg: var(--theme-input-bg, #ffffff);
    /* TR-D-2 (2026-05): sent-bubble gradient flows through theme primary so it
       harmonizes across all 8 themes. The 90%/55% mix gives a subtle gradient
       sheen without requiring a separate accent token; falls back to the
       original indigo→violet for themes without primary defined. */
    --tx-sent-bubble: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #6366f1) 100%, black 0%) 0%,
        color-mix(in srgb, var(--theme-primary, #8b5cf6) 80%, white 20%) 100%);
    --tx-received-bubble: var(--theme-surface-secondary, #f1f5f9);
    
    display: flex;
    height: calc(100vh - 56px);
    overflow: hidden;
}

/* Dark theme overrides */
.transmit-page.theme-space[b-39go3zpjoh],
.transmit-page.theme-winter[b-39go3zpjoh],
.transmit-page.theme-nature[b-39go3zpjoh],
.transmit-page.theme-ocean[b-39go3zpjoh],
.transmit-page.theme-mystic[b-39go3zpjoh],
.transmit-page.theme-tron[b-39go3zpjoh] {
    --tx-surface: rgba(30, 41, 59, 0.95);
    --tx-surface-elevated: rgba(51, 65, 85, 0.9);
    --tx-background: rgba(15, 23, 42, 0.9);
    --tx-hover: rgba(51, 65, 85, 0.5);
    --tx-input-bg: rgba(15, 23, 42, 0.8);
    --tx-received-bubble: rgba(51, 65, 85, 0.8);
    --tx-border: rgba(71, 85, 105, 0.5);
}

/* ============================================
   CONVERSATIONS SIDEBAR
   ============================================ */
.conversations-sidebar[b-39go3zpjoh] {
    width: 360px;
    background: var(--tx-surface);
    border-right: 1px solid var(--tx-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

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

.brand[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon[b-39go3zpjoh] {
    width: 28px;
    height: 28px;
    color: var(--tx-primary);
}

.brand h1[b-39go3zpjoh] {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    /* TR-D-2 (2026-05): brand wordmark gradient flows through theme primary. */
    background: linear-gradient(135deg, var(--tx-primary) 0%, color-mix(in srgb, var(--tx-primary) 70%, white 30%) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.new-message-btn[b-39go3zpjoh] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--tx-primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px var(--tx-primary-glow);
}

.new-message-btn:hover[b-39go3zpjoh] {
    transform: scale(1.05);
    box-shadow: 0 4px 16px var(--tx-primary-glow);
}

.new-message-btn svg[b-39go3zpjoh] {
    width: 20px;
    height: 20px;
}

/* Search */
.search-container[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 16px;
    padding: 10px 14px;
    background: var(--tx-background);
    border: 1px solid var(--tx-border);
    border-radius: 12px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-container:focus-within[b-39go3zpjoh] {
    border-color: var(--tx-primary);
    box-shadow: 0 0 0 3px var(--tx-primary-glow);
}

.search-container svg[b-39go3zpjoh] {
    width: 18px;
    height: 18px;
    color: var(--tx-text-muted);
    flex-shrink: 0;
}

.search-container input[b-39go3zpjoh] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: var(--tx-text);
}

.search-container input[b-39go3zpjoh]::placeholder {
    color: var(--tx-text-muted);
}

/* Filter Tabs */
.filter-tabs[b-39go3zpjoh] {
    display: flex;
    gap: 4px;
    padding: 0 16px 12px;
}

.tab[b-39go3zpjoh] {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--tx-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab:hover[b-39go3zpjoh] {
    background: var(--tx-hover);
    color: var(--tx-text);
}

.tab.active[b-39go3zpjoh] {
    background: var(--tx-primary);
    color: white;
}

.tab .badge[b-39go3zpjoh] {
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
}

.tab:not(.active) .badge[b-39go3zpjoh] {
    background: var(--tx-primary);
    color: white;
}

.tab .badge.warning[b-39go3zpjoh] {
    background: var(--tx-warning);
}

/* Conversation List */
.conversation-list[b-39go3zpjoh] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.conversation-item[b-39go3zpjoh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    margin-bottom: 4px;
}

.conversation-item:hover[b-39go3zpjoh] {
    background: var(--tx-hover);
}

.conversation-item.active[b-39go3zpjoh] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.conversation-item.unread .conversation-name[b-39go3zpjoh],
.conversation-item.unread .conversation-subject[b-39go3zpjoh] {
    font-weight: 600;
}

.avatar[b-39go3zpjoh] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}


.avatar.color-1[b-39go3zpjoh] { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); }
.avatar.color-2[b-39go3zpjoh] { background: linear-gradient(135deg, #ec4899 0%, #f472b6 100%); }
.avatar.color-3[b-39go3zpjoh] { background: linear-gradient(135deg, #10b981 0%, #34d399 100%); }
.avatar.color-4[b-39go3zpjoh] { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%); }
.avatar.color-5[b-39go3zpjoh] { background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); }
.avatar.color-6[b-39go3zpjoh] { background: linear-gradient(135deg, #ef4444 0%, #f87171 100%); }

/* TR-G-6 (2026-05): multi-avatar stack for group rows. Avatars overlap with
   a small negative margin so the cluster reads as "a group" at a glance. */
.avatar-stack[b-39go3zpjoh] {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.avatar-stack .avatar[b-39go3zpjoh] {
    border: 2px solid var(--tx-surface);
    margin-right: -10px;
    z-index: 1;
}

.avatar-stack .avatar:last-child[b-39go3zpjoh] {
    margin-right: 0;
}

.avatar-stack.large .avatar[b-39go3zpjoh] {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
}

.avatar.avatar-small[b-39go3zpjoh] {
    width: 28px;
    height: 28px;
    font-size: 0.7rem;
}

/* Group badge in conversation-name row */
.conversation-group-badge[b-39go3zpjoh] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: 0.4rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tx-primary) 12%, transparent);
    color: var(--tx-primary);
    font-size: 0.7rem;
    font-weight: 600;
}

/* Avatar Container with Online Indicator */
.avatar-container[b-39go3zpjoh] {
    position: relative;
    flex-shrink: 0;
}

.online-indicator[b-39go3zpjoh] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--tx-surface);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.online-indicator.online[b-39go3zpjoh] {
    background: #22c55e;
}

.online-indicator.idle[b-39go3zpjoh] {
    background: #f59e0b;
}

.online-indicator.dnd[b-39go3zpjoh] {
    background: #ef4444;
}

.online-indicator.large[b-39go3zpjoh] {
    width: 14px;
    height: 14px;
    border-width: 3px;
}

.online-status-text[b-39go3zpjoh] {
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 6px;
}

/* Typing Indicator */
.typing-indicator[b-39go3zpjoh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    color: var(--tx-primary);
    font-size: 0.85rem;
    font-weight: 400;
}

.typing-text[b-39go3zpjoh] {
    font-style: italic;
}

.typing-dots[b-39go3zpjoh] {
    display: flex;
    gap: 3px;
}

.typing-dots span[b-39go3zpjoh] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tx-primary);
    animation: typingBounce-b-39go3zpjoh 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1)[b-39go3zpjoh] {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2)[b-39go3zpjoh] {
    animation-delay: -0.16s;
}

.typing-dots span:nth-child(3)[b-39go3zpjoh] {
    animation-delay: 0s;
}

@keyframes typingBounce-b-39go3zpjoh {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.online-status-text.online[b-39go3zpjoh] {
    color: #22c55e;
}

.online-status-text.idle[b-39go3zpjoh] {
    color: #f59e0b;
}

.online-status-text.dnd[b-39go3zpjoh] {
    color: #ef4444;
}

/* Dark theme adjustments for online indicator */
.transmit-page.theme-space .online-indicator[b-39go3zpjoh],
.transmit-page.theme-winter .online-indicator[b-39go3zpjoh],
.transmit-page.theme-nature .online-indicator[b-39go3zpjoh],
.transmit-page.theme-ocean .online-indicator[b-39go3zpjoh],
.transmit-page.theme-mystic .online-indicator[b-39go3zpjoh],
.transmit-page.theme-tron .online-indicator[b-39go3zpjoh] {
    border-color: var(--tx-surface);
}

.conversation-content[b-39go3zpjoh] {
    flex: 1;
    min-width: 0;
}

.conversation-header[b-39go3zpjoh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.conversation-name[b-39go3zpjoh] {
    font-size: 0.9375rem;
    color: var(--tx-text);
}

.conversation-time[b-39go3zpjoh] {
    font-size: 0.75rem;
    color: var(--tx-text-muted);
}

.conversation-subject[b-39go3zpjoh] {
    font-size: 0.8125rem;
    color: var(--tx-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-preview[b-39go3zpjoh] {
    font-size: 0.8125rem;
    color: var(--tx-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread-indicator[b-39go3zpjoh] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tx-primary);
    box-shadow: 0 0 8px var(--tx-primary-glow);
}

/* Conversation badges */
.unread-badge[b-39go3zpjoh] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--tx-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-count[b-39go3zpjoh] {
    position: absolute;
    right: 14px;
    bottom: 14px;
    font-size: 0.7rem;
    color: var(--tx-text-muted);
}

.draft-badge[b-39go3zpjoh] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--tx-warning);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
}

.message-count-badge[b-39go3zpjoh] {
    font-size: 0.75rem;
    color: var(--tx-text-muted);
    padding: 4px 8px;
    background: var(--tx-hover);
    border-radius: 6px;
}

/* Empty Conversations */
.empty-conversations[b-39go3zpjoh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.empty-conversations svg[b-39go3zpjoh] {
    width: 64px;
    height: 64px;
    color: var(--tx-text-muted);
    opacity: 0.5;
    margin-bottom: 16px;
}

.empty-conversations p[b-39go3zpjoh] {
    color: var(--tx-text-secondary);
    margin: 0 0 20px;
}

.start-btn[b-39go3zpjoh] {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: var(--tx-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.start-btn:hover[b-39go3zpjoh] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--tx-primary-glow);
}

/* Loading Skeleton */
.loading-pulse[b-39go3zpjoh] {
    padding: 8px;
}

.skeleton-item[b-39go3zpjoh] {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin-bottom: 4px;
}

.skeleton-avatar[b-39go3zpjoh] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--tx-hover) 25%, var(--tx-border) 50%, var(--tx-hover) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-39go3zpjoh 1.5s infinite;
}

.skeleton-content[b-39go3zpjoh] {
    flex: 1;
}

.skeleton-line[b-39go3zpjoh] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--tx-hover) 25%, var(--tx-border) 50%, var(--tx-hover) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-39go3zpjoh 1.5s infinite;
    margin-bottom: 8px;
}

.skeleton-line.short[b-39go3zpjoh] {
    width: 60%;
}

@keyframes shimmer-b-39go3zpjoh {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   MAIN CHAT AREA
   ============================================ */
.chat-area[b-39go3zpjoh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--tx-background);
    min-width: 0;
}

/* Chat Header */
.chat-header[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--tx-surface);
    border-bottom: 1px solid var(--tx-border);
}

.chat-recipient[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.chat-recipient .avatar[b-39go3zpjoh] {
    width: 44px;
    height: 44px;
}

.recipient-info h2[b-39go3zpjoh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tx-text);
}

.recipient-email[b-39go3zpjoh] {
    font-size: 0.8125rem;
    color: var(--tx-text-secondary);
}

.chat-actions[b-39go3zpjoh] {
    display: flex;
    gap: 8px;
}

.action-btn[b-39go3zpjoh] {
    width: 40px;
    height: 40px;
    border: 1px solid var(--tx-border);
    border-radius: 10px;
    background: var(--tx-surface);
    color: var(--tx-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.action-btn:hover[b-39go3zpjoh] {
    border-color: var(--tx-primary);
    color: var(--tx-primary);
    background: var(--tx-hover);
}

.action-btn.active[b-39go3zpjoh] {
    background: var(--tx-primary);
    border-color: var(--tx-primary);
    color: white;
}

.action-btn.primary[b-39go3zpjoh] {
    background: var(--tx-primary);
    border-color: var(--tx-primary);
    color: white;
}

.action-btn.primary:hover[b-39go3zpjoh] {
    background: var(--tx-primary-light);
}

.action-btn svg[b-39go3zpjoh] {
    width: 18px;
    height: 18px;
}

/* Messages Container */
.messages-container[b-39go3zpjoh] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.message-thread[b-39go3zpjoh] {
    max-width: 800px;
    margin: 0 auto;
}

.subject-banner[b-39go3zpjoh] {
    background: var(--tx-surface);
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid var(--tx-border);
}

.subject-label[b-39go3zpjoh] {
    font-size: 0.75rem;
    color: var(--tx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.subject-text[b-39go3zpjoh] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tx-text);
    margin-left: 8px;
}

.message-date-divider[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.message-date-divider span[b-39go3zpjoh] {
    padding: 6px 14px;
    background: var(--tx-surface);
    border-radius: 20px;
    font-size: 0.75rem;
    color: var(--tx-text-secondary);
    border: 1px solid var(--tx-border);
}

.message-group[b-39go3zpjoh] {
    margin-bottom: 16px;
}

/* Message Bubbles
   TR-V-PARITY-2 (2026-05-23): tightened wrapper gap (8 → 2) and reaction
   button (28 → 24) so the [bubble, reaction-btn] cluster reads as a single
   unit instead of two separated controls. justify-content explicitly anchors
   the cluster on the correct side (start for received, end for sent — the
   :has() row-reverse below handles ordering). */
.message-bubble-wrapper[b-39go3zpjoh] {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    margin-bottom: 8px;
    justify-content: flex-start;
}

.message-bubble-wrapper:has(.message-bubble.sent)[b-39go3zpjoh] {
    flex-direction: row-reverse;
    justify-content: flex-start; /* row-reverse + flex-start = pack to the right */
}

.add-reaction-btn[b-39go3zpjoh] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--tx-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
    /* Nudge down so the button visually centers on the bubble's top padding
       row instead of floating above it. */
    margin-top: 6px;
}

.message-bubble-wrapper:hover .add-reaction-btn[b-39go3zpjoh] {
    opacity: 1;
}

.add-reaction-btn:hover[b-39go3zpjoh] {
    background: var(--tx-hover);
    color: var(--tx-text);
}

.add-reaction-btn svg[b-39go3zpjoh] {
    width: 14px;
    height: 14px;
}

.message-bubble[b-39go3zpjoh] {
    max-width: 75%;
    flex: 0 1 auto;
}

/* TR-V-PARITY-2 (2026-05-23): row alignment is handled by the wrapper's
   flex-direction (row for received, row-reverse for sent — see
   .message-bubble-wrapper:has(.message-bubble.sent) above). The auto margins
   below were a legacy pre-flex layout — when combined with flex they consumed
   the entire remaining space and shoved .add-reaction-btn to the far edge of
   the chat area instead of keeping it adjacent to the bubble. Replaced with
   `justify-content` on the wrapper so the [bubble, reaction-btn] cluster
   stays together. */
.message-bubble.sent[b-39go3zpjoh],
.message-bubble.received[b-39go3zpjoh] {
    margin-left: 0;
    margin-right: 0;
}

.bubble-content[b-39go3zpjoh] {
    padding: 14px 18px;
    border-radius: 18px;
    line-height: 1.5;
}

.message-bubble.sent .bubble-content[b-39go3zpjoh] {
    background: var(--tx-sent-bubble);
    color: white;
    border-bottom-right-radius: 6px;
}

.message-bubble.received .bubble-content[b-39go3zpjoh] {
    background: var(--tx-received-bubble);
    color: var(--tx-text);
    border-bottom-left-radius: 6px;
}

.bubble-content p[b-39go3zpjoh] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Bubble Image Attachments */
.bubble-image[b-39go3zpjoh] {
    position: relative;
    margin-bottom: 8px;
    border-radius: 12px;
    overflow: hidden;
}

.bubble-image img[b-39go3zpjoh] {
    width: 100%;
    max-width: 300px;
    height: auto;
    max-height: 250px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    cursor: pointer;
    transition: transform 0.15s;
}

.bubble-image img:hover[b-39go3zpjoh] {
    transform: scale(1.02);
}

.bubble-image .image-actions[b-39go3zpjoh] {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.bubble-image:hover .image-actions[b-39go3zpjoh] {
    opacity: 1;
}

.image-action-btn[b-39go3zpjoh] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    backdrop-filter: blur(4px);
}

.image-action-btn:hover[b-39go3zpjoh] {
    background: var(--tx-primary);
    transform: scale(1.1);
}

.image-action-btn svg[b-39go3zpjoh] {
    width: 16px;
    height: 16px;
}

.bubble-meta[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 0 4px;
}

.message-bubble.sent .bubble-meta[b-39go3zpjoh] {
    justify-content: flex-end;
}

.bubble-time[b-39go3zpjoh] {
    font-size: 0.7rem;
    color: var(--tx-text-muted);
}

.read-status[b-39go3zpjoh], .sent-status[b-39go3zpjoh] {
    display: flex;
    align-items: center;
}

.read-status svg[b-39go3zpjoh] {
    width: 14px;
    height: 14px;
    color: var(--tx-primary);
}

.sent-status svg[b-39go3zpjoh] {
    width: 14px;
    height: 14px;
    color: var(--tx-text-muted);
}

/* Emoji Reactions */
.bubble-reactions[b-39go3zpjoh] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.reaction-pill[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--tx-border);
    border-radius: 14px;
    background: var(--tx-surface);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.15s;
}

.reaction-pill:hover[b-39go3zpjoh] {
    border-color: var(--tx-primary);
    background: var(--tx-hover);
}

.reaction-pill.reacted[b-39go3zpjoh] {
    border-color: var(--tx-primary);
    background: rgba(99, 102, 241, 0.15);
}

.reaction-emoji[b-39go3zpjoh] {
    font-size: 1rem;
}

.reaction-count[b-39go3zpjoh] {
    color: var(--tx-text-secondary);
    font-weight: 500;
}

.reaction-pill.reacted .reaction-count[b-39go3zpjoh] {
    color: var(--tx-primary);
}

/* Emoji Picker */
.emoji-picker-overlay[b-39go3zpjoh] {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.emoji-picker[b-39go3zpjoh] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--tx-surface);
    border-radius: 28px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.emoji-btn[b-39go3zpjoh] {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.emoji-btn:hover[b-39go3zpjoh] {
    background: var(--tx-hover);
    transform: scale(1.2);
}

/* Quick Reply */
/* Bubble-image lightbox
   TR-V-PARITY-1 (2026-05-23): mirrors CompanionTransmitPanel.razor.css's
   .transmit-lightbox-overlay. Image-action buttons retired from bubbles;
   click on image now opens this fullscreen viewer with toolbar (download /
   open in new tab / close). */
.transmit-lightbox-overlay[b-39go3zpjoh] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.transmit-lightbox-toolbar[b-39go3zpjoh] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 9001;
}

.transmit-lightbox-toolbar .lightbox-action-btn[b-39go3zpjoh] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    transition: background 0.15s ease, transform 0.15s ease;
}

.transmit-lightbox-toolbar .lightbox-action-btn:hover[b-39go3zpjoh] {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

.transmit-lightbox-content[b-39go3zpjoh] {
    max-width: 90vw;
    max-height: 90vh;
    cursor: default;
}

.transmit-lightbox-content img[b-39go3zpjoh] {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Bubble image — TR-V-PARITY-1: click-to-open-lightbox affordance. */
.bubble-image[b-39go3zpjoh] {
    cursor: zoom-in;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.bubble-image:hover[b-39go3zpjoh] {
    transform: scale(1.01);
}

/* Quick Reply composer
   TR-V-PARITY-1 (2026-05-23): re-skinned to mirror the FAB Transmit composer
   (TR-V-COMPOSER-4 in CompanionTransmitPanel.razor.css). One bordered
   container holds the textarea on top + an action row underneath; the
   container glows on :focus-within; send button pinned right via margin-left:
   auto. The OLD .reply-input-container + .send-btn rules remain below as
   dead-letter, but the markup no longer references them.
   Legacy markup retired: pill-shape textarea + circular floating send. */
.quick-reply[b-39go3zpjoh] {
    padding: 12px 24px 14px;
    background: var(--tx-surface);
    border-top: 1px solid var(--tx-border);
}

/* Quick-reply image preview thumbnail
   TR-V-PARITY-3.1 (2026-05-25): unified with the compose dialog's
   .compose-attachment-thumb style — single thumbnail + remove (×) overlay.
   Image uploads at paste time so we render the actual remote URL, not a
   base64 data URI. The strip used to also show filename + formatted size
   (the FAB's preview style); dropped for consistency with the compose
   dialog and to align both surfaces' visual shapes. */
.quick-reply-image-preview[b-39go3zpjoh] {
    display: inline-flex;
    position: relative;
    margin: 0 0 8px;
    border-radius: 8px;
    overflow: hidden;
}

.quick-reply-image-preview img[b-39go3zpjoh] {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.quick-reply-image-preview .preview-remove[b-39go3zpjoh] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.quick-reply-image-preview .preview-remove:hover[b-39go3zpjoh] {
    background: rgba(0, 0, 0, 0.85);
}

/* TR-V-PARITY-3.3 (2026-05-25): upload-in-flight spinner thumbnail. Same
   64×64 footprint as the completed thumbnail so the layout doesn't reflow
   when the upload finishes. */
.quick-reply-image-preview.uploading[b-39go3zpjoh] {
    width: 64px;
    height: 64px;
    background: var(--tx-background, #f8fafc);
    border: 1px dashed var(--tx-border, #e2e8f0);
    align-items: center;
    justify-content: center;
}

.quick-reply-image-preview.uploading .spinner-small[b-39go3zpjoh] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--tx-border, #e2e8f0);
    border-top-color: var(--tx-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-39go3zpjoh 0.7s linear infinite;
}

/* Same uploading placeholder for the compose dialog's attachment strip. */
.compose-attachment-thumb.uploading[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tx-background, #f8fafc);
    border: 1px dashed var(--tx-border, #e2e8f0);
}

.compose-attachment-thumb.uploading .spinner-small[b-39go3zpjoh] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--tx-border, #e2e8f0);
    border-top-color: var(--tx-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-39go3zpjoh 0.7s linear infinite;
}

@keyframes spin-b-39go3zpjoh {
    to { transform: rotate(360deg); }
}

.quick-reply-container[b-39go3zpjoh] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 800px;
    margin: 0 auto;
    background: var(--tx-background);
    border: 1px solid var(--tx-border);
    border-radius: 12px;
    padding: 8px 10px 6px 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quick-reply-container:focus-within[b-39go3zpjoh] {
    border-color: var(--tx-primary);
    box-shadow: 0 2px 12px var(--tx-primary-glow);
}

.quick-reply-input[b-39go3zpjoh] {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--tx-text);
    /* Native auto-grow (Chromium 123+, Firefox 130+, Safari 17.4+) so the
       textarea expands as the user types and shrinks on clear. Mirror of
       the FAB composer's .reply-input. */
    resize: none;
    field-sizing: content;
    min-height: 24px;
    max-height: 160px;
    padding: 4px 0;
    overflow-y: auto;
}

.quick-reply-input[b-39go3zpjoh]::placeholder {
    color: var(--tx-text-muted, #94a3b8);
}

.quick-reply-actions[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.quick-reply-action-btn[b-39go3zpjoh] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--tx-text-muted, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.quick-reply-action-btn:hover:not(:disabled)[b-39go3zpjoh] {
    background: var(--tx-primary-glow, rgba(99, 102, 241, 0.1));
    color: var(--tx-primary, #6366f1);
}

.quick-reply-action-btn.active[b-39go3zpjoh] {
    background: var(--tx-primary-glow, rgba(99, 102, 241, 0.12));
    color: var(--tx-primary, #6366f1);
}

.quick-reply-send[b-39go3zpjoh] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--tx-primary, #6366f1) 0%, var(--tx-accent, #a855f7) 100%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
    transition: all 0.15s ease;
}

.quick-reply-send:hover:not(:disabled)[b-39go3zpjoh] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--tx-primary-glow, rgba(99, 102, 241, 0.35));
}

.quick-reply-send:disabled[b-39go3zpjoh] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Quick-reply emoji picker — small popover above the composer. Click on the
   overlay dismisses; click on the panel itself does not (stopPropagation in
   markup). Mirrors the FAB's .composer-emoji-picker. */
.quick-reply-emoji-overlay[b-39go3zpjoh] {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: transparent;
}

.quick-reply-emoji-picker[b-39go3zpjoh] {
    position: absolute;
    bottom: 80px;
    right: 32px;
    max-width: 280px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 10px;
    background: var(--tx-surface, #ffffff);
    border: 1px solid var(--tx-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 90;
}

.quick-reply-emoji-picker .composer-emoji-btn[b-39go3zpjoh] {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.quick-reply-emoji-picker .composer-emoji-btn:hover[b-39go3zpjoh] {
    background: rgba(99, 102, 241, 0.1);
    transform: scale(1.1);
}

/* ---- Legacy rules below remain only so a stale browser cache of the old
        markup doesn't break visually until the bundle reloads. The new
        markup no longer uses .reply-input-container or .send-btn. */
.reply-input-container[b-39go3zpjoh] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    max-width: 800px;
    margin: 0 auto;
}

.reply-input-container textarea[b-39go3zpjoh] {
    flex: 1;
    padding: 14px 18px;
    border: 1px solid var(--tx-border);
    border-radius: 24px;
    background: var(--tx-background);
    color: var(--tx-text);
    font-size: 0.9375rem;
    font-family: inherit;
    resize: none;
    outline: none;
    max-height: 120px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.reply-input-container textarea:focus[b-39go3zpjoh] {
    border-color: var(--tx-primary);
    box-shadow: 0 0 0 3px var(--tx-primary-glow);
}

.reply-input-container textarea[b-39go3zpjoh]::placeholder {
    color: var(--tx-text-muted);
}

.send-btn[b-39go3zpjoh] {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--tx-primary);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.send-btn:hover:not(:disabled)[b-39go3zpjoh] {
    transform: scale(1.05);
    box-shadow: 0 4px 16px var(--tx-primary-glow);
}

.send-btn:disabled[b-39go3zpjoh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.send-btn svg[b-39go3zpjoh] {
    width: 22px;
    height: 22px;
}

/* Empty Chat State
   TR-V-PARITY-1 (2026-05-23): the .empty-chat-hint variant mirrors the FAB
   Transmit panel's .transmit-empty — quiet icon + single line of muted text.
   Big Welcome card + CTA legacy markup retired in MailBox.razor; the
   .empty-chat-content rules below remain for any other consumer that still
   wants the heavy treatment, but Transmit no longer uses them. */
.empty-chat[b-39go3zpjoh] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-chat-hint[b-39go3zpjoh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--tx-text-muted, #94a3b8);
    font-size: 0.95rem;
    text-align: center;
}

.empty-chat-hint p[b-39go3zpjoh] {
    margin: 0;
}

.empty-chat-content[b-39go3zpjoh] {
    text-align: center;
    padding: 40px;
}

.empty-icon[b-39go3zpjoh] {
    width: 100px;
    height: 100px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-icon svg[b-39go3zpjoh] {
    width: 48px;
    height: 48px;
    color: var(--tx-primary);
}

.empty-chat h2[b-39go3zpjoh] {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--tx-text);
}

.empty-chat p[b-39go3zpjoh] {
    margin: 0 0 24px;
    color: var(--tx-text-secondary);
}

.start-conversation-btn[b-39go3zpjoh] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 14px;
    background: var(--tx-primary);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px var(--tx-primary-glow);
}

.start-conversation-btn:hover[b-39go3zpjoh] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--tx-primary-glow);
}

.start-conversation-btn svg[b-39go3zpjoh] {
    width: 20px;
    height: 20px;
}

/* ============================================
   COMPOSE DIALOG CONTENT
   (Dialog chrome handled by BaseDialog)
   Padding provided by BaseDialog .dialog-content
   ============================================ */
.compose-body[b-39go3zpjoh] {
    padding: 0;
}

.compose-field[b-39go3zpjoh] {
    margin-bottom: 16px;
}

.compose-field label[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.compose-field label svg[b-39go3zpjoh] {
    width: 15px;
    height: 15px;
}

.compose-field input[b-39go3zpjoh],
.compose-field textarea[b-39go3zpjoh],
.compose-select[b-39go3zpjoh] {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.compose-field input:hover[b-39go3zpjoh],
.compose-field textarea:hover[b-39go3zpjoh] {
    border-color: var(--theme-text-muted, #94a3b8);
}

.compose-field input:focus[b-39go3zpjoh],
.compose-field textarea:focus[b-39go3zpjoh],
.compose-select:focus[b-39go3zpjoh] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: none;
}

.compose-field textarea[b-39go3zpjoh] {
    resize: vertical;
    min-height: 140px;
    padding-bottom: 40px;
}

.message-field[b-39go3zpjoh] {
    flex: 1;
}

/* Message textarea container with emoji picker */
.message-textarea-container[b-39go3zpjoh] {
    position: relative;
}

.message-textarea-container textarea[b-39go3zpjoh] {
    width: 100%;
}

.compose-textarea-footer[b-39go3zpjoh] {
    position: absolute;
    right: 4px;
    bottom: 4px;
    left: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    border-radius: 0 0 10px 10px;
    pointer-events: none;
}

.char-count[b-39go3zpjoh] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.compose-textarea-footer .compose-action-btn[b-39go3zpjoh] {
    pointer-events: auto;
}

/* TR-V-PARITY-3.6 (2026-05-25): cluster the attach + emoji buttons so they
   sit adjacent on the right side of the footer (char-count stays left).
   Without this wrapper the footer's justify-content: space-between distributes
   three children at start/middle/end, leaving the attach button stranded in
   the middle. */
.compose-action-group[b-39go3zpjoh] {
    display: flex;
    gap: 4px;
    align-items: center;
    pointer-events: none;
}

.compose-action-btn[b-39go3zpjoh] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: var(--theme-link-hover-bg, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.compose-action-btn:hover[b-39go3zpjoh],
.compose-action-btn.active[b-39go3zpjoh] {
    background: var(--theme-primary, #6366f1);
    color: white;
}

.compose-action-btn svg[b-39go3zpjoh] {
    width: 18px;
    height: 18px;
}

/* Compose Emoji Picker */
.compose-emoji-picker[b-39go3zpjoh] {
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 320px;
    max-height: 280px;
    overflow-y: auto;
    padding: 12px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    z-index: 100;
}

.compose-emoji-picker .emoji-btn[b-39go3zpjoh] {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.compose-emoji-picker .emoji-btn:hover[b-39go3zpjoh] {
    background: var(--theme-link-hover-bg, #f1f5f9);
    transform: scale(1.15);
}

.draft-toggle[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    user-select: none;
    padding: 4px 0;
}

.draft-toggle input[b-39go3zpjoh] {
    position: absolute;
    visibility: hidden;
    width: 0;
    height: 0;
}

.toggle-track[b-39go3zpjoh] {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--theme-border, #e2e8f0);
    border-radius: 11px;
    transition: background 0.25s ease;
    flex-shrink: 0;
}

.toggle-thumb[b-39go3zpjoh] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px #9ca3af;
}

.draft-toggle input:checked ~ .toggle-track[b-39go3zpjoh] {
    background: var(--theme-primary, #6366f1);
}

.draft-toggle input:checked ~ .toggle-track .toggle-thumb[b-39go3zpjoh] {
    transform: translateX(18px);
}

.toggle-label[b-39go3zpjoh] {
    font-weight: 500;
}

/* Spinner */
.spinner-small[b-39go3zpjoh] {
    width: 16px;
    height: 16px;
    border: 2px solid #64748b;
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-39go3zpjoh 0.6s linear infinite;
}

@keyframes spin-b-39go3zpjoh {
    to { transform: rotate(360deg); }
}

/* ============================================
   MOBILE BACK BUTTON (hidden on desktop)
   ============================================ */
.mobile-back-btn[b-39go3zpjoh] {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--tx-text-secondary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.mobile-back-btn:hover[b-39go3zpjoh] {
    background: var(--tx-hover);
    color: var(--tx-text);
}

.mobile-back-btn svg[b-39go3zpjoh] {
    width: 22px;
    height: 22px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .conversations-sidebar[b-39go3zpjoh] {
        width: 300px;
    }
}

@media (max-width: 768px) {
    /* Show back button on mobile */
    .mobile-back-btn[b-39go3zpjoh] {
        display: flex;
    }

    /* Full-height single-panel layout */
    .transmit-page[b-39go3zpjoh] {
        flex-direction: column;
    }

    /* Default: show sidebar full-height, hide chat */
    .conversations-sidebar[b-39go3zpjoh] {
        width: 100%;
        height: 100%;
        max-height: none;
        border-right: none;
        border-bottom: none;
        flex: 1;
    }

    .chat-area[b-39go3zpjoh] {
        display: none;
    }

    /* When a conversation is active: hide sidebar, show chat */
    .transmit-page.mobile-chat-active .conversations-sidebar[b-39go3zpjoh] {
        display: none;
    }

    .transmit-page.mobile-chat-active .chat-area[b-39go3zpjoh] {
        display: flex;
        flex: 1;
        min-height: 0;
    }

    /* Compact chat header on mobile */
    .chat-header[b-39go3zpjoh] {
        padding: 10px 12px;
        gap: 8px;
    }

    .chat-recipient[b-39go3zpjoh] {
        gap: 8px;
        min-width: 0;
        flex: 1;
    }

    .chat-recipient .avatar[b-39go3zpjoh] {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
        border-radius: 10px;
    }

    .recipient-info h2[b-39go3zpjoh] {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .recipient-email[b-39go3zpjoh] {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        max-width: 180px;
    }

    .online-status-text[b-39go3zpjoh] {
        display: none;
    }

    .chat-actions[b-39go3zpjoh] {
        flex-shrink: 0;
    }

    .message-count-badge[b-39go3zpjoh] {
        display: none;
    }

    /* Messages area */
    .messages-container[b-39go3zpjoh] {
        padding: 12px;
    }

    .message-bubble[b-39go3zpjoh] {
        max-width: 88%;
    }

    .bubble-content[b-39go3zpjoh] {
        padding: 10px 14px;
    }

    .bubble-image img[b-39go3zpjoh] {
        max-width: 220px;
    }

    /* Quick reply */
    .quick-reply[b-39go3zpjoh] {
        padding: 10px 12px;
    }

    .reply-input-container[b-39go3zpjoh] {
        gap: 8px;
    }

    .reply-input-container textarea[b-39go3zpjoh] {
        padding: 10px 14px;
        font-size: 0.875rem;
    }

    .send-btn[b-39go3zpjoh] {
        width: 42px;
        height: 42px;
    }

    /* Compose field mobile adjustments */
    .compose-field textarea[b-39go3zpjoh] {
        min-height: 100px;
    }

    .compose-field input[b-39go3zpjoh],
    .compose-field textarea[b-39go3zpjoh],
    .compose-select[b-39go3zpjoh] {
        font-size: 1rem;
        padding: 10px 14px;
    }

    /* Sidebar header compact */
    .sidebar-header[b-39go3zpjoh] {
        padding: 12px 16px;
    }

    .brand h1[b-39go3zpjoh] {
        font-size: 1.15rem;
    }

    .brand-icon[b-39go3zpjoh] {
        width: 24px;
        height: 24px;
    }

    /* Emoji picker responsive */
    .compose-emoji-picker[b-39go3zpjoh] {
        width: calc(100vw - 64px);
        max-width: 300px;
        right: 0;
        left: 0;
        grid-template-columns: repeat(7, 1fr);
    }

    .emoji-picker[b-39go3zpjoh] {
        gap: 4px;
        padding: 8px 12px;
    }

    .emoji-btn[b-39go3zpjoh] {
        width: 38px;
        height: 38px;
    }

    /* Empty state compact */
    .empty-chat-content[b-39go3zpjoh] {
        padding: 24px 16px;
    }

    .empty-icon[b-39go3zpjoh] {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        margin-bottom: 16px;
    }

    .empty-icon svg[b-39go3zpjoh] {
        width: 36px;
        height: 36px;
    }

    .empty-chat h2[b-39go3zpjoh] {
        font-size: 1.25rem;
    }

    .start-conversation-btn[b-39go3zpjoh] {
        padding: 12px 24px;
        font-size: 0.9375rem;
        border-radius: 12px;
    }
}

@media (max-width: 400px) {
    .filter-tabs[b-39go3zpjoh] {
        padding: 0 10px 8px;
    }

    .tab[b-39go3zpjoh] {
        padding: 6px 8px;
        font-size: 0.75rem;
    }

    .conversation-item[b-39go3zpjoh] {
        padding: 10px;
        gap: 10px;
    }

    .avatar[b-39go3zpjoh] {
        width: 40px;
        height: 40px;
        font-size: 0.875rem;
        border-radius: 12px;
    }

    .search-container[b-39go3zpjoh] {
        margin: 8px 10px;
        padding: 8px 12px;
    }

    .compose-emoji-picker[b-39go3zpjoh] {
        width: calc(100vw - 48px);
        grid-template-columns: repeat(6, 1fr);
    }

    .recipient-email[b-39go3zpjoh] {
        max-width: 120px;
    }

    .bubble-image img[b-39go3zpjoh] {
        max-width: 180px;
    }

    .compose-field label[b-39go3zpjoh] {
        font-size: 0.7rem;
    }

    /* Chat header tighter at narrow widths */
    .chat-header[b-39go3zpjoh] {
        padding: 8px 10px;
    }

    .chat-recipient .avatar[b-39go3zpjoh] {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .action-btn[b-39go3zpjoh] {
        width: 34px;
        height: 34px;
    }
}

/* ============================================
   TR-G-5 / TR-G-6 / TR-G-8 / TR-V-1 (2026-05)
   Group conversation + multi-recipient compose
   + per-member read receipts + attachments tray
   ============================================ */

/* TR-V-1 / TR-G-5 (2026-05): compose-dialog rules use --theme-* tokens
   directly instead of the page-scoped --tx-* aliases, because BaseDialog
   renders outside the .transmit-page scope (portal-style) where the --tx-*
   custom properties aren't defined. Without this, "+ Add" rendered as
   browser-default-dark-text on dark themes (invisible). */

/* Recipient pills (multi-recipient compose) */
.recipient-pills[b-39go3zpjoh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
}

.recipient-pill[b-39go3zpjoh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 15%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.85rem;
    font-weight: 500;
}

.recipient-pill-remove[b-39go3zpjoh] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0 0 0.2rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.recipient-pill-remove:hover[b-39go3zpjoh] { opacity: 1; }

.recipient-input-row[b-39go3zpjoh] {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.recipient-input-row > :first-child[b-39go3zpjoh] {
    flex: 1;
}

.recipient-add-btn[b-39go3zpjoh] {
    padding: 6px 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-input-bg, var(--theme-surface, #ffffff));
    color: var(--theme-text-primary, #1e293b);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.recipient-add-btn:hover:not(:disabled)[b-39go3zpjoh] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 12%, var(--theme-input-bg, var(--theme-surface, #ffffff)));
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.recipient-add-btn:disabled[b-39go3zpjoh] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Group conversation indicator block (when 2+ recipients) */
.compose-group-indicator[b-39go3zpjoh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 25%, transparent);
}

.compose-group-badge[b-39go3zpjoh] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.compose-group-badge.separate[b-39go3zpjoh] {
    color: var(--theme-text-secondary, #64748b);
}

.compose-group-name[b-39go3zpjoh] {
    flex: 1;
    min-width: 180px;
    padding: 5px 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    font-size: 0.85rem;
    background: var(--theme-input-bg, var(--theme-surface, #ffffff));
    color: var(--theme-text-primary, #1e293b);
}

.compose-group-toggle-link[b-39go3zpjoh] {
    background: none;
    border: none;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
}

.compose-group-toggle-link:hover[b-39go3zpjoh] { opacity: 0.8; }

/* Attachment thumbnails in compose */
.compose-attachments[b-39go3zpjoh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.compose-attachment-thumb[b-39go3zpjoh] {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.compose-attachment-thumb img[b-39go3zpjoh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compose-attachment-remove[b-39go3zpjoh] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.compose-attachment-remove:hover[b-39go3zpjoh] { background: rgba(0, 0, 0, 0.9); }

/* Sender labels above received bubbles in group view */
.bubble-sender-label[b-39go3zpjoh] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--tx-text-secondary);
    margin: 0 0 0.2rem 0.6rem;
    letter-spacing: 0.02em;
}

/* Group read receipt — "Read by N/M" pill */
.read-status.group-receipt[b-39go3zpjoh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--tx-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
}

.read-status.group-receipt.all-read[b-39go3zpjoh] {
    color: var(--tx-text-success, #10b981);
}

.read-status.group-receipt .receipt-count[b-39go3zpjoh] {
    font-variant-numeric: tabular-nums;
}

/* Group conversation row tinting */
.conversation-item.group .conversation-name[b-39go3zpjoh] {
    /* Slightly bolder so groups read distinctly from 1-on-1 in scanning. */
    font-weight: 600;
}

/* ============================================
   TR-CONN-1 (2026-05-08): Inline connection-request dialog.
   Replaces the dead-end "Visit Connections" toast that fired on send-block.
   Shape: centered modal overlay, themed surface, list of blocked recipients
   with per-row Send-Request buttons. Self-balances across all 8 themes via
   theme-* CSS variables and color-mix. Don't add a body-scroll-lock here —
   the .connection-request-overlay already covers the viewport and click-to-
   close passes through @onclick:stopPropagation on the inner dialog.
   ============================================ */
.connection-request-overlay[b-39go3zpjoh] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000000 55%, transparent);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 16px;
    animation: connection-request-fade-in-b-39go3zpjoh 0.18s ease-out;
}

@keyframes connection-request-fade-in-b-39go3zpjoh {
    from { opacity: 0; }
    to { opacity: 1; }
}

.connection-request-dialog[b-39go3zpjoh] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #0f172a);
    border: 1px solid color-mix(in srgb, var(--theme-text-primary, #0f172a) 12%, transparent);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px color-mix(in srgb, #000000 28%, transparent),
                0 1px 0 color-mix(in srgb, #ffffff 18%, transparent) inset;
    padding: 24px;
    animation: connection-request-pop-b-39go3zpjoh 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes connection-request-pop-b-39go3zpjoh {
    from { transform: scale(0.92) translateY(8px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.connection-request-header[b-39go3zpjoh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.connection-request-icon[b-39go3zpjoh] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 14%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.connection-request-title[b-39go3zpjoh] {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.connection-request-subtitle[b-39go3zpjoh] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.45;
}

.connection-request-close[b-39go3zpjoh] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.connection-request-close:hover[b-39go3zpjoh] {
    background: color-mix(in srgb, var(--theme-text-primary, #0f172a) 6%, transparent);
    color: var(--theme-text-primary, #0f172a);
}

.connection-request-list[b-39go3zpjoh] {
    list-style: none;
    margin: 0 0 16px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.connection-request-row[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--theme-text-primary, #0f172a) 4%, transparent);
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--theme-text-primary, #0f172a) 8%, transparent);
}

.connection-request-person[b-39go3zpjoh] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.connection-request-avatar[b-39go3zpjoh] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), color-mix(in srgb, var(--theme-primary, #6366f1) 65%, var(--theme-accent, #8b5cf6)));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.connection-request-meta[b-39go3zpjoh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.connection-request-name[b-39go3zpjoh] {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-request-email[b-39go3zpjoh] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.connection-request-btn[b-39go3zpjoh] {
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), color-mix(in srgb, var(--theme-primary, #6366f1) 65%, var(--theme-accent, #8b5cf6)));
    color: var(--theme-btn-text, #ffffff);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 80%, transparent);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
    box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent) inset,
                0 2px 6px color-mix(in srgb, var(--theme-primary, #6366f1) 30%, transparent);
}

.connection-request-btn:hover:not(:disabled)[b-39go3zpjoh] {
    box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent) inset,
                0 4px 10px color-mix(in srgb, var(--theme-primary, #6366f1) 40%, transparent);
}

.connection-request-btn:active:not(:disabled)[b-39go3zpjoh] {
    transform: translateY(1px);
}

.connection-request-btn:disabled[b-39go3zpjoh] {
    opacity: 0.55;
    cursor: not-allowed;
}

.connection-request-btn.retry[b-39go3zpjoh] {
    background: transparent;
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 50%, transparent);
    box-shadow: none;
}

.connection-request-btn.retry:hover:not(:disabled)[b-39go3zpjoh] {
    background: color-mix(in srgb, #ef4444 8%, transparent);
    box-shadow: none;
}

.connection-request-status.sent[b-39go3zpjoh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10b981;
    font-size: 0.82rem;
    font-weight: 600;
    flex-shrink: 0;
}

.connection-request-draft-note[b-39go3zpjoh] {
    margin: 0 0 18px 0;
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #64748b);
    background: color-mix(in srgb, var(--theme-text-primary, #0f172a) 4%, transparent);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--theme-text-primary, #0f172a) 8%, transparent);
    line-height: 1.5;
}

.connection-request-actions[b-39go3zpjoh] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.connection-request-secondary[b-39go3zpjoh] {
    background: transparent;
    color: var(--theme-text-primary, #0f172a);
    border: 1px solid color-mix(in srgb, var(--theme-text-primary, #0f172a) 22%, transparent);
    border-radius: 8px;
    padding: 7px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.connection-request-secondary:hover[b-39go3zpjoh] {
    background: color-mix(in srgb, var(--theme-text-primary, #0f172a) 8%, transparent);
    border-color: color-mix(in srgb, var(--theme-text-primary, #0f172a) 38%, transparent);
}

/* /Pages/Global/SpeciesGroups.razor.rz.scp.css */
/* Species Groups Page */
.species-page[b-wtif3jjapi] {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Page Header */
.page-header[b-wtif3jjapi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.header-brand[b-wtif3jjapi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-brand h1[b-wtif3jjapi] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
}

.header-icon[b-wtif3jjapi] {
    font-size: 1.75rem;
}

.header-actions[b-wtif3jjapi] {
    display: flex;
    gap: 0.5rem;
}

.back-btn[b-wtif3jjapi] {
    background: none;
    border: none;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.back-btn:hover[b-wtif3jjapi] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}

.member-count-badge[b-wtif3jjapi] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
    background: var(--theme-surface, #f1f5f9);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
}

/* Tab Bar */
.tab-bar[b-wtif3jjapi] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    padding-bottom: 0;
}

.tab[b-wtif3jjapi] {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-muted, #64748b);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tab:hover[b-wtif3jjapi] {
    color: var(--theme-text-primary, #1e293b);
}

.tab.active[b-wtif3jjapi] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-bottom-color: var(--theme-primary, #6366f1);
}

.tab-count[b-wtif3jjapi] {
    background: var(--theme-surface, #f1f5f9);
    color: var(--theme-text-muted, #64748b);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Loading */
.loading-state[b-wtif3jjapi] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.spinner[b-wtif3jjapi] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-wtif3jjapi 0.7s linear infinite;
}

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

/* Group Grid */
.group-grid[b-wtif3jjapi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.group-card[b-wtif3jjapi] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

.group-card:hover[b-wtif3jjapi] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    transform: translateY(-1px);
}

.group-card.joined[b-wtif3jjapi] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

.group-icon[b-wtif3jjapi] {
    font-size: 2rem;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    border-radius: 12px;
}

.group-info[b-wtif3jjapi] {
    flex: 1;
    min-width: 0;
}

.group-info h3[b-wtif3jjapi] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.group-description[b-wtif3jjapi] {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
    line-height: 1.4;
}

.group-stats[b-wtif3jjapi] {
    display: flex;
    gap: 0.75rem;
}

.stat[b-wtif3jjapi] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.join-btn[b-wtif3jjapi] {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Empty State */
.empty-state[b-wtif3jjapi] {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state.small[b-wtif3jjapi] {
    padding: 2rem 1rem;
}

.empty-icon[b-wtif3jjapi] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3[b-wtif3jjapi] {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--theme-text-primary, #1e293b);
}

.empty-state p[b-wtif3jjapi] {
    margin: 0;
    color: var(--theme-text-muted, #64748b);
    font-size: 0.875rem;
    max-width: 400px;
    margin: 0 auto;
}

/* Group Detail */
.group-detail-content[b-wtif3jjapi] {
    margin-top: 0.5rem;
}

/* Chat Container */
.chat-container[b-wtif3jjapi] {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    max-height: 600px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    background: var(--theme-surface, #ffffff);
}

.message-list[b-wtif3jjapi] {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.message[b-wtif3jjapi] {
    position: relative;
    max-width: 80%;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--theme-surface, #f1f5f9);
    border: 1px solid var(--theme-border, #e2e8f0);
}

.message.own[b-wtif3jjapi] {
    align-self: flex-end;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.message.system[b-wtif3jjapi] {
    align-self: center;
    max-width: 90%;
    background: transparent;
    border: none;
    padding: 0.5rem;
}

.message-header[b-wtif3jjapi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.message-author[b-wtif3jjapi] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.stage-badge[b-wtif3jjapi] {
    font-size: 0.65rem;
    color: var(--theme-text-muted, #94a3b8);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
}

.message-time[b-wtif3jjapi] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
    margin-left: auto;
}

.message-content[b-wtif3jjapi] {
    font-size: 0.875rem;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.5;
    word-break: break-word;
}

.delete-msg-btn[b-wtif3jjapi] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background: none;
    border: none;
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}

.message:hover .delete-msg-btn[b-wtif3jjapi] {
    opacity: 1;
}

.delete-msg-btn:hover[b-wtif3jjapi] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.system-message[b-wtif3jjapi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
    font-style: italic;
}

.system-icon[b-wtif3jjapi] {
    font-size: 1rem;
}

/* Chat Input */
.chat-input-bar[b-wtif3jjapi] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #ffffff);
}

.chat-input-bar .nts-input[b-wtif3jjapi] {
    flex: 1;
}

/* Members List */
.members-list[b-wtif3jjapi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.member-card[b-wtif3jjapi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
}

.member-avatar[b-wtif3jjapi] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.member-info[b-wtif3jjapi] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1;
}

.member-name[b-wtif3jjapi] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #1e293b);
}

.member-stage[b-wtif3jjapi] {
    font-size: 0.75rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.member-joined[b-wtif3jjapi] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* Dark theme overrides */
.is-dark .group-card[b-wtif3jjapi] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .group-card:hover[b-wtif3jjapi] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.4);
}

.is-dark .group-info h3[b-wtif3jjapi],
.is-dark .header-brand h1[b-wtif3jjapi] {
    color: #f1f5f9;
}

.is-dark .chat-container[b-wtif3jjapi] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .message[b-wtif3jjapi] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .message.own[b-wtif3jjapi] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

.is-dark .message-content[b-wtif3jjapi],
.is-dark .member-name[b-wtif3jjapi],
.is-dark .empty-state h3[b-wtif3jjapi] {
    color: #f1f5f9;
}

.is-dark .chat-input-bar[b-wtif3jjapi] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .member-card[b-wtif3jjapi] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .tab-bar[b-wtif3jjapi] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .tab:hover[b-wtif3jjapi] {
    color: #f1f5f9;
}

.is-dark .member-count-badge[b-wtif3jjapi] {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 640px) {
    .species-page[b-wtif3jjapi] {
        padding: 1rem;
    }

    .group-grid[b-wtif3jjapi] {
        grid-template-columns: 1fr;
    }

    .message[b-wtif3jjapi] {
        max-width: 90%;
    }

    .page-header[b-wtif3jjapi] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Goals/GoalDetail.razor.rz.scp.css */
/* ============================================
   GOAL DETAIL - Page-specific styles only.
   Base layout uses .detail-* classes from utilities.css
   ============================================ */

/* PQ1 (2026-05-03): Main Quest / Primary Goal badge in the detail header.
   Amber tint matches the Goals.razor list-page chip + the home greeting
   star line. Sits as the lead badge in the row so the elevated status
   reads first. */
.detail-status-badge.detail-status-badge--primary-goal[b-7rrdafew73] {
    color: var(--theme-warning, #f59e0b);
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-warning, #f59e0b) 30%, transparent);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

/* Sidebar detail items need vertical spacing */
.sidebar-details-list[b-7rrdafew73] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Progress Card */
.progress-display[b-7rrdafew73] {
    display: flex;
    gap: 24px;
    align-items: center;
}

.progress-ring-large[b-7rrdafew73] {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.progress-ring-large svg[b-7rrdafew73] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg[b-7rrdafew73] {
    fill: none;
    stroke: rgba(100, 116, 139, 0.2);
    stroke-width: 3;
}

.progress-ring-fill[b-7rrdafew73] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.progress-ring-fill.progress-start[b-7rrdafew73] { stroke: #94a3b8; }
.progress-ring-fill.progress-low[b-7rrdafew73] { stroke: #f59e0b; }
.progress-ring-fill.progress-medium[b-7rrdafew73] { stroke: #3b82f6; }
.progress-ring-fill.progress-high[b-7rrdafew73] { stroke: #10b981; }
.progress-ring-fill.progress-complete[b-7rrdafew73] { stroke: #22c55e; }

.progress-ring-text[b-7rrdafew73] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.progress-info[b-7rrdafew73] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.progress-bar[b-7rrdafew73] {
    height: 8px;
    background: rgba(100, 116, 139, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill[b-7rrdafew73] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-bar-fill.progress-start[b-7rrdafew73] { background: #94a3b8; }
.progress-bar-fill.progress-low[b-7rrdafew73] { background: #f59e0b; }
.progress-bar-fill.progress-medium[b-7rrdafew73] { background: #3b82f6; }
.progress-bar-fill.progress-high[b-7rrdafew73] { background: #10b981; }
.progress-bar-fill.progress-complete[b-7rrdafew73] { background: #22c55e; }

.progress-actions[b-7rrdafew73] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* B3-Rollup (2026-05-03): Hint copy under the progress bar. Two flavors:
   the derived case explains where the number came from; the manual case
   nudges the user toward decomposing into Objectives. Same muted text
   treatment as other helper-text in the page. */
.progress-derived-hint[b-7rrdafew73] {
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.4;
}

.progress-derived-hint--manual[b-7rrdafew73] {
    margin-top: 6px;
    font-size: 0.75rem;
    opacity: 0.85;
}

/* Description */
.goal-description[b-7rrdafew73] {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--theme-text-secondary);
}

/* Empty Section */
.empty-section[b-7rrdafew73] {
    text-align: center;
    padding: 20px;
    color: var(--theme-text-secondary);
}

.empty-section p[b-7rrdafew73] { margin: 0 0 12px; }

/* Objectives and Work Items Lists */
.objectives-list[b-7rrdafew73],
.work-items-list[b-7rrdafew73] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.objective-item[b-7rrdafew73],
.work-item[b-7rrdafew73] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.03));
    transition: background 0.2s;
}

.objective-item:hover[b-7rrdafew73],
.work-item:hover[b-7rrdafew73] {
    background: var(--theme-link-hover-bg, rgba(0, 0, 0, 0.06));
}

.status-icon[b-7rrdafew73] {
    width: 24px;
    height: 24px;
    color: var(--theme-text-muted, #94a3b8);
}

.status-icon.completed[b-7rrdafew73] {
    color: var(--theme-text-success, #10b981);
}

.status-icon.in-progress[b-7rrdafew73] {
    color: #3b82f6;
}

.objective-info[b-7rrdafew73],
.work-item-info[b-7rrdafew73] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.objective-name[b-7rrdafew73],
.work-item-name[b-7rrdafew73] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-primary);
}

.objective-meta[b-7rrdafew73] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.objective-status-badge[b-7rrdafew73] {
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 500;
}

.objective-status-badge.status-0[b-7rrdafew73] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.objective-status-badge.status-1[b-7rrdafew73] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.objective-status-badge.status-2[b-7rrdafew73] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.objective-progress[b-7rrdafew73] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.work-item-info[b-7rrdafew73] {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Days badge (target date) */
.days-badge[b-7rrdafew73] {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.days-badge.overdue[b-7rrdafew73] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}
/* /Pages/Goals/GoalDialog.razor.rz.scp.css */
/* ============================================
   GOAL DIALOG - Form-specific Styles
   Theme variables eliminate dark-mode overrides
   ============================================ */

.goal-form-group[b-joe0xirql4] {
    margin-bottom: 8px;
}

.goal-form-group label[b-joe0xirql4] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
    margin-bottom: 3px;
}

.required-indicator[b-joe0xirql4] {
    color: #ef4444;
}

/* Form Inputs */
.goal-form-input[b-joe0xirql4],
.goal-form-textarea[b-joe0xirql4] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
}

.goal-form-input:focus[b-joe0xirql4],
.goal-form-textarea:focus[b-joe0xirql4] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.goal-form-input.input-error[b-joe0xirql4] {
    border-color: #ef4444;
}

.goal-form-textarea[b-joe0xirql4] {
    min-height: 80px;
    resize: vertical;
}

/* Inputs row (side by side) */
.goal-inputs-row[b-joe0xirql4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

.goal-inputs-row .goal-form-group[b-joe0xirql4] {
    margin-bottom: 0;
}

/* Character counter */
.goal-char-counter[b-joe0xirql4] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #9ca3af);
    text-align: right;
    margin-top: 2px;
}

/* Error message */
.goal-error-message[b-joe0xirql4] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 6px;
}

.goal-error-message svg[b-joe0xirql4] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   PROGRESS SECTION
   ============================================ */
.goal-progress-section[b-joe0xirql4] {
    margin-top: 8px;
}

.goal-progress-header[b-joe0xirql4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.goal-progress-label[b-joe0xirql4] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
}

.goal-progress-value[b-joe0xirql4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.goal-progress-slider[b-joe0xirql4] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 4px;
    background: var(--theme-border, #e2e8f0);
    cursor: pointer;
}

.goal-progress-slider[b-joe0xirql4]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(var(--theme-primary-rgb), 0.4);
    transition: transform 0.15s ease;
}

.goal-progress-slider[b-joe0xirql4]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.goal-progress-slider[b-joe0xirql4]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(var(--theme-primary-rgb), 0.4);
}

.goal-progress-hint[b-joe0xirql4] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    margin-top: 6px;
}

/* PG-Dialog (2026-05-03): Primary Goal / Main Quest toggle. Visually
   distinct from the regular form-groups so it reads as a deliberate
   choice rather than just another field — light accent border, small
   star icon, checkbox aligned with the label text. */
.goal-primary-toggle[b-joe0xirql4] {
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 4%, transparent);
}

.goal-primary-toggle-label[b-joe0xirql4] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
}

.goal-primary-toggle-text[b-joe0xirql4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-warning, #f59e0b);
}

/* B3-Rollup (2026-05-03): Read-only derived progress bar shown when the
   Goal's progress is rolled up from measurable Objectives. Replaces the
   manual slider in that state. Same visual language as the Objective
   measured-preview bar so the "this is derived, not editable" signal
   reads consistently across surfaces. */
.goal-derived-progress-bar[b-joe0xirql4] {
    height: 8px;
    background: var(--theme-surface-soft, #e5e7eb);
    border-radius: 9999px;
    overflow: hidden;
    margin: 6px 0 4px;
}

.goal-derived-progress-fill[b-joe0xirql4] {
    height: 100%;
    background: var(--theme-success, #10b981);
    transition: width 0.3s ease;
}

/* B4-Health (2026-05-03): Health pill picker. Four selectable pills,
   each a button. The active pill gets a colored background that matches
   its semantic; inactive pills are neutral with a colored dot indicator.
   Clicking the active pill again clears the selection (handler in code-
   behind), so the picker has an implicit "no opinion" state without a
   separate clear button. */
.goal-health-section[b-joe0xirql4] {
    /* Inherits .goal-form-group baseline; just visual breathing room. */
}

.goal-health-pills[b-joe0xirql4] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.goal-health-pill[b-joe0xirql4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.12s ease;
}

.goal-health-pill:hover[b-joe0xirql4] {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 6%, transparent);
}

.goal-health-pill-dot[b-joe0xirql4] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Per-option color tints — drive the dot color (always) and the active
   background (when selected). currentColor is the inherited text color
   for that pill's variant, so dot + background stay coordinated. */
.goal-health-pill-ontrack[b-joe0xirql4] { color: var(--theme-success, #10b981); }
.goal-health-pill-needsattention[b-joe0xirql4] { color: var(--theme-warning, #f59e0b); }
.goal-health-pill-stalled[b-joe0xirql4] { color: var(--theme-text-tertiary, #94a3b8); }
.goal-health-pill-offtrack[b-joe0xirql4] { color: var(--theme-error, #ef4444); }

.goal-health-pill-active[b-joe0xirql4] {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 14%, transparent);
    color: currentColor;
}

/* In active state, override the muted text color so the label reads in
   the variant's color (otherwise the pill background is colored but the
   text stays gray, which looks broken). */
.goal-health-pill-active.goal-health-pill-ontrack[b-joe0xirql4] { color: var(--theme-success, #10b981); }
.goal-health-pill-active.goal-health-pill-needsattention[b-joe0xirql4] { color: var(--theme-warning, #f59e0b); }
.goal-health-pill-active.goal-health-pill-stalled[b-joe0xirql4] { color: var(--theme-text-primary, #1e293b); }
.goal-health-pill-active.goal-health-pill-offtrack[b-joe0xirql4] { color: var(--theme-error, #ef4444); }

/* ============================================
   METADATA SECTION
   ============================================ */
.goal-metadata[b-joe0xirql4] {
    padding-top: 10px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    margin-top: 10px;
}

.goal-metadata-item[b-joe0xirql4] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    margin-bottom: 4px;
}

.goal-metadata-item svg[b-joe0xirql4] {
    width: 14px;
    height: 14px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .goal-inputs-row[b-joe0xirql4] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Goals/Goals.razor.rz.scp.css */
/* ============================================
   GOALS PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - only Goal-specific
   styles remain here (progress ring)
   ============================================ */

/* PG-List (2026-05-03) → PG-PRO-COLOR-3 (2026-05-20): Primary Goal / Main Quest
   accent — light green row treatment. Iteration history:
     v1 amber  (theme-warning) → read as status-warning; off-brand in Pro mode.
     v2 slate  (theme-text-secondary) → too dim, didn't celebrate the focus pick.
     v3 green  (current) → positive "this is your focus" without quest-warmth,
                  works in both Spark and Pro, harmonizes with `tag-green` badge.
   Green anchor (#22c55e) matches the .tag-green chip in utilities.css so the
   chip + row read as the same palette family.
   Sits on top of whatever status accent the row already carries; only one goal
   per user has IsPrimary=true under the mutual-exclusion invariant, so this
   never stacks visually. */
.list-page-item.accent-primary-goal[b-8qayo6zeke] {
    border-left: 4px solid var(--theme-success, #22c55e);
    background: color-mix(in srgb, var(--theme-success, #22c55e) 6%, transparent);
}

/* ============================================
   PROGRESS RING - Circular progress indicator
   ============================================ */
.goal-progress-section[b-8qayo6zeke] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.goal-progress-ring[b-8qayo6zeke] {
    position: relative;
    width: 52px;
    height: 52px;
}

.goal-progress-ring svg[b-8qayo6zeke] {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.progress-ring-bg[b-8qayo6zeke] {
    fill: none;
    stroke: var(--theme-border, #e2e8f0);
    stroke-width: 3;
}

.progress-ring-fill[b-8qayo6zeke] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

/* Progress colors */
.progress-ring-fill.progress-success[b-8qayo6zeke] { stroke: #22c55e; }
.progress-ring-fill.progress-info[b-8qayo6zeke] { stroke: #0ea5e9; }
.progress-ring-fill.progress-primary[b-8qayo6zeke] { stroke: #3b82f6; }
.progress-ring-fill.progress-warning[b-8qayo6zeke] { stroke: #f59e0b; }
.progress-ring-fill.progress-error[b-8qayo6zeke] { stroke: #ef4444; }

.progress-ring-text[b-8qayo6zeke] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .progress-ring-bg[b-8qayo6zeke] {
    stroke: rgba(255, 255, 255, 0.2);
}

.is-dark .progress-ring-text[b-8qayo6zeke] {
    color: white;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .goal-progress-section[b-8qayo6zeke] {
        width: 100%;
        justify-content: space-between;
        margin-top: 12px;
    }

    /* GOAL-PCT-1 (2026-09-16): the 52px ring + 0.75rem label read as a
       footnote on a phone. Scale both up so the number is glanceable. */
    .goal-progress-ring[b-8qayo6zeke] {
        width: 72px;
        height: 72px;
        flex-shrink: 0;
    }

    /* GOAL-RING-1 (2026-10-02): utilities.css's phone rule gives .list-page-item-actions
       width:100% (right for actions that sit directly in the card). Here they share a row
       with the ring, so the ring was squeezed to 0px wide - an empty gap with "45%" stuck
       on the card's left edge (Josh's iPhone). Actions size to content beside the ring. */
    .goal-progress-section .list-page-item-actions[b-8qayo6zeke] {
        width: auto;
        margin-top: 0;
    }

    .progress-ring-text[b-8qayo6zeke] {
        font-size: 1.125rem;
    }
}
/* /Pages/Goals/MilestoneDialog.razor.rz.scp.css */
/* ============================================
   MILESTONE DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.milestone-form[b-kkxgqbxowo] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Form Group */
.milestone-form-group[b-kkxgqbxowo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.milestone-form-group label[b-kkxgqbxowo] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
}

.required-indicator[b-kkxgqbxowo] {
    color: #ef4444;
}

/* Form Inputs */
.milestone-form-input[b-kkxgqbxowo],
.milestone-form-textarea[b-kkxgqbxowo] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
}

.milestone-form-textarea[b-kkxgqbxowo] {
    resize: vertical;
    min-height: 80px;
}

.milestone-form-input:focus[b-kkxgqbxowo],
.milestone-form-textarea:focus[b-kkxgqbxowo] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.milestone-form-input[b-kkxgqbxowo]::placeholder,
.milestone-form-textarea[b-kkxgqbxowo]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

/* Error states */
.milestone-form-input.input-error[b-kkxgqbxowo] {
    border-color: #ef4444;
}

.milestone-error-message[b-kkxgqbxowo] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.8125rem;
}

.milestone-error-message svg[b-kkxgqbxowo] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Character counter */
.milestone-char-counter[b-kkxgqbxowo] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    text-align: right;
}

/* Toggle group */
.milestone-toggle-group[b-kkxgqbxowo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.milestone-toggle[b-kkxgqbxowo] {
    position: relative;
    width: 48px;
    height: 26px;
    cursor: pointer;
}

.milestone-toggle input[b-kkxgqbxowo] {
    opacity: 0;
    width: 0;
    height: 0;
}

.milestone-toggle-slider[b-kkxgqbxowo] {
    position: absolute;
    inset: 0;
    background: var(--theme-border, #cbd5e1);
    border-radius: 26px;
    transition: 0.3s;
}

.milestone-toggle-slider[b-kkxgqbxowo]::before {
    position: absolute;
    content: '';
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px var(--theme-shadow-color, rgba(0, 0, 0, 0.1));
}

.milestone-toggle input:checked + .milestone-toggle-slider[b-kkxgqbxowo] {
    background: #22c55e;
}

.milestone-toggle input:checked + .milestone-toggle-slider[b-kkxgqbxowo]::before {
    transform: translateX(22px);
}

.milestone-toggle-label[b-kkxgqbxowo] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #374151);
}

/* Completed notice */
.milestone-completed-notice[b-kkxgqbxowo] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    color: #15803d;
    font-size: 0.8125rem;
}

.milestone-completed-notice svg[b-kkxgqbxowo] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.is-dark .milestone-completed-notice[b-kkxgqbxowo] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* Metadata section */
.milestone-metadata[b-kkxgqbxowo] {
    padding-top: 12px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    margin-top: 4px;
}

.milestone-metadata-item[b-kkxgqbxowo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    margin-bottom: 4px;
}

.milestone-metadata-item svg[b-kkxgqbxowo] {
    width: 14px;
    height: 14px;
}
/* /Pages/Home/Home.razor.rz.scp.css */
/* ============================================
   AUTHENTICATED HOME PAGE STYLES
   ============================================ */

/* Base container.
   HOME-SCROLL-3 (2026-07-07): Home now scrolls the DOCUMENT like every other
   authenticated page. The old fixed-height + overflow:hidden shell (with
   .welcome-state as a hidden inner scroller) existed for (a) an inline chat
   input pinned to the bottom — gone since chat moved to the floating
   Assistant — and (b) containing animated theme layers so they can't spawn
   phantom page scrollbars. (b) is now handled by `overflow: clip`, which
   clips paint like `hidden` but does NOT create a scroll container, so the
   body scrolls naturally and the native scrollbar reflects real position.
   min-height (not height) keeps the hero centering when content fits and
   lets the shell grow when it doesn't. Same change mirrored in
   authenticated-home.css and MainLayout.razor.css (.home-main-content). */
.home-authenticated[b-oplw9zu4p8] {
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: row;
    position: relative;
    overflow: clip;
    transition: background 0.5s ease;
    padding: 0;
}

/* Main - ChatGPT/Grok style layout */
.home-main[b-oplw9zu4p8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    position: relative;
    z-index: 1;
    min-height: 0;
    overflow: hidden;
    /* SNOOZE-Z-1 (2026-07-10): the chat-open shift moved from transform to
       `left`. A transform here made this wrapper the CONTAINING BLOCK for
       every position:fixed descendant — BaseDialog overlays opened from
       Today's Work anchored to this element instead of the viewport
       (shifted 180px left, clipped at top) whenever the chat was open.
       `left` on an already position:relative element produces the identical
       visual slide with no containing-block or stacking side effects.
       Do NOT reintroduce transform/translate/filter/will-change on this
       wrapper — fixed-position children break silently. */
    left: 0;
    transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shift content left when the floating chat is open so greeting isn't obscured */
.home-main.chat-open[b-oplw9zu4p8] {
    left: -180px;
}

/* Welcome State - centered vertically, pushes input to bottom */
.welcome-state[b-oplw9zu4p8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* HOME-SCROLL-3 (2026-07-07): this is NOT a scroll container anymore —
       the document scrolls (see .home-authenticated). Plain centered
       column; the interim HOME-SCROLL-1/2 scroller tricks were deleted. */
    padding: 20px 16px 0 16px;
    gap: 16px;
    width: 100%;
    /* HUB-WIDE-1 (2026-10-06, Josh: "make this section wider for the full-width mode"): the column
       follows the LAYOUT-WIDTH-1 toggle. Contained keeps the 900px look exactly; Wide lifts it to
       --home-wide-max (1240px, declared beside --content-wide-max in utilities.css - a :root rule
       in THIS scoped sheet would compile to :root[b-xxx] and never match) rather than 1840 - the hub is lists
       and a conversation, and 1840px of either is unreadable. Hero text stays centred regardless. */
    max-width: max(900px, var(--home-wide-max, 0px));
    margin: 0 auto;
}

/* Safe centering: flex spacers center content when it fits,
   but collapse to 0 when content overflows so the avatar
   stays visible and the container scrolls from the top. */
.welcome-state[b-oplw9zu4p8]::before,
.welcome-state[b-oplw9zu4p8]::after {
    content: '';
    flex: 1;
}

/* Quick Action Chips - replace inline chat with actionable suggestions */
.home-quick-actions[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px 32px;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hide action chips when floating chat is open (chat has its own suggestions) */
.home-quick-actions.chips-hidden[b-oplw9zu4p8] {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

.home-action-chips[b-oplw9zu4p8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.home-action-chip[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 20px;
    border: 1px solid var(--theme-border);
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.home-action-chip:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-color: var(--theme-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.home-action-chip .chip-icon[b-oplw9zu4p8] {
    font-size: 1rem;
    line-height: 1;
}

.home-action-chip.subtle[b-oplw9zu4p8] {
    background: transparent;
    border-color: transparent;
    font-size: 0.8125rem;
    padding: 8px 14px;
    opacity: 0.7;
}

.home-action-chip.subtle:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-color: var(--theme-border);
    opacity: 1;
}

/* Dark theme treatment: translucent glass chips so they read on dark backdrops */
.is-dark .home-action-chip[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--theme-text-primary);
}

.is-dark .home-action-chip:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(var(--theme-primary-rgb), 0.6);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.is-dark .home-action-chip.subtle[b-oplw9zu4p8] {
    background: transparent;
    border-color: transparent;
}

.is-dark .home-action-chip.subtle:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.14);
}

/*
 * Mobile: chips wrap to a second row instead of being hidden.
 *
 * HP-V-5 (2026-05-01): pre-fix, this block hid the 3rd and 4th primary chips
 * (`nth-child(n+3)`) and the 2nd secondary chip (`nth-child(n+2)`) on
 * sub-480px viewports — a "trim the overflow" approach. Combined with the
 * FAB being hidden on Personal Home, mobile users had ZERO discoverable
 * affordance for "My goals", "Create image", or "Suggest a new goal"
 * outside of typing free-form into chat. Hiding chrome on mobile is
 * acceptable; hiding *functionality* is not. The chips now wrap to a
 * second row (`.home-action-chips` already has `flex-wrap: wrap` at
 * line 85), and chip padding/font shrinks slightly so two rows fit
 * comfortably without crowding the rest of the hero.
 */
@media (max-width: 480px) {
    .home-quick-actions[b-oplw9zu4p8] {
        gap: 6px;
        padding: 10px 12px 14px;
    }

    .home-action-chips[b-oplw9zu4p8] {
        gap: 8px;
        justify-content: center;
    }

    .home-action-chip[b-oplw9zu4p8] {
        padding: 7px 12px;
        font-size: 0.8125rem;
    }

    .home-action-chip.subtle[b-oplw9zu4p8] {
        padding: 6px 11px;
        font-size: 0.78125rem;
    }
}

/* Chat Messages Container - scrollable, fills available space */
.chat-messages[b-oplw9zu4p8] {
    flex: 1;
    width: 100%;
    max-width: 900px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px 16px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

/* Input Area - fixed at bottom */
.input-area[b-oplw9zu4p8] {
    width: 100%;
    max-width: 800px;
    padding: 8px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: transparent;
}

/* Welcome Avatar Section - Large avatar in welcome state */
.welcome-avatar-section[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hide centered avatar when floating chat is open (single avatar on screen at a time) */
.welcome-avatar-section.avatar-hidden[b-oplw9zu4p8] {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

/* Classic avatar container — matches the floating-chat peek avatar's
   vibe with a tier-tinted drop-shadow glow and a gentle float bob. The
   tier color comes from --companion-tier-color-rgb which the Razor sets
   inline on .classic-hero-wrapper via the tier-* class (see Home.razor).
   Falls back to --theme-primary-rgb if the tier class is absent.

   Rendered as a <button> so clicking the avatar opens the companion chat,
   mirroring the Expanded hero's companion-hero-avatar-button. Button-reset
   declarations below neutralize UA defaults (border, background, padding)
   so the float/drop-shadow look is preserved. */
.welcome-avatar-container[b-oplw9zu4p8] {
    /* button reset */
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-block;

    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 4px 16px rgba(var(--companion-tier-color-rgb, var(--theme-primary-rgb)), 0.35));
    animation: welcomeAvatarFloat-b-oplw9zu4p8 5s ease-in-out infinite;
    will-change: transform, filter;
}

.welcome-avatar-container:hover[b-oplw9zu4p8] {
    filter: drop-shadow(0 8px 22px rgba(var(--companion-tier-color-rgb, var(--theme-primary-rgb)), 0.50));
    /* Avatar itself handles its own hover tilt via is-interactive */
}

.welcome-avatar-container:focus-visible[b-oplw9zu4p8] {
    outline: 2px solid rgba(var(--companion-tier-color-rgb, var(--theme-primary-rgb)), 0.8);
    outline-offset: 6px;
    border-radius: 50%;
}

/* Gentle idle bob — mirrors the peek avatar's companionFloat in
   Assistant.razor.css so the two avatars read as the same entity. */
@keyframes welcomeAvatarFloat-b-oplw9zu4p8 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* HC-V-2 (2026-05-02): The HP-V-3 `.welcome-avatar-cta` pill rules
   that lived here were removed. The pill markup it styled is gone
   (see Home.razor); the avatar's hover tooltip now carries the
   discoverability hint. The companion-hero-cta companion rules
   in the expanded-view section below were removed for the same
   reason. */

/* Workspace name label — rendered above .hero-title in every greeting
   variant (classic, expanded companion hero, standalone). Uses theme
   variables so it renders correctly across all 8 themes. */
.workspace-label-wrap[b-oplw9zu4p8] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 28px;
    margin-bottom: 6px;
}

.companion-hero-greeting .workspace-label-wrap[b-oplw9zu4p8] {
    justify-content: flex-start;
}

.workspace-label[b-oplw9zu4p8] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 12px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.workspace-label:hover[b-oplw9zu4p8],
.workspace-label:focus-visible[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.08);
    border-color: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.22);
    color: var(--theme-text-primary, #0f172a);
    outline: none;
}

/* HERO-TRIM-1: the workspace name as the goal line's lead-in - sentence case, same size as the line,
   still the rename button (hover shows it). */
.workspace-label--inline[b-oplw9zu4p8] {
    padding: 0 2px;
    margin-left: -2px;
    border-radius: 6px;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: var(--theme-text-primary, #0f172a);
    vertical-align: baseline;
    display: inline;
}

.hero-subtitle-sep[b-oplw9zu4p8] {
    margin: 0 6px 0 4px;
    color: var(--theme-text-secondary, #64748b);
}

/* EYEBROW-WRAP-1 (2026-10-20): "· workspace" / "· weather" wrap as a unit on narrow lines (inline-block
   moves to the next line whole, and only breaks inside itself when it is wider than the line). */
.hero-eyebrow-pair[b-oplw9zu4p8] {
    display: inline-block;
    vertical-align: baseline;
}

.workspace-label-text[b-oplw9zu4p8] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

.workspace-nudge[b-oplw9zu4p8] {
    background: transparent;
    border: 1px dashed rgba(var(--theme-accent-rgb, 99, 102, 241), 0.35);
    border-radius: 999px;
    padding: 4px 12px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0.7;
    transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.workspace-nudge:hover[b-oplw9zu4p8],
.workspace-nudge:focus-visible[b-oplw9zu4p8] {
    opacity: 1;
    border-color: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.6);
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.06);
    color: var(--theme-text-primary, #0f172a);
    outline: none;
}

.workspace-nudge-icon[b-oplw9zu4p8] {
    font-size: 1rem;
    line-height: 1;
    font-weight: 400;
}

/* HHC-V-3 (2026-05-08): inline workspace-name editor — refined.
   v1: lavender 0.6-alpha pill + ghost-text Cancel — Cancel was illegible.
   v2: solid surface pill + outlined Cancel chip — Cancel readable but the
       composition felt busy: input + Save + Cancel as three competing
       elements inside one pill made the input render as a dark rectangle
       fighting the container.
   v3 (this rev): card-style editor instead of pill. Clearer visual unit
       — the input is the *whole* surface (no nested rectangle), buttons
       are explicitly attached to the right via a subtle vertical divider.
       Reads as one component; the input has no separate boundary; Save
       gets an accent gradient so it pops against dark hero backgrounds
       (Space/Tron/Ocean) without going pastel; Cancel keeps the outlined
       chip pattern that worked in v2 but uses the now-clean container as
       its readability backstop. */
.workspace-edit[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: stretch;
    padding: 0;
    background: var(--theme-surface, #ffffff);
    border: 1px solid color-mix(in srgb, var(--theme-text-primary, #0f172a) 18%, transparent);
    border-radius: 14px;
    max-width: 100%;
    overflow: hidden;
    box-shadow: 0 10px 24px color-mix(in srgb, #000000 22%, transparent),
                0 1px 0 color-mix(in srgb, #ffffff 28%, transparent) inset;
}

/* Input takes the whole left side — no visible boundary, no own background.
   It's literally the surface of the container; you're typing into the card. */
.workspace-edit-input[b-oplw9zu4p8] {
    background: transparent;
    border: none;
    outline: none;
    color: var(--theme-text-primary, #0f172a);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 10px 14px;
    min-width: 220px;
    max-width: 300px;
    flex: 1 1 auto;
    line-height: 1.3;
}

/* Strip browser focus chrome that was creating the "dark rectangle" look in v2. */
.workspace-edit-input:focus[b-oplw9zu4p8],
.workspace-edit-input:focus-visible[b-oplw9zu4p8] {
    outline: none;
    box-shadow: none;
}

.workspace-edit-input[b-oplw9zu4p8]::placeholder {
    color: var(--theme-text-secondary, #64748b);
    opacity: 0.7;
}

/* Vertical divider between the typing area and the button row.
   Mirrors text-primary so it's self-balancing on light/dark themes
   without per-theme overrides. */
.workspace-edit-actions[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px 6px 8px;
    border-left: 1px solid color-mix(in srgb, var(--theme-text-primary, #0f172a) 12%, transparent);
    background: color-mix(in srgb, var(--theme-text-primary, #0f172a) 4%, transparent);
}

.workspace-edit-btn[b-oplw9zu4p8] {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

/* Save uses a primary→accent gradient so it stays vibrant on dark hero
   backgrounds (Space, Tron, Ocean) where flat primary was reading pastel.
   On light themes (Executive, Cloud, Mystic) the gradient adds a soft sheen
   without going neon. The two stops are both --theme-primary so brand
   themes that don't define an accent (or want a flat look) still get
   something coherent. */
.workspace-edit-btn.primary[b-oplw9zu4p8] {
    background: linear-gradient(135deg,
        var(--theme-primary, #6366f1),
        color-mix(in srgb, var(--theme-primary, #6366f1) 65%, var(--theme-accent, #8b5cf6)));
    color: var(--theme-btn-text, #ffffff);
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 80%, transparent);
    box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent) inset,
                0 2px 6px color-mix(in srgb, var(--theme-primary, #6366f1) 35%, transparent);
}

.workspace-edit-btn.primary:hover:not(:disabled)[b-oplw9zu4p8] {
    background: linear-gradient(135deg,
        var(--theme-primary-hover, #4f46e5),
        color-mix(in srgb, var(--theme-primary-hover, #4f46e5) 60%, var(--theme-accent, #8b5cf6)));
    box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent) inset,
                0 4px 10px color-mix(in srgb, var(--theme-primary, #6366f1) 45%, transparent);
}

.workspace-edit-btn.primary:active:not(:disabled)[b-oplw9zu4p8] {
    transform: translateY(1px);
    box-shadow: 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent) inset,
                0 1px 3px color-mix(in srgb, var(--theme-primary, #6366f1) 30%, transparent);
}

/* Outlined Cancel chip — readable everywhere because it inherits
   text-primary, the design-system contract pair for --theme-surface.
   Border uses color-mix so it shows up on light AND dark surfaces
   without per-theme overrides. */
.workspace-edit-btn.ghost[b-oplw9zu4p8] {
    color: var(--theme-text-primary, #0f172a);
    border-color: color-mix(in srgb, var(--theme-text-primary, #0f172a) 22%, transparent);
}

.workspace-edit-btn.ghost:hover:not(:disabled)[b-oplw9zu4p8] {
    background: color-mix(in srgb, var(--theme-text-primary, #0f172a) 8%, transparent);
    border-color: color-mix(in srgb, var(--theme-text-primary, #0f172a) 38%, transparent);
}

.workspace-edit-btn.ghost:active:not(:disabled)[b-oplw9zu4p8] {
    transform: translateY(1px);
}

.workspace-edit-btn:disabled[b-oplw9zu4p8] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Hero */
.hero-section[b-oplw9zu4p8] {
    text-align: center;
    max-width: 760px;   /* HERO-TRIM-1: was 600 - the goal line now carries the workspace name too */
    margin-bottom: 24px;
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Compact hero when chat is active */
.hero-section.hero-compact[b-oplw9zu4p8] {
    margin-bottom: 8px;
}

.hero-compact .hero-title[b-oplw9zu4p8] {
    font-size: 1.3rem;
}

@keyframes fadeInUp-b-oplw9zu4p8 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title[b-oplw9zu4p8] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    transition: color 0.2s ease, font-size 0.3s ease;
    letter-spacing: -0.02em;
}

/* DEPRECATED: Tour button removed from welcome state (dashboard declutter) */
/* .tour-prompt-btn kept for potential future re-introduction */
.tour-prompt-btn[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 10px 20px;
    background: rgba(var(--theme-accent-rgb), 0.12);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.25);
    border-radius: 24px;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.tour-prompt-btn:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.2);
    border-color: rgba(var(--theme-accent-rgb), 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.2);
}

.tour-prompt-btn .material-symbols-rounded[b-oplw9zu4p8] {
    font-size: 18px;
}

/* ============================================
   EXECUTIVE DASHBOARD - KPI cards
   Professional layout for corporate users
   ============================================ */
/* HHC-V-1 (2026-05-02): Wrap for the Hub Card (Today's Work / My Tasks
   / My Goals / Insights tabs). Width matches the expanded hero band
   (.companion-hero, max-width 820px above) so the hub aligns with the
   greeting/companion section above it instead of reading as a narrower
   card. The inner card handles its own padding + theme treatment.
   Classic view's .hero-section sits at 600px so it'll be visually
   narrower than the hub by design — Classic is centered-and-narrow,
   the hub is the wider workspace below. */
.home-todays-work-wrap[b-oplw9zu4p8] {
    width: 100%;
    /* HUB-WIDE-1: 820 contained, --home-wide-max minus the column's 16px gutters in Wide. The Money
       card shares this wrapper, so it widens with the hub. */
    max-width: max(820px, calc(var(--home-wide-max, 0px) - 32px));
    margin-bottom: 24px;
    /* Fixed-Positioning (2026-05-03): Switched from `fadeInUp` (which
       animates transform: translateY) to `fadeIn` (opacity-only). The
       transform-bearing animation left a residual `transform: translateY(0)`
       on the element after completion, which creates a containing block
       for fixed-positioned descendants — meaning the SnoozeDialog (and
       every other dialog rendered inside this wrapper) was being
       positioned relative to .home-todays-work-wrap instead of the
       viewport. On mobile that pushed the dialog footer below the
       visible area and made the snooze submit button unreachable.
       DIALOG-Z-3 (2026-09-28, GOTCHAS #97 third bite): fill-mode `both` kept
       the opacity animation IN EFFECT after it finished, and an in-effect
       opacity animation is a stacking context in Chrome. That scoped the
       SnoozeDialog overlay's z-index inside this wrapper (sorted at z:auto,
       tree order), so the later MoneyPulseCard sibling - itself a stacking
       context on dark themes via backdrop-filter - painted OVER the open
       dialog. `backwards` gives the identical fade (opacity 0 through the
       delay, then 0->1) and stops applying once done: no residual context.
       Do NOT use `forwards`/`both` on any wrapper that contains a dialog. */
    animation: fadeInOpacityOnly-b-oplw9zu4p8 0.5s ease-out 0.1s backwards;
}

@keyframes fadeInOpacityOnly-b-oplw9zu4p8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.exec-kpi-grid[b-oplw9zu4p8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/*
 * H-D-2/3/4 (2026-05-01): theme-token pass on the Pro-mode KPI dashboard cards.
 *
 * Pre-fix, this block hardcoded slate hex values for text (#1e293b / #64748b /
 * #94a3b8), raw rgba(255,255,255,0.85) for the card background, and four
 * semantic-color icon gradients (blue tasks / purple time / amber goals /
 * green objectives) — none of which honored the user's chosen theme. A
 * dark-theme-only override patched Space/Winter/Nature/Ocean/Mystic/Tron,
 * leaving Executive (the Pro default) and Cloud locked to the unthemed
 * light palette.
 *
 * Post-fix, every color flows through the design-system tokens
 * (--theme-surface, --theme-border, --theme-text-primary, --theme-text-secondary,
 * --theme-text-muted, --theme-primary-rgb). The dark-theme override block is
 * gone because the tokens already vary per theme. The icon backplates collapsed
 * from four semantic colors to a single theme-primary gradient — the SVG shapes
 * (clipboard / clock / target / chart) carry the semantic differentiation, and
 * a four-color rainbow on Executive (purple/gold) or Tron (cyan) created tonal
 * clash that didn't earn its place.
 */
.exec-kpi-card[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(12px);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    position: relative;
}

.exec-kpi-card:hover[b-oplw9zu4p8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.exec-kpi-icon[b-oplw9zu4p8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    /* Single theme-primary gradient for all four cards. The ".tasks", ".time",
       ".goals", ".objectives" modifiers below remain (callers still pass them
       in markup) but no longer carry color overrides — kept as classes so
       theme-specific overrides could re-introduce per-card tinting later
       without touching the markup. Uses rgba() with comma-separated args to
       match the rest of the codebase's CSS convention (cf. line 567 hover
       border-color). */
    background: linear-gradient(
        135deg,
        rgba(var(--theme-primary-rgb, 99, 102, 241), 1),
        rgba(var(--theme-primary-rgb, 99, 102, 241), 0.8)
    );
}

.exec-kpi-icon svg[b-oplw9zu4p8] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.exec-kpi-data[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.exec-kpi-value[b-oplw9zu4p8] {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--theme-text-primary, #1e293b);
}

.exec-kpi-label[b-oplw9zu4p8] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/*
 * H-V-4 (2026-05-01): empty-state CTA hint inside the KPI card.
 *
 * Renders only when the card's value is zero AND the user has no historical
 * data for that surface (see Home.razor markup gates). Subtle by design —
 * the card itself is the action (the whole tile is clickable), the CTA is a
 * visual nudge that this card *can* be clicked when there's no number to
 * draw the eye. Slightly tinted with theme primary so the chevron reads as
 * "go here" rather than "alert."
 *
 * Falls away the moment the user has any data: once `_tasksDueToday > 0`
 * or `_totalTasks > 0` (etc.), the markup gate swaps the CTA out for the
 * existing badges/secondary text, and the card looks like every other
 * populated KPI tile.
 */
.exec-kpi-cta[b-oplw9zu4p8] {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.85);
    letter-spacing: 0.01em;
    transition: color 0.2s ease, transform 0.2s ease;
}

.exec-kpi-card:hover .exec-kpi-cta[b-oplw9zu4p8] {
    color: rgba(var(--theme-primary-rgb, 99, 102, 241), 1);
    transform: translateX(2px);
}

.exec-kpi-badge[b-oplw9zu4p8] {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 20px;
}

.exec-kpi-badge.success[b-oplw9zu4p8] {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.exec-kpi-secondary[b-oplw9zu4p8] {
    position: absolute;
    bottom: 8px;
    right: 10px;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
}

/*
 * Dark-theme background opacity adjustment — the only override that survived
 * the token migration. --theme-surface on Space/Winter/etc. already resolves
 * to a dark slate, but its opacity is calibrated for content cards; the KPI
 * tile reads better with a slightly higher alpha so the backdrop-filter blur
 * has more substance to work with. Hover variant gets one more notch up.
 */
.is-dark .exec-kpi-card[b-oplw9zu4p8] {
    background: color-mix(in srgb, var(--theme-surface) 70%, transparent);
}

.is-dark .exec-kpi-card:hover[b-oplw9zu4p8] {
    background: color-mix(in srgb, var(--theme-surface) 85%, transparent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.is-dark .exec-kpi-badge.success[b-oplw9zu4p8] {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

/* Mobile: single column */
@media (max-width: 480px) {
    .exec-kpi-grid[b-oplw9zu4p8] {
        grid-template-columns: 1fr;
    }
}

/* SPARK EGG onboarding CSS moved to Components/Onboarding/SparkEggInvite.razor.css
   (OB-WELCOME-EGG-1, 2026-06-30) — shared by Home + Welcome via the SparkEggInvite component. */

/* ============================================
   Community Pulse Teaser — link card to /community
   ============================================ */
.community-pulse-teaser[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 480px;
    margin: 1rem auto;
    padding: 0.875rem 1.25rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    text-align: left;
    font-family: inherit;
    color: inherit;
}

.community-pulse-teaser:hover[b-oplw9zu4p8] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    transform: translateY(-1px);
}

.pulse-teaser-icon[b-oplw9zu4p8] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.pulse-teaser-text[b-oplw9zu4p8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pulse-teaser-title[b-oplw9zu4p8] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.pulse-teaser-subtitle[b-oplw9zu4p8] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.pulse-teaser-arrow[b-oplw9zu4p8] {
    font-size: 1.1rem;
    color: var(--theme-text-muted, #94a3b8);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.community-pulse-teaser:hover .pulse-teaser-arrow[b-oplw9zu4p8] {
    transform: translateX(3px);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Dark themes */
.is-dark .community-pulse-teaser[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.6);
}

.is-dark .pulse-teaser-title[b-oplw9zu4p8] {
    color: #f1f5f9;
}

/* ============================================
   FELIX CTA — Premium floating pill (welcome state)
   Glassmorphic button with shimmer + sparkle animation
   ============================================ */
.felix-cta-section[b-oplw9zu4p8] {
    display: flex;
    justify-content: center;
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out 0.35s both;
}

.felix-cta-button[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--theme-accent-rgb, 129, 140, 248), 0.2);
    border-radius: 50px;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 20px rgba(var(--theme-accent-rgb, 129, 140, 248), 0.1),
        0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* Shimmer sweep — subtle light pass across the button */
.felix-cta-button[b-oplw9zu4p8]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 42%,
        rgba(255, 255, 255, 0.25) 50%,
        transparent 58%
    );
    animation: ctaShimmer-b-oplw9zu4p8 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaShimmer-b-oplw9zu4p8 {
    0%, 55%, 100% { transform: translateX(-100%) rotate(45deg); }
    45% { transform: translateX(100%) rotate(45deg); }
}

.felix-cta-button:hover[b-oplw9zu4p8] {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 8px 32px rgba(var(--theme-accent-rgb, 129, 140, 248), 0.2),
        0 0 0 2px rgba(var(--theme-accent-rgb, 129, 140, 248), 0.12);
    border-color: rgba(var(--theme-accent-rgb, 129, 140, 248), 0.4);
    background: rgba(255, 255, 255, 0.9);
}

.felix-cta-button:active[b-oplw9zu4p8] {
    transform: translateY(-1px) scale(0.98);
}

.felix-cta-icon[b-oplw9zu4p8] {
    font-size: 1.2rem;
    line-height: 1;
    animation: ctaSparkle-b-oplw9zu4p8 4s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes ctaSparkle-b-oplw9zu4p8 {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 1; }
    25% { transform: rotate(15deg) scale(1.15); opacity: 0.9; }
    50% { transform: rotate(0deg) scale(1); opacity: 1; }
    75% { transform: rotate(-10deg) scale(1.05); opacity: 0.95; }
}

.felix-cta-text[b-oplw9zu4p8] {
    position: relative;
    z-index: 1;
    letter-spacing: -0.01em;
}

/* Dark theme — glass over dark surface */
.is-dark .felix-cta-button[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.55);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
    color: white;
    box-shadow:
        0 4px 20px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15),
        0 0 0 1px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.is-dark .felix-cta-button:hover[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.75);
    box-shadow:
        0 8px 32px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25),
        0 0 0 2px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .felix-cta-button[b-oplw9zu4p8]::before {
    background: linear-gradient(
        45deg,
        transparent 42%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 58%
    );
}

.gradient-text[b-oplw9zu4p8] {
    display: inline;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradientShift-b-oplw9zu4p8 8s ease infinite;
}

@keyframes gradientShift-b-oplw9zu4p8 {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.hero-subtitle[b-oplw9zu4p8] {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.8;
    line-height: 1.4;
    transition: color 0.2s ease;
}

/* Weather/location line sits directly under the title; activity tally gets
   a subtle break beneath it (smaller font, a touch more transparent) so the
   two reads clearly decompose instead of running together. */
.hero-subtitle-weather[b-oplw9zu4p8] {
    margin-top: 4px;
}

/* PG-Greeting (2026-05-03): Primary Goal / Main Quest line in the
   subtitle stack. Sits above the activity tally with full opacity and
   an accented star icon, so it reads as the headline. The strong tag
   inside carries the resolved label (Personal: "Main Quest", Pro:
   "Primary Goal"). Hover underline on the wrapping <a> for affordance. */
.hero-subtitle-primary-goal[b-oplw9zu4p8] {
    margin-top: 6px;
    font-size: 0.95rem;
    opacity: 1;
}

/* PG-STAR-1 (2026-08-22, Josh on a phone: "it's the primary goal star here I was
   referring to"). The link is an inline-flex row of [star][text]. `align-items: center`
   is correct while the text is ONE line - and wrong the moment it wraps, because it then
   centres a 14px star against a TWO-line block, parking it in the gap between the lines
   with nothing beside it. Desktop never wraps, so this only ever showed up on mobile.

   flex-start + an explicit optical nudge pins the star to the FIRST line instead, which
   is where it belongs - it is a marker for "Main Quest:", not for the paragraph.

   🔴 The nudge is not a guess and it is not a mobile-only override: line-height is 1.4 on
   a 0.95rem subtitle = a 21.28px line box, and (21.28 - 14) / 2 = 3.64px = 0.24em. That
   is EXACTLY where `align-items: center` already placed the star on a single line, so at
   desktop width this pair is a pixel-for-pixel no-op. It changes behaviour only in the
   wrapped case, which is the case that was broken. Keep the two numbers in sync if the
   subtitle font-size or line-height ever moves. */
/* PG-STAR-1 v2 (2026-08-22): v1 fixed the VERTICAL half and could not touch the
   horizontal half. Recorded because the second cause was invisible until the first
   was fixed.

   As inline-flex the row is [14px star][text span]. A flex item's base size is its
   max-content width, shrunk to fit - so on a 430px screen the span (one long line at
   max-content) shrinks to fill the WHOLE available width. The star is then pinned to
   the far left of a nearly-full-width box while the text centres inside the span,
   stranding it at the margin. On desktop the text fits, the span shrink-wraps to its
   own width, and the star hugs it - which is why this only ever showed on mobile, and
   why "align the star to the first line" fixed the symptom I could see and not the
   one I could not.

   The star is not a flex sibling of the text - it is a marker that belongs IN the
   text. As `inline` it joins the centred flow: line 1 reads "* Main Quest: <goal>"
   with the star glued to the label, wrapping handled by the browser, no box to
   stretch. gap -> margin-right, and vertical-align replaces the flex alignment.

   ⚠️ NOT a no-op at desktop (v1 was): this changes the layout mechanism, so glance at
   a wide viewport too. Visually it should be indistinguishable - icon, 6px, text, all
   centred - because that is what inline-flex was approximating. */
.hero-subtitle-primary-goal-link[b-oplw9zu4p8] {
    display: inline;
    color: inherit;
    text-decoration: none;
}

.hero-subtitle-primary-goal-link:hover[b-oplw9zu4p8] {
    text-decoration: underline;
}

.hero-subtitle-primary-goal-link svg[b-oplw9zu4p8] {
    color: var(--theme-warning, #f59e0b);
    /* PG-STAR-1 v2: inline now, so the flex `gap` and `align-items` are gone.
       margin-right replaces the gap; -0.125em is the standard nudge that centres an
       icon on the cap-height band instead of leaving it sitting on the baseline. */
    margin-right: 6px;
    vertical-align: -0.125em;
}

/* MOB4 (2026-05-03): Hold "· 85% complete" together as a single wrap
   unit so on narrow mobile widths the break happens between the goal
   name and the progress phrase, not in the middle of the progress
   phrase ("85%" \n "complete" was the bug). Doesn't constrain the
   goal name itself — long goals still wrap naturally. */
.hero-subtitle-primary-goal-progress[b-oplw9zu4p8] {
    white-space: nowrap;
}

.hero-subtitle-activity[b-oplw9zu4p8] {
    margin-top: 6px;
    font-size: 0.85rem;
    opacity: 0.65;
}

.companion-hero-greeting .hero-subtitle-activity[b-oplw9zu4p8] {
    margin-top: 4px;
}

.hero-affirmation[b-oplw9zu4p8] {
    font-size: 0.85rem;
    font-style: italic;
    margin: 6px 0 0;
    opacity: 0.6;
    line-height: 1.4;
    transition: color 0.2s ease;
}

/* ============================================
   COMPANION HERO BAND
   Unified avatar + identity composition replacing
   the old split welcome-avatar-section + hero-section.
   Theme-agnostic: uses existing --theme-* variables and
   a per-render --companion-tier-color (set inline from
   the companion's VisualColor) for tier tinting.
   ============================================ */
.companion-hero[b-oplw9zu4p8] {
    /* Tier color drives every accent in the hero band. Set inline by
       Home.razor from the companion's VisualColor (hex). The RGB triplet
       mirror (--companion-tier-color-rgb) is set by .tier-* classes below
       so we can do rgba(var(--...-rgb), alpha) blends — the codebase pattern.
       Fallback is --theme-primary (hex) for the color and --theme-primary-rgb
       for the triplet so the hero still looks coherent when VisualColor
       and the tier class are both missing. */
    --companion-tier-color: var(--theme-primary);
    --companion-tier-color-rgb: var(--theme-primary-rgb);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    max-width: 820px;
    margin: 8px auto 20px;
    padding: 22px 28px;
    border-radius: 24px;
    isolation: isolate; /* contain backdrop glow */
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out;
    transition: opacity 0.4s ease, transform 0.4s ease, padding 0.3s ease,
                margin 0.3s ease, gap 0.3s ease;
    flex-shrink: 0;
}

/* Aurora backplate — soft radial wash tinted by the companion's
   tier color. Sits behind everything in the hero band. */
.companion-hero-backdrop[b-oplw9zu4p8] {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(120% 140% at 18% 50%,
            rgba(var(--companion-tier-color-rgb), 0.22) 0%,
            rgba(var(--companion-tier-color-rgb), 0.10) 32%,
            transparent 62%),
        radial-gradient(90% 110% at 90% 30%,
            rgba(var(--theme-accent-rgb), 0.10) 0%,
            transparent 58%);
    opacity: 0.9;
    animation: heroAuroraPulse-b-oplw9zu4p8 9s ease-in-out infinite;
}

@keyframes heroAuroraPulse-b-oplw9zu4p8 {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.02); }
}

/* Avatar throne — column containing the avatar + tap-to-chat hint. */
.companion-hero-avatar-throne[b-oplw9zu4p8] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Glow halo behind the avatar. Slow breathing pulse. */
.companion-hero-avatar-glow[b-oplw9zu4p8] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    aspect-ratio: 1 / 1;
    max-width: 300px;
    transform: translate(-50%, -60%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle at 50% 50%,
        rgba(var(--companion-tier-color-rgb), 0.38) 0%,
        rgba(var(--companion-tier-color-rgb), 0.18) 35%,
        transparent 65%);
    filter: blur(8px);
    animation: heroAvatarGlowPulse-b-oplw9zu4p8 5.5s ease-in-out infinite;
}

@keyframes heroAvatarGlowPulse-b-oplw9zu4p8 {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -60%) scale(1); }
    50%      { opacity: 1;    transform: translate(-50%, -60%) scale(1.06); }
}

/* PRO-F-4 (2026-05-08): Companion celebration burst — applied to the
   .companion-hero-avatar-throne wrapper while the EvolutionArrivalCelebration
   overlay is visible (~4 seconds). The button does a springy bounce with a
   playful tilt-and-settle; the glow ring expands and brightens on a parallel
   keyframe so the radial glow reads like an energy aura blooming outward.
   Animations are one-shot (no `infinite`) — they run for the duration of the
   celebration and naturally rest at the closing keyframe. */
.companion-evolution-burst .companion-hero-avatar-button[b-oplw9zu4p8] {
    animation: companionEvolutionBounce-b-oplw9zu4p8 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2;
    transform-origin: center 70%;
}

/* OB-V-22 (2026-05-11): Decorative cream/gold halo for the celebration moment,
   layered ON TOP of the EVO-V-1 fix in themes.css that actually restored
   visibility on dark themes. This rule was originally written as a "fix" for
   the purple-blob bug, but the real cause was the universal `[class*="overlay"] > div`
   rule painting solid #1e293b over the whole viewport (see EVO-V-1 in DECISIONS.md).
   With that fix in place, this override is purely a polish touch — the gold-cream
   gradient mirrors the toast banner's accent for visual consistency.
   Applies only to the expanded-chat layout; classic-hero is handled by OB-V-23. */
.companion-evolution-burst .companion-hero-avatar-glow[b-oplw9zu4p8] {
    animation: companionEvolutionAura-b-oplw9zu4p8 3.2s ease-out 1;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 236, 179, 0.55) 0%,    /* cream center */
        rgba(251, 191, 36, 0.35) 30%,    /* amber-400 mid */
        rgba(251, 191, 36, 0.12) 55%,    /* amber-400 fade */
        transparent 75%) !important;
}

@keyframes companionEvolutionBounce-b-oplw9zu4p8 {
    0%   { transform: scale(1)    rotate(0deg); }
    18%  { transform: scale(1.18) rotate(-6deg); }   /* punch up + tilt left */
    36%  { transform: scale(0.96) rotate(4deg); }    /* recoil + tilt right */
    54%  { transform: scale(1.08) rotate(-2deg); }   /* secondary bounce */
    74%  { transform: scale(0.99) rotate(1deg); }    /* small overshoot back */
    100% { transform: scale(1)    rotate(0deg); }    /* settle */
}

/* OB-V-21 (2026-05-11): Aura toned down. Pre-fix peaks (scale 1.55 + blur 14px
   + brightness 1.45) over-bloomed even with the EVO-V-1 fix in place — the
   tier-color glow could still wash out the sprite on dark themes during the
   peak frame. New peak values (scale 1.2 + blur 9px + brightness 1.2) pulse
   behind the sprite without erasing it. This is a general softening that's
   correct independent of EVO-V-1; keep it. */
@keyframes companionEvolutionAura-b-oplw9zu4p8 {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -60%) scale(1);
        filter: blur(6px) brightness(1);
    }
    20% {
        opacity: 0.85;
        transform: translate(-50%, -60%) scale(1.2);
        filter: blur(9px) brightness(1.2);
    }
    55% {
        opacity: 0.75;
        transform: translate(-50%, -60%) scale(1.1);
        filter: blur(7px) brightness(1.1);
    }
    100% {
        opacity: 0.6;
        transform: translate(-50%, -60%) scale(1);
        filter: blur(6px) brightness(1);
    }
}

/* OB-V-23 (2026-05-11): Classic-mode evolution polish. The classic layout has
   no .companion-hero-avatar-glow div, so OB-V-22's glow override doesn't reach
   it. This rule mirrors the celebration treatment for classic-hero by driving
   it through the container's drop-shadow filter.

   Originally written as a "fix" for the avatar disappearing on Space theme,
   but the real cause was EVO-V-1 (themes.css [class*="overlay"] trap). With
   that fix in place, this is decorative polish layered on top — gold halo +
   bounce + slight saturation boost so the moment reads as "energized" rather
   than "regular state".

   Three layered effects during the 3.2s burst:
     1. Bouncy scale animation on the avatar container (mirrors the
        EXPANDED view's companionEvolutionBounce so both layouts feel
        equally celebratory).
     2. Gold drop-shadow override (cream → amber halo) mirroring the
        toast banner's gold accent.
     3. Slight saturation/brightness boost on the canvas itself. */
.companion-evolution-burst.classic-hero-wrapper .welcome-avatar-container[b-oplw9zu4p8] {
    animation:
        welcomeAvatarFloat-b-oplw9zu4p8 5s ease-in-out infinite,
        companionEvolutionBounce-b-oplw9zu4p8 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2;
    filter:
        drop-shadow(0 0 24px rgba(251, 191, 36, 0.55))
        drop-shadow(0 4px 18px rgba(255, 236, 179, 0.4))
        brightness(1.08)
        saturate(1.15);
    transition: filter 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .companion-evolution-burst.classic-hero-wrapper .welcome-avatar-container[b-oplw9zu4p8] {
        animation: welcomeAvatarFloat-b-oplw9zu4p8 5s ease-in-out infinite;
        /* Drop the bounce, keep the gold halo so the user still gets a
           visual cue without the motion. */
    }
}

/* Respect prefers-reduced-motion — drop the bounce + scale, keep a gentle
   glow brighten so the user still gets a payoff cue without the motion. */
@media (prefers-reduced-motion: reduce) {
    .companion-evolution-burst .companion-hero-avatar-button[b-oplw9zu4p8] {
        animation: none;
    }
    .companion-evolution-burst .companion-hero-avatar-glow[b-oplw9zu4p8] {
        animation: companionEvolutionAuraReduced-b-oplw9zu4p8 2s ease-out 1;
    }
    @keyframes companionEvolutionAuraReduced-b-oplw9zu4p8 {
        0%   { opacity: 0.75; }
        50%  { opacity: 1;    filter: blur(8px) brightness(1.3); }
        100% { opacity: 0.75; }
    }
}

/* The avatar button itself is a reset-styled wrapper around CompanionEntity. */
.companion-hero-avatar-button[b-oplw9zu4p8] {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
    color: inherit;
}

.companion-hero-avatar-button:hover[b-oplw9zu4p8] {
    transform: translateY(-2px) scale(1.02);
}

.companion-hero-avatar-button:focus-visible[b-oplw9zu4p8] {
    outline: 3px solid rgba(var(--companion-tier-color-rgb), 0.75);
    outline-offset: 6px;
}

/* HC-V-2 (2026-05-02): The HP-V-3 `.companion-hero-cta` pill rules and
   their `.cta-dot` + `heroCtaDot` keyframe were removed here. The pill
   markup is gone (Home.razor); the avatar's hover tooltip carries the
   discoverability hint now. */

/* Identity column — greeting on top, companion card below */
.companion-hero-identity[b-oplw9zu4p8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.companion-hero-greeting[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.companion-hero-greeting .hero-title[b-oplw9zu4p8] {
    text-align: left;
    font-size: clamp(1.6rem, 2.4vw, 2rem);
}

.companion-hero-greeting .hero-subtitle[b-oplw9zu4p8] {
    text-align: left;
}

/* Companion status card — light-theme default. Dark-theme override
   block below switches to the Space-theme glassmorphism recipe. */
.companion-hero-card[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: var(--theme-surface);
    border: 1px solid rgba(var(--companion-tier-color-rgb), 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(var(--companion-tier-color-rgb), 0.10);
    transition: border-color 0.25s ease, background 0.25s ease;
}

.companion-card-row[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.companion-card-row.name-row[b-oplw9zu4p8] {
    justify-content: space-between;
}

.companion-card-name[b-oplw9zu4p8] {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--theme-text-primary);
}

.companion-card-stage[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(var(--companion-tier-color-rgb), 0.18);
    color: var(--theme-text-primary);
    border: 1px solid rgba(var(--companion-tier-color-rgb), 0.30);
    white-space: nowrap;
}

.companion-card-stage .stage-dot[b-oplw9zu4p8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--companion-tier-color);
    box-shadow: 0 0 4px var(--companion-tier-color);
    flex-shrink: 0;
}

.companion-card-stage .stage-sep[b-oplw9zu4p8] {
    opacity: 0.5;
    margin: 0 2px;
}

/* Energy progress bar */
.companion-card-row.energy-row[b-oplw9zu4p8] {
    gap: 12px;
}

.companion-energy-track[b-oplw9zu4p8] {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    /* Flat track tint: darker-than-surface so fill has contrast on any theme.
       Dark themes override below to a lighter track on the darker card. */
    background: rgba(0, 0, 0, 0.08);
}

.companion-energy-fill[b-oplw9zu4p8] {
    height: 100%;
    border-radius: inherit;
    /* Shimmer highlight uses pure white (not a theme variable) because it's a
       specular gloss, not a color that should theme-shift. */
    background: linear-gradient(90deg,
        var(--companion-tier-color) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        var(--companion-tier-color) 100%);
    background-blend-mode: screen;
    background-size: 200% 100%;
    animation: heroEnergyShimmer-b-oplw9zu4p8 4s linear infinite;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 0 8px rgba(var(--companion-tier-color-rgb), 0.60),
        inset 0 0 6px rgba(255, 255, 255, 0.25);
}

@keyframes heroEnergyShimmer-b-oplw9zu4p8 {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.companion-energy-label[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.companion-energy-label .energy-denom[b-oplw9zu4p8] {
    opacity: 0.55;
    font-weight: 500;
}

.companion-energy-label .energy-unit[b-oplw9zu4p8] {
    opacity: 0.7;
    font-weight: 500;
    margin-left: 4px;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

/* Streak badge */
.companion-card-row.streak-row[b-oplw9zu4p8] {
    gap: 6px;
}

/* Streak badge — amber/fire is a semantic color (streak = flame), so hex is
   intentional here rather than theme-sourced. Text color is a CSS var so the
   dark-theme override block below can flip it for legibility on dark cards. */
.streak-badge[b-oplw9zu4p8] {
    --streak-text: #b45309;  /* amber-700 — light-theme default */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--streak-text);
    background: rgba(245, 158, 11, 0.22);
    border: 1px solid rgba(245, 158, 11, 0.45);
}

.streak-badge .streak-flame[b-oplw9zu4p8] {
    filter: drop-shadow(0 0 2px rgba(245, 158, 11, 0.6));
    font-size: 0.9em;
}

/* Collapsed variant — when floating chat is open, the hero band
   shrinks out of the way rather than disappearing entirely. */
.companion-hero.hero-collapsed[b-oplw9zu4p8] {
    opacity: 0.45;
    transform: scale(0.96);
    margin-top: 4px;
    margin-bottom: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
    gap: 16px;
    pointer-events: none;
}

.companion-hero.hero-collapsed .companion-hero-backdrop[b-oplw9zu4p8],
.companion-hero.hero-collapsed .companion-hero-avatar-glow[b-oplw9zu4p8] {
    opacity: 0;
}

/* Standalone fallback (companion hidden) — preserve top hero moment */
.hero-section.hero-standalone[b-oplw9zu4p8] {
    text-align: center;
    max-width: 760px;   /* HERO-TRIM-1: see .hero-section */
    margin: 8px auto 20px;
}

/* Responsive: stack on narrow viewports */
@media (max-width: 860px) {
    .companion-hero[b-oplw9zu4p8] {
        flex-direction: column;
        align-items: center;
        padding: 18px 20px;
        gap: 18px;
        text-align: center;
    }

    .companion-hero-identity[b-oplw9zu4p8] {
        width: 100%;
        align-items: center;
    }

    .companion-hero-greeting[b-oplw9zu4p8],
    .companion-hero-greeting .hero-title[b-oplw9zu4p8],
    .companion-hero-greeting .hero-subtitle[b-oplw9zu4p8] {
        text-align: center;
    }

    /* HHC-V-1 polish (2026-05-02): On mobile/narrow viewports the
       expanded-view greeting stacks vertically and the rest of the text
       centers (hero-title, hero-subtitle above), but the workspace label
       wrap kept the desktop flex-start alignment from line ~300 — making
       "HEAVEN ISLAND" hang to the left while everything else around it
       was centered. Override here so the label sits in the column with
       the greeting/weather/stats it visually belongs to. */
    .companion-hero-greeting .workspace-label-wrap[b-oplw9zu4p8] {
        justify-content: center;
    }

    .companion-hero-card[b-oplw9zu4p8] {
        width: 100%;
        max-width: 480px;
    }

    .companion-card-row.name-row[b-oplw9zu4p8] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .companion-hero[b-oplw9zu4p8] {
        padding: 14px 14px;
        margin-bottom: 12px;
        gap: 14px;
        border-radius: 20px;
    }

    .companion-hero-card[b-oplw9zu4p8] {
        padding: 12px 14px;
    }

    .companion-card-name[b-oplw9zu4p8] {
        font-size: 1rem;
    }

    .companion-card-stage[b-oplw9zu4p8],
    .companion-energy-label[b-oplw9zu4p8],
    .streak-badge[b-oplw9zu4p8] {
        font-size: 0.72rem;
    }

    /* MOB2 (2026-05-03): Shrink the Expanded variant's avatar throne as
       a parent so the button's existing hover transform (translateY +
       scale 1.02 on line ~1260) still works without being clobbered.
       Throne is a layout container — scaling it cascades the visual
       size of the avatar and its glow without touching the button's
       interaction transforms. The negative margin-bottom claws back
       the vertical gap left by the smaller scaled footprint (the
       companion-hero parent goes column at 860px so the throne sits
       above the greeting; without the margin pull the greeting would
       float a chunk below the visually-shrunk throne). Combined with
       the .welcome-avatar-section rule in the welcome-state block (line
       ~4192), both hero variants land at roughly the same compact
       footprint on a 390px viewport.

       MOB2-Polish (2026-05-03): Bumped from -36px to -80px — same
       reasoning as the Classic-view sibling rule: scale(0.7) on a
       ~240px canvas leaves ~72px of empty layout box that the negative
       margin needs to claw back. Also drop the parent companion-hero's
       column gap from 14px to 6px so the residual gap above the
       identity block stays tight. */
    .companion-hero[b-oplw9zu4p8] {
        gap: 6px;
    }

    .companion-hero-avatar-throne[b-oplw9zu4p8] {
        transform: scale(0.7);
        transform-origin: top center;
        margin-bottom: -80px;
    }
}

/* Reduced-motion — quiet all the ambient animations */
@media (prefers-reduced-motion: reduce) {
    .companion-hero[b-oplw9zu4p8],
    .companion-hero-backdrop[b-oplw9zu4p8],
    .companion-hero-avatar-glow[b-oplw9zu4p8],
    .companion-energy-fill[b-oplw9zu4p8],
    .welcome-avatar-container[b-oplw9zu4p8] {
        animation: none !important;
    }

    .companion-energy-fill[b-oplw9zu4p8] {
        transition: width 0.3s ease;
    }

    .companion-hero-avatar-button:hover[b-oplw9zu4p8],
    .welcome-avatar-container:hover[b-oplw9zu4p8] {
        transform: none;
    }
}

/* Per-tier accent fallbacks — kick in when VisualColor isn't set.
   Matches companionEntity.js TIER_PALETTES hue anchors. Each tier defines
   BOTH the hex color (for solid usage) AND an RGB triplet (for rgba() alpha
   blends). The triplet variant is required because the codebase uses
   rgba(var(--...-rgb), alpha) rather than color-mix(in srgb, ...). Tier
   classes are also applied to .classic-hero-wrapper so the classic view
   inherits the same tier tint for its avatar glow/drop-shadow. */
.companion-hero.tier-spark[b-oplw9zu4p8],
.classic-hero-wrapper.tier-spark[b-oplw9zu4p8] {
    --companion-tier-color: #ffb347;
    --companion-tier-color-rgb: 255, 179, 71;
}
.companion-hero.tier-pulse[b-oplw9zu4p8],
.classic-hero-wrapper.tier-pulse[b-oplw9zu4p8] {
    --companion-tier-color: #3498db;
    --companion-tier-color-rgb: 52, 152, 219;
}
.companion-hero.tier-nova[b-oplw9zu4p8],
.classic-hero-wrapper.tier-nova[b-oplw9zu4p8] {
    --companion-tier-color: #a855f7;
    --companion-tier-color-rgb: 168, 85, 247;
}
.companion-hero.tier-zenith[b-oplw9zu4p8],
.classic-hero-wrapper.tier-zenith[b-oplw9zu4p8] {
    --companion-tier-color: #10b981;
    --companion-tier-color-rgb: 16, 185, 129;
}
.companion-hero.tier-ascendant[b-oplw9zu4p8],
.classic-hero-wrapper.tier-ascendant[b-oplw9zu4p8] {
    --companion-tier-color: #f43f5e;
    --companion-tier-color-rgb: 244, 63, 94;
}
.companion-hero.tier-transcendent[b-oplw9zu4p8],
.classic-hero-wrapper.tier-transcendent[b-oplw9zu4p8] {
    --companion-tier-color: #22d3ee;
    --companion-tier-color-rgb: 34, 211, 238;
}
.companion-hero.tier-legendary[b-oplw9zu4p8],
.classic-hero-wrapper.tier-legendary[b-oplw9zu4p8] {
    --companion-tier-color: #fbbf24;
    --companion-tier-color-rgb: 251, 191, 36;
}

/* ============================================
   DARK-THEME OVERRIDES — hero band + card
   Consolidated into one :is() block (the codebase pattern, per
   SPACE_THEME_GOLDEN_STANDARD). Applies the glassmorphism recipe
   (rgba-white 0.08 background + blur + rgba-white 0.1 border) to the
   companion card so it reads as a frosted pane on dark nebula backgrounds
   instead of disappearing into the gradient. Also flips the streak badge
   text to amber-300 for legibility against the dark card. Must include
   space, winter, nature, ocean, mystic, AND tron — tron/mystic are the
   commonly forgotten ones.
   ============================================ */
.is-dark .companion-hero-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(var(--companion-tier-color-rgb), 0.18);
}

.is-dark .companion-energy-track[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
}

.is-dark .streak-badge[b-oplw9zu4p8] {
    --streak-text: #fcd34d;  /* amber-300 — legible on dark frosted card */
}

/* ============================================
   HERO VIEW TOGGLE PILL
   Lets the user flip between classic (centered avatar +
   greeting) and expanded (unified companion-hero) layouts.
   Subtle pill parked in the top-right of each variant.
   ============================================ */
.hero-view-toggle[b-oplw9zu4p8] {
    appearance: none;
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    /* Icon-only at rest: tight square padding, no gap until label reveals.
       Hover/focus expand horizontally with the label slide-in. */
    padding: 5px 6px;
    gap: 0;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--theme-text-primary);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    cursor: pointer;
    opacity: 0.5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.2s ease, padding 0.2s ease, background 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease;
}

.hero-view-toggle:hover[b-oplw9zu4p8],
.hero-view-toggle:focus-visible[b-oplw9zu4p8] {
    /* Reveal: expand padding so the sliding-in label has breathing room. */
    padding: 4px 10px;
    opacity: 1;
    border-color: rgba(var(--companion-tier-color-rgb, var(--theme-primary-rgb)), 0.50);
    transform: translateY(-1px);
}

.hero-view-toggle:focus-visible[b-oplw9zu4p8] {
    outline: 2px solid rgba(var(--companion-tier-color-rgb, var(--theme-primary-rgb)), 0.70);
    outline-offset: 2px;
}

.hero-view-toggle-icon[b-oplw9zu4p8] {
    font-size: 0.9em;
    line-height: 1;
    opacity: 0.9;
}

.hero-view-toggle-label[b-oplw9zu4p8] {
    /* Hidden at rest, revealed on hover/focus via animated max-width +
       margin so the label appears to slide in from beside the icon rather
       than hard-popping into the layout. */
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    transition: max-width 0.2s ease, margin-left 0.2s ease, opacity 0.15s ease;
}

.hero-view-toggle:hover .hero-view-toggle-label[b-oplw9zu4p8],
.hero-view-toggle:focus-visible .hero-view-toggle-label[b-oplw9zu4p8] {
    max-width: 120px;
    margin-left: 6px;
    opacity: 1;
}

/* Classic wrapper needs position context so the absolute toggle anchors correctly. */
.classic-hero-wrapper[b-oplw9zu4p8] {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Collapse the toggle into just the icon on narrow screens to save space. */
@media (max-width: 540px) {
    .hero-view-toggle[b-oplw9zu4p8] {
        top: 8px;
        right: 8px;
        padding: 4px 8px;
    }

    .hero-view-toggle-label[b-oplw9zu4p8] {
        display: none;
    }
}

/* Hide the toggle when the hero band is collapsed behind floating chat. */
.companion-hero.hero-collapsed .hero-view-toggle[b-oplw9zu4p8] {
    opacity: 0;
    pointer-events: none;
}

/* Reduced motion — quiet the toggle's hover lift. */
@media (prefers-reduced-motion: reduce) {
    .hero-view-toggle[b-oplw9zu4p8],
    .hero-view-toggle:hover[b-oplw9zu4p8] {
        transition: opacity 0.15s ease, background 0.15s ease;
        transform: none;
    }
}

/* ============================================
   INPUT AREA - Bottom-anchored input (ChatGPT/Grok style)
   ============================================ */
.input-area[b-oplw9zu4p8] {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 20px 16px;
    flex-shrink: 0;
    background: transparent;
}

/* Legacy command-center - redirect to input-area */
.command-center[b-oplw9zu4p8] {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out 0.1s both;
    flex-shrink: 0;
}

/* Compact mode when chatting - minimal spacing */
.command-center.compact[b-oplw9zu4p8] {
    gap: 8px;
    padding: 0 8px;
}

/* Chat Controls Bar - model selector, history, AI mode above input */
.chat-controls-bar[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 700px;
    padding: 0 4px;
    animation: fadeIn-b-oplw9zu4p8 0.2s ease;
}

.chat-mode-badge[b-oplw9zu4p8] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
    white-space: nowrap;
    flex-shrink: 0;
}

/* First-visit chat mode tip */
.chat-mode-tip[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(var(--theme-primary-rgb), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
    border-radius: 12px;
    max-width: 480px;
    animation: fadeInUp-b-oplw9zu4p8 0.4s ease-out;
}

.tip-icon[b-oplw9zu4p8] {
    flex-shrink: 0;
    font-size: 0.9rem;
}

.tip-text[b-oplw9zu4p8] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    line-height: 1.3;
}

.tip-dismiss[b-oplw9zu4p8] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 2px;
    font-size: 0.75rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.tip-dismiss:hover[b-oplw9zu4p8] {
    opacity: 1;
}

/* Companion Avatar in controls bar */
.home-avatar-container[b-oplw9zu4p8] {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.home-avatar-container:hover[b-oplw9zu4p8] {
    /* Avatar handles its own hover via is-interactive */
}

.chat-controls-bar .icon-btn[b-oplw9zu4p8] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Chat options dropdown menu */
.chat-options-menu[b-oplw9zu4p8] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 160px;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 4px;
    z-index: 100;
    animation: fadeIn-b-oplw9zu4p8 0.15s ease;
}

.chat-option-item[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    font-size: 0.82rem;
    color: var(--theme-text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-option-item:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.08);
}

.chat-option-item.danger[b-oplw9zu4p8] {
    color: #ef4444;
}

.chat-option-item.danger:hover[b-oplw9zu4p8] {
    background: rgba(239, 68, 68, 0.08);
}

.is-dark .chat-options-menu[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.chat-controls-bar .model-select-btn[b-oplw9zu4p8] {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.chat-controls-spacer[b-oplw9zu4p8] {
    flex: 1;
}

/* The Input Hub - History + ChatInput unified */
.command-input-wrapper[b-oplw9zu4p8] {
    width: 100%;
    max-width: 700px;
    display: flex;
    align-items: stretch;
    position: relative;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    /* Removed overflow: hidden - was clipping tool suggestions dropdown */
}

.command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 32px rgba(var(--theme-accent-rgb), 0.12),
        0 0 0 1px rgba(var(--theme-accent-rgb), 0.08);
}

.command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 32px rgba(var(--theme-accent-rgb), 0.18),
        0 0 0 2px rgba(var(--theme-accent-rgb), 0.15);
}

/* History Action Button - Seamlessly integrated */
.command-action[b-oplw9zu4p8] {
    width: 52px;
    min-height: 56px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
    margin: 0;
    background: transparent;
    position: relative;
}

/* First action (history) gets left rounded corners */
.command-action.history-action[b-oplw9zu4p8] {
    color: #94a3b8;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 20px 0 0 20px;
}

.command-action.history-action[b-oplw9zu4p8]::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    background: transparent;
    transition: all 0.25s ease;
}

.command-action.history-action:hover[b-oplw9zu4p8] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(var(--theme-accent-rgb), 0.06);
}

.command-action.history-action svg[b-oplw9zu4p8] {
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.command-action.history-action:hover svg[b-oplw9zu4p8] {
    transform: rotate(-15deg) scale(1.1);
}

/* Stop speech button */
.stop-speech-btn[b-oplw9zu4p8] {
    color: #ef4444;
    border-left: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 0 20px 20px 0;
    animation: pulse-red-b-oplw9zu4p8 1.5s infinite;
}

.stop-speech-btn:hover[b-oplw9zu4p8] {
    background: rgba(239, 68, 68, 0.1);
}

@keyframes pulse-red-b-oplw9zu4p8 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================
   COMPACT MODEL SELECTOR - In Input Area
   ============================================ */
.compact-model-selector[b-oplw9zu4p8] {
    position: relative;
}

.command-action.model-action[b-oplw9zu4p8] {
    width: 44px;
    min-height: 56px;
    color: #94a3b8;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
}

.command-action.model-action[b-oplw9zu4p8]::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 10px;
    background: transparent;
    transition: all 0.25s ease;
}

.command-action.model-action:hover[b-oplw9zu4p8] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.command-action.model-action:hover[b-oplw9zu4p8]::before {
    background: rgba(var(--theme-accent-rgb), 0.06);
}

.command-action.model-action.active[b-oplw9zu4p8] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.command-action.model-action.active[b-oplw9zu4p8]::before {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.model-emoji-small[b-oplw9zu4p8] {
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
}

.compact-model-menu[b-oplw9zu4p8] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 200;
    overflow: hidden;
    animation: slideUpFade-b-oplw9zu4p8 0.15s ease;
}

@keyframes slideUpFade-b-oplw9zu4p8 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark themes - compact model selector */
.theme-space .command-action.model-action[b-oplw9zu4p8],
.theme-winter .command-action.model-action[b-oplw9zu4p8],
.theme-nature .command-action.model-action[b-oplw9zu4p8],
.theme-ocean .command-action.model-action[b-oplw9zu4p8],
.theme-mystic .command-action.model-action[b-oplw9zu4p8],
.theme-tron .command-action.model-action[b-oplw9zu4p8] {
    color: rgba(255, 255, 255, 0.7);
    border-right-color: rgba(255, 255, 255, 0.1);
}

.theme-space .command-action.model-action:hover[b-oplw9zu4p8],
.theme-winter .command-action.model-action:hover[b-oplw9zu4p8],
.theme-nature .command-action.model-action:hover[b-oplw9zu4p8],
.theme-ocean .command-action.model-action:hover[b-oplw9zu4p8],
.theme-mystic .command-action.model-action:hover[b-oplw9zu4p8],
.theme-tron .command-action.model-action:hover[b-oplw9zu4p8] {
    color: white;
}

.theme-space .command-action.model-action:hover[b-oplw9zu4p8]::before,
.theme-winter .command-action.model-action:hover[b-oplw9zu4p8]::before,
.theme-nature .command-action.model-action:hover[b-oplw9zu4p8]::before,
.theme-ocean .command-action.model-action:hover[b-oplw9zu4p8]::before,
.theme-mystic .command-action.model-action:hover[b-oplw9zu4p8]::before,
.theme-tron .command-action.model-action:hover[b-oplw9zu4p8]::before {
    background: rgba(255, 255, 255, 0.08);
}

.theme-space .compact-model-menu[b-oplw9zu4p8],
.theme-winter .compact-model-menu[b-oplw9zu4p8],
.theme-nature .compact-model-menu[b-oplw9zu4p8],
.theme-ocean .compact-model-menu[b-oplw9zu4p8],
.theme-mystic .compact-model-menu[b-oplw9zu4p8],
.theme-tron .compact-model-menu[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* ============================================
   DEPRECATED: Inline stats merged into hero-subtitle (dashboard declutter)
   Kept for reference — no longer rendered in welcome state
   ============================================ */
.inline-stats[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out 0.2s both;
}

.stat-pill[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    animation: popIn-b-oplw9zu4p8 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.stat-pill:nth-child(1)[b-oplw9zu4p8] { animation-delay: 0.1s; }
.stat-pill:nth-child(3)[b-oplw9zu4p8] { animation-delay: 0.15s; }
.stat-pill:nth-child(5)[b-oplw9zu4p8] { animation-delay: 0.2s; }

@keyframes popIn-b-oplw9zu4p8 {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(var(--theme-accent-rgb), 0.15);
    border-color: rgba(var(--theme-accent-rgb), 0.2);
}

.stat-pill:active[b-oplw9zu4p8] {
    transform: translateY(-1px) scale(0.98);
}

.stat-pill-value[b-oplw9zu4p8] {
    font-size: 1.1rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.stat-pill-label[b-oplw9zu4p8] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: lowercase;
    letter-spacing: -0.01em;
}

.stat-divider[b-oplw9zu4p8] {
    color: #e2e8f0;
    font-size: 0.4rem;
    margin: 0 2px;
    opacity: 0.6;
}

/* ============================================
   DEPRECATED: Smart suggestions replaced by SuggestedPromptChips (dashboard declutter)
   Kept for reference — no longer rendered in welcome state
   ============================================ */
.smart-suggestions[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out 0.3s both;
}

.suggestion-pill[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    font-family: inherit;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    animation: slideUp-b-oplw9zu4p8 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.suggestion-pill:nth-child(1)[b-oplw9zu4p8] { animation-delay: 0.2s; }
.suggestion-pill:nth-child(2)[b-oplw9zu4p8] { animation-delay: 0.25s; }
.suggestion-pill:nth-child(3)[b-oplw9zu4p8] { animation-delay: 0.3s; }
.suggestion-pill:nth-child(4)[b-oplw9zu4p8] { animation-delay: 0.35s; }

@keyframes slideUp-b-oplw9zu4p8 {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.suggestion-pill[b-oplw9zu4p8]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.08), rgba(219, 39, 119, 0.08));
    opacity: 0;
    transition: opacity 0.25s ease;
}

.suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(var(--theme-accent-rgb), 0.12);
    border-color: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.suggestion-pill:hover[b-oplw9zu4p8]::before {
    opacity: 1;
}

.suggestion-pill:active[b-oplw9zu4p8] {
    transform: translateY(-1px) scale(0.98);
}

.suggestion-pill svg[b-oplw9zu4p8] {
    width: 18px;
    height: 18px;
    opacity: 0.6;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
}

.suggestion-pill:hover svg[b-oplw9zu4p8] {
    opacity: 1;
    transform: scale(1.1);
}

.suggestion-pill span[b-oplw9zu4p8] {
    position: relative;
    z-index: 1;
}

/* Suggestion icon emoji */
.suggestion-icon[b-oplw9zu4p8] {
    font-size: 1.1rem;
    line-height: 1;
}

/* Highlighted suggestion (time-sensitive or important) */
.suggestion-pill.highlighted[b-oplw9zu4p8] {
    background: linear-gradient(135deg, rgba(var(--theme-accent-rgb), 0.15), rgba(219, 39, 119, 0.15));
    border-color: rgba(var(--theme-accent-rgb), 0.3);
    color: var(--theme-primary-ink, var(--theme-primary));
    animation: pulse-highlight-b-oplw9zu4p8 2s ease-in-out infinite;
}

.suggestion-pill.highlighted[b-oplw9zu4p8]::before {
    opacity: 1;
}

@keyframes pulse-highlight-b-oplw9zu4p8 {
    0%, 100% {
        box-shadow: 0 2px 12px rgba(var(--theme-accent-rgb), 0.15);
    }
    50% {
        box-shadow: 0 4px 20px rgba(var(--theme-accent-rgb), 0.3);
    }
}

/* ============================================
   DEPRECATED: Affirmation card removed from welcome state (dashboard declutter)
   Kept for potential re-introduction as companion greeting variant
   ============================================ */
.affirmation-card[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: rgba(var(--theme-accent-rgb), 0.1);
    border: 1px solid rgba(var(--theme-accent-rgb), 0.15);
    border-radius: 50px;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 24px;
    cursor: default;
    transition: all 0.25s ease;
    animation: fadeInUp-b-oplw9zu4p8 0.6s ease-out 0.4s both;
    max-width: 90%;
    text-align: center;
}

.affirmation-card:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.15);
    transform: translateY(-2px);
}

.affirmation-card svg[b-oplw9zu4p8] {
    flex-shrink: 0;
    opacity: 0.8;
}

/* Legacy styles for backwards compat */
.search-wrapper[b-oplw9zu4p8] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 24px;
}

.input-header[b-oplw9zu4p8] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.history-btn[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    color: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.history-btn:hover[b-oplw9zu4p8] {
    opacity: 1;
    background: rgba(255, 255, 255, 0.8);
}

.history-btn svg[b-oplw9zu4p8] {
    flex-shrink: 0;
}

/* Quick Stats Section */
.quick-stats-section[b-oplw9zu4p8] {
    width: 100%;
    max-width: 600px;
    margin-bottom: 24px;
}

.quick-stats-grid[b-oplw9zu4p8] {
    display: flex;
    justify-content: center;
    gap: 12px;
}


.quick-stat-card[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    backdrop-filter: blur(10px);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.quick-stat-card:hover[b-oplw9zu4p8] {
    transform: translateY(-2px);
}

.stat-icon[b-oplw9zu4p8] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon.tasks-icon[b-oplw9zu4p8] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.stat-icon.goals-icon[b-oplw9zu4p8] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.stat-icon.objectives-icon[b-oplw9zu4p8] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

/* SVG icons in stat cards */
.stat-svg[b-oplw9zu4p8] {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.stat-info[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.stat-value[b-oplw9zu4p8] {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-oplw9zu4p8] {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.7;
}

/* Tools Section */
.tools-section[b-oplw9zu4p8] {
    width: 100%;
    max-width: 600px;
    margin-bottom: 24px;
}

.section-title[b-oplw9zu4p8] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    margin-bottom: 10px;
    opacity: 0.6;
    transition: color 0.2s ease;
}

.tools-grid[b-oplw9zu4p8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.tool-card[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-align: left;
}

.tool-icon[b-oplw9zu4p8] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* SVG icons in tool cards */
.tool-icon-svg[b-oplw9zu4p8] {
    width: 14px;
    height: 14px;
    fill: white;
}

.tool-info[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tool-name[b-oplw9zu4p8] {
    font-size: 0.8rem;
    font-weight: 600;
    transition: color 0.2s ease;
    white-space: nowrap;
}


.tool-desc[b-oplw9zu4p8] {
    display: none;
}

.tool-arrow[b-oplw9zu4p8] {
    display: none;
}

/* Categories */
.categories-section[b-oplw9zu4p8] {
    width: 100%;
    max-width: 700px;
    margin-bottom: 20px;
}

.categories-grid[b-oplw9zu4p8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.category-chip[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    font-weight: 600;
}

/* SVG icons in category chips */
.category-svg[b-oplw9zu4p8] {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* SVG icon in dashboard link */
.dashboard-svg[b-oplw9zu4p8] {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Dashboard Link */
.home-footer-actions[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 16px;
}

.theme-toggle-wrapper[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
}

.dashboard-link-btn[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    color: white;
    text-shadow: 0 1px 3px transparent;
}

.dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

.dashboard-link-btn .arrow[b-oplw9zu4p8] {
    transition: transform 0.2s ease;
}

.dashboard-link-btn:hover .arrow[b-oplw9zu4p8] {
    transform: translateX(4px);
}

/* Theme effects container */
.theme-effects[b-oplw9zu4p8] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* ============================================
   ☁️ CLOUD THEME
   Note: Background gradients are in authenticated-home.css (global)
   ============================================ */
.theme-cloud .hero-title[b-oplw9zu4p8] { 
    color: #1e3a5f; 
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.5); 
}

.theme-cloud .hero-subtitle[b-oplw9zu4p8],
.theme-cloud .hero-eyebrow[b-oplw9zu4p8] { 
    color: #475569; 
    text-shadow: 0 1px 10px rgba(255, 255, 255, 0.8); 
}

.theme-cloud .section-title[b-oplw9zu4p8] { 
    color: white; 
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2); 
}

.theme-cloud .tool-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb), 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .tool-card:hover[b-oplw9zu4p8] {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 32px rgba(var(--theme-primary-rgb), 0.2);
}

.theme-cloud .tool-name[b-oplw9zu4p8] { color: #1e3a5f; }
.theme-cloud .tool-desc[b-oplw9zu4p8] { color: #64748b; }
.theme-cloud .tool-arrow[b-oplw9zu4p8] { color: var(--theme-accent); }

.theme-cloud .quick-stat-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(var(--theme-primary-rgb), 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .quick-stat-card:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(var(--theme-primary-rgb), 0.15);
}

.theme-cloud .stat-value[b-oplw9zu4p8] { color: #1e3a5f; }
.theme-cloud .stat-label[b-oplw9zu4p8] { color: #64748b; }

/* Cloud theme - Command Center */
.theme-cloud .command-input-wrapper[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.9);
}

.theme-cloud .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(var(--theme-primary-rgb), 0.1),
        0 0 0 1px rgba(var(--theme-primary-rgb), 0.08);
}

.theme-cloud .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(var(--theme-primary-rgb), 0.15),
        0 0 0 2px rgba(var(--theme-primary-rgb), 0.15);
}

.theme-cloud .command-action.history-action[b-oplw9zu4p8] {
    color: #94a3b8;
    border-right-color: rgba(148, 163, 184, 0.15);
}

.theme-cloud .command-action.history-action:hover[b-oplw9zu4p8] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.theme-cloud .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.theme-cloud .stat-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
}

.theme-cloud .stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(var(--theme-accent-rgb), 0.2);
}

.theme-cloud .stat-pill-label[b-oplw9zu4p8] { color: #64748b; }
.theme-cloud .stat-divider[b-oplw9zu4p8] { color: #e2e8f0; }

.theme-cloud .suggestion-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.8);
    color: #475569;
}

.theme-cloud .suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.95);
    color: var(--theme-primary-ink, var(--theme-primary));
    border-color: rgba(var(--theme-accent-rgb), 0.15);
}

.theme-cloud .affirmation-card[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.1);
    border-color: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.theme-cloud .category-chip[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.8);
    color: #5b21b6;
    box-shadow: 0 2px 12px rgba(var(--theme-primary-rgb), 0.1);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .category-chip:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.15);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb), 0.2);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.theme-cloud .dashboard-link-btn[b-oplw9zu4p8] { 
    color: white;
    text-shadow: 0 1px 3px transparent;
}

.theme-cloud .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.2);
}

/* Floating cloud elements */
.floating-cloud[b-oplw9zu4p8] {
    position: absolute;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(8px);
    pointer-events: none;
    z-index: 1;
}

.cloud-1[b-oplw9zu4p8] {
    width: 180px;
    height: 70px;
    top: 2%;
    left: 0;
    animation: floatCloud1-b-oplw9zu4p8 25s ease-in-out infinite;
}

.cloud-2[b-oplw9zu4p8] {
    width: 140px;
    height: 55px;
    top: 6%;
    right: 0;
    animation: floatCloud2-b-oplw9zu4p8 30s ease-in-out infinite;
}

.cloud-3[b-oplw9zu4p8] {
    width: 100px;
    height: 40px;
    top: 60%;
    left: 0;
    opacity: 0.7;
    animation: floatCloud3-b-oplw9zu4p8 22s ease-in-out infinite;
}

.cloud-4[b-oplw9zu4p8] {
    width: 150px;
    height: 60px;
    bottom: 15%;
    right: 0;
    opacity: 0.6;
    animation: floatCloud4-b-oplw9zu4p8 28s ease-in-out infinite;
}


@keyframes floatCloud1-b-oplw9zu4p8 {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(40px) translateY(15px); }
}

@keyframes floatCloud2-b-oplw9zu4p8 {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-40px) translateY(20px); }
}

@keyframes floatCloud3-b-oplw9zu4p8 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.7; }
    50% { transform: translateX(30px) translateY(-10px); opacity: 0.9; }
}

@keyframes floatCloud4-b-oplw9zu4p8 {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-30px) translateY(-15px); }
}

@keyframes cloudDrift-b-oplw9zu4p8 {
    0% { transform: translateX(0) translateY(0) scale(1); }
    25% { transform: translateX(30px) translateY(-8px) scale(1.02); }
    50% { transform: translateX(50px) translateY(0) scale(1); }
    75% { transform: translateX(25px) translateY(8px) scale(0.98); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

/* ============================================
   💼 EXECUTIVE THEME
   Clean, corporate, distraction-free
   ============================================ */
.theme-executive .hero-title[b-oplw9zu4p8] {
    color: #0f172a;
    text-shadow: none;
}

.theme-executive .hero-subtitle[b-oplw9zu4p8],
.theme-executive .hero-eyebrow[b-oplw9zu4p8] {
    color: #475569;
    text-shadow: none;
}

.theme-executive .gradient-text[b-oplw9zu4p8] {
    background: linear-gradient(135deg, #334155 0%, #475569 50%, #1e293b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.theme-executive .section-title[b-oplw9zu4p8] {
    color: #0f172a;
    text-shadow: none;
}

.theme-executive .tool-card[b-oplw9zu4p8] {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(203, 213, 225, 0.6);
}

.theme-executive .tool-card:hover[b-oplw9zu4p8] {
    transform: translateY(-2px);
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
    border-color: rgba(148, 163, 184, 0.5);
}

.theme-executive .tool-name[b-oplw9zu4p8] { color: #0f172a; }
.theme-executive .tool-desc[b-oplw9zu4p8] { color: #64748b; }
.theme-executive .tool-arrow[b-oplw9zu4p8] { color: #475569; }

.theme-executive .quick-stat-card[b-oplw9zu4p8] {
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(203, 213, 225, 0.6);
}

.theme-executive .quick-stat-card:hover[b-oplw9zu4p8] {
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.theme-executive .stat-value[b-oplw9zu4p8] { color: #0f172a; }
.theme-executive .stat-label[b-oplw9zu4p8] { color: #64748b; }

/* Executive theme - Command Center */
.theme-executive .command-input-wrapper[b-oplw9zu4p8] {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(203, 213, 225, 0.6);
}

.theme-executive .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(148, 163, 184, 0.5);
}

.theme-executive .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1), 0 0 0 2px rgba(71, 85, 105, 0.25);
}

.theme-executive .command-action.history-action[b-oplw9zu4p8] {
    color: #94a3b8;
    border-right-color: rgba(148, 163, 184, 0.15);
}

.theme-executive .command-action.history-action:hover[b-oplw9zu4p8] {
    color: #334155;
}

.theme-executive .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(51, 65, 85, 0.06);
}

.theme-executive .stat-pill[b-oplw9zu4p8] {
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.6);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.theme-executive .stat-pill:hover[b-oplw9zu4p8] {
    background: #ffffff;
    border-color: #94a3b8;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.theme-executive .stat-pill-label[b-oplw9zu4p8] { color: #64748b; }
.theme-executive .stat-divider[b-oplw9zu4p8] { color: #cbd5e1; }

.theme-executive .suggestion-pill[b-oplw9zu4p8] {
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.6);
    color: #475569;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.theme-executive .suggestion-pill:hover[b-oplw9zu4p8] {
    background: #ffffff;
    color: #1e293b;
    border-color: #94a3b8;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

.theme-executive .affirmation-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(203, 213, 225, 0.5);
    color: #475569;
}

.theme-executive .category-chip[b-oplw9zu4p8] {
    background: #ffffff;
    color: #334155;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(203, 213, 225, 0.6);
}

.theme-executive .category-chip:hover[b-oplw9zu4p8] {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
    color: #1e293b;
    border-color: #94a3b8;
}

.theme-executive .dashboard-link-btn[b-oplw9zu4p8] {
    color: #334155;
    text-shadow: none;
}

.theme-executive .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(51, 65, 85, 0.08);
}

/* Executive theme - Model selector */
.theme-executive .model-select-btn[b-oplw9zu4p8] {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.12);
    color: #334155;
}

.theme-executive .model-select-btn:hover[b-oplw9zu4p8] {
    background: rgba(15, 23, 42, 0.1);
    border-color: rgba(15, 23, 42, 0.2);
}

.theme-executive .model-menu[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.98);
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
}

.theme-executive .model-menu-header[b-oplw9zu4p8] {
    color: #64748b;
    border-bottom-color: #e2e8f0;
}

.theme-executive .model-menu-item[b-oplw9zu4p8] {
    color: #1e293b;
}

.theme-executive .model-menu-item:hover[b-oplw9zu4p8] {
    background: rgba(15, 23, 42, 0.04);
}

.theme-executive .model-menu-item.selected[b-oplw9zu4p8] {
    background: rgba(51, 65, 85, 0.08);
}

.theme-executive .model-item-desc[b-oplw9zu4p8] {
    color: #64748b;
}

/* Executive theme - Chat */
.theme-executive .history-btn[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.8);
    color: #334155;
}

.theme-executive .history-btn:hover[b-oplw9zu4p8] {
    background: #ffffff;
}

.theme-executive .chat-container[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.theme-executive .chat-header[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.6);
    border-bottom-color: #e2e8f0;
}

.theme-executive .icon-btn[b-oplw9zu4p8] {
    background: rgba(51, 65, 85, 0.08);
    color: #475569;
}

.theme-executive .icon-btn:hover[b-oplw9zu4p8] {
    background: rgba(51, 65, 85, 0.15);
    color: #1e293b;
}

/* Executive theme - Tour prompt */
.theme-executive .tour-prompt-btn[b-oplw9zu4p8] {
    background: #ffffff;
    border-color: rgba(203, 213, 225, 0.6);
    color: #334155;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.theme-executive .tour-prompt-btn:hover[b-oplw9zu4p8] {
    background: #ffffff;
    border-color: #94a3b8;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08);
}

/* ============================================
   🚀 SPACE THEME
   Note: Background gradients are in authenticated-home.css (global)
   ============================================ */
.theme-space .hero-title[b-oplw9zu4p8] { 
    color: #f1f5f9; 
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.5); 
}

.theme-space .gradient-text[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #a855f7 0%, #06b6d4 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-space .hero-subtitle[b-oplw9zu4p8],
.theme-space .hero-eyebrow[b-oplw9zu4p8] { 
    color: #94a3b8; 
    text-shadow: 0 0 20px rgba(148, 163, 184, 0.3); 
}

.theme-space .section-title[b-oplw9zu4p8] { 
    color: white; 
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.4); 
}

.theme-space .tool-card[b-oplw9zu4p8] {
    background: rgba(30, 27, 75, 0.7);
    box-shadow: 0 4px 24px transparent, 0 0 0 1px rgba(168, 85, 247, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .tool-card:hover[b-oplw9zu4p8] {
    transform: translateY(-4px);
    background: rgba(50, 45, 100, 0.8);
    box-shadow: 0 12px 40px rgba(168, 85, 247, 0.3), 0 0 0 1px rgba(168, 85, 247, 0.4);
}

.theme-space .tool-name[b-oplw9zu4p8] { color: #f1f5f9; }
.theme-space .tool-desc[b-oplw9zu4p8] { color: #94a3b8; }
.theme-space .tool-arrow[b-oplw9zu4p8] { color: #06b6d4; }

.theme-space .quick-stat-card[b-oplw9zu4p8] {
    background: rgba(30, 27, 75, 0.7);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .quick-stat-card:hover[b-oplw9zu4p8] {
    background: rgba(50, 45, 100, 0.8);
    box-shadow: 0 8px 32px rgba(168, 85, 247, 0.25);
}

.theme-space .stat-value[b-oplw9zu4p8] { color: #f1f5f9; }
.theme-space .stat-label[b-oplw9zu4p8] { color: #94a3b8; }

/* Space theme - Command Center */
.theme-space .command-input-wrapper[b-oplw9zu4p8] {
    background: rgba(30, 27, 75, 0.85);
    box-shadow: 
        0 4px 24px transparent,
        0 0 0 1px rgba(168, 85, 247, 0.15),
        inset 0 1px 0 rgba(168, 85, 247, 0.1);
}

.theme-space .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(168, 85, 247, 0.2),
        0 0 0 1px rgba(168, 85, 247, 0.25),
        inset 0 1px 0 rgba(168, 85, 247, 0.1);
}

.theme-space .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(168, 85, 247, 0.25),
        0 0 0 2px rgba(168, 85, 247, 0.3),
        inset 0 1px 0 rgba(168, 85, 247, 0.1);
}

.theme-space .command-action.history-action[b-oplw9zu4p8] {
    color: #94a3b8;
    border-right-color: rgba(168, 85, 247, 0.15);
}

.theme-space .command-action.history-action:hover[b-oplw9zu4p8] {
    color: #c4b5fd;
}

.theme-space .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(168, 85, 247, 0.12);
}

.theme-space .stat-pill[b-oplw9zu4p8] {
    background: rgba(30, 27, 75, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.theme-space .stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.4);
}

.theme-space .stat-pill-value[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #a855f7 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-space .stat-pill-label[b-oplw9zu4p8] { color: #94a3b8; }
.theme-space .stat-divider[b-oplw9zu4p8] { color: #4c1d95; }

.theme-space .suggestion-pill[b-oplw9zu4p8] {
    background: rgba(30, 27, 75, 0.7);
    border-color: rgba(168, 85, 247, 0.2);
    color: #c4b5fd;
}

.theme-space .suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(168, 85, 247, 0.25);
    color: #e9d5ff;
    border-color: rgba(168, 85, 247, 0.4);
}

.theme-space .suggestion-pill[b-oplw9zu4p8]::before {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15));
}

.theme-space .affirmation-card[b-oplw9zu4p8] {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.25);
    color: #c4b5fd;
}

.theme-space .category-chip[b-oplw9zu4p8] {
    background: rgba(30, 27, 75, 0.6);
    color: #c4b5fd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.theme-space .category-chip:hover[b-oplw9zu4p8] {
    background: rgba(168, 85, 247, 0.2);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 24px rgba(168, 85, 247, 0.3);
    color: #e9d5ff;
}

.theme-space .dashboard-link-btn[b-oplw9zu4p8] { 
    color: white;
    text-shadow: 0 1px 3px transparent;
}

.theme-space .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
}

@keyframes starTwinkle-b-oplw9zu4p8 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Twinkling Stars for Space Theme */
.theme-space .star[b-oplw9zu4p8] {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle-b-oplw9zu4p8 ease-in-out infinite;
    box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.3);
}

/* Star positions - spread across the screen */
.theme-space .star:nth-child(1)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 5%; top: 8%; animation-duration: 4s; animation-delay: 0s; }
.theme-space .star:nth-child(2)[b-oplw9zu4p8] { width: 3px; height: 3px; left: 15%; top: 15%; animation-duration: 5s; animation-delay: 0.5s; }
.theme-space .star:nth-child(3)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 25%; top: 5%; animation-duration: 3.5s; animation-delay: 1.5s; }
.theme-space .star:nth-child(4)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 35%; top: 25%; animation-duration: 4.5s; animation-delay: 2s; }
.theme-space .star:nth-child(5)[b-oplw9zu4p8] { width: 3px; height: 3px; left: 50%; top: 10%; animation-duration: 6s; animation-delay: 1s; }
.theme-space .star:nth-child(6)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 65%; top: 20%; animation-duration: 4.5s; animation-delay: 3s; }
.theme-space .star:nth-child(7)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 75%; top: 8%; animation-duration: 4s; animation-delay: 0.5s; }
.theme-space .star:nth-child(8)[b-oplw9zu4p8] { width: 3px; height: 3px; left: 88%; top: 18%; animation-duration: 5.5s; animation-delay: 1.8s; }
.theme-space .star:nth-child(9)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 92%; top: 35%; animation-duration: 4s; animation-delay: 3.5s; }
.theme-space .star:nth-child(10)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 8%; top: 40%; animation-duration: 5s; animation-delay: 1.2s; }
.theme-space .star:nth-child(11)[b-oplw9zu4p8] { width: 3px; height: 3px; left: 20%; top: 55%; animation-duration: 5.5s; animation-delay: 2.2s; }
.theme-space .star:nth-child(12)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 40%; top: 45%; animation-duration: 4.2s; animation-delay: 0.8s; }
.theme-space .star:nth-child(13)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 55%; top: 60%; animation-duration: 5.2s; animation-delay: 2.8s; }
.theme-space .star:nth-child(14)[b-oplw9zu4p8] { width: 3px; height: 3px; left: 70%; top: 50%; animation-duration: 4s; animation-delay: 1.4s; }
.theme-space .star:nth-child(15)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 82%; top: 65%; animation-duration: 5s; animation-delay: 3.4s; }
.theme-space .star:nth-child(16)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 95%; top: 55%; animation-duration: 4.5s; animation-delay: 0.2s; }
.theme-space .star:nth-child(17)[b-oplw9zu4p8] { width: 3px; height: 3px; left: 12%; top: 75%; animation-duration: 6s; animation-delay: 2s; }
.theme-space .star:nth-child(18)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 30%; top: 70%; animation-duration: 4s; animation-delay: 3.2s; }
.theme-space .star:nth-child(19)[b-oplw9zu4p8] { width: 2px; height: 2px; left: 60%; top: 80%; animation-duration: 5s; animation-delay: 0.6s; }
.theme-space .star:nth-child(20)[b-oplw9zu4p8] { width: 3px; height: 3px; left: 85%; top: 85%; animation-duration: 4.5s; animation-delay: 2.6s; }

@keyframes twinkle-b-oplw9zu4p8 {
    0%, 100% { 
        opacity: 0.3; 
        transform: scale(1);
        box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.2);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.4);
        box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.6);
    }
}

/* ============================================
   ❄️ WINTER THEME
   Note: Background gradients are in authenticated-home.css (global)
   ============================================ */

/* WI-V-1 (2026-05-10, SECOND ROOT-CAUSE FIX): Third duplicate `.snowflake`
   block + `@keyframes snowflake-fall` removed. Home.razor doesn't render
   `<div class="snowflake">` at all (verified by grep), so the scoped
   `.snowflake[b-xxx]:nth-child(N)` rules here were dead code. BUT the
   `@keyframes snowflake-fall` was global (CSS keyframes ignore Blazor
   scoping) and competed with themes.css's keyframe in the cascade —
   load order determined which one won. That cross-cascade collision is
   what produced the "some flakes slow, others rapid" mixed effect even
   after the public-pages.css duplicate was removed. The canonical
   snowflake CSS lives ONLY in `wwwroot/css/themes.css`. */

.theme-winter .hero-title[b-oplw9zu4p8] {
    color: #f0f9ff;
    text-shadow: 0 2px 20px rgba(186, 230, 253, 0.4);
}

.theme-winter .gradient-text[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 50%, #67e8f9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-winter .hero-subtitle[b-oplw9zu4p8],
.theme-winter .hero-eyebrow[b-oplw9zu4p8] { 
    color: #bae6fd; 
    text-shadow: 0 1px 10px rgba(186, 230, 253, 0.3); 
}

.theme-winter .section-title[b-oplw9zu4p8] { 
    color: white; 
    text-shadow: 0 1px 10px rgba(34, 211, 238, 0.3); 
}

.theme-winter .tool-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(186, 230, 253, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.2);
}

.theme-winter .tool-card:hover[b-oplw9zu4p8] {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 40px rgba(8, 145, 178, 0.25), 0 0 0 1px rgba(186, 230, 253, 0.3);
}

.theme-winter .tool-name[b-oplw9zu4p8] { color: #f0f9ff; }
.theme-winter .tool-desc[b-oplw9zu4p8] { color: #bae6fd; }
.theme-winter .tool-arrow[b-oplw9zu4p8] { color: #22d3ee; }

.theme-winter .quick-stat-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.2);
}

.theme-winter .quick-stat-card:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(8, 145, 178, 0.2);
}

.theme-winter .stat-value[b-oplw9zu4p8] { color: #f0f9ff; }
.theme-winter .stat-label[b-oplw9zu4p8] { color: #bae6fd; }

/* Winter theme - Command Center */
.theme-winter .command-input-wrapper[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(186, 230, 253, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-winter .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(8, 145, 178, 0.15),
        0 0 0 1px rgba(186, 230, 253, 0.25);
}

.theme-winter .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(8, 145, 178, 0.2),
        0 0 0 2px rgba(34, 211, 238, 0.3);
}

.theme-winter .command-action.history-action[b-oplw9zu4p8] {
    color: #bae6fd;
    border-right-color: rgba(186, 230, 253, 0.15);
}

.theme-winter .command-action.history-action:hover[b-oplw9zu4p8] {
    color: #f0f9ff;
}

.theme-winter .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(255, 255, 255, 0.08);
}

.theme-winter .stat-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(186, 230, 253, 0.2);
}

.theme-winter .stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(34, 211, 238, 0.4);
}

.theme-winter .stat-pill-value[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-winter .stat-pill-label[b-oplw9zu4p8] { color: #bae6fd; }
.theme-winter .stat-divider[b-oplw9zu4p8] { color: #155e75; }

.theme-winter .suggestion-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(186, 230, 253, 0.2);
    color: #bae6fd;
}

.theme-winter .suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.2);
    color: #f0f9ff;
    border-color: rgba(186, 230, 253, 0.4);
}

.theme-winter .suggestion-pill[b-oplw9zu4p8]::before {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(6, 182, 212, 0.15));
}

.theme-winter .affirmation-card[b-oplw9zu4p8] {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.25);
    color: #67e8f9;
}

.theme-winter .category-chip[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
    color: #bae6fd;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.2);
}

.theme-winter .category-chip:hover[b-oplw9zu4p8] {
    background: rgba(8, 145, 178, 0.2);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 24px rgba(8, 145, 178, 0.3);
    color: #e0f2fe;
}

.theme-winter .dashboard-link-btn[b-oplw9zu4p8] { 
    color: white;
    text-shadow: 0 1px 3px transparent;
}

.theme-winter .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   🌿 NATURE THEME
   Note: Background gradients are in authenticated-home.css (global)
   ============================================ */
@keyframes lightSway-b-oplw9zu4p8 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

.theme-nature .hero-title[b-oplw9zu4p8] { 
    color: #f0fdf4; 
    text-shadow: 0 2px 20px rgba(5, 46, 22, 0.4); 
}

.theme-nature .gradient-text[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #fde047 0%, #a3e635 50%, #4ade80 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-nature .hero-subtitle[b-oplw9zu4p8],
.theme-nature .hero-eyebrow[b-oplw9zu4p8] { 
    color: #bbf7d0; 
    text-shadow: 0 1px 10px rgba(5, 46, 22, 0.3); 
}

.theme-nature .section-title[b-oplw9zu4p8] { 
    color: white; 
    text-shadow: 0 1px 10px rgba(5, 46, 22, 0.3); 
}

.theme-nature .tool-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 24px rgba(5, 46, 22, 0.2), 0 0 0 1px rgba(134, 239, 172, 0.15);
    border: 1px solid rgba(134, 239, 172, 0.2);
}

.theme-nature .tool-card:hover[b-oplw9zu4p8] {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 40px rgba(34, 197, 94, 0.25), 0 0 0 1px rgba(134, 239, 172, 0.3);
}

.theme-nature .tool-name[b-oplw9zu4p8] { color: #f0fdf4; }
.theme-nature .tool-desc[b-oplw9zu4p8] { color: #bbf7d0; }
.theme-nature .tool-arrow[b-oplw9zu4p8] { color: #a3e635; }

.theme-nature .quick-stat-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 24px rgba(5, 46, 22, 0.2);
    border: 1px solid rgba(134, 239, 172, 0.2);
}

.theme-nature .quick-stat-card:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2);
}

.theme-nature .stat-value[b-oplw9zu4p8] { color: #f0fdf4; }
.theme-nature .stat-label[b-oplw9zu4p8] { color: #bbf7d0; }

/* Nature theme - Command Center */
.theme-nature .command-input-wrapper[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 24px rgba(5, 46, 22, 0.2),
        0 0 0 1px rgba(134, 239, 172, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-nature .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(34, 197, 94, 0.15),
        0 0 0 1px rgba(134, 239, 172, 0.25);
}

.theme-nature .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(34, 197, 94, 0.2),
        0 0 0 2px rgba(163, 230, 53, 0.3);
}

.theme-nature .command-action.history-action[b-oplw9zu4p8] {
    color: #bbf7d0;
    border-right-color: rgba(134, 239, 172, 0.15);
}

.theme-nature .command-action.history-action:hover[b-oplw9zu4p8] {
    color: #f0fdf4;
}

.theme-nature .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(255, 255, 255, 0.08);
}

.theme-nature .stat-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(134, 239, 172, 0.2);
}

.theme-nature .stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(163, 230, 53, 0.4);
}

.theme-nature .stat-pill-value[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #fde047 0%, #a3e635 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-nature .stat-pill-label[b-oplw9zu4p8] { color: #bbf7d0; }
.theme-nature .stat-divider[b-oplw9zu4p8] { color: #166534; }

.theme-nature .suggestion-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(134, 239, 172, 0.2);
    color: #bbf7d0;
}

.theme-nature .suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.25);
    color: #f0fdf4;
    border-color: rgba(134, 239, 172, 0.4);
}

.theme-nature .suggestion-pill[b-oplw9zu4p8]::before {
    background: linear-gradient(135deg, rgba(163, 230, 53, 0.15), rgba(74, 222, 128, 0.15));
}

.theme-nature .affirmation-card[b-oplw9zu4p8] {
    background: rgba(163, 230, 53, 0.15);
    border-color: rgba(163, 230, 53, 0.25);
    color: #a3e635;
}

.theme-nature .category-chip[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
    color: #bbf7d0;
    box-shadow: 0 2px 12px rgba(5, 46, 22, 0.15);
    border: 1px solid rgba(134, 239, 172, 0.2);
}

.theme-nature .category-chip:hover[b-oplw9zu4p8] {
    background: rgba(34, 197, 94, 0.2);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 24px rgba(34, 197, 94, 0.3);
    color: #dcfce7;
}

.theme-nature .dashboard-link-btn[b-oplw9zu4p8] { 
    color: white;
    text-shadow: 0 1px 3px transparent;
}

.theme-nature .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   🌊 OCEAN THEME
   Note: Background gradients are in authenticated-home.css (global)
   ============================================ */
@keyframes waveMotion-b-oplw9zu4p8 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.theme-ocean .hero-title[b-oplw9zu4p8] { 
    color: #f0f9ff; 
    text-shadow: 0 2px 20px rgba(12, 74, 110, 0.4); 
}

.theme-ocean .gradient-text[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 50%, #2dd4bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-ocean .hero-subtitle[b-oplw9zu4p8],
.theme-ocean .hero-eyebrow[b-oplw9zu4p8] { 
    color: #bae6fd; 
    text-shadow: 0 1px 10px rgba(12, 74, 110, 0.3); 
}

.theme-ocean .section-title[b-oplw9zu4p8] { 
    color: white; 
    text-shadow: 0 1px 10px rgba(12, 74, 110, 0.3); 
}

.theme-ocean .tool-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 24px rgba(12, 74, 110, 0.2), 0 0 0 1px rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.theme-ocean .tool-card:hover[b-oplw9zu4p8] {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 12px 40px rgba(14, 165, 233, 0.25), 0 0 0 1px rgba(56, 189, 248, 0.3);
}

.theme-ocean .tool-name[b-oplw9zu4p8] { color: #f0f9ff; }
.theme-ocean .tool-desc[b-oplw9zu4p8] { color: #bae6fd; }
.theme-ocean .tool-arrow[b-oplw9zu4p8] { color: #22d3ee; }

.theme-ocean .quick-stat-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 24px rgba(12, 74, 110, 0.2);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.theme-ocean .quick-stat-card:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 32px rgba(14, 165, 233, 0.2);
}

.theme-ocean .stat-value[b-oplw9zu4p8] { color: #f0f9ff; }
.theme-ocean .stat-label[b-oplw9zu4p8] { color: #bae6fd; }

/* Ocean theme - Command Center */
.theme-ocean .command-input-wrapper[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 4px 24px rgba(12, 74, 110, 0.2),
        0 0 0 1px rgba(56, 189, 248, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.theme-ocean .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(14, 165, 233, 0.15),
        0 0 0 1px rgba(56, 189, 248, 0.25);
}

.theme-ocean .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(14, 165, 233, 0.2),
        0 0 0 2px rgba(34, 211, 238, 0.3);
}

.theme-ocean .command-action.history-action[b-oplw9zu4p8] {
    color: #bae6fd;
    border-right-color: rgba(56, 189, 248, 0.15);
}

.theme-ocean .command-action.history-action:hover[b-oplw9zu4p8] {
    color: #f0f9ff;
}

.theme-ocean .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(255, 255, 255, 0.08);
}

.theme-ocean .stat-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.theme-ocean .stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(34, 211, 238, 0.4);
}

.theme-ocean .stat-pill-value[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #38bdf8 0%, #22d3ee 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-ocean .stat-pill-label[b-oplw9zu4p8] { color: #bae6fd; }
.theme-ocean .stat-divider[b-oplw9zu4p8] { color: #0369a1; }

.theme-ocean .suggestion-pill[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(56, 189, 248, 0.2);
    color: #bae6fd;
}

.theme-ocean .suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.25);
    color: #f0f9ff;
    border-color: rgba(56, 189, 248, 0.4);
}

.theme-ocean .suggestion-pill[b-oplw9zu4p8]::before {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(45, 212, 191, 0.15));
}

.theme-ocean .affirmation-card[b-oplw9zu4p8] {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.25);
    color: #22d3ee;
}

.theme-ocean .category-chip[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.12);
    color: #bae6fd;
    box-shadow: 0 2px 12px rgba(12, 74, 110, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.theme-ocean .category-chip:hover[b-oplw9zu4p8] {
    background: rgba(14, 165, 233, 0.2);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 24px rgba(14, 165, 233, 0.3);
    color: #e0f2fe;
}

.theme-ocean .dashboard-link-btn[b-oplw9zu4p8] { 
    color: white;
    text-shadow: 0 1px 3px transparent;
}

.theme-ocean .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   🔮 MYSTIC THEME
   ============================================ */
.theme-mystic .hero-title[b-oplw9zu4p8] { 
    color: #faf5ff; 
    text-shadow: 0 0 40px rgba(249, 115, 22, 0.4); 
}

.theme-mystic .gradient-text[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #f97316 0%, #fbbf24 50%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-mystic .hero-subtitle[b-oplw9zu4p8],
.theme-mystic .hero-eyebrow[b-oplw9zu4p8] { 
    color: #c4b5fd; 
    text-shadow: 0 0 20px rgba(196, 181, 253, 0.3); 
}

.theme-mystic .section-title[b-oplw9zu4p8] { 
    color: white; 
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.3); 
}

.theme-mystic .command-input-wrapper[b-oplw9zu4p8] {
    background: rgba(45, 24, 84, 0.85);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(249, 115, 22, 0.15),
        inset 0 1px 0 rgba(249, 115, 22, 0.1);
}

.theme-mystic .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(249, 115, 22, 0.15),
        0 0 0 1px rgba(249, 115, 22, 0.25),
        inset 0 1px 0 rgba(249, 115, 22, 0.1);
}

.theme-mystic .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 8px 40px rgba(249, 115, 22, 0.2),
        0 0 0 2px rgba(249, 115, 22, 0.3),
        inset 0 1px 0 rgba(249, 115, 22, 0.1);
}

.theme-mystic .command-action.history-action[b-oplw9zu4p8] {
    color: #c4b5fd;
    border-right-color: rgba(249, 115, 22, 0.15);
}

.theme-mystic .command-action.history-action:hover[b-oplw9zu4p8] {
    color: #fbbf24;
}

.theme-mystic .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(249, 115, 22, 0.12);
}

.theme-mystic .stat-pill[b-oplw9zu4p8] {
    background: rgba(45, 24, 84, 0.7);
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.theme-mystic .stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.4);
}

.theme-mystic .stat-pill-value[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-mystic .stat-pill-label[b-oplw9zu4p8] { color: #c4b5fd; }
.theme-mystic .stat-divider[b-oplw9zu4p8] { color: #581c87; }

.theme-mystic .suggestion-pill[b-oplw9zu4p8] {
    background: rgba(45, 24, 84, 0.7);
    border-color: rgba(249, 115, 22, 0.2);
    color: #c4b5fd;
}

.theme-mystic .suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(249, 115, 22, 0.25);
    color: #faf5ff;
    border-color: rgba(249, 115, 22, 0.4);
}

.theme-mystic .suggestion-pill[b-oplw9zu4p8]::before {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(124, 58, 237, 0.15));
}

.theme-mystic .affirmation-card[b-oplw9zu4p8] {
    background: rgba(249, 115, 22, 0.15);
    border-color: rgba(249, 115, 22, 0.25);
    color: #fbbf24;
}

.theme-mystic .dashboard-link-btn[b-oplw9zu4p8] { 
    color: white;
    text-shadow: 0 1px 3px transparent;
}

.theme-mystic .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   💠 TRON THEME
   Futuristic, neon cyan, digital grid
   ============================================ */
.theme-tron .hero-title[b-oplw9zu4p8] { 
    color: #e0f7ff; 
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.6), 0 0 60px rgba(0, 212, 255, 0.3); 
}

.theme-tron .gradient-text[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 50%, #00d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-tron .hero-subtitle[b-oplw9zu4p8],
.theme-tron .hero-eyebrow[b-oplw9zu4p8] { 
    color: #7dd3fc; 
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.4); 
}

.theme-tron .section-title[b-oplw9zu4p8] { 
    color: #e0f7ff; 
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.3); 
}

.theme-tron .tool-card[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.theme-tron .tool-card:hover[b-oplw9zu4p8] {
    transform: translateY(-4px);
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 0 1px rgba(0, 212, 255, 0.4);
}

.theme-tron .tool-name[b-oplw9zu4p8] { color: #e0f7ff; }
.theme-tron .tool-desc[b-oplw9zu4p8] { color: #7dd3fc; }
.theme-tron .tool-arrow[b-oplw9zu4p8] { color: #00ffff; }

.theme-tron .quick-stat-card[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.theme-tron .quick-stat-card:hover[b-oplw9zu4p8] {
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.25);
}

.theme-tron .stat-value[b-oplw9zu4p8] { color: #e0f7ff; }
.theme-tron .stat-label[b-oplw9zu4p8] { color: #7dd3fc; }

/* Tron theme - Command Center */
.theme-tron .command-input-wrapper[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.85);
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.1),
        0 0 0 1px rgba(0, 212, 255, 0.4),
        inset 0 1px 0 rgba(0, 212, 255, 0.15);
}

.theme-tron .command-input-wrapper:hover[b-oplw9zu4p8] {
    box-shadow: 
        0 0 30px rgba(0, 212, 255, 0.15),
        0 0 0 1px rgba(0, 212, 255, 0.5),
        inset 0 1px 0 rgba(0, 212, 255, 0.1);
}

.theme-tron .command-input-wrapper:focus-within[b-oplw9zu4p8] {
    box-shadow: 
        0 0 40px rgba(0, 212, 255, 0.2),
        0 0 0 2px rgba(0, 255, 255, 0.4),
        inset 0 1px 0 rgba(0, 212, 255, 0.1);
}

.theme-tron .command-action.history-action[b-oplw9zu4p8] {
    color: #38bdf8;
    border-right-color: rgba(0, 212, 255, 0.2);
}

.theme-tron .command-action.history-action:hover[b-oplw9zu4p8] {
    color: #00ffff;
}

.theme-tron .command-action.history-action:hover[b-oplw9zu4p8]::before {
    background: rgba(0, 212, 255, 0.12);
}

/* Tron theme - Tour Prompt */
.theme-tron .tour-prompt-btn[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1);
}

.theme-tron .tour-prompt-btn:hover[b-oplw9zu4p8] {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.25);
}

.theme-tron .stat-pill[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.08);
}

.theme-tron .stat-pill:hover[b-oplw9zu4p8] {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.25);
}

.theme-tron .stat-pill-value[b-oplw9zu4p8] { 
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.theme-tron .stat-pill-label[b-oplw9zu4p8] { color: #7dd3fc; }
.theme-tron .stat-divider[b-oplw9zu4p8] { color: rgba(0, 212, 255, 0.3); }

.theme-tron .suggestion-pill[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: #7dd3fc;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.08);
}

.theme-tron .suggestion-pill:hover[b-oplw9zu4p8] {
    background: rgba(0, 212, 255, 0.12);
    color: #e0f7ff;
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.25);
}

.theme-tron .suggestion-pill[b-oplw9zu4p8]::before {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 255, 255, 0.1));
}

.theme-tron .affirmation-card[b-oplw9zu4p8] {
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.25);
    color: #00d4ff;
}

.theme-tron .category-chip[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.6);
    color: #7dd3fc;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.theme-tron .category-chip:hover[b-oplw9zu4p8] {
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.25);
    color: #e0f7ff;
}

.theme-tron .dashboard-link-btn[b-oplw9zu4p8] { 
    color: #e0f7ff;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.theme-tron .dashboard-link-btn:hover[b-oplw9zu4p8] {
    background: rgba(0, 212, 255, 0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .home-main[b-oplw9zu4p8] {
        padding: 0;
    }

    /* On mobile the floating chat is full-screen, so no need to shift content */
    /* SNOOZE-Z-1: property switched with the desktop rule (transform → left) */
    .home-main.chat-open[b-oplw9zu4p8] {
        left: 0;
    }

    /* Remove vertical centering spacers on mobile — let content
       flow from top so the input area anchors to the bottom. */
    .welcome-state[b-oplw9zu4p8]::before,
    .welcome-state[b-oplw9zu4p8]::after {
        display: none;
    }

    .welcome-state[b-oplw9zu4p8] {
        /* Shrink to content on mobile instead of flex:1-ing to fill the
           whole home-main column, which used to push .home-quick-actions
           past home-main's `overflow: hidden` edge and hide the chips. */
        flex: 0 1 auto;
        justify-content: flex-start;
        padding: 16px 16px 0 16px;
        gap: 12px;
    }

    /* Let the chips anchor to the bottom of remaining space with breathing
       room above them — `margin-top: auto` inside the home-main flex column
       consumes whatever vertical room is left after welcome-state's content,
       so the subtitle gets some air beneath it instead of clumping up top. */
    .home-quick-actions[b-oplw9zu4p8] {
        margin-top: auto;
    }

    .welcome-avatar-section[b-oplw9zu4p8] {
        margin-bottom: 8px;
    }

    /* Intentionally NO override of .welcome-avatar-section.avatar-hidden
       on mobile. We initially kept the centered welcome avatar on screen
       during chat-open (scaled + translated up) so the home view didn't
       feel empty behind the full-screen chat, but that put TWO companions
       on screen at once — the welcome avatar here AND the peek avatar
       that sits on top-left of the floating chat dialog (see
       Assistant.razor.css .companion-peek-avatar). The peek avatar now
       handles "keep the companion on screen" duty on mobile, so we let
       the desktop behavior (opacity:0, scale:0.8, pointer-events:none
       from the base rule ~line 194) apply here too. Single-Avatar Rule
       from AI_COMPANION.md is preserved. */

    .hero-section[b-oplw9zu4p8] {
        margin-bottom: 12px;
    }

    .hero-title[b-oplw9zu4p8] {
        font-size: 1.75rem;
    }

    /* Account for iPhone home indicator bar */
    .input-area[b-oplw9zu4p8] {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .tools-grid[b-oplw9zu4p8] {
        grid-template-columns: 1fr;
    }
    
    .quick-stats-grid[b-oplw9zu4p8] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .quick-stat-card[b-oplw9zu4p8] {
        justify-content: center;
    }
    
    .command-center[b-oplw9zu4p8] {
        padding: 0 12px;
        gap: 24px;
    }
    
    .command-input-wrapper[b-oplw9zu4p8] {
        border-radius: 16px;
    }
    
    .command-action[b-oplw9zu4p8] {
        width: 48px;
        min-height: 52px;
    }
    
    .inline-stats[b-oplw9zu4p8] {
        gap: 6px;
    }
    
    .stat-pill[b-oplw9zu4p8] {
        padding: 8px 12px;
    }
    
    .stat-pill-value[b-oplw9zu4p8] {
        font-size: 1.1rem;
    }
    
    .stat-pill-label[b-oplw9zu4p8] {
        font-size: 0.7rem;
    }
    
    .smart-suggestions[b-oplw9zu4p8] {
        gap: 8px;
    }
    
    .suggestion-pill[b-oplw9zu4p8] {
        padding: 10px 14px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .welcome-state[b-oplw9zu4p8] {
        padding: 12px 12px 0 12px;
        /* MOB2-Polish (2026-05-03): Drop the welcome-state's own gap to
           4px on mobile — the avatar section's negative margin-bottom
           below already pulls hard, and a 10px parent gap on top of that
           leaves a visible band of empty space between the sprite and
           the greeting. */
        gap: 4px;
    }

    /* MOB2 (2026-05-03): The companion sprite + greeting block was eating
       most of a mobile fold (390x844 viewport), pushing the actual hub
       card to scroll-only territory. Strategy: scale the avatar SECTION
       (parent) rather than the container — the container has its own
       float-bob animation (welcomeAvatarFloat, line ~277) that already
       claims the transform property, so scaling the parent leaves the
       child's transform untouched. The negative margin-bottom on the
       section claws back the visual gap left by the smaller scaled
       footprint (the layout box doesn't shrink with transform).

       MOB2-Polish (2026-05-03): Bumped from -40px to -90px because the
       canvas inside renders at a tall natural size (~240px) and scale(0.65)
       leaves ~84px of empty layout box at the bottom. Also tightened the
       section's own internal gap from 12px to 0 so the hero-view-toggle
       button (which sits below the avatar inside this section) doesn't
       add extra padding. The toggle button is small enough that no gap
       is needed — it sits flush against the visual sprite footprint.

       MOB2-V2 (2026-05-11): User feedback — avatar reads too small at
       scale 0.65 against the rest of the mobile composition. Bumped to
       scale 0.85 (~30% larger). Margin recalculated to match the new
       empty-box footprint: (1 - 0.85) × 240 ≈ 36px of empty space below
       the visual sprite; mirroring the original -90 ÷ 84 ≈ 1.07× ratio
       gives ~-38px. Round to -40 for a touch more pull-up. */
    .welcome-avatar-section[b-oplw9zu4p8] {
        margin-bottom: -40px;
        gap: 0;
        transform: scale(0.85);
        transform-origin: top center;
    }

    /* MOB8 (2026-05-03): Disable the welcomeAvatarFloat bob on mobile —
       the 6px translateY amplitude was tuned for the full-size sprite,
       and reads visually larger relative to the 65%-scaled mobile
       sprite. Keep the entrance fade animation (fadeInUp on the parent
       section) but quiet the perpetual bob so the avatar reads as a
       small confident emblem instead of a bouncy mascot. */
    .welcome-avatar-container[b-oplw9zu4p8] {
        animation: none;
    }

    /* MOB3 (2026-05-03): Hide the "COMMAND CENTER" workspace overline
       on mobile. It's pure decoration — the page is the home page, the
       user knows what they're looking at — and on a 390px viewport
       every reclaimed line moves the hub card closer to the fold. The
       label still renders on tablet+ where vertical space is plentiful. */
    .workspace-label-wrap[b-oplw9zu4p8] {
        display: none;
    }

    /* MOB5 (2026-05-03): Hide the Classic↔Expanded view toggle pill on
       mobile. At 390px there's no "expanded" layout to flip to anyway
       (companion-hero collapses to column at 860px), so the toggle is
       just visual noise eating top-right corner space. */
    .hero-view-toggle[b-oplw9zu4p8] {
        display: none;
    }

    /* MOB6 (2026-05-03): Hide the weather/location subtitle on mobile.
       "in Parma, Ohio · 🌙 52°F Clear sky" is a full row of
       nice-to-have context that pushes the more important Main Quest
       line — and the hub card — further down. Users on mobile generally
       know where they are; weather lives one tap away in any phone's
       native widget. */
    .hero-subtitle-weather[b-oplw9zu4p8] {
        display: none;
    }

    .hero-section[b-oplw9zu4p8] {
        margin-bottom: 8px;
    }

    .hero-title[b-oplw9zu4p8] {
        font-size: 1.5rem;
    }

    .hero-subtitle[b-oplw9zu4p8] {
        font-size: 0.9rem;
    }
    
    .command-center[b-oplw9zu4p8] {
        gap: 20px;
    }
    
    .command-input-wrapper[b-oplw9zu4p8] {
        flex-direction: row; /* Keep horizontal but compact */
    }
    
    .command-action[b-oplw9zu4p8] {
        width: 44px;
        min-height: 48px;
    }
    
    .inline-stats[b-oplw9zu4p8] {
        gap: 4px;
    }
    
    .stat-pill[b-oplw9zu4p8] {
        padding: 6px 10px;
    }
    
    .stat-pill-value[b-oplw9zu4p8] {
        font-size: 1rem;
    }
    
    .stat-divider[b-oplw9zu4p8] {
        margin: 0;
    }
    
    .smart-suggestions[b-oplw9zu4p8] {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    .suggestion-pill[b-oplw9zu4p8] {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
    
    .affirmation-card[b-oplw9zu4p8] {
        font-size: 0.8rem;
        padding: 12px 20px;
    }
    
    .tool-desc[b-oplw9zu4p8] {
        display: none;
    }
    
    .search-wrapper[b-oplw9zu4p8] {
        padding: 0 16px;
    }
}

/* ============================================
   CHAT CONTAINER STYLES
   ============================================ */

.chat-container[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 900px;
    height: calc(100vh - 140px);
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    overflow: hidden;
}

/* Inline chat messages (combined layout - no chat-container parent) */
.home-main > .chat-messages[b-oplw9zu4p8] {
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
    scroll-behavior: smooth;
    background: transparent;
    border-radius: 16px;
}

/* Scrollbar styling for chat messages */
.home-main > .chat-messages[b-oplw9zu4p8]::-webkit-scrollbar {
    width: 6px;
}

.home-main > .chat-messages[b-oplw9zu4p8]::-webkit-scrollbar-track {
    background: transparent;
}

.home-main > .chat-messages[b-oplw9zu4p8]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

.home-main > .chat-messages[b-oplw9zu4p8]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

.chat-header[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.icon-btn[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.icon-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* AI Mode Toggle Button */
.ai-mode-btn[b-oplw9zu4p8] {
    position: relative;
}

.ai-mode-btn.active[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.3);
    color: #a78bfa;
    box-shadow: 0 0 12px rgba(var(--theme-accent-rgb), 0.4);
}

.ai-mode-btn.active:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.4);
}

/* Active indicator dot */
.ai-mode-btn.active[b-oplw9zu4p8]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #a78bfa;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(167, 139, 250, 0.8);
}

.provider-select[b-oplw9zu4p8] {
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

/* Model Dropdown */
.model-dropdown[b-oplw9zu4p8] {
    position: relative;
}

.model-select-btn[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.model-select-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.35);
}

.model-select-btn .model-emoji[b-oplw9zu4p8] {
    font-size: 1.1rem;
}

.model-select-btn .model-name[b-oplw9zu4p8] {
    font-weight: 600;
    letter-spacing: 0.2px;
}

.model-select-btn .dropdown-arrow[b-oplw9zu4p8] {
    opacity: 0.8;
    transition: transform 0.2s ease;
}

/* Cloud theme - light background needs dark text */
.theme-cloud .model-select-btn[b-oplw9zu4p8] {
    background: rgba(30, 58, 95, 0.1);
    border-color: rgba(30, 58, 95, 0.2);
    color: #1e3a5f;
}

.theme-cloud .model-select-btn:hover[b-oplw9zu4p8] {
    background: rgba(30, 58, 95, 0.15);
    border-color: rgba(30, 58, 95, 0.3);
}

.model-menu[b-oplw9zu4p8] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 260px;
    background: rgba(30, 41, 59, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 10px 40px transparent;
    z-index: 100;
    overflow: hidden;
    animation: fadeIn-b-oplw9zu4p8 0.15s ease;
}

.model-menu-header[b-oplw9zu4p8] {
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.model-menu-item[b-oplw9zu4p8] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.model-menu-item:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
}

.model-menu-item.selected[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.2);
}

.model-item-emoji[b-oplw9zu4p8] {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.model-item-details[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 2px;
}

.model-item-name[b-oplw9zu4p8] {
    font-weight: 500;
    font-size: 0.9rem;
}

.model-item-desc[b-oplw9zu4p8] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.model-item-cost[b-oplw9zu4p8] {
    font-size: 0.7rem;
    color: #f59e0b;
    font-weight: 500;
}

.check-icon[b-oplw9zu4p8] {
    color: #22c55e;
    flex-shrink: 0;
}

/* Cloud theme model menu */
.theme-cloud .model-menu[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(30, 58, 95, 0.15);
    box-shadow: 0 10px 40px rgba(30, 58, 95, 0.15);
}

.theme-cloud .model-menu-header[b-oplw9zu4p8] {
    color: #64748b;
    border-bottom-color: rgba(30, 58, 95, 0.1);
}

.theme-cloud .model-menu-item[b-oplw9zu4p8] {
    color: #1e293b;
}

.theme-cloud .model-menu-item:hover[b-oplw9zu4p8] {
    background: rgba(30, 58, 95, 0.08);
}

.theme-cloud .model-menu-item.selected[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.theme-cloud .model-item-desc[b-oplw9zu4p8] {
    color: #64748b;
}

/* Voice Settings Container & Popover */
.voice-settings-container[b-oplw9zu4p8] {
    position: relative;
}

.voice-settings-btn[b-oplw9zu4p8] {
    transition: all 0.2s ease;
    position: relative;
}

.voice-settings-btn.active[b-oplw9zu4p8] {
    background: rgba(var(--theme-accent-rgb), 0.15);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.voice-settings-btn.continuous-active[b-oplw9zu4p8] {
    color: #22c55e;
}

.voice-settings-btn.continuous-active[b-oplw9zu4p8]::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-green-b-oplw9zu4p8 2s infinite;
}

@keyframes pulse-green-b-oplw9zu4p8 {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    }
    50% { 
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }
}

.continuous-indicator[b-oplw9zu4p8] {
    display: none; /* Hidden, using ::after instead */
}

.voice-settings-popover[b-oplw9zu4p8] {
    position: absolute;
    top: calc(100% + 12px);
    right: -100px;
    width: 340px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    z-index: 200;
    animation: slideInDown-b-oplw9zu4p8 0.2s ease;
}

@keyframes slideInDown-b-oplw9zu4p8 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark theme voice settings */
.theme-space .voice-settings-popover[b-oplw9zu4p8],
.theme-winter .voice-settings-popover[b-oplw9zu4p8],
.theme-nature .voice-settings-popover[b-oplw9zu4p8],
.theme-ocean .voice-settings-popover[b-oplw9zu4p8],
.theme-mystic .voice-settings-popover[b-oplw9zu4p8],
.theme-tron .voice-settings-popover[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(255, 255, 255, 0.15);
}

.chat-messages[b-oplw9zu4p8] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-input-wrapper[b-oplw9zu4p8] {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

/* AI Escalation Prompt */
.ai-escalation-prompt[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    text-align: center;
    animation: fadeIn-b-oplw9zu4p8 0.3s ease;
}

.ai-escalation-prompt .prompt-icon[b-oplw9zu4p8] {
    color: #f59e0b;
}

.ai-escalation-prompt .prompt-content[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-escalation-prompt .prompt-title[b-oplw9zu4p8] {
    font-weight: 600;
    margin: 0;
}

.ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

.ai-escalation-prompt .prompt-actions[b-oplw9zu4p8] {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.btn-primary[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover[b-oplw9zu4p8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb), 0.4);
}

.btn-secondary[b-oplw9zu4p8] {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
}

/* Affirmation Card */
.affirmation-card[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    font-size: 0.9rem;
    font-style: italic;
    cursor: pointer;
    transition: all 0.2s ease;
}

.affirmation-card:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.affirmation-card svg[b-oplw9zu4p8] {
    color: #f59e0b;
    flex-shrink: 0;
}

/* Sidebar Backdrop */
.sidebar-backdrop[b-oplw9zu4p8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 998;
}

/* Fade animation */
@keyframes fadeIn-b-oplw9zu4p8 {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in[b-oplw9zu4p8] {
    animation: fadeIn-b-oplw9zu4p8 0.3s ease;
}

/* ============================================
   THEME-SPECIFIC CHAT STYLES
   ============================================ */

/* Cloud theme */
.theme-cloud .history-btn[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.7);
    color: #5b21b6;
}

.theme-cloud .history-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.95);
}

/* Cloud theme chat */
.theme-cloud .chat-container[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.theme-cloud .chat-header[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.5);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.theme-cloud .icon-btn[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.theme-cloud .icon-btn:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.2);
}

.theme-cloud .provider-select[b-oplw9zu4p8] {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
    color: #1e3a5f;
}

.theme-cloud .chat-container .chat-messages[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.3);
}

/* Inline chat messages on home page should be transparent */
.home-main > .chat-messages[b-oplw9zu4p8] {
    background: transparent;
}

/* Cloud theme - Chat Controls Bar */
.theme-cloud .chat-controls-bar .icon-btn[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.theme-cloud .chat-controls-bar .icon-btn:hover[b-oplw9zu4p8] {
    background: rgba(var(--theme-primary-rgb), 0.15);
}

.theme-cloud .chat-input-wrapper[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.5);
    border-top-color: rgba(0, 0, 0, 0.05);
}

.theme-cloud .ai-escalation-prompt[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-cloud .ai-escalation-prompt .prompt-title[b-oplw9zu4p8] { color: #1e3a5f; }
.theme-cloud .ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8] { color: #64748b; }

.theme-cloud .btn-secondary[b-oplw9zu4p8] {
    border-color: rgba(0, 0, 0, 0.2);
    color: #64748b;
}

.theme-cloud .btn-secondary:hover[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.05);
}

.theme-cloud .affirmation-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.85);
    color: #1e3a5f;
}

/* Dark themes (Space, Winter, Nature, Ocean, Mystic, Tron) */
.theme-space .history-btn[b-oplw9zu4p8],
.theme-winter .history-btn[b-oplw9zu4p8],
.theme-nature .history-btn[b-oplw9zu4p8],
.theme-ocean .history-btn[b-oplw9zu4p8],
.theme-mystic .history-btn[b-oplw9zu4p8],
.theme-tron .history-btn[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.theme-space .history-btn:hover[b-oplw9zu4p8],
.theme-winter .history-btn:hover[b-oplw9zu4p8],
.theme-nature .history-btn:hover[b-oplw9zu4p8],
.theme-ocean .history-btn:hover[b-oplw9zu4p8],
.theme-mystic .history-btn:hover[b-oplw9zu4p8],
.theme-tron .history-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.theme-space .chat-container[b-oplw9zu4p8],
.theme-winter .chat-container[b-oplw9zu4p8],
.theme-nature .chat-container[b-oplw9zu4p8],
.theme-ocean .chat-container[b-oplw9zu4p8],
.theme-mystic .chat-container[b-oplw9zu4p8],
.theme-tron .chat-container[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .chat-header[b-oplw9zu4p8],
.theme-winter .chat-header[b-oplw9zu4p8],
.theme-nature .chat-header[b-oplw9zu4p8],
.theme-ocean .chat-header[b-oplw9zu4p8],
.theme-mystic .chat-header[b-oplw9zu4p8],
.theme-tron .chat-header[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.2);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.theme-space .icon-btn[b-oplw9zu4p8],
.theme-winter .icon-btn[b-oplw9zu4p8],
.theme-nature .icon-btn[b-oplw9zu4p8],
.theme-ocean .icon-btn[b-oplw9zu4p8],
.theme-mystic .icon-btn[b-oplw9zu4p8],
.theme-tron .icon-btn[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.theme-space .icon-btn:hover[b-oplw9zu4p8],
.theme-winter .icon-btn:hover[b-oplw9zu4p8],
.theme-nature .icon-btn:hover[b-oplw9zu4p8],
.theme-ocean .icon-btn:hover[b-oplw9zu4p8],
.theme-mystic .icon-btn:hover[b-oplw9zu4p8],
.theme-tron .icon-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.2);
}

.theme-space .provider-select[b-oplw9zu4p8],
.theme-winter .provider-select[b-oplw9zu4p8],
.theme-nature .provider-select[b-oplw9zu4p8],
.theme-ocean .provider-select[b-oplw9zu4p8],
.theme-mystic .provider-select[b-oplw9zu4p8],
.theme-tron .provider-select[b-oplw9zu4p8] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.theme-space .chat-messages[b-oplw9zu4p8],
.theme-winter .chat-messages[b-oplw9zu4p8],
.theme-nature .chat-messages[b-oplw9zu4p8],
.theme-ocean .chat-messages[b-oplw9zu4p8],
.theme-mystic .chat-messages[b-oplw9zu4p8],
.theme-tron .chat-messages[b-oplw9zu4p8] {
    background: transparent;
}

.theme-space .chat-input-wrapper[b-oplw9zu4p8],
.theme-winter .chat-input-wrapper[b-oplw9zu4p8],
.theme-nature .chat-input-wrapper[b-oplw9zu4p8],
.theme-ocean .chat-input-wrapper[b-oplw9zu4p8],
.theme-mystic .chat-input-wrapper[b-oplw9zu4p8],
.theme-tron .chat-input-wrapper[b-oplw9zu4p8] {
    background: rgba(0, 0, 0, 0.2);
    border-top-color: rgba(255, 255, 255, 0.1);
}

.theme-space .ai-escalation-prompt[b-oplw9zu4p8],
.theme-winter .ai-escalation-prompt[b-oplw9zu4p8],
.theme-nature .ai-escalation-prompt[b-oplw9zu4p8],
.theme-ocean .ai-escalation-prompt[b-oplw9zu4p8],
.theme-mystic .ai-escalation-prompt[b-oplw9zu4p8],
.theme-tron .ai-escalation-prompt[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .ai-escalation-prompt .prompt-title[b-oplw9zu4p8],
.theme-winter .ai-escalation-prompt .prompt-title[b-oplw9zu4p8],
.theme-nature .ai-escalation-prompt .prompt-title[b-oplw9zu4p8],
.theme-ocean .ai-escalation-prompt .prompt-title[b-oplw9zu4p8],
.theme-mystic .ai-escalation-prompt .prompt-title[b-oplw9zu4p8],
.theme-tron .ai-escalation-prompt .prompt-title[b-oplw9zu4p8] { 
    color: white; 
}

.theme-space .ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8],
.theme-winter .ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8],
.theme-nature .ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8],
.theme-ocean .ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8],
.theme-mystic .ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8],
.theme-tron .ai-escalation-prompt .prompt-subtitle[b-oplw9zu4p8] { 
    color: rgba(255, 255, 255, 0.7); 
}

.theme-space .btn-secondary[b-oplw9zu4p8],
.theme-winter .btn-secondary[b-oplw9zu4p8],
.theme-nature .btn-secondary[b-oplw9zu4p8],
.theme-ocean .btn-secondary[b-oplw9zu4p8],
.theme-mystic .btn-secondary[b-oplw9zu4p8],
.theme-tron .btn-secondary[b-oplw9zu4p8] {
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

.theme-space .btn-secondary:hover[b-oplw9zu4p8],
.theme-winter .btn-secondary:hover[b-oplw9zu4p8],
.theme-nature .btn-secondary:hover[b-oplw9zu4p8],
.theme-ocean .btn-secondary:hover[b-oplw9zu4p8],
.theme-mystic .btn-secondary:hover[b-oplw9zu4p8],
.theme-tron .btn-secondary:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
}

.theme-space .affirmation-card[b-oplw9zu4p8],
.theme-winter .affirmation-card[b-oplw9zu4p8],
.theme-nature .affirmation-card[b-oplw9zu4p8],
.theme-ocean .affirmation-card[b-oplw9zu4p8],
.theme-mystic .affirmation-card[b-oplw9zu4p8],
.theme-tron .affirmation-card[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   SHARE IMAGE DIALOG STYLES
   ============================================ */

.share-image-overlay[b-oplw9zu4p8] {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: shareDialogFadeIn-b-oplw9zu4p8 0.2s ease;
}

@keyframes shareDialogFadeIn-b-oplw9zu4p8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.share-image-dialog[b-oplw9zu4p8] {
    background: var(--theme-surface, white);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px transparent;
    animation: shareDialogSlideUp-b-oplw9zu4p8 0.3s ease;
}

@keyframes shareDialogSlideUp-b-oplw9zu4p8 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.share-dialog-header[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    flex-shrink: 0;
}

.share-dialog-header h2[b-oplw9zu4p8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.share-dialog-header .close-btn[b-oplw9zu4p8] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    color: var(--theme-text-secondary, #64748b);
    transition: all 0.2s;
}

.share-dialog-header .close-btn:hover[b-oplw9zu4p8] {
    background: var(--theme-link-hover-bg, #f1f5f9);
}

.share-dialog-body[b-oplw9zu4p8] {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.share-image-preview[b-oplw9zu4p8] {
    background: #1a1a2e;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.share-image-preview img[b-oplw9zu4p8] {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    display: block;
}

.share-form[b-oplw9zu4p8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.share-form label[b-oplw9zu4p8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    margin-top: 0.5rem;
}

.share-form label:first-child[b-oplw9zu4p8] {
    margin-top: 0;
}

.share-select[b-oplw9zu4p8],
.share-form textarea[b-oplw9zu4p8] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    font-size: 1rem;
    background: var(--theme-surface, white);
    color: var(--theme-text-primary, #1e293b);
    transition: border-color 0.2s;
}

.share-select:focus[b-oplw9zu4p8],
.share-form textarea:focus[b-oplw9zu4p8] {
    outline: none;
    border-color: var(--theme-primary, #7c3aed);
}

.share-form textarea[b-oplw9zu4p8] {
    resize: none;
    min-height: 60px;
}

.loading-users[b-oplw9zu4p8] {
    padding: 1rem;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
    font-style: italic;
}

.share-dialog-footer[b-oplw9zu4p8] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    flex-shrink: 0;
}

.share-dialog-footer .btn-cancel[b-oplw9zu4p8] {
    padding: 0.75rem 1.5rem;
    background: var(--theme-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.share-dialog-footer .btn-cancel:hover[b-oplw9zu4p8] {
    background: var(--theme-secondary-hover, #e2e8f0);
}

.share-dialog-footer .btn-share[b-oplw9zu4p8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--theme-accent), var(--theme-primary));
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(var(--theme-accent-rgb), 0.3);
}

.share-dialog-footer .btn-share:hover:not(:disabled)[b-oplw9zu4p8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--theme-accent-rgb), 0.4);
}

.share-dialog-footer .btn-share:disabled[b-oplw9zu4p8] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dark theme adjustments for share dialog */
.theme-space .share-image-dialog[b-oplw9zu4p8],
.theme-winter .share-image-dialog[b-oplw9zu4p8],
.theme-nature .share-image-dialog[b-oplw9zu4p8],
.theme-ocean .share-image-dialog[b-oplw9zu4p8],
.theme-mystic .share-image-dialog[b-oplw9zu4p8],
.theme-tron .share-image-dialog[b-oplw9zu4p8] {
    background: rgba(30, 41, 59, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .share-dialog-header h2[b-oplw9zu4p8],
.theme-winter .share-dialog-header h2[b-oplw9zu4p8],
.theme-nature .share-dialog-header h2[b-oplw9zu4p8],
.theme-ocean .share-dialog-header h2[b-oplw9zu4p8],
.theme-mystic .share-dialog-header h2[b-oplw9zu4p8],
.theme-tron .share-dialog-header h2[b-oplw9zu4p8] {
    color: white;
}

.theme-space .share-dialog-header .close-btn[b-oplw9zu4p8],
.theme-winter .share-dialog-header .close-btn[b-oplw9zu4p8],
.theme-nature .share-dialog-header .close-btn[b-oplw9zu4p8],
.theme-ocean .share-dialog-header .close-btn[b-oplw9zu4p8],
.theme-mystic .share-dialog-header .close-btn[b-oplw9zu4p8],
.theme-tron .share-dialog-header .close-btn[b-oplw9zu4p8] {
    color: rgba(255, 255, 255, 0.7);
}

.theme-space .share-dialog-header .close-btn:hover[b-oplw9zu4p8],
.theme-winter .share-dialog-header .close-btn:hover[b-oplw9zu4p8],
.theme-nature .share-dialog-header .close-btn:hover[b-oplw9zu4p8],
.theme-ocean .share-dialog-header .close-btn:hover[b-oplw9zu4p8],
.theme-mystic .share-dialog-header .close-btn:hover[b-oplw9zu4p8],
.theme-tron .share-dialog-header .close-btn:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
}

.theme-space .share-select[b-oplw9zu4p8],
.theme-winter .share-select[b-oplw9zu4p8],
.theme-nature .share-select[b-oplw9zu4p8],
.theme-ocean .share-select[b-oplw9zu4p8],
.theme-mystic .share-select[b-oplw9zu4p8],
.theme-tron .share-select[b-oplw9zu4p8],
.theme-space .share-form textarea[b-oplw9zu4p8],
.theme-winter .share-form textarea[b-oplw9zu4p8],
.theme-nature .share-form textarea[b-oplw9zu4p8],
.theme-ocean .share-form textarea[b-oplw9zu4p8],
.theme-mystic .share-form textarea[b-oplw9zu4p8],
.theme-tron .share-form textarea[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.theme-space .share-select option[b-oplw9zu4p8],
.theme-winter .share-select option[b-oplw9zu4p8],
.theme-nature .share-select option[b-oplw9zu4p8],
.theme-ocean .share-select option[b-oplw9zu4p8],
.theme-mystic .share-select option[b-oplw9zu4p8],
.theme-tron .share-select option[b-oplw9zu4p8] {
    background: #1e293b;
    color: white;
}

.theme-space .share-dialog-footer .btn-cancel[b-oplw9zu4p8],
.theme-winter .share-dialog-footer .btn-cancel[b-oplw9zu4p8],
.theme-nature .share-dialog-footer .btn-cancel[b-oplw9zu4p8],
.theme-ocean .share-dialog-footer .btn-cancel[b-oplw9zu4p8],
.theme-mystic .share-dialog-footer .btn-cancel[b-oplw9zu4p8],
.theme-tron .share-dialog-footer .btn-cancel[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.theme-space .share-dialog-footer .btn-cancel:hover[b-oplw9zu4p8],
.theme-winter .share-dialog-footer .btn-cancel:hover[b-oplw9zu4p8],
.theme-nature .share-dialog-footer .btn-cancel:hover[b-oplw9zu4p8],
.theme-ocean .share-dialog-footer .btn-cancel:hover[b-oplw9zu4p8],
.theme-mystic .share-dialog-footer .btn-cancel:hover[b-oplw9zu4p8],
.theme-tron .share-dialog-footer .btn-cancel:hover[b-oplw9zu4p8] {
    background: rgba(255, 255, 255, 0.15);
}

/* Image preview styles moved to Components/Chat/ImagePreviewDialog.razor.css */

/* ═══ PRO-HERO-1 (2026-08-13): Professional-mode home mark ═══
   Self-contained (no .welcome-avatar-section reuse) so the Spark tier-glow and
   bob rules can never bleed in. */
/* HERO-SIZE-1 (2026-10-17): the mark is back to 88px to match the FAB on every other page (Josh). The
   halved top padding below stays.
   HERO-TRIM-1 (2026-10-08): the static mark (robot / halo) went 88 -> 56px and its top padding halved -
   it was the largest single thing on Home and pushed the Start-with row to ~70% down the window.
   The Spark companion (orb, evolution, wardrobe) is a different branch and keeps its stage. */
.pro-hero-wrapper[b-oplw9zu4p8] {
    display: flex;
    justify-content: center;
    padding-top: 0.75rem;
    margin-bottom: -0.25rem;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.pro-hero-wrapper.avatar-hidden[b-oplw9zu4p8] {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

.pro-hero-bot[b-oplw9zu4p8] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    border-radius: 50%;
}

/* PRO-MARK-1 (2026-08-13): the Professional AI mark, wherever it appears.
   Contract copied verbatim from .chat-fab.robot-mode (Assistant.razor.css ~2264),
   which had already settled this months ago: NO disc. Transparent background, a
   themeable head via --theme-fab-robot, and a drop-shadow FILTER — which hugs the
   robot's silhouette — instead of a box-shadow, which would draw a soft rectangle
   around a mark that has no box. I originally wrapped these in gradient circles and
   Josh called it: "we need to choose one - I'm thinking no circle." He was matching
   the FAB; I was inventing a third treatment.
   FaceColor stays at ProBot's #fff default: the head is dark here, so the face reads
   as cut out of it. (An earlier pass set FaceColor=#1e293b for a WHITE head inside a
   circle — with the circle gone that would be a white bot on a light page.)
   NOTE the colour must sit on this element, not a `.pro-bot` descendant selector —
   these are component-SCOPED stylesheets and .pro-bot carries ProBot's own scope
   attribute, so such a selector never matches (GOTCHAS #258). Inheritance crosses
   the boundary; selectors do not. */
.pro-hero-mark[b-oplw9zu4p8] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--theme-fab-robot, #334155);
    filter: drop-shadow(0 4px 10px var(--theme-shadow-color, rgba(15, 23, 42, 0.28)));
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* HALO-1e (2026-08-21): the ring is not a solid mark. The depth shadow above is
   authored for ProBot's filled head; on a thin stroke it muddies the ring. Lives HERE,
   in the scoped sheet and AFTER the base rule, because a global `.pro-hero-mark--halo`
   is (0,1,0) and loses to this file's scoped `.pro-hero-mark[b-xxxxx]` at (0,2,0) —
   the mistake HALO-1c made. Same specificity + later source order = this one wins. */
.pro-hero-mark--halo[b-oplw9zu4p8] {
    filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.30));
}

.pro-hero-bot:hover .pro-hero-mark[b-oplw9zu4p8] {
    transform: scale(1.06);
    filter: drop-shadow(0 6px 14px var(--theme-shadow-color, rgba(15, 23, 42, 0.35)));
}

.pro-hero-bot:focus-visible[b-oplw9zu4p8] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 4px;
}

/* HOME-TOUR-1 (2026-09-05): the "Show me around" offer sits centred between the hero
   and the Today's Work card. Only the WRAPPER is styled here - the button itself is
   GuidedTour's own .nts-tour-btn, a child component this scoped sheet cannot reach
   (GOTCHAS #258), and it already matches the list-page secondary buttons. */
.home-tour-offer[b-oplw9zu4p8] {
    display: flex;
    justify-content: center;
    margin: 0 0 0.75rem 0;
    /* TOUR-SWAP-1 (2026-09-09): up to three chips once the tour has been seen
       ("What should I start with?" / "Open it" / ghost "Show me around") - let
       them wrap on a phone instead of pushing past the hero. */
    flex-wrap: wrap;
    row-gap: 8px;
}

/* HOME-CMD-1 / HEADER-CMD-2 (2026-10-08): the tour chips are secondary - the "Start with" card below
   already answers what the lead chip asks, and search lives in the header. Small, borderless. */
.home-tour-offer--under-bar[b-oplw9zu4p8] {
    row-gap: 6px;
}

.home-tour-offer--under-bar[b-oplw9zu4p8]  .nts-tour-btn {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8125rem;
}

/* HOME-CMD-1 polish (9:18 PM walk): the lead chip kept its accent border and still read as a second
   primary control. Under the bar it goes borderless like its ghost sibling - text-primary + the play
   glyph keep it the stronger of the two, and the bar stays the only outlined control above the card. */
.home-tour-offer--under-bar[b-oplw9zu4p8]  .nts-tour-btn--lead {
    border-color: transparent;
    background: transparent;
}

/* HEADER-CMD-2 polish (10:19 PM walk, Josh: "we can reduce this a bit"): with the hero bar gone, the
   hero's bottom margin + the column gap left the chips floating ~90px under the goal line. Pull them
   up so goal line and chips read as one group. Adjacent-sibling only: a nudge card (activation /
   persona / location / Spark egg) between them keeps the normal gap, and a folded hero is excluded. */
.home-hero-stack:not(.home-hero-stack--docked) + .home-todays-work-wrap .home-tour-offer[b-oplw9zu4p8] {
    margin-top: -32px;
}

/* START-WITH-HEAR-1/2: the StartWith player is fully headless. The card's pill starts it AND stops it
   ("Hear why" <-> "Stop"), and the reader bar has its own controls - a third Stop under the greeting
   only made the page jump when the read began. */
.home-tour-offer--under-bar[b-oplw9zu4p8]  .nts-tour-btn--headless {
    display: none;
}

.home-tour-offer--under-bar[b-oplw9zu4p8]  .nts-tour-btn:hover:not(:disabled) {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}


/* ─── GLITCH-TAB-2 (2026-10-05): the hero folds up while the assistant is docked ─────────
   Josh: "the avatar click makes the chat section even more prominent - sliding up replacing the
   section with the greeting". The hero stack (mark + greeting + quest line) is a one-row grid
   whose row animates 1fr -> 0fr, so it folds to nothing and the hub card rises into its place;
   on undock it unfolds the same way. The inner box must be min-height:0 + overflow:hidden for a
   0fr row to actually reach zero. The welcome-state column's own gap closes with it. */
.home-hero-stack[b-oplw9zu4p8] {
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    justify-items: center;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease,
                margin 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-hero-stack-inner[b-oplw9zu4p8] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.home-hero-stack--docked[b-oplw9zu4p8] {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-bottom: -16px;   /* the .welcome-state gap that would otherwise sit above the card */
    pointer-events: none;
}

.home-hero-stack--docked .home-hero-stack-inner[b-oplw9zu4p8] {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-stack[b-oplw9zu4p8] { transition: none; }
}

/* ─── HERO-TRIM-2 (2026-10-08, the 11:06 PM walk) ───────────────────────────────────────────────
   1. The Halo on Home is a still mark you click, so it does not drift. A dim ring carrying one bright
      arc, turning slowly, IS the universal loading spinner - Claude misread Josh's own Halo as one the
      same evening, and shrinking it to 56px (HERO-TRIM-1) made it worse. The breath stays (life, not
      motion), and the JS-owned gaze still aims while a read is playing - that lives on a different
      group (.nts-halo-gaze), so stopping the drift cannot touch it. Home only: the FAB/peek marks
      keep their drift. */
/* HALO-LIFE-1 (2026-10-17): the override above-the-fold used to be `animation: none`,
   because the drift was a constant 360deg spin and that read as a page loader. The
   drift is now a +/-9deg sway with a home position (Halo.razor.css), which is the
   opposite signal, so the hero keeps it. Rule retained as a documented no-op so the
   next person does not re-add the kill switch. */
.pro-hero-mark--halo[b-oplw9zu4p8]  .nts-halo-drift {
    animation-duration: 9s;
}

/* 2. The companion orb keeps its size - only the dead space under it goes. The orb sits in a fixed
      CompanionEntity box (120px at the default Small), then the section's 24px margin, then the
      column gap, then the greeting: ~120px of nothing between the orb and "Good evening". Drop the
      margin and lift the greeting 12px into the box's own transparent bottom. Kept conservative so
      the user-chosen Mini size (40px box) still clears the greeting; tune these two numbers if the
      walk wants more. */
.welcome-avatar-section.classic-hero-wrapper[b-oplw9zu4p8] {
    margin-bottom: 0;
}

.welcome-avatar-section.classic-hero-wrapper + .hero-section[b-oplw9zu4p8] {
    margin-top: -12px;
}

/* HERO-TRIM-2b (11:11 PM, Josh: "a bit tighter"): the default Small companion (120px box) and the
   bigger sizes still left ~85px between the orb and the greeting. Those sizes get a 40px lift; Mini,
   Tiny and Normal (40 / 56 / 80px boxes - Normal is SMALLER than Small in EntitySize) keep the safe
   12px. Size-aware so a user who shrinks the companion by chat never gets it on top of the greeting. */
.welcome-avatar-section.classic-hero-wrapper:is(.companion-size-small, .companion-size-large, .companion-size-hero) + .hero-section[b-oplw9zu4p8] {
    margin-top: -40px;
}

/* GLITCH-PHONE-1 (2026-10-13, Josh on the phone: "we can make better use of the real estate here - don't
   need the Show Around button"). Phones only: the "Show me around" row goes. display:none on the WRAPPER
   keeps both GuidedTour players mounted, so the first-visit greeting's "Show me" chip (TOUR-SAMEPAGE-1)
   and the card's "Hear why" (START-WITH-HEAR-1) still start their tours through TourHandoff. */
@media (max-width: 480px) {
    .home-tour-offer[b-oplw9zu4p8] {
        display: none;
    }
}

/* GLITCH-PHONE-4 (2026-10-14, Josh: "the money section should drop to limit to the AI chat only"):
   on a phone with the chat docked, the page under the hub card (Money Pulse, Browse tools) still
   scrolled up behind the bottom tab strip. The chat is the screen: everything after the hub card
   goes, the card's wrapper gives up its bottom margin, and the layout's phone runway
   (MainLayout.razor.css HOME-RUNWAY-1, 32px + safe area, !important and out of this scope) is
   cancelled by an equal negative margin so the page has nothing left to scroll. Hero stack is
   already folded to 0 by GLITCH-TAB-2. Phones only; the other tabs restore all of it. */
@media (max-width: 480px) {
    .home-main--docked .home-todays-work-wrap ~ .home-todays-work-wrap[b-oplw9zu4p8] {
        display: none;
    }

    .home-main--docked .home-todays-work-wrap[b-oplw9zu4p8] {
        margin-bottom: calc(-32px - env(safe-area-inset-bottom, 0px));
    }
}

/* HUB-PHONE-2 (2026-10-14) / HOME-FOOT-1 (2026-10-18) made the "Browse tools by package" section the hub
   card's own footer on phones so the fixed strip's buckle landed on white, not on a grey slab holding one
   link. HOME-FOOT-2 (2026-10-19): the link is gone (Home.razor HOME-BROWSE-2) and the footer surface with
   it, so the page ends on the card itself. The card already carries 60px + safe area of strip clearance
   (HUB-PHONE-2) and site.css HUB-PHONE-4 zeroes the layout runway while the card is up; the wrapper's 24px
   margin was the last grey under it - drop it, same as the docked state (GLITCH-PHONE-4 above). Phones
   only; wider screens keep the margin and take a real runway (MainLayout.razor.css HOME-RUNWAY-2). */
@media (max-width: 480px) {
    .home-todays-work-wrap[b-oplw9zu4p8] {
        margin-bottom: 0;
    }
}

/* ─── SIDE-QUEST-1 (2026-10-16): switching gears ───────────────────────────────────────────
   On the day of an event linked to a non-primary goal, a side-quest line slides in ABOVE the Main
   Quest and the quest line drops a notch and dims - the gear shifts, the quest is still there. */
.hero-subtitle-side-quest[b-oplw9zu4p8] {
    margin-top: 8px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    animation: sideQuestIn-b-oplw9zu4p8 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}

.side-quest-gear[b-oplw9zu4p8] {
    display: inline-block;
    animation: sideQuestGear-b-oplw9zu4p8 0.9s ease-out both;
}

.side-quest-label[b-oplw9zu4p8] {
    color: var(--theme-accent, #f59e0b);
    letter-spacing: 0.01em;
}

.side-quest-link[b-oplw9zu4p8] {
    font-weight: 700;
}

.side-quest-event[b-oplw9zu4p8] {
    opacity: 0.8;
    font-weight: 500;
}

.hero-subtitle-primary-goal--shifted[b-oplw9zu4p8] {
    opacity: 0.72;
    font-size: 0.9rem;
    animation: sideQuestShift-b-oplw9zu4p8 0.5s ease-out both;
}

@keyframes sideQuestIn-b-oplw9zu4p8 {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sideQuestShift-b-oplw9zu4p8 {
    from { transform: translateY(-8px); opacity: 1; }
    to   { transform: translateY(0);    opacity: 0.72; }
}

@keyframes sideQuestGear-b-oplw9zu4p8 {
    from { transform: rotate(-120deg); }
    to   { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-subtitle-side-quest[b-oplw9zu4p8], .side-quest-gear[b-oplw9zu4p8], .hero-subtitle-primary-goal--shifted[b-oplw9zu4p8] { animation: none; }
}

/* GLITCH-DESK-1 (2026-10-17, Josh: "we can use more real estate on desktop too - similar to mobile with
   a bit more spacing"). Desktop/tablet with the chat docked: the "Show me around" row and the Browse-tools
   footer go (same as the phone's GLITCH-PHONE-1/4), and the hub wrapper widens past 820px, keeping a
   gutter either side so it still reads as a card rather than a phone's edge-to-edge sheet. The slot's
   height is TodaysWorkCard.razor.css GLITCH-DESK-1. Other tabs untouched: the class only exists while docked. */
@media (min-width: 481px) {
    .home-main--docked .home-tour-offer[b-oplw9zu4p8] {
        display: none;
    }

    .home-main--docked .home-todays-work-wrap[b-oplw9zu4p8] {
        max-width: min(1280px, calc(100% - 48px));
        margin-bottom: 0;
    }
}

/* GLITCH-DESK-3 (2026-10-17, Josh at true 100% on a 1280x671 viewport: "you have like an inch of space
   for messaging"). The column's 20px top padding + the folded hero's residual gap left ~48px of nothing
   between the app header and the card while docked. Pull the card up to the header. */
@media (min-width: 481px) {
    .home-main--docked .welcome-state[b-oplw9zu4p8] {
        padding-top: 8px;
    }

    .home-main--docked .home-hero-stack--docked[b-oplw9zu4p8] {
        margin-bottom: -32px;
    }
}

/* GOAL-H1-1 (2026-10-19): with a Primary Goal the goal IS the headline. The greeting drops to a
   one-line eyebrow (with the inline workspace rename button), the goal name takes .hero-title,
   a thin meter sits under it, and the resolved label + percentage read beneath that. Sizes ride the
   existing .hero-title breakpoints (2rem / 1.75 / 1.5); a 37-character goal wraps to two balanced
   lines on a phone. No Primary Goal -> none of this renders (Home.razor RenderHeroHeadline). */
.hero-eyebrow[b-oplw9zu4p8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0.85;
    /* GOAL-H1-3: the line this replaced was .hero-subtitle, which authenticated-home.css paints with the
       theme's secondary text + subtitle shadow. Without the same two lines the eyebrow inherited the
       stack's default and "Good evening," went near-black on Slate and Tron (Josh's zoom, 10:29 PM). */
    color: var(--theme-text-secondary);
    text-shadow: var(--theme-subtitle-shadow);
}

.hero-eyebrow .gradient-text[b-oplw9zu4p8] {
    font-weight: 600;
}

/* GOAL-H1-3 (2026-10-19, Josh's five-theme walk on localhost, then the Slate zoom): the eyebrow's
   "Good evening," and the weather string were near-black on Slate and Tron. The greeting used to be the
   <h1> (theme .hero-title colour); the weather sat in .hero-subtitle (authenticated-home.css: secondary
   text + subtitle shadow). The eyebrow had neither. Base rule above takes the subtitle's two lines; the
   eight .theme-* .hero-subtitle rules below also name .hero-eyebrow for their per-theme glow. */

.hero-title--goal[b-oplw9zu4p8] {
    text-wrap: balance;
    max-width: 24ch;
    margin-left: auto;
    margin-right: auto;
}

.hero-goal-link[b-oplw9zu4p8] {
    color: inherit;
    text-decoration: none;
}

/* GOAL-H1-2 (2026-10-19, prod as Avery on Slate, hover): a 2px white underline across a two-line 32px
   headline read as a bar, not a link. Hairline, in the star's gold, pushed down clear of descenders;
   the star brightens with it. Focus ring stays the browser's (keyboard users get the full outline). */
.hero-goal-link:hover[b-oplw9zu4p8] {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--theme-warning, #f59e0b);
    text-underline-offset: 0.28em;
}

.hero-goal-link:hover svg[b-oplw9zu4p8] {
    filter: brightness(1.15);
}

.hero-goal-link svg[b-oplw9zu4p8] {
    width: 0.72em;
    height: 0.72em;
    margin-right: 0.3em;
    vertical-align: -0.06em;
    color: var(--theme-warning, #f59e0b);
}

.hero-goal-meter[b-oplw9zu4p8] {
    width: min(360px, 72vw);
    height: 6px;
    margin: 12px auto 8px;
    border-radius: 999px;
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.18);
    overflow: hidden;
}

.hero-goal-meter-fill[b-oplw9zu4p8] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    transition: width 0.6s ease;
}

.hero-goal-progress[b-oplw9zu4p8] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.85;
}

.hero-goal-progress strong[b-oplw9zu4p8] {
    font-weight: 600;
}

/* The expanded companion layout left-aligns its greeting block; keep the eyebrow and meter with it. */
.companion-hero-greeting .hero-eyebrow[b-oplw9zu4p8] {
    justify-content: flex-start;
}

.companion-hero-greeting .hero-title--goal[b-oplw9zu4p8] {
    margin-left: 0;
}

.companion-hero-greeting .hero-goal-meter[b-oplw9zu4p8] {
    margin-left: 0;
}

/* GOAL-H1-1b: the opt-in weather rides the eyebrow (one row, not two). */
.hero-eyebrow-weather[b-oplw9zu4p8] {
    opacity: 0.85;
}
/* /Pages/Identity/ForgotPassword.razor.rz.scp.css */
/* ============================================
   FORGOT PASSWORD PAGE STYLES
   ============================================ */

.forgot-page-wrapper[b-otlhc3gtwx] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.forgot-container[b-otlhc3gtwx] {
    max-width: 480px;
    width: 100%;
}

.forgot-card[b-otlhc3gtwx] {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
    /* Force light-mode form control rendering regardless of OS prefers-color-scheme.
       Matches the Login/Register fix for Chromium auto-darkening inputs inside the
       white card when the OS is in dark mode. */
    color-scheme: light;
}

.forgot-logo[b-otlhc3gtwx] {
    text-align: center;
    margin-bottom: 32px;
}

.forgot-logo img[b-otlhc3gtwx] {
    max-width: 120px;
    height: auto;
}

.forgot-header[b-otlhc3gtwx] {
    text-align: center;
    margin-bottom: 32px;
}

.forgot-title[b-otlhc3gtwx] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.forgot-subtitle[b-otlhc3gtwx] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.form-group[b-otlhc3gtwx] {
    margin-bottom: 20px;
}

.back-link[b-otlhc3gtwx] {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.back-link a[b-otlhc3gtwx] {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link a:hover[b-otlhc3gtwx] {
    color: #4f46e5;
    text-decoration: underline;
}

.auth-button[b-otlhc3gtwx] {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
    margin-top: 1rem;
    font-family: inherit;
}

.auth-button:hover:not(:disabled)[b-otlhc3gtwx] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
}

.auth-button:active:not(:disabled)[b-otlhc3gtwx] {
    transform: translateY(0);
}

.auth-button:disabled[b-otlhc3gtwx] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .forgot-card[b-otlhc3gtwx] {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .forgot-page-wrapper[b-otlhc3gtwx] {
        padding: 20px 16px;
    }

    .forgot-title[b-otlhc3gtwx] {
        font-size: 1.5rem;
    }
}

/* 💼 Executive Theme */
.theme-executive .auth-button[b-otlhc3gtwx] {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
.theme-executive .auth-button:hover:not(:disabled)[b-otlhc3gtwx] {
    background: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}
.theme-executive .back-link a[b-otlhc3gtwx] {
    color: #475569;
}
.theme-executive .back-link a:hover[b-otlhc3gtwx] {
    color: #334155;
}
/* /Pages/Identity/ForgotPasswordConfirmation.razor.rz.scp.css */
/* ============================================
   FORGOT PASSWORD CONFIRMATION STYLES
   ============================================ */

.confirmation-page-wrapper[b-aojt1j2wqg] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.confirmation-container[b-aojt1j2wqg] {
    max-width: 480px;
    width: 100%;
}

.confirmation-card[b-aojt1j2wqg] {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
    text-align: center;
    color-scheme: light;
}

.confirmation-logo[b-aojt1j2wqg] {
    margin-bottom: 24px;
}

.confirmation-logo img[b-aojt1j2wqg] {
    max-width: 120px;
    height: auto;
}

.success-icon[b-aojt1j2wqg] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
    animation: scaleIn-b-aojt1j2wqg 0.5s ease-out;
}

.success-icon svg[b-aojt1j2wqg] {
    width: 36px;
    height: 36px;
    stroke: white;
    stroke-width: 3;
    fill: none;
}

@keyframes scaleIn-b-aojt1j2wqg {
    from {
        transform: scale(0);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.confirmation-header[b-aojt1j2wqg] {
    margin-bottom: 24px;
}

.confirmation-title[b-aojt1j2wqg] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.confirmation-subtitle[b-aojt1j2wqg] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.steps-card[b-aojt1j2wqg] {
    background: #f0fdf4;
    border-left: 3px solid #10b981;
    border-radius: 8px;
    padding: 16px;
    margin: 24px 0;
    text-align: left;
}

.steps-title[b-aojt1j2wqg] {
    font-weight: 600;
    color: #065f46;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.steps-list[b-aojt1j2wqg] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.steps-list li[b-aojt1j2wqg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    color: #065f46;
    font-size: 0.85rem;
    line-height: 1.4;
}

.step-number[b-aojt1j2wqg] {
    background: #10b981;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.help-section[b-aojt1j2wqg] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    text-align: left;
}

.help-title[b-aojt1j2wqg] {
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

.help-text[b-aojt1j2wqg] {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.5;
    margin: 0;
}

/* Primary CTA — was referenced by the markup but never defined, so
   "Back to Sign In" rendered as a bare underlined link. Mirrors
   .btn-primary-action on RegisterConfirmation. */
.action-button[b-aojt1j2wqg] {
    width: 100%;
    padding: 14px 24px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}

.action-button:hover[b-aojt1j2wqg] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    color: white;
    text-decoration: none;
}

.secondary-button[b-aojt1j2wqg] {
    width: 100%;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
}

.secondary-button:hover[b-aojt1j2wqg] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #475569;
}

.support-text[b-aojt1j2wqg] {
    margin-top: 20px;
    color: #94a3b8;
    font-size: 0.8rem;
}

.support-text a[b-aojt1j2wqg] {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

.support-text a:hover[b-aojt1j2wqg] {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .confirmation-card[b-aojt1j2wqg] {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .confirmation-page-wrapper[b-aojt1j2wqg] {
        padding: 20px 16px;
    }

    .confirmation-title[b-aojt1j2wqg] {
        font-size: 1.5rem;
    }
}

/* 💼 Executive Theme */
.theme-executive .support-text a[b-aojt1j2wqg] {
    color: #475569;
}
.theme-executive .support-text a:hover[b-aojt1j2wqg] {
    color: #334155;
}
.theme-executive .action-button[b-aojt1j2wqg] {
    background: #1e293b;
}
.theme-executive .action-button:hover[b-aojt1j2wqg] {
    background: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}
/* /Pages/Identity/Login.razor.rz.scp.css */
/* ============================================
   LOGIN PAGE STYLES
   ============================================ */

.login-page-wrapper[b-2n0r53w8hr] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.login-container[b-2n0r53w8hr] {
    max-width: 480px;
    width: 100%;
}

.login-card[b-2n0r53w8hr] {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
    /* Force light-mode form control rendering regardless of OS prefers-color-scheme.
       Without this, Chromium auto-darkens <input>/<select> backgrounds inside the
       white card when the OS is in dark mode, creating the dark-slate-on-white
       clash visible in the Log In screenshot. */
    color-scheme: light;
}

.login-logo[b-2n0r53w8hr] {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo img[b-2n0r53w8hr] {
    max-width: 120px;
    height: auto;
}

.login-header[b-2n0r53w8hr] {
    text-align: center;
    margin-bottom: 32px;
}

.login-title[b-2n0r53w8hr] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.login-subtitle[b-2n0r53w8hr] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.form-group[b-2n0r53w8hr] {
    margin-bottom: 20px;
}

.form-label[b-2n0r53w8hr] {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

.form-control[b-2n0r53w8hr] {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    transition: all 0.2s ease;
    box-sizing: border-box;
    color: #1e293b;
    font-family: inherit;
}

.form-control[b-2n0r53w8hr]::placeholder {
    color: #9ca3af;
}

.form-control:focus[b-2n0r53w8hr] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: #ffffff;
}

.validation-message[b-2n0r53w8hr] {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 4px;
}

.checkbox-wrapper[b-2n0r53w8hr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.checkbox-wrapper input[type="checkbox"][b-2n0r53w8hr] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6366f1;
    border-radius: 4px;
}

.checkbox-wrapper label[b-2n0r53w8hr] {
    margin: 0;
    cursor: pointer;
    color: #4b5563;
    font-size: 0.9375rem;
}

.forgot-password[b-2n0r53w8hr] {
    text-align: center;
    margin-top: 24px;
}

.forgot-password a[b-2n0r53w8hr] {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.forgot-password a:hover[b-2n0r53w8hr] {
    color: #4f46e5;
    text-decoration: underline;
}

.register-cta[b-2n0r53w8hr] {
    text-align: center;
    margin-top: 32px;
    color: #1e3a5f;
    font-size: 0.95rem;
    font-weight: 500;
}

.register-cta a[b-2n0r53w8hr] {
    color: #7c3aed;
    text-decoration: none;
    font-weight: 700;
}

.register-cta a:hover[b-2n0r53w8hr] {
    text-decoration: underline;
    color: #6d28d9;
}

.auth-button[b-2n0r53w8hr] {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
    margin-top: 1rem;
    font-family: inherit;
}

.auth-button:hover:not(:disabled)[b-2n0r53w8hr] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
}

.auth-button:active:not(:disabled)[b-2n0r53w8hr] {
    transform: translateY(0);
}

.auth-button:disabled[b-2n0r53w8hr] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .login-card[b-2n0r53w8hr] {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .login-page-wrapper[b-2n0r53w8hr] {
        padding: 20px 16px;
    }

    .login-title[b-2n0r53w8hr] {
        font-size: 1.5rem;
    }
}

/* Dark themes — bottom CTAs sit on the page backdrop (outside the card),
   so the navy default #1e3a5f becomes near-invisible. Lift to a near-white
   with the accent kept for the link so the "Get started free" CTA still pops. */
.is-dark .register-cta[b-2n0r53w8hr] {
    color: rgba(255, 255, 255, 0.85);
}
.is-dark .register-cta a[b-2n0r53w8hr] {
    color: #c4b5fd; /* lighter violet — readable on dark purple space backdrop */
}
.is-dark .register-cta a:hover[b-2n0r53w8hr] {
    color: #ddd6fe;
}

/* 💼 Executive Theme */
.theme-executive .auth-button[b-2n0r53w8hr] {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
.theme-executive .auth-button:hover:not(:disabled)[b-2n0r53w8hr] {
    background: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}
.theme-executive .form-control:focus[b-2n0r53w8hr] {
    border-color: #475569;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1);
}
.theme-executive .checkbox-wrapper input[type="checkbox"][b-2n0r53w8hr] {
    accent-color: #475569;
}
.theme-executive .forgot-password a[b-2n0r53w8hr] {
    color: #475569;
}
.theme-executive .forgot-password a:hover[b-2n0r53w8hr] {
    color: #334155;
}
.theme-executive .register-cta a[b-2n0r53w8hr] {
    color: #334155;
}
.theme-executive .register-cta a:hover[b-2n0r53w8hr] {
    color: #1e293b;
}

/* AUD-V-3 (2026-06-09): .alert/.alert-danger were dead Bootstrap names —
   login error messages rendered as unstyled plain text. */
.alert[b-2n0r53w8hr] {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

.alert-danger[b-2n0r53w8hr] {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.is-dark .alert-danger[b-2n0r53w8hr] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}


/* ===================================================================
   SSO-1 (2026-08-04): "Continue with Google" button + divider.
   The Google mark is an INLINE SVG on purpose — an <img> from Google's
   CDN would need a new img-src entry in the Program.cs CSP, and the
   button would render blank in any environment where that edit got
   missed. Inline has no such failure mode.
   =================================================================== */
.auth-divider[b-2n0r53w8hr] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-divider[b-2n0r53w8hr]::before,
.auth-divider[b-2n0r53w8hr]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, 0.35);
}

.external-login-form[b-2n0r53w8hr] {
    margin: 0;
}

.google-button[b-2n0r53w8hr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    color: #3c4043;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.google-button:hover[b-2n0r53w8hr] {
    background: #f7f8f8;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}

.google-button:focus-visible[b-2n0r53w8hr] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.google-button svg[b-2n0r53w8hr] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Google's brand guidance keeps the mark on a light surface, so the button
   itself stays white in the dark themes — only the divider chrome adapts. */
.is-dark .auth-divider[b-2n0r53w8hr]::before,
.is-dark .auth-divider[b-2n0r53w8hr]::after {
    background: rgba(148, 163, 184, 0.25);
}
/* /Pages/Identity/LoginWith2fa.razor.rz.scp.css */
/* ============================================
   TWO-FACTOR AUTHENTICATION PAGE STYLES
   ============================================ */

.twofa-page-wrapper[b-4v7sfn3dbt] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.twofa-container[b-4v7sfn3dbt] {
    max-width: 420px;
    width: 100%;
}

.twofa-card[b-4v7sfn3dbt] {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px transparent;
}

.twofa-logo[b-4v7sfn3dbt] {
    text-align: center;
    margin-bottom: 32px;
}

.twofa-logo img[b-4v7sfn3dbt] {
    max-width: 120px;
    height: auto;
}

.twofa-header[b-4v7sfn3dbt] {
    text-align: center;
    margin-bottom: 32px;
}

.twofa-title[b-4v7sfn3dbt] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.twofa-subtitle[b-4v7sfn3dbt] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.shield-icon[b-4v7sfn3dbt] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.shield-icon svg[b-4v7sfn3dbt] {
    width: 32px;
    height: 32px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.form-group[b-4v7sfn3dbt] {
    margin-bottom: 20px;
}

.code-input[b-4v7sfn3dbt] {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5rem;
    padding: 16px;
}

.checkbox-wrapper[b-4v7sfn3dbt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.checkbox-wrapper input[type="checkbox"][b-4v7sfn3dbt] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6366f1;
    border-radius: 4px;
}

.checkbox-wrapper label[b-4v7sfn3dbt] {
    margin: 0;
    cursor: pointer;
    color: #4b5563;
    font-size: 0.9375rem;
}

.recovery-link[b-4v7sfn3dbt] {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.recovery-link p[b-4v7sfn3dbt] {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0 0 8px 0;
}

.recovery-link a[b-4v7sfn3dbt] {
    color: #6366f1;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.recovery-link a:hover[b-4v7sfn3dbt] {
    color: #4f46e5;
    text-decoration: underline;
}

.auth-button[b-4v7sfn3dbt] {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
    margin-top: 1rem;
    font-family: inherit;
}

.auth-button:hover:not(:disabled)[b-4v7sfn3dbt] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
}

.auth-button:active:not(:disabled)[b-4v7sfn3dbt] {
    transform: translateY(0);
}

.auth-button:disabled[b-4v7sfn3dbt] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .twofa-card[b-4v7sfn3dbt] {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .twofa-page-wrapper[b-4v7sfn3dbt] {
        padding: 20px 16px;
    }

    .twofa-title[b-4v7sfn3dbt] {
        font-size: 1.5rem;
    }

    .code-input[b-4v7sfn3dbt] {
        font-size: 1.25rem;
        letter-spacing: 0.3rem;
    }
}

/* 💼 Executive Theme */
.theme-executive .shield-icon[b-4v7sfn3dbt] {
    background: linear-gradient(135deg, #334155, #1e293b);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
}
.theme-executive .auth-button[b-4v7sfn3dbt] {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
.theme-executive .auth-button:hover:not(:disabled)[b-4v7sfn3dbt] {
    background: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}
.theme-executive .checkbox-wrapper input[type="checkbox"][b-4v7sfn3dbt] {
    accent-color: #475569;
}
.theme-executive .recovery-link a[b-4v7sfn3dbt] {
    color: #475569;
}
.theme-executive .recovery-link a:hover[b-4v7sfn3dbt] {
    color: #334155;
}
/* /Pages/Identity/Register.razor.rz.scp.css */
/* ============================================
   REGISTER PAGE STYLES
   ============================================ */

.register-page-wrapper[b-gq0wftuagc] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.register-container[b-gq0wftuagc] {
    max-width: 480px;
    width: 100%;
}

.register-card[b-gq0wftuagc] {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
    /* Force light-mode form control rendering regardless of OS prefers-color-scheme.
       Without this, Chromium auto-darkens <input>/<select> backgrounds inside the
       white card when the OS is in dark mode, creating the dark-slate-on-white
       clash visible in the Create Account screenshot. */
    color-scheme: light;
}

.register-logo[b-gq0wftuagc] {
    text-align: center;
    margin-bottom: 32px;
}

.register-logo img[b-gq0wftuagc] {
    max-width: 120px;
    height: auto;
}

.register-header[b-gq0wftuagc] {
    text-align: center;
    margin-bottom: 32px;
}

.register-title[b-gq0wftuagc] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.register-subtitle[b-gq0wftuagc] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

.form-group[b-gq0wftuagc] {
    margin-bottom: 16px;
}

.form-row[b-gq0wftuagc] {
    display: flex;
    gap: 12px;
}

.form-row .form-group[b-gq0wftuagc] {
    flex: 1;
}

.label-optional[b-gq0wftuagc] {
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.8125rem;
    margin-left: 4px;
}

.login-cta[b-gq0wftuagc] {
    text-align: center;
    margin-top: 32px;
    color: #1e3a5f;
    font-size: 0.95rem;
    font-weight: 500;
}

.login-cta a[b-gq0wftuagc] {
    color: #7c3aed;
    text-decoration: none;
    font-weight: 700;
}

.login-cta a:hover[b-gq0wftuagc] {
    text-decoration: underline;
    color: #6d28d9;
}

.benefits-list[b-gq0wftuagc] {
    background: #f0fdf4;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.benefit-item[b-gq0wftuagc] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #166534;
    font-size: 0.875rem;
    margin: 8px 0;
}

.benefit-item:first-child[b-gq0wftuagc] {
    margin-top: 0;
}

.benefit-item:last-child[b-gq0wftuagc] {
    margin-bottom: 0;
}

.benefit-icon[b-gq0wftuagc] {
    width: 16px;
    height: 16px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-icon[b-gq0wftuagc]::after {
    content: "";
    width: 6px;
    height: 3px;
    border-left: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(-45deg);
    margin-top: -1px;
}

.password-requirements[b-gq0wftuagc] {
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.password-requirements .req-title[b-gq0wftuagc] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    display: block;
    margin-bottom: 6px;
}

.req-list[b-gq0wftuagc] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.75rem;
    color: #64748b;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
}

.req-list .req[b-gq0wftuagc] {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

/* Default unchecked icon — hollow gray circle */
.req-icon[b-gq0wftuagc] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: transparent;
    position: relative;
    transition: all 0.15s ease;
}

/* Met state — solid green circle with check */
.req-met[b-gq0wftuagc] {
    color: #166534;
    font-weight: 500;
}

.req-met .req-icon[b-gq0wftuagc] {
    background: #10b981;
    border-color: #10b981;
}

.req-met .req-icon[b-gq0wftuagc]::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 6px;
    height: 3px;
    border-left: 1.5px solid white;
    border-bottom: 1.5px solid white;
    transform: rotate(-45deg);
}

/* ============================================
   PASSWORD VISIBILITY TOGGLE + STRENGTH METER
   ============================================ */

.password-field-wrap[b-gq0wftuagc] {
    position: relative;
}

.password-input[b-gq0wftuagc] {
    padding-right: 44px !important;
}

.password-toggle[b-gq0wftuagc] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.password-toggle:hover[b-gq0wftuagc] {
    color: #475569;
    background: rgba(148, 163, 184, 0.12);
}

.password-toggle:focus-visible[b-gq0wftuagc] {
    outline: 2px solid #6366f1;
    outline-offset: 1px;
}

.strength-meter[b-gq0wftuagc] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.strength-track[b-gq0wftuagc] {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.strength-fill[b-gq0wftuagc] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.2s ease, background 0.2s ease;
}

.strength-weak .strength-fill[b-gq0wftuagc]        { width: 20%;  background: #dc2626; }
.strength-fair .strength-fill[b-gq0wftuagc]        { width: 40%;  background: #f97316; }
.strength-good .strength-fill[b-gq0wftuagc]        { width: 60%;  background: #eab308; }
.strength-strong .strength-fill[b-gq0wftuagc]      { width: 80%;  background: #22c55e; }
.strength-very-strong .strength-fill[b-gq0wftuagc] { width: 100%; background: #16a34a; }

.strength-label[b-gq0wftuagc] {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 72px;
    text-align: right;
}

.strength-weak .strength-label[b-gq0wftuagc]        { color: #dc2626; }
.strength-fair .strength-label[b-gq0wftuagc]        { color: #f97316; }
.strength-good .strength-label[b-gq0wftuagc]        { color: #ca8a04; }
.strength-strong .strength-label[b-gq0wftuagc]      { color: #16a34a; }
.strength-very-strong .strength-label[b-gq0wftuagc] { color: #15803d; }

.match-indicator[b-gq0wftuagc] {
    display: block;
    margin-top: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.match-ok[b-gq0wftuagc] {
    color: #16a34a;
}

.match-bad[b-gq0wftuagc] {
    color: #94a3b8;
}

/* ============================================
   TERMS OF SERVICE / PRIVACY LINE
   ============================================ */

.tos-line[b-gq0wftuagc] {
    text-align: center;
    margin: 14px 0 0;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
}

.tos-line a[b-gq0wftuagc] {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

.tos-line a:hover[b-gq0wftuagc] {
    text-decoration: underline;
    color: #4f46e5;
}

.auth-button[b-gq0wftuagc] {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
    margin-top: 1rem;
    font-family: inherit;
}

.auth-button:hover:not(:disabled)[b-gq0wftuagc] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
}

.auth-button:active:not(:disabled)[b-gq0wftuagc] {
    transform: translateY(0);
}

.auth-button:disabled[b-gq0wftuagc] {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .register-card[b-gq0wftuagc] {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .register-page-wrapper[b-gq0wftuagc] {
        padding: 20px 16px;
    }

    .register-title[b-gq0wftuagc] {
        font-size: 1.5rem;
    }

    .form-row[b-gq0wftuagc] {
        flex-direction: column;
        gap: 0;
    }

    /* On narrow viewports, stack the requirements list back into one column. */
    .req-list[b-gq0wftuagc] {
        grid-template-columns: 1fr;
    }
}

/* Dark themes — "Already have an account? Sign in" sits on the page backdrop
   (outside the card), so the navy default #1e3a5f becomes invisible against
   space/winter/nature/ocean/mystic/tron. Lift to near-white for the label
   and a lighter violet for the link. */
.is-dark .login-cta[b-gq0wftuagc] {
    color: rgba(255, 255, 255, 0.85);
}
.is-dark .login-cta a[b-gq0wftuagc] {
    color: #c4b5fd;
}
.is-dark .login-cta a:hover[b-gq0wftuagc] {
    color: #ddd6fe;
}

/* 💼 Executive Theme */
.theme-executive .auth-button[b-gq0wftuagc] {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
.theme-executive .auth-button:hover:not(:disabled)[b-gq0wftuagc] {
    background: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}
.theme-executive .login-cta a[b-gq0wftuagc] {
    color: #334155;
}
.theme-executive .login-cta a:hover[b-gq0wftuagc] {
    color: #1e293b;
}

/* ===================================================================
   SSO-1 (2026-08-04): "Continue with Google" button + divider.
   The Google mark is an INLINE SVG on purpose — an <img> from Google's
   CDN would need a new img-src entry in the Program.cs CSP, and the
   button would render blank in any environment where that edit got
   missed. Inline has no such failure mode.
   =================================================================== */
.auth-divider[b-gq0wftuagc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.auth-divider[b-gq0wftuagc]::before,
.auth-divider[b-gq0wftuagc]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(148, 163, 184, 0.35);
}

.external-login-form[b-gq0wftuagc] {
    margin: 0;
}

.google-button[b-gq0wftuagc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dadce0;
    border-radius: 8px;
    background: #fff;
    color: #3c4043;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.google-button:hover[b-gq0wftuagc] {
    background: #f7f8f8;
    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}

.google-button:focus-visible[b-gq0wftuagc] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.google-button svg[b-gq0wftuagc] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Google's brand guidance keeps the mark on a light surface, so the button
   itself stays white in the dark themes — only the divider chrome adapts. */
.is-dark .auth-divider[b-gq0wftuagc]::before,
.is-dark .auth-divider[b-gq0wftuagc]::after {
    background: rgba(148, 163, 184, 0.25);
}
/* /Pages/Identity/RegisterConfirmation.razor.rz.scp.css */
/* ============================================
   REGISTER CONFIRMATION PAGE STYLES
   ============================================ */

.confirmation-page-wrapper[b-y3vdesx7fv] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.confirmation-container[b-y3vdesx7fv] {
    max-width: 480px;
    width: 100%;
}

.confirmation-card[b-y3vdesx7fv] {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px transparent;
    text-align: center;
}

.confirmation-logo[b-y3vdesx7fv] {
    text-align: center;
    margin-bottom: 32px;
}

.confirmation-logo img[b-y3vdesx7fv] {
    max-width: 120px;
    height: auto;
}

.success-icon[b-y3vdesx7fv] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.success-icon svg[b-y3vdesx7fv] {
    width: 40px;
    height: 40px;
    color: white;
}

.confirmation-title[b-y3vdesx7fv] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.confirmation-subtitle[b-y3vdesx7fv] {
    color: #64748b;
    font-size: 1rem;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.email-highlight[b-y3vdesx7fv] {
    font-weight: 600;
    color: #1e293b;
}

.info-box[b-y3vdesx7fv] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}

.info-box p[b-y3vdesx7fv] {
    margin: 0;
    color: #166534;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.info-box .icon[b-y3vdesx7fv] {
    flex-shrink: 0;
    margin-top: 2px;
}

.steps-section[b-y3vdesx7fv] {
    text-align: left;
    margin-bottom: 24px;
}

.steps-title[b-y3vdesx7fv] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-item[b-y3vdesx7fv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.step-item:last-child[b-y3vdesx7fv] {
    border-bottom: none;
}

.step-number[b-y3vdesx7fv] {
    width: 24px;
    height: 24px;
    background: #e0e7ff;
    color: #4f46e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.step-text[b-y3vdesx7fv] {
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.5;
}

.action-buttons[b-y3vdesx7fv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-primary-action[b-y3vdesx7fv] {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary-action:hover[b-y3vdesx7fv] {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    color: white;
    text-decoration: none;
}

.btn-secondary-action[b-y3vdesx7fv] {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-secondary-action:hover[b-y3vdesx7fv] {
    background: #e2e8f0;
    color: #1e293b;
    text-decoration: none;
}

.resend-text[b-y3vdesx7fv] {
    margin-top: 24px;
    color: #94a3b8;
    font-size: 0.875rem;
}

/* Resend control — referenced by the markup but never defined, so it fell
   back to the browser's default gray button. It finishes the sentence in
   .resend-text ("…check your spam folder, or"), so it is a text link, matching
   the "Didn't receive the code? Resend" link on LoginWithEmail2fa. */
.resend-text + .btn-resend[b-y3vdesx7fv] {
    margin-top: -8px;
}

.btn-resend[b-y3vdesx7fv] {
    background: none;
    border: none;
    padding: 4px 8px;
    color: #6366f1;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s ease;
}

.btn-resend:hover:not(:disabled)[b-y3vdesx7fv] {
    color: #4f46e5;
    text-decoration: underline;
}

.btn-resend:focus-visible[b-y3vdesx7fv] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.btn-resend:disabled[b-y3vdesx7fv] {
    color: #94a3b8;
    cursor: default;
}

@media (max-width: 480px) {
    .confirmation-card[b-y3vdesx7fv] {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .confirmation-page-wrapper[b-y3vdesx7fv] {
        padding: 20px 16px;
    }

    .confirmation-title[b-y3vdesx7fv] {
        font-size: 1.5rem;
    }

    .success-icon[b-y3vdesx7fv] {
        width: 64px;
        height: 64px;
    }

    .success-icon svg[b-y3vdesx7fv] {
        width: 32px;
        height: 32px;
    }
}

/* 💼 Executive Theme */
.theme-executive .step-number[b-y3vdesx7fv] {
    background: #e2e8f0;
    color: #334155;
}
.theme-executive .btn-primary-action[b-y3vdesx7fv] {
    background: #1e293b;
}
.theme-executive .btn-primary-action:hover[b-y3vdesx7fv] {
    background: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
}
.theme-executive .btn-resend[b-y3vdesx7fv] {
    color: #475569;
}
.theme-executive .btn-resend:hover:not(:disabled)[b-y3vdesx7fv] {
    color: #334155;
}
/* /Pages/Index.razor.rz.scp.css */
/* ============================================
   ANIMATIONS
   ============================================ */
.gradient-text.shimmer[b-ckilizxdhy] {
    background-size: 200% auto;
    animation: shimmer-b-ckilizxdhy 3s ease-in-out infinite;
}

@keyframes shimmer-b-ckilizxdhy {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

@keyframes fade-up-b-ckilizxdhy {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes egg-pulse-b-ckilizxdhy {
    0%, 100% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.3), 0 0 60px rgba(251, 191, 36, 0.1); }
    50% { box-shadow: 0 0 50px rgba(251, 191, 36, 0.5), 0 0 100px rgba(251, 191, 36, 0.2); }
}

@keyframes glow-ring-pulse-b-ckilizxdhy {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.15); opacity: 0.15; }
}

@keyframes particle-float-b-ckilizxdhy {
    0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-80px) translateX(var(--drift, 10px)) scale(0); opacity: 0; }
}

@keyframes silhouette-shimmer-b-ckilizxdhy {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

@keyframes final-glow-pulse-b-ckilizxdhy {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.15); }
    50% { box-shadow: 0 0 40px rgba(var(--theme-primary-rgb), 0.3), 0 0 80px rgba(251, 191, 36, 0.1); }
}

@keyframes cta-egg-breathe-b-ckilizxdhy {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================
   SHARED SECTION STYLES
   ============================================ */
.section-title[b-ckilizxdhy] {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 12px;
}

.section-sub[b-ckilizxdhy] {
    text-align: center;
    font-size: 1.05rem;
    color: var(--theme-text-secondary, #64748b);
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* ============================================
   HERO: Cinematic Spark reveal
   ============================================ */
.hero-companion[b-ckilizxdhy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    padding: 24px 24px 16px;
    max-width: 960px;
    margin: 0 auto;
    animation: fade-up-b-ckilizxdhy 0.8s ease-out;
}

.hero-text[b-ckilizxdhy] {
    flex: 1;
    max-width: 520px;
}

.hero-headline[b-ckilizxdhy] {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.hero-sub[b-ckilizxdhy] {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 32px;
}

.hero-cta-row[b-ckilizxdhy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.hero-cta-row .cta-primary[b-ckilizxdhy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 36px;
    background: var(--theme-cta-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), 0.3);
}

.hero-cta-row .cta-primary:hover[b-ckilizxdhy] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--theme-primary-rgb), 0.4);
    color: white;
}

.hero-cta-row .cta-note[b-ckilizxdhy] {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 0;
}

.hero-tagline[b-ckilizxdhy] {
    font-size: 0.9rem;
    font-style: italic;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 8px 0 0;
    opacity: 0.8;
}

/* Avatar showcase — mystery egg */
.hero-avatar-showcase[b-ckilizxdhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.egg-mystery-wrapper[b-ckilizxdhy] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
}

.egg-shadow-silhouette[b-ckilizxdhy] {
    position: absolute;
    width: 120px;
    height: 160px;
    background: radial-gradient(ellipse at center, rgba(var(--theme-primary-rgb), 0.08) 0%, transparent 70%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    top: -20px;
    filter: blur(16px);
    opacity: 0.5;
    animation: silhouette-shimmer-b-ckilizxdhy 4s ease-in-out infinite;
}

.egg-glow-ring[b-ckilizxdhy] {
    position: absolute;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.15);
    animation: glow-ring-pulse-b-ckilizxdhy 3s ease-in-out infinite;
}

.avatar-demo[b-ckilizxdhy] {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--theme-primary-rgb), 0.08);
    border-radius: 50%;
    border: 2px solid rgba(251, 191, 36, 0.25);
    transition: all 0.5s ease;
    position: relative;
    z-index: 1;
}

.avatar-demo.egg-pulse[b-ckilizxdhy] {
    animation: egg-pulse-b-ckilizxdhy 3s ease-in-out infinite;
}

.avatar-demo[b-ckilizxdhy]  .companion-avatar {
    --avatar-size: 80px;
}

.egg-particles[b-ckilizxdhy] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.egg-particles .particle[b-ckilizxdhy] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(251, 191, 36, 0.7);
    border-radius: 50%;
    animation: particle-float-b-ckilizxdhy 3s ease-out infinite;
}

.egg-particles .particle:nth-child(1)[b-ckilizxdhy] { left: 30%; bottom: 30%; animation-delay: 0s; --drift: -15px; }
.egg-particles .particle:nth-child(2)[b-ckilizxdhy] { left: 55%; bottom: 25%; animation-delay: 0.8s; --drift: 10px; }
.egg-particles .particle:nth-child(3)[b-ckilizxdhy] { left: 70%; bottom: 35%; animation-delay: 1.6s; --drift: 20px; }
.egg-particles .particle:nth-child(4)[b-ckilizxdhy] { left: 40%; bottom: 40%; animation-delay: 2.2s; --drift: -8px; }
.egg-particles .particle:nth-child(5)[b-ckilizxdhy] { left: 60%; bottom: 20%; animation-delay: 1.2s; --drift: 5px; }

.avatar-stage-label[b-ckilizxdhy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(var(--theme-primary-rgb), 0.06);
    border-radius: 20px;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.12);
    transition: all 0.5s ease;
}

.stage-emoji[b-ckilizxdhy] {
    font-size: 1.2rem;
}

.stage-name[b-ckilizxdhy] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
}

/* ============================================
   TEASE: Mysterious locked evolution
   ============================================ */
.tease-section[b-ckilizxdhy] {
    padding: 64px 24px;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(24px);
    transition: all 0.6s ease 0.2s;
}

.tease-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.tease-grid[b-ckilizxdhy] {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.tease-card[b-ckilizxdhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 24px 20px;
    border-radius: 20px;
    min-width: 140px;
    max-width: 160px;
    text-align: center;
    transition: all 0.3s ease;
}

.tease-card.revealed[b-ckilizxdhy] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
}

.tease-card.locked[b-ckilizxdhy] {
    background: rgba(0, 0, 0, 0.03);
    border: 1px dashed rgba(0, 0, 0, 0.1);
}

.tease-card.locked:hover[b-ckilizxdhy] {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(var(--theme-primary-rgb), 0.2);
}

.tease-avatar[b-ckilizxdhy] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tease-avatar[b-ckilizxdhy]  .companion-avatar {
    --avatar-size: 48px;
}

.tease-silhouette[b-ckilizxdhy] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.12));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tease-silhouette.shimmer-silhouette[b-ckilizxdhy] {
    animation: silhouette-shimmer-b-ckilizxdhy 3s ease-in-out infinite;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.08), rgba(var(--theme-primary-rgb), 0.15));
}

.tease-card.final-mystery .tease-silhouette.final-glow[b-ckilizxdhy] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.1), rgba(251, 191, 36, 0.15));
    animation: final-glow-pulse-b-ckilizxdhy 3s ease-in-out infinite;
}

.lock-icon[b-ckilizxdhy] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--theme-text-secondary, #94a3b8);
    opacity: 0.6;
}

.tease-label[b-ckilizxdhy] {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.tease-label.locked-text[b-ckilizxdhy] {
    color: var(--theme-text-secondary, #94a3b8);
    letter-spacing: 2px;
}

.tease-hint[b-ckilizxdhy] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #94a3b8);
    font-style: italic;
}

/* ============================================
   ABILITIES: Tool Cards
   ============================================ */
.abilities-section[b-ckilizxdhy] {
    padding: 64px 24px;
    max-width: 900px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease 0.4s;
}

.abilities-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.abilities-grid[b-ckilizxdhy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.ability-card[b-ckilizxdhy] {
    background: var(--theme-surface, #ffffff);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 28px 24px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    border: 1px solid var(--theme-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.ability-card[b-ckilizxdhy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--theme-gradient-text, linear-gradient(135deg, #7c3aed, #06b6d4));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.ability-card:hover[b-ckilizxdhy] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--theme-shadow-color, rgba(0, 0, 0, 0.12));
}

.ability-card:hover[b-ckilizxdhy]::before {
    transform: scaleX(1);
}

.ability-card.featured[b-ckilizxdhy] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.1), rgba(var(--theme-accent-rgb), 0.1));
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.ability-card.featured[b-ckilizxdhy]::before {
    transform: scaleX(1);
}

.ability-icon[b-ckilizxdhy] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
}

.ability-icon .material-symbols-rounded[b-ckilizxdhy] {
    font-size: 24px;
    color: white;
}

.ability-card h3[b-ckilizxdhy] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 8px;
}

.ability-card p[b-ckilizxdhy] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
    margin: 0 0 16px;
    flex: 1;
}

.ability-cta[b-ckilizxdhy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    transition: all 0.2s ease;
}

.ability-card:hover .ability-cta[b-ckilizxdhy] {
    transform: translateX(4px);
}

.abilities-footer[b-ckilizxdhy] {
    text-align: center;
    margin-top: 28px;
}

.browse-all-link[b-ckilizxdhy] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    text-decoration: none;
    transition: all 0.2s ease;
}

.browse-all-link:hover[b-ckilizxdhy] {
    text-decoration: underline;
}

/* Search section wrapper */
.search-section[b-ckilizxdhy] {
    padding: 32px 24px;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

.search-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   TRUST BAR - Social proof metrics
   ============================================ */
.trust-bar[b-ckilizxdhy] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 24px 32px;
    animation: fade-up-b-ckilizxdhy 0.6s ease-out 0.2s both;
}

.trust-items[b-ckilizxdhy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 16px 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    backdrop-filter: blur(8px);
}

.trust-item[b-ckilizxdhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.trust-value[b-ckilizxdhy] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #f1f5f9);
    letter-spacing: -0.01em;
}

.trust-label[b-ckilizxdhy] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.trust-divider[b-ckilizxdhy] {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

/* Light theme adjustments */
:is(.theme-executive, .theme-cloud) .trust-items[b-ckilizxdhy] {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

:is(.theme-executive, .theme-cloud) .trust-value[b-ckilizxdhy] {
    color: #1e293b;
}

:is(.theme-executive, .theme-cloud) .trust-label[b-ckilizxdhy] {
    color: #64748b;
}

:is(.theme-executive, .theme-cloud) .trust-divider[b-ckilizxdhy] {
    background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
    /* PUB-MOB-2 (2026-05-27): at iPhone-Pro widths the 3-column row pinches
       each column to ~120px wide, which orphans "First" off "Memory-" and
       "REQUIRED" off "NO CREDIT CARD" on the second and third columns.
       Switching to a vertical stack at ≤480px gives every item the full
       container width to flow into. Vertical dividers don't read as
       structure in a column layout, so hide them (the spacing between
       items carries enough visual separation on its own). */
    .trust-items[b-ckilizxdhy] {
        flex-direction: column;
        gap: 10px;
        padding: 16px 18px;
    }

    .trust-item[b-ckilizxdhy] {
        flex-direction: row;
        align-items: baseline;
        justify-content: center;
        gap: 8px;
        text-align: center;
    }

    .trust-value[b-ckilizxdhy] {
        font-size: 0.95rem;
    }

    .trust-label[b-ckilizxdhy] {
        font-size: 0.7rem;
    }

    .trust-divider[b-ckilizxdhy] {
        display: none;
    }
}

/* ============================================
   DEMO VIDEO SHOWCASE
   Positioned right after the hero for immediate impact
   ============================================ */
.demo-video-section[b-ckilizxdhy] {
    /* `width: 100%` is intentional — without it the section shrinks to
       intrinsic content inside the flex-column `.public-main` (align-items:
       center doesn't stretch), and because `.demo-video-wrapper` below uses
       `width: 100%` + `aspect-ratio: 16/9`, the box ended up sized
       differently between Personal and Professional mode heroes. Pinning to
       `width: 100%` makes the section always fill its parent up to the
       max-width cap, giving both modes an identical video frame. */
    width: 100%;
    padding: 0 24px 48px;
    max-width: 880px;
    margin: 0 auto;
    animation: fade-up-b-ckilizxdhy 0.8s ease-out 0.3s both;
    box-sizing: border-box;
}

.demo-video-container[b-ckilizxdhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Outer glow wrapper — animated border shimmer */
.demo-video-wrapper[b-ckilizxdhy] {
    position: relative;
    width: 100%;
    border-radius: 16px;
    aspect-ratio: 16 / 9;
    /* Animated gradient border via background trick */
    padding: 2px;
    background: linear-gradient(
        135deg,
        rgba(var(--theme-primary-rgb, 124, 58, 237), 0.5),
        rgba(99, 102, 241, 0.3),
        rgba(6, 182, 212, 0.4),
        rgba(var(--theme-primary-rgb, 124, 58, 237), 0.5)
    );
    background-size: 300% 300%;
    animation: demo-border-shimmer-b-ckilizxdhy 6s ease-in-out infinite;
    box-shadow:
        0 8px 40px rgba(var(--theme-primary-rgb, 124, 58, 237), 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

@keyframes demo-border-shimmer-b-ckilizxdhy {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Inner container clips the video/placeholder */
.demo-video-inner[b-ckilizxdhy] {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

/* Fake app-window titlebar for premium feel */
.demo-window-chrome[b-ckilizxdhy] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 2;
}

.demo-window-dot[b-ckilizxdhy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.demo-window-dot:first-child[b-ckilizxdhy] { background: #ef4444; opacity: 0.7; }
.demo-window-dot:nth-child(2)[b-ckilizxdhy] { background: #f59e0b; opacity: 0.7; }
.demo-window-dot:nth-child(3)[b-ckilizxdhy] { background: #22c55e; opacity: 0.7; }

.demo-window-title[b-ckilizxdhy] {
    margin-left: 8px;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.02em;
}

/* PUB-V-3 (2026-05-08): grid pattern removed.
   The original intent was a "when no poster image loads" scaffold — a faint
   1px graph-paper texture on slate so an empty video frame had visual weight.
   Two problems with the implementation:
     1. It was NEVER gated on the no-poster condition. The pseudo-element
        always rendered with z-index: 1, sitting ABOVE the <video>, so even
        the playing demo had the grid overlaid on top of every frame.
     2. With the master-file swap (and the Space-theme aesthetic of the
        recording itself), the grid pattern competed with the theme's own
        ambient effects (stars, glow, twinkles) and read as a wireframe
        watermark rather than a backdrop.
   The poster image we generated covers the no-poster case — there's nothing
   for this rule to do that's still useful. Removed entirely; if a future
   demo loads with no poster, the .demo-video-inner gradient background fills
   the gap on its own. */

.demo-video[b-ckilizxdhy] {
    width: 100%;
    height: 100%;
    /* 2026-05-07: object-fit changed from `cover` to `contain` so non-16:9
       recordings (the new maya-in-the-night.webm is wider than 16:9) show the
       entire frame instead of having UI clipped at the edges. The original
       demo-full-ux.webm was authored at exactly 16:9 so cover and contain
       looked identical; with the new wider recording, cover was hiding the
       right side of the chat panel. The leftover space when contain
       letterboxes shows .demo-video-inner's slate-gradient background, which
       reads as an intentional "device frame" rather than dead space. If a
       future recording matches the 16:9 frame exactly, this stays correct
       (contain == cover when source matches container). */
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 0;
}

/* Play button overlay */
.demo-play-overlay[b-ckilizxdhy] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 3;
}

.demo-play-overlay:hover .demo-play-btn[b-ckilizxdhy] {
    transform: scale(1.1);
    box-shadow:
        0 0 0 8px rgba(255, 255, 255, 0.1),
        0 0 48px rgba(var(--theme-primary-rgb, 124, 58, 237), 0.4);
}

.demo-play-btn[b-ckilizxdhy] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.25),
        0 0 0 4px rgba(255, 255, 255, 0.1);
}

.demo-play-btn svg[b-ckilizxdhy] {
    margin-left: 3px;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
}

.demo-play-label[b-ckilizxdhy] {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
}

/* HERO-EXPLAIN-1 (2026-09-05): the "Sound on" pill. Sits inside the video
   frame, bottom-right, above the burned-in captions' safe area. Same white
   pill language as .demo-play-btn so it reads as part of the player. */
.demo-sound-pill[b-ckilizxdhy] {
    position: absolute;
    right: 14px;
    top: 44px; /* clear the 32px fake window chrome */
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.demo-sound-pill:hover[b-ckilizxdhy] {
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.demo-sound-pill[aria-pressed="true"][b-ckilizxdhy] {
    background: var(--theme-primary, #7c3aed);
    color: #fff;
}

.demo-caption[b-ckilizxdhy] {
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #64748b);
    text-align: center;
    margin: 0;
    max-width: 540px;
    line-height: 1.5;
}

/* Dark theme overrides */
.is-dark .demo-video-wrapper[b-ckilizxdhy] {
    box-shadow:
        0 8px 40px rgba(var(--theme-primary-rgb, 124, 58, 237), 0.2),
        0 0 1px rgba(255, 255, 255, 0.1);
}

/* Mobile */
@media (max-width: 768px) {
    .demo-video-section[b-ckilizxdhy] {
        padding: 0 16px 32px;
    }

    .demo-video-wrapper[b-ckilizxdhy] {
        border-radius: 12px;
    }

    .demo-video-inner[b-ckilizxdhy] {
        border-radius: 10px;
    }

    .demo-window-chrome[b-ckilizxdhy] {
        height: 24px;
        padding: 0 8px;
    }

    .demo-window-dot[b-ckilizxdhy] {
        width: 6px;
        height: 6px;
    }

    .demo-play-btn[b-ckilizxdhy] {
        width: 56px;
        height: 56px;
    }

    .demo-play-btn svg[b-ckilizxdhy] {
        width: 24px;
        height: 24px;
    }
}

/* Skeleton loading cards */
.skeleton-card[b-ckilizxdhy] {
    pointer-events: none;
}

.skeleton-icon[b-ckilizxdhy] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-ckilizxdhy 1.5s ease-in-out infinite;
}

.skeleton-line[b-ckilizxdhy] {
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-ckilizxdhy 1.5s ease-in-out infinite;
}

.skeleton-title[b-ckilizxdhy] { width: 60%; height: 18px; margin-bottom: 10px; }
.skeleton-text[b-ckilizxdhy] { width: 100%; height: 12px; margin-bottom: 8px; }
.skeleton-text.short[b-ckilizxdhy] { width: 75%; margin-bottom: 16px; }
.skeleton-link[b-ckilizxdhy] { width: 30%; height: 12px; }

@keyframes skeleton-pulse-b-ckilizxdhy {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) :is(.skeleton-icon, .skeleton-line)[b-ckilizxdhy] {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-ckilizxdhy 1.5s ease-in-out infinite;
}

/* ============================================
   MEMORY PROOF: What "AI memory" actually means

   PUB-CC-2 (2026-05): without/with contrast block. Two cards
   side-by-side; theme-token-driven so the without/with reads
   correctly across all 8 themes via danger/success tints.
   The without column is muted/red-tinted, the with column is
   accent-tinted, so the contrast is visual as well as textual.
   ============================================ */
.memory-proof-section[b-ckilizxdhy] {
    padding: 56px 24px;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

.memory-proof-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.memory-proof-grid[b-ckilizxdhy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.memory-proof-card[b-ckilizxdhy] {
    padding: 28px 28px 32px;
    border-radius: 18px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #ffffff);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.memory-proof-card:hover[b-ckilizxdhy] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px var(--theme-shadow-color, rgba(0, 0, 0, 0.08));
}

.memory-proof-without[b-ckilizxdhy] {
    background: color-mix(in srgb, var(--theme-danger, #ef4444) 6%, var(--theme-surface, #ffffff));
    border-color: color-mix(in srgb, var(--theme-danger, #ef4444) 25%, var(--theme-border, #e2e8f0));
}

.memory-proof-with[b-ckilizxdhy] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 6%, var(--theme-surface, #ffffff));
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 28%, var(--theme-border, #e2e8f0));
}

.memory-proof-card-header[b-ckilizxdhy] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.memory-proof-card-header h3[b-ckilizxdhy] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.memory-proof-icon[b-ckilizxdhy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.memory-proof-without .memory-proof-icon[b-ckilizxdhy] {
    background: var(--theme-danger, #ef4444);
    color: var(--theme-btn-text, #ffffff);
}

.memory-proof-with .memory-proof-icon[b-ckilizxdhy] {
    background: var(--theme-primary, #6366f1);
    color: var(--theme-btn-text, #ffffff);
}

.memory-proof-list[b-ckilizxdhy] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.memory-proof-list li[b-ckilizxdhy] {
    padding: 8px 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--theme-text-primary, #1e293b);
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border, #e2e8f0) 60%, transparent);
}

.memory-proof-list li:last-child[b-ckilizxdhy] {
    border-bottom: none;
}

.memory-proof-without .memory-proof-list li[b-ckilizxdhy] {
    color: var(--theme-text-secondary, #64748b);
}

@media (max-width: 768px) {
    .memory-proof-grid[b-ckilizxdhy] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .memory-proof-section[b-ckilizxdhy] {
        padding: 36px 20px;
    }
}

/* ============================================
   ALIGNMENT LOOP: Direction in. Alignment out.
   PUB-CC-8 (2026-05-09). Five-step horizontal flow that visualizes the
   closed loop NTS closes (Goals → Plan → Action → Audit → Alignment).
   On desktop the steps render as a 5-column row with a subtle connecting
   gradient running between them so the eye traces the loop. On tablet
   they wrap to 3+2; on mobile they stack vertically.
   The numbered badge intensifies from theme-secondary tint at step 1 to
   full theme-primary at step 5 so the visual reads "momentum compounding"
   rather than five flat boxes. Each step's color treatment is a soft
   tint of the same primary so the band reads as one connected ecosystem,
   not five disjoint cards.
   The currency band is a softer footer below the steps — names Personal
   Currency without giving it the same visual weight as the loop steps.
   ============================================ */
.alignment-loop-section[b-ckilizxdhy] {
    padding: 56px 24px;
    max-width: 1200px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

.alignment-loop-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.alignment-loop-grid[b-ckilizxdhy] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 36px;
    list-style: none;
    padding: 0;
    counter-reset: alignment-step;
    /* Connecting gradient line: a subtle horizontal track behind the cards
       suggests the loop's continuity. Drawn on the ::before of the grid so
       it sits behind every step card without per-card complexity. */
    position: relative;
}

.alignment-loop-grid[b-ckilizxdhy]::before {
    content: "";
    position: absolute;
    top: 36px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--theme-primary, #6366f1) 15%, transparent) 0%,
        color-mix(in srgb, var(--theme-primary, #6366f1) 50%, transparent) 100%
    );
    z-index: 0;
    pointer-events: none;
}

.alignment-loop-step[b-ckilizxdhy] {
    position: relative;
    z-index: 1;
    padding: 22px 20px 24px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 18%, var(--theme-border, #e2e8f0));
    background: var(--theme-surface, #ffffff);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.alignment-loop-step:hover[b-ckilizxdhy] {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px var(--theme-shadow-color, rgba(99, 102, 241, 0.10));
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 38%, var(--theme-border, #e2e8f0));
}

/* Numbered badge — circular, sits at the top of each card and overlaps
   the connecting line so it reads as a "stop" along the loop. The
   intensity ramps from step 1 (lightest) to step 5 (full primary) so
   the eye reads forward momentum across the row. */
.alignment-step-num[b-ckilizxdhy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-btn-text, #ffffff);
    background: var(--theme-primary, #6366f1);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--theme-primary, #6366f1) 30%, transparent);
}

.alignment-step-direction .alignment-step-num[b-ckilizxdhy] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 55%, var(--theme-surface, #ffffff));
}

.alignment-step-plan .alignment-step-num[b-ckilizxdhy] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 70%, var(--theme-surface, #ffffff));
}

.alignment-step-action .alignment-step-num[b-ckilizxdhy] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 82%, var(--theme-surface, #ffffff));
}

.alignment-step-audit .alignment-step-num[b-ckilizxdhy] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 92%, var(--theme-surface, #ffffff));
}

.alignment-step-alignment .alignment-step-num[b-ckilizxdhy] {
    background: var(--theme-primary, #6366f1);
}

.alignment-step-title[b-ckilizxdhy] {
    margin: 4px 0 2px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    letter-spacing: -0.01em;
}

.alignment-step-desc[b-ckilizxdhy] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--theme-text-secondary, #64748b);
}

/* Currency band — sits below the loop as a soft footer that names
   Personal Currency. Lower visual weight than the steps so it reads as
   "and one more thing" flavor rather than competing with the loop. */
.alignment-currency-band[b-ckilizxdhy] {
    margin: 32px auto 0;
    max-width: 760px;
    padding: 16px 24px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 14%, var(--theme-border, #e2e8f0));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 4%, var(--theme-surface, #ffffff));
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--theme-text-secondary, #64748b);
    text-align: center;
    font-style: italic;
}

/* Tablet: wrap to 3+2 layout. The connecting line stops working here so
   we hide it (visual cohesion comes from the consistent card treatment
   instead). */
@media (max-width: 1024px) {
    .alignment-loop-grid[b-ckilizxdhy] {
        grid-template-columns: repeat(3, 1fr);
    }

    .alignment-loop-grid[b-ckilizxdhy]::before {
        display: none;
    }
}

/* Mobile: badge inline with title (top row), description + tools span full
   card width below. PUB-MOB-1 (2026-05-27): pre-fix this used
   `flex-direction: row` which made every text child a column in a
   horizontal flexbox — descriptions wrapped to ~1 word per line because
   each got only ~80px of width. CSS Grid here gives the badge a fixed-
   width auto column next to the title, then forces description and
   tools to grid-column 1 / -1 so they get the full card width to flow
   into. The original "save vertical space" intent is preserved (badge
   doesn't take its own row) without breaking readability. */
@media (max-width: 640px) {
    .alignment-loop-section[b-ckilizxdhy] {
        padding: 36px 18px;
    }

    .alignment-loop-grid[b-ckilizxdhy] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 24px;
    }

    .alignment-loop-step[b-ckilizxdhy] {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 14px;
        row-gap: 6px;
        text-align: left;
        padding: 18px;
        align-items: start;
    }

    .alignment-step-num[b-ckilizxdhy] {
        width: 34px;
        height: 34px;
        font-size: 0.95rem;
        flex-shrink: 0;
        /* Implicitly grid-row 1, col 1 — top-left, inline with title */
    }

    .alignment-step-title[b-ckilizxdhy] {
        font-size: 1rem;
        margin: 0;
        align-self: center;
        /* Implicitly grid-row 1, col 2 — to the right of the badge */
    }

    .alignment-step-desc[b-ckilizxdhy],
    .alignment-step-tools[b-ckilizxdhy] {
        grid-column: 1 / -1; /* span both columns under the badge+title row */
        margin: 0;
    }

    .alignment-currency-band[b-ckilizxdhy] {
        margin-top: 24px;
        padding: 14px 18px;
        font-size: 0.9rem;
    }
}

/* ============================================
   ALIGNMENT-STEP TOOLS: small concrete tool-cluster sub-line
   PUB-CC-19 (2026-05-27). Names the NTS tools that serve each step.
   Visual treatment is intentionally light — smaller font, tinted color,
   no chrome — so it reads as a discoverability hint, not a competing
   beat with the step's description.
   ============================================ */
.alignment-step-tools[b-ckilizxdhy] {
    margin: 12px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--theme-primary, #6366f1) 72%, var(--theme-text-secondary, #64748b));
    line-height: 1.4;
}

@media (max-width: 640px) {
    .alignment-step-tools[b-ckilizxdhy] {
        font-size: 0.72rem;
        margin-top: 8px;
    }
}

/* ============================================
   CURRENCY SECTION: And every aligned hour compounds.
   PUB-CC-20 (2026-05-27). The currency band was previously an italic
   footnote at the bottom of the alignment loop section. It's the
   only mention of Personal Currency (the user-named progression unit
   — the platform's deepest personalization commitment) so it earns
   its own micro-section now. Three example chips give the abstract
   idea a visual handle. Mode-neutral.
   ============================================ */
.currency-section[b-ckilizxdhy] {
    padding: 32px 24px 48px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.currency-section-title[b-ckilizxdhy] {
    margin: 0 0 10px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--theme-text-primary, #1a202c);
}

.currency-section-band[b-ckilizxdhy] {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--theme-text-secondary, #64748b);
    font-style: italic;
}

.currency-chip-row[b-ckilizxdhy] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.currency-chip[b-ckilizxdhy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, var(--theme-surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 18%, var(--theme-border, #e2e8f0));
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1a202c);
}

@media (max-width: 640px) {
    .currency-section[b-ckilizxdhy] {
        padding: 24px 18px 36px;
    }

    .currency-section-title[b-ckilizxdhy] {
        font-size: 1.15rem;
    }

    .currency-chip[b-ckilizxdhy] {
        font-size: 0.78rem;
        padding: 6px 12px;
    }
}

/* ============================================
   TIER STRIP: single-line tier-transparency above final CTA.
   PUB-CC-22 (2026-05-27). One-sentence answer to the visitor's silent
   "what happens after free?" question at the moment of conversion
   decision, with a link to /pricing for the full breakdown. Not a
   pricing section — no cards, no $$, no comparisons — just a quiet
   reassurance that the free-forever claim is honest and the
   paid-tier path exists.
   ============================================ */
.tier-strip-section[b-ckilizxdhy] {
    padding: 16px 24px 32px;
    text-align: center;
}

.tier-strip-text[b-ckilizxdhy] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--theme-text-secondary, #64748b);
}

.tier-strip-link[b-ckilizxdhy] {
    margin-left: 8px;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    text-decoration: none;
}

.tier-strip-link:hover[b-ckilizxdhy] {
    text-decoration: underline;
}

/* SITE-CO-1 (2026-09-11): the company strip. Same reveal pattern as its neighbours;
   quiet on purpose - a footnote to the product argument, not a second hero. */
.company-strip-section[b-ckilizxdhy] {
    padding: 8px 24px 40px;
    max-width: 880px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.2s;
}
.company-strip-section.visible[b-ckilizxdhy] { opacity: 1; transform: translateY(0); }
.company-strip[b-ckilizxdhy] {
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 22px 26px;
    background: var(--theme-surface, #fff);
    text-align: left;
}
.company-strip-title[b-ckilizxdhy] {
    margin: 0 0 6px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--theme-text-primary, #1a202c);
}
.company-strip-text[b-ckilizxdhy] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--theme-text-secondary, #64748b);
}
.company-strip-link[b-ckilizxdhy] {
    margin-left: 6px;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.company-strip-link:hover[b-ckilizxdhy] { text-decoration: underline; }

/* ============================================
   AVATAR STAGE LINK: chip becomes a peek-link in both modes.
   PUB-CC-24 (2026-05-27). Was a static div that read as orphan
   decoration floating next to the orb. As an <a> the chip gains a
   real action (peek the Companion landing) without competing with
   the primary Get Started CTA. Hover lift mirrors the standard
   button/link affordances elsewhere on the page.
   ============================================ */
.avatar-stage-link[b-ckilizxdhy] {
    text-decoration: none;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.avatar-stage-link:hover[b-ckilizxdhy] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
}

.avatar-stage-link:focus-visible[b-ckilizxdhy] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}

/* ============================================
   YOUR DIRECTION: Protagonist Invitation
   PUB-CC-13 (2026-05-09). Contemplative beat between the alignment loop
   (structural) and the companion-evolution tease (emotional). Visual
   treatment is intentionally quiet — centered, spacious, no chrome —
   so it reads as a moment to project oneself into the frame rather
   than another product feature pitch. Generous max-width on the maybes
   so each line breathes; the closer line is centered with theme-primary
   tint as the only color cue, signaling "this is the part where we tell
   you what we do, after we've handed you the mic."
   ============================================ */
.your-direction-section[b-ckilizxdhy] {
    padding: 64px 24px 56px;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

.your-direction-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.your-direction-title[b-ckilizxdhy] {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 28px;
    letter-spacing: -0.015em;
}

/* The "Maybe it's..." motifs — three reflective lines, each given its own
   visual line so the rhythm reads. Generous line-height for breathability;
   muted color so they read as the visitor's own thoughts being mirrored
   back, not as marketing copy shouting at them. */
.your-direction-maybes[b-ckilizxdhy] {
    list-style: none;
    padding: 0;
    margin: 0 auto 32px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.your-direction-maybes li[b-ckilizxdhy] {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--theme-text-secondary, #64748b);
    font-style: italic;
}

/* Closer line — the bridge back to the alignment loop's promise. Slightly
   stronger color than the maybes so the visitor's eye lands here as the
   "what NTS does" moment after the "what you might want" moments above. */
.your-direction-closer[b-ckilizxdhy] {
    margin: 0 auto;
    max-width: 640px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--theme-text-primary, #1e293b);
    font-weight: 500;
}

@media (max-width: 640px) {
    .your-direction-section[b-ckilizxdhy] {
        padding: 44px 20px 40px;
    }

    .your-direction-title[b-ckilizxdhy] {
        margin-bottom: 22px;
    }

    .your-direction-maybes[b-ckilizxdhy] {
        gap: 12px;
        margin-bottom: 24px;
    }

    .your-direction-maybes li[b-ckilizxdhy],
    .your-direction-closer[b-ckilizxdhy] {
        font-size: 1rem;
    }
}

/* ============================================
   OBJECTIONS: Trust Builder
   ============================================ */
.objections-section[b-ckilizxdhy] {
    /* PUB-CC-5 (2026-05): widened max-width from 800px to 1100px to fit
       5 cards instead of 3. Grid now uses auto-fit so 5 cards land as
       3+2 on desktop and stack cleanly on mobile. */
    padding: 48px 24px;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

.objections-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.objections-grid[b-ckilizxdhy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.objection-item[b-ckilizxdhy] {
    text-align: center;
    padding: 28px 20px;
    background: var(--theme-surface, #ffffff);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    transition: all 0.3s ease;
}

.objection-item:hover[b-ckilizxdhy] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px var(--theme-shadow-color, rgba(0, 0, 0, 0.08));
}

.objection-icon[b-ckilizxdhy] {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 12px;
}

.objection-item h3[b-ckilizxdhy] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 8px;
}

.objection-item p[b-ckilizxdhy] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   PRICING
   ============================================ */
.pricing-section[b-ckilizxdhy] {
    padding: 64px 24px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.3s;
}

.pricing-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.pricing-title[b-ckilizxdhy] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 8px;
}

.pricing-subtitle[b-ckilizxdhy] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 40px;
}

.pricing-footer[b-ckilizxdhy] {
    margin-top: 24px;
}

.pricing-compare-link[b-ckilizxdhy] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    text-decoration: none;
}

.pricing-compare-link:hover[b-ckilizxdhy] {
    text-decoration: underline;
}

.pricing-footer-note[b-ckilizxdhy] {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin-top: 8px;
}

/* ============================================
   CTA: Final Call — Your Spark is waiting
   ============================================ */
.cta-section[b-ckilizxdhy] {
    padding: 80px 24px;
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease 0.6s;
}

.cta-section.visible[b-ckilizxdhy] {
    opacity: 1;
    transform: translateY(0);
}

.cta-content[b-ckilizxdhy] {
    max-width: 540px;
    margin: 0 auto;
    padding: 56px 40px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.cta-avatar[b-ckilizxdhy] {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.cta-egg-pulse[b-ckilizxdhy] {
    animation: cta-egg-breathe-b-ckilizxdhy 3s ease-in-out infinite;
}

.cta-egg-pulse[b-ckilizxdhy]  .companion-avatar {
    --avatar-size: 72px;
}

.cta-content h2[b-ckilizxdhy] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.cta-tagline[b-ckilizxdhy] {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 32px;
}

.cta-section .cta-primary[b-ckilizxdhy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 40px;
    background: var(--theme-cta-gradient, linear-gradient(135deg, #7c3aed, #06b6d4));
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), 0.3);
    margin-bottom: 16px;
}

.cta-section .cta-primary:hover[b-ckilizxdhy] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--theme-primary-rgb), 0.4);
    color: white;
}

.cta-section .cta-note[b-ckilizxdhy] {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 0;
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */
:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .hero-headline[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .section-title[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .stage-name[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-card.revealed[b-ckilizxdhy] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(var(--theme-primary-rgb), 0.2);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-card.locked[b-ckilizxdhy] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-card.locked:hover[b-ckilizxdhy] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-label[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-label.locked-text[b-ckilizxdhy] {
    color: rgba(255, 255, 255, 0.4);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-hint[b-ckilizxdhy] {
    color: rgba(255, 255, 255, 0.5);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-silhouette[b-ckilizxdhy] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.12));
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .tease-silhouette.shimmer-silhouette[b-ckilizxdhy] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.1), rgba(var(--theme-primary-rgb), 0.2));
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .lock-icon[b-ckilizxdhy] {
    color: rgba(255, 255, 255, 0.4);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .ability-card[b-ckilizxdhy] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .ability-card h3[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .ability-card p[b-ckilizxdhy] {
    color: rgba(255, 255, 255, 0.7);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .objection-item[b-ckilizxdhy] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .objection-item h3[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .objection-item p[b-ckilizxdhy] {
    color: rgba(255, 255, 255, 0.7);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .cta-content[b-ckilizxdhy] {
    background: rgba(30, 41, 59, 0.95);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .cta-content h2[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .pricing-title[b-ckilizxdhy] {
    color: white;
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .hero-tagline[b-ckilizxdhy] {
    color: rgba(255, 255, 255, 0.5);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .egg-shadow-silhouette[b-ckilizxdhy] {
    background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.12) 0%, transparent 70%);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .egg-glow-ring[b-ckilizxdhy] {
    border-color: rgba(251, 191, 36, 0.2);
}

:is(:global(.theme-space), :global(.theme-winter), :global(.theme-nature), :global(.theme-ocean), :global(.theme-mystic), :global(.theme-tron)) .egg-particles .particle[b-ckilizxdhy] {
    background: rgba(251, 191, 36, 0.9);
}

/* ============================================
   💼 EXECUTIVE THEME
   ============================================ */
:global(.theme-executive) .hero-headline[b-ckilizxdhy] {
    color: #1e293b;
}

:global(.theme-executive) .hero-headline .gradient-text[b-ckilizxdhy] {
    background: linear-gradient(135deg, #334155, #64748b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

:global(.theme-executive) .section-title[b-ckilizxdhy] {
    color: #1e293b;
}

:global(.theme-executive) .tease-card.revealed[b-ckilizxdhy] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.12);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

:global(.theme-executive) .tease-card.locked[b-ckilizxdhy] {
    background: rgba(51, 65, 85, 0.03);
    border-color: rgba(51, 65, 85, 0.12);
}

:global(.theme-executive) .tease-label[b-ckilizxdhy] {
    color: #1e293b;
}

:global(.theme-executive) .ability-card[b-ckilizxdhy] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

:global(.theme-executive) .ability-card:hover[b-ckilizxdhy] {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1);
}

:global(.theme-executive) .ability-card[b-ckilizxdhy]::before {
    background: #334155;
}

:global(.theme-executive) .ability-card.featured[b-ckilizxdhy] {
    background: rgba(51, 65, 85, 0.04);
    border-color: rgba(51, 65, 85, 0.12);
}

:global(.theme-executive) .ability-cta[b-ckilizxdhy] {
    color: #334155;
}

:global(.theme-executive) .browse-all-link[b-ckilizxdhy] {
    color: #334155;
}

:global(.theme-executive) .objection-item[b-ckilizxdhy] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

:global(.theme-executive) .objection-item:hover[b-ckilizxdhy] {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.1);
}

:global(.theme-executive) .objection-item h3[b-ckilizxdhy] {
    color: #1e293b;
}

:global(.theme-executive) .objection-item p[b-ckilizxdhy] {
    color: #475569;
}

:global(.theme-executive) .cta-content[b-ckilizxdhy] {
    background: #ffffff;
    border: 1px solid rgba(51, 65, 85, 0.08);
}

:global(.theme-executive) .cta-section .cta-primary[b-ckilizxdhy] {
    background: #059669;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
}

:global(.theme-executive) .cta-section .cta-primary:hover[b-ckilizxdhy] {
    background: #047857;
    box-shadow: 0 8px 30px rgba(5, 150, 105, 0.4);
    color: white;
}

:global(.theme-executive) .hero-cta-row .cta-primary[b-ckilizxdhy] {
    background: #059669;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
}

:global(.theme-executive) .hero-cta-row .cta-primary:hover[b-ckilizxdhy] {
    background: #047857;
    box-shadow: 0 8px 30px rgba(5, 150, 105, 0.4);
    color: white;
}

:global(.theme-executive) .egg-shadow-silhouette[b-ckilizxdhy] {
    background: radial-gradient(ellipse at center, rgba(5, 150, 105, 0.06) 0%, transparent 70%);
}

:global(.theme-executive) .egg-glow-ring[b-ckilizxdhy] {
    border-color: rgba(5, 150, 105, 0.15);
}

:global(.theme-executive) .avatar-demo.egg-pulse[b-ckilizxdhy] {
    border-color: rgba(5, 150, 105, 0.25);
    animation: egg-pulse-executive-b-ckilizxdhy 3s ease-in-out infinite;
}

@keyframes egg-pulse-executive-b-ckilizxdhy {
    0%, 100% { box-shadow: 0 0 30px rgba(5, 150, 105, 0.2), 0 0 60px rgba(5, 150, 105, 0.08); }
    50% { box-shadow: 0 0 50px rgba(5, 150, 105, 0.35), 0 0 100px rgba(5, 150, 105, 0.12); }
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .hero-companion[b-ckilizxdhy] {
        flex-direction: column-reverse;
        gap: 32px;
        padding: 48px 16px 32px;
        text-align: center;
    }

    .hero-text[b-ckilizxdhy] {
        max-width: 100%;
    }

    .hero-headline[b-ckilizxdhy] {
        font-size: 1.65rem;
    }

    .hero-sub[b-ckilizxdhy] {
        font-size: 1rem;
    }

    .hero-cta-row[b-ckilizxdhy] {
        align-items: center;
    }

    .hero-tagline[b-ckilizxdhy] {
        text-align: center;
    }

    .egg-mystery-wrapper[b-ckilizxdhy] {
        width: 160px;
        height: 160px;
    }

    .avatar-demo[b-ckilizxdhy] {
        width: 110px;
        height: 110px;
    }

    .avatar-demo[b-ckilizxdhy]  .companion-avatar {
        --avatar-size: 64px;
    }

    .egg-glow-ring[b-ckilizxdhy] {
        width: 140px;
        height: 140px;
    }

    .section-title[b-ckilizxdhy] {
        font-size: 1.35rem;
    }

    .section-sub[b-ckilizxdhy] {
        font-size: 0.95rem;
    }

    .tease-section[b-ckilizxdhy] {
        padding: 40px 16px;
    }

    .tease-grid[b-ckilizxdhy] {
        gap: 12px;
    }

    .tease-card[b-ckilizxdhy] {
        min-width: 120px;
        max-width: 140px;
        padding: 18px 14px;
    }

    .abilities-section[b-ckilizxdhy] {
        padding: 40px 16px;
    }

    .abilities-grid[b-ckilizxdhy] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ability-card[b-ckilizxdhy] {
        padding: 24px 20px;
    }

    .search-section[b-ckilizxdhy] {
        padding: 24px 16px;
    }

    .objections-section[b-ckilizxdhy] {
        padding: 32px 16px;
    }

    .objections-grid[b-ckilizxdhy] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .objection-item[b-ckilizxdhy] {
        padding: 20px 16px;
    }

    .pricing-section[b-ckilizxdhy] {
        padding: 40px 16px;
    }

    .pricing-title[b-ckilizxdhy] {
        font-size: 1.35rem;
    }

    .cta-section[b-ckilizxdhy] {
        padding: 48px 16px;
    }

    .cta-content[b-ckilizxdhy] {
        padding: 36px 20px;
    }

    .cta-content h2[b-ckilizxdhy] {
        font-size: 1.5rem;
    }

    .cta-section .cta-primary[b-ckilizxdhy] {
        padding: 18px 28px;
        font-size: 1.05rem;
        width: 100%;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .hero-headline[b-ckilizxdhy] {
        font-size: 1.4rem;
    }

    .tease-grid[b-ckilizxdhy] {
        flex-direction: column;
        align-items: center;
    }

    .tease-card[b-ckilizxdhy] {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
}

/* HERO-CHAT-1 (2026-08-11): the hero avatar chip changed from <a> to <button>
   (it now opens the chat widget instead of navigating). Strip the UA button chrome
   so .avatar-stage-label keeps rendering exactly as it did as a link, and make the
   orb read as pressable now that it is also a click target. */
button.avatar-stage-label[b-ckilizxdhy] {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

.prof-icon-circle--clickable[b-ckilizxdhy] {
    cursor: pointer;
}

.prof-icon-circle--clickable:focus-visible[b-ckilizxdhy] {
    outline: 3px solid var(--prof-secondary, #3b82f6);
    outline-offset: 4px;
}
/* /Pages/Invoices/AddTimeEntriesToInvoicePanel.razor.rz.scp.css */
.time-entry-row[b-sn9g69ceo4] {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        gap: 8px;
        cursor: pointer;
        border-bottom: 1px solid #f3f4f6;
        transition: background-color 0.15s ease;
    }
    
    .time-entry-row:hover[b-sn9g69ceo4] {
        background-color: #f9fafb;
    }
    
    .time-entry-row:last-child[b-sn9g69ceo4] {
        border-bottom: none;
    }
    
    .time-entry-row.selected[b-sn9g69ceo4] {
        background-color: var(--theme-bg-warning);
    }
    
    .time-entry-row.selected:hover[b-sn9g69ceo4] {
        background-color: #fde68a; /* Or var(--theme-bg-warning-hover) if it existed, but keeping raw for now or making up one? */
        /* Let's leave correct hardcoded color since variables might not cover this specific hover state */
    }
    
    .progress-bar-indeterminate[b-sn9g69ceo4] {
        background-color: var(--theme-text-primary);
        width: 100%;
        animation: progress-indeterminate-b-sn9g69ceo4 1.5s infinite linear;
        transform-origin: 0% 50%;
    }
    
    @keyframes progress-indeterminate-b-sn9g69ceo4 {
        0% { transform: translateX(0) scaleX(0); }
        40% { transform: translateX(0) scaleX(0.4); }
        100% { transform: translateX(100%) scaleX(0.5); }
    }

/* AUD-V-3 (2026-06-09): .alert/.alert-info were dead Bootstrap names —
   the "no uninvoiced time entries" notice rendered unstyled. */
.alert[b-sn9g69ceo4] {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.alert-info[b-sn9g69ceo4] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.is-dark .alert-info[b-sn9g69ceo4] {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: rgba(255, 255, 255, 0.85);
}
/* /Pages/Invoices/BackfillTransactionsModal.razor.rz.scp.css */
/* ============================================
   BACKFILL TRANSACTIONS MODAL
   Wide table-like layout for editing N invoices at once. Lives inside
   BaseDialog (size=ExtraLarge) which provides the chrome.
   ============================================ */

.backfill-intro[b-25jggu2ll7] {
    margin-bottom: 16px;
}

.backfill-intro p[b-25jggu2ll7] {
    margin: 0;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.9rem;
    line-height: 1.5;
}

.backfill-empty[b-25jggu2ll7] {
    padding: 32px;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px dashed var(--theme-border, #e2e8f0);
    border-radius: 10px;
}

.backfill-empty p[b-25jggu2ll7] {
    margin: 0 0 6px 0;
}

.backfill-empty p:last-child[b-25jggu2ll7] {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* Toolbar above the list — select-all + default deposit account picker. */
.backfill-toolbar[b-25jggu2ll7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 12px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.backfill-toolbar-left[b-25jggu2ll7] {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.875rem;
}

.backfill-toolbar-left label[b-25jggu2ll7] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 600;
}

.backfill-selected-count[b-25jggu2ll7] {
    color: var(--theme-text-secondary, #64748b);
}

.backfill-toolbar-right label[b-25jggu2ll7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #475569);
}

.backfill-toolbar-right select[b-25jggu2ll7] {
    padding: 6px 8px;
    border: 1px solid var(--theme-border, #cbd5e1);
    border-radius: 6px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.875rem;
    min-width: 180px;
}

/* List container — capped height with scroll so a 46-row list doesn't blow out
 * the dialog. Border + radius wrap the whole grid. */
.backfill-list[b-25jggu2ll7] {
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    overflow-y: auto;
    max-height: 440px;
    background: var(--theme-surface, #ffffff);
}

/* Grid row — 6 columns: checkbox, invoice info, amount, paid date, account, fee.
 * Header row uses the same grid for alignment. */
.backfill-row[b-25jggu2ll7] {
    display: grid;
    grid-template-columns: 36px minmax(160px, 2fr) 100px 140px minmax(150px, 1.6fr) 110px;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--theme-border, #f1f5f9);
    font-size: 0.875rem;
}

.backfill-row:last-child[b-25jggu2ll7] {
    border-bottom: none;
}

.backfill-row-header[b-25jggu2ll7] {
    background: var(--theme-surface-secondary, #f8fafc);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary, #64748b);
    position: sticky;
    top: 0;
    z-index: 1;
}

.backfill-row-selected[b-25jggu2ll7] {
    background: rgba(59, 130, 246, 0.04);
}

.backfill-row:hover:not(.backfill-row-header)[b-25jggu2ll7] {
    background: rgba(59, 130, 246, 0.06);
}

.backfill-col-check[b-25jggu2ll7] {
    display: flex;
    justify-content: center;
}

.backfill-col-invoice[b-25jggu2ll7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.backfill-customer[b-25jggu2ll7] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

.backfill-col-amount[b-25jggu2ll7] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.backfill-row input[type="date"][b-25jggu2ll7],
.backfill-row input[type="number"][b-25jggu2ll7],
.backfill-row select[b-25jggu2ll7] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--theme-border, #cbd5e1);
    border-radius: 6px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.85rem;
    font-family: inherit;
}

.backfill-row input:disabled[b-25jggu2ll7],
.backfill-row select:disabled[b-25jggu2ll7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.backfill-hint[b-25jggu2ll7] {
    margin: 10px 0 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--theme-text-secondary, #64748b);
}

/* Footer button row — Cancel + primary. Primary is full-width-ish so it reads
 * as the dominant action when the user has rows selected. */
.backfill-footer[b-25jggu2ll7] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    width: 100%;
}

.backfill-btn[b-25jggu2ll7] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.backfill-btn:disabled[b-25jggu2ll7] {
    opacity: 0.55;
    cursor: not-allowed;
}

.backfill-btn-cancel[b-25jggu2ll7] {
    background: var(--theme-surface-secondary, #e2e8f0);
    color: var(--theme-text-primary, #1e293b);
}

.backfill-btn-cancel:hover:not(:disabled)[b-25jggu2ll7] {
    background: var(--theme-border, #cbd5e1);
}

.backfill-btn-primary[b-25jggu2ll7] {
    background: var(--theme-primary, #3b82f6);
    color: white;
}

.backfill-btn-primary:hover:not(:disabled)[b-25jggu2ll7] {
    background: var(--theme-primary-hover, #2563eb);
}

/* Dark theme tuning */
.is-dark .backfill-empty[b-25jggu2ll7],
.is-dark .backfill-toolbar[b-25jggu2ll7] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .backfill-list[b-25jggu2ll7] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .backfill-row-header[b-25jggu2ll7] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .backfill-row[b-25jggu2ll7] {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.is-dark .backfill-row:hover:not(.backfill-row-header)[b-25jggu2ll7] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .backfill-row input[b-25jggu2ll7],
.is-dark .backfill-row select[b-25jggu2ll7],
.is-dark .backfill-toolbar-right select[b-25jggu2ll7] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .backfill-btn-cancel[b-25jggu2ll7] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .backfill-btn-cancel:hover:not(:disabled)[b-25jggu2ll7] {
    background: rgba(255, 255, 255, 0.18);
}

/* Responsive — stack the toolbar on narrow screens. The list grid stays
 * fixed-width and scrolls horizontally if needed. */
@media (max-width: 768px) {
    .backfill-toolbar[b-25jggu2ll7] {
        flex-direction: column;
        align-items: stretch;
    }

    .backfill-toolbar-right[b-25jggu2ll7] {
        align-self: stretch;
    }
}
/* /Pages/Invoices/InvoiceDetail.razor.rz.scp.css */
/* ============================================
   INVOICE DETAIL PAGE STYLES - Theme-Aware
   ============================================ */

:root[b-u8h7parycb] {
    --detail-radius: 14px;
    --detail-radius-sm: 8px;
    --detail-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page container */
.invoice-detail-page[b-u8h7parycb] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
}

.invoice-detail-container[b-u8h7parycb] {
    max-width: 900px;
    margin: 0 auto;
}

/* Header Section */
.detail-header[b-u8h7parycb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.header-left[b-u8h7parycb] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-u8h7parycb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    opacity: 0.8;
    transition: var(--detail-transition);
}

.back-link:hover[b-u8h7parycb] {
    opacity: 1;
}

.back-link svg[b-u8h7parycb] {
    width: 18px;
    height: 18px;
}

.detail-title[b-u8h7parycb] {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.title-icon[b-u8h7parycb] {
    width: 28px;
    height: 28px;
}

.header-actions[b-u8h7parycb] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Status Badges */
.status-badge[b-u8h7parycb] {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-draft[b-u8h7parycb] { background: #e2e8f0; color: #475569; }
.status-sent[b-u8h7parycb] { background: #dbeafe; color: #1d4ed8; }
.status-paid[b-u8h7parycb] { background: #dcfce7; color: #15803d; }
.status-overdue[b-u8h7parycb] { background: #fee2e2; color: #dc2626; }
.status-cancelled[b-u8h7parycb] { background: #f3f4f6; color: #9ca3af; }
.status-partiallypaid[b-u8h7parycb] { background: #fef3c7; color: #b45309; }

/* Invoice Paper */
.invoice-paper[b-u8h7parycb] {
    backdrop-filter: blur(10px);
    border-radius: var(--detail-radius);
    padding: 32px;
    margin-bottom: 24px;
}

/* Invoice Header */
.invoice-header[b-u8h7parycb] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.invoice-brand[b-u8h7parycb] {
    display: flex;
    align-items: flex-start;
}

.invoice-logo[b-u8h7parycb] {
    max-height: 70px;
    max-width: 200px;
}

.brand-name[b-u8h7parycb] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.invoice-meta[b-u8h7parycb] {
    text-align: right;
}

.invoice-label[b-u8h7parycb] {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 12px;
}

.meta-row[b-u8h7parycb] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.meta-row .label[b-u8h7parycb] {
    font-weight: 600;
    opacity: 0.7;
}

.meta-row .value[b-u8h7parycb] {
    font-weight: 500;
}

.meta-row .value.overdue[b-u8h7parycb] {
    color: #ef4444;
}

.overdue-badge[b-u8h7parycb] {
    display: inline-block;
    background: #fee2e2;
    color: #dc2626;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 6px;
    text-transform: uppercase;
}

/* Addresses */
.invoice-addresses[b-u8h7parycb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.address-block h3[b-u8h7parycb] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
    margin: 0 0 8px 0;
}

.address-block .name[b-u8h7parycb] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 6px 0;
}

.address-lines[b-u8h7parycb] {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.8;
}

/* Message */
.invoice-message[b-u8h7parycb] {
    padding: 16px 20px;
    margin-bottom: 32px;
    border-left: 4px solid;
    border-radius: 0 var(--detail-radius-sm) var(--detail-radius-sm) 0;
}

.invoice-message h3[b-u8h7parycb] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.invoice-message p[b-u8h7parycb] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Items Table */
.invoice-items-container[b-u8h7parycb] {
    margin-bottom: 32px;
    overflow-x: auto;
}

.invoice-items-table[b-u8h7parycb] {
    width: 100%;
    border-collapse: collapse;
}

.invoice-items-table th[b-u8h7parycb] {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.7;
    border-bottom: 2px solid rgba(148, 163, 184, 0.2);
}

.invoice-items-table td[b-u8h7parycb] {
    padding: 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    vertical-align: top;
}

.invoice-items-table .text-right[b-u8h7parycb] {
    text-align: right;
}

.item-name[b-u8h7parycb] {
    font-weight: 600;
    margin-bottom: 4px;
}

.item-desc[b-u8h7parycb] {
    font-size: 0.85rem;
    opacity: 0.7;
}

.rate-unit[b-u8h7parycb] {
    font-size: 0.75rem;
    opacity: 0.6;
}

.empty-items[b-u8h7parycb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    opacity: 0.6;
}

.empty-items svg[b-u8h7parycb] {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
}

.empty-items p[b-u8h7parycb] {
    margin: 0;
    font-size: 0.9rem;
}

/* Totals */
.invoice-totals[b-u8h7parycb] {
    width: 300px;
    margin-left: auto;
}

.totals-row[b-u8h7parycb] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.totals-row span:first-child[b-u8h7parycb] {
    opacity: 0.7;
    font-weight: 500;
}

.totals-row span:last-child[b-u8h7parycb] {
    font-weight: 600;
}

.totals-row.grand-total[b-u8h7parycb] {
    font-size: 1.2rem;
    border-bottom: 2px solid;
    margin-bottom: 8px;
}

.totals-row.grand-total span:last-child[b-u8h7parycb] {
    font-weight: 700;
}

.totals-row.paid .paid-amount[b-u8h7parycb] {
    color: #10b981;
}

.totals-row.balance-due[b-u8h7parycb] {
    padding: 12px;
    border-radius: var(--detail-radius-sm);
    border: none;
    margin-top: 8px;
}

.totals-row.balance-due span:last-child[b-u8h7parycb] {
    font-size: 1.1rem;
    color: #ef4444;
}

/* Activity Section */
.invoice-activity[b-u8h7parycb] {
    backdrop-filter: blur(10px);
    border-radius: var(--detail-radius);
    padding: 24px;
}

.invoice-activity h3[b-u8h7parycb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.invoice-activity h3 svg[b-u8h7parycb] {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.activity-timeline[b-u8h7parycb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item[b-u8h7parycb] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.activity-icon[b-u8h7parycb] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon svg[b-u8h7parycb] {
    width: 18px;
    height: 18px;
}

.activity-icon.paid[b-u8h7parycb] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.activity-icon.sent[b-u8h7parycb] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.activity-icon.created[b-u8h7parycb] { background: rgba(124, 58, 237, 0.15); color: #7c3aed; }
.activity-icon.receipt[b-u8h7parycb] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }
.activity-icon.reminder[b-u8h7parycb] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }

.activity-content[b-u8h7parycb] {
    flex: 1;
    padding-top: 6px;
}

.activity-text[b-u8h7parycb] {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 2px 0;
}

.activity-date[b-u8h7parycb] {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* Payment History Section */
.payment-history-section[b-u8h7parycb] {
    backdrop-filter: blur(10px);
    border-radius: var(--detail-radius);
    padding: 24px;
    margin-bottom: 20px;
}

.payment-history-section h3[b-u8h7parycb] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 16px 0;
}

.payment-history-section h3 svg[b-u8h7parycb] {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.payment-list[b-u8h7parycb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-item[b-u8h7parycb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.payment-info[b-u8h7parycb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-amount[b-u8h7parycb] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #15803d;
}

.payment-date[b-u8h7parycb] {
    font-size: 0.75rem;
    opacity: 0.6;
}

.payment-details[b-u8h7parycb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.payment-method[b-u8h7parycb] {
    font-size: 0.875rem;
    font-weight: 600;
}

.payment-transaction[b-u8h7parycb] {
    font-size: 0.7rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
}

.payment-status[b-u8h7parycb] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.payment-status svg[b-u8h7parycb] {
    width: 14px;
    height: 14px;
}

.payment-status.status-succeeded[b-u8h7parycb] {
    background: #dcfce7;
    color: #15803d;
}

.payment-status.status-pending[b-u8h7parycb] {
    background: #fef3c7;
    color: #92400e;
}

.payment-status.status-failed[b-u8h7parycb] {
    background: #fee2e2;
    color: #991b1b;
}

/* Loading & Error States */
.loading-state[b-u8h7parycb],
.error-state[b-u8h7parycb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    padding: 48px 24px;
}

.spinner[b-u8h7parycb] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(124, 58, 237, 0.2);
    border-top-color: #7c3aed;
    border-radius: 50%;
    animation: spin-b-u8h7parycb 1s linear infinite;
    margin-bottom: 16px;
}

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

.error-icon[b-u8h7parycb] {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.error-icon svg[b-u8h7parycb] {
    width: 100%;
    height: 100%;
}

.error-state h2[b-u8h7parycb] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.error-state p[b-u8h7parycb] {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0 0 20px 0;
}

/* Print Styles */
@media print {
    .detail-header[b-u8h7parycb],
    .invoice-activity[b-u8h7parycb],
    .header-actions[b-u8h7parycb] {
        display: none !important;
    }
    
    .invoice-detail-page[b-u8h7parycb] {
        padding: 0;
        background: white !important;
    }
    
    .invoice-paper[b-u8h7parycb] {
        box-shadow: none;
        border: none;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .invoice-detail-page[b-u8h7parycb] {
        padding: 16px;
    }
    
    .detail-header[b-u8h7parycb] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-actions[b-u8h7parycb] {
        justify-content: flex-start;
    }
    
    .invoice-paper[b-u8h7parycb] {
        padding: 20px;
    }
    
    .invoice-header[b-u8h7parycb] {
        flex-direction: column;
        gap: 24px;
    }
    
    .invoice-meta[b-u8h7parycb] {
        text-align: left;
    }
    
    .meta-row[b-u8h7parycb] {
        justify-content: flex-start;
    }
    
    .invoice-addresses[b-u8h7parycb] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .invoice-totals[b-u8h7parycb] {
        width: 100%;
    }
}

/* ============================================
   ☁️ CLOUD THEME
   ============================================ */
.invoice-detail-page.theme-cloud[b-u8h7parycb] {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

.theme-cloud .detail-title[b-u8h7parycb] { color: #1e3a5f; }
.theme-cloud .back-link[b-u8h7parycb] { color: #475569; }

.theme-cloud .invoice-paper[b-u8h7parycb] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .brand-name[b-u8h7parycb] { color: #1e3a5f; }
.theme-cloud .invoice-message[b-u8h7parycb] { background: rgba(124, 58, 237, 0.05); border-left-color: #7c3aed; }
.theme-cloud .invoice-message h3[b-u8h7parycb] { color: #7c3aed; }
.theme-cloud .totals-row.grand-total[b-u8h7parycb] { border-bottom-color: #7c3aed; }
.theme-cloud .totals-row.grand-total span:last-child[b-u8h7parycb] { color: #7c3aed; }
.theme-cloud .totals-row.balance-due[b-u8h7parycb] { background: #fef2f2; }

.theme-cloud .invoice-activity[b-u8h7parycb] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .loading-state p[b-u8h7parycb],
.theme-cloud .error-state h2[b-u8h7parycb] { color: #1e3a5f; }
.theme-cloud .error-state p[b-u8h7parycb] { color: #64748b; }
.theme-cloud .error-icon[b-u8h7parycb] { color: #ef4444; }

/* ============================================
   🚀 SPACE THEME
   ============================================ */
.invoice-detail-page.theme-space[b-u8h7parycb] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

.theme-space .detail-title[b-u8h7parycb] { color: #f1f5f9; }
.theme-space .back-link[b-u8h7parycb] { color: #94a3b8; }

.theme-space .invoice-paper[b-u8h7parycb] {
    background: rgba(30, 27, 75, 0.85);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
    color: #f1f5f9;
}

.theme-space .brand-name[b-u8h7parycb] { color: #c4b5fd; }
.theme-space .invoice-message[b-u8h7parycb] { background: rgba(168, 85, 247, 0.1); border-left-color: #a855f7; }
.theme-space .invoice-message h3[b-u8h7parycb] { color: #c4b5fd; }
.theme-space .totals-row.grand-total[b-u8h7parycb] { border-bottom-color: #a855f7; }
.theme-space .totals-row.grand-total span:last-child[b-u8h7parycb] { color: #c4b5fd; }
.theme-space .totals-row.balance-due[b-u8h7parycb] { background: rgba(239, 68, 68, 0.15); }

.theme-space .invoice-activity[b-u8h7parycb] {
    background: rgba(30, 27, 75, 0.7);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
    color: #f1f5f9;
}

.theme-space .loading-state p[b-u8h7parycb] { color: #94a3b8; }
.theme-space .error-state h2[b-u8h7parycb] { color: #f1f5f9; }
.theme-space .error-state p[b-u8h7parycb] { color: #94a3b8; }
.theme-space .error-icon[b-u8h7parycb] { color: #f87171; }
.theme-space .spinner[b-u8h7parycb] { border-color: rgba(168, 85, 247, 0.2); border-top-color: #a855f7; }

/* ============================================
   ❄️ WINTER THEME
   ============================================ */
.invoice-detail-page.theme-winter[b-u8h7parycb] {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

.theme-winter .detail-title[b-u8h7parycb] { color: #f0f9ff; }
.theme-winter .back-link[b-u8h7parycb] { color: #bae6fd; }

.theme-winter .invoice-paper[b-u8h7parycb] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-winter .brand-name[b-u8h7parycb] { color: #67e8f9; }
.theme-winter .invoice-message[b-u8h7parycb] { background: rgba(8, 145, 178, 0.2); border-left-color: #22d3ee; }
.theme-winter .invoice-message h3[b-u8h7parycb] { color: #67e8f9; }
.theme-winter .totals-row.grand-total[b-u8h7parycb] { border-bottom-color: #22d3ee; }
.theme-winter .totals-row.grand-total span:last-child[b-u8h7parycb] { color: #67e8f9; }
.theme-winter .totals-row.balance-due[b-u8h7parycb] { background: rgba(239, 68, 68, 0.2); }

.theme-winter .invoice-activity[b-u8h7parycb] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-winter .loading-state p[b-u8h7parycb] { color: #bae6fd; }
.theme-winter .error-state h2[b-u8h7parycb] { color: #f0f9ff; }
.theme-winter .error-state p[b-u8h7parycb] { color: #bae6fd; }
.theme-winter .error-icon[b-u8h7parycb] { color: #f87171; }
.theme-winter .spinner[b-u8h7parycb] { border-color: rgba(186, 230, 253, 0.3); border-top-color: #22d3ee; }

/* ============================================
   🌿 NATURE THEME
   ============================================ */
.invoice-detail-page.theme-nature[b-u8h7parycb] {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);
}

.theme-nature .detail-title[b-u8h7parycb] { color: #f0fdf4; }
.theme-nature .back-link[b-u8h7parycb] { color: #bbf7d0; }

.theme-nature .invoice-paper[b-u8h7parycb] {
    background: rgba(187, 247, 208, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(187, 247, 208, 0.3);
    color: #f0fdf4;
}

.theme-nature .brand-name[b-u8h7parycb] { color: #86efac; }
.theme-nature .invoice-message[b-u8h7parycb] { background: rgba(34, 197, 94, 0.2); border-left-color: #4ade80; }
.theme-nature .invoice-message h3[b-u8h7parycb] { color: #86efac; }
.theme-nature .totals-row.grand-total[b-u8h7parycb] { border-bottom-color: #4ade80; }
.theme-nature .totals-row.grand-total span:last-child[b-u8h7parycb] { color: #86efac; }
.theme-nature .totals-row.balance-due[b-u8h7parycb] { background: rgba(239, 68, 68, 0.2); }

.theme-nature .invoice-activity[b-u8h7parycb] {
    background: rgba(187, 247, 208, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(187, 247, 208, 0.3);
    color: #f0fdf4;
}

.theme-nature .loading-state p[b-u8h7parycb] { color: #bbf7d0; }
.theme-nature .error-state h2[b-u8h7parycb] { color: #f0fdf4; }
.theme-nature .error-state p[b-u8h7parycb] { color: #bbf7d0; }
.theme-nature .error-icon[b-u8h7parycb] { color: #f87171; }
.theme-nature .spinner[b-u8h7parycb] { border-color: rgba(187, 247, 208, 0.3); border-top-color: #4ade80; }

/* ============================================
   🌊 OCEAN THEME
   ============================================ */
.invoice-detail-page.theme-ocean[b-u8h7parycb] {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 70%, #0ea5e9 100%);
}

.theme-ocean .detail-title[b-u8h7parycb] { color: #f0f9ff; }
.theme-ocean .back-link[b-u8h7parycb] { color: #bae6fd; }

.theme-ocean .invoice-paper[b-u8h7parycb] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-ocean .brand-name[b-u8h7parycb] { color: #7dd3fc; }
.theme-ocean .invoice-message[b-u8h7parycb] { background: rgba(14, 165, 233, 0.2); border-left-color: #38bdf8; }
.theme-ocean .invoice-message h3[b-u8h7parycb] { color: #7dd3fc; }
.theme-ocean .totals-row.grand-total[b-u8h7parycb] { border-bottom-color: #38bdf8; }
.theme-ocean .totals-row.grand-total span:last-child[b-u8h7parycb] { color: #7dd3fc; }
.theme-ocean .totals-row.balance-due[b-u8h7parycb] { background: rgba(239, 68, 68, 0.2); }

.theme-ocean .invoice-activity[b-u8h7parycb] {
    background: rgba(186, 230, 253, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(186, 230, 253, 0.3);
    color: #f0f9ff;
}

.theme-ocean .loading-state p[b-u8h7parycb] { color: #bae6fd; }
.theme-ocean .error-state h2[b-u8h7parycb] { color: #f0f9ff; }
.theme-ocean .error-state p[b-u8h7parycb] { color: #bae6fd; }
.theme-ocean .error-icon[b-u8h7parycb] { color: #f87171; }
.theme-ocean .spinner[b-u8h7parycb] { border-color: rgba(186, 230, 253, 0.3); border-top-color: #38bdf8; }

/* ============================================
   🔮 MYSTIC THEME
   ============================================ */
.invoice-detail-page.theme-mystic[b-u8h7parycb] {
    background: linear-gradient(180deg, #1a0a2e 0%, #16082a 20%, #2d1b4e 50%, #1a0a2e 80%, #0d0515 100%);
}

.theme-mystic .detail-title[b-u8h7parycb] { 
    color: #faf5ff; 
    text-shadow: 0 2px 12px rgba(249, 115, 22, 0.3);
}
.theme-mystic .back-link[b-u8h7parycb] { color: #e9d5ff; }

.theme-mystic .invoice-paper[b-u8h7parycb] {
    background: rgba(45, 27, 78, 0.85);
    box-shadow: 0 4px 24px transparent, inset 0 1px 0 rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(249, 115, 22, 0.2);
    color: #faf5ff;
}

.theme-mystic .brand-name[b-u8h7parycb] { color: #fb923c; }
.theme-mystic .invoice-label[b-u8h7parycb] { color: #f97316; }
.theme-mystic .meta-row .label[b-u8h7parycb] { color: #c4b5fd; }
.theme-mystic .meta-row .value[b-u8h7parycb] { color: #faf5ff; }
.theme-mystic .address-block h3[b-u8h7parycb] { color: #c4b5fd; }
.theme-mystic .address-block .name[b-u8h7parycb] { color: #faf5ff; }
.theme-mystic .address-lines[b-u8h7parycb] { color: #e9d5ff; }

.theme-mystic .invoice-message[b-u8h7parycb] { 
    background: rgba(249, 115, 22, 0.1); 
    border-left-color: #f97316; 
}
.theme-mystic .invoice-message h3[b-u8h7parycb] { color: #fb923c; }
.theme-mystic .invoice-message p[b-u8h7parycb] { color: #e9d5ff; }

.theme-mystic .invoice-items-table thead[b-u8h7parycb] { 
    background: rgba(249, 115, 22, 0.15);
    color: #faf5ff;
}
.theme-mystic .invoice-items-table th[b-u8h7parycb] { color: #fb923c; }
.theme-mystic .invoice-items-table td[b-u8h7parycb] { color: #faf5ff; }
.theme-mystic .invoice-items-table tbody tr:hover[b-u8h7parycb] { background: rgba(249, 115, 22, 0.1); }
.theme-mystic .item-desc[b-u8h7parycb] { color: #c4b5fd; }

.theme-mystic .totals-row[b-u8h7parycb] { color: #e9d5ff; }
.theme-mystic .totals-row.grand-total[b-u8h7parycb] { 
    border-bottom-color: #f97316; 
}
.theme-mystic .totals-row.grand-total span:last-child[b-u8h7parycb] { 
    color: #fb923c;
    text-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}
.theme-mystic .totals-row.balance-due[b-u8h7parycb] { background: rgba(239, 68, 68, 0.2); }
.theme-mystic .totals-row.paid .paid-amount[b-u8h7parycb] { color: #86efac; }

.theme-mystic .invoice-activity[b-u8h7parycb] {
    background: rgba(45, 27, 78, 0.8);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(124, 58, 237, 0.2);
    color: #faf5ff;
}

.theme-mystic .invoice-activity h3[b-u8h7parycb] { color: #fb923c; }
.theme-mystic .activity-item[b-u8h7parycb] { border-left-color: rgba(249, 115, 22, 0.3); }
.theme-mystic .activity-text[b-u8h7parycb] { color: #faf5ff; }
.theme-mystic .activity-date[b-u8h7parycb] { color: #c4b5fd; }

.theme-mystic .payment-history-section[b-u8h7parycb] {
    background: rgba(45, 27, 78, 0.8);
    border: 1px solid rgba(124, 58, 237, 0.2);
    color: #faf5ff;
}
.theme-mystic .payment-history-section h3[b-u8h7parycb] { color: #fb923c; }
.theme-mystic .payment-item[b-u8h7parycb] { border-color: rgba(124, 58, 237, 0.2); }
.theme-mystic .payment-amount[b-u8h7parycb] { color: #faf5ff; }
.theme-mystic .payment-date[b-u8h7parycb] { color: #c4b5fd; }

/* ============================================
   🌙 DARK THEME — PAYMENT HISTORY
   ============================================
   Consolidated override for all dark themes. The base .payment-item rule
   hardcodes a white-ish background (rgba(255,255,255,0.8)) which renders
   as a glaring light card against any dark backdrop. Same story for the
   .payment-transaction monospace pill (rgba(0,0,0,0.05) on dark = black
   blob). This block flips both — once — for every dark theme. Per-theme
   accent color for the h3 lives in each theme's own block above where
   appropriate; here we only handle the structural/contrast issues.

   Note: this is the first place in the file where we use the :is() group
   selector instead of repeating per-theme blocks — chose it because the
   structural styling (paper bg, item bg, transaction pill) is identical
   across all dark themes; only accent colors differ. If a fourth file
   ends up needing this same dark-themes-only payment-card pattern, it
   should get promoted into utilities.css. */
:is(.theme-space, .theme-winter, .theme-nature, .theme-ocean, .theme-tron) .payment-history-section[b-u8h7parycb] {
    background: rgba(15, 10, 30, 0.45);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #f1f5f9;
}

.is-dark .payment-item[b-u8h7parycb] {
    background: rgba(15, 10, 30, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.is-dark .payment-amount[b-u8h7parycb] {
    color: #86efac;
}

.is-dark .payment-date[b-u8h7parycb] {
    color: rgba(241, 245, 249, 0.6);
}

.is-dark .payment-method[b-u8h7parycb] {
    color: #f1f5f9;
}

.is-dark .payment-transaction[b-u8h7parycb] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(241, 245, 249, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Per-theme accent for the section heading */
.theme-space .payment-history-section h3[b-u8h7parycb] { color: #c4b5fd; }
.theme-winter .payment-history-section h3[b-u8h7parycb] { color: #67e8f9; }
.theme-nature .payment-history-section h3[b-u8h7parycb] { color: #86efac; }
.theme-ocean .payment-history-section h3[b-u8h7parycb] { color: #7dd3fc; }

.theme-mystic .status-badge[b-u8h7parycb] {
    box-shadow: 0 2px 8px transparent;
}

.theme-mystic .loading-state p[b-u8h7parycb] { color: #c4b5fd; }
.theme-mystic .error-state h2[b-u8h7parycb] { color: #faf5ff; }
.theme-mystic .error-state p[b-u8h7parycb] { color: #c4b5fd; }
.theme-mystic .error-icon[b-u8h7parycb] { color: #f87171; }
.theme-mystic .spinner[b-u8h7parycb] { border-color: rgba(249, 115, 22, 0.2); border-top-color: #f97316; }
/* /Pages/Invoices/InvoiceDialog.razor.rz.scp.css */
/* ============================================
   INVOICE DIALOG — Modernized CSS
   ============================================ */

.invoice-dialog-content[b-if4k4mucqq] {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.invoice-form-grid[b-if4k4mucqq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .invoice-form-grid[b-if4k4mucqq] {
        grid-template-columns: 1fr;
    }
}

.invoice-form-section[b-if4k4mucqq] {
    display: flex;
    flex-direction: column;
}

/* Cards */
.invoice-card[b-if4k4mucqq] {
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    padding: 16px;
}

/* Section Titles */
.invoice-section-title[b-if4k4mucqq] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary, #374151);
    margin: 0 0 12px 0;
}

.invoice-section-title svg[b-if4k4mucqq] {
    width: 18px;
    height: 18px;
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* Form Elements */
.invoice-form-group[b-if4k4mucqq] {
    margin-bottom: 12px;
}

.invoice-form-label[b-if4k4mucqq] {
    display: flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-primary, #374151);
    margin-bottom: 4px;
}

.invoice-form-input[b-if4k4mucqq] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
}

.invoice-form-input:focus[b-if4k4mucqq] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.invoice-form-input[b-if4k4mucqq]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

.invoice-form-textarea[b-if4k4mucqq] {
    min-height: 70px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.invoice-helper-text[b-if4k4mucqq] {
    display: block;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    margin-top: 4px;
}

/* Switch / Toggle */
.invoice-switch-group[b-if4k4mucqq] {
    margin-bottom: 12px;
}

.invoice-switch-wrapper[b-if4k4mucqq] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 4px;
}

.invoice-switch[b-if4k4mucqq] {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

.invoice-switch input[b-if4k4mucqq] {
    opacity: 0;
    width: 0;
    height: 0;
}

.invoice-slider[b-if4k4mucqq] {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--theme-border, #cbd5e1);
    border-radius: 22px;
    transition: 0.3s;
}

.invoice-slider[b-if4k4mucqq]::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

input:checked + .invoice-slider[b-if4k4mucqq] {
    background: var(--theme-primary);
}

input:checked + .invoice-slider[b-if4k4mucqq]::before {
    transform: translateX(18px);
}

.invoice-switch-label[b-if4k4mucqq] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #374151);
}

.invoice-divider[b-if4k4mucqq] {
    border: none;
    border-top: 1px solid var(--theme-border, #e5e7eb);
    margin: 12px 0;
}

/* Line Items Table */
.invoice-lines-section[b-if4k4mucqq] {
    margin-bottom: 20px;
}

.invoice-lines-header[b-if4k4mucqq] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

/* INV-TIME-1 (2026-09-12): the unbilled-time picker. An inline panel rather than a nested
   dialog - the invoice dialog is already a modal, and a modal on a modal is where focus
   traps and stacking contexts go wrong. */
.invoice-time-picker[b-if4k4mucqq] {
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.invoice-time-picker-head[b-if4k4mucqq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.invoice-time-picker .invoice-time-table[b-if4k4mucqq] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
}

.invoice-time-rate[b-if4k4mucqq] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.invoice-time-rate .invoice-form-input[b-if4k4mucqq] {
    width: 90px;
    padding: 6px 8px;
}

/* INV-TIME-1c: the project cell is context, not the subject - it should be readable at a
   glance without competing with the description. Truncates rather than wrapping, because a
   long engagement name must not push the rate input onto a second line. */
.invoice-time-project[b-if4k4mucqq] {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
}

.invoice-time-rate-note[b-if4k4mucqq] {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
}

.invoice-time-picker-foot[b-if4k4mucqq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 640px) {
    .invoice-time-picker[b-if4k4mucqq] { padding: 12px; }
    .invoice-time-picker-foot[b-if4k4mucqq] { flex-direction: column; align-items: stretch; }
}

.invoice-table-container[b-if4k4mucqq] {
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
}

.invoice-table[b-if4k4mucqq] {
    width: 100%;
    border-collapse: collapse;
}

.invoice-table thead th[b-if4k4mucqq] {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-muted, #6b7280);
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.is-dark .invoice-table thead th[b-if4k4mucqq] {
    background: rgba(255, 255, 255, 0.03);
}

.invoice-table tbody td[b-if4k4mucqq] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--theme-border, #f1f5f9);
    vertical-align: middle;
    color: var(--theme-text-primary, #374151);
}

.invoice-table tfoot td[b-if4k4mucqq] {
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.02);
}

.is-dark .invoice-table tfoot td[b-if4k4mucqq] {
    background: rgba(255, 255, 255, 0.03);
}

.text-right[b-if4k4mucqq] {
    text-align: right;
}

.invoice-text-muted[b-if4k4mucqq] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #6b7280);
}

.invoice-amount[b-if4k4mucqq] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.invoice-total-label[b-if4k4mucqq] {
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.invoice-total-amount[b-if4k4mucqq] {
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 1.05rem;
}

/* Icon buttons for table row actions */
.invoice-btn-icon[b-if4k4mucqq] {
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.invoice-btn-icon svg[b-if4k4mucqq] {
    width: 15px;
    height: 15px;
}

.invoice-btn-edit[b-if4k4mucqq] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.invoice-btn-edit:hover[b-if4k4mucqq] {
    background: rgba(var(--theme-primary-rgb), 0.2);
}

.invoice-btn-icon.invoice-btn-delete[b-if4k4mucqq] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.invoice-btn-icon.invoice-btn-delete:hover[b-if4k4mucqq] {
    background: rgba(239, 68, 68, 0.2);
}

/* Audit Trail */
.invoice-audit-section[b-if4k4mucqq] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--theme-border, #e5e7eb);
}

.invoice-timeline[b-if4k4mucqq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invoice-timeline-item[b-if4k4mucqq] {
    display: flex;
    gap: 14px;
}

.invoice-timeline-meta[b-if4k4mucqq] {
    flex-shrink: 0;
    width: 80px;
    font-size: 0.7rem;
    color: var(--theme-text-muted, #6b7280);
    text-align: right;
    line-height: 1.4;
}

.invoice-timeline-content[b-if4k4mucqq] {
    flex: 1;
    padding-left: 14px;
    border-left: 2px solid var(--theme-border, #e5e7eb);
    position: relative;
}

.invoice-timeline-content[b-if4k4mucqq]::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-primary);
}

.invoice-timeline-action[b-if4k4mucqq] {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.invoice-timeline-detail[b-if4k4mucqq] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

/* Audit color classes */
.text-info[b-if4k4mucqq] { color: #3b82f6; }
.text-success[b-if4k4mucqq] { color: #10b981; }
.text-warning[b-if4k4mucqq] { color: #f59e0b; }
.text-error[b-if4k4mucqq] { color: #ef4444; }
.text-secondary[b-if4k4mucqq] { color: var(--theme-text-muted, #6b7280); }
.text-primary[b-if4k4mucqq] { color: var(--theme-primary-ink, var(--theme-primary)); }

/* BP-MSG-1 (2026-09-13): the setup banner pulses when a save is blocked for a missing
   business profile. The banner lives at the TOP of the form, so by the time a user reaches
   Save it is usually scrolled out of sight - EnsureBusinessProfileAsync scrolls it back and
   this makes the arrival legible rather than a silent jump. Ring only (box-shadow + border),
   no transform: the banner holds a button, and moving a click target under the cursor is its
   own bug. Honours reduced-motion by holding the ring steady instead of pulsing. */
.invoice-profile-setup-banner[b-if4k4mucqq] {
    transition: box-shadow 180ms ease, border-color 180ms ease;
}

.invoice-profile-setup-banner.is-flashing[b-if4k4mucqq] {
    border-color: #f59e0b !important;
    animation: invoice-profile-banner-pulse-b-if4k4mucqq 700ms ease-in-out 3;
}

@keyframes invoice-profile-banner-pulse-b-if4k4mucqq {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35); }
}

@media (prefers-reduced-motion: reduce) {
    .invoice-profile-setup-banner.is-flashing[b-if4k4mucqq] {
        animation: none;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35);
    }
}
/* /Pages/Invoices/Invoices.razor.rz.scp.css */
/* ============================================
   INVOICES PAGE - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only invoice-specific styles here (list items, actions)
   ============================================ */

/* Invoice-specific page adjustments */
.invoices-page[b-q6byk5ffjg] {
    min-height: calc(100vh - 56px);
}

/* ============================================
   INVOICE LIST
   ============================================ */
.invoices-list[b-q6byk5ffjg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.invoice-item[b-q6byk5ffjg] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid;
}

.invoice-item:hover[b-q6byk5ffjg] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Status border colors */
.invoice-status-draft[b-q6byk5ffjg] { border-left-color: #94a3b8; }
.invoice-status-sent[b-q6byk5ffjg] { border-left-color: #0ea5e9; }
.invoice-status-paid[b-q6byk5ffjg] { border-left-color: #22c55e; }
.invoice-status-overdue[b-q6byk5ffjg] { border-left-color: #ef4444; }
/* ACH-authorized but not yet settled - amber to read as "in progress" */
.invoice-status-pending[b-q6byk5ffjg] { border-left-color: #f59e0b; }
/* ACH failed / returned - deeper red than overdue to read as "explicit rejection" */
.invoice-status-failed[b-q6byk5ffjg] { border-left-color: #dc2626; }

.invoice-item-main[b-q6byk5ffjg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.invoice-item-left[b-q6byk5ffjg] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.invoice-avatar[b-q6byk5ffjg] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--theme-accent, linear-gradient(135deg, #3b82f6, #1d4ed8));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.invoice-avatar svg[b-q6byk5ffjg] {
    width: 24px;
    height: 24px;
}

.invoice-info[b-q6byk5ffjg] {
    flex: 1;
    min-width: 0;
}

.invoice-item-header[b-q6byk5ffjg] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.invoice-item-title[b-q6byk5ffjg] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
}

.invoice-number-label[b-q6byk5ffjg] {
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.invoice-amount[b-q6byk5ffjg] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--theme-text-primary, #1e293b);
    margin-bottom: 8px;
}

.invoice-item-meta[b-q6byk5ffjg] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

.invoice-detail[b-q6byk5ffjg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.invoice-detail svg[b-q6byk5ffjg] {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.invoice-detail.overdue[b-q6byk5ffjg] {
    color: #ef4444;
    font-weight: 600;
}

.overdue-badge[b-q6byk5ffjg] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 4px;
}

/* ============================================
   INVOICE ACTIONS
   ============================================ */
.invoice-item-right[b-q6byk5ffjg] {
    flex-shrink: 0;
}

.invoice-item-actions[b-q6byk5ffjg] {
    display: flex;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.invoice-item:hover .invoice-item-actions[b-q6byk5ffjg] {
    opacity: 1;
}

.invoice-action-btn[b-q6byk5ffjg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--theme-surface-secondary, rgba(100, 116, 139, 0.1));
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--theme-text-secondary, #64748b);
}

.invoice-action-btn svg[b-q6byk5ffjg] {
    width: 18px;
    height: 18px;
}

.invoice-action-btn:hover[b-q6byk5ffjg] {
    transform: scale(1.1);
}

.action-btn-send[b-q6byk5ffjg] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.action-btn-send:hover[b-q6byk5ffjg] {
    background: #10b981;
    color: white;
}

.action-btn-paid[b-q6byk5ffjg] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.action-btn-paid:hover[b-q6byk5ffjg] {
    background: #22c55e;
    color: white;
}

.action-btn-archive[b-q6byk5ffjg] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.action-btn-archive:hover[b-q6byk5ffjg] {
    background: #ef4444;
    color: white;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .invoice-item[b-q6byk5ffjg] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .invoice-item:hover[b-q6byk5ffjg] {
    background: rgba(51, 65, 85, 0.7);
    box-shadow: 0 8px 25px transparent;
}

.is-dark .invoice-avatar[b-q6byk5ffjg] {
    background: var(--theme-accent, linear-gradient(135deg, #60a5fa, #3b82f6));
}

.is-dark .invoice-action-btn[b-q6byk5ffjg] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .overdue-badge[b-q6byk5ffjg] {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .invoice-item-main[b-q6byk5ffjg] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    
    .invoice-item-right[b-q6byk5ffjg] {
        align-self: flex-end;
    }
    
    .invoice-item-actions[b-q6byk5ffjg] {
        opacity: 1;
    }
    
    .invoice-avatar[b-q6byk5ffjg] {
        width: 40px;
        height: 40px;
    }
    
    .invoice-avatar svg[b-q6byk5ffjg] {
        width: 20px;
        height: 20px;
    }
    
    .invoice-amount[b-q6byk5ffjg] {
        font-size: 1.1rem;
    }
}

@media (max-width: 600px) {
    .invoices-page[b-q6byk5ffjg] {
        padding: 16px;
        padding-top: 72px;
    }
    
    .invoice-item-meta[b-q6byk5ffjg] {
        flex-direction: column;
        gap: 6px;
    }
}

/* ============================================
   "RECORDED" BADGE — paid invoices with linked Income transactions
   Sits next to the PAID status tag. Subtle green pill so it reads as a
   confirmation cue, not a warning. Mirrors the "Invoice #N" badge on the
   Transactions page for visual symmetry — both indicate the invoice/transaction
   link is established.
   ============================================ */
.invoice-recorded-badge[b-q6byk5ffjg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.invoice-recorded-badge svg[b-q6byk5ffjg] {
    flex-shrink: 0;
}

.is-dark .invoice-recorded-badge[b-q6byk5ffjg] {
    background: rgba(34, 197, 94, 0.22);
    color: #4ade80;
}
/* /Pages/Invoices/MarkAsPaidDialog.razor.rz.scp.css */
/* ============================================
   MARK AS PAID DIALOG — payment-recording fields
   Only the new payment block needs scoped styling. The existing email-confirmation
   block uses .nts-alert from utilities.css and stays untouched.
   ============================================ */

/* Card surrounding the whole payment-recording block. Soft border + subtle bg
 * separates it visually from the email-confirmation card below it. */
.payment-record-section[b-9ixz28wui9] {
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    padding: 14px 16px;
    margin-bottom: 12px;
}

/* The "Record this payment" header checkbox row. Matches the visual rhythm of
 * the email-confirmation toggle below. */
.payment-record-toggle[b-9ixz28wui9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 12px;
}

.payment-record-toggle input[type="checkbox"][b-9ixz28wui9] {
    cursor: pointer;
}

.payment-record-fields[b-9ixz28wui9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.15s ease;
}

.payment-record-fields-disabled[b-9ixz28wui9] {
    opacity: 0.45;
    pointer-events: none;
}

.payment-record-row[b-9ixz28wui9] {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    align-items: center;
}

.payment-record-row label[b-9ixz28wui9] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #475569);
}

.payment-record-row input[b-9ixz28wui9],
.payment-record-row select[b-9ixz28wui9] {
    padding: 8px 10px;
    border: 1px solid var(--theme-border, #cbd5e1);
    border-radius: 8px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
    font-family: inherit;
}

.payment-record-row input:focus[b-9ixz28wui9],
.payment-record-row select:focus[b-9ixz28wui9] {
    outline: 2px solid var(--theme-primary, #3b82f6);
    outline-offset: 1px;
}

/* Helper text under the fee field — explains the rate guidance without becoming a
 * full-width alert. Italics + lighter weight to keep visual hierarchy. */
.payment-record-hint[b-9ixz28wui9] {
    margin: 4px 0 0;
    font-size: 0.78rem;
    font-style: italic;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.4;
}

/* Live preview of what the dialog will create on submit. Reads as a confirmation
 * line so the user can sanity-check before clicking Mark as Paid. */
.payment-record-summary[b-9ixz28wui9] {
    margin: 8px 0 0;
    font-size: 0.85rem;
    padding: 8px 12px;
    background: rgba(59, 130, 246, 0.08);
    border-left: 3px solid var(--theme-primary, #3b82f6);
    border-radius: 6px;
    color: var(--theme-text-primary, #1e293b);
}

/* Dark-theme tuning — match the rest of NTS dark surfaces. */
.is-dark .payment-record-section[b-9ixz28wui9] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .payment-record-row input[b-9ixz28wui9],
.is-dark .payment-record-row select[b-9ixz28wui9] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}
/* /Pages/Invoices/ProductServiceDialog.razor.rz.scp.css */
/* ============================================
   PRODUCT SERVICE DIALOG
   Theme-aware via CSS variables — zero dark overrides
   ============================================ */

/* Form */
.product-form-group[b-e5q1esj7bc] {
    margin-bottom: 12px;
}

.product-form-label[b-e5q1esj7bc] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    margin-bottom: 4px;
}

.product-form-input[b-e5q1esj7bc] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.product-form-input:focus[b-e5q1esj7bc] {
    outline: none;
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.product-form-input[b-e5q1esj7bc]::placeholder {
    color: var(--theme-text-hint, #9ca3af);
}

.product-textarea[b-e5q1esj7bc] {
    resize: vertical;
    min-height: 60px;
}

/* Side-by-side inputs */
.product-form-row[b-e5q1esj7bc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Input group with $ addon */
.product-input-group[b-e5q1esj7bc] {
    display: flex;
    align-items: stretch;
}

.product-input-addon[b-e5q1esj7bc] {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--theme-text-secondary, #6b7280);
    font-weight: 500;
    font-size: 0.875rem;
}

.product-input-group .product-form-input[b-e5q1esj7bc] {
    border-radius: 0 8px 8px 0;
    flex: 1;
}

/* Pricing type toggle */
.product-pricing-toggle[b-e5q1esj7bc] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.product-toggle-btn[b-e5q1esj7bc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-surface, white);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.product-toggle-btn svg[b-e5q1esj7bc] {
    width: 16px;
    height: 16px;
}

.product-toggle-btn:hover[b-e5q1esj7bc] {
    border-color: var(--theme-primary);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.product-toggle-btn.active[b-e5q1esj7bc] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent));
    border-color: transparent;
    color: white;
}

/* Calculated total box */
.product-total-box[b-e5q1esj7bc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    margin-bottom: 12px;
}

.product-total-calc[b-e5q1esj7bc] {
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #6b7280);
}

.product-total-amount[b-e5q1esj7bc] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #10b981;
}
/* /Pages/Invoices/PublicInvoiceView.razor.rz.scp.css */
/* ============================================
   PUBLIC INVOICE VIEW - Clean Professional Design
   This page is publicly accessible, so we use a 
   fixed professional light theme for consistency.
   ============================================ */

.public-invoice-container[b-p6w562xfx4] {
    padding: 2rem;
    min-height: calc(100vh - 56px);
    display: flex;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.invoice-paper[b-p6w562xfx4] {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 3rem;
    width: 100%;
    max-width: 900px;
    color: #111827;
    margin-bottom: 2rem;
}


/* Header */
.invoice-header[b-p6w562xfx4] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e5e7eb;
}

.invoice-brand[b-p6w562xfx4] {
    display: flex;
    align-items: center;
}

.invoice-brand h1[b-p6w562xfx4] {
    font-size: 2rem;
    font-weight: 700;
    color: #4f46e5;
    margin: 0;
}

.invoice-logo[b-p6w562xfx4] {
    max-height: 60px;
    max-width: 200px;
    object-fit: contain;
}

.invoice-logo.nts-default-logo[b-p6w562xfx4] {
    height: 50px;
    width: auto;
}

.invoice-meta[b-p6w562xfx4] {
    text-align: right;
}



.invoice-title[b-p6w562xfx4] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #4f46e5;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.meta-row[b-p6w562xfx4] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.meta-row .label[b-p6w562xfx4] {
    font-weight: 600;
    color: #6b7280;
}

.meta-row .value[b-p6w562xfx4] {
    font-weight: 500;
    color: #111827;
}

/* Status Badges */
.status-badge[b-p6w562xfx4] {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-draft[b-p6w562xfx4] { background-color: #f3f4f6; color: #374151; }
.status-sent[b-p6w562xfx4] { background-color: #dbeafe; color: #1d4ed8; }
.status-paid[b-p6w562xfx4] { background-color: #dcfce7; color: #15803d; }
.status-overdue[b-p6w562xfx4] { background-color: #fee2e2; color: #b91c1c; }
.status-cancelled[b-p6w562xfx4] { background-color: #f3f4f6; color: #9ca3af; text-decoration: line-through; }
.status-partiallypaid[b-p6w562xfx4] { background-color: #fef3c7; color: #b45309; }

/* Overdue Warning Banner */
.overdue-banner[b-p6w562xfx4] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
}

.overdue-icon[b-p6w562xfx4] {
    width: 24px;
    height: 24px;
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 2px;
}

.overdue-text[b-p6w562xfx4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.overdue-text strong[b-p6w562xfx4] {
    color: #991b1b;
    font-size: 1rem;
}

.overdue-text span[b-p6w562xfx4] {
    color: #7f1d1d;
    font-size: 0.875rem;
}

/* Addresses */
.invoice-addresses[b-p6w562xfx4] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    gap: 2rem;
}

.address-block h3[b-p6w562xfx4] {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.address-block .name[b-p6w562xfx4] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.address-lines[b-p6w562xfx4] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4b5563;
}

/* Message */
.invoice-message[b-p6w562xfx4] {
    padding: 1.5rem;
    margin-bottom: 3rem;
    background-color: #f0f9ff;
    border-left: 4px solid #4f46e5;
    border-radius: 4px;
}

.invoice-message h3[b-p6w562xfx4] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #4f46e5;
}

.invoice-message p[b-p6w562xfx4] {
    margin: 0;
    color: #374151;
}

/* Items Table */
.invoice-items-container[b-p6w562xfx4] {
    margin-bottom: 3rem;
    overflow-x: auto;
}

.invoice-items-table[b-p6w562xfx4] {
    width: 100%;
    border-collapse: collapse;
}

.invoice-items-table th[b-p6w562xfx4] {
    text-align: left;
    padding: 1rem;
    background-color: #f9fafb;
    color: #6b7280;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    border-bottom: 2px solid #e5e7eb;
}

.invoice-items-table td[b-p6w562xfx4] {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: top;
    color: #111827;
}

.invoice-items-table .text-right[b-p6w562xfx4] {
    text-align: right;
}

.item-name[b-p6w562xfx4] {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}

.item-desc[b-p6w562xfx4] {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Payment History */
.payment-history[b-p6w562xfx4] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.payment-history h3[b-p6w562xfx4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 1rem 0;
}

.payment-history .section-icon[b-p6w562xfx4] {
    width: 20px;
    height: 20px;
    color: #6b7280;
}

.payment-list[b-p6w562xfx4] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.payment-item[b-p6w562xfx4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.payment-info[b-p6w562xfx4] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.payment-amount[b-p6w562xfx4] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #15803d;
}

.payment-date[b-p6w562xfx4] {
    font-size: 0.8rem;
    color: #6b7280;
}

.payment-details[b-p6w562xfx4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.payment-method[b-p6w562xfx4] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
}

.payment-transaction[b-p6w562xfx4] {
    font-size: 0.7rem;
    font-family: 'SF Mono', 'Consolas', monospace;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

.payment-status[b-p6w562xfx4] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
}

.payment-status svg[b-p6w562xfx4] {
    width: 14px;
    height: 14px;
}

.payment-status.status-succeeded[b-p6w562xfx4] {
    background: #dcfce7;
    color: #15803d;
}

.payment-status.status-pending[b-p6w562xfx4] {
    background: #fef3c7;
    color: #92400e;
}

.payment-status.status-failed[b-p6w562xfx4] {
    background: #fee2e2;
    color: #991b1b;
}

/* Totals */
.invoice-totals[b-p6w562xfx4] {
    width: 300px;
    margin-left: auto;
}

.totals-row[b-p6w562xfx4] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.totals-row span:first-child[b-p6w562xfx4] {
    color: #6b7280;
    font-weight: 500;
}

.totals-row span:last-child[b-p6w562xfx4] {
    font-weight: 600;
    color: #111827;
}

.grand-total[b-p6w562xfx4] {
    font-size: 1.25rem;
    border-bottom: 2px solid #4f46e5;
    margin-bottom: 1rem;
}

.grand-total span:last-child[b-p6w562xfx4] {
    color: #4f46e5;
    font-weight: 700;
}

.balance-due[b-p6w562xfx4] {
    background-color: #fef2f2;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
    border: none;
}

.balance-due span:last-child[b-p6w562xfx4] {
    color: #dc2626;
    font-size: 1.125rem;
    font-weight: 700;
}

/* Payment Actions */
.invoice-actions[b-p6w562xfx4] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.btn[b-p6w562xfx4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
}

.btn-icon[b-p6w562xfx4] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-primary[b-p6w562xfx4] {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-p6w562xfx4] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(79, 70, 229, 0.4);
}

.btn-secondary[b-p6w562xfx4] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.btn-secondary:hover[b-p6w562xfx4] {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.btn-lg[b-p6w562xfx4] {
    font-size: 1.125rem;
    padding: 1rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
}

.btn:disabled[b-p6w562xfx4] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-spinner[b-p6w562xfx4] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-p6w562xfx4 0.8s linear infinite;
    margin-right: 8px;
}

/* Loading & Error States */
.loading-state[b-p6w562xfx4], .error-state[b-p6w562xfx4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem;
    text-align: center;
    flex: 1;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.loading-state p[b-p6w562xfx4],
.error-state p[b-p6w562xfx4] {
    color: #6b7280;
}

.error-state h2[b-p6w562xfx4] {
    color: #111827;
    margin-bottom: 0.5rem;
}

.spinner[b-p6w562xfx4] {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: spin-b-p6w562xfx4 1s linear infinite;
    margin-bottom: 1rem;
}

.error-icon[b-p6w562xfx4] {
    width: 64px;
    height: 64px;
    color: #ef4444;
    margin-bottom: 1rem;
}

.error-icon svg[b-p6w562xfx4] {
    width: 100%;
    height: 100%;
}

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

/* Responsive */
@media (max-width: 768px) {
    .public-invoice-container[b-p6w562xfx4] {
        padding: 1rem;
    }
    
    .invoice-paper[b-p6w562xfx4] {
        padding: 1.5rem;
    }
    
    .invoice-header[b-p6w562xfx4] {
        flex-direction: column;
        gap: 2rem;
    }
    
    .invoice-meta[b-p6w562xfx4] {
        text-align: left;
    }
    
    .meta-row[b-p6w562xfx4] {
        justify-content: flex-start;
    }
    
    .invoice-addresses[b-p6w562xfx4] {
        flex-direction: column;
        gap: 2rem;
    }
    
    .invoice-totals[b-p6w562xfx4] {
        width: 100%;
    }
    
    .payment-item[b-p6w562xfx4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .payment-details[b-p6w562xfx4] {
        align-items: flex-start;
    }
    
    .payment-status[b-p6w562xfx4] {
        align-self: flex-start;
    }
}

/* Powered by Footer */
.powered-by-footer[b-p6w562xfx4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    border-top: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.875rem;
}

.powered-by-logo[b-p6w562xfx4] {
    height: 24px;
    width: auto;
    opacity: 0.8;
}

.powered-by-link a[b-p6w562xfx4] {
    color: #4f46e5;
    text-decoration: none;
    font-weight: 500;
}

.powered-by-link a:hover[b-p6w562xfx4] {
    text-decoration: underline;
}

/* Print Styles */
@media print {
    .public-invoice-container[b-p6w562xfx4] {
        background: white !important;
        padding: 0;
        min-height: auto;
    }
    
    .invoice-paper[b-p6w562xfx4] {
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        max-width: 100%;
    }
    
    .invoice-actions[b-p6w562xfx4],
    .powered-by-footer[b-p6w562xfx4],
    .overdue-banner[b-p6w562xfx4] {
        display: none !important;
    }
    
    .invoice-header[b-p6w562xfx4] {
        margin-bottom: 2rem;
        padding-bottom: 1rem;
    }
    
    .invoice-addresses[b-p6w562xfx4] {
        margin-bottom: 2rem;
    }
    
    .invoice-message[b-p6w562xfx4] {
        margin-bottom: 2rem;
        page-break-inside: avoid;
    }
    
    .invoice-items-table[b-p6w562xfx4] {
        page-break-inside: avoid;
    }
    
    .invoice-totals[b-p6w562xfx4] {
        page-break-inside: avoid;
    }
}
/* /Pages/Invoices/SendReceiptDialog.razor.rz.scp.css */
/* ============================================
   SEND RECEIPT DIALOG - Scoped CSS
   ============================================ */

/* Receipt Preview Section */
.receipt-preview[b-1u1utee092] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    color: white;
}

.receipt-preview-header[b-1u1utee092] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.9;
}

.receipt-preview-header svg[b-1u1utee092] {
    width: 20px;
    height: 20px;
}

.receipt-preview-amount[b-1u1utee092] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.receipt-preview-invoice[b-1u1utee092] {
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Form */
.send-receipt-form[b-1u1utee092] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group[b-1u1utee092] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-1u1utee092] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #374151);
}

.form-group .optional[b-1u1utee092] {
    font-weight: 400;
    color: var(--theme-text-muted, #9ca3af);
}

.form-group input[b-1u1utee092],
.form-group textarea[b-1u1utee092] {
    padding: 12px 14px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--theme-input-bg, #fff);
    color: var(--theme-input-text, #1f2937);
}

.form-group input:focus[b-1u1utee092],
.form-group textarea:focus[b-1u1utee092] {
    outline: none;
    border-color: var(--theme-input-focus, #8b5cf6);
    box-shadow: 0 0 0 3px var(--theme-shadow-color, rgba(139, 92, 246, 0.1));
}

.form-group textarea[b-1u1utee092] {
    resize: vertical;
    min-height: 80px;
}

.form-hint[b-1u1utee092] {
    font-size: 0.75rem;
    color: var(--theme-text-hint, #6b7280);
}
/* /Pages/Invoices/SendReminderDialog.razor.rz.scp.css */
/* ============================================
   SEND REMINDER DIALOG
   Theme-aware via CSS variables — zero dark overrides
   ============================================ */

/* Preview Section — semantic red, same on all themes */
.reminder-preview[b-g9pb2ldnwq] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.reminder-preview-header[b-g9pb2ldnwq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.9;
}

.reminder-preview-header svg[b-g9pb2ldnwq] {
    width: 18px;
    height: 18px;
}

.reminder-preview-amount[b-g9pb2ldnwq] {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.reminder-preview-invoice[b-g9pb2ldnwq] {
    font-size: 0.8125rem;
    opacity: 0.9;
}

.reminder-preview-days[b-g9pb2ldnwq] {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
}

/* Form */
.send-reminder-form[b-g9pb2ldnwq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group[b-g9pb2ldnwq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-g9pb2ldnwq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-primary, #374151);
}

.form-group .optional[b-g9pb2ldnwq] {
    font-weight: 400;
    color: var(--theme-text-hint, #9ca3af);
}

.form-group input[b-g9pb2ldnwq],
.form-group textarea[b-g9pb2ldnwq] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: border-color 0.15s ease;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1f2937);
    box-sizing: border-box;
}

.form-group input:focus[b-g9pb2ldnwq],
.form-group textarea:focus[b-g9pb2ldnwq] {
    outline: none;
    border-color: var(--theme-input-focus, #f59e0b);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 245, 158, 11), 0.12);
}

.form-group input[b-g9pb2ldnwq]::placeholder,
.form-group textarea[b-g9pb2ldnwq]::placeholder {
    color: var(--theme-text-hint, #9ca3af);
}

.form-group textarea[b-g9pb2ldnwq] {
    resize: vertical;
    min-height: 72px;
}

.form-hint[b-g9pb2ldnwq] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}
/* /Pages/Journal/Journal.razor.rz.scp.css */
/* ============================================
   JOURNAL PAGE - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only journal-specific styles here
   ============================================ */

/* Stats - Full Width 4 columns */
.journal-page .list-page-stats[b-d6nn5jw5lv] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Stat mood styling */
.stat-mood[b-d6nn5jw5lv] {
    font-size: 1rem !important;
}

/* Entries List */
.entries-list[b-d6nn5jw5lv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Entry Card */
.entry-card[b-d6nn5jw5lv] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--theme-surface, rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    cursor: pointer;
    transition: all 0.2s ease;
}

.entry-card:hover[b-d6nn5jw5lv] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* JRNL-ARCH-3 (2026-07-08): the JRNL-ARCH-1 dimmed .is-archived treatment is
   gone — archived entries now live in their own segmented view (everything
   there is archived, so dimming would just read as a broken theme). The
   Active | Archived toggle mirrors Notes (NOTE-ARCH-1 reference impl);
   hover deliberately scoped :not(.active) — the hover-vs-active collision trap. */
.journal-view-toggle[b-d6nn5jw5lv] {
    display: inline-flex;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    padding: 3px;
    background: var(--theme-surface, rgba(255, 255, 255, 0.9));
    flex-shrink: 0;
}

.journal-view-btn[b-d6nn5jw5lv] {
    border: none;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.journal-view-btn:not(.active):hover[b-d6nn5jw5lv] {
    color: var(--theme-text-primary, #1e293b);
    background: color-mix(in srgb, var(--theme-accent, #6366f1) 8%, transparent);
}

.journal-view-btn.active[b-d6nn5jw5lv] {
    background: var(--theme-accent, #6366f1);
    color: #fff;
}

.entry-header[b-d6nn5jw5lv] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.entry-date[b-d6nn5jw5lv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    padding: 8px;
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.1);
}

.date-day[b-d6nn5jw5lv] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--theme-text-primary, #1e293b);
}

.date-month[b-d6nn5jw5lv] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary, #64748b);
}

.entry-meta[b-d6nn5jw5lv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

/* Mood Badges */
.mood-badge[b-d6nn5jw5lv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mood-badge.mood-great[b-d6nn5jw5lv] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.mood-badge.mood-good[b-d6nn5jw5lv] { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.mood-badge.mood-neutral[b-d6nn5jw5lv] { background: rgba(100, 116, 139, 0.15); color: #64748b; }
.mood-badge.mood-challenging[b-d6nn5jw5lv] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.mood-badge.mood-difficult[b-d6nn5jw5lv] { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Journal Type chips (J-D-3, 2026-05-22) — entry-card affordance. Shares the
   pill shape with .mood-badge so the two chips sit side-by-side without one
   visually competing with the other. Subtle tint per type, picked to feel
   distinct without screaming (this is metadata, not a status). */
.journal-type-chip[b-d6nn5jw5lv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.journal-type-chip.journal-type-general[b-d6nn5jw5lv] { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }    /* violet — the default */
.journal-type-chip.journal-type-dream[b-d6nn5jw5lv] { background: rgba(99, 102, 241, 0.15); color: #818cf8; }      /* indigo — moody / night */
.journal-type-chip.journal-type-gratitude[b-d6nn5jw5lv] { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }  /* amber — warm */
.journal-type-chip.journal-type-reflection[b-d6nn5jw5lv] { background: rgba(100, 116, 139, 0.15); color: #94a3b8; }/* slate — pensive */
.journal-type-chip.journal-type-work[b-d6nn5jw5lv] { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }       /* blue — focused */

/* Entry Body */
.entry-body[b-d6nn5jw5lv] {
    margin-bottom: 12px;
}

.entry-title[b-d6nn5jw5lv] {
    margin: 0 0 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.entry-preview[b-d6nn5jw5lv] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.6;
}

/* Entry Footer */
.entry-footer[b-d6nn5jw5lv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
}

.entry-time[b-d6nn5jw5lv] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #94a3b8);
}

.entry-actions[b-d6nn5jw5lv] {
    display: flex;
    gap: 8px;
}

/* Form Styles (dialog overlay/header/footer handled by BaseDialog) */
.journal-form[b-d6nn5jw5lv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.journal-form-group[b-d6nn5jw5lv] {
    margin-bottom: 8px;
}

.journal-form-group label[b-d6nn5jw5lv] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.required-indicator[b-d6nn5jw5lv] {
    color: #ef4444;
}

.journal-form-input[b-d6nn5jw5lv] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    font-family: inherit;
}

.journal-form-textarea[b-d6nn5jw5lv] {
    /* JRNL-D-4 (2026-07-08): the writing IS the journal — the content field
       gets the vertical budget the picker rows gave back (they compacted from
       stacked cards to inline pills the same day). 140px showed ~2 lines and
       read as an afterthought under two rows of big buttons. Explicit height
       alongside min-height as the initial size; resize: vertical still lets
       the user pull it taller. */
    height: 280px;
    min-height: 280px;
    resize: vertical;
    line-height: 1.6;
}

.journal-form-input:focus[b-d6nn5jw5lv] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

.journal-form-input[b-d6nn5jw5lv]::placeholder {
    color: #9ca3af;
}

.is-dark .journal-form-input[b-d6nn5jw5lv]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Mood Selector */
.journal-mood-selector[b-d6nn5jw5lv] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.journal-mood-option[b-d6nn5jw5lv] {
    /* JRNL-D-4 (2026-07-08): stacked emoji-over-label cards (~64px tall)
       compacted to inline pills (~34px) — the two picker rows were taller than
       the writing area they sit above. Same treatment as .journal-type-option
       (kept as independent classes per the J-D-3 divergence note). */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--theme-border);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--theme-text-primary);
}

.journal-mood-emoji[b-d6nn5jw5lv] {
    font-size: 1.1rem; /* JRNL-D-4: sized for the inline pill */
    line-height: 1;
}

.journal-mood-label[b-d6nn5jw5lv] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.journal-mood-option:hover[b-d6nn5jw5lv] {
    border-color: color-mix(in srgb, var(--theme-accent) 50%, transparent);
    background: color-mix(in srgb, var(--theme-accent) 5%, transparent);
}

.journal-mood-option.selected[b-d6nn5jw5lv] {
    border-color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
}

.journal-mood-option.selected .journal-mood-label[b-d6nn5jw5lv] {
    color: var(--theme-accent);
}

/* Responsive */
@media (max-width: 768px) {
    .journal-page .list-page-stats[b-d6nn5jw5lv] {
        grid-template-columns: repeat(2, 1fr);
    }

    .journal-mood-selector[b-d6nn5jw5lv] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    /* MOBILE-AUDIT-6: phones use the shared one-row stat strip (utilities.css). */
    .journal-page .list-page-stats[b-d6nn5jw5lv] {
        grid-template-columns: none;
        gap: 8px;
    }

    .journal-mood-option[b-d6nn5jw5lv] {
        padding: 5px 10px; /* JRNL-D-4: pill proportions on small screens */
    }

    .journal-mood-emoji[b-d6nn5jw5lv] {
        font-size: 1rem;
    }
}

/* Journal Type Selector (J-D-3, 2026-05-22) — entry-dialog picker. Same shape
   as .journal-mood-selector so the two picker rows read as a family. Kept as
   independent classes (rather than reusing .journal-mood-*) so future divergence
   — per-type theme colors, additional types, etc. — doesn't ripple back into
   the mood styles. */
.journal-type-selector[b-d6nn5jw5lv] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.journal-type-option[b-d6nn5jw5lv] {
    /* JRNL-D-4 (2026-07-08): compacted to inline pills — see the matching
       .journal-mood-option note. min-width dropped: pills size to content. */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 2px solid var(--theme-border);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--theme-text-primary);
}

.journal-type-emoji[b-d6nn5jw5lv] {
    font-size: 1.1rem; /* JRNL-D-4: sized for the inline pill */
    line-height: 1;
}

.journal-type-label[b-d6nn5jw5lv] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.journal-type-option:hover[b-d6nn5jw5lv] {
    border-color: color-mix(in srgb, var(--theme-accent) 50%, transparent);
    background: color-mix(in srgb, var(--theme-accent) 5%, transparent);
}

.journal-type-option.selected[b-d6nn5jw5lv] {
    border-color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 10%, transparent);
}

.journal-type-option.selected .journal-type-label[b-d6nn5jw5lv] {
    color: var(--theme-accent);
}

@media (max-width: 768px) {
    .journal-type-selector[b-d6nn5jw5lv] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .journal-type-option[b-d6nn5jw5lv] {
        padding: 8px 10px;
        min-width: 64px;
    }

    .journal-type-emoji[b-d6nn5jw5lv] {
        font-size: 1.25rem;
    }
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */
.is-dark .entry-card[b-d6nn5jw5lv] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .entry-card:hover[b-d6nn5jw5lv] {
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 8px 24px transparent;
}

.is-dark .date-day[b-d6nn5jw5lv] {
    color: #f1f5f9;
}

.is-dark .entry-date[b-d6nn5jw5lv] {
    background: rgba(124, 58, 237, 0.2);
}

.is-dark .entry-title[b-d6nn5jw5lv] {
    color: #f1f5f9;
}

.is-dark .entry-preview[b-d6nn5jw5lv],
.is-dark .entry-time[b-d6nn5jw5lv] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .entry-footer[b-d6nn5jw5lv] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .journal-mood-option[b-d6nn5jw5lv] {
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.2);
}

.is-dark .journal-mood-label[b-d6nn5jw5lv] {
    color: rgba(255, 255, 255, 0.7);
}
/* /Pages/KnowledgeBase/KnowledgeBase.razor.rz.scp.css */
/* ============================================
   KNOWLEDGE BASE PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - only KB-specific
   styles remain here (centered header, 
   category grid, article cards, AI answer)
   ============================================ */

/* Layout override - KB uses centered header */
.kb-layout[b-dcdqfxsxeu] {
    max-width: 1100px;
}

/* ============================================
   HEADER - Centered style for KB
   ============================================ */
.kb-header[b-dcdqfxsxeu] {
    text-align: center;
    margin-bottom: 32px;
}

.kb-title[b-dcdqfxsxeu] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--theme-text-primary, #1e293b);
}

.kb-title svg[b-dcdqfxsxeu] {
    width: 36px;
    height: 36px;
}

.kb-subtitle[b-dcdqfxsxeu] {
    margin: 0 0 12px;
    font-size: 1.1rem;
    color: var(--theme-text-secondary, #64748b);
}

/* AI Badge */
.kb-ai-badge[b-dcdqfxsxeu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.kb-ai-dot[b-dcdqfxsxeu] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    animation: kb-pulse-b-dcdqfxsxeu 2s ease-in-out infinite;
}

@keyframes kb-pulse-b-dcdqfxsxeu {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   SEARCH - Centered wider search
   ============================================ */
.kb-search[b-dcdqfxsxeu] {
    max-width: 600px;
    margin: 0 auto 40px;
}

.kb-search .list-page-search-wrapper[b-dcdqfxsxeu] {
    position: relative;
}

.kb-search-input[b-dcdqfxsxeu] {
    padding: 16px 44px 16px 48px !important;
    font-size: 1rem;
}

.kb-search-clear[b-dcdqfxsxeu] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--theme-text-muted, #94a3b8);
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.kb-search-clear:hover[b-dcdqfxsxeu] {
    color: var(--theme-text-primary, #1e293b);
}

/* ============================================
   AI ANSWER CARD
   ============================================ */
.kb-ai-answer-card[b-dcdqfxsxeu] {
    padding: 20px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06), rgba(var(--theme-accent-rgb, 99, 102, 241), 0.03));
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    margin-bottom: 8px;
}

.kb-ai-answer-header[b-dcdqfxsxeu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.kb-ai-answer-icon[b-dcdqfxsxeu] {
    font-size: 1.25rem;
}

.kb-ai-answer-label[b-dcdqfxsxeu] {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.kb-ai-answer-sources[b-dcdqfxsxeu] {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
}

.kb-ai-answer-body[b-dcdqfxsxeu] {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--theme-text-primary, #1e293b);
}

.kb-ai-answer-body p[b-dcdqfxsxeu] {
    margin: 0 0 8px;
}

.kb-ai-answer-body p:last-child[b-dcdqfxsxeu] {
    margin-bottom: 0;
}

.kb-ai-answer-footer[b-dcdqfxsxeu] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}

.kb-ai-answer-footer-label[b-dcdqfxsxeu] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted, #94a3b8);
}

/* Loading skeleton */
.kb-ai-loading[b-dcdqfxsxeu] {
    opacity: 0.7;
}

.kb-ai-thinking[b-dcdqfxsxeu] {
    animation: kb-bob-b-dcdqfxsxeu 1s ease-in-out infinite;
}

@keyframes kb-bob-b-dcdqfxsxeu {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.kb-skeleton-line[b-dcdqfxsxeu] {
    height: 14px;
    border-radius: 6px;
    background: var(--theme-border, #e2e8f0);
    margin-bottom: 10px;
    animation: kb-shimmer-b-dcdqfxsxeu 1.5s ease-in-out infinite;
}

.kb-skeleton-line.short[b-dcdqfxsxeu] {
    width: 60%;
}

@keyframes kb-shimmer-b-dcdqfxsxeu {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Empty state */
.kb-empty-state[b-dcdqfxsxeu] {
    text-align: center;
    padding: 48px 24px;
    color: var(--theme-text-muted, #94a3b8);
}

.kb-empty-state svg[b-dcdqfxsxeu] {
    margin-bottom: 12px;
    opacity: 0.4;
}

.kb-empty-state p[b-dcdqfxsxeu] {
    margin: 0 0 16px;
    font-size: 1rem;
}

/* Skeleton loading cards */
.kb-skeleton-card[b-dcdqfxsxeu] {
    pointer-events: none;
    min-height: 100px;
}

.kb-skeleton-circle[b-dcdqfxsxeu] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin: 0 auto 12px;
    background: var(--theme-border, #e2e8f0);
    animation: kb-shimmer-b-dcdqfxsxeu 1.5s ease-in-out infinite;
}

/* AI Answer actions row */
.kb-ai-answer-actions[b-dcdqfxsxeu] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* ============================================
   SECTIONS
   ============================================ */
.kb-section[b-dcdqfxsxeu] {
    margin-bottom: 48px;
}

.kb-section-title[b-dcdqfxsxeu] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 20px;
    color: var(--theme-text-primary, #1e293b);
}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.kb-categories-grid[b-dcdqfxsxeu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.kb-category-card[b-dcdqfxsxeu] {
    padding: 20px;
    border-radius: 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.kb-category-card:hover[b-dcdqfxsxeu] {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.kb-category-card.selected[b-dcdqfxsxeu] {
    border-color: var(--theme-accent, #6366f1);
    box-shadow: 0 0 0 2px var(--theme-accent, #6366f1);
}

.kb-category-icon[b-dcdqfxsxeu] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.kb-category-icon svg[b-dcdqfxsxeu] {
    width: 24px;
    height: 24px;
    color: white;
}

.kb-category-name[b-dcdqfxsxeu] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 4px;
    color: var(--theme-text-primary, #1e293b);
}

.kb-category-count[b-dcdqfxsxeu] {
    font-size: 0.8rem;
    margin: 0;
    color: var(--theme-text-secondary, #64748b);
}

/* ============================================
   ARTICLE CARDS
   ============================================ */
.kb-articles-grid[b-dcdqfxsxeu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.kb-article-card[b-dcdqfxsxeu] {
    padding: 20px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.kb-article-card:hover[b-dcdqfxsxeu] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.kb-article-title[b-dcdqfxsxeu] {
    font-size: 1rem;
    font-weight: 600;
    margin: 12px 0 8px;
    color: var(--theme-text-primary, #1e293b);
}

.kb-article-excerpt[b-dcdqfxsxeu] {
    font-size: 0.875rem;
    margin: 0 0 12px;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
}

.kb-article-meta[b-dcdqfxsxeu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

/* ============================================
   HELP SECTION
   ============================================ */
.kb-help-section[b-dcdqfxsxeu] {
    margin-bottom: 24px;
}

.kb-help-card[b-dcdqfxsxeu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-radius: 14px;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.kb-help-content h3[b-dcdqfxsxeu] {
    margin: 0 0 4px;
    font-size: 1.1rem;
    color: var(--theme-text-primary, #1e293b);
}

.kb-help-content p[b-dcdqfxsxeu] {
    margin: 0;
    color: var(--theme-text-secondary, #64748b);
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .kb-category-card[b-dcdqfxsxeu],
.is-dark .kb-article-card[b-dcdqfxsxeu],
.is-dark .kb-help-card[b-dcdqfxsxeu] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .kb-ai-answer-card[b-dcdqfxsxeu] {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12), rgba(30, 41, 59, 0.6));
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
    backdrop-filter: blur(12px);
}

.is-dark .kb-ai-answer-body[b-dcdqfxsxeu] {
    color: #e2e8f0;
}

.is-dark .kb-skeleton-line[b-dcdqfxsxeu] {
    background: rgba(255, 255, 255, 0.1);
}

.is-dark .kb-search-clear[b-dcdqfxsxeu] {
    color: #94a3b8;
}

.is-dark .kb-search-clear:hover[b-dcdqfxsxeu] {
    color: #f1f5f9;
}

.is-dark .kb-title[b-dcdqfxsxeu],
.is-dark .kb-section-title[b-dcdqfxsxeu],
.is-dark .kb-category-name[b-dcdqfxsxeu],
.is-dark .kb-article-title[b-dcdqfxsxeu],
.is-dark .kb-help-content h3[b-dcdqfxsxeu] {
    color: #f1f5f9;
}

.is-dark .kb-subtitle[b-dcdqfxsxeu],
.is-dark .kb-category-count[b-dcdqfxsxeu],
.is-dark .kb-article-excerpt[b-dcdqfxsxeu],
.is-dark .kb-help-content p[b-dcdqfxsxeu] {
    color: #94a3b8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .kb-title[b-dcdqfxsxeu] {
        font-size: 1.5rem;
    }
    
    .kb-categories-grid[b-dcdqfxsxeu] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .kb-articles-grid[b-dcdqfxsxeu] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .kb-help-card[b-dcdqfxsxeu] {
        flex-direction: column;
        text-align: center;
    }
    
    .kb-help-card .list-page-btn-primary[b-dcdqfxsxeu] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/KnowledgeBase/KnowledgeBaseArticle.razor.rz.scp.css */
/* ============================================
   KNOWLEDGE BASE ARTICLE STYLES
   ============================================ */

/* Page Container */
.kb-article-page[b-3o2irhdc22] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    background: #f8fafc;
}

.kb-page-container[b-3o2irhdc22] {
    max-width: 1200px;
    margin: 0 auto;
}

.kb-content-grid[b-3o2irhdc22] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
}

.kb-main-column[b-3o2irhdc22] {
    min-width: 0;
}

.kb-sidebar-column[b-3o2irhdc22] {
    min-width: 0;
}

/* Hero Section */
.kb-article-hero[b-3o2irhdc22] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 20px 40px;
    border-radius: 16px;
    margin-bottom: 40px;
    color: white;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.kb-article-hero[b-3o2irhdc22]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
}

.kb-hero-content[b-3o2irhdc22] {
    position: relative;
    z-index: 1;
}

/* Breadcrumb */
.breadcrumb-nav[b-3o2irhdc22] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    opacity: 0.9;
}

.breadcrumb-link[b-3o2irhdc22] {
    color: white;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.breadcrumb-link:hover[b-3o2irhdc22] {
    opacity: 0.8;
    color: white;
}

.breadcrumb-separator[b-3o2irhdc22] {
    opacity: 0.6;
}

/* Article Title & Meta */
.article-title[b-3o2irhdc22] {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.article-meta[b-3o2irhdc22] {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}

.article-meta-item[b-3o2irhdc22] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    opacity: 0.95;
}

.category-badge[b-3o2irhdc22] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Article Container */
.article-container[b-3o2irhdc22] {
    background: white;
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

/* Article Content */
.article-content[b-3o2irhdc22] {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #2d3748;
    max-width: 900px;
    margin: 0 auto;
}

.article-content h1[b-3o2irhdc22],
.article-content h2[b-3o2irhdc22],
.article-content h3[b-3o2irhdc22],
.article-content h4[b-3o2irhdc22] {
    color: #1a202c;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content h1[b-3o2irhdc22] { font-size: 2.25rem; }
.article-content h2[b-3o2irhdc22] { font-size: 1.875rem; }
.article-content h3[b-3o2irhdc22] { font-size: 1.5rem; }

.article-content p[b-3o2irhdc22] {
    margin-bottom: 1.5rem;
}

.article-content img[b-3o2irhdc22] {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.article-content blockquote[b-3o2irhdc22] {
    border-left: 4px solid #667eea;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #4a5568;
    background: #f7fafc;
    padding: 1.5rem;
    border-radius: 8px;
}

.article-content ul[b-3o2irhdc22],
.article-content ol[b-3o2irhdc22] {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content li[b-3o2irhdc22] {
    margin-bottom: 0.5rem;
}

.article-content code[b-3o2irhdc22] {
    background: #f7fafc;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.95em;
    color: #e53e3e;
}

.article-content pre[b-3o2irhdc22] {
    background: #2d3748;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 2rem 0;
}

.article-content pre code[b-3o2irhdc22] {
    background: transparent;
    color: inherit;
    padding: 0;
}

/* Article Actions */
.article-actions[b-3o2irhdc22] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background: #f7fafc;
    border-radius: 12px;
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.back-button[b-3o2irhdc22] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.back-button:hover[b-3o2irhdc22] {
    transform: translateX(-5px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    color: white;
}

/* Sidebar */
.sidebar-section[b-3o2irhdc22] {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 25px;
}

.sidebar-title[b-3o2irhdc22] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-text[b-3o2irhdc22] {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.sidebar-buttons[b-3o2irhdc22] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Related Articles */
.related-article[b-3o2irhdc22] {
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.related-article:last-child[b-3o2irhdc22] {
    border-bottom: none;
}

.related-article:hover[b-3o2irhdc22] {
    padding-left: 8px;
}

.related-article-title[b-3o2irhdc22] {
    font-size: 1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.related-article:hover .related-article-title[b-3o2irhdc22] {
    color: #667eea;
}

.related-article-date[b-3o2irhdc22] {
    font-size: 0.85rem;
    color: #718096;
}

/* Feedback Section */
.feedback-section[b-3o2irhdc22] {
    background: #f7fafc;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    margin-top: 40px;
}

.feedback-title[b-3o2irhdc22] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 15px;
}

.feedback-subtitle[b-3o2irhdc22] {
    color: #64748b;
    margin-bottom: 20px;
}

.feedback-buttons[b-3o2irhdc22] {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

/* Category Chips */
.category-chips[b-3o2irhdc22] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-chip[b-3o2irhdc22] {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-chip:hover[b-3o2irhdc22] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Buttons */
.btn[b-3o2irhdc22] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.btn-primary[b-3o2irhdc22] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.btn-primary:hover[b-3o2irhdc22] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-success[b-3o2irhdc22] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.btn-success:hover[b-3o2irhdc22] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.btn-secondary[b-3o2irhdc22] {
    background: #e2e8f0;
    color: #475569;
}

.btn-secondary:hover[b-3o2irhdc22] {
    background: #cbd5e1;
}

.btn-info[b-3o2irhdc22] {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    color: white;
}

.btn-info:hover[b-3o2irhdc22] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
}

.btn-block[b-3o2irhdc22] {
    width: 100%;
    justify-content: center;
}

/* Loading Skeleton */
.loading-skeleton[b-3o2irhdc22] {
    background: white;
    border-radius: 16px;
    padding: 50px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.skeleton[b-3o2irhdc22] {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-3o2irhdc22 1.5s infinite;
    border-radius: 8px;
}

.skeleton-hero[b-3o2irhdc22] {
    height: 200px;
    margin-bottom: 30px;
    border-radius: 12px;
}

.skeleton-title[b-3o2irhdc22] {
    height: 40px;
    width: 70%;
    margin-bottom: 20px;
}

.skeleton-subtitle[b-3o2irhdc22] {
    height: 20px;
    width: 30%;
    margin-bottom: 40px;
}

.skeleton-line[b-3o2irhdc22] {
    height: 20px;
    margin-bottom: 10px;
}

.skeleton-line-short[b-3o2irhdc22] {
    height: 20px;
    width: 80%;
}

@keyframes skeleton-loading-b-3o2irhdc22 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */

.theme-space .kb-article-page[b-3o2irhdc22],
.theme-winter .kb-article-page[b-3o2irhdc22],
.theme-nature .kb-article-page[b-3o2irhdc22],
.theme-ocean .kb-article-page[b-3o2irhdc22],
.theme-mystic .kb-article-page[b-3o2irhdc22],
.theme-tron .kb-article-page[b-3o2irhdc22] {
    background: transparent;
}

.theme-space .article-container[b-3o2irhdc22],
.theme-winter .article-container[b-3o2irhdc22],
.theme-nature .article-container[b-3o2irhdc22],
.theme-ocean .article-container[b-3o2irhdc22],
.theme-mystic .article-container[b-3o2irhdc22],
.theme-tron .article-container[b-3o2irhdc22] {
    background: rgba(30, 41, 59, 0.9);
    color: #e2e8f0;
}

.theme-space .article-content[b-3o2irhdc22],
.theme-winter .article-content[b-3o2irhdc22],
.theme-nature .article-content[b-3o2irhdc22],
.theme-ocean .article-content[b-3o2irhdc22],
.theme-mystic .article-content[b-3o2irhdc22],
.theme-tron .article-content[b-3o2irhdc22] {
    color: #e2e8f0;
}

.theme-space .article-content h1[b-3o2irhdc22],
.theme-space .article-content h2[b-3o2irhdc22],
.theme-space .article-content h3[b-3o2irhdc22],
.theme-space .article-content h4[b-3o2irhdc22],
.theme-winter .article-content h1[b-3o2irhdc22],
.theme-winter .article-content h2[b-3o2irhdc22],
.theme-winter .article-content h3[b-3o2irhdc22],
.theme-winter .article-content h4[b-3o2irhdc22],
.theme-nature .article-content h1[b-3o2irhdc22],
.theme-nature .article-content h2[b-3o2irhdc22],
.theme-nature .article-content h3[b-3o2irhdc22],
.theme-nature .article-content h4[b-3o2irhdc22],
.theme-ocean .article-content h1[b-3o2irhdc22],
.theme-ocean .article-content h2[b-3o2irhdc22],
.theme-ocean .article-content h3[b-3o2irhdc22],
.theme-ocean .article-content h4[b-3o2irhdc22],
.theme-mystic .article-content h1[b-3o2irhdc22],
.theme-mystic .article-content h2[b-3o2irhdc22],
.theme-mystic .article-content h3[b-3o2irhdc22],
.theme-mystic .article-content h4[b-3o2irhdc22],
.theme-tron .article-content h1[b-3o2irhdc22],
.theme-tron .article-content h2[b-3o2irhdc22],
.theme-tron .article-content h3[b-3o2irhdc22],
.theme-tron .article-content h4[b-3o2irhdc22] {
    color: #f1f5f9;
}

.theme-space .sidebar-section[b-3o2irhdc22],
.theme-winter .sidebar-section[b-3o2irhdc22],
.theme-nature .sidebar-section[b-3o2irhdc22],
.theme-ocean .sidebar-section[b-3o2irhdc22],
.theme-mystic .sidebar-section[b-3o2irhdc22],
.theme-tron .sidebar-section[b-3o2irhdc22] {
    background: rgba(30, 41, 59, 0.9);
}

.theme-space .sidebar-title[b-3o2irhdc22],
.theme-winter .sidebar-title[b-3o2irhdc22],
.theme-nature .sidebar-title[b-3o2irhdc22],
.theme-ocean .sidebar-title[b-3o2irhdc22],
.theme-mystic .sidebar-title[b-3o2irhdc22],
.theme-tron .sidebar-title[b-3o2irhdc22] {
    color: #f1f5f9;
}

.theme-space .related-article-title[b-3o2irhdc22],
.theme-winter .related-article-title[b-3o2irhdc22],
.theme-nature .related-article-title[b-3o2irhdc22],
.theme-ocean .related-article-title[b-3o2irhdc22],
.theme-mystic .related-article-title[b-3o2irhdc22],
.theme-tron .related-article-title[b-3o2irhdc22] {
    color: #e2e8f0;
}

.theme-space .related-article-date[b-3o2irhdc22],
.theme-winter .related-article-date[b-3o2irhdc22],
.theme-nature .related-article-date[b-3o2irhdc22],
.theme-ocean .related-article-date[b-3o2irhdc22],
.theme-mystic .related-article-date[b-3o2irhdc22],
.theme-tron .related-article-date[b-3o2irhdc22] {
    color: #94a3b8;
}

.theme-space .feedback-section[b-3o2irhdc22],
.theme-winter .feedback-section[b-3o2irhdc22],
.theme-nature .feedback-section[b-3o2irhdc22],
.theme-ocean .feedback-section[b-3o2irhdc22],
.theme-mystic .feedback-section[b-3o2irhdc22],
.theme-tron .feedback-section[b-3o2irhdc22] {
    background: rgba(30, 41, 59, 0.7);
}

.theme-space .feedback-title[b-3o2irhdc22],
.theme-winter .feedback-title[b-3o2irhdc22],
.theme-nature .feedback-title[b-3o2irhdc22],
.theme-ocean .feedback-title[b-3o2irhdc22],
.theme-mystic .feedback-title[b-3o2irhdc22],
.theme-tron .feedback-title[b-3o2irhdc22] {
    color: #f1f5f9;
}

.theme-space .article-actions[b-3o2irhdc22],
.theme-winter .article-actions[b-3o2irhdc22],
.theme-nature .article-actions[b-3o2irhdc22],
.theme-ocean .article-actions[b-3o2irhdc22],
.theme-mystic .article-actions[b-3o2irhdc22],
.theme-tron .article-actions[b-3o2irhdc22] {
    background: rgba(30, 41, 59, 0.5);
}

.theme-space .loading-skeleton[b-3o2irhdc22],
.theme-winter .loading-skeleton[b-3o2irhdc22],
.theme-nature .loading-skeleton[b-3o2irhdc22],
.theme-ocean .loading-skeleton[b-3o2irhdc22],
.theme-mystic .loading-skeleton[b-3o2irhdc22],
.theme-tron .loading-skeleton[b-3o2irhdc22] {
    background: rgba(30, 41, 59, 0.9);
}

.theme-space .btn-secondary[b-3o2irhdc22],
.theme-winter .btn-secondary[b-3o2irhdc22],
.theme-nature .btn-secondary[b-3o2irhdc22],
.theme-ocean .btn-secondary[b-3o2irhdc22],
.theme-mystic .btn-secondary[b-3o2irhdc22],
.theme-tron .btn-secondary[b-3o2irhdc22] {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
}

.theme-space .article-content blockquote[b-3o2irhdc22],
.theme-winter .article-content blockquote[b-3o2irhdc22],
.theme-nature .article-content blockquote[b-3o2irhdc22],
.theme-ocean .article-content blockquote[b-3o2irhdc22],
.theme-mystic .article-content blockquote[b-3o2irhdc22],
.theme-tron .article-content blockquote[b-3o2irhdc22] {
    background: rgba(255, 255, 255, 0.05);
    color: #cbd5e1;
}

.theme-space .article-content code[b-3o2irhdc22],
.theme-winter .article-content code[b-3o2irhdc22],
.theme-nature .article-content code[b-3o2irhdc22],
.theme-ocean .article-content code[b-3o2irhdc22],
.theme-mystic .article-content code[b-3o2irhdc22],
.theme-tron .article-content code[b-3o2irhdc22] {
    background: rgba(255, 255, 255, 0.1);
    color: #f87171;
}

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

@media (max-width: 960px) {
    .article-title[b-3o2irhdc22] {
        font-size: 2rem;
    }
    
    .kb-content-grid[b-3o2irhdc22] {
        grid-template-columns: 1fr;
    }
    
    .article-container[b-3o2irhdc22] {
        padding: 30px 20px;
    }
    
    .article-content[b-3o2irhdc22] {
        font-size: 1rem;
    }
    
    .article-actions[b-3o2irhdc22] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .kb-article-hero[b-3o2irhdc22] {
        padding: 40px 20px 30px;
    }
}
/* /Pages/Leads/Leads.razor.rz.scp.css */
/* ============================================
   LEADS PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - minimal overrides here
   ============================================ */

/* No page-specific styles needed - using unified list-page classes */
/* /Pages/Learn/KnowledgeExplorer.razor.rz.scp.css */
/* Knowledge Explorer Page - Native CSS */
    .knowledge-explorer-page[b-yei843b3ya] {
        --ke-primary: #6366f1;
        --ke-primary-light: #818cf8;
        --ke-secondary: #a855f7;
        --ke-success: #22c55e;
        --ke-warning: #f59e0b;
        --ke-info: #3b82f6;
        --ke-surface: #ffffff;
        --ke-background: #f8fafc;
        --ke-text: #1e293b;
        --ke-text-secondary: #64748b;
        --ke-border: #e2e8f0;
        --ke-gray-dark: #475569;
        --ke-shadow: rgba(0, 0, 0, 0.1);
    }

    .knowledge-explorer-page.dark-theme[b-yei843b3ya] {
        --ke-surface: #1e1e2e;
        --ke-background: #11111b;
        --ke-text: #cdd6f4;
        --ke-text-secondary: #a6adc8;
        --ke-border: #313244;
        --ke-gray-dark: #6c7086;
        --ke-shadow: transparent;
    }

    .knowledge-explorer-container[b-yei843b3ya] {
        max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
        margin: 0 auto;
        padding: 24px;
        color: var(--ke-text);
    }

    /* Page Header */
    .page-header[b-yei843b3ya] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        padding: 20px 24px;
        background: linear-gradient(135deg, var(--ke-info) 0%, #1d4ed8 100%);
        border-radius: 16px;
        color: white;
    }

    .header-content[b-yei843b3ya] {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .header-icon[b-yei843b3ya] {
        width: 40px;
        height: 40px;
        fill: white;
    }

    .page-header h1[b-yei843b3ya] {
        margin: 0;
        font-size: 1.75rem;
        font-weight: 700;
    }

    .page-header .subtitle[b-yei843b3ya] {
        margin: 0;
        opacity: 0.85;
        font-size: 0.875rem;
    }

    .experiment-badge[b-yei843b3ya] {
        background: var(--ke-warning);
        color: #1e1e1e;
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    /* Topic Selection Panel */
    .topic-selection-panel[b-yei843b3ya] {
        max-width: 700px;
        margin: 24px auto;
        padding: 48px;
        border-radius: 16px;
        text-align: center;
        background: var(--ke-surface);
        box-shadow: 0 4px 20px var(--ke-shadow);
    }

    .topic-selection-content h2[b-yei843b3ya] {
        margin: 16px 0 8px;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .topic-selection-content .description[b-yei843b3ya] {
        color: var(--ke-text-secondary);
        margin-bottom: 24px;
    }

    .lightbulb-icon[b-yei843b3ya] {
        width: 48px;
        height: 48px;
        fill: var(--ke-primary);
    }

    .topic-input-group[b-yei843b3ya] {
        display: flex;
        gap: 12px;
        align-items: stretch;
        max-width: 500px;
        margin: 0 auto 8px;
    }

    .input-wrapper[b-yei843b3ya] {
        flex: 1;
        position: relative;
    }

    .input-wrapper .input-icon[b-yei843b3ya] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        fill: var(--ke-text-secondary);
    }

    .input-wrapper input[b-yei843b3ya] {
        width: 100%;
        padding: 12px 12px 12px 40px;
        border: 2px solid var(--ke-border);
        border-radius: 8px;
        font-size: 1rem;
        background: var(--ke-surface);
        color: var(--ke-text);
        transition: border-color 0.2s;
    }

    .input-wrapper input:focus[b-yei843b3ya] {
        outline: none;
        border-color: var(--ke-primary);
    }

    .input-wrapper input:disabled[b-yei843b3ya] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .helper-text[b-yei843b3ya] {
        font-size: 0.75rem;
        color: var(--ke-text-secondary);
    }

    .divider[b-yei843b3ya] {
        border: none;
        border-top: 1px solid var(--ke-border);
        margin: 24px 0;
    }

    .topic-selection-content h3[b-yei843b3ya] {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 16px;
    }

    /* Existing Graphs Grid */
    .existing-graphs-grid[b-yei843b3ya] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        max-width: 600px;
        margin: 0 auto;
    }

    .graph-card[b-yei843b3ya] {
        background: var(--ke-surface);
        border: 1px solid var(--ke-border);
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .graph-card:hover[b-yei843b3ya], .graph-card:focus[b-yei843b3ya] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
        outline: none;
    }

    .graph-card-header[b-yei843b3ya] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .graph-title[b-yei843b3ya] {
        font-weight: 600;
        font-size: 0.875rem;
    }

    .progress-chip[b-yei843b3ya] {
        background: var(--ke-info);
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .progress-bar-container[b-yei843b3ya] {
        height: 6px;
        background: var(--ke-border);
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .progress-bar[b-yei843b3ya] {
        height: 100%;
        background: var(--ke-primary);
        border-radius: 3px;
        transition: width 0.3s;
    }

    .graph-meta[b-yei843b3ya] {
        font-size: 0.75rem;
        color: var(--ke-text-secondary);
    }


    /* Learning Grid Layout */
    .learning-grid[b-yei843b3ya] {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 16px;
    }

    @media (max-width: 900px) {
        .learning-grid[b-yei843b3ya] {
            grid-template-columns: 1fr;
        }
    }

    /* Graph Canvas Container */
    .graph-canvas-container[b-yei843b3ya] {
        background: var(--ke-surface);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 10px var(--ke-shadow);
    }

    .graph-header[b-yei843b3ya] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background: var(--ke-background);
        border-bottom: 1px solid var(--ke-border);
    }

    .graph-header-left[b-yei843b3ya] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .graph-header-left h2[b-yei843b3ya] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
    }

    .graph-header-right[b-yei843b3ya] {
        display: flex;
        gap: 8px;
    }

    .stat-chip[b-yei843b3ya] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        background: var(--ke-surface);
        border: 1px solid var(--ke-border);
        border-radius: 16px;
        font-size: 0.75rem;
        font-weight: 500;
    }

    .stat-chip svg[b-yei843b3ya] {
        width: 16px;
        height: 16px;
        fill: var(--ke-text-secondary);
    }

    .stat-chip.success[b-yei843b3ya] {
        background: rgba(34, 197, 94, 0.1);
        border-color: var(--ke-success);
        color: var(--ke-success);
    }

    .stat-chip.success svg[b-yei843b3ya] {
        fill: var(--ke-success);
    }

    /* Graph Viewport */
    .graph-viewport[b-yei843b3ya] {
        position: relative;
        min-height: 500px;
        background: 
            radial-gradient(circle at center, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
            linear-gradient(135deg, var(--ke-surface) 0%, var(--ke-background) 100%);
    }

    .knowledge-graph-svg[b-yei843b3ya] {
        display: block;
    }

    .knowledge-node[b-yei843b3ya] {
        transition: transform 0.2s;
    }

    .knowledge-node:hover[b-yei843b3ya] {
        transform: scale(1.1);
    }

    .knowledge-node.selected .node-circle[b-yei843b3ya] {
        filter: drop-shadow(0 0 12px currentColor);
    }

    .node-label[b-yei843b3ya] {
        pointer-events: none;
        fill: var(--ke-text);
    }

    .node-circle[b-yei843b3ya] {
        transition: all 0.2s ease;
    }

    .knowledge-edge[b-yei843b3ya] {
        transition: stroke-width 0.3s;
    }

    .knowledge-edge.explored[b-yei843b3ya] {
        stroke-width: 3;
    }

    .graph-actions[b-yei843b3ya] {
        position: absolute;
        bottom: 16px;
        right: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .btn-icon-float[b-yei843b3ya] {
        width: 40px;
        height: 40px;
        padding: 0;
        border: none;
        border-radius: 8px;
        background: var(--ke-surface);
        box-shadow: 0 2px 8px var(--ke-shadow);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s;
    }

    .btn-icon-float:hover[b-yei843b3ya] {
        transform: scale(1.1);
    }

    .btn-icon-float svg[b-yei843b3ya] {
        width: 20px;
        height: 20px;
        fill: var(--ke-text-secondary);
    }

    /* Graph Legend */
    .graph-legend[b-yei843b3ya] {
        display: flex;
        justify-content: center;
        gap: 24px;
        padding: 12px;
        background: var(--ke-background);
        border-top: 1px solid var(--ke-border);
    }

    .legend-item[b-yei843b3ya] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: var(--ke-text-secondary);
    }

    .legend-dot[b-yei843b3ya] {
        width: 12px;
        height: 12px;
        border-radius: 50%;
    }

    .legend-dot.unexplored[b-yei843b3ya] { background: var(--ke-gray-dark); border: 2px solid #94a3b8; }
    .legend-dot.introduced[b-yei843b3ya] { background: var(--ke-info); }
    .legend-dot.competent[b-yei843b3ya] { background: var(--ke-secondary); box-shadow: 0 0 8px var(--ke-secondary); }
    .legend-dot.mastered[b-yei843b3ya] { background: var(--ke-success); box-shadow: 0 0 12px var(--ke-success); }

    /* Learning Panel */
    .panel-section[b-yei843b3ya] {
        min-height: 600px;
    }

    .learning-panel[b-yei843b3ya] {
        height: 100%;
        min-height: 600px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        background: var(--ke-surface);
        box-shadow: 0 2px 10px var(--ke-shadow);
    }

    .empty-selection[b-yei843b3ya] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px;
        text-align: center;
    }

    .touch-icon[b-yei843b3ya] {
        width: 48px;
        height: 48px;
        fill: var(--ke-text-secondary);
        margin-bottom: 12px;
    }

    .empty-title[b-yei843b3ya] {
        color: var(--ke-text-secondary);
        margin: 8px 0 4px;
    }

    .empty-subtitle[b-yei843b3ya] {
        font-size: 0.75rem;
        color: var(--ke-text-secondary);
        margin: 0;
    }

    /* Node Detail */
    .node-detail[b-yei843b3ya] {
        padding: 20px;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .node-header[b-yei843b3ya] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding-left: 12px;
        margin-bottom: 16px;
        border-left: 4px solid var(--ke-primary);
    }

    .node-header-content h3[b-yei843b3ya] {
        margin: 0 0 8px;
        font-size: 1.125rem;
        font-weight: 600;
    }

    .node-chips[b-yei843b3ya] {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .chip[b-yei843b3ya] {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .chip.default[b-yei843b3ya] { background: #e2e8f0; color: #475569; }
    .chip.info[b-yei843b3ya] { background: var(--ke-info); color: white; }
    .chip.primary[b-yei843b3ya] { background: var(--ke-primary); color: white; }
    .chip.secondary[b-yei843b3ya] { background: var(--ke-secondary); color: white; }
    .chip.success[b-yei843b3ya] { background: var(--ke-success); color: white; }
    .chip.warning[b-yei843b3ya] { background: var(--ke-warning); color: #1e1e1e; }
    .chip.outlined[b-yei843b3ya] { background: transparent; border: 1px solid var(--ke-border); color: var(--ke-text-secondary); }

    .mastery-circle[b-yei843b3ya] {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: conic-gradient(var(--color, var(--ke-primary)) calc(var(--progress, 0) * 3.6deg), var(--ke-border) 0);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 600;
        position: relative;
    }

    .mastery-circle[b-yei843b3ya]::before {
        content: '';
        position: absolute;
        width: 40px;
        height: 40px;
        background: var(--ke-surface);
        border-radius: 50%;
    }

    .mastery-circle span[b-yei843b3ya] {
        position: relative;
        z-index: 1;
    }

    .node-summary[b-yei843b3ya] {
        margin-bottom: 16px;
        padding: 12px;
        background: var(--ke-background);
        border-radius: 8px;
        font-size: 0.875rem;
        line-height: 1.5;
    }

    /* Node Actions */
    .node-actions[b-yei843b3ya] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }

    .node-actions .btn[b-yei843b3ya] {
        justify-content: center;
    }

    /* AI Response Area */
    .ai-response-area[b-yei843b3ya] {
        flex: 1;
        overflow-y: auto;
        min-height: 200px;
        max-height: 400px;
    }

    .ai-loading[b-yei843b3ya] {
        padding: 16px;
        text-align: center;
    }

    .ai-loading span[b-yei843b3ya] {
        display: block;
        margin-top: 8px;
        font-size: 0.75rem;
        color: var(--ke-text-secondary);
    }

    .loading-bar[b-yei843b3ya] {
        height: 4px;
        background: var(--ke-border);
        border-radius: 2px;
        overflow: hidden;
        position: relative;
    }


    .loading-bar[b-yei843b3ya]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 40%;
        background: var(--ke-primary);
        animation: loading-slide-b-yei843b3ya 1s ease-in-out infinite;
    }

    @keyframes loading-slide-b-yei843b3ya {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(350%); }
    }

    .ai-header[b-yei843b3ya] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-weight: 600;
    }

    .ai-header svg[b-yei843b3ya] {
        width: 20px;
        height: 20px;
        fill: var(--ke-primary);
    }

    .ai-content[b-yei843b3ya] {
        padding: 12px;
        background: var(--ke-background);
        border-radius: 8px;
        border-left: 3px solid var(--ke-primary);
        font-size: 14px;
        line-height: 1.6;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .ai-content p[b-yei843b3ya] { margin-bottom: 12px; }
    .ai-content ul[b-yei843b3ya], .ai-content ol[b-yei843b3ya] { margin-left: 20px; margin-bottom: 12px; }
    .ai-content li[b-yei843b3ya] { margin-bottom: 6px; }
    .ai-content code[b-yei843b3ya] { background: var(--ke-border); padding: 2px 6px; border-radius: 4px; }
    .ai-content strong[b-yei843b3ya] { font-weight: 600; }
    .ai-content h1[b-yei843b3ya], .ai-content h2[b-yei843b3ya], .ai-content h3[b-yei843b3ya], .ai-content h4[b-yei843b3ya] { margin-top: 16px; margin-bottom: 8px; }

    /* Chat Input Area */
    .chat-input-area[b-yei843b3ya] {
        margin-top: auto;
        padding-top: 16px;
        border-top: 1px solid var(--ke-border);
    }

    .chat-input-wrapper[b-yei843b3ya] {
        display: flex;
        gap: 8px;
        align-items: flex-end;
    }

    .chat-input-wrapper textarea[b-yei843b3ya] {
        flex: 1;
        padding: 10px;
        border: 2px solid var(--ke-border);
        border-radius: 8px;
        font-size: 0.875rem;
        background: var(--ke-surface);
        color: var(--ke-text);
        resize: none;
        font-family: inherit;
    }

    .chat-input-wrapper textarea:focus[b-yei843b3ya] {
        outline: none;
        border-color: var(--ke-primary);
    }

    .send-btn[b-yei843b3ya] {
        background: var(--ke-primary);
        color: white;
        border-radius: 8px;
        padding: 10px;
    }

    .send-btn svg[b-yei843b3ya] {
        fill: white;
    }

    .btn-icon[b-yei843b3ya] {
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-icon:hover[b-yei843b3ya] {
        background: var(--ke-background);
    }

    .btn-icon svg[b-yei843b3ya] {
        width: 20px;
        height: 20px;
        fill: var(--ke-text-secondary);
    }

    .spinner-small[b-yei843b3ya] {
        width: 18px;
        height: 18px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin-b-yei843b3ya 0.8s linear infinite;
    }

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

    /* Dialog Styles */
    .dialog-overlay[b-yei843b3ya] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        padding: 20px;
    }

    .dialog-content[b-yei843b3ya] {
        background: var(--ke-surface);
        border-radius: 16px;
        max-width: 500px;
        width: 100%;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-shadow: 0 20px 60px transparent;
    }

    .dialog-header[b-yei843b3ya] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid var(--ke-border);
    }

    .dialog-title[b-yei843b3ya] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1.125rem;
        font-weight: 600;
    }

    .dialog-title svg[b-yei843b3ya] {
        width: 24px;
        height: 24px;
        fill: var(--ke-primary);
    }

    .dialog-close-btn[b-yei843b3ya] {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        font-size: 24px;
        cursor: pointer;
        color: var(--ke-text-secondary);
        border-radius: 8px;
    }

    .dialog-close-btn:hover[b-yei843b3ya] {
        background: var(--ke-background);
    }

    .dialog-body[b-yei843b3ya] {
        padding: 20px;
        overflow-y: auto;
        flex: 1;
    }

    .dialog-footer[b-yei843b3ya] {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px 20px;
        border-top: 1px solid var(--ke-border);
    }

    /* Quiz Styles */
    .quiz-question .question-progress[b-yei843b3ya] {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .quiz-question .question-text[b-yei843b3ya] {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .radio-group[b-yei843b3ya] {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .radio-option[b-yei843b3ya] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border: 2px solid var(--ke-border);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .radio-option:hover[b-yei843b3ya] {
        border-color: var(--ke-primary);
    }

    .radio-option.selected[b-yei843b3ya] {
        border-color: var(--ke-primary);
        background: rgba(99, 102, 241, 0.1);
    }

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

    .radio-mark[b-yei843b3ya] {
        width: 20px;
        height: 20px;
        border: 2px solid var(--ke-border);
        border-radius: 50%;
        position: relative;
    }

    .radio-option.selected .radio-mark[b-yei843b3ya],
    .radio-option input:checked ~ .radio-mark[b-yei843b3ya] {
        border-color: var(--ke-primary);
    }

    .radio-option.selected .radio-mark[b-yei843b3ya]::after,
    .radio-option input:checked ~ .radio-mark[b-yei843b3ya]::after {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: var(--ke-primary);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .radio-label[b-yei843b3ya] {
        flex: 1;
    }

    .answer-input[b-yei843b3ya] {
        width: 100%;
        padding: 12px;
        border: 2px solid var(--ke-border);
        border-radius: 8px;
        font-size: 1rem;
        background: var(--ke-surface);
        color: var(--ke-text);
        resize: vertical;
        font-family: inherit;
    }

    .answer-input:focus[b-yei843b3ya] {
        outline: none;
        border-color: var(--ke-primary);
    }

    /* Alert Styles */
    .alert[b-yei843b3ya] {
        padding: 12px 16px;
        border-radius: 8px;
        margin-top: 16px;
        font-size: 0.875rem;
    }

    .alert-success[b-yei843b3ya] {
        background: rgba(34, 197, 94, 0.15);
        border: 1px solid var(--ke-success);
        color: var(--ke-success);
    }

    .alert-warning[b-yei843b3ya] {
        background: rgba(245, 158, 11, 0.15);
        border: 1px solid var(--ke-warning);
        color: #b45309;
    }

    .dark-theme .alert-warning[b-yei843b3ya] {
        color: var(--ke-warning);
    }
/* /Pages/Marketing/AudienceDetail.razor.rz.scp.css */
/* ============================================
   AUDIENCE DETAIL — scoped styles
   AUD-V-1 (2026-06-09). Mirrors CampaignDetail.razor.css (CAMP-V-10/V-11)
   for the detail-page rhythm. Shared shapes (.detail-page, .detail-card,
   .detail-status-badge, .detail-back-link, .detail-empty, .detail-loading)
   live in utilities.css and are NOT redefined here. The .stats-grid /
   .info-items / .related-work-* blocks are still per-page (the "promote to
   utilities.css" refactor noted in OpportunityDetail.razor.css remains
   pending) — mirrored below per the established pattern.
   ============================================ */

/* Header — audience-flavored variant of .campaign-header. */
.audience-header[b-axe5dk5ivj] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.header-top-row[b-axe5dk5ivj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.header-actions[b-axe5dk5ivj] {
    display: flex;
    gap: 8px;
}

.header-profile[b-axe5dk5ivj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-info[b-axe5dk5ivj] {
    flex: 1;
    min-width: 0;
}

/* Icon orb — people-shaped, tinted by audience status. Status accents line
   up with the .detail-status-badge semantic class on the pill next to it.
   Default = violet (distinct from the Campaigns pink so the two Marketing
   detail pages read as siblings, not clones). */
.audience-icon-orb[b-axe5dk5ivj] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Active = green / success — list is live and campaign-reachable. */
.audience-icon-orb.accent-active[b-axe5dk5ivj] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Building = indigo / info — still being assembled. */
.audience-icon-orb.accent-planned[b-axe5dk5ivj] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* Inactive = amber / warning — intentionally dormant, not dead. */
.audience-icon-orb.accent-paused[b-axe5dk5ivj] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Archived = slate / neutral — historical. */
.audience-icon-orb.accent-completed[b-axe5dk5ivj] {
    background: linear-gradient(135deg, #64748b, #475569);
}

.audience-icon-orb.accent-default[b-axe5dk5ivj] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.audience-name[b-axe5dk5ivj] {
    margin: 0 0 8px;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    line-height: 1.2;
}

.audience-badges[b-axe5dk5ivj] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Subtitle — "{N} members · created {date}". */
.audience-subtitle[b-axe5dk5ivj] {
    margin: 10px 0 0;
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #64748b);
}

/* ============================================
   STATS GRID — mirrored per-page (see header note).
   ============================================ */
.stats-grid[b-axe5dk5ivj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-axe5dk5ivj] {
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-axe5dk5ivj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon[b-axe5dk5ivj] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon.primary[b-axe5dk5ivj] { color: var(--theme-primary-ink, var(--theme-primary, #334155)); background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.1); }
.stat-icon.info[b-axe5dk5ivj] { color: #0ea5e9; background: #e0f2fe; }
.stat-icon.success[b-axe5dk5ivj] { color: #10b981; background: #dcfce7; }
.stat-icon.error[b-axe5dk5ivj] { color: #ef4444; background: #fee2e2; }
.stat-icon.warning[b-axe5dk5ivj] { color: #f59e0b; background: #fef3c7; }

.stat-value[b-axe5dk5ivj] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0;
}

.stat-label[b-axe5dk5ivj] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
    margin: 4px 0 0 0;
}

/* ============================================
   INFO ITEMS — Audience Information section.
   ============================================ */
.info-items[b-axe5dk5ivj] {
    display: flex;
    flex-direction: column;
}

.info-item[b-axe5dk5ivj] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.info-item:last-child[b-axe5dk5ivj] {
    border-bottom: none;
    padding-bottom: 0;
}

.info-item:first-child[b-axe5dk5ivj] {
    padding-top: 0;
}

.info-label[b-axe5dk5ivj] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 100px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--theme-text-secondary, #475569);
}

.info-value[b-axe5dk5ivj] {
    flex: 1;
    word-break: break-word;
    color: var(--theme-text-primary, #0f172a);
    font-size: 0.925rem;
}

/* ============================================
   DESCRIPTION — body copy inside the description card.
   ============================================ */
.description-text[b-axe5dk5ivj] {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.925rem;
}

/* ============================================
   MEMBER PICKER ROW — mirrors CAMP-V-11 link-picker.
   ============================================ */
.link-picker-row[b-axe5dk5ivj] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.link-picker-select[b-axe5dk5ivj] {
    flex: 1;
    min-width: 0;
}

/* ============================================
   MEMBERS ROLLUP — mirrors the related-work block.
   ============================================ */
.related-work-grid[b-axe5dk5ivj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.related-work-grid.single-column[b-axe5dk5ivj] {
    grid-template-columns: 1fr;
}

.related-work-bucket[b-axe5dk5ivj] {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--theme-surface-subtle, rgba(241, 245, 249, 0.5));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    min-width: 0;
}

.related-work-bucket-header[b-axe5dk5ivj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bucket-label[b-axe5dk5ivj] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary, #475569);
}

.bucket-count[b-axe5dk5ivj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--theme-primary, #334155);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
}

.related-work-list[b-axe5dk5ivj] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related-work-item[b-axe5dk5ivj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--theme-border-subtle, rgba(226, 232, 240, 0.5));
    min-width: 0;
}

.related-work-item:last-child[b-axe5dk5ivj] {
    border-bottom: none;
}

.related-work-item-title[b-axe5dk5ivj] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.related-work-item-title[b-axe5dk5ivj] {
    color: var(--theme-link-color, var(--theme-primary));
}

a.related-work-item-title:hover[b-axe5dk5ivj] {
    text-decoration: underline;
}

.related-work-item-meta[b-axe5dk5ivj] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
}

/* Per-row layout hosting the main stack + right-aligned × remove button.
   Hover-revealed for cleaner default appearance (CAMP-V-11 pattern). */
.related-work-item.linked-opp-row[b-axe5dk5ivj] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.linked-opp-main[b-axe5dk5ivj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unlink-btn[b-axe5dk5ivj] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--theme-text-secondary, #94a3b8);
    cursor: pointer;
    opacity: 0;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.related-work-item.linked-opp-row:hover .unlink-btn[b-axe5dk5ivj],
.unlink-btn:focus-visible[b-axe5dk5ivj] {
    opacity: 1;
}

.unlink-btn:hover[b-axe5dk5ivj] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.unlink-btn:disabled[b-axe5dk5ivj] {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Touch / coarse-pointer devices: no hover state — always show the button. */
@media (hover: none) {
    .unlink-btn[b-axe5dk5ivj] {
        opacity: 0.7;
    }
}

/* Inline empty-state — shown when the audience has zero members. */
.empty-linked-inline[b-axe5dk5ivj] {
    margin: 0;
    padding: 12px 14px;
    background: var(--theme-surface-subtle, rgba(241, 245, 249, 0.5));
    border: 1px dashed var(--theme-border, #e2e8f0);
    border-radius: 8px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    line-height: 1.5;
}

.empty-linked-inline strong[b-axe5dk5ivj] {
    color: var(--theme-text-primary, #0f172a);
}

.empty-linked-inline a[b-axe5dk5ivj] {
    color: var(--theme-link-color, var(--theme-primary));
    text-decoration: none;
    font-weight: 600;
}

.empty-linked-inline a:hover[b-axe5dk5ivj] {
    text-decoration: underline;
}

/* ============================================
   DARK THEMES — sweep mirroring CampaignDetail.razor.css.
   ============================================ */
.is-dark .audience-header[b-axe5dk5ivj] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.is-dark .audience-name[b-axe5dk5ivj] {
    color: rgba(255, 255, 255, 0.98);
}

.is-dark .audience-subtitle[b-axe5dk5ivj] {
    color: rgba(255, 255, 255, 0.65);
}

.is-dark .stat-card[b-axe5dk5ivj] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .stat-value[b-axe5dk5ivj] {
    color: #f1f5f9;
}

.is-dark .stat-label[b-axe5dk5ivj] {
    color: #cbd5e1;
}

.is-dark .info-item[b-axe5dk5ivj] {
    border-color: rgba(148, 163, 184, 0.12);
}

.is-dark .info-value[b-axe5dk5ivj] {
    color: #f1f5f9;
}

.is-dark .description-text[b-axe5dk5ivj] {
    color: rgba(255, 255, 255, 0.75);
}

.is-dark .related-work-bucket[b-axe5dk5ivj] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .related-work-item[b-axe5dk5ivj] {
    border-color: rgba(148, 163, 184, 0.1);
}

.is-dark .related-work-item-title[b-axe5dk5ivj] {
    color: #f1f5f9;
}

.is-dark .bucket-label[b-axe5dk5ivj] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .unlink-btn[b-axe5dk5ivj] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .unlink-btn:hover[b-axe5dk5ivj] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.is-dark .empty-linked-inline[b-axe5dk5ivj] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .empty-linked-inline strong[b-axe5dk5ivj] {
    color: rgba(255, 255, 255, 0.95);
}

/* ============================================
   RESPONSIVE — mirrors CampaignDetail breakpoints.
   ============================================ */
@media (max-width: 600px) {
    .audience-header[b-axe5dk5ivj] {
        padding: 1.25rem;
    }

    .header-profile[b-axe5dk5ivj] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .audience-icon-orb[b-axe5dk5ivj] {
        width: 64px;
        height: 64px;
    }

    .audience-name[b-axe5dk5ivj] {
        font-size: 1.5rem;
    }

    .header-top-row[b-axe5dk5ivj] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Phone — picker and Add button stack vertically so the SearchableSelect
   doesn't get crushed below ~360px. */
@media (max-width: 540px) {
    .link-picker-row[b-axe5dk5ivj] {
        flex-direction: column;
        align-items: stretch;
    }
    .link-picker-row .nts-btn[b-axe5dk5ivj] {
        align-self: flex-end;
    }
}
/* /Pages/Marketing/AudienceDialog.razor.rz.scp.css */
/* ============================================
   AUDIENCE DIALOG — form-specific styles
   AUD-V-3 (2026-06-09). This dialog shipped with markup referencing
   .form-stack / .section-label / .helper-text / .row / .col-md-6 but no
   scoped CSS — section-label and helper-text rendered unstyled (illegible
   on dark themes) and the .row/.col-md-6 pairs are dead Bootstrap names
   (Bootstrap fully removed), so two-column rows stacked full-width.
   Definitions mirror ObjectiveDialog.razor.css / AssetDialog.razor.css.
   (Uses BaseDialog for common dialog chrome.)
   ============================================ */

/* Vertical rhythm for the whole form */
.form-stack[b-mha7fso9hx] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Section headers — quiet uppercase break between Basic Info / Targeting
   Criteria, mirrors .objective-section-label. */
.section-label[b-mha7fso9hx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-top: 4px;
}

.is-dark .section-label[b-mha7fso9hx] {
    color: rgba(255, 255, 255, 0.6);
}

/* Label spacing — global .form-group themes color but not rhythm; give
   labels a consistent gap from their input. */
.form-group[b-mha7fso9hx] {
    margin-bottom: 0; /* .form-stack gap owns vertical rhythm */
}

.form-group label[b-mha7fso9hx] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 5px;
    color: #374151;
}

.is-dark .form-group label[b-mha7fso9hx] {
    color: rgba(255, 255, 255, 0.9);
}

/* Helper text under inputs — the line that was rendering near-black on
   dark surfaces. */
.helper-text[b-mha7fso9hx] {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

.is-dark .helper-text[b-mha7fso9hx] {
    color: rgba(255, 255, 255, 0.55);
}

/* Two-column rows — the markup kept Bootstrap-era .row/.col-md-6 names;
   Bootstrap is gone, so define them here (scoped, so no global bleed).
   Preserve-internal-symbols: cheaper than renaming every pair in markup. */
.row[b-mha7fso9hx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.col-md-6[b-mha7fso9hx] {
    min-width: 0;
}

/* AI-analyze hint callout — replaces dead Bootstrap alert/d-flex classes.
   Info-tinted box; icon pinned, no shrink, aligned to first text line. */
.ai-hint[b-mha7fso9hx] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.08);
    color: #0c4a6e;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.ai-hint svg[b-mha7fso9hx] {
    flex-shrink: 0;
    margin-top: 1px;
    color: #0ea5e9;
}

.is-dark .ai-hint[b-mha7fso9hx] {
    background: rgba(14, 165, 233, 0.12);
    border-color: rgba(14, 165, 233, 0.3);
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .ai-hint svg[b-mha7fso9hx] {
    color: #38bdf8;
}

hr[b-mha7fso9hx] {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 4px 0;
}

.is-dark hr[b-mha7fso9hx] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Phone — collapse two-column rows */
@media (max-width: 480px) {
    .row[b-mha7fso9hx] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Marketing/AudienceSmartTargetingDialog.razor.rz.scp.css */
.recommendation-card[b-mqu1dq8fjb] {
        border-left: 4px solid var(--theme-border, #e2e8f0); /* AUD-V-3: was var(--bs-secondary) — dead Bootstrap variable */
        transition: all 0.3s ease;
    }

    .recommendation-card:hover[b-mqu1dq8fjb] {
        transform: translateX(4px);
    }

/* AUD-V-3 (2026-06-09): .alert/.alert-info were dead Bootstrap names —
   rendered unstyled. Scoped definitions per the dialog wiring checklist
   (DIALOG_UX_PATTERN.md). py-2/mb-2/small remain in markup but the
   .alert.small modifier carries their intent. */
.alert[b-mqu1dq8fjb] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.alert-info[b-mqu1dq8fjb] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.alert.small[b-mqu1dq8fjb] {
    font-size: 0.8rem;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.is-dark .alert-info[b-mqu1dq8fjb] {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
    color: rgba(255, 255, 255, 0.85);
}
/* /Pages/Marketing/CampaignDetail.razor.rz.scp.css */
/* ============================================
   CAMPAIGN DETAIL — scoped styles
   CAMP-V-10 (2026-05-14). Mirrors OpportunityDetail.razor.css / ContactDetail
   / AccountDetail patterns for the detail-page rhythm. Shared shapes
   (.detail-page, .stats-grid, .stat-card, .detail-card, .related-work-*,
   .detail-status-badge, .info-items/.info-item) live in utilities.css and
   are NOT redefined here — only campaign-specific elements (header, icon
   orb tints, empty-state nudge) are scoped to this file.

   When the cross-detail-page CSS migration to utilities.css happens (see
   OpportunityDetail.razor.css → "this is the trigger to promote the shared
   shapes" note), this file shrinks to just the orb tints + empty-state
   block + dark-theme overrides.
   ============================================ */

/* Header — campaign-flavored variant of .opportunity-header. */
.campaign-header[b-3zzzwar83o] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.header-top-row[b-3zzzwar83o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.header-actions[b-3zzzwar83o] {
    display: flex;
    gap: 8px;
}

.header-profile[b-3zzzwar83o] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-info[b-3zzzwar83o] {
    flex: 1;
    min-width: 0;
}

/* Icon orb — megaphone-shaped, tinted by campaign status. Status accents
   line up with the .detail-status-badge semantic class used on the badge
   right next to it, so the user reads "active campaign" twice — once via
   the green orb, once via the green pill — without needing to scan.
   Default (no status / unknown status) is a neutral slate so it still
   reads as a "campaign" entity rather than blending into the surface. */
.campaign-icon-orb[b-3zzzwar83o] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Active = green / success — campaign is live right now. */
.campaign-icon-orb.accent-active[b-3zzzwar83o] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Planned = indigo / info — queued, not yet started. */
.campaign-icon-orb.accent-planned[b-3zzzwar83o] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

/* Paused = amber / warning — temporarily halted, intentionally not killed. */
.campaign-icon-orb.accent-paused[b-3zzzwar83o] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Completed = slate / neutral — done, archival rather than urgent. */
.campaign-icon-orb.accent-completed[b-3zzzwar83o] {
    background: linear-gradient(135deg, #64748b, #475569);
}

/* Default / unknown status = pink (the Campaigns family color in the
   sub-nav). Keeps brand consistency when status is null/empty. */
.campaign-icon-orb.accent-default[b-3zzzwar83o] {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.campaign-name[b-3zzzwar83o] {
    margin: 0 0 8px;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    line-height: 1.2;
}

.campaign-badges[b-3zzzwar83o] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Subtitle — "{start} – {end} · {N} days ({M} weeks)". Mirrors
   .opportunity-subtitle styling. */
.campaign-subtitle[b-3zzzwar83o] {
    margin: 10px 0 0;
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #64748b);
}

/* CAMP-V-14.4 (2026-05-14): Linked-Objective chip row in the header.
   Mirrors OpportunityDetail's .opportunity-linked-row + .linked-chip
   patterns (those classes live in OpportunityDetail's scoped CSS, so
   they're redefined here rather than imported). Single chip today
   (only Objective); leaves room for a second chip (e.g., parent
   Audience) without restructuring. */
.campaign-linked-row[b-3zzzwar83o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.linked-chip[b-3zzzwar83o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 999px;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, background 0.15s ease;
}

.linked-chip:hover[b-3zzzwar83o] {
    filter: brightness(1.05);
    background: var(--theme-surface, #ffffff);
}

.linked-chip-label[b-3zzzwar83o] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

/* Dark-theme variant */
.is-dark .linked-chip[b-3zzzwar83o] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.is-dark .linked-chip:hover[b-3zzzwar83o] {
    background: rgba(255, 255, 255, 0.12);
}

.is-dark .linked-chip-label[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.65);
}

/* Empty-state for the Linked Opportunities rollup — rendered when no
   opportunities have been attributed to this campaign yet. Uses the
   standard .detail-card chrome but with a single paragraph rather than
   a populated rollup. Less visual weight than an actual rollup so it
   doesn't dominate the page when there's no signal yet. */
.empty-linked-state .empty-linked-text[b-3zzzwar83o] {
    margin: 0;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.95rem;
    line-height: 1.6;
}

.empty-linked-state .empty-linked-text a[b-3zzzwar83o] {
    color: var(--theme-accent, #6366f1);
    text-decoration: none;
    font-weight: 600;
}

.empty-linked-state .empty-linked-text a:hover[b-3zzzwar83o] {
    text-decoration: underline;
}

.empty-linked-state .empty-linked-text strong[b-3zzzwar83o] {
    color: var(--theme-text-primary, #0f172a);
}

/* Single-column variant of the related-work-grid for cases where there's
   only one bucket (Linked Opportunities on Campaign — no Invoices/WorkItems
   side-buckets like OpportunityDetail has). Without this override the grid
   gets a half-width column on wide screens which reads as broken. */
.related-work-grid.single-column[b-3zzzwar83o] {
    grid-template-columns: 1fr;
}

/* ============================================
   DARK THEMES — sweep mirroring OpportunityDetail.razor.css pattern.
   Slightly elevated header surface + adjusted shadow weight so the
   detail page reads as a "raised card" on the dark canvas rather than
   blending in. Status-accent gradients use the same hues; the dark
   background helps them pop without further tweaking.
   ============================================ */
.is-dark .campaign-header[b-3zzzwar83o] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.is-dark .campaign-name[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.98);
}

.is-dark .campaign-subtitle[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.65);
}

.is-dark .empty-linked-state .empty-linked-text[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .empty-linked-state .empty-linked-text strong[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.95);
}

/* ============================================
   LINK PICKER ROW — CAMP-V-11 (2026-05-14): inline opportunity attribution
   surface inside the Linked Opportunities card. SearchableSelect on the
   left grows to fill, primary Link button on the right. Margin-bottom
   gives breathing room between the picker and either the populated
   bucket or the inline "no links yet" line.
   ============================================ */
.link-picker-row[b-3zzzwar83o] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.link-picker-select[b-3zzzwar83o] {
    flex: 1;
    min-width: 0;
}

/* CAMP-V-16 (2026-05-14): "+ Create new" affordance row, sits between
   the picker and the bucket. Visually a text link, not a button — the
   primary path is "link existing" (the populated picker above), this is
   the secondary path for when the user realizes they need to create
   the entity from scratch. Subtle to keep the create flow discoverable
   but not competing with the primary action. */
.link-create-row[b-3zzzwar83o] {
    display: flex;
    justify-content: flex-start;
    margin: -6px 0 14px;
    padding: 0 4px;
}

.link-create-link[b-3zzzwar83o] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px dashed transparent;
    border-radius: 6px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.link-create-link:hover:not(:disabled)[b-3zzzwar83o] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
}

.link-create-link:disabled[b-3zzzwar83o] {
    cursor: wait;
    opacity: 0.6;
}

.link-create-link svg[b-3zzzwar83o] {
    flex-shrink: 0;
    opacity: 0.7;
}

.link-create-link:hover:not(:disabled) svg[b-3zzzwar83o] {
    opacity: 1;
}

/* Dark theme — keep the link readable against tinted surfaces. */
.is-dark .link-create-link[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.65);
}

.is-dark .link-create-link:hover:not(:disabled)[b-3zzzwar83o] {
    color: rgba(199, 210, 254, 1);
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(99, 102, 241, 0.3);
}

/* CAMP-V-11 (2026-05-14): per-row layout for linked opportunities — needs
   to host both the existing main-content stack AND a right-aligned ×
   unlink button. The main stack flexes to fill, the unlink button sits
   flush right, hover-revealed for cleaner default appearance.
   Overrides the column flex direction from .related-work-item to row. */
.related-work-item.linked-opp-row[b-3zzzwar83o] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.linked-opp-main[b-3zzzwar83o] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unlink-btn[b-3zzzwar83o] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--theme-text-secondary, #94a3b8);
    cursor: pointer;
    opacity: 0;
    transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.related-work-item.linked-opp-row:hover .unlink-btn[b-3zzzwar83o],
.unlink-btn:focus-visible[b-3zzzwar83o] {
    opacity: 1;
}

.unlink-btn:hover[b-3zzzwar83o] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.unlink-btn:disabled[b-3zzzwar83o] {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Touch / coarse-pointer devices: no hover state, so always show the
   unlink button — otherwise it's invisible on mobile. */
@media (hover: none) {
    .unlink-btn[b-3zzzwar83o] {
        opacity: 0.7;
    }
}

/* Inline empty-state replacement — short-form line shown ONLY when zero
   opportunities are linked. Replaces the prior empty-state nudge that
   pointed users at /opportunities. With the picker now sitting right
   above this line, the directional pointer is no longer needed. */
.empty-linked-inline[b-3zzzwar83o] {
    margin: 0;
    padding: 12px 14px;
    background: var(--theme-surface-subtle, rgba(241, 245, 249, 0.5));
    border: 1px dashed var(--theme-border, #e2e8f0);
    border-radius: 8px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    line-height: 1.5;
}

.empty-linked-inline strong[b-3zzzwar83o] {
    color: var(--theme-text-primary, #0f172a);
}

/* Dark-theme sweep for V-11 additions. */
.is-dark .unlink-btn[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .unlink-btn:hover[b-3zzzwar83o] {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

.is-dark .empty-linked-inline[b-3zzzwar83o] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .empty-linked-inline strong[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.95);
}

/* Phone — picker and Link button stack vertically so the SearchableSelect
   doesn't get crushed below ~360px. */
@media (max-width: 540px) {
    .link-picker-row[b-3zzzwar83o] {
        flex-direction: column;
        align-items: stretch;
    }
    .link-picker-row .nts-btn[b-3zzzwar83o] {
        align-self: flex-end;
    }
}

/* ============================================
   STATS GRID — CAMP-V-10.10 (2026-05-14): mirrored from OpportunityDetail
   / ContactDetail / AccountDetail per-page CSS. These shapes are NOT in
   utilities.css yet — pre-launch QA caught my incorrect assumption that
   they were. The "promote to utilities.css" refactor noted in
   OpportunityDetail.razor.css is still pending; until it happens, every
   detail page redefines this block.
   ============================================ */
.stats-grid[b-3zzzwar83o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-3zzzwar83o] {
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-3zzzwar83o] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon[b-3zzzwar83o] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon.primary[b-3zzzwar83o] { color: var(--theme-primary-ink, var(--theme-primary, #334155)); background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.1); }
.stat-icon.info[b-3zzzwar83o] { color: #0ea5e9; background: #e0f2fe; }
.stat-icon.success[b-3zzzwar83o] { color: #10b981; background: #dcfce7; }
.stat-icon.error[b-3zzzwar83o] { color: #ef4444; background: #fee2e2; }
.stat-icon.warning[b-3zzzwar83o] { color: #f59e0b; background: #fef3c7; }

.stat-value[b-3zzzwar83o] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0;
}

.stat-label[b-3zzzwar83o] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
    margin: 4px 0 0 0;
}

/* ============================================
   INFO ITEMS — Campaign Information section.
   ============================================ */
/* CAMP-INFO-POLISH (2026-06-19): the key/value grid now lives in utilities.css as the shared
   .detail-info-* classes (Campaign + Opportunity + future detail pages). Nothing scoped here. */

/* ============================================
   DESCRIPTION — body copy inside the description detail card.
   Mirrored from ContactDetail.razor.css.
   ============================================ */
.description-text[b-3zzzwar83o] {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.925rem;
}

/* ============================================
   RELATED WORK — Linked Opportunities rollup. Mirrored from
   OpportunityDetail.razor.css's related-work block. The .single-column
   variant on .related-work-grid override is already defined above for
   single-bucket campaigns (no Invoices/WorkItems side-buckets on this
   page yet — those are v1.1 work).
   ============================================ */
.related-work-grid[b-3zzzwar83o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.related-work-bucket[b-3zzzwar83o] {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--theme-surface-subtle, rgba(241, 245, 249, 0.5));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    min-width: 0;
}

.related-work-bucket-header[b-3zzzwar83o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bucket-label[b-3zzzwar83o] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary, #475569);
}

.bucket-count[b-3zzzwar83o] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--theme-primary, #334155);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
}

.related-work-list[b-3zzzwar83o] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related-work-item[b-3zzzwar83o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--theme-border-subtle, rgba(226, 232, 240, 0.5));
    min-width: 0;
}

.related-work-item:last-child[b-3zzzwar83o] {
    border-bottom: none;
}

.related-work-item-title[b-3zzzwar83o] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.related-work-item-title[b-3zzzwar83o] {
    color: var(--theme-link-color, var(--theme-primary));
}

a.related-work-item-title:hover[b-3zzzwar83o] {
    text-decoration: underline;
}

.related-work-item-meta[b-3zzzwar83o] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
}

.related-work-bucket-more[b-3zzzwar83o] {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--theme-link-color, var(--theme-primary));
    text-decoration: none;
}

.related-work-bucket-more:hover[b-3zzzwar83o] {
    text-decoration: underline;
}

/* Dark-theme sweep for the per-page additions — mirrors OpportunityDetail. */
.is-dark .stat-card[b-3zzzwar83o] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .stat-value[b-3zzzwar83o] {
    color: #f1f5f9;
}

.is-dark .stat-label[b-3zzzwar83o] {
    color: #cbd5e1;
}

.is-dark .description-text[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.75);
}

.is-dark .related-work-bucket[b-3zzzwar83o] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .related-work-item[b-3zzzwar83o] {
    border-color: rgba(148, 163, 184, 0.1);
}

.is-dark .related-work-item-title[b-3zzzwar83o] {
    color: #f1f5f9;
}

.is-dark .bucket-label[b-3zzzwar83o] {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   RESPONSIVE — phone (≤480px) stacks the header profile vertically so
   the orb sits above the name rather than pushing it to a narrow column.
   Mirrors how OpportunityDetail / AccountDetail handle small viewports.
   ============================================ */
@media (max-width: 600px) {
    .campaign-header[b-3zzzwar83o] {
        padding: 1.25rem;
    }

    .header-profile[b-3zzzwar83o] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .campaign-icon-orb[b-3zzzwar83o] {
        width: 64px;
        height: 64px;
    }

    .campaign-name[b-3zzzwar83o] {
        font-size: 1.5rem;
    }

    .header-top-row[b-3zzzwar83o] {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ============================================
   CAMP-GANTT-1 (2026-06-16): read-only campaign timeline.
   Purpose-built (NOT the /gantt page — that's a heavy page, not a component),
   but borrows its status palette via the global --gantt-status-* vars so colors
   stay consistent across surfaces. Percentage-positioned so the whole fixed
   campaign window fits the card — no horizontal scroll, no zoom.
   ============================================ */
.camp-timeline[b-3zzzwar83o] { margin-top: 4px; }

.camp-timeline-row[b-3zzzwar83o] {
    display: flex;
    align-items: center;
    min-height: 34px;
}
.camp-timeline-row + .camp-timeline-row[b-3zzzwar83o] {
    border-top: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.05);
}

.camp-timeline-label[b-3zzzwar83o] {
    flex: 0 0 200px;
    width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    overflow: hidden;
    font-size: 0.85rem;
}
.camp-timeline-label a[b-3zzzwar83o] {
    color: var(--theme-text-primary, #1e293b);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.camp-timeline-label a:hover[b-3zzzwar83o] { color: var(--theme-primary-ink, var(--theme-primary, #6366f1)); text-decoration: underline; }

.camp-timeline-dot[b-3zzzwar83o] {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--theme-text-muted, #64748b);
}

.camp-timeline-track[b-3zzzwar83o] {
    position: relative;
    flex: 1 1 auto;
    height: 34px;
    border-left: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.camp-timeline-headrow[b-3zzzwar83o] { min-height: 26px; margin-bottom: 2px; }
.camp-timeline-headlabel[b-3zzzwar83o] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary, #64748b);
}
.camp-timeline-headtrack[b-3zzzwar83o] { height: 26px; }

.camp-timeline-week[b-3zzzwar83o] {
    position: absolute;
    top: 6px;
    transform: translateX(-1px);
    font-size: 0.7rem;
    color: var(--theme-text-secondary, #64748b);
    white-space: nowrap;
    border-left: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    padding-left: 4px;
    pointer-events: none;
}

.camp-timeline-today[b-3zzzwar83o] {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    z-index: 2;
}
.camp-timeline-today-pill[b-3zzzwar83o] {
    font-size: 0.62rem;
    font-weight: 600;
    color: #fff;
    background: var(--theme-danger, #ef4444);
    border-radius: 6px;
    padding: 1px 6px;
    white-space: nowrap;
}
.camp-timeline-today-line[b-3zzzwar83o] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed var(--theme-danger, #ef4444);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.camp-timeline-bar[b-3zzzwar83o] {
    position: absolute;
    top: 7px;
    height: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: filter 0.12s ease, box-shadow 0.12s ease;
}
/* CAMP-GANTT-1.2: bars open the task editor in-place — signal it's clickable. */
.camp-timeline-bar:hover[b-3zzzwar83o] {
    filter: brightness(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* CAMP-UX-1 (2026-07-16): visible one-click complete on each timeline row —
   the teardown showed the bar's click-to-edit reads as a secret handshake;
   completion needed an explicit, always-visible control. Rides the success
   token (a completion IS a status change, so borrowing the status color is
   semantically correct here, unlike the nav-button case). */
.camp-timeline-check[b-3zzzwar83o] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--theme-border, #cbd5e1);
    border-radius: 50%;
    background: transparent;
    color: transparent;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.camp-timeline-check svg[b-3zzzwar83o] {
    width: 12px;
    height: 12px;
}

.camp-timeline-check:hover:not(:disabled)[b-3zzzwar83o] {
    border-color: var(--theme-text-success, #16a34a);
    color: var(--theme-text-success, #16a34a);
    background: color-mix(in srgb, var(--theme-text-success, #16a34a) 12%, transparent);
}

.camp-timeline-check.is-done[b-3zzzwar83o] {
    border-color: var(--theme-text-success, #16a34a);
    background: var(--theme-text-success, #16a34a);
    color: #ffffff;
    cursor: default;
}
.camp-timeline-bar-label[b-3zzzwar83o] {
    font-size: 0.72rem;
    color: #fff;
    padding: 0 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.camp-timeline-bar.tl-open[b-3zzzwar83o]       { background: linear-gradient(135deg, var(--gantt-status-open-a, #60a5fa), var(--gantt-status-open-b, #3b82f6)); }
.camp-timeline-bar.tl-inprogress[b-3zzzwar83o] { background: linear-gradient(135deg, var(--gantt-status-inprogress-a, #fbbf24), var(--gantt-status-inprogress-b, #f59e0b)); }
.camp-timeline-bar.tl-scheduled[b-3zzzwar83o]  { background: linear-gradient(135deg, var(--gantt-status-scheduled-a, #a78bfa), var(--gantt-status-scheduled-b, #8b5cf6)); }
.camp-timeline-bar.tl-planning[b-3zzzwar83o]   { background: linear-gradient(135deg, var(--gantt-status-planning-a, #67e8f9), var(--gantt-status-planning-b, #22d3ee)); }
.camp-timeline-bar.tl-testing[b-3zzzwar83o]    { background: linear-gradient(135deg, var(--gantt-status-testing-a, #fb923c), var(--gantt-status-testing-b, #f97316)); }
.camp-timeline-bar.tl-complete[b-3zzzwar83o]   { background: linear-gradient(135deg, var(--gantt-status-complete-a, #34d399), var(--gantt-status-complete-b, #10b981)); }
.camp-timeline-bar.tl-onhold[b-3zzzwar83o]     { background: linear-gradient(135deg, #94a3b8, #64748b); }

.camp-timeline-dot.tl-open[b-3zzzwar83o]       { background: var(--gantt-status-open, #3b82f6); }
.camp-timeline-dot.tl-inprogress[b-3zzzwar83o] { background: var(--gantt-status-inprogress, #f59e0b); }
.camp-timeline-dot.tl-scheduled[b-3zzzwar83o]  { background: var(--gantt-status-scheduled, #8b5cf6); }
.camp-timeline-dot.tl-planning[b-3zzzwar83o]   { background: var(--gantt-status-planning, #22d3ee); }
.camp-timeline-dot.tl-testing[b-3zzzwar83o]    { background: var(--gantt-status-testing, #f97316); }
.camp-timeline-dot.tl-complete[b-3zzzwar83o]   { background: var(--gantt-status-complete, #10b981); }
.camp-timeline-dot.tl-onhold[b-3zzzwar83o]     { background: var(--gantt-status-onhold, #64748b); }

/* Dark themes — keep label text + week ticks legible (mirrors this file's
   explicit per-selector dark overrides). Bars are gradients, fine as-is. */
.is-dark .camp-timeline-label a[b-3zzzwar83o] { color: #f1f5f9; }
.is-dark .camp-timeline-week[b-3zzzwar83o],
.is-dark .camp-timeline-headlabel[b-3zzzwar83o] { color: rgba(255, 255, 255, 0.6); }

/* Narrower label column on small screens so the track keeps usable width. */
@media (max-width: 640px) {
    .camp-timeline-label[b-3zzzwar83o] { flex-basis: 130px; width: 130px; }
}
/* /Pages/Marketing/CampaignDialog.razor.rz.scp.css */
/* ============================================
   CAMPAIGN DIALOG - Form-specific Styles
   ============================================ */

/* Form Layout */
.campaign-form[b-n9w8jgo1pj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campaign-form-row[b-n9w8jgo1pj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 480px) {
    .campaign-form-row[b-n9w8jgo1pj] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.campaign-form-group[b-n9w8jgo1pj] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.campaign-form-group label[b-n9w8jgo1pj] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
}

.required-indicator[b-n9w8jgo1pj] {
    color: #ef4444;
}

/* Text & Textarea Inputs */
.campaign-form-input[b-n9w8jgo1pj] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campaign-form-textarea[b-n9w8jgo1pj] {
    resize: vertical;
    min-height: 72px;
}

.campaign-form-input:focus[b-n9w8jgo1pj] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary, #6366f1));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.campaign-form-input[b-n9w8jgo1pj]::placeholder,
.campaign-form-textarea[b-n9w8jgo1pj]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

/* Character Counter */
.campaign-char-counter[b-n9w8jgo1pj] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    text-align: right;
}

/* Duration Info Box */
.campaign-duration-info[b-n9w8jgo1pj] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    border-radius: 8px;
    color: var(--theme-primary-ink, var(--theme-primary, #1e40af));
    font-size: 0.8125rem;
}

/* Status Info — pure metadata block (status + created date). The
   "View full detail" link previously lived here (CAMP-V-10.6); moved to
   the footer in CAMP-V-12 to match WorkItemDialog's canonical pattern
   per DIALOG_UX_PATTERN.md Rule 3. Back to single column now. */
.campaign-status-info[b-n9w8jgo1pj] {
    padding: 10px 12px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 8px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
}

.campaign-created-date[b-n9w8jgo1pj] {
    display: block;
    margin-top: 4px;
}
/* /Pages/Marketing/Campaigns.razor.rz.scp.css */
/* Campaigns - Scoped CSS (list-page-* classes from utilities.css handle layout) */

/* Dialog */
.dialog-overlay[b-1t6c8rlrx6] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.dialog-container[b-1t6c8rlrx6] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-1t6c8rlrx6 0.25s ease-out;
}

@keyframes slideUp-b-1t6c8rlrx6 {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.dialog-header[b-1t6c8rlrx6] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-title[b-1t6c8rlrx6] {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.dialog-close-btn[b-1t6c8rlrx6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dialog-close-btn:hover[b-1t6c8rlrx6] {
    background: #f3f4f6;
    color: #1f2937;
}

.dialog-body[b-1t6c8rlrx6] {
    padding: 24px;
    overflow-y: auto;
}

.dialog-footer[b-1t6c8rlrx6] {
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-group[b-1t6c8rlrx6] {
    margin-bottom: 16px;
}

.form-group label[b-1t6c8rlrx6] {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
}

/* Dark theme overrides */
.is-dark .dialog-container[b-1t6c8rlrx6] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .dialog-header[b-1t6c8rlrx6] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.is-dark .dialog-title[b-1t6c8rlrx6] {
    color: #f1f5f9;
}

.is-dark .dialog-close-btn[b-1t6c8rlrx6] {
    color: #94a3b8;
}

.is-dark .dialog-close-btn:hover[b-1t6c8rlrx6] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.is-dark .dialog-footer[b-1t6c8rlrx6] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.is-dark .form-group label[b-1t6c8rlrx6] {
    color: rgba(255, 255, 255, 0.9);
}
/* /Pages/Marketing/CampaignSendDialog.razor.rz.scp.css */
/* CAMP-SEND-1 (2026-06-10): Compose & Send dialog. Form chrome comes from the
   shared form-stack/form-input classes; only the send-specific bits live here. */

.send-preview[b-sbgp54otkg] {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
}

.send-preview.ok[b-sbgp54otkg] {
    color: var(--theme-text-muted, #64748b);
}

.send-preview.warn[b-sbgp54otkg] {
    color: #b45309;
}

.send-preview.muted[b-sbgp54otkg] {
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
}

.send-body[b-sbgp54otkg] {
    font-family: 'Cascadia Code', Consolas, monospace;
    font-size: 0.88rem;
    line-height: 1.5;
}

.send-when-row[b-sbgp54otkg] {
    display: flex;
    gap: 20px;
}

.send-when-option[b-sbgp54otkg] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 600;
}

.send-schedule-row[b-sbgp54otkg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 600px) {
    .send-schedule-row[b-sbgp54otkg] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Marketing/Dashboard.razor.rz.scp.css */
/* ============================================
   MARKETING DASHBOARD STYLES - Themed
   ============================================ */

/* Base Variables */
:root[b-v6d9uz4u9j] {
    --mkt-radius: 14px;
    --mkt-radius-sm: 8px;
    --mkt-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page container */
.marketing-page[b-v6d9uz4u9j] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
}

.marketing-container[b-v6d9uz4u9j] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

/* Hero Section */
.marketing-hero[b-v6d9uz4u9j] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border-radius: var(--mkt-radius);
    padding: 40px 32px;
    margin-bottom: 24px;
    color: white;
    box-shadow: 0 10px 40px rgba(236, 72, 153, 0.3);
}

.marketing-hero h1[b-v6d9uz4u9j] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 8px;
}

.marketing-hero p[b-v6d9uz4u9j] {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
}

/* Stats Grid */
.marketing-stats-grid[b-v6d9uz4u9j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-v6d9uz4u9j] {
    padding: 24px;
    border-radius: var(--mkt-radius);
    color: white;
    position: relative;
    overflow: hidden;
    transition: var(--mkt-transition);
}

.stat-card:hover[b-v6d9uz4u9j] {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.stat-card.pink[b-v6d9uz4u9j] {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.3);
}

.stat-card.purple[b-v6d9uz4u9j] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
}

.stat-card.green[b-v6d9uz4u9j] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.stat-card.blue[b-v6d9uz4u9j] {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
}

.stat-card-header[b-v6d9uz4u9j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.stat-card-label[b-v6d9uz4u9j] {
    font-size: 0.9rem;
    opacity: 0.9;
}

.stat-card-icon[b-v6d9uz4u9j] {
    width: 24px;
    height: 24px;
    opacity: 0.9;
}

.stat-card-value[b-v6d9uz4u9j] {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.stat-card-caption[b-v6d9uz4u9j] {
    font-size: 0.8rem;
    opacity: 0.75;
}

/* Performance Section */
.performance-section[b-v6d9uz4u9j] {
    backdrop-filter: blur(10px);
    border-radius: var(--mkt-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.performance-header[b-v6d9uz4u9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.performance-header svg[b-v6d9uz4u9j] {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.performance-grid[b-v6d9uz4u9j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.performance-item[b-v6d9uz4u9j] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.performance-label[b-v6d9uz4u9j] {
    font-size: 0.9rem;
    font-weight: 600;
}

.performance-label.pink[b-v6d9uz4u9j] { color: #ec4899; }
.performance-label.purple[b-v6d9uz4u9j] { color: #8b5cf6; }
.performance-label.green[b-v6d9uz4u9j] { color: #10b981; }
.performance-label.blue[b-v6d9uz4u9j] { color: #0ea5e9; }

.progress-bar[b-v6d9uz4u9j] {
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill[b-v6d9uz4u9j] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.progress-bar-fill.pink[b-v6d9uz4u9j] { background: linear-gradient(90deg, #ec4899, #db2777); }
.progress-bar-fill.purple[b-v6d9uz4u9j] { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.progress-bar-fill.green[b-v6d9uz4u9j] { background: linear-gradient(90deg, #10b981, #059669); }
.progress-bar-fill.blue[b-v6d9uz4u9j] { background: linear-gradient(90deg, #0ea5e9, #0284c7); }
.progress-bar-fill.success[b-v6d9uz4u9j] { background: linear-gradient(90deg, #10b981, #059669); }
.progress-bar-fill.warning[b-v6d9uz4u9j] { background: linear-gradient(90deg, #f59e0b, #d97706); }
.progress-bar-fill.error[b-v6d9uz4u9j] { background: linear-gradient(90deg, #ef4444, #dc2626); }

.performance-description[b-v6d9uz4u9j] {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Quick Actions Section */
.quick-actions-section[b-v6d9uz4u9j] {
    backdrop-filter: blur(10px);
    border-radius: var(--mkt-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.quick-actions-header[b-v6d9uz4u9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.quick-actions-header svg[b-v6d9uz4u9j] {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.quick-actions-grid[b-v6d9uz4u9j] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.action-btn[b-v6d9uz4u9j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: var(--mkt-radius-sm);
    border: 2px solid;
    background: transparent;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--mkt-transition);
    text-decoration: none;
}

.action-btn svg[b-v6d9uz4u9j] {
    width: 20px;
    height: 20px;
}

.action-btn.blue[b-v6d9uz4u9j] {
    border-color: #3b82f6;
    color: #3b82f6;
}

.action-btn.blue:hover[b-v6d9uz4u9j] {
    background: #3b82f6;
    color: white;
}

.action-btn.purple[b-v6d9uz4u9j] {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.action-btn.purple:hover[b-v6d9uz4u9j] {
    background: #8b5cf6;
    color: white;
}

.action-btn.green[b-v6d9uz4u9j] {
    border-color: #10b981;
    color: #10b981;
}

.action-btn.green:hover[b-v6d9uz4u9j] {
    background: #10b981;
    color: white;
}

.action-btn.cyan[b-v6d9uz4u9j] {
    border-color: #0ea5e9;
    color: #0ea5e9;
}

.action-btn.cyan:hover[b-v6d9uz4u9j] {
    background: #0ea5e9;
    color: white;
}

/* Marketing Insights Section */
.insights-section[b-v6d9uz4u9j] {
    backdrop-filter: blur(10px);
    border-radius: var(--mkt-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.insights-header[b-v6d9uz4u9j] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.insights-header svg[b-v6d9uz4u9j] {
    width: 24px;
    height: 24px;
    color: #f59e0b;
}

.insights-grid[b-v6d9uz4u9j] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.insight-card[b-v6d9uz4u9j] {
    padding: 16px 20px;
    border-radius: var(--mkt-radius-sm);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
}

.insight-card svg[b-v6d9uz4u9j] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.insight-card.success[b-v6d9uz4u9j] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.insight-card.warning[b-v6d9uz4u9j] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.insight-card.info[b-v6d9uz4u9j] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.insight-card.error[b-v6d9uz4u9j] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Loading Skeleton */
.loading-skeleton[b-v6d9uz4u9j] {
    height: 100px;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-v6d9uz4u9j 1.5s infinite;
    border-radius: var(--mkt-radius-sm);
}

@keyframes shimmer-b-v6d9uz4u9j {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Access Denied Section */
.access-denied[b-v6d9uz4u9j] {
    background: white;
    border-radius: 16px;
    padding: 60px 30px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.access-denied svg[b-v6d9uz4u9j] {
    width: 64px;
    height: 64px;
    color: #ec4899;
    margin-bottom: 16px;
}

.access-denied h2[b-v6d9uz4u9j] {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 15px;
}

.access-denied p[b-v6d9uz4u9j] {
    font-size: 1.1rem;
    color: #718096;
    margin: 0 0 30px;
}

.signin-btn[b-v6d9uz4u9j] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 40px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: white;
    border: none;
    border-radius: var(--mkt-radius-sm);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: var(--mkt-transition);
}

.signin-btn:hover[b-v6d9uz4u9j] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4);
}

.signin-btn svg[b-v6d9uz4u9j] {
    width: 20px;
    height: 20px;
}

/* Responsive */
@media (max-width: 1200px) {
    .marketing-stats-grid[b-v6d9uz4u9j] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .performance-grid[b-v6d9uz4u9j] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-actions-grid[b-v6d9uz4u9j] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .insights-grid[b-v6d9uz4u9j] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .marketing-page[b-v6d9uz4u9j] {
        padding: 16px;
        padding-top: 72px;
    }
    
    .marketing-hero[b-v6d9uz4u9j] {
        padding: 32px 20px;
    }
    
    .marketing-hero h1[b-v6d9uz4u9j] {
        font-size: 1.5rem;
    }
    
    .quick-actions-grid[b-v6d9uz4u9j] {
        grid-template-columns: 1fr 1fr;
    }
    
    .performance-grid[b-v6d9uz4u9j] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .marketing-stats-grid[b-v6d9uz4u9j] {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .stat-card[b-v6d9uz4u9j] {
        padding: 16px;
    }
    
    .stat-card-value[b-v6d9uz4u9j] {
        font-size: 1.5rem;
    }
}

/* ============================================
   ☁️ CLOUD THEME
   ============================================ */
.marketing-page.theme-cloud[b-v6d9uz4u9j] {
    background: linear-gradient(180deg, #e0f2fe 0%, #bae6fd 50%, #7dd3fc 100%);
}

.theme-cloud .performance-section[b-v6d9uz4u9j] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .performance-header[b-v6d9uz4u9j] { color: #1e3a5f; }
.theme-cloud .performance-description[b-v6d9uz4u9j] { color: #64748b; }
.theme-cloud .progress-bar[b-v6d9uz4u9j] { background: rgba(0, 0, 0, 0.08); }

.theme-cloud .quick-actions-section[b-v6d9uz4u9j] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .quick-actions-header[b-v6d9uz4u9j] { color: #1e3a5f; }

.theme-cloud .insights-section[b-v6d9uz4u9j] {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.theme-cloud .insights-header[b-v6d9uz4u9j] { color: #1e3a5f; }

/* ============================================
   🚀 SPACE THEME
   ============================================ */
.marketing-page.theme-space[b-v6d9uz4u9j] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 30%, #2d1b69 70%, #1e1b4b 100%);
}

.theme-space .performance-section[b-v6d9uz4u9j] {
    background: rgba(30, 27, 75, 0.8);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .performance-header[b-v6d9uz4u9j] { color: #f1f5f9; }
.theme-space .performance-description[b-v6d9uz4u9j] { color: #94a3b8; }
.theme-space .progress-bar[b-v6d9uz4u9j] { background: rgba(168, 85, 247, 0.2); }

.theme-space .quick-actions-section[b-v6d9uz4u9j] {
    background: rgba(30, 27, 75, 0.8);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .quick-actions-header[b-v6d9uz4u9j] { color: #f1f5f9; }

.theme-space .action-btn.blue[b-v6d9uz4u9j] { border-color: #7dd3fc; color: #7dd3fc; }
.theme-space .action-btn.blue:hover[b-v6d9uz4u9j] { background: #7dd3fc; color: #1e1b4b; }
.theme-space .action-btn.purple[b-v6d9uz4u9j] { border-color: #a78bfa; color: #a78bfa; }
.theme-space .action-btn.purple:hover[b-v6d9uz4u9j] { background: #a78bfa; color: #1e1b4b; }
.theme-space .action-btn.green[b-v6d9uz4u9j] { border-color: #86efac; color: #86efac; }
.theme-space .action-btn.green:hover[b-v6d9uz4u9j] { background: #86efac; color: #1e1b4b; }
.theme-space .action-btn.cyan[b-v6d9uz4u9j] { border-color: #67e8f9; color: #67e8f9; }
.theme-space .action-btn.cyan:hover[b-v6d9uz4u9j] { background: #67e8f9; color: #1e1b4b; }

.theme-space .insights-section[b-v6d9uz4u9j] {
    background: rgba(30, 27, 75, 0.8);
    box-shadow: 0 4px 24px transparent;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.theme-space .insights-header[b-v6d9uz4u9j] { color: #f1f5f9; }

.theme-space .loading-skeleton[b-v6d9uz4u9j] {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.1) 25%, rgba(168, 85, 247, 0.2) 50%, rgba(168, 85, 247, 0.1) 75%);
}

/* ============================================
   ❄️ WINTER THEME
   ============================================ */
.marketing-page.theme-winter[b-v6d9uz4u9j] {
    background: linear-gradient(180deg, #164e63 0%, #155e75 30%, #0e7490 70%, #0891b2 100%);
}

.theme-winter .performance-section[b-v6d9uz4u9j] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .performance-header[b-v6d9uz4u9j] { color: #f0f9ff; }
.theme-winter .performance-description[b-v6d9uz4u9j] { color: #bae6fd; }
.theme-winter .progress-bar[b-v6d9uz4u9j] { background: rgba(186, 230, 253, 0.3); }

.theme-winter .quick-actions-section[b-v6d9uz4u9j] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .quick-actions-header[b-v6d9uz4u9j] { color: #f0f9ff; }

.theme-winter .action-btn.blue[b-v6d9uz4u9j] { border-color: #7dd3fc; color: #7dd3fc; }
.theme-winter .action-btn.blue:hover[b-v6d9uz4u9j] { background: #7dd3fc; color: #164e63; }
.theme-winter .action-btn.purple[b-v6d9uz4u9j] { border-color: #c4b5fd; color: #c4b5fd; }
.theme-winter .action-btn.purple:hover[b-v6d9uz4u9j] { background: #c4b5fd; color: #164e63; }
.theme-winter .action-btn.green[b-v6d9uz4u9j] { border-color: #86efac; color: #86efac; }
.theme-winter .action-btn.green:hover[b-v6d9uz4u9j] { background: #86efac; color: #164e63; }
.theme-winter .action-btn.cyan[b-v6d9uz4u9j] { border-color: #67e8f9; color: #67e8f9; }
.theme-winter .action-btn.cyan:hover[b-v6d9uz4u9j] { background: #67e8f9; color: #164e63; }

.theme-winter .insights-section[b-v6d9uz4u9j] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-winter .insights-header[b-v6d9uz4u9j] { color: #f0f9ff; }

/* ============================================
   🌿 NATURE THEME
   ============================================ */
.marketing-page.theme-nature[b-v6d9uz4u9j] {
    background: linear-gradient(180deg, #14532d 0%, #166534 30%, #15803d 70%, #22c55e 100%);
}

.theme-nature .performance-section[b-v6d9uz4u9j] {
    background: rgba(187, 247, 208, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .performance-header[b-v6d9uz4u9j] { color: #f0fdf4; }
.theme-nature .performance-description[b-v6d9uz4u9j] { color: #bbf7d0; }
.theme-nature .progress-bar[b-v6d9uz4u9j] { background: rgba(187, 247, 208, 0.3); }

.theme-nature .quick-actions-section[b-v6d9uz4u9j] {
    background: rgba(187, 247, 208, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .quick-actions-header[b-v6d9uz4u9j] { color: #f0fdf4; }

.theme-nature .action-btn.blue[b-v6d9uz4u9j] { border-color: #7dd3fc; color: #7dd3fc; }
.theme-nature .action-btn.blue:hover[b-v6d9uz4u9j] { background: #7dd3fc; color: #14532d; }
.theme-nature .action-btn.purple[b-v6d9uz4u9j] { border-color: #c4b5fd; color: #c4b5fd; }
.theme-nature .action-btn.purple:hover[b-v6d9uz4u9j] { background: #c4b5fd; color: #14532d; }
.theme-nature .action-btn.green[b-v6d9uz4u9j] { border-color: #86efac; color: #86efac; }
.theme-nature .action-btn.green:hover[b-v6d9uz4u9j] { background: #86efac; color: #14532d; }
.theme-nature .action-btn.cyan[b-v6d9uz4u9j] { border-color: #67e8f9; color: #67e8f9; }
.theme-nature .action-btn.cyan:hover[b-v6d9uz4u9j] { background: #67e8f9; color: #14532d; }

.theme-nature .insights-section[b-v6d9uz4u9j] {
    background: rgba(187, 247, 208, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(187, 247, 208, 0.3);
}

.theme-nature .insights-header[b-v6d9uz4u9j] { color: #f0fdf4; }

/* ============================================
   🌊 OCEAN THEME
   ============================================ */
.marketing-page.theme-ocean[b-v6d9uz4u9j] {
    background: linear-gradient(180deg, #0c4a6e 0%, #075985 30%, #0284c7 70%, #0ea5e9 100%);
}

.theme-ocean .performance-section[b-v6d9uz4u9j] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .performance-header[b-v6d9uz4u9j] { color: #f0f9ff; }
.theme-ocean .performance-description[b-v6d9uz4u9j] { color: #bae6fd; }
.theme-ocean .progress-bar[b-v6d9uz4u9j] { background: rgba(186, 230, 253, 0.3); }

.theme-ocean .quick-actions-section[b-v6d9uz4u9j] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .quick-actions-header[b-v6d9uz4u9j] { color: #f0f9ff; }

.theme-ocean .action-btn.blue[b-v6d9uz4u9j] { border-color: #7dd3fc; color: #7dd3fc; }
.theme-ocean .action-btn.blue:hover[b-v6d9uz4u9j] { background: #7dd3fc; color: #0c4a6e; }
.theme-ocean .action-btn.purple[b-v6d9uz4u9j] { border-color: #c4b5fd; color: #c4b5fd; }
.theme-ocean .action-btn.purple:hover[b-v6d9uz4u9j] { background: #c4b5fd; color: #0c4a6e; }
.theme-ocean .action-btn.green[b-v6d9uz4u9j] { border-color: #86efac; color: #86efac; }
.theme-ocean .action-btn.green:hover[b-v6d9uz4u9j] { background: #86efac; color: #0c4a6e; }
.theme-ocean .action-btn.cyan[b-v6d9uz4u9j] { border-color: #67e8f9; color: #67e8f9; }
.theme-ocean .action-btn.cyan:hover[b-v6d9uz4u9j] { background: #67e8f9; color: #0c4a6e; }

.theme-ocean .insights-section[b-v6d9uz4u9j] {
    background: rgba(186, 230, 253, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(186, 230, 253, 0.3);
}

.theme-ocean .insights-header[b-v6d9uz4u9j] { color: #f0f9ff; }
/* /Pages/MediaLibrary/MediaDetailDialog.razor.rz.scp.css */
/* ============================================
   MEDIA DETAIL DIALOG - SCOPED STYLES
   ============================================ */

/* ML-F-5 (2026-05): keyboard host wraps the whole dialog body so we can capture
   ←/→/Esc keydown. tabindex=-1 + outline:none keeps focus invisible — the focus
   indicator lives on the actually-focused button/input inside, never on this wrapper. */
.md-keyboard-host[b-lyy7a8672w] {
    outline: none;
}

.md-detail[b-lyy7a8672w] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Preview area */
.md-preview[b-lyy7a8672w] {
    border-radius: 12px;
    overflow: hidden;
    background: var(--theme-surface-secondary, #f1f5f9);
    max-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.is-dark .md-preview[b-lyy7a8672w] {
    background: rgba(15, 23, 42, 0.6);
}

.md-media[b-lyy7a8672w] {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
}

.md-placeholder[b-lyy7a8672w] {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.4;
}

/* Video unavailable state */
.md-video-unavailable[b-lyy7a8672w] {
    width: 100%;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.md-video-unavailable-icon[b-lyy7a8672w] {
    font-size: 3rem;
    opacity: 0.5;
}

.md-video-unavailable-text[b-lyy7a8672w] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.md-video-unavailable-hint[b-lyy7a8672w] {
    font-size: 0.82rem;
    color: var(--theme-text-muted);
    max-width: 320px;
    line-height: 1.5;
}

/* Info section */
.md-info[b-lyy7a8672w] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.md-name[b-lyy7a8672w] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
}

.md-description[b-lyy7a8672w] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Metadata grid */
.md-meta-grid[b-lyy7a8672w] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (max-width: 480px) {
    .md-meta-grid[b-lyy7a8672w] {
        grid-template-columns: 1fr;
    }
}

.md-meta-item[b-lyy7a8672w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.md-meta-label[b-lyy7a8672w] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
}

.md-meta-value[b-lyy7a8672w] {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

/* Prompt section */
.md-prompt-section[b-lyy7a8672w] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.md-prompt-text[b-lyy7a8672w] {
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    color: var(--theme-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.is-dark .md-prompt-text[b-lyy7a8672w] {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Tags */
.md-tags-section[b-lyy7a8672w] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.md-tags[b-lyy7a8672w] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.md-tag[b-lyy7a8672w] {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--theme-chip-bg, #f1f5f9);
    color: var(--theme-chip-color, #64748b);
    border: 1px solid var(--theme-border, #e2e8f0);
}

/* Clickable preview wrapper */
.md-preview-clickable[b-lyy7a8672w] {
    position: relative;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.md-expand-hint[b-lyy7a8672w] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 8px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.md-expand-hint svg[b-lyy7a8672w] {
    width: 18px;
    height: 18px;
}

.md-preview-clickable:hover .md-expand-hint[b-lyy7a8672w] {
    opacity: 1;
}

/* Fullscreen lightbox.
   ML-F-9 (2026-05-08): bumped z-index 10000 → 200000 so the lightbox renders
   above the parent BaseDialog (z-index: 100000). The lightbox is a sibling of
   BaseDialog in the rendered DOM (placed after </BaseDialog> in this component),
   so simple z-index comparison wins — but the previous 10000 lost to the dialog
   stack and the lightbox opened invisible behind the Asset Details panel. */
.md-lightbox[b-lyy7a8672w] {
    position: fixed;
    inset: 0;
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.92);
    cursor: pointer;
    animation: md-lightbox-in-b-lyy7a8672w 0.2s ease-out;
    padding: 2rem;
}

@keyframes md-lightbox-in-b-lyy7a8672w {
    from { opacity: 0; }
    to { opacity: 1; }
}

.md-lightbox-img[b-lyy7a8672w] {
    max-width: 95vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    cursor: default;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    animation: md-lightbox-zoom-b-lyy7a8672w 0.25s ease-out;
}

@keyframes md-lightbox-zoom-b-lyy7a8672w {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.md-lightbox-close[b-lyy7a8672w] {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.15s;
    z-index: 1;
}

.md-lightbox-close:hover[b-lyy7a8672w] {
    background: rgba(255, 255, 255, 0.25);
}

/* Actions */
.md-actions[b-lyy7a8672w] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    flex-wrap: wrap;
}

/* ============================================
   NAVIGATION BAR (Feature 1)
   ============================================ */
.md-nav[b-lyy7a8672w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.md-nav-btn[b-lyy7a8672w] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-surface-secondary, #f1f5f9);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 50%;
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.md-nav-btn svg[b-lyy7a8672w] {
    width: 20px;
    height: 20px;
}

.md-nav-btn:hover:not(:disabled)[b-lyy7a8672w] {
    background: var(--theme-primary);
    color: white;
    border-color: var(--theme-primary);
}

.md-nav-btn:disabled[b-lyy7a8672w] {
    opacity: 0.3;
    cursor: not-allowed;
}

.md-nav-counter[b-lyy7a8672w] {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--theme-text-muted);
    min-width: 60px;
    text-align: center;
}

.is-dark .md-nav-btn[b-lyy7a8672w] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .md-nav[b-lyy7a8672w] {
    border-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   COPY PROMPT BUTTON (Feature 2)
   ============================================ */
.md-prompt-header[b-lyy7a8672w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.md-copy-btn[b-lyy7a8672w] {
    background: none;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.72rem;
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.md-copy-btn:hover[b-lyy7a8672w] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary);
}

.is-dark .md-copy-btn[b-lyy7a8672w] {
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .md-copy-btn:hover[b-lyy7a8672w] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   GENERATE SIMILAR BUTTON (Feature 3)
   ============================================ */
.md-btn-generate[b-lyy7a8672w] {
    position: relative;
    overflow: hidden;
}
/* /Pages/Memories/AwakeningMemoryPage.razor.rz.scp.css */
/* ============================================
   AWAKENING MEMORY PAGE
   Loading & empty states for /memories/awakening
   ============================================ */

/* M-D-1 (2026-05): loading + empty-state chrome reads --theme-background so
   light themes (Cloud, Winter, Executive default) don't slam the user into a
   black void on a transient loading frame. The cinema viewport itself stays
   intentionally dark when the playback renders (defensible — letterbox); only
   the page chrome harmonizes with theme. */
.memory-loading[b-e98mhsaa0w] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--theme-background, radial-gradient(ellipse at center bottom, #1a0e2e 0%, #0a0612 50%, #000 100%));
    color: var(--theme-text-secondary, rgba(240, 230, 210, 0.7));
    font-size: 0.9rem;
}

.memory-loading-spinner[b-e98mhsaa0w] {
    width: 40px;
    height: 40px;
    border: 3px solid color-mix(in srgb, var(--theme-primary, #fbbf24) 15%, transparent);
    border-top-color: var(--theme-primary, #fbbf24);
    border-radius: 50%;
    animation: memory-spin-b-e98mhsaa0w 0.8s linear infinite;
}

@keyframes memory-spin-b-e98mhsaa0w {
    to { transform: rotate(360deg); }
}

.memory-empty[b-e98mhsaa0w] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    /* M-D-1 (2026-05): empty state chrome reads theme background. */
    background: var(--theme-background, transparent);
}

/* M-F-2 (2026-05): retry/secondary CTA cluster on the load-failed empty state. */
.memory-empty-actions[b-e98mhsaa0w] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.memory-empty-content[b-e98mhsaa0w] {
    text-align: center;
    max-width: 400px;
}

.memory-empty-icon[b-e98mhsaa0w] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.memory-empty-content h2[b-e98mhsaa0w] {
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
}

.memory-empty-content p[b-e98mhsaa0w] {
    color: rgba(100, 116, 139, 0.8);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

/* Dark theme support for empty state */
.is-dark .memory-empty-content h2[b-e98mhsaa0w] {
    color: rgba(240, 240, 240, 0.9);
}

.is-dark .memory-empty-content p[b-e98mhsaa0w] {
    color: rgba(200, 200, 200, 0.6);
}
/* /Pages/Memories/EvolutionMemoryPage.razor.rz.scp.css */
/* ============================================
   EVOLUTION MEMORY PAGE
   Loading & empty states for /memories/evolution/{stage}
   Mirrors AwakeningMemoryPage chrome (scoped CSS can't be
   shared across components, so these are intentionally
   duplicated). Reads --theme-* so light themes don't slam
   into a black void on a transient loading/empty frame.
   ============================================ */
.memory-loading[b-zuzh667slc] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--theme-background, radial-gradient(ellipse at center bottom, #1a0e2e 0%, #0a0612 50%, #000 100%));
    color: var(--theme-text-secondary, rgba(240, 230, 210, 0.7));
    font-size: 0.9rem;
}

.memory-loading-spinner[b-zuzh667slc] {
    width: 40px;
    height: 40px;
    border: 3px solid color-mix(in srgb, var(--theme-primary, #fbbf24) 15%, transparent);
    border-top-color: var(--theme-primary, #fbbf24);
    border-radius: 50%;
    animation: memory-spin-b-zuzh667slc 0.8s linear infinite;
}

@keyframes memory-spin-b-zuzh667slc {
    to { transform: rotate(360deg); }
}

.memory-empty[b-zuzh667slc] {
    min-height: calc(100vh - 56px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--theme-background, transparent);
}

.memory-empty-actions[b-zuzh667slc] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.memory-empty-content[b-zuzh667slc] {
    text-align: center;
    max-width: 400px;
}

.memory-empty-icon[b-zuzh667slc] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.memory-empty-content h2[b-zuzh667slc] {
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
}

.memory-empty-content p[b-zuzh667slc] {
    color: rgba(100, 116, 139, 0.8);
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
}

.is-dark .memory-empty-content h2[b-zuzh667slc] {
    color: rgba(240, 240, 240, 0.9);
}

.is-dark .memory-empty-content p[b-zuzh667slc] {
    color: rgba(200, 200, 200, 0.6);
}
/* /Pages/Mileage/Mileage.razor.rz.scp.css */
/* MILEAGE-GRID-1 (2026-09-23): trip rows as aligned columns. */
.trip-row[b-i692ithpa2] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 130px 90px 140px 110px;
    align-items: center;
    gap: 16px;
}

.trip-route[b-i692ithpa2] { min-width: 0; }

.trip-cell[b-i692ithpa2] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-miles[b-i692ithpa2],
.trip-deduction[b-i692ithpa2] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.trip-deduction[b-i692ithpa2] {
    font-weight: 700;
    color: #16a34a;
}

.is-dark .trip-deduction[b-i692ithpa2] { color: #4ade80; }

@media (max-width: 768px) {
    .trip-row[b-i692ithpa2] {
        grid-template-columns: 1fr auto;
        gap: 4px 12px;
    }
    .trip-route[b-i692ithpa2] { grid-column: 1 / -1; }
    .trip-date[b-i692ithpa2] { grid-column: 1; }
    .trip-deduction[b-i692ithpa2] { grid-column: 2; grid-row: 2; }
    .trip-miles[b-i692ithpa2],
    .trip-vehicle[b-i692ithpa2] { display: none; }
}
/* /Pages/Mileage/MileageDetail.razor.rz.scp.css */
/* ============================================
   MILEAGE DETAIL — page-specific styles on top of list-page utilities
   ============================================ */

.mileage-detail-back[b-9530gn7a1d] {
    margin-bottom: 0.75rem;
}

.mileage-detail-back-link[b-9530gn7a1d] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.mileage-detail-back-link:hover[b-9530gn7a1d] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
}

.mileage-detail-section[b-9530gn7a1d] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.25rem;
}

.mileage-detail-section-title[b-9530gn7a1d] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary, #64748b);
}

.mileage-detail-description[b-9530gn7a1d] {
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9375rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.mileage-detail-empty[b-9530gn7a1d] {
    margin: 0;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.875rem;
    font-style: italic;
}

/* Per-vehicle YTD strip */
.mileage-detail-history-stats[b-9530gn7a1d] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.mileage-detail-history-stats > div[b-9530gn7a1d] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mileage-detail-history-label[b-9530gn7a1d] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 600;
}

.mileage-detail-history-value[b-9530gn7a1d] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

@media (max-width: 480px) {
    .mileage-detail-history-stats[b-9530gn7a1d] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .mileage-detail-section[b-9530gn7a1d] {
        padding: 1rem;
    }
}

/* Dark themes — section card lifts off the page */
.is-dark .mileage-detail-section[b-9530gn7a1d] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}
/* /Pages/Mileage/MileageDialog.razor.rz.scp.css */
/* ============================================
   MILEAGE DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.mileage-form[b-8cfyona6mu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mileage-form-row[b-8cfyona6mu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .mileage-form-row[b-8cfyona6mu] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.mileage-form-group[b-8cfyona6mu] {
    margin-bottom: 8px;
}

.mileage-form-group label[b-8cfyona6mu] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.required-indicator[b-8cfyona6mu] {
    color: #ef4444;
}

/* Form Inputs */
.mileage-form-input[b-8cfyona6mu],
.mileage-form-textarea[b-8cfyona6mu] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    font-family: inherit;
}

.mileage-form-textarea[b-8cfyona6mu] {
    resize: vertical;
    min-height: 80px;
}

.mileage-form-input:focus[b-8cfyona6mu],
.mileage-form-textarea:focus[b-8cfyona6mu] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

/* Character counter */
.mileage-char-counter[b-8cfyona6mu] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    text-align: right;
    margin-top: 2px;
}

/* Field hint — small clarifying text below an input */
.mileage-field-hint[b-8cfyona6mu] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    margin-top: 4px;
    line-height: 1.4;
}

/* Round-trip checkbox row */
.mileage-roundtrip-toggle[b-8cfyona6mu] {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #1e293b);
    user-select: none;
    padding: 0.25rem 0;
    margin: 0 !important;
    font-weight: 500 !important;
}

.mileage-roundtrip-toggle input[type="checkbox"][b-8cfyona6mu] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #16a34a;
}

/* Placeholder styling */
.mileage-form-input[b-8cfyona6mu]::placeholder,
.mileage-form-textarea[b-8cfyona6mu]::placeholder {
    color: var(--theme-text-hint, #9ca3af);
}

/* Estimated Deduction Card */
.mileage-deduction[b-8cfyona6mu] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--theme-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 20%, transparent);
    border-radius: 10px;
    margin-top: 4px;
}

.mileage-deduction-icon[b-8cfyona6mu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-accent) 15%, transparent);
    flex-shrink: 0;
}

.mileage-deduction-icon svg[b-8cfyona6mu] {
    width: 20px;
    height: 20px;
    color: var(--theme-accent);
}

.mileage-deduction-content[b-8cfyona6mu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mileage-deduction-label[b-8cfyona6mu] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.mileage-deduction-amount[b-8cfyona6mu] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-accent);
    line-height: 1.2;
}

.mileage-deduction-note[b-8cfyona6mu] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}
/* /Pages/Newsletter/Newsletter.razor.rz.scp.css */
.nts-news-hero[b-v5rzivs2zk] {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

.nts-news-card[b-v5rzivs2zk] {
    width: 100%;
    max-width: 560px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 20px;
    padding: 44px 36px;
    text-align: center;
}

.nts-news-badge[b-v5rzivs2zk] {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #4f46e5));
    background: color-mix(in srgb, var(--theme-primary, #4f46e5) 12%, transparent);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.nts-news-card h1[b-v5rzivs2zk] {
    margin: 0 0 14px;
    font-size: 30px;
    color: var(--theme-text-primary, #111827);
}

.nts-news-sub[b-v5rzivs2zk] {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--theme-text-secondary, #4b5563);
}

/* Center the embedded form (wrapper-based — ::deep is banned project-wide, GOTCHAS #49). */
.nts-news-formwrap[b-v5rzivs2zk] {
    display: flex;
    justify-content: center;
}

.nts-news-points[b-v5rzivs2zk] {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.nts-news-points li[b-v5rzivs2zk] {
    font-size: 14px;
    color: var(--theme-text-secondary, #4b5563);
    margin: 8px 0;
}
/* /Pages/Notes/NoteDetail.razor.rz.scp.css */
/* NOTE-DETAIL-1 / CHAIN-2 (2026-06-12): the idea's home page. Theme-variable
   driven; chain-links family mirrors NoteViewDialog/GoalDetail (scoped CSS is
   per-component, so each surface carries its own copy — per the established
   per-page detail-CSS convention). */

.detail-loading[b-44731lgy6m] {
    padding: 3rem;
    text-align: center;
    color: var(--theme-text-muted, #94a3b8);
}

.note-missing[b-44731lgy6m] {
    text-align: center;
    padding: 3rem 2rem;
}

.note-missing h2[b-44731lgy6m] {
    margin-bottom: 0.5rem;
}

.note-missing p[b-44731lgy6m] {
    color: var(--theme-text-muted, #94a3b8);
    margin-bottom: 1.5rem;
}

.detail-header[b-44731lgy6m] {
    margin-bottom: 1rem;
}

.detail-back[b-44731lgy6m] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--theme-text-muted, #94a3b8);
    text-decoration: none;
    margin-bottom: 0.5rem;
}

.detail-back:hover[b-44731lgy6m] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

.detail-back svg[b-44731lgy6m] {
    width: 16px;
    height: 16px;
}

.detail-title-row[b-44731lgy6m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.note-badge[b-44731lgy6m] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border, rgba(128, 128, 128, 0.25));
    color: var(--theme-text-muted, #94a3b8);
}

.note-badge svg[b-44731lgy6m] {
    width: 12px;
    height: 12px;
}

.detail-meta[b-44731lgy6m] {
    font-size: 0.82rem;
    color: var(--theme-text-muted, #94a3b8);
    margin-top: 0.35rem;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.detail-actions[b-44731lgy6m] {
    margin-top: 0.75rem;
}

.note-body[b-44731lgy6m] {
    white-space: pre-wrap;
    line-height: 1.6;
    margin: 0;
}

/* ── chain-links family (mirrors NoteViewDialog) ── */

.chain-links-head[b-44731lgy6m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.chain-links-head .detail-card-title[b-44731lgy6m] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
}

.chain-links-head .detail-card-title svg[b-44731lgy6m] {
    width: 18px;
    height: 18px;
}

.chain-links-picker[b-44731lgy6m] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px dashed var(--theme-border, rgba(128, 128, 128, 0.3));
    border-radius: 10px;
    margin-bottom: 0.75rem;
}

.chain-type-toggle[b-44731lgy6m] {
    display: inline-flex;
    gap: 0.25rem;
}

.chain-type-option[b-44731lgy6m] {
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--theme-border, rgba(128, 128, 128, 0.3));
    background: transparent;
    color: var(--theme-text-primary, inherit);
    cursor: pointer;
    font-size: 0.82rem;
}

/* :hover scoped with :not(.is-active) — the hover/active collision trap. */
.chain-type-option:not(.is-active):hover[b-44731lgy6m] {
    border-color: var(--theme-primary, #3b82f6);
}

.chain-type-option.is-active[b-44731lgy6m] {
    border-color: var(--theme-primary, #3b82f6);
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.14);
    font-weight: 600;
}

.chain-links-picker-actions[b-44731lgy6m] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.chain-links-list[b-44731lgy6m] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chain-link[b-44731lgy6m] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--theme-border, rgba(128, 128, 128, 0.2));
    border-radius: 9px;
}

.chain-link-kind[b-44731lgy6m] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #94a3b8);
    flex: 0 0 4.5rem;
}

.chain-link-body[b-44731lgy6m] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.chain-link-title[b-44731lgy6m] {
    color: var(--theme-text-primary, inherit);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.chain-link-title:hover[b-44731lgy6m] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
    text-decoration: underline;
}

.chain-link-title.is-removed[b-44731lgy6m] {
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
}

.chain-link-origin[b-44731lgy6m] {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.14);
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
    flex: 0 0 auto;
}

.chain-link-remove[b-44731lgy6m] {
    flex: 0 0 auto;
    display: inline-flex;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 6px;
}

.chain-link-remove:hover[b-44731lgy6m] {
    color: #ef4444;
}

.chain-link-remove svg[b-44731lgy6m] {
    width: 16px;
    height: 16px;
}

.chain-links-empty[b-44731lgy6m] {
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
    margin: 0;
}
/* /Pages/Notes/NoteDialog.razor.rz.scp.css */
/* NoteDialog form-specific styles (overlay/header/footer handled by BaseDialog) */

.note-form-group[b-2duxzj50r6] {
    margin-bottom: 20px;
}

.note-form-group label[b-2duxzj50r6] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.required-indicator[b-2duxzj50r6] {
    color: #ef4444;
}

.is-dark .note-form-group label[b-2duxzj50r6] {
    color: rgba(255, 255, 255, 0.9);
}

.note-form-input[b-2duxzj50r6] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.15s ease;
    background: white;
    color: #1e293b;
    box-sizing: border-box;
}

.is-dark .note-form-input[b-2duxzj50r6] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.note-form-input:focus[b-2duxzj50r6] {
    outline: none;
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.note-form-input[b-2duxzj50r6]::placeholder {
    color: #9ca3af;
}

.is-dark .note-form-input[b-2duxzj50r6]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.note-form-textarea[b-2duxzj50r6] {
    min-height: 300px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.note-helper-text[b-2duxzj50r6] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 4px;
}

.is-dark .note-helper-text[b-2duxzj50r6] {
    color: rgba(255, 255, 255, 0.5);
}

.note-char-counter[b-2duxzj50r6] {
    text-align: right;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 4px;
}

.is-dark .note-char-counter[b-2duxzj50r6] {
    color: rgba(255, 255, 255, 0.5);
}

.note-metadata[b-2duxzj50r6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.is-dark .note-metadata[b-2duxzj50r6] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.note-metadata-item[b-2duxzj50r6] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #6b7280;
}

.is-dark .note-metadata-item[b-2duxzj50r6] {
    color: rgba(255, 255, 255, 0.6);
}

.note-metadata-item svg[b-2duxzj50r6] {
    width: 14px;
    height: 14px;
}

/* OB-COMPANION-SHARED-1 (2026-06-30): the onboarding-idea companion (floating orb + speech bubble +
   voice + karaoke) moved to the reusable Components/Onboarding/OnboardingDialogCompanion component —
   its styles live in that component's scoped .razor.css now, not here. */
/* /Pages/Notes/Notes.razor.rz.scp.css */
/* ============================================
   NOTES PAGE - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only notes-specific styles here
   ============================================ */

/* Stats - Full Width */
.notes-page .list-page-stats[b-jofffcf5m1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* Search Bar Override - match page styling */
.notes-page .list-page-search-container[b-jofffcf5m1] {
    background: transparent;
    padding: 0;
    margin-bottom: 24px;
    /* NOTE-ARCH-1: seat the Show-archived toggle on the search row instead of
       letting it wrap underneath — search stretches, toggle hugs the right. */
    display: flex;
    align-items: center;
}

.notes-page .list-page-search-container .list-page-search-wrapper[b-jofffcf5m1] {
    flex: 1;
}

.notes-page .list-page-search-wrapper[b-jofffcf5m1] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.9));
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    border-radius: 12px;
}

.notes-page .list-page-search-input[b-jofffcf5m1] {
    background: transparent;
}

/* Note Cards Grid */
.notes-grid[b-jofffcf5m1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Note Card */
.note-card[b-jofffcf5m1] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

/* NOTE-ARCH-1 (2026-07-08): Active | Archived segmented view toggle on the
   search row. Hover scoped :not(.active) — the hover-vs-active collision trap. */
.notes-view-toggle[b-jofffcf5m1] {
    display: inline-flex;
    margin-left: 12px;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    border-radius: 999px;
    padding: 3px;
    background: var(--theme-surface, rgba(255, 255, 255, 0.9));
    flex-shrink: 0;
}

.notes-view-btn[b-jofffcf5m1] {
    border: none;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.notes-view-btn:not(.active):hover[b-jofffcf5m1] {
    color: var(--theme-text-primary, #1e293b);
    background: color-mix(in srgb, var(--theme-accent, #6366f1) 8%, transparent);
}

.notes-view-btn.active[b-jofffcf5m1] {
    background: var(--theme-accent, #6366f1);
    color: #fff;
}

.note-card:hover[b-jofffcf5m1] {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    border-color: rgba(139, 92, 246, 0.3);
}

.note-card-header[b-jofffcf5m1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.note-card-title[b-jofffcf5m1] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.3;
    flex: 1;
    word-break: break-word;
}

.note-private-badge[b-jofffcf5m1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(139, 92, 246, 0.15);
    border-radius: 8px;
    color: #8b5cf6;
    flex-shrink: 0;
}

.note-private-badge svg[b-jofffcf5m1] {
    width: 16px;
    height: 16px;
}

.note-card-body[b-jofffcf5m1] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
    margin: 0 0 auto;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.note-card-footer[b-jofffcf5m1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
}

.note-date[b-jofffcf5m1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.note-date svg[b-jofffcf5m1] {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.note-card-actions[b-jofffcf5m1] {
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.note-card:hover .note-card-actions[b-jofffcf5m1] {
    opacity: 1;
}

/* Icon Buttons - Explicit Styles */
.note-card-actions .list-page-icon-btn[b-jofffcf5m1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.note-card-actions .list-page-icon-btn svg[b-jofffcf5m1] {
    width: 16px;
    height: 16px;
}

.note-card-actions .list-page-icon-btn:hover[b-jofffcf5m1] {
    background: rgba(100, 116, 139, 0.2);
    color: #475569;
}

/* Icon button danger variant */
.note-card-actions .icon-btn-danger[b-jofffcf5m1] {
    color: #dc2626;
}

.note-card-actions .icon-btn-danger:hover[b-jofffcf5m1] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Dark Theme */
.is-dark .list-page-search-wrapper[b-jofffcf5m1] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .note-card[b-jofffcf5m1] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .note-card:hover[b-jofffcf5m1] {
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 12px 28px transparent;
}

.is-dark .note-card-title[b-jofffcf5m1] {
    color: white;
}

.is-dark .note-card-body[b-jofffcf5m1] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .note-card-footer[b-jofffcf5m1] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .note-date[b-jofffcf5m1] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .note-card-actions .list-page-icon-btn[b-jofffcf5m1] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .note-card-actions .list-page-icon-btn:hover[b-jofffcf5m1] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .notes-page .list-page-stats[b-jofffcf5m1] {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .notes-grid[b-jofffcf5m1] {
        grid-template-columns: 1fr;
    }

    .note-card-actions[b-jofffcf5m1] {
        opacity: 1;
    }
}

@media (max-width: 600px) {
    /* Tighter header spacing */
    .notes-page .list-page-header[b-jofffcf5m1] {
        margin-bottom: 16px;
        gap: 10px;
    }

    .notes-page .list-page-title[b-jofffcf5m1] {
        font-size: 1.35rem;
        gap: 8px;
    }

    .notes-page .list-page-title svg[b-jofffcf5m1] {
        width: 22px;
        height: 22px;
    }

    /* Notes-Mob1 (2026-05-03): Hide the "Quick notes and thoughts for
       later reference" subtitle on mobile. The page title + the New
       Note CTA already make the surface self-explanatory; the subtitle
       was eating a row that's better spent on more note cards above
       the fold. Same pattern as the home page's weather-line hide. */
    .notes-page .list-page-subtitle[b-jofffcf5m1] {
        display: none;
    }

    /* Notes-Mob1' (2026-05-04): Defensive viewport clamp. DevTools
       inspector showed `article.note-card` rendering at 486px wide on
       a 390px viewport — meaning the .notes-page container was wider
       than viewport, pushing the entire grid horizontally and making
       cards feel "stretched." Suspected cause: an upstream child
       (filter dropdowns / search inputs with min-width, or the stats
       grid's auto-fit minmax(160px, 1fr) summing past viewport before
       the override kicks in) was forcing parent expansion. Rather than
       chase the specific culprit, lock the page to viewport bounds:
       max-width 100vw on the root container, overflow-x hidden as a
       safety net, and a tighter container padding to give cards
       more room. */
    .notes-page[b-jofffcf5m1] {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .notes-page .list-page-container[b-jofffcf5m1] {
        padding: 16px 12px;
        max-width: 100%;
    }

    .notes-page .list-page-btn-primary[b-jofffcf5m1] {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    /* Compact 3-column stats */
    .notes-page .list-page-stats[b-jofffcf5m1] {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }

    .notes-page .list-page-stat-card[b-jofffcf5m1] {
        padding: 10px 6px;
        gap: 2px;
        border-radius: 10px;
    }

    .notes-page .list-page-stat-icon[b-jofffcf5m1] {
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .notes-page .list-page-stat-icon svg[b-jofffcf5m1] {
        width: 16px;
        height: 16px;
    }

    .notes-page .list-page-stat-value[b-jofffcf5m1] {
        font-size: 1.1rem;
    }

    .notes-page .list-page-stat-label[b-jofffcf5m1] {
        font-size: 0.65rem;
    }

    /* Compact search */
    .notes-page .list-page-search-container[b-jofffcf5m1] {
        margin-bottom: 16px;
    }

    /* Tighter note cards */
    .notes-grid[b-jofffcf5m1] {
        gap: 10px;
    }

    .note-card[b-jofffcf5m1] {
        min-height: auto;
        padding: 10px 12px;
        border-radius: 10px;
        /* Notes-Mob1' (2026-05-04): Force the card to fit its grid cell.
           Without these, flex/grid children can grow past the container
           when interior content (long word, no-break sequence) sets the
           min-content width. The visible symptom: card appears full-width
           but body text + action icons render past the right edge and
           get clipped by .notes-page's overflow:hidden. */
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Same min-width:0 + max-width:100% on the body so its long content
       (URLs, no-space sequences) can't push the card wider. With
       overflow:hidden + line-clamp, the visible text gets ellipsis at
       the card edge instead of overflowing past it. */
    .note-card-body[b-jofffcf5m1],
    .note-card-header[b-jofffcf5m1],
    .note-card-footer[b-jofffcf5m1] {
        min-width: 0;
        max-width: 100%;
    }

    /* Grid itself: prevent expansion. 1fr column should equal container
       width but only if min-width:0 lets the cell shrink to zero before
       expanding to fit content. */
    .notes-grid[b-jofffcf5m1] {
        min-width: 0;
        width: 100%;
    }

    .note-card-header[b-jofffcf5m1] {
        margin-bottom: 8px;
        gap: 8px;
    }

    .note-card-title[b-jofffcf5m1] {
        font-size: 1rem;
    }

    /* Notes-Mob1' (2026-05-04): The base .note-card-body has `flex: 1`
       which makes it stretch to fill the card height even when the
       text is line-clamped to a single line. With min-height: auto on
       mobile, the card SHOULD collapse to content height — but flex: 1
       on the body forces it to grow to whatever room is available,
       producing tall cards regardless of text length. Override flex to
       prevent the stretch and zero the auto margin that was pushing
       the footer to the bottom of the (now-stretched) body. */
    .note-card-body[b-jofffcf5m1] {
        font-size: 0.82rem;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        margin: 0 0 4px;
        flex: 0 0 auto;
        line-height: 1.35;
    }

    .note-card-header[b-jofffcf5m1] {
        margin-bottom: 4px;
    }

    .note-card-footer[b-jofffcf5m1] {
        padding-top: 4px;
        margin-top: 4px;
    }

    .note-private-badge[b-jofffcf5m1] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .note-private-badge svg[b-jofffcf5m1] {
        width: 14px;
        height: 14px;
    }
}
/* /Pages/Notes/NoteViewDialog.razor.rz.scp.css */
/* NoteViewDialog — read-only note view (overlay/header handled by BaseDialog) */

/* Stats bar (word count, read time, position) */

.note-view-stats-bar[b-jz83zgrqbg] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.note-view-stat[b-jz83zgrqbg] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.note-view-stat svg[b-jz83zgrqbg] {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.note-view-stat-divider[b-jz83zgrqbg] {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 600;
}

.note-view-position[b-jz83zgrqbg] {
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Note body */

.note-view-content[b-jz83zgrqbg] {
    margin-bottom: 20px;
    outline: none;
}

.note-view-body[b-jz83zgrqbg] {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--theme-text-primary, #1e293b);
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Notes-Mob1' (2026-05-04): Constrain to parent so long unbreakable
       sequences (URLs, no-space strings) can't push the dialog content
       wider than viewport. */
    max-width: 100%;
    min-width: 0;
}

/* DevTools showed the rendered <ul> at 346 × 633 with `padding: 0 0 0 40px`
   — the browser default. On mobile that 40px indent eats roughly 10% of
   the viewport just for bullet alignment, pushing list-item text close
   to the right edge and triggering horizontal scroll on long items.
   Trim to a more compact 20px (still room for the bullet glyph + a
   comfortable gap to text) and force list items to wrap unbreakable
   content. */
/* MarkupString gotcha (reference_blazor_markupstring_scoped_css): the note body
   is injected as raw HTML via (MarkupString), so its h1/ul/li/strong/etc. don't
   carry this component's scope attribute. Without ::deep these rules compile to
   `... h1[b-xyz]` and never match the rendered markdown — the body falls back to
   browser defaults. ::deep drops the scope requirement on the descendants. */
.note-view-body[b-jz83zgrqbg]  ul,
.note-view-body[b-jz83zgrqbg]  ol {
    padding-left: 20px;
    margin: 0.5rem 0;
}

.note-view-body[b-jz83zgrqbg]  li {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.note-view-body[b-jz83zgrqbg]  p {
    margin-bottom: 0.75rem;
}

.note-view-body[b-jz83zgrqbg]  p:last-child {
    margin-bottom: 0;
}

.note-view-body[b-jz83zgrqbg]  strong {
    font-weight: 600;
}

.note-view-body[b-jz83zgrqbg]  em {
    font-style: italic;
}

.note-view-body[b-jz83zgrqbg]  h1,
.note-view-body[b-jz83zgrqbg]  h2,
.note-view-body[b-jz83zgrqbg]  h3 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--theme-text-primary, #0f172a);
}

.note-view-body[b-jz83zgrqbg]  h1 {
    font-size: 1.5rem;
}

.note-view-body[b-jz83zgrqbg]  h2 {
    font-size: 1.25rem;
}

.note-view-body[b-jz83zgrqbg]  h3 {
    font-size: 1.1rem;
}

.note-view-body[b-jz83zgrqbg]  ul {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    list-style: disc;
}

.note-view-body[b-jz83zgrqbg]  li {
    margin-bottom: 0.25rem;
}

.note-view-empty[b-jz83zgrqbg] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--theme-text-muted, #94a3b8);
    font-style: italic;
}

/* Metadata */

.note-view-metadata[b-jz83zgrqbg] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.note-view-metadata-item[b-jz83zgrqbg] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

.note-view-metadata-item svg[b-jz83zgrqbg] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.note-view-private[b-jz83zgrqbg] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 500;
}

/* Footer */

/* Inner layout for the footer rendered into BaseDialog's FooterContent slot.
   The .dialog-footer wrapper supplies the border-top, padding, surface and
   out-of-scroll pinning; this just lays the two button groups out across it.
   (NTT-V-STICKY 2026-06-07: replaced an in-content position:sticky footer that
   revealed trailing linked-items text below it on long notes.) */
.note-view-footer[b-jz83zgrqbg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.note-view-footer-left[b-jz83zgrqbg] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.note-view-footer-right[b-jz83zgrqbg] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.note-view-nav-hint[b-jz83zgrqbg] {
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
    margin-left: 4px;
    opacity: 0.8;
}

/* Dark theme overrides */

.is-dark .note-view-stats-bar[b-jz83zgrqbg] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
}

.is-dark .note-view-stat-divider[b-jz83zgrqbg] {
    color: rgba(255, 255, 255, 0.3);
}

.is-dark .note-view-body[b-jz83zgrqbg] {
    color: rgba(255, 255, 255, 0.92);
}

.is-dark .note-view-body[b-jz83zgrqbg]  h1,
.is-dark .note-view-body[b-jz83zgrqbg]  h2,
.is-dark .note-view-body[b-jz83zgrqbg]  h3 {
    color: white;
}

.is-dark .note-view-empty[b-jz83zgrqbg] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .note-view-metadata[b-jz83zgrqbg] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.is-dark .note-view-metadata-item[b-jz83zgrqbg] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .note-view-nav-hint[b-jz83zgrqbg] {
    color: rgba(255, 255, 255, 0.4);
}

/* NTT-V-2 (2026-05-02): Inline promote-to-task form. Replaces the
   default footer when active. Theme-token-driven so all 8 themes pick
   up the right surface/border tokens without per-theme overrides
   beyond the dark-theme polish at the bottom of this file. */

.note-task-form[b-jz83zgrqbg] {
    padding: 14px 16px 16px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
    animation: note-task-form-in-b-jz83zgrqbg 0.18s ease-out both;
}

@keyframes note-task-form-in-b-jz83zgrqbg {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.note-task-form-title[b-jz83zgrqbg] {
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
}

.note-task-form-grid[b-jz83zgrqbg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
    margin-bottom: 10px;
}

.note-task-form-field[b-jz83zgrqbg] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.note-task-form-field--full[b-jz83zgrqbg] {
    grid-column: 1 / -1;
}

.note-task-form-field label[b-jz83zgrqbg] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

.note-task-form-input[b-jz83zgrqbg] {
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.12));
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #0f172a);
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.note-task-form-input:focus[b-jz83zgrqbg] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
}

.note-task-form-hint[b-jz83zgrqbg] {
    margin: 6px 0 12px 0;
    font-size: 0.76rem;
    color: var(--theme-text-tertiary, #94a3b8);
    font-style: italic;
    line-height: 1.4;
}

.note-task-form-actions[b-jz83zgrqbg] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Dark-theme override — softens the form's tinted background to match
   the dark surface treatment used elsewhere on this dialog. */
.is-dark .note-task-form[b-jz83zgrqbg] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .note-task-form-title[b-jz83zgrqbg] {
    color: #f1f5f9;
}

.is-dark .note-task-form-input[b-jz83zgrqbg] {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f1f5f9;
}

.is-dark .note-task-form-field label[b-jz83zgrqbg] {
    color: rgba(241, 245, 249, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .note-task-form[b-jz83zgrqbg] {
        animation: none;
    }
}

/* Responsive */

@media (max-width: 600px) {
    .note-view-stats-bar[b-jz83zgrqbg] {
        flex-wrap: wrap;
    }

    .note-view-nav-hint[b-jz83zgrqbg] {
        display: none;
    }

    .note-task-form-grid[b-jz83zgrqbg] {
        grid-template-columns: 1fr;
    }
}

/* Notes-Mob1' (2026-05-04): Suppress horizontal scrollbar on the dialog
   content scroller. BaseDialog's .dialog-content sets `overflow-y: auto`
   which per CSS spec implicitly promotes `overflow-x` to `auto` too
   (you can't have one axis visible + the other scrollable). Long note
   content that includes &nbsp; sequences (like "Video Generator&nbsp;
   Daily Progress" — non-breaking spaces between words) refuses to wrap
   at the nbsp, which extends the line past the dialog's content area
   and triggers the horizontal scrollbar. Set `overflow-x: hidden`
   explicitly to clip rather than scroll horizontally; vertical scroll
   stays untouched. Combined with the `overflow-wrap: anywhere` rule
   below, long non-breakable text now wraps to width instead of pushing
   the layout wider. Also: subtler scrollbar styling on the surviving
   vertical scroller. */
.dialog-container:has(.note-view-content) .dialog-content[b-jz83zgrqbg] {
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 116, 139, 0.3) transparent;
}

.dialog-container:has(.note-view-content) .note-view-body[b-jz83zgrqbg],
.dialog-container:has(.note-view-content) .note-view-body *[b-jz83zgrqbg] {
    overflow-wrap: anywhere;
}

.dialog-container:has(.note-view-content) .dialog-content[b-jz83zgrqbg]::-webkit-scrollbar {
    width: 6px;
}

.dialog-container:has(.note-view-content) .dialog-content[b-jz83zgrqbg]::-webkit-scrollbar-track {
    background: transparent;
}

.dialog-container:has(.note-view-content) .dialog-content[b-jz83zgrqbg]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.3);
    border-radius: 3px;
}

.dialog-container:has(.note-view-content) .dialog-content[b-jz83zgrqbg]::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}
/* /Pages/Objectives/ObjectiveDetail.razor.rz.scp.css */
/* ============================================
   OBJECTIVE DETAIL - Page-specific styles only.
   Base layout uses .detail-* classes from utilities.css
   ============================================ */

/* B1-Measurable (2026-05-03): Measured Progress card. Big numeric
   readout (current of target) with the percentage to the right and a
   progress bar underneath. Tinted with the success color so it visually
   leads as the primary signal of how the objective is going. */
.objective-measured-card[b-lu05q27k4n] {
    border-left: 4px solid var(--theme-success, #10b981);
}

.objective-measured-detail[b-lu05q27k4n] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 12px;
}

.objective-measured-detail-numbers[b-lu05q27k4n] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.objective-measured-detail-current[b-lu05q27k4n] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-success, #10b981);
}

.objective-measured-detail-divider[b-lu05q27k4n] {
    font-size: 1rem;
    color: var(--theme-text-secondary, #64748b);
}

.objective-measured-detail-target[b-lu05q27k4n] {
    font-size: 1.25rem;
    color: var(--theme-text-primary, #1e293b);
}

.objective-measured-detail-name[b-lu05q27k4n] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin-left: 4px;
}

.objective-measured-detail-pct[b-lu05q27k4n] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-success, #10b981);
}

.objective-measured-detail-bar[b-lu05q27k4n] {
    height: 8px;
    background: var(--theme-surface-soft, #e5e7eb);
    border-radius: 9999px;
    overflow: hidden;
}

.objective-measured-detail-fill[b-lu05q27k4n] {
    height: 100%;
    background: var(--theme-success, #10b981);
    transition: width 0.3s ease;
}

/* PQ6 (2026-05-03): Inline +/- quick-adjust controls on the Measured
   Progress card. The bar sits below the progress fill so the user's
   eye trails: numbers → progress bar → "and here's how I move it".
   Visual weight is intentionally low — round buttons in the surface-
   soft tone, the step-size hint as muted secondary text — because the
   primary read of the card is still the current/target numbers. */
.objective-measured-quickadjust[b-lu05q27k4n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.objective-measured-quickadjust-btn[b-lu05q27k4n] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--theme-border, rgba(100, 116, 139, 0.25));
    background: var(--theme-surface-soft, rgba(100, 116, 139, 0.08));
    color: var(--theme-text-primary, #1e293b);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}

.objective-measured-quickadjust-btn:hover:not(:disabled)[b-lu05q27k4n],
.objective-measured-quickadjust-btn:focus-visible:not(:disabled)[b-lu05q27k4n] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 12%, transparent);
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 40%, transparent);
}

.objective-measured-quickadjust-btn:active:not(:disabled)[b-lu05q27k4n] {
    transform: scale(0.95);
}

.objective-measured-quickadjust-btn:focus-visible[b-lu05q27k4n] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-primary, #6366f1));
    outline-offset: 2px;
}

.objective-measured-quickadjust-btn:disabled[b-lu05q27k4n] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The increment side picks up the success palette so the user gets a
   subtle "this moves you forward" affordance distinct from the
   neutral decrement button. */
.objective-measured-quickadjust-btn--increment[b-lu05q27k4n] {
    color: var(--theme-success, #10b981);
    border-color: color-mix(in srgb, var(--theme-success, #10b981) 30%, transparent);
}

.objective-measured-quickadjust-btn--increment:hover:not(:disabled)[b-lu05q27k4n],
.objective-measured-quickadjust-btn--increment:focus-visible:not(:disabled)[b-lu05q27k4n] {
    background: color-mix(in srgb, var(--theme-success, #10b981) 14%, transparent);
    border-color: color-mix(in srgb, var(--theme-success, #10b981) 50%, transparent);
}

.objective-measured-quickadjust-step[b-lu05q27k4n] {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
}

.sidebar-details-list[b-lu05q27k4n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.objective-description[b-lu05q27k4n] {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
    color: var(--theme-text-secondary);
}

.empty-section[b-lu05q27k4n] {
    text-align: center;
    padding: 20px;
    color: var(--theme-text-secondary);
}

.empty-section p[b-lu05q27k4n] { margin: 0 0 12px; }

/* Goal Link Card */
.goal-card[b-lu05q27k4n] {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.goal-card:hover[b-lu05q27k4n] {
    transform: translateY(-2px);
}

.goal-link-content[b-lu05q27k4n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.goal-info[b-lu05q27k4n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goal-name[b-lu05q27k4n] {
    font-weight: 600;
    color: var(--theme-text-primary);
}

.goal-progress[b-lu05q27k4n] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

.chevron[b-lu05q27k4n] {
    width: 24px;
    height: 24px;
    color: var(--theme-text-muted);
}

/* OBJECTIVE-CAMPAIGN-CHIP (2026-05-21): Linked Campaigns card. Visually
   parallel to the Linked Goal card (above) but renders a list of 1-N
   rows since an objective can have multiple campaigns feeding it. Each
   row mirrors the goal-card click affordance (hover lift, chevron) and
   reuses .chevron from above. Meta line below the campaign name shows
   status badge + channel string when present. */
.campaigns-list[b-lu05q27k4n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.campaign-item[b-lu05q27k4n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.03));
    transition: background 0.2s, transform 0.2s;
}

.campaign-item:hover[b-lu05q27k4n] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, var(--theme-bg-secondary, rgba(0, 0, 0, 0.03)));
    transform: translateY(-1px);
}

.campaign-info[b-lu05q27k4n] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.campaign-name[b-lu05q27k4n] {
    font-weight: 600;
    color: var(--theme-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-meta[b-lu05q27k4n] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

.campaign-channel[b-lu05q27k4n] {
    color: var(--theme-text-secondary);
    font-size: 0.8rem;
}

/* Tasks List */
.tasks-list[b-lu05q27k4n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.task-item[b-lu05q27k4n] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.03));
    transition: background 0.2s;
}

.task-item:hover[b-lu05q27k4n] {
    background: var(--theme-link-hover-bg, rgba(0, 0, 0, 0.06));
}

.status-icon[b-lu05q27k4n] {
    width: 24px;
    height: 24px;
    color: var(--theme-text-muted, #94a3b8);
}

.status-icon.completed[b-lu05q27k4n] {
    color: var(--theme-text-success, #10b981);
}

.task-info[b-lu05q27k4n] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
}

.task-name[b-lu05q27k4n] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-primary);
}

.days-badge[b-lu05q27k4n] {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.days-badge.overdue[b-lu05q27k4n] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* Time Entries List */
.time-entries-list[b-lu05q27k4n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-entry-item[b-lu05q27k4n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.03));
}

.time-entry-info[b-lu05q27k4n] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.time-entry-desc[b-lu05q27k4n] {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--theme-text-primary);
}

.time-entry-meta[b-lu05q27k4n] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.time-entry-duration[b-lu05q27k4n] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    font-variant-numeric: tabular-nums;
}

.time-entry-date[b-lu05q27k4n] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.row-action-btn[b-lu05q27k4n] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    color: var(--theme-text-muted);
    display: flex;
    align-items: center;
    transition: color 0.2s, background 0.2s;
}

.row-action-btn:hover[b-lu05q27k4n] {
    color: var(--theme-primary-ink, var(--theme-primary));
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.total-hours-badge[b-lu05q27k4n] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-left: 6px;
}

.view-all-link[b-lu05q27k4n] {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 0.85rem;
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    margin-top: 8px;
}

.view-all-link:hover[b-lu05q27k4n] {
    text-decoration: underline;
}
/* /Pages/Objectives/ObjectiveDialog.razor.rz.scp.css */
/* ============================================
   OBJECTIVE DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Group */
.objective-form-group[b-wiq791r71l] {
    margin-bottom: 8px;
}

.objective-form-group label[b-wiq791r71l] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 3px;
}

.required-indicator[b-wiq791r71l] {
    color: #ef4444;
}

.is-dark .objective-form-group label[b-wiq791r71l] {
    color: rgba(255, 255, 255, 0.9);
}

/* Form Inputs */
.objective-form-input[b-wiq791r71l],
.objective-form-textarea[b-wiq791r71l] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    background: white;
    color: #1e293b;
    box-sizing: border-box;
    font-family: inherit;
}

.is-dark .objective-form-input[b-wiq791r71l],
.is-dark .objective-form-textarea[b-wiq791r71l] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.objective-form-input:focus[b-wiq791r71l],
.objective-form-textarea:focus[b-wiq791r71l] {
    outline: none;
    border-color: var(--theme-input-focus, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .objective-form-input:focus[b-wiq791r71l],
.is-dark .objective-form-textarea:focus[b-wiq791r71l] {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2);
}

.objective-form-input.input-error[b-wiq791r71l] {
    border-color: #ef4444;
}

.objective-form-textarea[b-wiq791r71l] {
    min-height: 80px;
    resize: vertical;
}

/* Inputs row (side by side) */
.objective-inputs-row[b-wiq791r71l] {
    display: grid;
    /* WI-DLG-WIDTH-1 (2026-06-30): minmax(0,1fr) so a wide SearchableSelect value
       (Status/Priority) can't blow the column past 50% and trip a horizontal scrollbar
       inside the overflow-y:auto dialog. See WorkItemDialog.razor.css for the full rationale. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.objective-inputs-row .objective-form-group[b-wiq791r71l] {
    margin-bottom: 0;
}

/* Character counter */
.objective-char-counter[b-wiq791r71l] {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: right;
    margin-top: 2px;
}

.is-dark .objective-char-counter[b-wiq791r71l] {
    color: rgba(255, 255, 255, 0.5);
}

/* Error message */
.objective-error-message[b-wiq791r71l] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.875rem;
}

.objective-error-message svg[b-wiq791r71l] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Metadata section */
.objective-metadata[b-wiq791r71l] {
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    margin-top: 8px;
}

.is-dark .objective-metadata[b-wiq791r71l] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.objective-metadata-item[b-wiq791r71l] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.objective-metadata-item svg[b-wiq791r71l] {
    width: 14px;
    height: 14px;
}

.is-dark .objective-metadata-item[b-wiq791r71l] {
    color: rgba(255, 255, 255, 0.5);
}

/* Placeholder styling */
.objective-form-input[b-wiq791r71l]::placeholder,
.objective-form-textarea[b-wiq791r71l]::placeholder {
    color: #9ca3af;
}

.is-dark .objective-form-input[b-wiq791r71l]::placeholder,
.is-dark .objective-form-textarea[b-wiq791r71l]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 480px) {
    .objective-inputs-row[b-wiq791r71l] {
        grid-template-columns: 1fr;
    }
}

/* B1-Measurable (2026-05-03): Section divider, helper text, and live
   preview styling for the Measurable Target block. The section header
   reads as a quiet visual break — small uppercase label with an icon —
   so the measurable fields feel like a coherent group rather than four
   loose form-groups. The preview block tints with the theme's success
   color when progress > 0 to give the user a tiny dopamine hit on
   typing in real numbers. */
.objective-section-divider[b-wiq791r71l] {
    margin: 14px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}

.objective-section-label[b-wiq791r71l] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.objective-section-label svg[b-wiq791r71l] {
    width: 14px;
    height: 14px;
}

.is-dark .objective-section-divider[b-wiq791r71l] {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.is-dark .objective-section-label[b-wiq791r71l] {
    color: rgba(255, 255, 255, 0.6);
}

.objective-helper-text[b-wiq791r71l] {
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

.is-dark .objective-helper-text[b-wiq791r71l] {
    color: rgba(255, 255, 255, 0.55);
}

.objective-measured-preview[b-wiq791r71l] {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-success, #10b981) 5%, transparent);
}

.objective-measured-preview-header[b-wiq791r71l] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}

.objective-measured-preview-label[b-wiq791r71l] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.objective-measured-preview-pct[b-wiq791r71l] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-success, #10b981);
}

.objective-measured-preview-bar[b-wiq791r71l] {
    height: 6px;
    background: #e5e7eb;
    border-radius: 9999px;
    overflow: hidden;
}

.objective-measured-preview-fill[b-wiq791r71l] {
    height: 100%;
    background: var(--theme-success, #10b981);
    transition: width 0.2s ease;
}

.is-dark .objective-measured-preview[b-wiq791r71l] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .objective-measured-preview-label[b-wiq791r71l] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .objective-measured-preview-bar[b-wiq791r71l] {
    background: rgba(255, 255, 255, 0.1);
}
/* /Pages/Objectives/Objectives.razor.rz.scp.css */
/* ============================================
   OBJECTIVES PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - minimal page-specific
   styles here
   ============================================ */

/* OBJ-REST-1 (2026-06-02): resting objectives are sorted to the bottom of the
   list (see FilteredObjectives). Dim them so the active/resting boundary reads
   at a glance — the sun "Wake" row action is the explicit affordance. Hover and
   keyboard focus restore full opacity so they stay fully interactive. Theme-
   agnostic: opacity only, no color, so all 8 themes inherit correctly. */
.list-page-item.is-resting[b-f260e55ze9] {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.list-page-item.is-resting:hover[b-f260e55ze9],
.list-page-item.is-resting:focus-within[b-f260e55ze9] {
    opacity: 1;
}
/* /Pages/Onboarding/ChainTour.razor.rz.scp.css */
/* PRO-ONBOARD-1 (2026-06-29): de-gamified chain walkthrough for Professional mode.
   Visual language intentionally mirrors PersonaStep / TimezoneStep so the onboarding
   beats feel continuous. Theme-aware via --theme-* design-system variables (all 8 themes). */

.chain-tour-page[b-1t65d5o3w8] {
    min-height: calc(100vh - 120px);
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: center;
}

.chain-tour-container[b-1t65d5o3w8] {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

.chain-tour-intro[b-1t65d5o3w8] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.chain-tour-eyebrow[b-1t65d5o3w8] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #94a3b8);
}

.chain-tour-intro h1[b-1t65d5o3w8] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary, #1f2937);
}

.chain-tour-intro p[b-1t65d5o3w8] {
    font-size: 1rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.55;
}

/* ── The focused link card ──────────────────────────────────── */

.chain-tour-card[b-1t65d5o3w8] {
    width: 100%;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 2.25rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    min-height: 220px;
    justify-content: center;
}

.chain-tour-glyph[b-1t65d5o3w8] {
    font-size: 3rem;
    line-height: 1;
}

.chain-tour-step-label[b-1t65d5o3w8] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

.chain-tour-step-title[b-1t65d5o3w8] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary, #1f2937);
}

.chain-tour-step-blurb[b-1t65d5o3w8] {
    font-size: 1rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.55;
    max-width: 48ch;
}

.fade-in[b-1t65d5o3w8] {
    animation: chainTourFade-b-1t65d5o3w8 0.25s ease;
}

@keyframes chainTourFade-b-1t65d5o3w8 {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── The connected chain rail ───────────────────────────────── */

.chain-tour-rail[b-1t65d5o3w8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
}

.chain-tour-node[b-1t65d5o3w8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-surface, #ffffff);
    cursor: pointer;
    min-width: 64px;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.chain-tour-node:hover:not(.is-active)[b-1t65d5o3w8] {
    border-color: var(--theme-text-muted, #94a3b8);
}

.chain-tour-node.is-active[b-1t65d5o3w8] {
    border-color: var(--theme-primary, #3b82f6);
    background: color-mix(in srgb, var(--theme-primary, #3b82f6) 10%, var(--theme-surface, #ffffff));
    transform: translateY(-2px);
}

.chain-tour-node.is-done[b-1t65d5o3w8] {
    opacity: 0.85;
}

.chain-tour-node-glyph[b-1t65d5o3w8] {
    font-size: 1.25rem;
    line-height: 1;
}

.chain-tour-node-label[b-1t65d5o3w8] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

.chain-tour-node.is-active .chain-tour-node-label[b-1t65d5o3w8] {
    color: var(--theme-text-primary, #1f2937);
}

.chain-tour-connector[b-1t65d5o3w8] {
    color: var(--theme-text-muted, #cbd5e1);
    font-size: 1rem;
}

.chain-tour-connector.is-done[b-1t65d5o3w8] {
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

/* ── Actions ────────────────────────────────────────────────── */

.chain-tour-actions[b-1t65d5o3w8] {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    justify-content: center;
    margin-top: 0.25rem;
}

.chain-tour-actions .nts-btn.primary[b-1t65d5o3w8] {
    min-width: 180px;
}

.chain-tour-skip[b-1t65d5o3w8] {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}

.chain-tour-skip:hover:not(:disabled)[b-1t65d5o3w8] {
    color: var(--theme-text-primary, #1f2937);
}

.chain-tour-skip:disabled[b-1t65d5o3w8] {
    opacity: 0.5;
    cursor: default;
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .chain-tour-page[b-1t65d5o3w8] { padding: 1.25rem 1rem; }
    .chain-tour-intro h1[b-1t65d5o3w8] { font-size: 1.5rem; }
    .chain-tour-card[b-1t65d5o3w8] { padding: 1.75rem 1.25rem; min-height: 200px; }
    .chain-tour-node[b-1t65d5o3w8] { min-width: 56px; padding: 0.4rem 0.45rem; }
    .chain-tour-node-label[b-1t65d5o3w8] { font-size: 0.62rem; }
    .chain-tour-actions[b-1t65d5o3w8] { flex-direction: column-reverse; }
    .chain-tour-actions .nts-btn[b-1t65d5o3w8] { width: 100%; }
}
/* /Pages/Onboarding/PersonaStep.razor.rz.scp.css */
/* Onboarding persona step — full-width content area inside MainLayout. */

.persona-onboarding-page[b-13yczlq70o] {
    min-height: calc(100vh - 120px);
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: center;
}

.persona-onboarding-container[b-13yczlq70o] {
    width: 100%;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.persona-onboarding-intro h1[b-13yczlq70o] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--theme-text-primary);
}

.persona-onboarding-intro p[b-13yczlq70o] {
    font-size: 1rem;
    color: var(--theme-text-secondary);
    margin: 0;
    line-height: 1.55;
    max-width: 60ch;
}

.persona-onboarding-loading[b-13yczlq70o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 0;
    color: var(--theme-text-secondary);
    justify-content: center;
}

.persona-onboarding-saving[b-13yczlq70o] {
    text-align: center;
    padding: 0.5rem;
    color: var(--theme-text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

@media (max-width: 640px) {
    .persona-onboarding-page[b-13yczlq70o] {
        padding: 1.25rem 1rem;
    }

    .persona-onboarding-intro h1[b-13yczlq70o] {
        font-size: 1.5rem;
    }
}

/* PERSONA-LATER-1 (2026-09-07): optional-step escape hatch under the picker. */
.persona-onboarding-skip[b-13yczlq70o] { margin-top: 0.75rem; text-align: right; }
.persona-onboarding-skip-btn[b-13yczlq70o] {
    background: none; border: none; cursor: pointer; padding: 0.4rem 0.6rem;
    font-size: 0.9rem; color: var(--theme-text-secondary, #64748b); text-decoration: underline;
}
.persona-onboarding-skip-btn:hover[b-13yczlq70o] { color: var(--theme-text-primary, #1e293b); }
/* /Pages/Onboarding/TimezoneStep.razor.rz.scp.css */
/* TZ-V-1 (2026-05-05): Onboarding timezone-detection step.
   Visual structure intentionally mirrors PersonaStep.razor.css so the
   transition between the two onboarding moments feels like one continuous
   "tell us about you" beat, not two unrelated forms. */

.timezone-onboarding-page[b-e5ofs3xt2a] {
    min-height: calc(100vh - 120px);
    padding: 2rem 1.5rem;
    display: flex;
    justify-content: center;
}

.timezone-onboarding-container[b-e5ofs3xt2a] {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.timezone-onboarding-intro h1[b-e5ofs3xt2a] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--theme-text-primary, #1f2937);
}

.timezone-onboarding-intro p[b-e5ofs3xt2a] {
    font-size: 1rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
    line-height: 1.55;
    max-width: 60ch;
}

.timezone-onboarding-loading[b-e5ofs3xt2a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 0;
    color: var(--theme-text-secondary, #64748b);
    justify-content: center;
}

/* ── The detection card ───────────────────────────────────── */

.timezone-card[b-e5ofs3xt2a] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.timezone-card--detection-failed[b-e5ofs3xt2a] {
    border-color: color-mix(in srgb, var(--theme-warning, #f59e0b) 35%, var(--theme-border, #e2e8f0));
}

.timezone-card-detected[b-e5ofs3xt2a] {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.timezone-card-eyebrow[b-e5ofs3xt2a] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #94a3b8);
}

.timezone-card-name[b-e5ofs3xt2a] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1f2937);
    line-height: 1.25;
}

.timezone-card-clock[b-e5ofs3xt2a] {
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
    margin-top: 0.25rem;
}

.timezone-card-actions[b-e5ofs3xt2a] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
}

/* Primary CTA inherits .nts-btn.primary styling; we just need to size it
   appropriately in this context. The "pick different" secondary stays
   smaller / quieter so it doesn't compete with "Yes, that's me." */
.timezone-card-actions .nts-btn.primary[b-e5ofs3xt2a] {
    min-width: 220px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.timezone-card-actions .nts-btn.secondary[b-e5ofs3xt2a] {
    background: transparent;
    border: none;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
}

.timezone-card-actions .nts-btn.secondary:hover:not(:disabled)[b-e5ofs3xt2a] {
    color: var(--theme-text-primary, #1f2937);
}

/* ── Override picker (revealed on opt-in or detection failure) ── */

.timezone-picker[b-e5ofs3xt2a] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    margin-top: 0.5rem;
}

.timezone-picker label[b-e5ofs3xt2a] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

.timezone-picker .form-select[b-e5ofs3xt2a] {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #cbd5e1);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1f2937);
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.timezone-picker-save[b-e5ofs3xt2a] {
    align-self: flex-end;
    min-width: 180px;
}

/* ── Reduced motion + mobile ───────────────────────────────── */

@media (max-width: 640px) {
    .timezone-onboarding-page[b-e5ofs3xt2a] { padding: 1.25rem 1rem; }
    .timezone-onboarding-intro h1[b-e5ofs3xt2a] { font-size: 1.5rem; }
    .timezone-card[b-e5ofs3xt2a] { padding: 1.5rem 1.25rem; }
    .timezone-card-name[b-e5ofs3xt2a] { font-size: 1.25rem; }
    .timezone-card-actions .nts-btn.primary[b-e5ofs3xt2a] { min-width: 0; width: 100%; }
    .timezone-picker-save[b-e5ofs3xt2a] { align-self: stretch; width: 100%; }
}
/* /Pages/Onboarding/Welcome.razor.rz.scp.css */
/* ============================================
   WELCOME PAGE — Mobile-First Styles
   ============================================ */

.welcome-page[b-wwly0na737] {
    min-height: calc(100vh - 56px);
    padding: 16px;
    transition: background 0.5s ease;
}

.welcome-container[b-wwly0na737] {
    max-width: 900px;
    margin: 0 auto;
}

/* Hero Section */
.welcome-hero[b-wwly0na737] {
    text-align: center;
    padding: 28px 16px 24px;
}

.hero-icon[b-wwly0na737] {
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse-b-wwly0na737 2s ease-in-out infinite;
}

.hero-icon svg[b-wwly0na737] {
    width: 36px;
    height: 36px;
    color: white;
}

@keyframes pulse-b-wwly0na737 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.hero-title[b-wwly0na737] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.2;
}

.hero-subtitle[b-wwly0na737] {
    font-size: 1rem;
    margin: 0;
    opacity: 0.8;
    line-height: 1.5;
}

/* Section Titles */
.section-title[b-wwly0na737] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 20px;
    text-align: center;
}

/* ============================================
   STEPS — Mobile: stacked, Desktop: 3 columns
   ============================================ */

/* PRO-ONBOARD-1 / OB-WELCOME-CHAIN-1 (2026-06-29): the welcome quick-start IS the chain.
   Connected idea → goal → objective → task → time, themed via --theme-* (all 8 themes). */
.welcome-chain-intro[b-wwly0na737] {
    text-align: center;
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
    color: var(--theme-text-secondary, #64748b);
}

.welcome-chain[b-wwly0na737] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.welcome-chain-link[b-wwly0na737] {
    flex: 1 1 0;
    min-width: 150px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.25rem 1rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-top: 3px solid var(--theme-primary, #3b82f6);
    border-radius: 12px;
}

.welcome-chain-glyph[b-wwly0na737] {
    font-size: 2rem;
    line-height: 1;
}

.welcome-chain-label[b-wwly0na737] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

.welcome-chain-blurb[b-wwly0na737] {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.45;
}

.welcome-chain-connector[b-wwly0na737] {
    display: flex;
    align-items: center;
    color: var(--theme-text-muted, #cbd5e1);
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.welcome-chain-actions[b-wwly0na737] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

@media (max-width: 760px) {
    /* MOBILE-WELCOME-1 (2026-09-08): on a phone the five stacked cards pushed "Build my first
       chain" ~3 screens below the hero (Tracy's path; the 9/8 mobile walk). The buttons now come
       FIRST (flex order), and each link collapses to a compact row - glyph left, label + blurb
       right - so the whole explainer is one screen. Connectors hidden (the stack reads as a
       chain on its own). Desktop layout untouched. */
    .quick-start[b-wwly0na737] { display: flex; flex-direction: column; }
    .quick-start .welcome-chain-actions[b-wwly0na737] { order: -2; margin-bottom: 1rem; }
    .quick-start .skip-section[b-wwly0na737] { order: -1; margin-bottom: 1.5rem; }
    .quick-start .section-title[b-wwly0na737] { order: 0; }
    .quick-start .welcome-chain-intro[b-wwly0na737] { order: 1; }
    .quick-start .welcome-chain[b-wwly0na737] { order: 2; }

    .welcome-chain[b-wwly0na737] { flex-direction: column; align-items: stretch; gap: 0.4rem; }
    .welcome-chain-link[b-wwly0na737] {
        max-width: none; min-width: 0;
        flex-direction: row; align-items: center; text-align: left;
        gap: 0.75rem; padding: 0.6rem 0.85rem;
        border-top-width: 1px; border-left: 3px solid var(--theme-primary, #3b82f6);
        display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    }
    .welcome-chain-glyph[b-wwly0na737] { font-size: 1.5rem; grid-row: 1 / span 2; }
    .welcome-chain-label[b-wwly0na737] { grid-column: 2; }
    .welcome-chain-blurb[b-wwly0na737] { grid-column: 2; font-size: 0.78rem; line-height: 1.35; }
    .welcome-chain-connector[b-wwly0na737] { display: none; }
    .welcome-chain-actions[b-wwly0na737] { flex-direction: column; }
    .welcome-chain-actions .step-btn[b-wwly0na737] { width: 100%; text-align: center; }
    /* tiles as compact rows on phones (icon left, label right) */
    .feature-card[b-wwly0na737] { flex-direction: row; justify-content: flex-start; padding: 14px 16px; }
}

.quick-start[b-wwly0na737] {
    margin-bottom: 32px;
}

.steps-grid[b-wwly0na737] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.step-card[b-wwly0na737] {
    padding: 24px 20px;
    border-radius: 16px;
    text-align: center;
    position: relative;
    backdrop-filter: blur(10px);
}

.step-number[b-wwly0na737] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon[b-wwly0na737] {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon svg[b-wwly0na737] {
    width: 28px;
    height: 28px;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.step-card h3[b-wwly0na737] {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 6px;
}

.step-card p[b-wwly0na737] {
    font-size: 0.9375rem;
    margin: 0 0 16px;
    opacity: 0.8;
    line-height: 1.5;
}

/* Step Buttons — large touch targets */
.step-btn[b-wwly0na737] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.step-btn-primary[b-wwly0na737] {
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #8b5cf6) 100%);
    color: white;
}

.step-btn-primary:hover[b-wwly0na737] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.step-btn-outline[b-wwly0na737] {
    background: transparent;
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.step-btn-outline:hover[b-wwly0na737] {
    background: rgba(100, 116, 139, 0.1);
}

/* Skip Section */
.skip-section[b-wwly0na737] {
    text-align: center;
    margin-top: 24px;
}

.skip-link[b-wwly0na737] {
    display: inline-block;
    padding: 12px 24px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: inherit;
    opacity: 0.6;
    text-decoration: none;
    transition: opacity 0.2s;
}

.skip-link:hover[b-wwly0na737] {
    opacity: 1;
    text-decoration: underline;
}

/* ============================================
   FEATURES GRID
   ============================================ */

.features-overview[b-wwly0na737] {
    margin-bottom: 32px;
}

.features-grid[b-wwly0na737] {
    display: grid;
    /* MOBILE-WELCOME-1 (2026-09-08): one column on phones - 2 columns left the third tile orphaned. */
    grid-template-columns: 1fr;
    gap: 12px;
}

.feature-card[b-wwly0na737] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
    min-height: 44px;
}

.feature-card:hover[b-wwly0na737] {
    transform: translateY(-2px);
}

.feature-card svg[b-wwly0na737] {
    width: 28px;
    height: 28px;
    opacity: 0.9;
}

.feature-card span[b-wwly0na737] {
    font-weight: 500;
    font-size: 0.875rem;
}

/* ============================================
   CTA BUTTON
   ============================================ */

.welcome-cta[b-wwly0na737] {
    text-align: center;
    padding: 20px 0 8px;
}

.btn-cta[b-wwly0na737] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 320px;
    min-height: 54px;
    padding: 14px 32px;
    border: none;
    border-radius: 14px;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1) 0%, var(--theme-accent, #8b5cf6) 100%);
    color: white;
}

.btn-cta svg[b-wwly0na737] {
    width: 20px;
    height: 20px;
}

.btn-cta:hover[b-wwly0na737] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

/* ============================================
   ASK AL SECTION
   ============================================ */

.ask-al-section[b-wwly0na737] {
    margin-bottom: 32px;
}

.ask-al-card[b-wwly0na737] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 16px;
    transition: all 0.2s ease;
}

.ask-al-card:hover[b-wwly0na737] {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
}

.ask-al-icon[b-wwly0na737] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.ask-al-text[b-wwly0na737] {
    flex: 1;
}

.ask-al-text h3[b-wwly0na737] {
    margin: 0 0 2px;
    font-size: 1rem;
    font-weight: 600;
}

.ask-al-text p[b-wwly0na737] {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.7;
}

.ask-al-button[b-wwly0na737] {
    min-height: 50px;
    width: 100%;
    padding: 12px 28px;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.ask-al-button:hover[b-wwly0na737] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

/* ============================================
   THEME OVERRIDES — Light Themes
   ============================================ */

.theme-executive[b-wwly0na737] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #1e293b;
}

.theme-executive .step-card[b-wwly0na737],
.theme-executive .feature-card[b-wwly0na737] { background: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.theme-executive .feature-card[b-wwly0na737] { color: #334155; }
.theme-executive .step-btn-outline[b-wwly0na737] { color: #334155; }
.theme-executive .ask-al-text h3[b-wwly0na737] { color: #1e293b; }
.theme-executive .ask-al-text p[b-wwly0na737] { color: #64748b; }

.theme-cloud[b-wwly0na737] {
    background: linear-gradient(135deg, #e0f2fe 0%, #fdf4ff 100%);
    color: #1e293b;
}

.theme-cloud .step-card[b-wwly0na737],
.theme-cloud .feature-card[b-wwly0na737] { background: rgba(255, 255, 255, 0.8); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.theme-cloud .feature-card[b-wwly0na737] { color: #334155; }
.theme-cloud .step-btn-outline[b-wwly0na737] { color: #334155; }
.theme-cloud .ask-al-text h3[b-wwly0na737] { color: #1e293b; }
.theme-cloud .ask-al-text p[b-wwly0na737] { color: #64748b; }

/* ============================================
   THEME OVERRIDES — Dark Themes (shared)
   ============================================ */

.is-dark .hero-title[b-wwly0na737] {
    color: #f8fafc;
}

.is-dark .feature-card[b-wwly0na737] {
    color: #e2e8f0;
}

.is-dark .step-btn-outline[b-wwly0na737] {
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.2);
}

.is-dark .skip-link[b-wwly0na737] {
    color: #e2e8f0;
}

.is-dark .ask-al-card[b-wwly0na737] {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}

.is-dark .ask-al-text h3[b-wwly0na737] {
    color: #f1f5f9;
}

.is-dark .ask-al-text p[b-wwly0na737] {
    color: rgba(255, 255, 255, 0.6);
}

/* Per-theme backgrounds and accent colors */
.theme-space[b-wwly0na737] {
    background: linear-gradient(135deg, #0f0a1e 0%, #0f172a 100%);
    color: #e2e8f0;
}

.theme-space .step-card[b-wwly0na737],
.theme-space .feature-card[b-wwly0na737] { background: rgba(30, 27, 75, 0.6); border: 1px solid rgba(168, 85, 247, 0.2); }
.theme-space .step-icon[b-wwly0na737] { background: rgba(168, 85, 247, 0.2); }
.theme-space .step-icon svg[b-wwly0na737] { color: #a855f7; }

.theme-winter[b-wwly0na737] {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e1b4b 100%);
    color: #e2e8f0;
}

.theme-winter .step-card[b-wwly0na737],
.theme-winter .feature-card[b-wwly0na737] { background: rgba(30, 58, 95, 0.6); border: 1px solid rgba(56, 189, 248, 0.2); }
.theme-winter .step-icon[b-wwly0na737] { background: rgba(56, 189, 248, 0.2); }
.theme-winter .step-icon svg[b-wwly0na737] { color: #38bdf8; }

.theme-nature[b-wwly0na737] {
    background: linear-gradient(135deg, #14532d 0%, #365314 100%);
    color: #e2e8f0;
}

.theme-nature .step-card[b-wwly0na737],
.theme-nature .feature-card[b-wwly0na737] { background: rgba(20, 83, 45, 0.6); border: 1px solid rgba(74, 222, 128, 0.2); }
.theme-nature .step-icon[b-wwly0na737] { background: rgba(74, 222, 128, 0.2); }
.theme-nature .step-icon svg[b-wwly0na737] { color: #4ade80; }

.theme-ocean[b-wwly0na737] {
    background: linear-gradient(135deg, #0c4a6e 0%, #0f766e 100%);
    color: #e2e8f0;
}

.theme-ocean .step-card[b-wwly0na737],
.theme-ocean .feature-card[b-wwly0na737] { background: rgba(12, 74, 110, 0.6); border: 1px solid rgba(34, 211, 209, 0.2); }
.theme-ocean .step-icon[b-wwly0na737] { background: rgba(34, 211, 209, 0.2); }
.theme-ocean .step-icon svg[b-wwly0na737] { color: #22d3d1; }

.theme-mystic[b-wwly0na737] {
    background: linear-gradient(135deg, #1a1025 0%, #2d1b4e 100%);
    color: #e2e8f0;
}

.theme-mystic .step-card[b-wwly0na737],
.theme-mystic .feature-card[b-wwly0na737] { background: rgba(45, 27, 78, 0.6); border: 1px solid rgba(192, 132, 252, 0.2); }
.theme-mystic .step-icon[b-wwly0na737] { background: rgba(192, 132, 252, 0.2); }
.theme-mystic .step-icon svg[b-wwly0na737] { color: #c084fc; }

.theme-tron[b-wwly0na737] {
    background: linear-gradient(135deg, #0a0a0f 0%, #0f1923 100%);
    color: #e2e8f0;
}

.theme-tron .step-card[b-wwly0na737],
.theme-tron .feature-card[b-wwly0na737] { background: rgba(15, 25, 35, 0.6); border: 1px solid rgba(34, 211, 238, 0.2); }
.theme-tron .step-icon[b-wwly0na737] { background: rgba(34, 211, 238, 0.2); }
.theme-tron .step-icon svg[b-wwly0na737] { color: #22d3ee; }

/* ============================================
   RESPONSIVE — Tablet (600px+)
   ============================================ */

@media (min-width: 600px) {
    .welcome-page[b-wwly0na737] {
        padding: 24px;
    }

    .welcome-hero[b-wwly0na737] {
        padding: 40px 24px;
    }

    .hero-title[b-wwly0na737] {
        font-size: 2rem;
    }

    .hero-subtitle[b-wwly0na737] {
        font-size: 1.1rem;
    }

    .features-grid[b-wwly0na737] {
        /* 2026-05-01: was `repeat(4, 1fr)` when the grid held Journal,
           Help Desk, Knowledge Base, My Account. Knowledge Base was removed
           the same day; switching to 3 columns so the remaining three cards
           fill the row evenly instead of leaving an empty right slot. */
        grid-template-columns: repeat(3, 1fr);
    }

    .ask-al-card[b-wwly0na737] {
        flex-direction: row;
        text-align: left;
    }

    .ask-al-button[b-wwly0na737] {
        width: auto;
        min-width: 120px;
    }

    .btn-cta[b-wwly0na737] {
        width: auto;
    }
}

/* ============================================
   RESPONSIVE — Desktop (900px+)
   ============================================ */

@media (min-width: 900px) {
    .welcome-hero[b-wwly0na737] {
        padding: 48px 24px;
    }

    .hero-title[b-wwly0na737] {
        font-size: 2.5rem;
    }

    .hero-subtitle[b-wwly0na737] {
        font-size: 1.2rem;
    }

    .steps-grid[b-wwly0na737] {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .step-card[b-wwly0na737] {
        padding: 28px 24px;
    }

    .step-btn[b-wwly0na737] {
        width: auto;
        min-width: 160px;
    }

    .feature-card:hover[b-wwly0na737] {
        transform: translateY(-4px);
    }
}

/* ============================================================================
   WELCOME-BRIEF-1 (2026-08-07): Progress Report opt-in nudge.
   Mirrors the ask-al card chrome (icon | text | action) so the page reads as
   one system; success state leans on the green the hero icon already uses.
   ============================================================================ */
.report-nudge[b-wwly0na737] {
    margin-bottom: 2rem;
}

.report-nudge-card[b-wwly0na737] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(99, 102, 241, 0.08));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
}

.report-nudge-icon[b-wwly0na737] {
    font-size: 1.75rem;
    line-height: 1;
}

.report-nudge-text[b-wwly0na737] {
    flex: 1;
}

.report-nudge-text h3[b-wwly0na737] {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    color: var(--theme-text, #1e293b);
}

.report-nudge-text p[b-wwly0na737] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
}

.report-nudge-text p a[b-wwly0na737] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.report-nudge-error[b-wwly0na737] {
    color: #dc2626 !important;
    margin-top: 0.35rem !important;
}

.report-nudge-actions[b-wwly0na737] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

.report-nudge-button[b-wwly0na737] {
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #ffffff;
    font-weight: 600;
    white-space: nowrap;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.report-nudge-button:hover:not(:disabled)[b-wwly0na737] {
    transform: translateY(-1px);
}

.report-nudge-button:disabled[b-wwly0na737] {
    opacity: 0.6;
    cursor: default;
}

.report-nudge-link[b-wwly0na737] {
    font-size: 0.85rem;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
}

.report-nudge-link:hover[b-wwly0na737] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.report-nudge-success[b-wwly0na737] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
}

@media (max-width: 640px) {
    .report-nudge-card[b-wwly0na737] {
        flex-direction: column;
        align-items: flex-start;
    }

    .report-nudge-actions[b-wwly0na737] {
        width: 100%;
    }
}
/* /Pages/Opportunities/Opportunities.razor.rz.scp.css */
/* ============================================
   PIPELINE PAGE - SCOPED STYLES
   Kanban board & pipeline-specific styles
   Uses CSS variables from theme-variables.css
   ============================================ */

/* View Toggle */
.pipeline-view-toggle[b-h2suct5doj] {
    display: flex;
    background: var(--theme-surface-alt, rgba(0, 0, 0, 0.05));
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.pipeline-toggle-btn[b-h2suct5doj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pipeline-toggle-btn svg[b-h2suct5doj] {
    width: 18px;
    height: 18px;
}

.pipeline-toggle-btn.active[b-h2suct5doj] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pipeline-toggle-btn:hover:not(.active)[b-h2suct5doj] {
    color: var(--theme-text-primary, #1e293b);
}

/* Kanban Board */
.pipeline-board[b-h2suct5doj] {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 400px;
}

.pipeline-column[b-h2suct5doj] {
    flex: 0 0 260px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    background: var(--theme-surface-alt, #f8fafc);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
}

.pipeline-column-header[b-h2suct5doj] {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 3px solid transparent;
}

.pipeline-column-header.stage-prospecting[b-h2suct5doj] { border-bottom-color: #3b82f6; background: rgba(59, 130, 246, 0.06); }
.pipeline-column-header.stage-qualification[b-h2suct5doj] { border-bottom-color: #8b5cf6; background: rgba(139, 92, 246, 0.06); }
.pipeline-column-header.stage-proposal[b-h2suct5doj] { border-bottom-color: #f59e0b; background: rgba(245, 158, 11, 0.06); }
.pipeline-column-header.stage-negotiation[b-h2suct5doj] { border-bottom-color: #06b6d4; background: rgba(6, 182, 212, 0.06); }
.pipeline-column-header.stage-won[b-h2suct5doj] { border-bottom-color: #22c55e; background: rgba(34, 197, 94, 0.06); }
.pipeline-column-header.stage-lost[b-h2suct5doj] { border-bottom-color: #ef4444; background: rgba(239, 68, 68, 0.06); }

.pipeline-column-title[b-h2suct5doj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pipeline-stage-label[b-h2suct5doj] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #334155);
}

.pipeline-stage-count[b-h2suct5doj] {
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.06);
    color: var(--theme-text-secondary, #475569);
    padding: 2px 8px;
    border-radius: 10px;
}

.pipeline-column-total[b-h2suct5doj] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

.pipeline-column-cards[b-h2suct5doj] {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    /* OPP-DND-1: leave room for the .drag-over highlight ring without
       reflowing layout when it activates — same padding either way. */
    border: 2px dashed transparent;
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* OPP-DND-1 (2026-05-08): drop-target highlight. Activates when the user
   drags an opportunity card over a column. The dashed accent border + faint
   theme-primary tint reads as "drop here lands the card" without being a
   wall of color. Theme variables make it self-balance across all 8 themes. */
.pipeline-column-cards.drag-over[b-h2suct5doj] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 45%, transparent);
}

.pipeline-empty-state[b-h2suct5doj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.8rem;
    font-style: italic;
}

/* OPP-DND-1: empty state copy flips to "Drop here" while a drag is over the
   column (the markup swaps the string; this rule just amplifies the tone so
   the copy feels like an active prompt, not the dormant "No opportunities". */
.pipeline-column-cards.drag-over .pipeline-empty-state[b-h2suct5doj] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-style: normal;
    font-weight: 600;
}

/* Pipeline Cards */
.pipeline-card[b-h2suct5doj] {
    background: var(--theme-surface, #ffffff);
    border-radius: 10px;
    padding: 14px;
    cursor: grab;
    transition: all 0.2s ease;
    border: 1px solid var(--theme-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pipeline-card:hover[b-h2suct5doj] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--theme-primary, rgba(30, 58, 95, 0.2));
}

/* OPP-DND-1: while the user is actively dragging (mouse down + held),
   flip the cursor to "grabbing" so the gesture is unambiguous. The
   browser's native drag operation may override this with its own ghost
   cursor depending on OS, but on Chromium the rule still helps for the
   brief moment between mousedown and the OS taking over. */
.pipeline-card:active[b-h2suct5doj] {
    cursor: grabbing;
}

/* OPP-DND-1: dragged-card visual. Dim + slightly tilt the card the user
   has picked up so they can see where they came from at a glance. The
   ::after rotation gives the card a "lifted" feel without doing anything
   to the layout (the card stays in its column slot until the drop fires
   the optimistic state mutation). */
.pipeline-card.dragging[b-h2suct5doj] {
    opacity: 0.4;
    transform: scale(0.98);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.pipeline-card.dragging:hover[b-h2suct5doj] {
    /* Override the lift transform from :hover so the dragging style stays
       authoritative; without this the card would "pop up" mid-drag whenever
       the cursor crossed back over its origin position. */
    transform: scale(0.98);
}

.pipeline-card-header[b-h2suct5doj] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.pipeline-card-name[b-h2suct5doj] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.3;
    flex: 1;
}

.pipeline-card-amount[b-h2suct5doj] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #10b981;
    white-space: nowrap;
}

.pipeline-card-account[b-h2suct5doj],
.pipeline-card-contact[b-h2suct5doj] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

.pipeline-card-footer[b-h2suct5doj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.05));
}

.pipeline-card-probability[b-h2suct5doj] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

.pipeline-card-date[b-h2suct5doj] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary, #64748b);
}

.pipeline-card-date.overdue[b-h2suct5doj] {
    color: #ef4444;
    font-weight: 600;
}

/* List View */
.pipeline-list-icon[b-h2suct5doj] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.list-page-item:hover .pipeline-list-icon[b-h2suct5doj] {
    transform: scale(1.1);
}

.pipeline-list-icon.icon-prospecting[b-h2suct5doj] { background: rgba(59, 130, 246, 0.12); }
.pipeline-list-icon.icon-qualification[b-h2suct5doj] { background: rgba(139, 92, 246, 0.12); }
.pipeline-list-icon.icon-proposal[b-h2suct5doj] { background: rgba(245, 158, 11, 0.12); }
.pipeline-list-icon.icon-negotiation[b-h2suct5doj] { background: rgba(6, 182, 212, 0.12); }
.pipeline-list-icon.icon-won[b-h2suct5doj] { background: rgba(34, 197, 94, 0.12); }
.pipeline-list-icon.icon-lost[b-h2suct5doj] { background: rgba(239, 68, 68, 0.12); }

.overdue-text[b-h2suct5doj] {
    color: #ef4444;
    font-weight: 500;
}

/* ============================================
   DARK THEME OVERRIDES (all 6 dark themes)
   ============================================ */

.is-dark .pipeline-view-toggle[b-h2suct5doj] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .pipeline-toggle-btn[b-h2suct5doj] {
    color: #94a3b8;
}

.is-dark .pipeline-toggle-btn.active[b-h2suct5doj] {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    box-shadow: none;
}

.is-dark .pipeline-toggle-btn:hover:not(.active)[b-h2suct5doj] {
    color: #e2e8f0;
}

.is-dark .pipeline-column[b-h2suct5doj] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .pipeline-card[b-h2suct5doj] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.is-dark .pipeline-card:hover[b-h2suct5doj] {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.is-dark .pipeline-card-name[b-h2suct5doj],
.is-dark .pipeline-stage-label[b-h2suct5doj] {
    color: #e2e8f0;
}

.is-dark .pipeline-card-amount[b-h2suct5doj] {
    color: #34d399;
}

.is-dark .pipeline-card-account[b-h2suct5doj],
.is-dark .pipeline-card-contact[b-h2suct5doj],
.is-dark .pipeline-card-probability[b-h2suct5doj],
.is-dark .pipeline-card-date[b-h2suct5doj],
.is-dark .pipeline-column-total[b-h2suct5doj],
.is-dark .pipeline-empty-state[b-h2suct5doj] {
    color: #94a3b8;
}

.is-dark .pipeline-stage-count[b-h2suct5doj] {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
}

.is-dark .pipeline-card-footer[b-h2suct5doj] {
    border-color: rgba(255, 255, 255, 0.06);
}

.is-dark .pipeline-list-icon.icon-prospecting[b-h2suct5doj] { background: rgba(59, 130, 246, 0.2); }
.is-dark .pipeline-list-icon.icon-qualification[b-h2suct5doj] { background: rgba(139, 92, 246, 0.2); }
.is-dark .pipeline-list-icon.icon-proposal[b-h2suct5doj] { background: rgba(245, 158, 11, 0.2); }
.is-dark .pipeline-list-icon.icon-negotiation[b-h2suct5doj] { background: rgba(6, 182, 212, 0.2); }
.is-dark .pipeline-list-icon.icon-won[b-h2suct5doj] { background: rgba(34, 197, 94, 0.2); }
.is-dark .pipeline-list-icon.icon-lost[b-h2suct5doj] { background: rgba(239, 68, 68, 0.2); }

/* Responsive */
@media (max-width: 768px) {
    .pipeline-board[b-h2suct5doj] {
        flex-direction: column;
    }

    .pipeline-column[b-h2suct5doj] {
        flex: none;
        min-width: unset;
    }
}
/* /Pages/Opportunities/OpportunityDetail.razor.rz.scp.css */
/* ============================================
   OPPORTUNITY DETAIL — scoped styles
   Mirrors ContactDetail.razor.css and AccountDetail.razor.css patterns
   for the detail-page rhythm (header-profile / stats-grid / related-work).
   The .stats-grid + .stat-card + .related-work-* blocks below are intentional
   duplication of ContactDetail.razor.css — at FOUR sites now (Account, Contact,
   Opportunity, and the future Invoice detail), this is the trigger to promote
   the shared shapes to utilities.css. Filed in DECISIONS.md → "2026-04-29:
   Opportunities polish bundle → future work" so the promotion happens as a
   focused housekeeping pass rather than tangled into every detail-page bundle.
   ============================================ */

/* Header — opportunity-flavored variant. Mirrors .contact-header /
   .account-header in shape. The icon orb (instead of an avatar) is the
   visual anchor since deals aren't people-shaped. */
.opportunity-header[b-vdh9eierxh] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.header-top-row[b-vdh9eierxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.header-actions[b-vdh9eierxh] {
    display: flex;
    gap: 8px;
}

.header-profile[b-vdh9eierxh] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-info[b-vdh9eierxh] {
    flex: 1;
    min-width: 0;
}

/* Icon orb — stage-tinted circular block holding the opportunity icon.
   Replaces what would be an avatar for a person-entity. The accent-*
   classes (accent-cyan / accent-teal / accent-blue / accent-purple /
   accent-green / accent-gray) come from utilities.css and tint via
   --item-accent. */
.opportunity-icon-orb[b-vdh9eierxh] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--item-accent, #334155);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.opportunity-icon-orb.accent-cyan[b-vdh9eierxh] { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.opportunity-icon-orb.accent-teal[b-vdh9eierxh] { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.opportunity-icon-orb.accent-blue[b-vdh9eierxh] { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.opportunity-icon-orb.accent-purple[b-vdh9eierxh] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.opportunity-icon-orb.accent-green[b-vdh9eierxh] { background: linear-gradient(135deg, #22c55e, #16a34a); }
.opportunity-icon-orb.accent-gray[b-vdh9eierxh] { background: linear-gradient(135deg, #64748b, #475569); }

.opportunity-name[b-vdh9eierxh] {
    margin: 0 0 8px;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    line-height: 1.2;
}

.opportunity-badges[b-vdh9eierxh] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* Subtitle line — "{Amount} deal · expected to close {date}" or similar.
   Same tone as .contact-subtitle / .account-subtitle. */
.opportunity-subtitle[b-vdh9eierxh] {
    margin: 10px 0 0;
    font-size: 0.95rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Linked-entity chip row — clickable Account/Contact chips + static
   Campaign chip (no detail page for campaigns yet). Same row treatment
   as the contact-reach-row but with chip-styled buttons rather than
   inline links. */
.opportunity-linked-row[b-vdh9eierxh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.linked-chip[b-vdh9eierxh] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

button.linked-chip[b-vdh9eierxh] {
    font: inherit;
}

.linked-chip:hover[b-vdh9eierxh] {
    filter: brightness(1.05);
    background: var(--theme-surface, #ffffff);
}

/* Static variant — for Campaign which has no detail page; renders as a
   non-interactive chip so it doesn't visually invite a click that would
   404. Same look minus the cursor-pointer + hover lift. */
.linked-chip-static[b-vdh9eierxh] {
    cursor: default;
}

.linked-chip-static:hover[b-vdh9eierxh] {
    filter: none;
    background: var(--theme-surface-secondary, #f1f5f9);
}

/* ============================================
   Stats Grid — duplicated from ContactDetail.razor.css. See file-header
   comment about promotion to utilities.css.
   ============================================ */
.stats-grid[b-vdh9eierxh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card[b-vdh9eierxh] {
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-vdh9eierxh] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.stat-icon[b-vdh9eierxh] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon.primary[b-vdh9eierxh] { color: var(--theme-primary-ink, var(--theme-primary, #334155)); background: rgba(var(--theme-primary-rgb, 51, 65, 81), 0.1); }
.stat-icon.info[b-vdh9eierxh] { color: #0ea5e9; background: #e0f2fe; }
.stat-icon.success[b-vdh9eierxh] { color: #10b981; background: #dcfce7; }
.stat-icon.error[b-vdh9eierxh] { color: #ef4444; background: #fee2e2; }
.stat-icon.warning[b-vdh9eierxh] { color: #f59e0b; background: #fef3c7; }

.stat-value[b-vdh9eierxh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0;
}

.stat-label[b-vdh9eierxh] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
    margin: 4px 0 0 0;
}

/* ============================================
   Related Work — duplicated from ContactDetail.razor.css with one tweak:
   "via {Account}" reads as "at {Account}" here since opportunities live
   AT accounts (deal-flavored framing) rather than being routed THROUGH
   them (contact-flavored framing). The CSS class names match
   ContactDetail's so the future promotion to utilities.css doesn't need
   a rename pass.
   ============================================ */
.related-work-card .detail-card-title[b-vdh9eierxh] {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.related-work-via[b-vdh9eierxh] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--theme-text-muted, #64748b);
    margin-left: 4px;
}

.related-work-account-link[b-vdh9eierxh] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--theme-link-color, var(--theme-primary));
    cursor: pointer;
    text-decoration: none;
}

.related-work-account-link:hover[b-vdh9eierxh] {
    text-decoration: underline;
}

.related-work-grid[b-vdh9eierxh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.related-work-bucket[b-vdh9eierxh] {
    display: flex;
    flex-direction: column;
    padding: 12px 14px;
    background: var(--theme-surface-subtle, rgba(241, 245, 249, 0.5));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    min-width: 0;
}

.related-work-bucket-header[b-vdh9eierxh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bucket-label[b-vdh9eierxh] {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary, #475569);
}

.bucket-count[b-vdh9eierxh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--theme-primary, #334155);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
}

.related-work-list[b-vdh9eierxh] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.related-work-item[b-vdh9eierxh] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    border-bottom: 1px solid var(--theme-border-subtle, rgba(226, 232, 240, 0.5));
    min-width: 0;
}

.related-work-item:last-child[b-vdh9eierxh] {
    border-bottom: none;
}

.related-work-item-title[b-vdh9eierxh] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.related-work-item-title[b-vdh9eierxh] {
    color: var(--theme-link-color, var(--theme-primary));
}

a.related-work-item-title:hover[b-vdh9eierxh] {
    text-decoration: underline;
}

.related-work-item-meta[b-vdh9eierxh] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
}

.related-work-bucket-more[b-vdh9eierxh] {
    margin-top: 10px;
    font-size: 0.8125rem;
    color: var(--theme-link-color, var(--theme-primary));
    text-decoration: none;
}

.related-work-bucket-more:hover[b-vdh9eierxh] {
    text-decoration: underline;
}

/* ============================================
   Dark theme variants — Mystic / Tron / Space / Winter / Nature / Ocean.
   Same shape as ContactDetail.razor.css's dark-theme block.
   ============================================ */
.is-dark .opportunity-header[b-vdh9eierxh] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .opportunity-name[b-vdh9eierxh] {
    color: #f1f5f9;
}

.is-dark .opportunity-subtitle[b-vdh9eierxh] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .linked-chip[b-vdh9eierxh] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(148, 163, 184, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .linked-chip:hover[b-vdh9eierxh] {
    background: rgba(255, 255, 255, 0.12);
}

.is-dark .linked-chip-static:hover[b-vdh9eierxh] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .stat-card[b-vdh9eierxh] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .stat-value[b-vdh9eierxh] {
    color: #f1f5f9;
}

.is-dark .stat-label[b-vdh9eierxh] {
    color: #cbd5e1;
}

.is-dark .related-work-bucket[b-vdh9eierxh] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.15);
}

.is-dark .related-work-item[b-vdh9eierxh] {
    border-color: rgba(148, 163, 184, 0.1);
}

.is-dark .related-work-item-title[b-vdh9eierxh] {
    color: #f1f5f9;
}

.is-dark .bucket-label[b-vdh9eierxh] {
    color: rgba(255, 255, 255, 0.7);
}
/* /Pages/PackageDashboard.razor.rz.scp.css */
/* ============================================
   PACKAGE DASHBOARD STYLES
   Internal authenticated dashboard for tool packages
   ============================================ */

/* Page Container */
.package-dashboard[b-qt3u51ql33] {
    min-height: calc(100vh - 56px);
    padding: 32px 24px;
    transition: background 0.5s ease;
}

/* Loading State */
.dashboard-loading[b-qt3u51ql33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    opacity: 0.7;
}

/* Empty / Not Found State */
.dashboard-empty[b-qt3u51ql33],
.dashboard-empty-tools[b-qt3u51ql33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    text-align: center;
}

.dashboard-empty h2[b-qt3u51ql33] {
    margin: 0;
    font-size: 1.5rem;
}

.dashboard-empty p[b-qt3u51ql33],
.dashboard-empty-tools p[b-qt3u51ql33] {
    margin: 0;
    opacity: 0.7;
    font-size: 0.95rem;
}

/* Header */
.dashboard-header[b-qt3u51ql33] {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: max(1000px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1000px contained, grows in Wide */
    margin: 0 auto 40px;
    padding: 28px 32px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.header-icon[b-qt3u51ql33] {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-icon .material-symbols-rounded[b-qt3u51ql33] {
    font-size: 36px;
    color: white;
}

.header-info[b-qt3u51ql33] {
    flex: 1;
}

.header-info h1[b-qt3u51ql33] {
    margin: 0 0 6px;
    font-size: 1.75rem;
    font-weight: 700;
}

.header-info p[b-qt3u51ql33] {
    margin: 0;
    font-size: 1rem;
    opacity: 0.75;
}

.header-stats[b-qt3u51ql33] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.stat-pill[b-qt3u51ql33] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    border-radius: 14px;
    min-width: 72px;
}

.stat-value[b-qt3u51ql33] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label[b-qt3u51ql33] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-top: 4px;
}

/* Tools Section */
.dashboard-tools[b-qt3u51ql33] {
    max-width: max(1000px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1000px contained, grows in Wide */
    margin: 0 auto;
}

.section-title[b-qt3u51ql33] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 20px;
    padding-left: 4px;
}

.tools-grid[b-qt3u51ql33] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.tool-card[b-qt3u51ql33] {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.tool-card:hover[b-qt3u51ql33] {
    transform: translateY(-4px);
}

.tool-card-icon[b-qt3u51ql33] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.tool-card-icon .material-symbols-rounded[b-qt3u51ql33] {
    font-size: 24px;
    color: white;
}

.tool-card-content[b-qt3u51ql33] {
    flex: 1;
    margin-bottom: 16px;
}

.tool-card-content h3[b-qt3u51ql33] {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 600;
}

.tool-card-content p[b-qt3u51ql33] {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.7;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tool-card-action[b-qt3u51ql33] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tool-card:hover .tool-card-action[b-qt3u51ql33] {
    opacity: 1;
}

/* ============================================
   THEME: Executive (Light - Professional)
   ============================================ */
.package-dashboard.theme-executive[b-qt3u51ql33] {
    background: linear-gradient(180deg, #f5f5f5 0%, #efefef 50%, #e0e0e0 100%);
}

.theme-executive .dashboard-header[b-qt3u51ql33] { background: white; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.theme-executive .header-info h1[b-qt3u51ql33] { color: #0f172a; }
.theme-executive .header-info p[b-qt3u51ql33] { color: #475569; }
.theme-executive .stat-pill[b-qt3u51ql33] { background: rgba(51, 65, 85, 0.06); }
.theme-executive .stat-value[b-qt3u51ql33] { color: #0f172a; }
.theme-executive .stat-label[b-qt3u51ql33] { color: #64748b; }
.theme-executive .section-title[b-qt3u51ql33] { color: #0f172a; }
.theme-executive .tool-card[b-qt3u51ql33] { background: white; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }
.theme-executive .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.1); }
.theme-executive .tool-card-content h3[b-qt3u51ql33] { color: #0f172a; }
.theme-executive .tool-card-content p[b-qt3u51ql33] { color: #475569; }
.theme-executive .tool-card-action[b-qt3u51ql33] { color: #334155; }
.theme-executive .dashboard-empty h2[b-qt3u51ql33] { color: #0f172a; }
.theme-executive .dashboard-empty p[b-qt3u51ql33] { color: #475569; }
.theme-executive .dashboard-loading p[b-qt3u51ql33] { color: #475569; }

/* ============================================
   THEME: Cloud (Light)
   ============================================ */
.package-dashboard.theme-cloud[b-qt3u51ql33] {
    background: linear-gradient(135deg, #f0f9ff 0%, #fdf4ff 50%, #faf5ff 100%);
}

.theme-cloud .dashboard-header[b-qt3u51ql33] { background: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.theme-cloud .header-info h1[b-qt3u51ql33] { color: #1e293b; }
.theme-cloud .header-info p[b-qt3u51ql33] { color: #64748b; }
.theme-cloud .stat-pill[b-qt3u51ql33] { background: rgba(99, 102, 241, 0.08); }
.theme-cloud .stat-value[b-qt3u51ql33] { color: #6366f1; }
.theme-cloud .stat-label[b-qt3u51ql33] { color: #64748b; }
.theme-cloud .section-title[b-qt3u51ql33] { color: #1e293b; }
.theme-cloud .tool-card[b-qt3u51ql33] { background: white; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.theme-cloud .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }
.theme-cloud .tool-card-content h3[b-qt3u51ql33] { color: #1e293b; }
.theme-cloud .tool-card-content p[b-qt3u51ql33] { color: #64748b; }
.theme-cloud .tool-card-action[b-qt3u51ql33] { color: #6366f1; }
.theme-cloud .dashboard-empty h2[b-qt3u51ql33] { color: #1e293b; }
.theme-cloud .dashboard-empty p[b-qt3u51ql33] { color: #64748b; }
.theme-cloud .dashboard-loading p[b-qt3u51ql33] { color: #64748b; }

/* ============================================
   THEME: Space (Dark)
   ============================================ */
.package-dashboard.theme-space[b-qt3u51ql33] {
    background: linear-gradient(135deg, #0f0a1e 0%, #1e1b4b 50%, #0f172a 100%);
}

.theme-space .dashboard-header[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(139, 92, 246, 0.2); }
.theme-space .header-info h1[b-qt3u51ql33] { color: #e2e8f0; }
.theme-space .header-info p[b-qt3u51ql33] { color: #c4b5fd; }
.theme-space .stat-pill[b-qt3u51ql33] { background: rgba(139, 92, 246, 0.15); }
.theme-space .stat-value[b-qt3u51ql33] { color: #a78bfa; }
.theme-space .stat-label[b-qt3u51ql33] { color: #c4b5fd; }
.theme-space .section-title[b-qt3u51ql33] { color: #e2e8f0; }
.theme-space .tool-card[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(139, 92, 246, 0.2); }
.theme-space .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 4px 16px rgba(139, 92, 246, 0.2); }
.theme-space .tool-card-content h3[b-qt3u51ql33] { color: #e2e8f0; }
.theme-space .tool-card-content p[b-qt3u51ql33] { color: #c4b5fd; }
.theme-space .tool-card-action[b-qt3u51ql33] { color: #a78bfa; }
.theme-space .dashboard-empty h2[b-qt3u51ql33] { color: #e2e8f0; }
.theme-space .dashboard-empty p[b-qt3u51ql33] { color: #c4b5fd; }
.theme-space .dashboard-loading p[b-qt3u51ql33] { color: #c4b5fd; }

/* ============================================
   THEME: Winter (Dark)
   ============================================ */
.package-dashboard.theme-winter[b-qt3u51ql33] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 50%, #1e1b4b 100%);
}

.theme-winter .dashboard-header[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(56, 189, 248, 0.2); }
.theme-winter .header-info h1[b-qt3u51ql33] { color: #e2e8f0; }
.theme-winter .header-info p[b-qt3u51ql33] { color: #7dd3fc; }
.theme-winter .stat-pill[b-qt3u51ql33] { background: rgba(56, 189, 248, 0.15); }
.theme-winter .stat-value[b-qt3u51ql33] { color: #7dd3fc; }
.theme-winter .stat-label[b-qt3u51ql33] { color: #7dd3fc; }
.theme-winter .section-title[b-qt3u51ql33] { color: #e2e8f0; }
.theme-winter .tool-card[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(56, 189, 248, 0.2); }
.theme-winter .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 4px 16px rgba(56, 189, 248, 0.2); }
.theme-winter .tool-card-content h3[b-qt3u51ql33] { color: #e2e8f0; }
.theme-winter .tool-card-content p[b-qt3u51ql33] { color: #7dd3fc; }
.theme-winter .tool-card-action[b-qt3u51ql33] { color: #7dd3fc; }
.theme-winter .dashboard-empty h2[b-qt3u51ql33] { color: #e2e8f0; }
.theme-winter .dashboard-empty p[b-qt3u51ql33] { color: #7dd3fc; }
.theme-winter .dashboard-loading p[b-qt3u51ql33] { color: #7dd3fc; }

/* ============================================
   THEME: Nature (Dark)
   ============================================ */
.package-dashboard.theme-nature[b-qt3u51ql33] {
    background: linear-gradient(135deg, #14532d 0%, #1a2e1a 50%, #365314 100%);
}

.theme-nature .dashboard-header[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(74, 222, 128, 0.2); }
.theme-nature .header-info h1[b-qt3u51ql33] { color: #e2e8f0; }
.theme-nature .header-info p[b-qt3u51ql33] { color: #86efac; }
.theme-nature .stat-pill[b-qt3u51ql33] { background: rgba(74, 222, 128, 0.15); }
.theme-nature .stat-value[b-qt3u51ql33] { color: #86efac; }
.theme-nature .stat-label[b-qt3u51ql33] { color: #86efac; }
.theme-nature .section-title[b-qt3u51ql33] { color: #e2e8f0; }
.theme-nature .tool-card[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(74, 222, 128, 0.2); }
.theme-nature .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 4px 16px rgba(74, 222, 128, 0.2); }
.theme-nature .tool-card-content h3[b-qt3u51ql33] { color: #e2e8f0; }
.theme-nature .tool-card-content p[b-qt3u51ql33] { color: #86efac; }
.theme-nature .tool-card-action[b-qt3u51ql33] { color: #86efac; }
.theme-nature .dashboard-empty h2[b-qt3u51ql33] { color: #e2e8f0; }
.theme-nature .dashboard-empty p[b-qt3u51ql33] { color: #86efac; }
.theme-nature .dashboard-loading p[b-qt3u51ql33] { color: #86efac; }

/* ============================================
   THEME: Ocean (Dark)
   ============================================ */
.package-dashboard.theme-ocean[b-qt3u51ql33] {
    background: linear-gradient(135deg, #0c4a6e 0%, #164e63 50%, #0f766e 100%);
}

.theme-ocean .dashboard-header[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(34, 211, 238, 0.2); }
.theme-ocean .header-info h1[b-qt3u51ql33] { color: #e2e8f0; }
.theme-ocean .header-info p[b-qt3u51ql33] { color: #67e8f9; }
.theme-ocean .stat-pill[b-qt3u51ql33] { background: rgba(34, 211, 238, 0.15); }
.theme-ocean .stat-value[b-qt3u51ql33] { color: #67e8f9; }
.theme-ocean .stat-label[b-qt3u51ql33] { color: #67e8f9; }
.theme-ocean .section-title[b-qt3u51ql33] { color: #e2e8f0; }
.theme-ocean .tool-card[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(34, 211, 238, 0.2); }
.theme-ocean .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 4px 16px rgba(34, 211, 238, 0.2); }
.theme-ocean .tool-card-content h3[b-qt3u51ql33] { color: #e2e8f0; }
.theme-ocean .tool-card-content p[b-qt3u51ql33] { color: #67e8f9; }
.theme-ocean .tool-card-action[b-qt3u51ql33] { color: #67e8f9; }
.theme-ocean .dashboard-empty h2[b-qt3u51ql33] { color: #e2e8f0; }
.theme-ocean .dashboard-empty p[b-qt3u51ql33] { color: #67e8f9; }
.theme-ocean .dashboard-loading p[b-qt3u51ql33] { color: #67e8f9; }

/* ============================================
   THEME: Mystic (Dark)
   ============================================ */
.package-dashboard.theme-mystic[b-qt3u51ql33] {
    background: linear-gradient(135deg, #4a1942 0%, #2d1b69 50%, #1e1b4b 100%);
}

.theme-mystic .dashboard-header[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(232, 121, 249, 0.2); }
.theme-mystic .header-info h1[b-qt3u51ql33] { color: #e2e8f0; }
.theme-mystic .header-info p[b-qt3u51ql33] { color: #f0abfc; }
.theme-mystic .stat-pill[b-qt3u51ql33] { background: rgba(232, 121, 249, 0.15); }
.theme-mystic .stat-value[b-qt3u51ql33] { color: #e879f9; }
.theme-mystic .stat-label[b-qt3u51ql33] { color: #f0abfc; }
.theme-mystic .section-title[b-qt3u51ql33] { color: #e2e8f0; }
.theme-mystic .tool-card[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); border: 1px solid rgba(232, 121, 249, 0.2); }
.theme-mystic .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 4px 16px rgba(232, 121, 249, 0.2); }
.theme-mystic .tool-card-content h3[b-qt3u51ql33] { color: #e2e8f0; }
.theme-mystic .tool-card-content p[b-qt3u51ql33] { color: #f0abfc; }
.theme-mystic .tool-card-action[b-qt3u51ql33] { color: #e879f9; }
.theme-mystic .dashboard-empty h2[b-qt3u51ql33] { color: #e2e8f0; }
.theme-mystic .dashboard-empty p[b-qt3u51ql33] { color: #f0abfc; }
.theme-mystic .dashboard-loading p[b-qt3u51ql33] { color: #f0abfc; }

/* ============================================
   THEME: Tron (Dark)
   ============================================ */
.package-dashboard.theme-tron[b-qt3u51ql33] {
    background: linear-gradient(135deg, #0a0a0a 0%, #111827 50%, #0f172a 100%);
}

.theme-tron .dashboard-header[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(6, 182, 212, 0.3); }
.theme-tron .header-info h1[b-qt3u51ql33] { color: #e2e8f0; }
.theme-tron .header-info p[b-qt3u51ql33] { color: #67e8f9; }
.theme-tron .stat-pill[b-qt3u51ql33] { background: rgba(6, 182, 212, 0.15); }
.theme-tron .stat-value[b-qt3u51ql33] { color: #22d3ee; }
.theme-tron .stat-label[b-qt3u51ql33] { color: #67e8f9; }
.theme-tron .section-title[b-qt3u51ql33] { color: #e2e8f0; }
.theme-tron .tool-card[b-qt3u51ql33] { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(6, 182, 212, 0.2); }
.theme-tron .tool-card:hover[b-qt3u51ql33] { box-shadow: 0 4px 16px rgba(6, 182, 212, 0.25); border-color: rgba(6, 182, 212, 0.4); }
.theme-tron .tool-card-content h3[b-qt3u51ql33] { color: #e2e8f0; }
.theme-tron .tool-card-content p[b-qt3u51ql33] { color: #67e8f9; }
.theme-tron .tool-card-action[b-qt3u51ql33] { color: #22d3ee; }
.theme-tron .dashboard-empty h2[b-qt3u51ql33] { color: #e2e8f0; }
.theme-tron .dashboard-empty p[b-qt3u51ql33] { color: #67e8f9; }
.theme-tron .dashboard-loading p[b-qt3u51ql33] { color: #67e8f9; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .package-dashboard[b-qt3u51ql33] { padding: 16px; }
    .dashboard-header[b-qt3u51ql33] { flex-direction: column; align-items: flex-start; padding: 20px; gap: 16px; }
    .header-info h1[b-qt3u51ql33] { font-size: 1.35rem; }
    .header-stats[b-qt3u51ql33] { width: 100%; }
    .tools-grid[b-qt3u51ql33] { grid-template-columns: 1fr; }
    .tool-card[b-qt3u51ql33] { padding: 20px; }
}
/* /Pages/Poker/PokerTable.razor.rz.scp.css */
.poker-page[b-6dhxqjv6du] {
    min-height: calc(100vh - 56px);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: white;
}

/* Loading Screen */
.loading-screen[b-6dhxqjv6du] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    gap: 20px;
}

.loading-spinner[b-6dhxqjv6du] {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-6dhxqjv6du 1s linear infinite;
}

@keyframes spin-b-6dhxqjv6du {
    to { transform: rotate(360deg); }
}

/* Lobby */
.poker-lobby[b-6dhxqjv6du] {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
}

.lobby-header[b-6dhxqjv6du] {
    text-align: center;
    margin-bottom: 40px;
}

.lobby-header h1[b-6dhxqjv6du] {
    font-size: 3rem;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.lobby-header p[b-6dhxqjv6du] {
    color: #9ca3af;
    font-size: 1.1rem;
}

.lobby-actions[b-6dhxqjv6du] {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.lobby-btn[b-6dhxqjv6du] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 32px;
    border-radius: 16px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 160px;
    font-family: inherit;
}

.lobby-btn .btn-icon[b-6dhxqjv6du] {
    font-size: 2rem;
}

.lobby-btn span:last-child[b-6dhxqjv6du] {
    font-size: 1rem;
    font-weight: 600;
}

.create-btn[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.join-btn[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.quick-btn[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1f2937;
}

.lobby-btn:hover[b-6dhxqjv6du] {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px transparent;
}

/* Poker Tips */
.poker-tips[b-6dhxqjv6du] {
    margin: 40px 0;
    padding: 24px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.poker-tips h3[b-6dhxqjv6du] {
    margin-bottom: 20px;
    color: #fbbf24;
}

.tips-grid[b-6dhxqjv6du] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.tip-card[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.05);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.tip-card:hover[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.tip-icon[b-6dhxqjv6du] {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.tip-card h4[b-6dhxqjv6du] {
    color: #60a5fa;
    margin-bottom: 8px;
    font-size: 1rem;
}

.tip-card p[b-6dhxqjv6du] {
    color: #9ca3af;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Available Rooms */
.available-rooms[b-6dhxqjv6du] {
    margin-top: 40px;
}

.available-rooms h3[b-6dhxqjv6du] {
    margin-bottom: 16px;
    color: #9ca3af;
}

.rooms-list[b-6dhxqjv6du] {
    display: grid;
    gap: 12px;
}

.room-card[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.room-card:hover[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.1);
    border-color: #3b82f6;
}

.room-name[b-6dhxqjv6du] {
    font-weight: 600;
    display: block;
}

.room-code[b-6dhxqjv6du] {
    color: #9ca3af;
    font-size: 0.85rem;
}

.room-details[b-6dhxqjv6du] {
    display: flex;
    gap: 16px;
    color: #9ca3af;
    font-size: 0.9rem;
}

/* Dialog */
.dialog-overlay[b-6dhxqjv6du] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.dialog-content[b-6dhxqjv6du] {
    background: #1e293b;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-content h2[b-6dhxqjv6du] {
    margin-bottom: 24px;
    text-align: center;
}

.form-group[b-6dhxqjv6du] {
    margin-bottom: 16px;
}

.form-group label[b-6dhxqjv6du] {
    display: block;
    margin-bottom: 6px;
    color: #9ca3af;
    font-size: 0.9rem;
}

.form-group input[b-6dhxqjv6du],
.form-group select[b-6dhxqjv6du] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    font-size: 1rem;
}

.form-group input:focus[b-6dhxqjv6du],
.form-group select:focus[b-6dhxqjv6du] {
    outline: none;
    border-color: #3b82f6;
}

.form-row[b-6dhxqjv6du] {
    display: flex;
    gap: 16px;
}

.form-row .form-group[b-6dhxqjv6du] {
    flex: 1;
}

.dialog-actions[b-6dhxqjv6du] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.dialog-actions button[b-6dhxqjv6du] {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.btn-secondary[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.btn-primary[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

/* Game View */
.poker-game[b-6dhxqjv6du] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* Account for nav header */
    overflow: hidden;
}

.game-header[b-6dhxqjv6du] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 24px;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.game-header .room-name[b-6dhxqjv6du] {
    font-weight: 600;
    font-size: 1.1rem;
}

.game-header .room-code[b-6dhxqjv6du] {
    color: #9ca3af;
    font-size: 0.85rem;
}

/* Copy room code button */
.room-code-btn[b-6dhxqjv6du] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: inherit;
    font-family: inherit;
}

.room-code-btn:hover[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.1);
    border-color: #3b82f6;
}

.room-code-btn .copy-icon[b-6dhxqjv6du] {
    opacity: 0.5;
    font-size: 0.8rem;
    transition: opacity 0.2s;
}

.room-code-btn:hover .copy-icon[b-6dhxqjv6du] {
    opacity: 1;
}

.hand-info[b-6dhxqjv6du] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9ca3af;
}

.phase-badge[b-6dhxqjv6du] {
    background: #3b82f6;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.leave-btn[b-6dhxqjv6du] {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.leave-btn:hover[b-6dhxqjv6du] {
    background: rgba(239, 68, 68, 0.3);
}

/* Invite button */
.invite-btn[b-6dhxqjv6du] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.2));
    border: 1px solid #22c55e;
    color: #86efac;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.invite-btn:hover[b-6dhxqjv6du] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.3));
    transform: translateY(-1px);
}

.invite-btn span:first-child[b-6dhxqjv6du] {
    font-size: 1rem;
}

/* Poker Table */
.poker-table-container[b-6dhxqjv6du] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    min-height: 0; /* Allow shrinking */
}

.poker-table[b-6dhxqjv6du] {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 380px;
}

.table-felt[b-6dhxqjv6du] {
    position: absolute;
    inset: 50px;
    background: linear-gradient(135deg, #166534 0%, #15803d 50%, #166534 100%);
    border-radius: 50%;
    border: 10px solid #8b4513;
    box-shadow: 
        inset 0 0 40px transparent,
        0 8px 30px transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.table-felt[b-6dhxqjv6du]::before {
    content: '';
    position: absolute;
    inset: -12px;
    border: 2px solid #a0522d;
    border-radius: 50%;
}

/* Table Themes */
.table-felt.theme-blue[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #1e3a8a 100%);
    border-color: #1e40af;
}

.table-felt.theme-blue[b-6dhxqjv6du]::before {
    border-color: #3b82f6;
}

.table-felt.theme-red[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 50%, #7f1d1d 100%);
    border-color: #991b1b;
}

.table-felt.theme-red[b-6dhxqjv6du]::before {
    border-color: #ef4444;
}

.table-felt.theme-purple[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #581c87 0%, #9333ea 50%, #581c87 100%);
    border-color: #6b21a8;
}

.table-felt.theme-purple[b-6dhxqjv6du]::before {
    border-color: #a855f7;
}

.table-felt.theme-black[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #1f2937 100%);
    border-color: #111827;
}

.table-felt.theme-black[b-6dhxqjv6du]::before {
    border-color: #4b5563;
}

.community-cards[b-6dhxqjv6du] {
    display: flex;
    gap: 8px;
}

.card-placeholder[b-6dhxqjv6du] {
    width: 50px;
    height: 70px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 6px;
}

.pot-display[b-6dhxqjv6du] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    padding: 6px 20px;
    border-radius: 16px;
}

.pot-display .pot-label[b-6dhxqjv6du] {
    font-size: 0.65rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pot-display .pot-value[b-6dhxqjv6du] {
    font-size: 1.2rem;
    font-weight: bold;
    color: #fbbf24;
}

/* My Cards Display - integrated into betting controls */
.my-cards[b-6dhxqjv6du] {
    display: none; /* Hide the floating cards - we'll show them inline */
}

.my-cards-label[b-6dhxqjv6du] {
    font-size: 0.7rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.my-cards-container[b-6dhxqjv6du] {
    display: flex;
    gap: 12px;
}

/* Host Controls */
.host-controls[b-6dhxqjv6du] {
    position: fixed;
    top: 80px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.host-btn[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.host-btn:hover:not(:disabled)[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.2);
}

.host-btn.start-btn[b-6dhxqjv6du] {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
}

.host-btn:disabled[b-6dhxqjv6du] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Action Log */
.action-log[b-6dhxqjv6du] {
    position: fixed;
    top: 140px;
    right: 16px;
    width: 220px;
    max-height: 180px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
}

.action-log[b-6dhxqjv6du]::before {
    content: 'Game Log';
    display: block;
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.log-entry[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #e2e8f0;
    animation: fadeIn-b-6dhxqjv6du 0.3s ease;
    border-left: 2px solid #3b82f6;
}

.log-entry:nth-child(odd)[b-6dhxqjv6du] {
    border-left-color: #8b5cf6;
}

/* Scrollbar styling for action log */
.action-log[b-6dhxqjv6du]::-webkit-scrollbar {
    width: 6px;
}

.action-log[b-6dhxqjv6du]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.action-log[b-6dhxqjv6du]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.action-log[b-6dhxqjv6du]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

@keyframes fadeIn-b-6dhxqjv6du {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Keyboard shortcut hint */
.keyboard-hint[b-6dhxqjv6du] {
    position: fixed;
    bottom: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.75rem;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 100;
}

.keyboard-hint:hover[b-6dhxqjv6du] {
    background: rgba(30, 41, 59, 0.95);
    color: #9ca3af;
}

.keyboard-hint kbd[b-6dhxqjv6du] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    margin: 0 4px;
}

/* Focus outline for keyboard navigation */
.poker-page:focus[b-6dhxqjv6du] {
    outline: none;
}

/* Hand helper container */
.hand-helper-container[b-6dhxqjv6du] {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

/* Emoji container */
.emoji-container[b-6dhxqjv6du] {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 100;
}

/* Bottom controls - pre-actions + emojis */
.bottom-controls[b-6dhxqjv6du] {
    position: fixed;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
}

/* Responsive */
@media (max-width: 768px) {
    /* Game header - simplified for mobile */
    .game-header[b-6dhxqjv6du] {
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 8px;
    }

    .game-header .room-info[b-6dhxqjv6du] {
        flex: 1;
        min-width: 0;
    }

    .game-header .room-name[b-6dhxqjv6du] {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 120px;
    }

    .room-code-btn[b-6dhxqjv6du] {
        display: none; /* Hide on mobile - use invite instead */
    }

    .hand-info[b-6dhxqjv6du] {
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
    }

    .hand-info > span:first-child[b-6dhxqjv6du] {
        display: none; /* Hide hand number on mobile */
    }

    .phase-badge[b-6dhxqjv6du] {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .invite-btn[b-6dhxqjv6du] {
        padding: 4px 10px;
        font-size: 0.75rem;
    }

    .invite-btn span:last-child[b-6dhxqjv6du] {
        display: none; /* Just show icon */
    }

    .leave-btn[b-6dhxqjv6du] {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Poker table - optimized for portrait */
    .poker-game[b-6dhxqjv6du] {
        height: auto;
        min-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    .poker-table-container[b-6dhxqjv6du] {
        padding: 5px 10px;
        min-height: 280px;
    }

    .poker-table[b-6dhxqjv6du] {
        max-height: 280px;
        aspect-ratio: auto;
    }

    .table-felt[b-6dhxqjv6du] {
        inset: 20px 10px;
        border-width: 6px;
        gap: 8px;
    }

    .table-felt[b-6dhxqjv6du]::before {
        inset: -8px;
    }

    /* Community cards - smaller on mobile */
    .community-cards[b-6dhxqjv6du] {
        gap: 4px;
        flex-wrap: nowrap;
    }

    .card-placeholder[b-6dhxqjv6du] {
        width: 36px;
        height: 50px;
        border-radius: 4px;
    }

    /* Pot display */
    .pot-display[b-6dhxqjv6du] {
        padding: 4px 12px;
        border-radius: 12px;
    }

    .pot-display .pot-label[b-6dhxqjv6du] {
        font-size: 0.55rem;
    }

    .pot-display .pot-value[b-6dhxqjv6du] {
        font-size: 1rem;
    }

    /* Lobby */
    .poker-lobby[b-6dhxqjv6du] {
        padding: 20px 16px;
    }

    .lobby-header h1[b-6dhxqjv6du] {
        font-size: 2rem;
    }

    .lobby-actions[b-6dhxqjv6du] {
        flex-direction: column;
        align-items: center;
    }

    .lobby-btn[b-6dhxqjv6du] {
        width: 100%;
        max-width: 300px;
        padding: 18px 24px;
    }

    .poker-tips[b-6dhxqjv6du] {
        padding: 16px;
        margin: 20px 0;
    }

    .tips-grid[b-6dhxqjv6du] {
        grid-template-columns: 1fr;
    }

    /* Hide non-essential on mobile */
    .action-log[b-6dhxqjv6du] {
        display: none;
    }

    .keyboard-hint[b-6dhxqjv6du] {
        display: none;
    }

    /* Hand helper - repositioned for mobile */
    .hand-helper-container[b-6dhxqjv6du] {
        bottom: auto;
        top: 8px;
        left: 8px;
        right: auto;
        transform: none;
    }

    /* Bottom controls - repositioned */
    .bottom-controls[b-6dhxqjv6du] {
        bottom: 6px;
        right: 6px;
        gap: 6px;
    }

    /* Host controls */
    .host-controls[b-6dhxqjv6du] {
        position: relative;
        top: auto;
        right: auto;
        flex-direction: row;
        justify-content: center;
        padding: 10px;
        gap: 10px;
    }

    .host-btn[b-6dhxqjv6du] {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    /* Dialog adjustments */
    .dialog-content[b-6dhxqjv6du] {
        padding: 20px;
        max-width: 95vw;
    }

    .dialog-content h2[b-6dhxqjv6du] {
        font-size: 1.3rem;
    }

    .form-row[b-6dhxqjv6du] {
        flex-direction: column;
    }

    /* Training toggle on mobile */
    .training-toggle .toggle-label[b-6dhxqjv6du] {
        display: none;
    }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
    .game-header[b-6dhxqjv6du] {
        padding: 6px 10px;
    }

    .game-header .room-name[b-6dhxqjv6du] {
        max-width: 80px;
        font-size: 0.85rem;
    }

    .leave-btn[b-6dhxqjv6du] {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .poker-table-container[b-6dhxqjv6du] {
        min-height: 240px;
    }

    .poker-table[b-6dhxqjv6du] {
        max-height: 240px;
    }

    .table-felt[b-6dhxqjv6du] {
        inset: 15px 5px;
        border-width: 4px;
    }

    .community-cards[b-6dhxqjv6du] {
        gap: 2px;
    }

    .card-placeholder[b-6dhxqjv6du] {
        width: 30px;
        height: 42px;
    }

    .pot-display .pot-value[b-6dhxqjv6du] {
        font-size: 0.9rem;
    }

    .lobby-header h1[b-6dhxqjv6du] {
        font-size: 1.6rem;
    }
}
/* /Pages/Polls/Vote.razor.rz.scp.css */
.vote-page[b-ickxpu0jqg] {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 24px;
        padding: 32px 0;
    }

    .vote-card[b-ickxpu0jqg], .vote-sidebar[b-ickxpu0jqg] {
        background: var(--theme-surface, white);
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
    }

    .poll-header[b-ickxpu0jqg] {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 24px;
    }

    .poll-icon[b-ickxpu0jqg] {
        width: 56px;
        height: 56px;
        border-radius: 16px;
        background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }

    .muted[b-ickxpu0jqg] { color: transparent; }

    .loading-placeholder[b-ickxpu0jqg] { display: flex; flex-direction: column; gap: 12px; }
    .loading-title[b-ickxpu0jqg] { height: 28px; width: 60%; background: rgba(0,0,0,0.08); border-radius: 6px; }
    .loading-line[b-ickxpu0jqg] { height: 16px; width: 80%; background: rgba(0,0,0,0.05); border-radius: 6px; }
    .loading-block[b-ickxpu0jqg] { height: 180px; background: rgba(0,0,0,0.03); border-radius: 12px; }

    .info-box[b-ickxpu0jqg] { padding: 16px; border-radius: 12px; background: rgba(16, 185, 129, 0.1); color: #047857; margin-bottom: 16px; }
    .info-box.success[b-ickxpu0jqg] { background: rgba(16, 185, 129, 0.15); }

    .results-list[b-ickxpu0jqg] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
    .result-item[b-ickxpu0jqg] { padding: 14px 16px; border-radius: 12px; background: #f8fafc; }
    .result-item.user-voted[b-ickxpu0jqg] { border: 1px solid var(--theme-primary, #6366f1); }
    .result-row[b-ickxpu0jqg] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
    .progress-bar[b-ickxpu0jqg] { background: rgba(15, 23, 42, 0.06); border-radius: 999px; height: 8px; }
    .progress-bar div[b-ickxpu0jqg] { height: 100%; border-radius: 999px; background: var(--theme-primary, #6366f1); }

    .options[b-ickxpu0jqg] { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
    .option-card[b-ickxpu0jqg] { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; border: 2px solid transparent; background: rgba(15, 23, 42, 0.03); cursor: pointer; transition: all 0.2s ease; }
    .option-card.selected[b-ickxpu0jqg] { border-color: var(--theme-primary, #6366f1); background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12); }
    .option-card input[b-ickxpu0jqg] { accent-color: var(--theme-primary, #6366f1); }

    .spinner[b-ickxpu0jqg] { width: 16px; height: 16px; border: 2px solid rgba(0,0,0,0.1); border-top-color: var(--theme-primary, #6366f1); border-radius: 50%; animation: spin-b-ickxpu0jqg 0.6s linear infinite; }

    .vote-sidebar[b-ickxpu0jqg] { display: grid; gap: 16px; }
    .highlight-card[b-ickxpu0jqg], .tip-card[b-ickxpu0jqg] { padding: 20px; border-radius: 16px; background: var(--theme-surface-variant, #f1f5f9); border: 1px solid rgba(15, 23, 42, 0.08); }
    .highlight-card .icon[b-ickxpu0jqg] { font-size: 2rem; margin-bottom: 8px; }
    .gradient-rose[b-ickxpu0jqg] { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white; }
    .gradient-green[b-ickxpu0jqg] { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); color: white; }

    .chip[b-ickxpu0jqg] { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.2); color: inherit; text-decoration: none; margin-top: 12px; }

    .highlight-card h3[b-ickxpu0jqg], .tip-card h3[b-ickxpu0jqg] { margin-bottom: 8px; }
    .tip-card ul[b-ickxpu0jqg] { padding-left: 18px; margin: 0; }
    .total-votes[b-ickxpu0jqg] { margin-top: 12px; }


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

    @media (max-width: 900px) {
        .vote-page[b-ickxpu0jqg] { grid-template-columns: 1fr; }
        .vote-sidebar[b-ickxpu0jqg] { grid-auto-rows: minmax(120px, auto); }
    }
/* /Pages/Pricing/Pricing.razor.rz.scp.css */
/* ============================================
   PRICING PAGE — /pricing
   Header styled globally via public-pages.css
   ============================================ */

/* --- Page Layout --- */
/* PRICING-MOBILE-1 (2026-09-21): width:100% is LOAD-BEARING. This element is a flex
   item inside .public-page (display:flex; flex-direction:column), and margin:0 auto
   defeats align-self:stretch - so without an explicit width it sizes to its CONTENT.
   The comparison table's min-width:600px then propagated up and made the whole page
   634px wide on a 375px phone (156 elements overflowing); the table wrapper's
   overflow-x:auto never engaged because its container was never narrower than it.
   Verified in a 390px same-origin iframe before and after. */
.pricing-page[b-e52lm53q37] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px 80px;
}

/* --- Hero --- */
.pricing-hero[b-e52lm53q37] {
    text-align: center;
    padding: 60px 0 48px;
}

.pricing-hero-title[b-e52lm53q37] {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--theme-text-primary, #1a2332);
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.pricing-hero-subtitle[b-e52lm53q37] {
    font-size: 1.15rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 32px;
    font-weight: 500;
}

/* --- Billing Toggle --- */
.billing-toggle[b-e52lm53q37] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.billing-label[b-e52lm53q37] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #94a3b8);
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.billing-label.active[b-e52lm53q37] {
    color: var(--theme-text-primary, #1e293b);
}

.save-badge[b-e52lm53q37] {
    font-size: 0.7rem;
    font-weight: 700;
    background: linear-gradient(135deg, #059669, #10b981);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.toggle-switch[b-e52lm53q37] {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 13px;
    background: #cbd5e1;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.toggle-switch.on[b-e52lm53q37] {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
}

.toggle-knob[b-e52lm53q37] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.toggle-switch.on .toggle-knob[b-e52lm53q37] {
    transform: translateX(22px);
}

/* --- Tier Cards --- */
.pricing-tiers[b-e52lm53q37] {
    margin-bottom: 80px;
}

.tier-grid[b-e52lm53q37] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
}

.tier-card[b-e52lm53q37] {
    position: relative;
    background: var(--theme-surface, #ffffff);
    border-radius: 20px;
    padding: 36px 28px 32px;
    border: 1px solid var(--theme-border, #e2e8f0);
    transition: all 0.3s ease;
}

.tier-card:hover[b-e52lm53q37] {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px var(--theme-shadow-color, rgba(0, 0, 0, 0.1));
}

.tier-card.popular[b-e52lm53q37] {
    border: 2px solid var(--theme-primary, #7c3aed);
    padding-top: 44px;
    transform: scale(1.03);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.15);
    z-index: 1;
}

.tier-card.popular:hover[b-e52lm53q37] {
    transform: scale(1.03) translateY(-4px);
    box-shadow: 0 20px 56px rgba(124, 58, 237, 0.2);
}

.tier-badge[b-e52lm53q37] {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 5px 18px;
    border-radius: 20px;
    white-space: nowrap;
}

.tier-header[b-e52lm53q37] {
    text-align: center;
    margin-bottom: 24px;
}

.tier-name[b-e52lm53q37] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1a2332);
    margin: 0 0 4px;
}

.tier-tagline[b-e52lm53q37] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 20px;
    font-weight: 500;
}

.tier-price[b-e52lm53q37] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.tier-currency[b-e52lm53q37] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    align-self: flex-start;
    margin-top: 8px;
}

.tier-amount[b-e52lm53q37] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--theme-text-primary, #1a2332);
    letter-spacing: -0.03em;
    transition: opacity 0.15s ease;
}

.tier-interval[b-e52lm53q37] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.tier-billing[b-e52lm53q37] {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 4px 0 0;
}

/* --- CTAs --- */
.tier-cta[b-e52lm53q37] {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
}

.tier-cta.outlined[b-e52lm53q37] {
    background: transparent;
    color: var(--theme-text-primary, #1a2332);
    border: 1px solid var(--theme-border, #e2e8f0);
}

.tier-cta.outlined:hover[b-e52lm53q37] {
    background: rgba(var(--theme-primary-rgb, 0, 0, 0), 0.08);
    transform: translateY(-1px);
}

.tier-cta.primary[b-e52lm53q37] {
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: white;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
}

.tier-cta.primary:hover[b-e52lm53q37] {
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
    color: white;
}

.tier-cta.sm[b-e52lm53q37] {
    padding: 10px 20px;
    font-size: 0.85rem;
}

.tier-cta-note[b-e52lm53q37] {
    text-align: center;
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 10px 0 0;
}

/* --- Feature List --- */
.tier-features[b-e52lm53q37] {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

.tier-features li[b-e52lm53q37] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #475569);
    padding: 9px 0;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    padding-left: 24px;
    position: relative;
    border-bottom-color: color-mix(in srgb, var(--theme-border, #e2e8f0) 40%, transparent);
}

.tier-features li:last-child[b-e52lm53q37] {
    border-bottom: none;
}

.tier-features li[b-e52lm53q37]::before {
    content: '✓';
    color: #059669;
    font-weight: 700;
    position: absolute;
    left: 0;
}

.tier-features li.section-label[b-e52lm53q37] {
    font-weight: 600;
    color: var(--theme-text-primary, #1a2332);
    padding-left: 0;
    border-bottom: none;
    padding-bottom: 4px;
}

.tier-features li.section-label[b-e52lm53q37]::before {
    display: none;
}

.tier-features li.coming-soon[b-e52lm53q37] {
    color: var(--theme-text-secondary, #94a3b8);
    font-style: italic;
}

/* ============================================
   COMPARISON TABLE
   ============================================ */
.comparison-section[b-e52lm53q37] {
    margin-bottom: 80px;
}

.section-heading[b-e52lm53q37] {
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1a2332);
    margin: 0 0 12px;
}

.section-subheading[b-e52lm53q37] {
    text-align: center;
    font-size: 1.05rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 40px;
    font-weight: 500;
}

.comparison-table-wrap[b-e52lm53q37] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #ffffff);
}

.comparison-table[b-e52lm53q37] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.comparison-table thead th[b-e52lm53q37] {
    padding: 16px 20px;
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    background: #1a2332;
    text-align: center;
    white-space: nowrap;
}

.comparison-table thead th:first-child[b-e52lm53q37] {
    text-align: left;
    border-radius: 15px 0 0 0;
}

.comparison-table thead th:last-child[b-e52lm53q37] {
    border-radius: 0 15px 0 0;
}

.comparison-table thead th.highlight-col[b-e52lm53q37] {
    background: linear-gradient(135deg, #5b21b6, #0891b2);
}

.comparison-table tbody td[b-e52lm53q37] {
    padding: 14px 20px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #475569);
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--theme-border, #e2e8f0) 40%, transparent);
}

.comparison-table tbody td:first-child[b-e52lm53q37] {
    text-align: left;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.comparison-table tbody td.highlight-col[b-e52lm53q37] {
    background: rgba(124, 58, 237, 0.04);
}

.comparison-table tbody tr:last-child td[b-e52lm53q37] {
    border-bottom: none;
}

.table-check[b-e52lm53q37] {
    font-size: 1rem;
}

.table-dash[b-e52lm53q37] {
    color: #cbd5e1;
    font-size: 1.1rem;
    font-weight: 700;
}

/* ============================================
   CREDIT STORE
   ============================================ */
.credit-store-section[b-e52lm53q37] {
    margin-bottom: 80px;
}

.credit-packs-grid[b-e52lm53q37] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.credit-pack-card[b-e52lm53q37] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    padding: 28px 20px;
    border: 1px solid var(--theme-border, #e2e8f0);
    text-align: center;
    transition: all 0.3s ease;
}

.credit-pack-card:hover[b-e52lm53q37] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--theme-shadow-color, rgba(0, 0, 0, 0.1));
}

.pack-name[b-e52lm53q37] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1a2332);
    margin: 0 0 12px;
}

.pack-credits[b-e52lm53q37] {
    margin-bottom: 8px;
}

.pack-total[b-e52lm53q37] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1a2332);
}

.pack-bonus[b-e52lm53q37] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #059669;
    margin-top: 4px;
}

.pack-price[b-e52lm53q37] {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--theme-text-primary, #1a2332);
    margin-bottom: 4px;
}

.pack-per-credit[b-e52lm53q37] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin-bottom: 16px;
}

.credit-store-note[b-e52lm53q37] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #94a3b8);
    margin: 24px 0 0;
}

/* ============================================
   CREDITS EXPLAINER
   ============================================ */
.credits-explainer-section[b-e52lm53q37] {
    max-width: 680px;
    margin: 0 auto 80px;
    text-align: center;
}

.explainer-body[b-e52lm53q37] {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--theme-text-secondary, #64748b);
    margin: 16px 0 0;
}

/* ============================================
   FAQ
   ============================================ */
.faq-section[b-e52lm53q37] {
    max-width: 720px;
    margin: 0 auto 80px;
}

.faq-list[b-e52lm53q37] {
    margin-top: 32px;
}

.faq-item[b-e52lm53q37] {
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.faq-question[b-e52lm53q37] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1a2332);
    text-align: left;
    gap: 16px;
    transition: color 0.2s ease;
}

.faq-question:hover[b-e52lm53q37] {
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
}

.faq-chevron[b-e52lm53q37] {
    font-size: 1.25rem;
    font-weight: 400;
    flex-shrink: 0;
    color: var(--theme-text-secondary, #94a3b8);
    width: 24px;
    text-align: center;
}

.faq-answer[b-e52lm53q37] {
    padding: 0 0 18px;
    animation: faq-slide-down-b-e52lm53q37 0.2s ease;
}

.faq-answer p[b-e52lm53q37] {
    font-size: 0.925rem;
    line-height: 1.65;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

@keyframes faq-slide-down-b-e52lm53q37 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta-section[b-e52lm53q37] {
    margin-bottom: 0;
}

.final-cta-content[b-e52lm53q37] {
    text-align: center;
    padding: 64px 40px;
    background: #1a2332;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.final-cta-content h2[b-e52lm53q37] {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

.final-cta-sub[b-e52lm53q37] {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 32px;
    font-weight: 500;
}

.final-cta-btn[b-e52lm53q37] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background: linear-gradient(135deg, #7c3aed, #06b6d4);
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
    margin-bottom: 16px;
}

.final-cta-btn:hover[b-e52lm53q37] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
    color: white;
}

.final-cta-note[b-e52lm53q37] {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* ============================================
   DARK THEME
   ============================================ */
:global(.theme-space) .pricing-hero-title[b-e52lm53q37],
:global(.theme-winter) .pricing-hero-title[b-e52lm53q37],
:global(.theme-nature) .pricing-hero-title[b-e52lm53q37],
:global(.theme-ocean) .pricing-hero-title[b-e52lm53q37],
:global(.theme-mystic) .pricing-hero-title[b-e52lm53q37],
:global(.theme-tron) .pricing-hero-title[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .tier-card[b-e52lm53q37],
:global(.theme-winter) .tier-card[b-e52lm53q37],
:global(.theme-nature) .tier-card[b-e52lm53q37],
:global(.theme-ocean) .tier-card[b-e52lm53q37],
:global(.theme-mystic) .tier-card[b-e52lm53q37],
:global(.theme-tron) .tier-card[b-e52lm53q37] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .tier-card.popular[b-e52lm53q37],
:global(.theme-winter) .tier-card.popular[b-e52lm53q37],
:global(.theme-nature) .tier-card.popular[b-e52lm53q37],
:global(.theme-ocean) .tier-card.popular[b-e52lm53q37],
:global(.theme-mystic) .tier-card.popular[b-e52lm53q37],
:global(.theme-tron) .tier-card.popular[b-e52lm53q37] {
    border-color: var(--theme-primary, #7c3aed);
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.2);
}

:global(.theme-space) .tier-name[b-e52lm53q37],
:global(.theme-winter) .tier-name[b-e52lm53q37],
:global(.theme-nature) .tier-name[b-e52lm53q37],
:global(.theme-ocean) .tier-name[b-e52lm53q37],
:global(.theme-mystic) .tier-name[b-e52lm53q37],
:global(.theme-tron) .tier-name[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .tier-amount[b-e52lm53q37],
:global(.theme-winter) .tier-amount[b-e52lm53q37],
:global(.theme-nature) .tier-amount[b-e52lm53q37],
:global(.theme-ocean) .tier-amount[b-e52lm53q37],
:global(.theme-mystic) .tier-amount[b-e52lm53q37],
:global(.theme-tron) .tier-amount[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .tier-features li[b-e52lm53q37],
:global(.theme-winter) .tier-features li[b-e52lm53q37],
:global(.theme-nature) .tier-features li[b-e52lm53q37],
:global(.theme-ocean) .tier-features li[b-e52lm53q37],
:global(.theme-mystic) .tier-features li[b-e52lm53q37],
:global(.theme-tron) .tier-features li[b-e52lm53q37] {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

:global(.theme-space) .tier-features li.section-label[b-e52lm53q37],
:global(.theme-winter) .tier-features li.section-label[b-e52lm53q37],
:global(.theme-nature) .tier-features li.section-label[b-e52lm53q37],
:global(.theme-ocean) .tier-features li.section-label[b-e52lm53q37],
:global(.theme-mystic) .tier-features li.section-label[b-e52lm53q37],
:global(.theme-tron) .tier-features li.section-label[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .tier-cta.outlined[b-e52lm53q37],
:global(.theme-winter) .tier-cta.outlined[b-e52lm53q37],
:global(.theme-nature) .tier-cta.outlined[b-e52lm53q37],
:global(.theme-ocean) .tier-cta.outlined[b-e52lm53q37],
:global(.theme-mystic) .tier-cta.outlined[b-e52lm53q37],
:global(.theme-tron) .tier-cta.outlined[b-e52lm53q37] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.15);
}

:global(.theme-space) .tier-cta.outlined:hover[b-e52lm53q37],
:global(.theme-winter) .tier-cta.outlined:hover[b-e52lm53q37],
:global(.theme-nature) .tier-cta.outlined:hover[b-e52lm53q37],
:global(.theme-ocean) .tier-cta.outlined:hover[b-e52lm53q37],
:global(.theme-mystic) .tier-cta.outlined:hover[b-e52lm53q37],
:global(.theme-tron) .tier-cta.outlined:hover[b-e52lm53q37] {
    background: rgba(255, 255, 255, 0.08);
}

/* Dark: Comparison Table */
:global(.theme-space) .comparison-table-wrap[b-e52lm53q37],
:global(.theme-winter) .comparison-table-wrap[b-e52lm53q37],
:global(.theme-nature) .comparison-table-wrap[b-e52lm53q37],
:global(.theme-ocean) .comparison-table-wrap[b-e52lm53q37],
:global(.theme-mystic) .comparison-table-wrap[b-e52lm53q37],
:global(.theme-tron) .comparison-table-wrap[b-e52lm53q37] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .comparison-table tbody td[b-e52lm53q37],
:global(.theme-winter) .comparison-table tbody td[b-e52lm53q37],
:global(.theme-nature) .comparison-table tbody td[b-e52lm53q37],
:global(.theme-ocean) .comparison-table tbody td[b-e52lm53q37],
:global(.theme-mystic) .comparison-table tbody td[b-e52lm53q37],
:global(.theme-tron) .comparison-table tbody td[b-e52lm53q37] {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.06);
}

:global(.theme-space) .comparison-table tbody td:first-child[b-e52lm53q37],
:global(.theme-winter) .comparison-table tbody td:first-child[b-e52lm53q37],
:global(.theme-nature) .comparison-table tbody td:first-child[b-e52lm53q37],
:global(.theme-ocean) .comparison-table tbody td:first-child[b-e52lm53q37],
:global(.theme-mystic) .comparison-table tbody td:first-child[b-e52lm53q37],
:global(.theme-tron) .comparison-table tbody td:first-child[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .comparison-table tbody td.highlight-col[b-e52lm53q37],
:global(.theme-winter) .comparison-table tbody td.highlight-col[b-e52lm53q37],
:global(.theme-nature) .comparison-table tbody td.highlight-col[b-e52lm53q37],
:global(.theme-ocean) .comparison-table tbody td.highlight-col[b-e52lm53q37],
:global(.theme-mystic) .comparison-table tbody td.highlight-col[b-e52lm53q37],
:global(.theme-tron) .comparison-table tbody td.highlight-col[b-e52lm53q37] {
    background: rgba(124, 58, 237, 0.1);
}

:global(.theme-space) .table-dash[b-e52lm53q37],
:global(.theme-winter) .table-dash[b-e52lm53q37],
:global(.theme-nature) .table-dash[b-e52lm53q37],
:global(.theme-ocean) .table-dash[b-e52lm53q37],
:global(.theme-mystic) .table-dash[b-e52lm53q37],
:global(.theme-tron) .table-dash[b-e52lm53q37] {
    color: rgba(255, 255, 255, 0.2);
}

/* Dark: Credit Store */
:global(.theme-space) .credit-pack-card[b-e52lm53q37],
:global(.theme-winter) .credit-pack-card[b-e52lm53q37],
:global(.theme-nature) .credit-pack-card[b-e52lm53q37],
:global(.theme-ocean) .credit-pack-card[b-e52lm53q37],
:global(.theme-mystic) .credit-pack-card[b-e52lm53q37],
:global(.theme-tron) .credit-pack-card[b-e52lm53q37] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

:global(.theme-space) .pack-name[b-e52lm53q37],
:global(.theme-winter) .pack-name[b-e52lm53q37],
:global(.theme-nature) .pack-name[b-e52lm53q37],
:global(.theme-ocean) .pack-name[b-e52lm53q37],
:global(.theme-mystic) .pack-name[b-e52lm53q37],
:global(.theme-tron) .pack-name[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .pack-total[b-e52lm53q37],
:global(.theme-winter) .pack-total[b-e52lm53q37],
:global(.theme-nature) .pack-total[b-e52lm53q37],
:global(.theme-ocean) .pack-total[b-e52lm53q37],
:global(.theme-mystic) .pack-total[b-e52lm53q37],
:global(.theme-tron) .pack-total[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .pack-price[b-e52lm53q37],
:global(.theme-winter) .pack-price[b-e52lm53q37],
:global(.theme-nature) .pack-price[b-e52lm53q37],
:global(.theme-ocean) .pack-price[b-e52lm53q37],
:global(.theme-mystic) .pack-price[b-e52lm53q37],
:global(.theme-tron) .pack-price[b-e52lm53q37] {
    color: white;
}

/* Dark: Section headings */
:global(.theme-space) .section-heading[b-e52lm53q37],
:global(.theme-winter) .section-heading[b-e52lm53q37],
:global(.theme-nature) .section-heading[b-e52lm53q37],
:global(.theme-ocean) .section-heading[b-e52lm53q37],
:global(.theme-mystic) .section-heading[b-e52lm53q37],
:global(.theme-tron) .section-heading[b-e52lm53q37] {
    color: white;
}

/* Dark: FAQ */
:global(.theme-space) .faq-item[b-e52lm53q37],
:global(.theme-winter) .faq-item[b-e52lm53q37],
:global(.theme-nature) .faq-item[b-e52lm53q37],
:global(.theme-ocean) .faq-item[b-e52lm53q37],
:global(.theme-mystic) .faq-item[b-e52lm53q37],
:global(.theme-tron) .faq-item[b-e52lm53q37] {
    border-color: rgba(255, 255, 255, 0.08);
}

:global(.theme-space) .faq-question[b-e52lm53q37],
:global(.theme-winter) .faq-question[b-e52lm53q37],
:global(.theme-nature) .faq-question[b-e52lm53q37],
:global(.theme-ocean) .faq-question[b-e52lm53q37],
:global(.theme-mystic) .faq-question[b-e52lm53q37],
:global(.theme-tron) .faq-question[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .faq-answer p[b-e52lm53q37],
:global(.theme-winter) .faq-answer p[b-e52lm53q37],
:global(.theme-nature) .faq-answer p[b-e52lm53q37],
:global(.theme-ocean) .faq-answer p[b-e52lm53q37],
:global(.theme-mystic) .faq-answer p[b-e52lm53q37],
:global(.theme-tron) .faq-answer p[b-e52lm53q37] {
    color: rgba(255, 255, 255, 0.7);
}

/* Dark: Billing toggle */
:global(.theme-space) .billing-label.active[b-e52lm53q37],
:global(.theme-winter) .billing-label.active[b-e52lm53q37],
:global(.theme-nature) .billing-label.active[b-e52lm53q37],
:global(.theme-ocean) .billing-label.active[b-e52lm53q37],
:global(.theme-mystic) .billing-label.active[b-e52lm53q37],
:global(.theme-tron) .billing-label.active[b-e52lm53q37] {
    color: white;
}

:global(.theme-space) .toggle-switch[b-e52lm53q37],
:global(.theme-winter) .toggle-switch[b-e52lm53q37],
:global(.theme-nature) .toggle-switch[b-e52lm53q37],
:global(.theme-ocean) .toggle-switch[b-e52lm53q37],
:global(.theme-mystic) .toggle-switch[b-e52lm53q37],
:global(.theme-tron) .toggle-switch[b-e52lm53q37] {
    background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   EXECUTIVE THEME
   ============================================ */
:global(.theme-executive) .tier-card[b-e52lm53q37] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

:global(.theme-executive) .tier-card:hover[b-e52lm53q37] {
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
    border-color: rgba(51, 65, 85, 0.15);
}

:global(.theme-executive) .tier-card.popular[b-e52lm53q37] {
    border-color: #334155;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}

:global(.theme-executive) .tier-badge[b-e52lm53q37] {
    background: #334155;
}

:global(.theme-executive) .tier-cta.primary[b-e52lm53q37] {
    background: #059669;
    color: white;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3);
}

:global(.theme-executive) .tier-cta.primary:hover[b-e52lm53q37] {
    background: #047857;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.4);
    color: white;
}

:global(.theme-executive) .tier-cta.outlined[b-e52lm53q37] {
    color: #1e293b;
    border-color: rgba(51, 65, 85, 0.15);
}

:global(.theme-executive) .tier-cta.outlined:hover[b-e52lm53q37] {
    background: rgba(51, 65, 85, 0.04);
}

:global(.theme-executive) .comparison-table thead th.highlight-col[b-e52lm53q37] {
    background: #334155;
}

:global(.theme-executive) .comparison-table-wrap[b-e52lm53q37] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
}

:global(.theme-executive) .credit-pack-card[b-e52lm53q37] {
    background: #ffffff;
    border-color: rgba(51, 65, 85, 0.08);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

:global(.theme-executive) .credit-pack-card:hover[b-e52lm53q37] {
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

:global(.theme-executive) .final-cta-content[b-e52lm53q37] {
    background: #1e293b;
}

:global(.theme-executive) .final-cta-btn[b-e52lm53q37] {
    background: #059669;
    box-shadow: 0 4px 20px rgba(5, 150, 105, 0.3);
}

:global(.theme-executive) .final-cta-btn:hover[b-e52lm53q37] {
    background: #047857;
    box-shadow: 0 8px 30px rgba(5, 150, 105, 0.4);
    color: white;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
    .tier-grid[b-e52lm53q37] {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .tier-card.popular[b-e52lm53q37] {
        transform: none;
        order: -1;
    }

    .tier-card.popular:hover[b-e52lm53q37] {
        transform: translateY(-4px);
    }

    .credit-packs-grid[b-e52lm53q37] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-page[b-e52lm53q37] {
        padding: 0 16px 60px;
    }

    .pricing-hero[b-e52lm53q37] {
        padding: 40px 0 32px;
    }

    .pricing-hero-title[b-e52lm53q37] {
        font-size: 1.75rem;
    }

    .pricing-hero-subtitle[b-e52lm53q37] {
        font-size: 1rem;
    }

    .section-heading[b-e52lm53q37] {
        font-size: 1.35rem;
    }

    .final-cta-content[b-e52lm53q37] {
        padding: 48px 20px;
        border-radius: 16px;
    }

    .final-cta-content h2[b-e52lm53q37] {
        font-size: 1.5rem;
    }

    .final-cta-btn[b-e52lm53q37] {
        width: 100%;
        padding: 18px 28px;
    }
}

@media (max-width: 480px) {
    .credit-packs-grid[b-e52lm53q37] {
        grid-template-columns: 1fr;
        max-width: 300px;
        margin: 40px auto 0;
    }

    .billing-toggle[b-e52lm53q37] {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* /Pages/Products/Checkout.razor.rz.scp.css */
/* ============================================
   CHECKOUT PAGE STYLES
   ============================================ */

/* Page Container */
.checkout-page[b-yttxoou1rt] {
    min-height: calc(100vh - 56px);
    padding: 24px;
    transition: background 0.5s ease;
}

.checkout-container[b-yttxoou1rt] {
    max-width: 1100px;
    margin: 0 auto;
}

/* Header */
.checkout-header[b-yttxoou1rt] {
    text-align: center;
    margin-bottom: 32px;
}

.back-link[b-yttxoou1rt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    margin-bottom: 16px;
}

.back-link:hover[b-yttxoou1rt] {
    opacity: 1;
}

.back-link svg[b-yttxoou1rt] {
    width: 18px;
    height: 18px;
}

.checkout-title[b-yttxoou1rt] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.checkout-subtitle[b-yttxoou1rt] {
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.8;
}

/* Content Layout */
.checkout-content[b-yttxoou1rt] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: start;
}

/* Order Summary */
.order-summary[b-yttxoou1rt] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.summary-card[b-yttxoou1rt],
.payment-card[b-yttxoou1rt] {
    padding: 24px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.summary-title[b-yttxoou1rt],
.payment-title[b-yttxoou1rt] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 20px;
}

/* Plan Details */
.plan-details[b-yttxoou1rt] {
    margin-bottom: 20px;
}

.plan-header[b-yttxoou1rt] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.plan-badge[b-yttxoou1rt] {
    display: inline-flex;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.badge-primary[b-yttxoou1rt] { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
.badge-success[b-yttxoou1rt] { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.badge-purple[b-yttxoou1rt] { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; }

.best-value-badge[b-yttxoou1rt] {
    padding: 4px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.plan-price[b-yttxoou1rt] {
    margin-bottom: 16px;
}

.price-amount[b-yttxoou1rt] {
    font-size: 2.5rem;
    font-weight: 800;
}

.price-period[b-yttxoou1rt] {
    font-size: 1rem;
    opacity: 0.7;
}

.plan-features[b-yttxoou1rt] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plan-features li[b-yttxoou1rt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}

.plan-features svg[b-yttxoou1rt] {
    width: 18px;
    height: 18px;
    color: #10b981;
    flex-shrink: 0;
}

/* Summary Divider */
.summary-divider[b-yttxoou1rt],
.section-divider[b-yttxoou1rt] {
    border: none;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
    margin: 20px 0;
}

/* Billing Summary */
.billing-summary[b-yttxoou1rt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.summary-row[b-yttxoou1rt] {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.summary-row.discount[b-yttxoou1rt] {
    color: #10b981;
}

.summary-row.total[b-yttxoou1rt] {
    font-weight: 700;
    font-size: 1.1rem;
    padding-top: 12px;
    border-top: 1px solid rgba(100, 116, 139, 0.2);
}

/* Trust Badges */
.trust-badges[b-yttxoou1rt] {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.trust-item[b-yttxoou1rt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    opacity: 0.8;
}

.trust-item svg[b-yttxoou1rt] {
    width: 24px;
    height: 24px;
    color: #10b981;
}

/* Payment Section */
.payment-section[b-yttxoou1rt] {
    position: sticky;
    top: 24px;
}

/* Promo Section */
.promo-section[b-yttxoou1rt] {
    margin-bottom: 20px;
}

.promo-input-group[b-yttxoou1rt] {
    display: flex;
    gap: 8px;
}

.promo-input-group .form-input[b-yttxoou1rt] {
    flex: 1;
}

.promo-success[b-yttxoou1rt] {
    display: block;
    font-size: 0.8rem;
    color: #10b981;
    margin-top: 6px;
}

/* Form Elements */
.form-label[b-yttxoou1rt] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-input[b-yttxoou1rt] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 8px;
    font-size: 0.95rem;
    background: transparent;
    transition: border-color 0.2s;
}

.form-input:focus[b-yttxoou1rt] {
    outline: none;
    border-color: #6366f1;
}

.form-group[b-yttxoou1rt] {
    margin-bottom: 16px;
}

.form-row[b-yttxoou1rt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Payment Methods */
.payment-methods[b-yttxoou1rt] {
    margin-bottom: 20px;
}

.method-options[b-yttxoou1rt] {
    display: flex;
    gap: 12px;
}

.method-option[b-yttxoou1rt] {
    flex: 1;
    cursor: pointer;
}

.method-option input[b-yttxoou1rt] {
    display: none;
}

.method-content[b-yttxoou1rt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 2px solid rgba(100, 116, 139, 0.2);
    border-radius: 10px;
    transition: all 0.2s;
}

.method-option:hover .method-content[b-yttxoou1rt] {
    border-color: rgba(99, 102, 241, 0.4);
}

.method-option.selected .method-content[b-yttxoou1rt] {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.method-content svg[b-yttxoou1rt] {
    width: 24px;
    height: 24px;
}

/* Card Details */
.card-details[b-yttxoou1rt] {
    animation: slideDown-b-yttxoou1rt 0.3s ease;
}

@keyframes slideDown-b-yttxoou1rt {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Terms */
.terms-section[b-yttxoou1rt] {
    margin: 20px 0;
}

.checkbox-label[b-yttxoou1rt] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 0.85rem;
}

.checkbox-label input[b-yttxoou1rt] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
}

.checkbox-label a[b-yttxoou1rt] {
    color: #6366f1;
    text-decoration: none;
}

.checkbox-label a:hover[b-yttxoou1rt] {
    text-decoration: underline;
}

.btn-spinner[b-yttxoou1rt] {
    width: 18px;
    height: 18px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-yttxoou1rt 0.8s linear infinite;
}

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

/* Secure Note */
.secure-note[b-yttxoou1rt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.secure-note svg[b-yttxoou1rt] {
    width: 16px;
    height: 16px;
}

/* Annual Note */
.annual-note[b-yttxoou1rt] {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: -10px;
    margin-bottom: 16px;
}

/* Billing Toggle */
.billing-toggle-section[b-yttxoou1rt] {
    margin-bottom: 20px;
}

.billing-toggle-group[b-yttxoou1rt] {
    display: flex;
    gap: 0;
    border: 1px solid rgba(100, 116, 139, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.billing-option[b-yttxoou1rt] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: inherit;
}

.billing-option.selected[b-yttxoou1rt] {
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: white;
}

.save-tag[b-yttxoou1rt] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.billing-option.selected .save-tag[b-yttxoou1rt] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* What Happens Next */
.next-steps[b-yttxoou1rt] {
    margin-bottom: 24px;
}

.next-steps h4[b-yttxoou1rt] {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 12px;
}

.next-steps ol[b-yttxoou1rt] {
    padding-left: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.next-steps li[b-yttxoou1rt] {
    font-size: 0.85rem;
    opacity: 0.8;
    line-height: 1.5;
}

/* ============================================
   THEME OVERRIDES
   ============================================ */

/* Cloud Theme (Light) */
.theme-cloud[b-yttxoou1rt] {
    background: linear-gradient(135deg, #e0f2fe 0%, #fdf4ff 100%);
    color: #1e293b;
}

.theme-cloud .back-link[b-yttxoou1rt] { color: #6366f1; }
.theme-cloud .summary-card[b-yttxoou1rt],
.theme-cloud .payment-card[b-yttxoou1rt] { background: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
.theme-cloud .form-input[b-yttxoou1rt] { color: #1e293b; background: white; }
.theme-cloud .btn-outline[b-yttxoou1rt] { color: #334155; }

/* Space Theme (Dark) */
.theme-space[b-yttxoou1rt] {
    background: linear-gradient(135deg, #0f0a1e 0%, #0f172a 100%);
    color: #e2e8f0;
}

.theme-space .back-link[b-yttxoou1rt] { color: #a855f7; }
.theme-space .checkout-title[b-yttxoou1rt] { color: #f8fafc; }
.theme-space .summary-card[b-yttxoou1rt],
.theme-space .payment-card[b-yttxoou1rt] { background: rgba(30, 27, 75, 0.8); border: 1px solid rgba(168, 85, 247, 0.2); }
.theme-space .form-input[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(168, 85, 247, 0.3); }
.theme-space .btn-outline[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(168, 85, 247, 0.4); }

/* Winter Theme (Dark) */
.theme-winter[b-yttxoou1rt] {
    background: linear-gradient(135deg, #1e3a5f 0%, #1e1b4b 100%);
    color: #e2e8f0;
}

.theme-winter .back-link[b-yttxoou1rt] { color: #38bdf8; }
.theme-winter .checkout-title[b-yttxoou1rt] { color: #f8fafc; }
.theme-winter .summary-card[b-yttxoou1rt],
.theme-winter .payment-card[b-yttxoou1rt] { background: rgba(30, 58, 95, 0.8); border: 1px solid rgba(56, 189, 248, 0.2); }
.theme-winter .form-input[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(56, 189, 248, 0.3); }
.theme-winter .btn-outline[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(56, 189, 248, 0.4); }

/* Nature Theme (Dark) */
.theme-nature[b-yttxoou1rt] {
    background: linear-gradient(135deg, #14532d 0%, #365314 100%);
    color: #e2e8f0;
}

.theme-nature .back-link[b-yttxoou1rt] { color: #4ade80; }
.theme-nature .checkout-title[b-yttxoou1rt] { color: #f8fafc; }
.theme-nature .summary-card[b-yttxoou1rt],
.theme-nature .payment-card[b-yttxoou1rt] { background: rgba(20, 83, 45, 0.8); border: 1px solid rgba(74, 222, 128, 0.2); }
.theme-nature .form-input[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(74, 222, 128, 0.3); }
.theme-nature .btn-outline[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(74, 222, 128, 0.4); }

/* Ocean Theme (Dark) */
.theme-ocean[b-yttxoou1rt] {
    background: linear-gradient(135deg, #0c4a6e 0%, #0f766e 100%);
    color: #e2e8f0;
}

.theme-ocean .back-link[b-yttxoou1rt] { color: #22d3d1; }
.theme-ocean .checkout-title[b-yttxoou1rt] { color: #f8fafc; }
.theme-ocean .summary-card[b-yttxoou1rt],
.theme-ocean .payment-card[b-yttxoou1rt] { background: rgba(12, 74, 110, 0.8); border: 1px solid rgba(34, 211, 209, 0.2); }
.theme-ocean .form-input[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(34, 211, 209, 0.3); }
.theme-ocean .btn-outline[b-yttxoou1rt] { color: #e2e8f0; border-color: rgba(34, 211, 209, 0.4); }

/* Responsive */
@media (max-width: 900px) {
    .checkout-content[b-yttxoou1rt] {
        grid-template-columns: 1fr;
    }
    
    .payment-section[b-yttxoou1rt] {
        position: static;
    }
    
    .order-summary[b-yttxoou1rt] {
        order: -1;
    }
}

@media (max-width: 600px) {
    .checkout-title[b-yttxoou1rt] {
        font-size: 1.5rem;
    }
    
    .price-amount[b-yttxoou1rt] {
        font-size: 2rem;
    }
    
    .form-row[b-yttxoou1rt] {
        grid-template-columns: 1fr;
    }
    
    .trust-badges[b-yttxoou1rt] {
        flex-direction: column;
        align-items: center;
    }
}
/* /Pages/QuitTracker/QuitTracker.razor.rz.scp.css */
.quit-tracker-page[b-hsppg4j5gr] {
    min-height: calc(100vh - 56px);
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.quit-tracker-container[b-hsppg4j5gr] {
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
}

/* Header */
.quit-tracker-header[b-hsppg4j5gr] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-content[b-hsppg4j5gr] {
    flex: 1;
}

.page-title[b-hsppg4j5gr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.page-title .icon[b-hsppg4j5gr] {
    width: 2rem;
    height: 2rem;
    color: #10b981;
}

.page-subtitle[b-hsppg4j5gr] {
    color: #64748b;
    margin: 0.5rem 0 0 0;
    font-size: 1.1rem;
}

/* Loading */
.loading-container[b-hsppg4j5gr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #64748b;
}

.loading-spinner[b-hsppg4j5gr] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin-b-hsppg4j5gr 1s linear infinite;
    margin-bottom: 1rem;
}

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

/* Empty State */
.empty-state[b-hsppg4j5gr] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.empty-icon[b-hsppg4j5gr] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h2[b-hsppg4j5gr] {
    font-size: 1.75rem;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
}

.empty-state p[b-hsppg4j5gr] {
    color: #64748b;
    font-size: 1.1rem;
    margin: 0 0 2rem 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Sections */
.tracker-section[b-hsppg4j5gr] {
    margin-bottom: 2rem;
}

.section-title[b-hsppg4j5gr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    color: #1e293b;
    margin: 0 0 1rem 0;
}

.status-dot[b-hsppg4j5gr] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-dot.active[b-hsppg4j5gr] {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.status-dot.paused[b-hsppg4j5gr] {
    background: #94a3b8;
}

/* Grid */
.trackers-grid[b-hsppg4j5gr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

/* ===== Dark Theme Styles ===== */
.theme-space[b-hsppg4j5gr],
.theme-winter[b-hsppg4j5gr],
.theme-nature[b-hsppg4j5gr],
.theme-ocean[b-hsppg4j5gr],
.theme-mystic[b-hsppg4j5gr],
.theme-tron[b-hsppg4j5gr] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.theme-space .page-title[b-hsppg4j5gr],
.theme-winter .page-title[b-hsppg4j5gr],
.theme-nature .page-title[b-hsppg4j5gr],
.theme-ocean .page-title[b-hsppg4j5gr],
.theme-mystic .page-title[b-hsppg4j5gr],
.theme-tron .page-title[b-hsppg4j5gr],
.theme-space .section-title[b-hsppg4j5gr],
.theme-winter .section-title[b-hsppg4j5gr],
.theme-nature .section-title[b-hsppg4j5gr],
.theme-ocean .section-title[b-hsppg4j5gr],
.theme-mystic .section-title[b-hsppg4j5gr],
.theme-tron .section-title[b-hsppg4j5gr] {
    color: #f1f5f9;
}

.theme-space .page-subtitle[b-hsppg4j5gr],
.theme-winter .page-subtitle[b-hsppg4j5gr],
.theme-nature .page-subtitle[b-hsppg4j5gr],
.theme-ocean .page-subtitle[b-hsppg4j5gr],
.theme-mystic .page-subtitle[b-hsppg4j5gr],
.theme-tron .page-subtitle[b-hsppg4j5gr] {
    color: #94a3b8;
}

.theme-space .empty-state[b-hsppg4j5gr],
.theme-winter .empty-state[b-hsppg4j5gr],
.theme-nature .empty-state[b-hsppg4j5gr],
.theme-ocean .empty-state[b-hsppg4j5gr],
.theme-mystic .empty-state[b-hsppg4j5gr],
.theme-tron .empty-state[b-hsppg4j5gr] {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .empty-state h2[b-hsppg4j5gr],
.theme-winter .empty-state h2[b-hsppg4j5gr],
.theme-nature .empty-state h2[b-hsppg4j5gr],
.theme-ocean .empty-state h2[b-hsppg4j5gr],
.theme-mystic .empty-state h2[b-hsppg4j5gr],
.theme-tron .empty-state h2[b-hsppg4j5gr] {
    color: #f1f5f9;
}

.theme-space .empty-state p[b-hsppg4j5gr],
.theme-winter .empty-state p[b-hsppg4j5gr],
.theme-nature .empty-state p[b-hsppg4j5gr],
.theme-ocean .empty-state p[b-hsppg4j5gr],
.theme-mystic .empty-state p[b-hsppg4j5gr],
.theme-tron .empty-state p[b-hsppg4j5gr] {
    color: #94a3b8;
}

.theme-space .loading-container[b-hsppg4j5gr],
.theme-winter .loading-container[b-hsppg4j5gr],
.theme-nature .loading-container[b-hsppg4j5gr],
.theme-ocean .loading-container[b-hsppg4j5gr],
.theme-mystic .loading-container[b-hsppg4j5gr],
.theme-tron .loading-container[b-hsppg4j5gr] {
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    .quit-tracker-page[b-hsppg4j5gr] {
        padding: 1rem;
    }

    .page-title[b-hsppg4j5gr] {
        font-size: 1.5rem;
    }

    .quit-tracker-header[b-hsppg4j5gr] {
        flex-direction: column;
    }

    .trackers-grid[b-hsppg4j5gr] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/QuitTracker/QuitTrackerDetail.razor.rz.scp.css */
.quit-detail-page[b-lm32kba77t] {
    min-height: calc(100vh - 56px);
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Loading & Not Found */
.loading-container[b-lm32kba77t],
.not-found[b-lm32kba77t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: #64748b;
}

.loading-spinner[b-lm32kba77t] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin-b-lm32kba77t 1s linear infinite;
    margin-bottom: 1rem;
}

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

.not-found h2[b-lm32kba77t] {
    color: #1e293b;
    margin-bottom: 0.5rem;
}

/* Header */
.detail-header[b-lm32kba77t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.btn-back[b-lm32kba77t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: white;
    border: none;
    border-radius: 10px;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back:hover[b-lm32kba77t] {
    background: #f1f5f9;
    color: #1e293b;
}

.btn-back svg[b-lm32kba77t] {
    width: 1.25rem;
    height: 1.25rem;
}

.header-actions[b-lm32kba77t] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-lm32kba77t] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn svg[b-lm32kba77t] {
    width: 1rem;
    height: 1rem;
}

.btn-primary[b-lm32kba77t] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.btn-warning[b-lm32kba77t] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.btn-warning:hover[b-lm32kba77t] {
    background: rgba(245, 158, 11, 0.2);
}

.btn-danger[b-lm32kba77t] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.btn-danger:hover[b-lm32kba77t] {
    background: rgba(239, 68, 68, 0.2);
}

.btn-secondary[b-lm32kba77t] {
    background: #f1f5f9;
    color: #64748b;
}

/* Main Timer Card */
.main-timer-card[b-lm32kba77t] {
    max-width: 900px;
    margin: 0 auto 2rem;
    background: white;
    border-radius: 24px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.tracker-badge[b-lm32kba77t] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: #f8fafc;
    border-radius: 30px;
    margin-bottom: 1rem;
}

.tracker-badge .emoji[b-lm32kba77t] {
    font-size: 1.5rem;
}

.tracker-badge .label[b-lm32kba77t] {
    font-weight: 600;
    color: #64748b;
}

.tracker-badge .status[b-lm32kba77t] {
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tracker-badge .status.active[b-lm32kba77t] {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.tracker-badge .status.paused[b-lm32kba77t] {
    background: rgba(148, 163, 184, 0.2);
    color: #64748b;
}

.tracker-name[b-lm32kba77t] {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.motivation[b-lm32kba77t] {
    color: #64748b;
    font-style: italic;
    margin: 0 0 2rem 0;
    font-size: 1.1rem;
}

/* Big Timer */
.big-timer[b-lm32kba77t] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.timer-unit[b-lm32kba77t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.timer-unit .value[b-lm32kba77t] {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.timer-unit .label[b-lm32kba77t] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.5rem;
}

.separator[b-lm32kba77t] {
    font-size: 3rem;
    font-weight: 700;
    color: #cbd5e1;
    margin-top: -1.5rem;
}

.quit-date[b-lm32kba77t] {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Stats Grid */
.stats-grid[b-lm32kba77t] {
    max-width: 900px;
    margin: 0 auto 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card[b-lm32kba77t] {
    background: white;
    border-radius: 16px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.stat-icon[b-lm32kba77t] {
    font-size: 2rem;
}

.stat-content[b-lm32kba77t] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-lm32kba77t] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.stat-label[b-lm32kba77t] {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
}

.stat-card.savings .stat-value[b-lm32kba77t] { color: #10b981; }
.stat-card.avoided .stat-value[b-lm32kba77t] { color: #8b5cf6; }
.stat-card.streak .stat-value[b-lm32kba77t] { color: #f59e0b; }
.stat-card.attempts .stat-value[b-lm32kba77t] { color: #3b82f6; }

/* Milestones Section */
.milestones-section[b-lm32kba77t] {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.section-title[b-lm32kba77t] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.5rem 0;
}

.milestones-timeline[b-lm32kba77t] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.milestone-item[b-lm32kba77t] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: #f8fafc;
    transition: all 0.2s;
}

.milestone-item.achieved[b-lm32kba77t] {
    background: rgba(16, 185, 129, 0.08);
}

.milestone-item.current[b-lm32kba77t] {
    background: rgba(59, 130, 246, 0.08);
    border: 2px solid rgba(59, 130, 246, 0.3);
}

.milestone-marker[b-lm32kba77t] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.milestone-item.achieved .milestone-marker[b-lm32kba77t] {
    background: #10b981;
    color: white;
}

.milestone-marker svg[b-lm32kba77t] {
    width: 20px;
    height: 20px;
}

.milestone-marker .emoji[b-lm32kba77t] {
    font-size: 1.25rem;
}

.milestone-content[b-lm32kba77t] {
    flex: 1;
}

.milestone-header[b-lm32kba77t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.milestone-title[b-lm32kba77t] {
    font-weight: 600;
    color: #1e293b;
}

.milestone-time[b-lm32kba77t] {
    font-size: 0.75rem;
    color: #64748b;
    background: rgba(0,0,0,0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.milestone-description[b-lm32kba77t] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.milestone-progress[b-lm32kba77t] {
    margin-top: 0.75rem;
}

.milestone-progress .progress-bar[b-lm32kba77t] {
    height: 6px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.milestone-progress .progress-fill[b-lm32kba77t] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.milestone-progress .progress-text[b-lm32kba77t] {
    font-size: 0.75rem;
    color: #3b82f6;
    font-weight: 600;
}

.milestone-xp[b-lm32kba77t] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* Growth Tree Section */
.growth-tree-section[b-lm32kba77t] {
    max-width: 900px;
    margin: 0 auto 2rem;
}

/* FAB Craving Button */
.fab-craving[b-lm32kba77t] {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.35);
    transition: all 0.2s;
    z-index: 100;
}

.fab-craving:hover[b-lm32kba77t] {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(239, 68, 68, 0.45);
}

.fab-craving svg[b-lm32kba77t] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Confirmation Dialog */
.confirm-overlay[b-lm32kba77t] {
    position: fixed;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.confirm-dialog[b-lm32kba77t] {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 25px 50px transparent;
}

.confirm-dialog h3[b-lm32kba77t] {
    margin: 0 0 1rem 0;
    color: #1e293b;
}

.confirm-dialog p[b-lm32kba77t] {
    color: #64748b;
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.confirm-actions[b-lm32kba77t] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* ===== Dark Theme Styles ===== */
.quit-detail-page.theme-space[b-lm32kba77t],
.quit-detail-page.theme-winter[b-lm32kba77t],
.quit-detail-page.theme-nature[b-lm32kba77t],
.quit-detail-page.theme-ocean[b-lm32kba77t],
.quit-detail-page.theme-mystic[b-lm32kba77t],
.quit-detail-page.theme-tron[b-lm32kba77t] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.theme-space .main-timer-card[b-lm32kba77t],
.theme-winter .main-timer-card[b-lm32kba77t],
.theme-nature .main-timer-card[b-lm32kba77t],
.theme-ocean .main-timer-card[b-lm32kba77t],
.theme-mystic .main-timer-card[b-lm32kba77t],
.theme-tron .main-timer-card[b-lm32kba77t],
.theme-space .stat-card[b-lm32kba77t],
.theme-winter .stat-card[b-lm32kba77t],
.theme-nature .stat-card[b-lm32kba77t],
.theme-ocean .stat-card[b-lm32kba77t],
.theme-mystic .stat-card[b-lm32kba77t],
.theme-tron .stat-card[b-lm32kba77t],
.theme-space .milestones-section[b-lm32kba77t],
.theme-winter .milestones-section[b-lm32kba77t],
.theme-nature .milestones-section[b-lm32kba77t],
.theme-ocean .milestones-section[b-lm32kba77t],
.theme-mystic .milestones-section[b-lm32kba77t],
.theme-tron .milestones-section[b-lm32kba77t] {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .tracker-name[b-lm32kba77t],
.theme-winter .tracker-name[b-lm32kba77t],
.theme-nature .tracker-name[b-lm32kba77t],
.theme-ocean .tracker-name[b-lm32kba77t],
.theme-mystic .tracker-name[b-lm32kba77t],
.theme-tron .tracker-name[b-lm32kba77t],
.theme-space .section-title[b-lm32kba77t],
.theme-winter .section-title[b-lm32kba77t],
.theme-nature .section-title[b-lm32kba77t],
.theme-ocean .section-title[b-lm32kba77t],
.theme-mystic .section-title[b-lm32kba77t],
.theme-tron .section-title[b-lm32kba77t],
.theme-space .timer-unit .value[b-lm32kba77t],
.theme-winter .timer-unit .value[b-lm32kba77t],
.theme-nature .timer-unit .value[b-lm32kba77t],
.theme-ocean .timer-unit .value[b-lm32kba77t],
.theme-mystic .timer-unit .value[b-lm32kba77t],
.theme-tron .timer-unit .value[b-lm32kba77t],
.theme-space .milestone-title[b-lm32kba77t],
.theme-winter .milestone-title[b-lm32kba77t],
.theme-nature .milestone-title[b-lm32kba77t],
.theme-ocean .milestone-title[b-lm32kba77t],
.theme-mystic .milestone-title[b-lm32kba77t],
.theme-tron .milestone-title[b-lm32kba77t] {
    color: #f1f5f9;
}

.theme-space .motivation[b-lm32kba77t],
.theme-winter .motivation[b-lm32kba77t],
.theme-nature .motivation[b-lm32kba77t],
.theme-ocean .motivation[b-lm32kba77t],
.theme-mystic .motivation[b-lm32kba77t],
.theme-tron .motivation[b-lm32kba77t],
.theme-space .timer-unit .label[b-lm32kba77t],
.theme-winter .timer-unit .label[b-lm32kba77t],
.theme-nature .timer-unit .label[b-lm32kba77t],
.theme-ocean .timer-unit .label[b-lm32kba77t],
.theme-mystic .timer-unit .label[b-lm32kba77t],
.theme-tron .timer-unit .label[b-lm32kba77t],
.theme-space .quit-date[b-lm32kba77t],
.theme-winter .quit-date[b-lm32kba77t],
.theme-nature .quit-date[b-lm32kba77t],
.theme-ocean .quit-date[b-lm32kba77t],
.theme-mystic .quit-date[b-lm32kba77t],
.theme-tron .quit-date[b-lm32kba77t],
.theme-space .stat-label[b-lm32kba77t],
.theme-winter .stat-label[b-lm32kba77t],
.theme-nature .stat-label[b-lm32kba77t],
.theme-ocean .stat-label[b-lm32kba77t],
.theme-mystic .stat-label[b-lm32kba77t],
.theme-tron .stat-label[b-lm32kba77t],
.theme-space .milestone-description[b-lm32kba77t],
.theme-winter .milestone-description[b-lm32kba77t],
.theme-nature .milestone-description[b-lm32kba77t],
.theme-ocean .milestone-description[b-lm32kba77t],
.theme-mystic .milestone-description[b-lm32kba77t],
.theme-tron .milestone-description[b-lm32kba77t] {
    color: #94a3b8;
}

.theme-space .big-timer[b-lm32kba77t],
.theme-winter .big-timer[b-lm32kba77t],
.theme-nature .big-timer[b-lm32kba77t],
.theme-ocean .big-timer[b-lm32kba77t],
.theme-mystic .big-timer[b-lm32kba77t],
.theme-tron .big-timer[b-lm32kba77t] {
    background: rgba(15, 23, 42, 0.5);
}

.theme-space .tracker-badge[b-lm32kba77t],
.theme-winter .tracker-badge[b-lm32kba77t],
.theme-nature .tracker-badge[b-lm32kba77t],
.theme-ocean .tracker-badge[b-lm32kba77t],
.theme-mystic .tracker-badge[b-lm32kba77t],
.theme-tron .tracker-badge[b-lm32kba77t] {
    background: rgba(255, 255, 255, 0.1);
}

.theme-space .milestone-item[b-lm32kba77t],
.theme-winter .milestone-item[b-lm32kba77t],
.theme-nature .milestone-item[b-lm32kba77t],
.theme-ocean .milestone-item[b-lm32kba77t],
.theme-mystic .milestone-item[b-lm32kba77t],
.theme-tron .milestone-item[b-lm32kba77t] {
    background: rgba(15, 23, 42, 0.5);
}

.theme-space .milestone-item.achieved[b-lm32kba77t],
.theme-winter .milestone-item.achieved[b-lm32kba77t],
.theme-nature .milestone-item.achieved[b-lm32kba77t],
.theme-ocean .milestone-item.achieved[b-lm32kba77t],
.theme-mystic .milestone-item.achieved[b-lm32kba77t],
.theme-tron .milestone-item.achieved[b-lm32kba77t] {
    background: rgba(16, 185, 129, 0.15);
}

.theme-space .milestone-item.current[b-lm32kba77t],
.theme-winter .milestone-item.current[b-lm32kba77t],
.theme-nature .milestone-item.current[b-lm32kba77t],
.theme-ocean .milestone-item.current[b-lm32kba77t],
.theme-mystic .milestone-item.current[b-lm32kba77t],
.theme-tron .milestone-item.current[b-lm32kba77t] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
}

.theme-space .confirm-dialog[b-lm32kba77t],
.theme-winter .confirm-dialog[b-lm32kba77t],
.theme-nature .confirm-dialog[b-lm32kba77t],
.theme-ocean .confirm-dialog[b-lm32kba77t],
.theme-mystic .confirm-dialog[b-lm32kba77t],
.theme-tron .confirm-dialog[b-lm32kba77t] {
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .confirm-dialog h3[b-lm32kba77t],
.theme-winter .confirm-dialog h3[b-lm32kba77t],
.theme-nature .confirm-dialog h3[b-lm32kba77t],
.theme-ocean .confirm-dialog h3[b-lm32kba77t],
.theme-mystic .confirm-dialog h3[b-lm32kba77t],
.theme-tron .confirm-dialog h3[b-lm32kba77t] {
    color: #f1f5f9;
}

.theme-space .confirm-dialog p[b-lm32kba77t],
.theme-winter .confirm-dialog p[b-lm32kba77t],
.theme-nature .confirm-dialog p[b-lm32kba77t],
.theme-ocean .confirm-dialog p[b-lm32kba77t],
.theme-mystic .confirm-dialog p[b-lm32kba77t],
.theme-tron .confirm-dialog p[b-lm32kba77t] {
    color: #94a3b8;
}

.theme-space .btn-back[b-lm32kba77t],
.theme-winter .btn-back[b-lm32kba77t],
.theme-nature .btn-back[b-lm32kba77t],
.theme-ocean .btn-back[b-lm32kba77t],
.theme-mystic .btn-back[b-lm32kba77t],
.theme-tron .btn-back[b-lm32kba77t] {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

.theme-space .btn-back:hover[b-lm32kba77t],
.theme-winter .btn-back:hover[b-lm32kba77t],
.theme-nature .btn-back:hover[b-lm32kba77t],
.theme-ocean .btn-back:hover[b-lm32kba77t],
.theme-mystic .btn-back:hover[b-lm32kba77t],
.theme-tron .btn-back:hover[b-lm32kba77t] {
    background: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
}

.theme-space .btn-secondary[b-lm32kba77t],
.theme-winter .btn-secondary[b-lm32kba77t],
.theme-nature .btn-secondary[b-lm32kba77t],
.theme-ocean .btn-secondary[b-lm32kba77t],
.theme-mystic .btn-secondary[b-lm32kba77t],
.theme-tron .btn-secondary[b-lm32kba77t] {
    background: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 768px) {
    .quit-detail-page[b-lm32kba77t] {
        padding: 1rem;
    }

    .detail-header[b-lm32kba77t] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .header-actions[b-lm32kba77t] {
        justify-content: flex-end;
    }

    .big-timer[b-lm32kba77t] {
        padding: 1.5rem 1rem;
        gap: 0.5rem;
    }

    .timer-unit .value[b-lm32kba77t] {
        font-size: 2rem;
    }

    .separator[b-lm32kba77t] {
        font-size: 1.5rem;
    }

    .stats-grid[b-lm32kba77t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .fab-craving[b-lm32kba77t] {
        bottom: 1rem;
        right: 1rem;
        padding: 0.75rem 1.25rem;
    }
}

/* AI Coach Section */
.ai-coach-section[b-lm32kba77t] {
    max-width: 900px;
    margin: 2rem auto 6rem;
}
/* /Pages/Reminders/MyReminders.razor.rz.scp.css */
/* ============================================
   MY REMINDERS PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - minimal overrides here
   ============================================ */

/* No page-specific styles needed - 
   all styling comes from list-page utilities */
/* /Pages/Reports/BalanceSheet.razor.rz.scp.css */
/* Scoped CSS for BalanceSheet.razor.
 *
 * The page shell (.list-page, .list-page-container, .list-page-header,
 * .list-page-title, .list-page-subtitle, .list-page-title-section) lives in
 * the global utilities.css and is shared with the rest of the Finance reports
 * (Income Statement, Expense Report, Financial Summary). Don't add per-page
 * .page-container / .page-title / .page-subtitle overrides here — that path
 * is the one this page just migrated AWAY from.
 *
 * What stays scoped to this file: the snapshot-only controls
 * (.controls-section, .view-toggle, .toggle-btn) that replace the PeriodPicker
 * the other three reports use, plus the report grid and account-row styling.
 */

.icon-sm[b-n80w9hf7pk] {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Controls */
.controls-section[b-n80w9hf7pk] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* View Toggle */
.view-toggle[b-n80w9hf7pk] {
    display: flex;
    background-color: var(--theme-surface);
    border-radius: 0.75rem;
    padding: 0.25rem;
    border: 1px solid var(--theme-border);
}

.toggle-btn[b-n80w9hf7pk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--theme-text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.toggle-btn:hover[b-n80w9hf7pk] {
    color: var(--theme-text-primary);
    background-color: var(--theme-bg-secondary);
}

.toggle-btn.active[b-n80w9hf7pk] {
    background-color: var(--theme-primary);
    color: white;
}

/* Print button — sits next to Refresh in the controls section. Outlined
 * treatment so Refresh (the primary action) keeps visual prominence. The
 * button itself is hidden from print output (see utilities.css @media print). */
.bs-print-btn[b-n80w9hf7pk] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.625rem;
    background: var(--theme-surface);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bs-print-btn:hover[b-n80w9hf7pk] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.04));
    border-color: var(--theme-border-hover, #cbd5e1);
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .bs-print-btn[b-n80w9hf7pk] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}

.is-dark .bs-print-btn:hover[b-n80w9hf7pk] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

/* Report Content */
.report-grid[b-n80w9hf7pk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.section-card[b-n80w9hf7pk] {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

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

.section-title[b-n80w9hf7pk] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-total[b-n80w9hf7pk] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.subsection[b-n80w9hf7pk] {
    margin-bottom: 1rem;
}

.subsection-title[b-n80w9hf7pk] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--theme-border-light);
}

.account-row[b-n80w9hf7pk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: background-color 0.15s;
}

.account-row.clickable[b-n80w9hf7pk] {
    cursor: pointer;
}

.account-row.clickable:hover[b-n80w9hf7pk] {
    background-color: var(--theme-bg-secondary);
}

.account-row.subtotal[b-n80w9hf7pk] {
    font-weight: 600;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--theme-border);
}

.account-name[b-n80w9hf7pk] {
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.account-type-badge[b-n80w9hf7pk] {
    font-size: 0.875rem;
}

.category-tag[b-n80w9hf7pk] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
}

.category-tag.business[b-n80w9hf7pk] {
    background-color: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.category-tag.personal[b-n80w9hf7pk] {
    background-color: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

/* PLAID-SYNCED-LABEL-1: balance kept current by a linked bank. Neutral - it's provenance, not status. */
.synced-tag[b-n80w9hf7pk] {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    text-transform: uppercase;
    background-color: rgba(100, 116, 139, 0.15);
    color: var(--theme-text-secondary, #64748b);
    cursor: help;
}

.account-amount[b-n80w9hf7pk] {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.account-amount.positive[b-n80w9hf7pk] {
    color: #10b981;
}

.account-amount.negative[b-n80w9hf7pk] {
    color: #ef4444;
}

/* Balance display with edit button */
.balance-display[b-n80w9hf7pk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.edit-btn[b-n80w9hf7pk] {
    opacity: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--theme-text-secondary);
    border-radius: 0.25rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.edit-btn svg[b-n80w9hf7pk] {
    width: 14px;
    height: 14px;
}

.account-row:hover .edit-btn[b-n80w9hf7pk] {
    opacity: 1;
}

.edit-btn:hover[b-n80w9hf7pk] {
    color: var(--theme-primary-ink, var(--theme-primary));
    background-color: var(--theme-bg-secondary);
}

/* Inline editing */
.account-row.editing[b-n80w9hf7pk] {
    background-color: var(--theme-bg-secondary);
    padding: 0.5rem;
    margin: -0.125rem -0.5rem;
    border-radius: 0.5rem;
}

.inline-edit[b-n80w9hf7pk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.balance-input[b-n80w9hf7pk] {
    width: 120px;
    padding: 0.375rem 0.5rem;
    border: 2px solid var(--theme-primary);
    border-radius: 0.375rem;
    background-color: var(--theme-surface);
    color: var(--theme-text-primary);
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 600;
    font-size: 0.875rem;
    text-align: right;
}

.balance-input:focus[b-n80w9hf7pk] {
    outline: none;
    box-shadow: 0 0 0 3px var(--theme-primary-alpha);
}

.edit-action[b-n80w9hf7pk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
}

.edit-action svg[b-n80w9hf7pk] {
    width: 16px;
    height: 16px;
}

.edit-action.save[b-n80w9hf7pk] {
    background-color: #10b981;
    color: white;
}

.edit-action.save:hover[b-n80w9hf7pk] {
    background-color: #059669;
}

.edit-action.cancel[b-n80w9hf7pk] {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
}

.edit-action.cancel:hover[b-n80w9hf7pk] {
    background-color: #ef4444;
    color: white;
}

.empty-section[b-n80w9hf7pk] {
    text-align: center;
    padding: 2rem;
    color: var(--theme-text-secondary);
    font-style: italic;
}

/* Summary card + quick-stats removed 2026-04 in the Reports header
 * unification pass. Replaced with the shared `.list-page-stats`
 * three-card stat-row pattern that Income Statement / Expense Report /
 * Work Summary already use. The Net Worth value is now in the third
 * stat card (right-most slot, mirroring Income Statement's Net Income
 * placement) with the polarity-color preserved. The bespoke .summary-card,
 * .equity-value, .equation, .quick-stats, .stat-pill selectors and their
 * dark-theme overrides are gone — there's nothing to style here anymore.
 * See DECISIONS.md → "2026-04: Reports header unification". */

/* Loading & Empty */
.loading-spinner[b-n80w9hf7pk] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-n80w9hf7pk] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-bg-secondary);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-n80w9hf7pk 1s linear infinite;
}

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

/* ============================================
   SHOW-INACTIVE TOGGLE
   Small pill-shaped button rendered between the Quick Stats and the
   Asset/Liability columns when there are zero-balance accounts to hide.
   2026-04 — see DECISIONS.md → "Balance Sheet Show Inactive Accounts toggle".
   ============================================ */

.bs-inactive-toggle-wrap[b-n80w9hf7pk] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.875rem;
}

.bs-inactive-toggle[b-n80w9hf7pk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 999px;
    background: var(--theme-surface);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bs-inactive-toggle:hover[b-n80w9hf7pk] {
    background-color: var(--theme-bg-hover, rgba(99, 102, 241, 0.06));
    border-color: var(--theme-border-hover, #cbd5e1);
    color: var(--theme-text-primary, #1e293b);
}

.bs-inactive-toggle.is-on[b-n80w9hf7pk] {
    background-color: rgba(99, 102, 241, 0.1);
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.bs-inactive-toggle .icon-sm[b-n80w9hf7pk] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.is-dark .bs-inactive-toggle[b-n80w9hf7pk] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .bs-inactive-toggle:hover[b-n80w9hf7pk] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .bs-inactive-toggle.is-on[b-n80w9hf7pk] {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(165, 180, 252, 0.5);
    color: rgba(199, 210, 254, 0.95);
}

/* Dark-theme overrides for .summary-card / .equity-value / .equation also
 * removed in the 2026-04 Reports header unification pass — those classes
 * are gone, so the overrides have nothing to override. The shared
 * .list-page-stat-card has its own theme treatment in utilities.css. */

/* Responsive */
@media (max-width: 768px) {
    .controls-section[b-n80w9hf7pk] {
        flex-direction: column;
        align-items: stretch;
    }

    .view-toggle[b-n80w9hf7pk] {
        width: 100%;
        justify-content: center;
    }

    .report-grid[b-n80w9hf7pk] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-n80w9hf7pk] {
        width: 100%;
        min-width: unset;
    }
}

/* ASSET-VAL-1: basis caption under a fixed asset whose counted value != cost. */
.asset-basis[b-n80w9hf7pk] {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--theme-text-muted, #94a3b8);
    margin-top: 2px;
}

/* ASSET-VAL-1: Fixed Assets heading carries a link to /Assets. */
.subsection-title-row[b-n80w9hf7pk] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.subsection-link[b-n80w9hf7pk] {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--theme-primary-light, #a5b4fc);
    text-decoration: none;
}

.subsection-link:hover[b-n80w9hf7pk] { text-decoration: underline; }

/* PAYDOWN-1: debt paid down this year. */
.paydown-card[b-n80w9hf7pk] { margin-top: 24px; }
.paydown-sub[b-n80w9hf7pk] { font-size: 0.875rem; color: var(--theme-text-secondary, #64748b); margin: -4px 0 12px; }
.paydown-table-wrap[b-n80w9hf7pk] { overflow-x: auto; }
.paydown-table[b-n80w9hf7pk] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.paydown-table th[b-n80w9hf7pk] {
    text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--theme-text-muted, #94a3b8);
    padding: 8px 10px; border-bottom: 1px solid var(--theme-border, #e2e8f0); white-space: nowrap;
}
.paydown-table td[b-n80w9hf7pk] {
    padding: 10px; border-bottom: 1px solid var(--theme-border, #e2e8f0);
    color: var(--theme-text-primary, #1e293b);
}
.paydown-table tr:last-child td[b-n80w9hf7pk] { border-bottom: none; }
.paydown-table .num[b-n80w9hf7pk] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paydown-table .positive[b-n80w9hf7pk], .section-total.positive[b-n80w9hf7pk] { color: #16a34a; font-weight: 600; }
.paydown-table .negative[b-n80w9hf7pk] { color: #dc2626; font-weight: 600; }
.is-dark .paydown-table .positive[b-n80w9hf7pk], .is-dark .section-total.positive[b-n80w9hf7pk] { color: #4ade80; }
.is-dark .paydown-table .negative[b-n80w9hf7pk] { color: #f87171; }
.paydown-title[b-n80w9hf7pk] { white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.paydown-icon[b-n80w9hf7pk] { width: 22px; height: 22px; flex: 0 0 22px; color: #10b981; }
.paydown-card .section-header[b-n80w9hf7pk] { align-items: center; }
/* /Pages/Reports/ClientProfitability.razor.rz.scp.css */
.page-container[b-lntnhzlt4t] {
    display: flex;
    flex-direction: column;
    background-color: var(--theme-bg-main);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-title[b-lntnhzlt4t] {
    color: var(--theme-text-primary);
    margin: 0;
}

.page-subtitle[b-lntnhzlt4t] {
    margin: 0.5rem 0 0 calc(32px + 1rem);
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.icon[b-lntnhzlt4t] { width: 32px; height: 32px; fill: currentColor; }

/* Stats Row */
.stats-row[b-lntnhzlt4t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-lntnhzlt4t] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-label[b-lntnhzlt4t] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
}

.stat-value[b-lntnhzlt4t] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-value.success[b-lntnhzlt4t] { color: #10b981; }
.stat-value.warning[b-lntnhzlt4t] { color: #f59e0b; }

/* Chart Card */
.chart-card[b-lntnhzlt4t], .table-card[b-lntnhzlt4t] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-title[b-lntnhzlt4t] {
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Bar Chart */
.bar-chart[b-lntnhzlt4t] { display: flex; flex-direction: column; gap: 0.75rem; }

.bar-row[b-lntnhzlt4t] {
    display: grid;
    grid-template-columns: 160px 1fr 90px;
    gap: 1rem;
    align-items: center;
}

.bar-label[b-lntnhzlt4t] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track[b-lntnhzlt4t] {
    height: 28px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.bar-fill[b-lntnhzlt4t] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 6px;
    transition: width 0.5s ease;
}

.bar-fill.rate.above[b-lntnhzlt4t] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.bar-fill.rate.below[b-lntnhzlt4t] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.bar-amount[b-lntnhzlt4t] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    text-align: right;
}

.chart-legend[b-lntnhzlt4t] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border);
}

.legend-item[b-lntnhzlt4t] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.legend-dot[b-lntnhzlt4t] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-dot.above[b-lntnhzlt4t] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.legend-dot.below[b-lntnhzlt4t] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Table */
.table-wrapper[b-lntnhzlt4t] { overflow-x: auto; }

.data-table[b-lntnhzlt4t] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-lntnhzlt4t], .data-table td[b-lntnhzlt4t] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.875rem;
}

.data-table th[b-lntnhzlt4t] {
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table tbody tr:hover[b-lntnhzlt4t] {
    background: var(--theme-bg-secondary);
}

.text-right[b-lntnhzlt4t] { text-align: right; }

.client-name[b-lntnhzlt4t] { font-weight: 500; }

.success-text[b-lntnhzlt4t] { color: #10b981; }
.warning-text[b-lntnhzlt4t] { color: #f59e0b; }
.muted-text[b-lntnhzlt4t] { color: var(--theme-text-secondary); }

.totals-row[b-lntnhzlt4t] {
    background: var(--theme-bg-secondary);
    border-top: 2px solid var(--theme-border);
}

.totals-row td[b-lntnhzlt4t] { font-weight: 600; }

.pct-badge[b-lntnhzlt4t] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pct-badge.full[b-lntnhzlt4t] { background: #dcfce7; color: #166534; }
.pct-badge.partial[b-lntnhzlt4t] { background: #fef3c7; color: #92400e; }
.pct-badge.low[b-lntnhzlt4t] { background: #fee2e2; color: #991b1b; }

/* Footnote */
.footnote[b-lntnhzlt4t] {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* Empty State */
.empty-state[b-lntnhzlt4t] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--theme-text-secondary);
}

.empty-icon[b-lntnhzlt4t] { width: 64px; height: 64px; opacity: 0.4; margin-bottom: 1rem; }
.empty-state h3[b-lntnhzlt4t] { margin: 0 0 0.5rem; color: var(--theme-text-primary); }

/* Loading */
.loading-spinner[b-lntnhzlt4t] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-lntnhzlt4t] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-lntnhzlt4t 0.8s linear infinite;
}

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

@media (max-width: 768px) {
    .bar-row[b-lntnhzlt4t] { grid-template-columns: 100px 1fr 70px; }
    /* MOBILE-AUDIT-3 (2026-10-02): a 1fr track's minimum is its content, so a
       1.75rem currency total ("$12,345.67") pushed both cards past a 390px
       screen. minmax(0,1fr) holds the columns; the value steps down and wraps. */
    .stats-row[b-lntnhzlt4t] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card[b-lntnhzlt4t] { padding: 1rem; min-width: 0; }
    .stat-value[b-lntnhzlt4t] { font-size: 1.35rem; overflow-wrap: anywhere; }
}
/* /Pages/Reports/GoalAnalytics.razor.rz.scp.css */
.page-container[b-1yx7y4su43] {
    display: flex;
    flex-direction: column;
    background-color: var(--theme-bg-main);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-title[b-1yx7y4su43] {
    color: var(--theme-text-primary);
    margin: 0;
}

.page-subtitle[b-1yx7y4su43] {
    margin: 0.5rem 0 0 calc(32px + 1rem);
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.icon[b-1yx7y4su43] { width: 32px; height: 32px; fill: currentColor; }
.icon-sm[b-1yx7y4su43] { width: 20px; height: 20px; fill: currentColor; }

/* Stats */
.stats-row[b-1yx7y4su43] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-1yx7y4su43] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-label[b-1yx7y4su43] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
}

.stat-value[b-1yx7y4su43] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-value.success[b-1yx7y4su43] { color: #10b981; }
.stat-value.primary[b-1yx7y4su43] { color: var(--theme-primary-ink, var(--theme-primary)); }
.stat-value.warning[b-1yx7y4su43] { color: #f59e0b; }

/* Analytics Grid */
.analytics-grid[b-1yx7y4su43] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.card[b-1yx7y4su43] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.analytics-grid .card[b-1yx7y4su43] { margin-bottom: 0; }

.warning-card[b-1yx7y4su43] { border-left: 4px solid #f59e0b; }

.section-title[b-1yx7y4su43] {
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Status Bars */
.status-bars[b-1yx7y4su43] { display: flex; flex-direction: column; gap: 1rem; }

.status-row[b-1yx7y4su43] { display: flex; flex-direction: column; gap: 0.375rem; }

.status-info[b-1yx7y4su43] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot[b-1yx7y4su43] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot.completed[b-1yx7y4su43] { background: #10b981; }
.status-dot.in-progress[b-1yx7y4su43] { background: #3b82f6; }
.status-dot.not-started[b-1yx7y4su43] { background: #94a3b8; }
.status-dot.on-hold[b-1yx7y4su43] { background: #f59e0b; }
.status-dot.cancelled[b-1yx7y4su43] { background: #ef4444; }

.status-name[b-1yx7y4su43] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.status-count[b-1yx7y4su43] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.status-bar-track[b-1yx7y4su43] {
    height: 8px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.status-bar-fill[b-1yx7y4su43] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.status-bar-fill.completed[b-1yx7y4su43] { background: #10b981; }
.status-bar-fill.in-progress[b-1yx7y4su43] { background: #3b82f6; }
.status-bar-fill.not-started[b-1yx7y4su43] { background: #94a3b8; }
.status-bar-fill.on-hold[b-1yx7y4su43] { background: #f59e0b; }
.status-bar-fill.cancelled[b-1yx7y4su43] { background: #ef4444; }

/* Priority */
.priority-grid[b-1yx7y4su43] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.priority-item[b-1yx7y4su43] {
    padding: 0.75rem 1rem;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 0.75rem;
}

.priority-header[b-1yx7y4su43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.priority-badge[b-1yx7y4su43] {
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-badge.high[b-1yx7y4su43] { background: #fee2e2; color: #991b1b; }
.priority-badge.medium[b-1yx7y4su43] { background: #fef3c7; color: #92400e; }
.priority-badge.low[b-1yx7y4su43] { background: #dcfce7; color: #166534; }

.priority-count[b-1yx7y4su43] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.priority-stats[b-1yx7y4su43] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.priority-rate[b-1yx7y4su43] { font-weight: 600; }

/* Overdue List */
.overdue-list[b-1yx7y4su43] { display: flex; flex-direction: column; gap: 0.75rem; }

.overdue-item[b-1yx7y4su43] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--theme-bg-warning, #fffbeb);
    border-radius: 0.5rem;
    gap: 1rem;
}

.overdue-info[b-1yx7y4su43] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.overdue-name[b-1yx7y4su43] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overdue-date[b-1yx7y4su43] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.overdue-days[b-1yx7y4su43] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #dc2626;
    white-space: nowrap;
}

/* Insights */
.insights-grid[b-1yx7y4su43] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.insight-item[b-1yx7y4su43] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.insight-value[b-1yx7y4su43] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.insight-label[b-1yx7y4su43] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* Empty State */
.empty-state[b-1yx7y4su43] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--theme-text-secondary);
}

.empty-icon[b-1yx7y4su43] { width: 64px; height: 64px; opacity: 0.4; margin-bottom: 1rem; }
.empty-state h3[b-1yx7y4su43] { margin: 0 0 0.5rem; color: var(--theme-text-primary); }

/* Loading */
.loading-spinner[b-1yx7y4su43] { display: flex; justify-content: center; padding: 4rem; }

.spinner[b-1yx7y4su43] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-1yx7y4su43 0.8s linear infinite;
}

@keyframes spin-b-1yx7y4su43 { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
    .analytics-grid[b-1yx7y4su43] { grid-template-columns: 1fr; }
    .stats-row[b-1yx7y4su43] { grid-template-columns: repeat(2, 1fr); }
    .insights-grid[b-1yx7y4su43] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/Reports/Reports.razor.rz.scp.css */
/* ============================================
   REPORTS PAGE STYLES
   ============================================ */

/* Hero Section - Full Viewport Width (root level) */
.reports-hero[b-yyjzrhav8c] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    padding: 40px 24px;
    box-shadow: 0 8px 32px rgba(245, 158, 11, 0.3);
    width: 100%;
}

.reports-page[b-yyjzrhav8c] {
    min-height: calc(100vh - 56px);
    padding: 0;
    background: #f8fafc;
}

.hero-content[b-yyjzrhav8c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-title[b-yyjzrhav8c] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.hero-subtitle[b-yyjzrhav8c] {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.date-badge[b-yyjzrhav8c] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.25);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Loading Bar */
.loading-bar[b-yyjzrhav8c] {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 24px;
}

.loading-bar-inner[b-yyjzrhav8c] {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    animation: loading-b-yyjzrhav8c 1.5s ease-in-out infinite;
}

@keyframes loading-b-yyjzrhav8c {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Stats Grid */
.stats-grid[b-yyjzrhav8c] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card[b-yyjzrhav8c] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
}

.stat-card:hover[b-yyjzrhav8c] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.stat-icon[b-yyjzrhav8c] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.stat-icon.income[b-yyjzrhav8c] { background: linear-gradient(135deg, #10b981, #059669); }
.stat-icon.tasks[b-yyjzrhav8c] { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.stat-icon.goals[b-yyjzrhav8c] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-icon.time[b-yyjzrhav8c] { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }

.stat-value[b-yyjzrhav8c] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.stat-label[b-yyjzrhav8c] {
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
}

/* Section Headers */
.section-header[b-yyjzrhav8c] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    margin-top: 8px;
}

.section-header svg[b-yyjzrhav8c] {
    color: #6366f1;
}

.section-header.admin svg[b-yyjzrhav8c] {
    color: #dc2626;
}

.section-header h2[b-yyjzrhav8c] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

/* Reports Grid */
.reports-grid[b-yyjzrhav8c] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Report Card */
.report-card[b-yyjzrhav8c] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.report-card:hover[b-yyjzrhav8c] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.report-card.admin[b-yyjzrhav8c] {
    border-left: 4px solid #dc2626;
}

.report-card-content[b-yyjzrhav8c] {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.report-icon[b-yyjzrhav8c] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.report-icon.success[b-yyjzrhav8c] { background: linear-gradient(135deg, #10b981, #059669); }
.report-icon.info[b-yyjzrhav8c] { background: linear-gradient(135deg, #0ea5e9, #06b6d4); }
.report-icon.error[b-yyjzrhav8c] { background: linear-gradient(135deg, #ef4444, #dc2626); }
.report-icon.warning[b-yyjzrhav8c] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.report-icon.primary[b-yyjzrhav8c] { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.report-icon.secondary[b-yyjzrhav8c] { background: linear-gradient(135deg, #64748b, #475569); }
.report-icon.admin-red[b-yyjzrhav8c] { background: linear-gradient(135deg, #dc2626, #b91c1c); }

.report-card h3[b-yyjzrhav8c] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.report-card p[b-yyjzrhav8c] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.chips[b-yyjzrhav8c] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip[b-yyjzrhav8c] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.chip.success[b-yyjzrhav8c] { background: rgba(16, 185, 129, 0.1); color: #059669; }
.chip.error[b-yyjzrhav8c] { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
.chip.info[b-yyjzrhav8c] { background: rgba(14, 165, 233, 0.1); color: #0284c7; }
.chip.warning[b-yyjzrhav8c] { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.chip.primary[b-yyjzrhav8c] { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
.chip.secondary[b-yyjzrhav8c] { background: rgba(100, 116, 139, 0.1); color: #475569; }

.report-card-actions[b-yyjzrhav8c] {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Quick Actions Card */
.quick-actions-card[b-yyjzrhav8c] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.quick-actions-header[b-yyjzrhav8c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #1e293b;
}

.quick-actions-header svg[b-yyjzrhav8c] {
    color: #f59e0b;
}

.quick-actions-buttons[b-yyjzrhav8c] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================
   DARK THEME SUPPORT
   ============================================ */
.theme-space[b-yyjzrhav8c],
.theme-winter[b-yyjzrhav8c],
.theme-nature[b-yyjzrhav8c],
.theme-ocean[b-yyjzrhav8c],
.theme-mystic[b-yyjzrhav8c],
.theme-tron[b-yyjzrhav8c] {
    background: transparent;
}

.theme-space .stat-card[b-yyjzrhav8c],
.theme-winter .stat-card[b-yyjzrhav8c],
.theme-nature .stat-card[b-yyjzrhav8c],
.theme-ocean .stat-card[b-yyjzrhav8c],
.theme-mystic .stat-card[b-yyjzrhav8c],
.theme-tron .stat-card[b-yyjzrhav8c],
.theme-space .report-card[b-yyjzrhav8c],
.theme-winter .report-card[b-yyjzrhav8c],
.theme-nature .report-card[b-yyjzrhav8c],
.theme-ocean .report-card[b-yyjzrhav8c],
.theme-mystic .report-card[b-yyjzrhav8c],
.theme-tron .report-card[b-yyjzrhav8c],
.theme-space .quick-actions-card[b-yyjzrhav8c],
.theme-winter .quick-actions-card[b-yyjzrhav8c],
.theme-nature .quick-actions-card[b-yyjzrhav8c],
.theme-ocean .quick-actions-card[b-yyjzrhav8c],
.theme-mystic .quick-actions-card[b-yyjzrhav8c],
.theme-tron .quick-actions-card[b-yyjzrhav8c] {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-space .stat-value[b-yyjzrhav8c],
.theme-winter .stat-value[b-yyjzrhav8c],
.theme-nature .stat-value[b-yyjzrhav8c],
.theme-ocean .stat-value[b-yyjzrhav8c],
.theme-mystic .stat-value[b-yyjzrhav8c],
.theme-tron .stat-value[b-yyjzrhav8c],
.theme-space .report-card h3[b-yyjzrhav8c],
.theme-winter .report-card h3[b-yyjzrhav8c],
.theme-nature .report-card h3[b-yyjzrhav8c],
.theme-ocean .report-card h3[b-yyjzrhav8c],
.theme-mystic .report-card h3[b-yyjzrhav8c],
.theme-tron .report-card h3[b-yyjzrhav8c],
.theme-space .section-header h2[b-yyjzrhav8c],
.theme-winter .section-header h2[b-yyjzrhav8c],
.theme-nature .section-header h2[b-yyjzrhav8c],
.theme-ocean .section-header h2[b-yyjzrhav8c],
.theme-mystic .section-header h2[b-yyjzrhav8c],
.theme-tron .section-header h2[b-yyjzrhav8c],
.theme-space .quick-actions-header[b-yyjzrhav8c],
.theme-winter .quick-actions-header[b-yyjzrhav8c],
.theme-nature .quick-actions-header[b-yyjzrhav8c],
.theme-ocean .quick-actions-header[b-yyjzrhav8c],
.theme-mystic .quick-actions-header[b-yyjzrhav8c],
.theme-tron .quick-actions-header[b-yyjzrhav8c] {
    color: #f1f5f9;
}

.theme-space .stat-label[b-yyjzrhav8c],
.theme-winter .stat-label[b-yyjzrhav8c],
.theme-nature .stat-label[b-yyjzrhav8c],
.theme-ocean .stat-label[b-yyjzrhav8c],
.theme-mystic .stat-label[b-yyjzrhav8c],
.theme-tron .stat-label[b-yyjzrhav8c],
.theme-space .report-card p[b-yyjzrhav8c],
.theme-winter .report-card p[b-yyjzrhav8c],
.theme-nature .report-card p[b-yyjzrhav8c],
.theme-ocean .report-card p[b-yyjzrhav8c],
.theme-mystic .report-card p[b-yyjzrhav8c],
.theme-tron .report-card p[b-yyjzrhav8c] {
    color: #94a3b8;
}

.theme-space .report-card-actions[b-yyjzrhav8c],
.theme-winter .report-card-actions[b-yyjzrhav8c],
.theme-nature .report-card-actions[b-yyjzrhav8c],
.theme-ocean .report-card-actions[b-yyjzrhav8c],
.theme-mystic .report-card-actions[b-yyjzrhav8c],
.theme-tron .report-card-actions[b-yyjzrhav8c] {
    background: rgba(15, 23, 42, 0.5);
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .reports-grid[b-yyjzrhav8c] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .page-container[b-yyjzrhav8c] {
        padding: 0 16px 16px;
    }

    .hero-section[b-yyjzrhav8c] {
        padding: 24px 16px;
    }

    .hero-title[b-yyjzrhav8c] {
        font-size: 1.5rem;
    }

    .stats-grid[b-yyjzrhav8c] {
        grid-template-columns: repeat(2, 1fr);
    }

    .reports-grid[b-yyjzrhav8c] {
        grid-template-columns: 1fr;
    }

    .quick-actions-card[b-yyjzrhav8c] {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-actions-buttons[b-yyjzrhav8c] {
        justify-content: center;
    }
}
/* /Pages/Reports/RevenueByClient.razor.rz.scp.css */
.page-container[b-utoh5p2ph0] {
    display: flex;
    flex-direction: column;
    background-color: var(--theme-bg-main);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-title[b-utoh5p2ph0] {
    color: var(--theme-text-primary);
    margin: 0;
}

.page-subtitle[b-utoh5p2ph0] {
    margin: 0.5rem 0 0 calc(32px + 1rem);
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.icon[b-utoh5p2ph0] { width: 32px; height: 32px; fill: currentColor; }

/* Stats Row */
.stats-row[b-utoh5p2ph0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-utoh5p2ph0] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-label[b-utoh5p2ph0] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
}

.stat-value[b-utoh5p2ph0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-value.success[b-utoh5p2ph0] { color: #10b981; }
.stat-value.warning[b-utoh5p2ph0] { color: #f59e0b; }

/* Chart Card */
.chart-card[b-utoh5p2ph0], .table-card[b-utoh5p2ph0] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-title[b-utoh5p2ph0] {
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Bar Chart */
.bar-chart[b-utoh5p2ph0] { display: flex; flex-direction: column; gap: 0.75rem; }

.bar-row[b-utoh5p2ph0] {
    display: grid;
    grid-template-columns: 160px 1fr 90px;
    gap: 1rem;
    align-items: center;
}

.bar-label[b-utoh5p2ph0] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-track[b-utoh5p2ph0] {
    height: 28px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.bar-fill[b-utoh5p2ph0] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 6px;
    transition: width 0.5s ease;
    opacity: 0.3;
}

.bar-fill.collected[b-utoh5p2ph0] {
    background: linear-gradient(135deg, #10b981, #059669);
    opacity: 1;
}

.bar-amount[b-utoh5p2ph0] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    text-align: right;
}

.chart-legend[b-utoh5p2ph0] {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border);
}

.legend-item[b-utoh5p2ph0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.legend-dot[b-utoh5p2ph0] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-dot.invoiced[b-utoh5p2ph0] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    opacity: 0.4;
}

.legend-dot.collected[b-utoh5p2ph0] {
    background: linear-gradient(135deg, #10b981, #059669);
}

/* Table */
.table-wrapper[b-utoh5p2ph0] { overflow-x: auto; }

.data-table[b-utoh5p2ph0] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-utoh5p2ph0], .data-table td[b-utoh5p2ph0] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.875rem;
}

.data-table th[b-utoh5p2ph0] {
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table tbody tr:hover[b-utoh5p2ph0] {
    background: var(--theme-bg-secondary);
}

.text-right[b-utoh5p2ph0] { text-align: right; }

.client-name[b-utoh5p2ph0] { font-weight: 500; }

.success-text[b-utoh5p2ph0] { color: #10b981; }
.warning-text[b-utoh5p2ph0] { color: #f59e0b; }

.totals-row[b-utoh5p2ph0] {
    background: var(--theme-bg-secondary);
    border-top: 2px solid var(--theme-border);
}

.totals-row td[b-utoh5p2ph0] { font-weight: 600; }

.pct-badge[b-utoh5p2ph0] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.pct-badge.full[b-utoh5p2ph0] { background: #dcfce7; color: #166534; }
.pct-badge.partial[b-utoh5p2ph0] { background: #fef3c7; color: #92400e; }
.pct-badge.low[b-utoh5p2ph0] { background: #fee2e2; color: #991b1b; }

/* Empty State */
.empty-state[b-utoh5p2ph0] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--theme-text-secondary);
}

.empty-icon[b-utoh5p2ph0] { width: 64px; height: 64px; opacity: 0.4; margin-bottom: 1rem; }
.empty-state h3[b-utoh5p2ph0] { margin: 0 0 0.5rem; color: var(--theme-text-primary); }

/* Loading */
.loading-spinner[b-utoh5p2ph0] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-utoh5p2ph0] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-utoh5p2ph0 0.8s linear infinite;
}

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

@media (max-width: 768px) {
    .bar-row[b-utoh5p2ph0] { grid-template-columns: 100px 1fr 70px; }
    /* MOBILE-AUDIT-3 (2026-10-02): a 1fr track's minimum is its content, so a
       1.75rem currency total ("$12,345.67") pushed both cards past a 390px
       screen. minmax(0,1fr) holds the columns; the value steps down and wraps. */
    .stats-row[b-utoh5p2ph0] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card[b-utoh5p2ph0] { padding: 1rem; min-width: 0; }
    .stat-value[b-utoh5p2ph0] { font-size: 1.35rem; overflow-wrap: anywhere; }
}
/* /Pages/Reports/TimeUtilization.razor.rz.scp.css */
.page-container[b-vztagk7hw9] {
    display: flex;
    flex-direction: column;
    background-color: var(--theme-bg-main);
    color: var(--theme-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-title[b-vztagk7hw9] {
    color: var(--theme-text-primary);
    margin: 0;
}

.page-subtitle[b-vztagk7hw9] {
    margin: 0.5rem 0 0 calc(32px + 1rem);
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.icon[b-vztagk7hw9] { width: 32px; height: 32px; fill: currentColor; }

/* Stats */
.stats-row[b-vztagk7hw9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card[b-vztagk7hw9] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-label[b-vztagk7hw9] {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-secondary);
}

.stat-value[b-vztagk7hw9] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-value.success[b-vztagk7hw9] { color: #10b981; }
.stat-value.warning[b-vztagk7hw9] { color: #f59e0b; }
.stat-value.danger[b-vztagk7hw9] { color: #ef4444; }
.stat-value.secondary[b-vztagk7hw9] { color: var(--theme-text-secondary); }

/* Ring + Breakdown Layout */
.ring-and-breakdown[b-vztagk7hw9] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.ring-card[b-vztagk7hw9], .breakdown-card[b-vztagk7hw9], .table-card[b-vztagk7hw9] {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
}

.section-title[b-vztagk7hw9] {
    margin: 0 0 1.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

/* Ring Chart */
.ring-container[b-vztagk7hw9] {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto;
}

.ring-svg[b-vztagk7hw9] { width: 100%; height: 100%; }

.ring-label[b-vztagk7hw9] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ring-pct[b-vztagk7hw9] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.ring-sub[b-vztagk7hw9] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* Breakdown */
.breakdown-list[b-vztagk7hw9] { display: flex; flex-direction: column; gap: 1rem; }

.breakdown-row[b-vztagk7hw9] { display: flex; flex-direction: column; gap: 0.375rem; }

.breakdown-info[b-vztagk7hw9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breakdown-name[b-vztagk7hw9] {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.breakdown-hours[b-vztagk7hw9] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.breakdown-bar-track[b-vztagk7hw9] {
    height: 8px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.breakdown-bar-fill[b-vztagk7hw9] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.breakdown-bar-fill.business[b-vztagk7hw9] { background: linear-gradient(135deg, #667eea, #764ba2); }
.breakdown-bar-fill.personal[b-vztagk7hw9] { background: linear-gradient(135deg, #f59e0b, #d97706); }
.breakdown-bar-fill.uncategorized[b-vztagk7hw9] { background: var(--theme-text-secondary); opacity: 0.4; }

/* Table */
.table-card[b-vztagk7hw9] { margin-bottom: 1.5rem; }
.table-wrapper[b-vztagk7hw9] { overflow-x: auto; }

.data-table[b-vztagk7hw9] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-vztagk7hw9], .data-table td[b-vztagk7hw9] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.875rem;
}

.data-table th[b-vztagk7hw9] {
    font-weight: 600;
    color: var(--theme-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table tbody tr:hover[b-vztagk7hw9] { background: var(--theme-bg-secondary); }

.text-right[b-vztagk7hw9] { text-align: right; }
.project-name[b-vztagk7hw9] { font-weight: 500; }
.success-text[b-vztagk7hw9] { color: #10b981; }

.totals-row[b-vztagk7hw9] {
    background: var(--theme-bg-secondary);
    border-top: 2px solid var(--theme-border);
}

.totals-row td[b-vztagk7hw9] { font-weight: 600; }

.pct-badge[b-vztagk7hw9] {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}

/* Empty State */
.empty-state[b-vztagk7hw9] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--theme-text-secondary);
}

.empty-icon[b-vztagk7hw9] { width: 64px; height: 64px; opacity: 0.4; margin-bottom: 1rem; }
.empty-state h3[b-vztagk7hw9] { margin: 0 0 0.5rem; color: var(--theme-text-primary); }

/* Loading */
.loading-spinner[b-vztagk7hw9] { display: flex; justify-content: center; padding: 4rem; }

.spinner[b-vztagk7hw9] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-vztagk7hw9 0.8s linear infinite;
}

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

@media (max-width: 768px) {
    .ring-and-breakdown[b-vztagk7hw9] { grid-template-columns: 1fr; }
    /* MOBILE-AUDIT-3 (2026-10-02): a 1fr track's minimum is its content, so a
       1.75rem currency total ("$12,345.67") pushed both cards past a 390px
       screen. minmax(0,1fr) holds the columns; the value steps down and wraps. */
    .stats-row[b-vztagk7hw9] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card[b-vztagk7hw9] { padding: 1rem; min-width: 0; }
    .stat-value[b-vztagk7hw9] { font-size: 1.35rem; overflow-wrap: anywhere; }
}
/* /Pages/Reports/ViewProgressReport.razor.rz.scp.css */
/* ============================================
   VIEW PROGRESS REPORT PAGE STYLES

   DP-D-1 (2026-05): vpr- (view-progress-report) class prefix throughout to
   match the pr- discipline already in use on ProgressReportHistory and dodge
   utilities.css collisions on the bare class names that were here before
   (.report-header, .stat-badge, .primary-button, etc. — all generic enough
   that a future utilities.css addition could clobber them silently).

   Shares the same visual language as ViewDailyBriefing:
   - Theme-aware hero gradient (--theme-primary → --theme-primary-hover)
   - Absolutely-positioned back button top-right
   - Stat badges over the gradient
   - iframe below renders the email HTML with email-only chrome
     (#email-brand-header / #email-brand-footer / #email-open-app-cta)
     hidden via the WebViewStyleOverride injected into srcdoc.
   ============================================ */

.vpr-page[b-js9yfec9ev] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* Report Container */
.vpr-report-container[b-js9yfec9ev] {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.vpr-report-header[b-js9yfec9ev] {
    position: relative;
    /* Pair --theme-primary with --theme-btn-text (white across all 8 themes)
       — gives every theme its own signature gradient without the purple bias. */
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-hover, #764ba2) 100%);
    color: var(--theme-btn-text, #ffffff);
    /* padding-right reserves space for the absolutely-positioned .vpr-back-button
       so long h1 titles don't run under it. */
    padding: 30px 120px 30px 30px;
}

.vpr-report-header h1[b-js9yfec9ev] {
    margin: 0 0 8px 0;
    font-size: 1.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vpr-report-header h1 svg[b-js9yfec9ev] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.vpr-report-date[b-js9yfec9ev] {
    opacity: 0.9;
    font-size: 1rem;
    margin-bottom: 16px;
}

.vpr-report-stats[b-js9yfec9ev] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.vpr-stat-badge[b-js9yfec9ev] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
}

.vpr-stat-badge svg[b-js9yfec9ev] {
    width: 16px;
    height: 16px;
}

.vpr-stat-badge-overdue[b-js9yfec9ev] {
    background: rgba(239, 68, 68, 0.35);
}

.vpr-stat-badge-getting-started[b-js9yfec9ev] {
    background: rgba(16, 185, 129, 0.35);
}

.vpr-back-button[b-js9yfec9ev] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    /* Hero uses --theme-primary gradient; --theme-btn-text (white across all 8 themes)
       is guaranteed to have correct contrast against --theme-primary. */
    color: var(--theme-btn-text, #ffffff);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(10px);
    z-index: 1;
}

.vpr-back-button:hover[b-js9yfec9ev] {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    transform: translateX(-2px);
}

.vpr-back-button svg[b-js9yfec9ev] {
    width: 14px;
    height: 14px;
}

.vpr-report-content[b-js9yfec9ev] {
    padding: 0;
    background: white;
}

.vpr-report-content iframe[b-js9yfec9ev] {
    width: 100%;
    min-height: 800px;
    border: none;
    display: block;
}

.vpr-no-content[b-js9yfec9ev] {
    padding: 60px 40px;
    text-align: center;
    color: #6b7280;
}

/* Loading / Empty states */
.vpr-loading-state[b-js9yfec9ev],
.vpr-empty-state[b-js9yfec9ev] {
    background: white;
    border-radius: 16px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.vpr-loading-state .vpr-spinner[b-js9yfec9ev] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-border, #e5e7eb);
    border-top-color: var(--theme-primary, #667eea);
    border-radius: 50%;
    animation: vpr-spin-b-js9yfec9ev 0.8s linear infinite;
    margin: 0 auto 16px;
}

@keyframes vpr-spin-b-js9yfec9ev {
    to { transform: rotate(360deg); }
}

.vpr-loading-state p[b-js9yfec9ev] {
    color: #64748b;
    margin: 0;
}

.vpr-empty-state svg[b-js9yfec9ev] {
    width: 64px;
    height: 64px;
    color: #9ca3af;
    margin-bottom: 16px;
}

.vpr-empty-state h2[b-js9yfec9ev] {
    margin: 0 0 8px 0;
    color: #374151;
    font-size: 1.25rem;
}

.vpr-empty-state p[b-js9yfec9ev] {
    color: #6b7280;
    margin: 0 0 20px 0;
}

/* Actions card below the report */
.vpr-actions-card[b-js9yfec9ev] {
    margin-top: 16px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vpr-actions-row[b-js9yfec9ev] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Buttons — match ViewDailyBriefing's theme-aware primary-button */
.vpr-primary-button[b-js9yfec9ev] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--theme-primary, #667eea) 0%, var(--theme-primary-hover, #764ba2) 100%);
    border: none;
    border-radius: 8px;
    color: var(--theme-btn-text, #ffffff);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.vpr-primary-button:hover[b-js9yfec9ev] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--theme-shadow-color, rgba(102, 126, 234, 0.4));
}

.vpr-secondary-button[b-js9yfec9ev] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--theme-primary, #667eea);
    border-radius: 8px;
    color: var(--theme-primary-ink, var(--theme-primary, #667eea));
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.vpr-secondary-button:hover[b-js9yfec9ev] {
    background: color-mix(in srgb, var(--theme-primary, #667eea) 10%, transparent);
    transform: translateY(-2px);
}

/* ============================================
   DARK THEME SUPPORT (app chrome only — the iframe
   content keeps its own email-optimized light bg)
   ============================================ */
.theme-space.vpr-page[b-js9yfec9ev],
.theme-winter.vpr-page[b-js9yfec9ev],
.theme-nature.vpr-page[b-js9yfec9ev],
.theme-ocean.vpr-page[b-js9yfec9ev],
.theme-mystic.vpr-page[b-js9yfec9ev],
.theme-tron.vpr-page[b-js9yfec9ev] {
    background: transparent;
}

.theme-space .vpr-actions-card[b-js9yfec9ev],
.theme-winter .vpr-actions-card[b-js9yfec9ev],
.theme-nature .vpr-actions-card[b-js9yfec9ev],
.theme-ocean .vpr-actions-card[b-js9yfec9ev],
.theme-mystic .vpr-actions-card[b-js9yfec9ev],
.theme-tron .vpr-actions-card[b-js9yfec9ev],
.theme-space .vpr-loading-state[b-js9yfec9ev],
.theme-winter .vpr-loading-state[b-js9yfec9ev],
.theme-nature .vpr-loading-state[b-js9yfec9ev],
.theme-ocean .vpr-loading-state[b-js9yfec9ev],
.theme-mystic .vpr-loading-state[b-js9yfec9ev],
.theme-tron .vpr-loading-state[b-js9yfec9ev],
.theme-space .vpr-empty-state[b-js9yfec9ev],
.theme-winter .vpr-empty-state[b-js9yfec9ev],
.theme-nature .vpr-empty-state[b-js9yfec9ev],
.theme-ocean .vpr-empty-state[b-js9yfec9ev],
.theme-mystic .vpr-empty-state[b-js9yfec9ev],
.theme-tron .vpr-empty-state[b-js9yfec9ev] {
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.theme-space .vpr-empty-state h2[b-js9yfec9ev],
.theme-winter .vpr-empty-state h2[b-js9yfec9ev],
.theme-nature .vpr-empty-state h2[b-js9yfec9ev],
.theme-ocean .vpr-empty-state h2[b-js9yfec9ev],
.theme-mystic .vpr-empty-state h2[b-js9yfec9ev],
.theme-tron .vpr-empty-state h2[b-js9yfec9ev] {
    color: #f1f5f9;
}

.theme-space .vpr-empty-state p[b-js9yfec9ev],
.theme-winter .vpr-empty-state p[b-js9yfec9ev],
.theme-nature .vpr-empty-state p[b-js9yfec9ev],
.theme-ocean .vpr-empty-state p[b-js9yfec9ev],
.theme-mystic .vpr-empty-state p[b-js9yfec9ev],
.theme-tron .vpr-empty-state p[b-js9yfec9ev],
.theme-space .vpr-loading-state p[b-js9yfec9ev],
.theme-winter .vpr-loading-state p[b-js9yfec9ev],
.theme-nature .vpr-loading-state p[b-js9yfec9ev],
.theme-ocean .vpr-loading-state p[b-js9yfec9ev],
.theme-mystic .vpr-loading-state p[b-js9yfec9ev],
.theme-tron .vpr-loading-state p[b-js9yfec9ev] {
    color: #94a3b8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .vpr-page[b-js9yfec9ev] {
        padding: 12px;
    }

    .vpr-back-button[b-js9yfec9ev] {
        top: 10px;
        right: 10px;
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .vpr-report-header[b-js9yfec9ev] {
        padding: 18px 90px 18px 16px;
    }

    .vpr-report-header h1[b-js9yfec9ev] {
        font-size: 1.3rem;
        gap: 8px;
    }

    .vpr-report-header h1 svg[b-js9yfec9ev] {
        width: 24px;
        height: 24px;
    }

    .vpr-report-date[b-js9yfec9ev] {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }

    .vpr-stat-badge[b-js9yfec9ev] {
        font-size: 0.75rem;
        padding: 4px 8px;
    }

    .vpr-report-container[b-js9yfec9ev] {
        border-radius: 12px;
    }

    .vpr-actions-row[b-js9yfec9ev] {
        flex-direction: column;
    }

    .vpr-actions-row .vpr-primary-button[b-js9yfec9ev],
    .vpr-actions-row .vpr-secondary-button[b-js9yfec9ev] {
        width: 100%;
        justify-content: center;
    }

    .vpr-empty-state svg[b-js9yfec9ev] {
        width: 48px;
        height: 48px;
    }

    .vpr-empty-state h2[b-js9yfec9ev] {
        font-size: 1.1rem;
    }
}

/* BRIEF-ASSIST-1 (2026-10-09): the DP-STATE-P2 drift banner styles that lived here are gone -
   the banner became one line inside the assistant card (Components/Briefing/BriefingAssistantCard). */
/* /Pages/Roadmap/PublicRoadmap.razor.rz.scp.css */
/* RM-PUBLIC-1 (2026-06-01): scoped styles for the public roadmap. Theme-variable
   driven with light fallbacks so it reads correctly on the public marketing surface
   and across themes. Accent dots are fixed hues (read fine on any background). */

.pubrm-hero[b-m0p0facelc] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 2.5rem 1rem 1.25rem;
}

.pubrm-title[b-m0p0facelc] {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--theme-text-primary, #0f172a);
    margin: 0 0 0.5rem;
}

.pubrm-sub[b-m0p0facelc] {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

.pubrm-board[b-m0p0facelc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 1.5rem auto 4rem;
    padding: 0 1rem;
}

@media (max-width: 860px) {
    .pubrm-board[b-m0p0facelc] {
        grid-template-columns: 1fr;
    }
}

.pubrm-col[b-m0p0facelc] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.55));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1rem 1rem 1.25rem;
}

.pubrm-col-head[b-m0p0facelc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.pubrm-col-head h2[b-m0p0facelc] {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--theme-text-primary, #0f172a);
    margin: 0;
}

.pubrm-count[b-m0p0facelc] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 12%, transparent);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
}

.pubrm-dot[b-m0p0facelc] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.pubrm-col--now .pubrm-dot[b-m0p0facelc] { background: #3b82f6; }
.pubrm-col--next .pubrm-dot[b-m0p0facelc] { background: #a855f7; }
.pubrm-col--shipped .pubrm-dot[b-m0p0facelc] { background: #22c55e; }

.pubrm-card[b-m0p0facelc] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.6rem;
}

.pubrm-card:last-child[b-m0p0facelc] {
    margin-bottom: 0;
}

.pubrm-card-title[b-m0p0facelc] {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--theme-text-primary, #0f172a);
    margin: 0 0 0.3rem;
}

.pubrm-card-desc[b-m0p0facelc] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--theme-text-secondary, #475569);
    margin: 0;
}

.pubrm-shipped[b-m0p0facelc] {
    display: inline-block;
    margin-top: 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
    color: #15803d;
    background: color-mix(in srgb, #22c55e 14%, transparent);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
}

.pubrm-empty[b-m0p0facelc] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #94a3b8);
    font-style: italic;
    margin: 0.25rem 0 0;
}

.pubrm-state[b-m0p0facelc] {
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
    padding: 3rem 1rem 4rem;
}
/* /Pages/Routines/Routines.razor.rz.scp.css */
/*
   ROUT-V-2 (2026-05-14): Scoped styles for the dedicated /routines page.
   Reuses the .list-page-* utility classes for chrome (header, container,
   empty state) and only adds row-specific styles here. Row layout is
   intentionally simpler than /tasks (no project/account chips, no kanban
   handle) — the streak chip is the hero.
*/

.routines-list[b-vpaynanem3] {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.routines-row[b-vpaynanem3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-left: 4px solid var(--accent-warning, #f59e0b);
    border-radius: 0.5rem;
    transition: background 120ms ease, border-color 120ms ease;
}

.routines-row:hover[b-vpaynanem3] {
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
    border-left-color: var(--accent-warning-strong, #fbbf24);
}

/* "Done today" state — green left border, slightly muted background to
   read as "this row is complete, move along". */
.routines-row--done[b-vpaynanem3] {
    border-left-color: var(--accent-success, #10b981);
    opacity: 0.85;
}

.routines-row-info[b-vpaynanem3] {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.routines-row-info:focus-visible[b-vpaynanem3] {
    outline: 2px solid var(--accent-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.routines-row-title[b-vpaynanem3] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.3;
}

.routines-row-meta[b-vpaynanem3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.routines-streak-chip[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    background: rgba(245, 158, 11, 0.12);
    color: var(--accent-warning, #f59e0b);
    border-radius: 999px;
    font-weight: 600;
}

.routines-cadence-chip[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: rgba(99, 102, 241, 0.10);
    color: var(--accent-primary, #6366f1);
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    font-size: 0.7rem;
}

.routines-next-chip[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    color: var(--theme-text-secondary, #64748b);
    font-style: italic;
}

.routines-row-actions[b-vpaynanem3] {
    flex-shrink: 0;
    /* ROUT-V-6: standalone rows now carry two actions (Move + Log). */
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.routines-log-btn[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    background: var(--accent-primary, #6366f1);
    color: var(--text-on-accent, #fff);
    border: none;
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms ease, transform 80ms ease;
}

.routines-log-btn:hover:not(:disabled)[b-vpaynanem3] {
    background: var(--accent-primary-strong, #4f46e5);
    transform: translateY(-1px);
}

.routines-log-btn:disabled[b-vpaynanem3] {
    opacity: 0.55;
    cursor: not-allowed;
}

.routines-log-btn--done[b-vpaynanem3] {
    background: var(--accent-success, #10b981);
}

.routines-log-btn--done:hover:not(:disabled)[b-vpaynanem3] {
    background: var(--accent-success, #10b981);
    transform: none;
}

/* ROUT-V-6 (2026-07-09): "Move to routine" affordance on Standalone Practices
   rows. Deliberately SECONDARY (outline) so Log stays the row's primary verb. */
.routines-move-btn[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.12));
    border-radius: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}

.routines-move-btn:hover[b-vpaynanem3] {
    color: var(--theme-text-primary, #1e293b);
    border-color: var(--accent-primary, #6366f1);
    background: color-mix(in srgb, var(--accent-primary, #6366f1) 8%, transparent);
}

/* ============================================
   ROUT-V-3 (2026-05-14) — Filter chips + sort dropdown
   Filter chips on the left, sort select on the right. Mirrors the
   /tasks filter row visually but uses chip-style buttons (smaller
   surface area, more clickable) since the cadence axis is small (4
   options) and chips read as toggles rather than dropdown options.
   ============================================ */
.routines-filters[b-vpaynanem3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1rem 0 0 0;
}

.routines-filter-chips[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.routines-filter-chip[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}

.routines-filter-chip:hover[b-vpaynanem3] {
    color: var(--theme-text-primary, #1e293b);
    border-color: var(--theme-text-secondary, #94a3b8);
}

.routines-filter-chip.is-active[b-vpaynanem3] {
    background: rgba(99, 102, 241, 0.16);
    color: var(--accent-primary, #818cf8);
    border-color: rgba(99, 102, 241, 0.4);
}

.routines-sort-select[b-vpaynanem3] {
    padding: 0.4rem 0.7rem;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.routines-sort-select:hover[b-vpaynanem3],
.routines-sort-select:focus-visible[b-vpaynanem3] {
    border-color: var(--theme-text-secondary, #94a3b8);
    outline: none;
}

/* ============================================
   ROUT-V-3 (2026-05-14) — 7-day activity dots
   One row of seven small circles under each routine. Filled = logged,
   hollow = no log. Today gets a ring outline so the user can find it
   at a glance. The visual is the streak history without forcing the
   user to open a detail view.
   ============================================ */
.routines-row-streak-dots[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
}

.routines-streak-dot[b-vpaynanem3] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--theme-border, #cbd5e1);
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.routines-streak-dot.dot--hit[b-vpaynanem3] {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
}

/* "Today" outline — applies whether the dot is hit or not, so the user
   can see where today sits in the row even before they log. When today
   is also hit, the green fill stays and the outline becomes a ring of
   slightly extra thickness (via box-shadow) to keep both signals legible. */
.routines-streak-dot.dot--today[b-vpaynanem3] {
    border-color: var(--accent-primary, #818cf8);
    box-shadow: 0 0 0 1.5px rgba(129, 140, 248, 0.35);
}

.routines-streak-dot.dot--today.dot--hit[b-vpaynanem3] {
    /* When today is logged: green fill + indigo ring. Reads as
       "today is done AND that's a clear visual anchor in the row." */
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.5);
}

/* ============================================
   ROUT-V-4 (2026-05-14) — Routine container cards
   Each named routine renders as a card. Header (clickable, opens edit
   dialog) shows the routine name + completion summary; body holds
   nested practice rows. Empty containers get an inline "add your first
   practice" CTA so a fresh routine isn't a dead-end.
   ============================================ */

.routine-cards[b-vpaynanem3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0 0 0;
}

.routine-card[b-vpaynanem3] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    transition: border-color 120ms ease;
}

.routine-card:hover[b-vpaynanem3] {
    border-color: var(--theme-text-secondary, #cbd5e1);
}

/* Standalone Practices section: subdued header to read as "leftover /
   ungrouped" rather than competing with named routines. */
.routine-card--standalone[b-vpaynanem3] {
    background: transparent;
    border-style: dashed;
    border-color: var(--theme-text-secondary, #cbd5e1);
}

.routine-card-header[b-vpaynanem3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0.25rem 0.6rem 0.25rem;
}

/* Title button takes the full clickable area — clicking the routine name
   opens the edit dialog. The Add Practice button is a separate target so
   it doesn't fight with the header click. */
.routine-card-title-btn[b-vpaynanem3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    background: transparent;
    border: none;
    padding: 0.3rem 0.4rem;
    margin: -0.3rem -0.4rem; /* bleed the click area into the header padding */
    border-radius: 0.4rem;
    text-align: left;
    cursor: pointer;
    flex: 1;
    min-width: 0;
    transition: background 100ms ease;
}

.routine-card-title-btn:hover[b-vpaynanem3] {
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.04));
}

/* Static variant for the Standalone section — no click target since
   there's nothing to edit at the section level. */
.routine-card-title-btn--static[b-vpaynanem3] {
    cursor: default;
}

.routine-card-title-btn--static:hover[b-vpaynanem3] {
    background: transparent;
}

.routine-card-title[b-vpaynanem3] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.2;
}

.routine-card-title--muted[b-vpaynanem3] {
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.routine-card-progress[b-vpaynanem3] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.routine-card-add-btn[b-vpaynanem3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    color: var(--accent-primary, #6366f1);
    border: 1px solid rgba(99, 102, 241, 0.4);
    border-radius: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 100ms ease, color 100ms ease;
}

.routine-card-add-btn:hover[b-vpaynanem3] {
    background: rgba(99, 102, 241, 0.10);
}

/* Empty-routine inline CTA — when a container has no practices, render a
   subdued prompt to add one rather than leaving the body blank. */
.routine-card-empty[b-vpaynanem3] {
    padding: 0.75rem 0.5rem 0.5rem 0.5rem;
    text-align: center;
}

.routine-card-empty p[b-vpaynanem3] {
    margin: 0 0 0.6rem 0;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
}

.routine-card-empty-cta[b-vpaynanem3] {
    background: transparent;
    color: var(--accent-primary, #6366f1);
    border: 1px dashed rgba(99, 102, 241, 0.5);
    padding: 0.4rem 0.85rem;
}

.routine-card-empty-cta:hover:not(:disabled)[b-vpaynanem3] {
    background: rgba(99, 102, 241, 0.08);
    transform: none;
}

/* Inside a card, practice rows are the existing .routines-row treatment
   but visually nested — slightly tighter padding + no extra gap above
   the list since the card already provides the wrapper. */
.routine-card .routines-list[b-vpaynanem3] {
    margin-top: 0;
}

/* === Routine form fields (ROUT-V-4.2, 2026-05-14) ===
   The dialog chrome (backdrop, header, footer, buttons) comes from the
   shared <BaseDialog> component (Components/Dialogs/BaseDialog.razor) —
   we DON'T re-style any of that here. These classes are only the
   per-page form content INSIDE the dialog body, mirroring the pattern
   used by MilestoneDialog (.milestone-form-group / -form-input) and
   TimeEntryDialog (similar shape). Naming is .routine-form-* so it's
   obvious these aren't dialog-chrome rules.

   Anything dialog-shaped (backdrop position, button styling, ESC
   handling, close button, theme support) is BaseDialog's job. If a
   future change here looks like "I need a custom backdrop / button /
   header style," that's a sign to either accept BaseDialog's defaults
   or extend BaseDialog itself — NOT to re-implement dialog chrome
   per page (which is exactly the trap ROUT-V-4 / V-4.1 fell into).
   ============================================ */

.routine-form[b-vpaynanem3] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.routine-form-group[b-vpaynanem3] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.routine-form-group label[b-vpaynanem3] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.routine-form-required[b-vpaynanem3] {
    color: #ef4444;
    margin-left: 0.15rem;
}

.routine-form-input[b-vpaynanem3] {
    padding: 0.55rem 0.75rem;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 0.45rem;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 100ms ease, box-shadow 100ms ease;
    width: 100%;
    box-sizing: border-box;
}

.routine-form-input:focus[b-vpaynanem3] {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.routine-form-textarea[b-vpaynanem3] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

/* Two-column row for Goal/Objective pickers — related conceptually so
   they sit side-by-side at desktop widths; stacks on narrow screens. */
.routine-form-row[b-vpaynanem3] {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.routine-form-group--half[b-vpaynanem3] {
    flex: 1 1 200px;
    min-width: 0;
}

.routine-form-link-hint[b-vpaynanem3] {
    padding: 0.55rem 0.7rem;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.18);
    border-radius: 0.4rem;
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.4;
}

/* ============================================
   DARK THEMES (ROUT-V-3.1, 2026-05-14)
   The base rules above use `--theme-text-primary` etc. with light-theme
   fallbacks. NTS convention is NOT to redefine those custom properties
   per theme — instead, dark themes get explicit overrides via the
   :is(.theme-X, ...) selector pattern, exactly mirroring CrmSubNav.razor.css
   and FinanceSubNav.razor.css. Without this block, Space / Winter /
   Nature / Ocean / Mystic / Grid render dark titles on dark surfaces
   (or vice versa) — the latent bug that ROUT-V-2 shipped with and
   only became visible once a user opened the page on a dark theme.

   Maintenance note: any new color rule above this block needs a
   matching dark-theme override down here. Don't add a new var() ref
   without considering whether the fallback is theme-correct on dark.
   ============================================ */

.is-dark .routines-row[b-vpaynanem3] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .routines-row:hover[b-vpaynanem3] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .routines-row-title[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .routines-next-chip[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.6);
}

/* Filter chips on dark themes — light text + light border tints. */
.is-dark .routines-filter-chip[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .routines-filter-chip:hover[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

.is-dark .routines-filter-chip.is-active[b-vpaynanem3] {
    background: rgba(99, 102, 241, 0.22);
    color: #a5b4fc;
    border-color: rgba(165, 180, 252, 0.45);
}

/* Sort select gets a dark surface + light text. */
.is-dark .routines-sort-select[b-vpaynanem3] {
    background: rgba(30, 41, 59, 0.6);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Activity dots: hollow dot border needs to be a light tint on dark themes
   so it actually shows up against the dark row background. */
.is-dark .routines-streak-dot[b-vpaynanem3] {
    border-color: rgba(255, 255, 255, 0.25);
}

/* ROUT-V-4 (2026-05-14): Routine card chrome on dark themes — same pattern
   as everything above, mirrors the CrmSubNav approach. */
.is-dark .routine-card[b-vpaynanem3] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .routine-card:hover[b-vpaynanem3] {
    border-color: rgba(255, 255, 255, 0.2);
}

.is-dark .routine-card--standalone[b-vpaynanem3] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.18);
}

.is-dark .routine-card-title-btn:hover[b-vpaynanem3] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .routine-card-title[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .routine-card-title--muted[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.55);
}

.is-dark .routine-card-progress[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .routine-card-add-btn[b-vpaynanem3] {
    color: #a5b4fc;
    border-color: rgba(165, 180, 252, 0.45);
}

.is-dark .routine-card-add-btn:hover[b-vpaynanem3] {
    background: rgba(165, 180, 252, 0.12);
}

.is-dark .routine-card-empty p[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .routine-card-empty-cta[b-vpaynanem3] {
    color: #a5b4fc;
    border-color: rgba(165, 180, 252, 0.5);
}

/* Routine form fields on dark themes (ROUT-V-4.2). The dialog chrome
   (backdrop, header, footer, buttons) has its own dark-theme rules in
   BaseDialog.razor.css — these overrides only cover the per-page form
   field content rendered inside the dialog body. */
.is-dark .routine-form-group label[b-vpaynanem3] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .routine-form-input[b-vpaynanem3] {
    background: rgba(15, 23, 42, 0.8);
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .routine-form-input:focus[b-vpaynanem3] {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.2);
}

.is-dark .routine-form-link-hint[b-vpaynanem3] {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(165, 180, 252, 0.3);
    color: rgba(255, 255, 255, 0.7);
}

/* Mobile: stack the action under the info so a small screen doesn't
   crush the title or hide the log button. */
@media (max-width: 540px) {
    .routines-row[b-vpaynanem3] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .routines-row-actions[b-vpaynanem3] {
        align-self: flex-end;
        /* ROUT-V-6: two actions may need to wrap on phones. */
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    /* Filter row: stack chips above the sort select on narrow screens. */
    .routines-filters[b-vpaynanem3] {
        flex-direction: column;
        align-items: stretch;
    }

    .routines-sort-select[b-vpaynanem3] {
        width: 100%;
    }
}
/* /Pages/ServiceDesk/Contact.razor.rz.scp.css */
/* Contact Page Scoped CSS */

.contact-page[b-k6rqgu2f6u] {
    padding: 0 24px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Hero Section
   2026-05-09: gradients dropped (background + radial overlay) per design refresh.
   Each theme uses the darker first-stop of its prior gradient as the new flat fill. */
.contact-hero[b-k6rqgu2f6u] {
    background: #1e3a5f;
    padding: 80px 20px;
    border-radius: 28px;
    margin-bottom: 50px;
    text-align: center;
    color: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

/* Theme-specific hero backgrounds (flat) */
.theme-executive .contact-hero[b-k6rqgu2f6u] {
    background: #1e293b;
    box-shadow: 0 20px 60px rgba(30, 41, 59, 0.25);
}

.theme-cloud .contact-hero[b-k6rqgu2f6u] {
    background: #1e40af;
    box-shadow: 0 20px 60px rgba(59, 130, 246, 0.3);
}

.theme-space .contact-hero[b-k6rqgu2f6u] {
    background: #1a1040;
    box-shadow: 0 20px 60px rgba(45, 27, 105, 0.3);
}

.theme-winter .contact-hero[b-k6rqgu2f6u] {
    background: #164e63;
    box-shadow: 0 20px 60px rgba(14, 116, 144, 0.3);
}

.theme-nature .contact-hero[b-k6rqgu2f6u] {
    background: #14532d;
    box-shadow: 0 20px 60px rgba(22, 101, 52, 0.3);
}

.theme-ocean .contact-hero[b-k6rqgu2f6u] {
    background: #0c4a6e;
    box-shadow: 0 20px 60px rgba(3, 105, 161, 0.3);
}

.theme-mystic .contact-hero[b-k6rqgu2f6u] {
    background: #1a0a2e;
    box-shadow: 0 20px 60px rgba(124, 58, 237, 0.3);
}

.theme-tron .contact-hero[b-k6rqgu2f6u] {
    background: #0a0a12;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.contact-hero-content[b-k6rqgu2f6u] {
    position: relative;
    z-index: 1;
}

.contact-hero h1[b-k6rqgu2f6u] {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px transparent;
    color: #ffffff;
}

.contact-hero h1 span[b-k6rqgu2f6u] {
    color: rgba(255, 255, 255, 0.7);
}

/* Theme-specific hero span colors */
.theme-executive .contact-hero h1 span[b-k6rqgu2f6u] { color: #94a3b8; }
.theme-cloud .contact-hero h1 span[b-k6rqgu2f6u] { color: #a5b4fc; }
.theme-space .contact-hero h1 span[b-k6rqgu2f6u] { color: #c4b5fd; }
.theme-winter .contact-hero h1 span[b-k6rqgu2f6u] { color: #67e8f9; }
.theme-nature .contact-hero h1 span[b-k6rqgu2f6u] { color: #86efac; }
.theme-ocean .contact-hero h1 span[b-k6rqgu2f6u] { color: #7dd3fc; }
.theme-mystic .contact-hero h1 span[b-k6rqgu2f6u] { color: #c4b5fd; }
.theme-tron .contact-hero h1 span[b-k6rqgu2f6u] { color: #00d4ff; }

.contact-hero-subtitle[b-k6rqgu2f6u] {
    font-size: 1.3rem;
    opacity: 1;
    max-width: 700px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.95);
}

/* Contact Form Card */
.contact-form-card[b-k6rqgu2f6u] {
    background: var(--theme-surface);
    border-radius: 28px;
    padding: 45px;
    box-shadow: 0 8px 32px var(--theme-shadow-color);
    border: 1px solid var(--theme-border);
}

.contact-form-title[b-k6rqgu2f6u] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--theme-text-primary);
    margin-bottom: 10px;
}

.contact-form-subtitle[b-k6rqgu2f6u] {
    color: var(--theme-text-secondary);
    font-size: 1.05rem;
    margin-bottom: 30px;
}

/* Info Cards */
.info-card[b-k6rqgu2f6u] {
    background: var(--theme-surface);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px var(--theme-shadow-color);
    border: 1px solid var(--theme-border);
    transition: all 0.3s ease;
}

.info-card:hover[b-k6rqgu2f6u] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--theme-shadow-color);
}

.info-card-icon[b-k6rqgu2f6u] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.info-card-icon.blue[b-k6rqgu2f6u] {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
}

.info-card-icon.purple[b-k6rqgu2f6u] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}

.info-card-icon.green[b-k6rqgu2f6u] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

.info-card-title[b-k6rqgu2f6u] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin-bottom: 10px;
}

.info-card-text[b-k6rqgu2f6u] {
    color: var(--theme-text-secondary);
    line-height: 1.7;
    font-size: 1rem;
}

.info-link[b-k6rqgu2f6u] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.info-link:hover[b-k6rqgu2f6u] {
    filter: brightness(110%);
    text-decoration: underline;
}

/* Success Card */
.success-card[b-k6rqgu2f6u] {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-accent, var(--theme-primary)));
    border-radius: 28px;
    padding: 60px 40px;
    text-align: center;
    color: var(--theme-btn-text);
    box-shadow: 0 20px 60px var(--theme-shadow-color);
}

.success-icon[b-k6rqgu2f6u] {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 3rem;
}

.success-title[b-k6rqgu2f6u] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.success-text[b-k6rqgu2f6u] {
    font-size: 1.2rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

/* Submit Button */
.submit-button[b-k6rqgu2f6u] {
    height: 56px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px var(--theme-shadow-color);
    color: white !important;
}

.submit-button:hover:not(:disabled)[b-k6rqgu2f6u] {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 32px var(--theme-shadow-color);
}

.submit-button:disabled[b-k6rqgu2f6u] {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

.success-button[b-k6rqgu2f6u] {
    background: white !important; /* Override MudButton default if needed */
    color: #059669 !important;
    font-weight: 700 !important;
    border-radius: 14px !important; 
    padding: 12px 32px !important;
    height: auto !important;
}

.alert-rounded[b-k6rqgu2f6u] {
    border-radius: 12px !important;
}

.checkbox-label[b-k6rqgu2f6u] {
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.terms-link[b-k6rqgu2f6u] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: underline;
}

/* Feature List (Added missing styles) */
.feature-list[b-k6rqgu2f6u] {
    margin-bottom: 24px;
}

.feature-list h4[b-k6rqgu2f6u] {
    color: var(--theme-text-primary);
}

.feature-item[b-k6rqgu2f6u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--theme-text-secondary);
}

.feature-icon[b-k6rqgu2f6u] {
    color: var(--theme-success, #10b981);
}

/* Abstract Graphic */
.abstract-graphic[b-k6rqgu2f6u] {
    border-radius: 24px;
    box-shadow: 0 12px 40px var(--theme-shadow-color);
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary) 50%, var(--theme-primary-light) 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.abstract-graphic .shape[b-k6rqgu2f6u] {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
}

.abstract-graphic .shape-1[b-k6rqgu2f6u] {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #60a5fa, #a78bfa);
    top: -60px;
    right: -40px;
    opacity: 0.2;
}

.abstract-graphic .shape-2[b-k6rqgu2f6u] {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #34d399, #60a5fa);
    bottom: 40px;
    left: -50px;
    opacity: 0.2;
}

.abstract-graphic .shape-3[b-k6rqgu2f6u] {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f472b6, #a78bfa);
    top: 60px;
    left: 30%;
    opacity: 0.15;
}

.abstract-graphic .shape-4[b-k6rqgu2f6u] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #fbbf24, #f472b6);
    bottom: 100px;
    right: 20%;
    opacity: 0.2;
}

.abstract-graphic .grid-pattern[b-k6rqgu2f6u] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 30px 30px;
}

/* Layout and Native Form Elements Overrides */
.contact-grid[b-k6rqgu2f6u] {
    display: flex;
    gap: 32px;
}

.contact-main[b-k6rqgu2f6u] {
    flex: 7;
}

.contact-sidebar[b-k6rqgu2f6u] {
    flex: 5;
}

.info-stack[b-k6rqgu2f6u] {
    display: flex;
    flex-direction: column;
    gap: 24px; /* MudStack Spacing=3 is roughly 24px/1.5rem */
}

/* Form Grid */
.form-grid[b-k6rqgu2f6u] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px; /* Spacing=3 */
}

.form-group[b-k6rqgu2f6u] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.half-width[b-k6rqgu2f6u] {
    width: calc(50% - 12px);
}

.full-width[b-k6rqgu2f6u] {
    width: 100%;
}

.form-label[b-k6rqgu2f6u] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.form-hint[b-k6rqgu2f6u] {
    margin: 6px 2px 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    opacity: 0.85;
    line-height: 1.4;
}

/* Off-screen honeypot field — bot bait. Hidden from users + screen readers, visible to naive form-scraping bots. */
.honeypot-field[b-k6rqgu2f6u] {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.form-input[b-k6rqgu2f6u],
.form-textarea[b-k6rqgu2f6u] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    background: var(--theme-input-bg); /* Or transparent */
    color: var(--theme-text-primary);
    font-size: 1rem;
    transition: all 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.form-input:focus[b-k6rqgu2f6u],
.form-textarea:focus[b-k6rqgu2f6u] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 4px var(--theme-shadow-color);
}

/* Custom Checkbox (reuse from blog or define here) */
.custom-checkbox[b-k6rqgu2f6u] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.custom-checkbox input[b-k6rqgu2f6u] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark[b-k6rqgu2f6u] {
    position: relative;
    height: 22px;
    width: 22px;
    background-color: transparent;
    border: 2px solid var(--theme-border);
    border-radius: 6px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.custom-checkbox:hover input ~ .checkmark[b-k6rqgu2f6u] {
    border-color: var(--theme-primary);
}

.custom-checkbox input:checked ~ .checkmark[b-k6rqgu2f6u] {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.checkmark[b-k6rqgu2f6u]:after {
    content: "";
    position: absolute;
    display: none;
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark[b-k6rqgu2f6u]:after {
    display: block;
}

.label-text[b-k6rqgu2f6u] {
    font-weight: 500;
    color: var(--theme-text-secondary);
    line-height: 1.4;
}

/* Alert */
.alert[b-k6rqgu2f6u] {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.alert-error[b-k6rqgu2f6u] {
    background-color: var(--theme-bg-danger);
    color: var(--theme-text-danger);
    border: 1px solid var(--theme-text-danger); /* Optional */
}

/* Buttons (Native) */
.btn[b-k6rqgu2f6u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-white[b-k6rqgu2f6u] {
    background: white;
    color: var(--theme-primary);
    font-weight: 700;
    border-radius: 14px;
    padding: 12px 32px;
}

.btn-primary[b-k6rqgu2f6u] {
    /* Styles are already in submit-button mostly, consolidate */
    /* Handled by .submit-button in previous CSS */
}

/* Media Queries */
@media (max-width: 960px) {
    .contact-hero h1[b-k6rqgu2f6u] {
        font-size: 2.5rem;
    }
    
    .contact-hero[b-k6rqgu2f6u] {
        padding: 60px 20px;
        border-radius: 20px;
    }
    
    .contact-form-card[b-k6rqgu2f6u] {
        padding: 30px 25px;
        border-radius: 20px;
    }
    
    .info-card[b-k6rqgu2f6u] {
        padding: 25px;
        border-radius: 20px;
    }
    
    .contact-grid[b-k6rqgu2f6u] {
        flex-direction: column;
    }
    
    .contact-main[b-k6rqgu2f6u], .contact-sidebar[b-k6rqgu2f6u] {
        width: 100%;
    }
    
    .half-width[b-k6rqgu2f6u] {
        width: 100%;
    }
}
/* /Pages/ServiceDesk/HelpDesk.razor.rz.scp.css */
/* ============================================
   HELP DESK PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - only HelpDesk-specific
   styles remain here (form, quick actions)
   ============================================ */

/* ============================================
   QUICK ACTIONS NAV
   ============================================ */
.helpdesk-quick-actions[b-uuvusvogkd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
    border-radius: 14px;
    margin-bottom: 24px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.helpdesk-action-link[b-uuvusvogkd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    color: var(--theme-accent, #3b82f6);
}

.helpdesk-action-link svg[b-uuvusvogkd] {
    width: 18px;
    height: 18px;
}

.helpdesk-action-link:hover[b-uuvusvogkd] {
    background: rgba(59, 130, 246, 0.1);
}

.helpdesk-action-link.success[b-uuvusvogkd] {
    color: #16a34a;
}

.helpdesk-action-link.success:hover[b-uuvusvogkd] {
    background: rgba(22, 163, 74, 0.1);
}

.helpdesk-action-link.warning[b-uuvusvogkd] {
    color: #f59e0b;
}

.helpdesk-action-link.warning:hover[b-uuvusvogkd] {
    background: rgba(245, 158, 11, 0.1);
}

/* ============================================
   CREATE TICKET FORM
   ============================================ */
.helpdesk-form-card[b-uuvusvogkd] {
    padding: 24px;
    border-radius: 14px;
    margin-bottom: 24px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.helpdesk-form-title[b-uuvusvogkd] {
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
    color: var(--theme-text-primary, #1e293b);
}

.helpdesk-form-title svg[b-uuvusvogkd] {
    width: 22px;
    height: 22px;
}

.helpdesk-form-alert[b-uuvusvogkd] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    background: rgba(59, 130, 246, 0.1);
    color: var(--theme-text-primary, #1e3a5f);
}

.helpdesk-form-alert svg[b-uuvusvogkd] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #3b82f6;
}

.helpdesk-form-alert a[b-uuvusvogkd] {
    font-weight: 600;
    color: #2563eb;
}

.helpdesk-form-grid[b-uuvusvogkd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.helpdesk-form-group[b-uuvusvogkd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.helpdesk-form-group.full-width[b-uuvusvogkd] {
    grid-column: span 2;
}

.helpdesk-form-label[b-uuvusvogkd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

.helpdesk-form-input[b-uuvusvogkd],
.helpdesk-form-select[b-uuvusvogkd],
.helpdesk-form-textarea[b-uuvusvogkd] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--theme-input-border, #e2e8f0);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-text-primary, #1e293b);
}

.helpdesk-form-input:focus[b-uuvusvogkd],
.helpdesk-form-select:focus[b-uuvusvogkd],
.helpdesk-form-textarea:focus[b-uuvusvogkd] {
    outline: none;
    border-color: var(--theme-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.helpdesk-form-textarea[b-uuvusvogkd] {
    resize: vertical;
    min-height: 120px;
}

.helpdesk-form-input:disabled[b-uuvusvogkd] {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--theme-surface-secondary, #f8fafc);
}

.helpdesk-form-actions[b-uuvusvogkd] {
    grid-column: span 2;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .helpdesk-quick-actions[b-uuvusvogkd],
.is-dark .helpdesk-form-card[b-uuvusvogkd] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .helpdesk-action-link[b-uuvusvogkd] {
    color: #93c5fd;
}

.is-dark .helpdesk-action-link:hover[b-uuvusvogkd] {
    background: rgba(147, 197, 253, 0.15);
}

.is-dark .helpdesk-action-link.success[b-uuvusvogkd] {
    color: #86efac;
}

.is-dark .helpdesk-action-link.warning[b-uuvusvogkd] {
    color: #fcd34d;
}

.is-dark .helpdesk-form-title[b-uuvusvogkd] {
    color: #f1f5f9;
}

.is-dark .helpdesk-form-alert[b-uuvusvogkd] {
    background: rgba(59, 130, 246, 0.15);
    color: #bfdbfe;
}

.is-dark .helpdesk-form-alert a[b-uuvusvogkd] {
    color: #60a5fa;
}

.is-dark .helpdesk-form-input[b-uuvusvogkd],
.is-dark .helpdesk-form-select[b-uuvusvogkd],
.is-dark .helpdesk-form-textarea[b-uuvusvogkd] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
}

.is-dark .helpdesk-form-input[b-uuvusvogkd]::placeholder,
.is-dark .helpdesk-form-textarea[b-uuvusvogkd]::placeholder {
    color: #94a3b8;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .helpdesk-form-grid[b-uuvusvogkd] {
        grid-template-columns: 1fr;
    }

    .helpdesk-form-group.full-width[b-uuvusvogkd] {
        grid-column: span 1;
    }

    .helpdesk-form-actions[b-uuvusvogkd] {
        grid-column: span 1;
        flex-direction: column;
    }

    .helpdesk-form-actions button[b-uuvusvogkd] {
        width: 100%;
    }
}

/* ============================================
   SCREEN RECORDING SECTION
   ============================================ */
.helpdesk-record-btn[b-uuvusvogkd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    border: 2px dashed var(--theme-border, #d1d5db);
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.helpdesk-record-btn svg[b-uuvusvogkd] {
    width: 20px;
    height: 20px;
    color: var(--theme-accent, #6366f1);
}

.helpdesk-record-btn:hover[b-uuvusvogkd] {
    border-color: var(--theme-accent, #6366f1);
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.08);
    transform: translateY(-1px);
}

.helpdesk-recording-hint[b-uuvusvogkd] {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--theme-text-tertiary, #94a3b8);
}

/* HD-V-2 (2026-05-01): Auto-context Diagnostics block. Visually quieter than
   the primary form fields so it reads as supplementary metadata rather than
   a required input. The user can collapse it, edit the contents, or clear it
   entirely before submit. */
.helpdesk-diagnostics-header[b-uuvusvogkd] {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.helpdesk-diagnostics-toggle[b-uuvusvogkd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.85rem;
    font-weight: 600;
}

.helpdesk-diagnostics-toggle:focus-visible[b-uuvusvogkd] {
    outline: 2px solid var(--theme-focus-ring, var(--theme-accent, #6366f1));
    outline-offset: 2px;
    border-radius: 4px;
}

.helpdesk-diagnostics-chevron[b-uuvusvogkd] {
    width: 16px;
    height: 16px;
    transition: transform 0.18s ease;
}

.helpdesk-diagnostics-chevron.open[b-uuvusvogkd] {
    transform: rotate(0deg);
}

.helpdesk-diagnostics-chevron:not(.open)[b-uuvusvogkd] {
    transform: rotate(-90deg);
}

.helpdesk-diagnostics-hint[b-uuvusvogkd] {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--theme-text-tertiary, #94a3b8);
}

.helpdesk-diagnostics-textarea[b-uuvusvogkd] {
    min-height: 92px;
    font-family: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--theme-text-secondary, #475569);
    background: var(--theme-surface-soft, rgba(148, 163, 184, 0.06));
}

.helpdesk-diagnostics-textarea[readonly][b-uuvusvogkd] {
    cursor: default;
}

.helpdesk-recording-preview[b-uuvusvogkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.helpdesk-recording-badge[b-uuvusvogkd] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #16a34a;
}

.helpdesk-recording-badge svg[b-uuvusvogkd] {
    width: 20px;
    height: 20px;
}

.helpdesk-recording-size[b-uuvusvogkd] {
    font-weight: 400;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
}

.helpdesk-recording-discard[b-uuvusvogkd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.helpdesk-recording-discard svg[b-uuvusvogkd] {
    width: 14px;
    height: 14px;
}

.helpdesk-recording-discard:hover[b-uuvusvogkd] {
    background: rgba(239, 68, 68, 0.2);
}

.helpdesk-recording-active[b-uuvusvogkd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    font-size: 0.9rem;
    font-weight: 600;
    color: #ef4444;
}

.helpdesk-recording-pulse[b-uuvusvogkd] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ef4444;
    animation: helpdesk-pulse-b-uuvusvogkd 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes helpdesk-pulse-b-uuvusvogkd {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.helpdesk-recording-countdown[b-uuvusvogkd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 28px 24px 20px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 2px solid rgba(239, 68, 68, 0.4);
    color: var(--theme-text-primary, #1e293b);
}

.helpdesk-countdown-number[b-uuvusvogkd] {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: #ef4444;
    text-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    animation: helpdesk-countdown-pulse-b-uuvusvogkd 1s ease-in-out infinite;
}

.helpdesk-countdown-label[b-uuvusvogkd] {
    font-size: 1rem;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 8px;
}

@keyframes helpdesk-countdown-pulse-b-uuvusvogkd {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}

.helpdesk-recording-status[b-uuvusvogkd] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--theme-accent-rgb, 99, 102, 241), 0.25);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

.helpdesk-recording-spinner[b-uuvusvogkd] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--theme-accent-rgb, 99, 102, 241), 0.3);
    border-top-color: var(--theme-accent, #6366f1);
    border-radius: 50%;
    animation: helpdesk-spin-b-uuvusvogkd 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes helpdesk-spin-b-uuvusvogkd {
    to { transform: rotate(360deg); }
}

/* ============================================
   SCREEN RECORDING - DARK THEMES
   ============================================ */
.is-dark .helpdesk-record-btn[b-uuvusvogkd] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--theme-border);
    color: var(--theme-text-primary);
}

.is-dark .helpdesk-record-btn:hover[b-uuvusvogkd] {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.12);
}

.is-dark .helpdesk-recording-preview[b-uuvusvogkd] {
    background: var(--theme-bg-success);
    border-color: rgba(34, 197, 94, 0.3);
}

.is-dark .helpdesk-recording-badge[b-uuvusvogkd] {
    color: var(--theme-text-success);
}

.is-dark .helpdesk-recording-size[b-uuvusvogkd] {
    color: var(--theme-text-secondary);
}

.is-dark .helpdesk-recording-active[b-uuvusvogkd] {
    background: var(--theme-bg-danger);
    border-color: rgba(239, 68, 68, 0.3);
}

.is-dark .helpdesk-recording-countdown[b-uuvusvogkd],
.is-dark .helpdesk-recording-status[b-uuvusvogkd] {
    background: rgba(var(--theme-accent-rgb), 0.1);
    border-color: rgba(var(--theme-accent-rgb), 0.25);
    color: var(--theme-text-primary);
}

/* ============================================
   FILE ATTACHMENTS SECTION
   ============================================ */
.helpdesk-upload-btn[b-uuvusvogkd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    border: 2px dashed var(--theme-border, #d1d5db);
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.helpdesk-upload-btn svg[b-uuvusvogkd] {
    width: 18px;
    height: 18px;
    color: var(--theme-accent, #6366f1);
}

.helpdesk-upload-btn:hover[b-uuvusvogkd] {
    border-color: var(--theme-accent, #6366f1);
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.08);
    transform: translateY(-1px);
}

.helpdesk-upload-btn input[type="file"][b-uuvusvogkd] {
    display: none;
}

.helpdesk-attachment-list[b-uuvusvogkd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.helpdesk-attachment-item[b-uuvusvogkd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.helpdesk-attachment-info[b-uuvusvogkd] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.helpdesk-attachment-name[b-uuvusvogkd] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.helpdesk-attachment-size[b-uuvusvogkd] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    flex-shrink: 0;
}

/* ============================================
   FILE ATTACHMENTS - DARK THEMES
   ============================================ */
.is-dark .helpdesk-upload-btn[b-uuvusvogkd] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--theme-border);
}

.is-dark .helpdesk-upload-btn:hover[b-uuvusvogkd] {
    border-color: var(--theme-accent);
    background: rgba(var(--theme-accent-rgb), 0.12);
}

.is-dark .helpdesk-attachment-item[b-uuvusvogkd] {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--theme-border);
}
/* /Pages/ServiceDesk/Roadmap.razor.rz.scp.css */
/* Scoped CSS for Roadmap.razor */

.page-container[b-a0ba9u7kam] {
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s ease, color 0.3s ease;
    background-color: var(--theme-bg-main);
    color: var(--theme-text-primary);
}

/* Header */

.page-title[b-a0ba9u7kam] {
    color: var(--theme-text-primary);
    margin: 0;
}

.page-subtitle[b-a0ba9u7kam] {
    margin: 0.5rem 0 0 calc(32px + 1rem);
    color: var(--theme-text-secondary);
    font-size: 1rem;
}

.icon[b-a0ba9u7kam] {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

/* Controls */
.controls-section[b-a0ba9u7kam] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    align-items: center;
    justify-content: space-between;
    background-color: var(--theme-surface-glass);
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--theme-border);
    backdrop-filter: blur(10px);
}

.search-wrapper[b-a0ba9u7kam] {
    position: relative;
    width: 300px;
}

.search-input[b-a0ba9u7kam] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: 2rem;
    border: 1px solid var(--theme-border);
    background-color: var(--theme-bg-input);
    color: var(--theme-text-primary);
    transition: all 0.2s;
}

.search-input:focus[b-a0ba9u7kam] {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px var(--theme-primary-alpha);
}

.search-icon[b-a0ba9u7kam] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--theme-text-secondary);
}

/* Timeline Layout */
.roadmap-timeline[b-a0ba9u7kam] {
    position: relative;
    padding-left: 2rem;
    margin-top: 1rem;
}

.roadmap-timeline[b-a0ba9u7kam]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--theme-border);
    border-radius: 2px;
}

.timeline-group[b-a0ba9u7kam] {
    margin-bottom: 3rem;
    position: relative;
}

.group-marker[b-a0ba9u7kam] {
    position: absolute;
    left: -2.5rem;
    top: 0;
    width: 1rem;
    height: 1rem;
    background: var(--theme-primary);
    border: 3px solid var(--theme-bg-main);
    border-radius: 50%;
    z-index: 1;
}

.group-title[b-a0ba9u7kam] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary));
    margin-bottom: 1.5rem;
    margin-left: 0.5rem;
}

.items-grid[b-a0ba9u7kam] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

/* Roadmap Item Card */
.roadmap-card[b-a0ba9u7kam] {
    background-color: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    border-left: 4px solid var(--theme-primary);
}

.roadmap-card:hover[b-a0ba9u7kam] {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-header[b-a0ba9u7kam] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.card-title[b-a0ba9u7kam] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary);
    line-height: 1.4;
}

.card-description[b-a0ba9u7kam] {
    color: var(--theme-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.priority-badge[b-a0ba9u7kam] {
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    margin-left: 0.75rem;
}

.priority-critical[b-a0ba9u7kam] { background-color: rgba(239, 68, 68, 0.2); color: #ef4444; }
.priority-high[b-a0ba9u7kam] { background-color: rgba(249, 115, 22, 0.2); color: #f97316; }
.priority-medium[b-a0ba9u7kam] { background-color: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.priority-low[b-a0ba9u7kam] { background-color: rgba(16, 185, 129, 0.2); color: #10b981; }

.status-badge[b-a0ba9u7kam] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
}

.card-footer[b-a0ba9u7kam] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid var(--theme-border-light);
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

.date-info[b-a0ba9u7kam] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .controls-section[b-a0ba9u7kam] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .search-wrapper[b-a0ba9u7kam] {
        width: 100%;
    }

    .items-grid[b-a0ba9u7kam] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .page-subtitle[b-a0ba9u7kam] {
        font-size: 0.85rem;
        margin-left: 0;
        margin-top: 0.25rem;
    }

    .controls-section[b-a0ba9u7kam] {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
        gap: 0.5rem;
    }

    .roadmap-timeline[b-a0ba9u7kam] {
        padding-left: 1.25rem;
    }

    .group-marker[b-a0ba9u7kam] {
        left: -1.75rem;
    }

    .group-title[b-a0ba9u7kam] {
        font-size: 1.05rem;
        margin-bottom: 1rem;
    }

    .timeline-group[b-a0ba9u7kam] {
        margin-bottom: 2rem;
    }

    .roadmap-card[b-a0ba9u7kam] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .card-title[b-a0ba9u7kam] {
        font-size: 0.95rem;
    }

    .card-description[b-a0ba9u7kam] {
        font-size: 0.85rem;
    }

    .card-footer[b-a0ba9u7kam] {
        padding-top: 0.75rem;
        font-size: 0.78rem;
    }
}

/* Empty State */
.empty-state[b-a0ba9u7kam] {
    text-align: center;
    padding: 4rem;
    color: var(--theme-text-secondary);
}

.empty-icon[b-a0ba9u7kam] {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Loading */
.loading-spinner[b-a0ba9u7kam] {
    display: flex;
    justify-content: center;
    padding: 4rem;
}

.spinner[b-a0ba9u7kam] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--theme-bg-secondary);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-a0ba9u7kam 1s linear infinite;
}

@keyframes spin-b-a0ba9u7kam { to { transform: rotate(360deg); } }
/* /Pages/ServiceDesk/ServiceDesk.razor.rz.scp.css */
/* ============================================
   SERVICE DESK PAGE - SCOPED STYLES
   ============================================ */

/* --- Performance Stats Row --- */
.sd-perf-stats[b-c0kjhyprnv] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.sd-perf-card[b-c0kjhyprnv] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: var(--theme-surface, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    min-width: 140px;
}

.sd-perf-label[b-c0kjhyprnv] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--theme-text-muted, #94a3b8);
}

.sd-perf-value[b-c0kjhyprnv] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

/* HDSD-D-1 (2026-05-01): Tracks --theme-success so the fast-resolution
   highlight reads correctly across all 8 themes. Previously hardcoded
   #16a34a, which paints the same green regardless of theme palette. */
.sd-perf-fast[b-c0kjhyprnv] {
    color: var(--theme-success, #16a34a);
}

/* --- Lifecycle Badge (inline in ticket row meta) --- */
.sd-lifecycle[b-c0kjhyprnv] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    white-space: nowrap;
}

.sd-lifecycle--fast[b-c0kjhyprnv] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.sd-lifecycle--medium[b-c0kjhyprnv] {
    background: #fef9c3;
    color: #a16207;
    border: 1px solid #fde68a;
}

.sd-lifecycle--slow[b-c0kjhyprnv] {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.sd-lifecycle--active[b-c0kjhyprnv] {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.sd-lifecycle--age[b-c0kjhyprnv] {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* --- Mark In Progress Action Button --- */
.action-btn-progress[b-c0kjhyprnv] {
    color: #1d4ed8 !important;
}

.action-btn-progress:hover[b-c0kjhyprnv] {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

/* --- Dark Theme Overrides --- */
.is-dark .sd-perf-card[b-c0kjhyprnv] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .sd-perf-value[b-c0kjhyprnv] {
    color: #f1f5f9;
}

.is-dark .sd-lifecycle--fast[b-c0kjhyprnv] {
    background: rgba(21, 128, 61, 0.2);
    color: #86efac;
    border-color: rgba(134, 239, 172, 0.3);
}

.is-dark .sd-lifecycle--medium[b-c0kjhyprnv] {
    background: rgba(161, 98, 7, 0.2);
    color: #fde68a;
    border-color: rgba(253, 230, 138, 0.3);
}

.is-dark .sd-lifecycle--slow[b-c0kjhyprnv] {
    background: rgba(185, 28, 28, 0.2);
    color: #fca5a5;
    border-color: rgba(252, 165, 165, 0.3);
}

.is-dark .sd-lifecycle--active[b-c0kjhyprnv] {
    background: rgba(29, 78, 216, 0.2);
    color: #93c5fd;
    border-color: rgba(147, 197, 253, 0.3);
}

.is-dark .sd-lifecycle--age[b-c0kjhyprnv] {
    background: rgba(100, 116, 139, 0.15);
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.2);
}

/* SD-V-1 (2026-05-01): Success-tinted icon for the inbox-zero empty state.
   Wraps the existing list-page-empty-icon — the rule only fires on the
   inbox-zero branch, so the regular "no tickets" and "no matches" states
   keep their default presentation. Theme-token driven via --theme-success
   so all 8 themes (light + dark) light up correctly. */
.list-page-empty-icon.sd-empty-icon-success[b-c0kjhyprnv] {
    background: color-mix(in srgb, var(--theme-success, #10b981) 15%, transparent);
    color: var(--theme-success, #10b981);
}

.list-page-empty-icon.sd-empty-icon-success svg[b-c0kjhyprnv] {
    color: var(--theme-success, #10b981);
}
/* /Pages/ServiceDesk/TicketDetail.razor.rz.scp.css */
/* ============================================
   TICKET DETAIL PAGE STYLES
   Dedicated view for help desk tickets
   ============================================ */

/* Container */
.ticket-detail-container[b-6kg9z5j5ak] {
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Loading & Empty States */
.detail-loading[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 16px;
    color: var(--theme-text-secondary);
}

.detail-empty[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 12px;
    text-align: center;
    color: var(--theme-text-secondary);
}

.detail-empty h2[b-6kg9z5j5ak] {
    color: var(--theme-text-primary);
    margin: 0;
}

.detail-empty p[b-6kg9z5j5ak] {
    margin: 0;
    max-width: 400px;
}

/* ============================================
   HEADER
   ============================================ */

.ticket-header[b-6kg9z5j5ak] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.header-left[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.back-link[b-6kg9z5j5ak] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--theme-text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.back-link:hover[b-6kg9z5j5ak] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.back-link svg[b-6kg9z5j5ak] {
    width: 18px;
    height: 18px;
}

.header-title-row[b-6kg9z5j5ak] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ticket-number-badge[b-6kg9z5j5ak] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    background: var(--theme-primary);
    color: white;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.ticket-title[b-6kg9z5j5ak] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
    line-height: 1.3;
}

.header-actions[b-6kg9z5j5ak] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Status Badge */
.status-badge[b-6kg9z5j5ak] {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.status-open[b-6kg9z5j5ak] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.status-inprogress[b-6kg9z5j5ak] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.status-complete[b-6kg9z5j5ak] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.status-onhold[b-6kg9z5j5ak] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}

.status-cancelled[b-6kg9z5j5ak] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ============================================
   BADGE ROW
   ============================================ */

.ticket-badge-row[b-6kg9z5j5ak] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================
   GRID LAYOUT
   ============================================ */

.ticket-grid[b-6kg9z5j5ak] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
}

.ticket-main[b-6kg9z5j5ak] {
    min-width: 0;
}

.ticket-sidebar[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ============================================
   CARDS
   ============================================ */

.card[b-6kg9z5j5ak] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    margin-bottom: 1rem;
}

.card-title[b-6kg9z5j5ak] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 16px 0;
}

.card-title svg[b-6kg9z5j5ak] {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.divider[b-6kg9z5j5ak] {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: 0 0 20px 0;
}

/* ============================================
   DESCRIPTION
   ============================================ */

.ticket-description[b-6kg9z5j5ak] {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--theme-text-primary);
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.ticket-description.muted[b-6kg9z5j5ak] {
    color: var(--theme-text-secondary);
    font-style: italic;
}

/* ============================================
   RECORDINGS
   ============================================ */

.recording-row[b-6kg9z5j5ak] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.recording-row + .recording-row[b-6kg9z5j5ak] {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.detail-link[b-6kg9z5j5ak] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.detail-link:hover[b-6kg9z5j5ak] {
    opacity: 0.8;
    text-decoration: underline;
}

/* ============================================
   TICKET INFORMATION SIDEBAR
   ============================================ */

.info-list[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-item[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label[b-6kg9z5j5ak] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary);
}

.info-value[b-6kg9z5j5ak] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--theme-text-primary);
    font-weight: 500;
}

.info-value.success[b-6kg9z5j5ak] {
    color: #10b981;
}

/* ============================================
   SUMMARY STATS
   ============================================ */

.stats-list[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stat-card[b-6kg9z5j5ak] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--stat-color, #7c3aed) 8%, transparent);
    border-left: 3px solid var(--stat-color, #7c3aed);
}

.stat-label[b-6kg9z5j5ak] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
}

.stat-value[b-6kg9z5j5ak] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text-primary);
}

.stat-value.small[b-6kg9z5j5ak] {
    font-size: 0.9rem;
}

/* ============================================
   QUICK ACTIONS
   ============================================ */

.ticket-actions-list[b-6kg9z5j5ak] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-btn[b-6kg9z5j5ak] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid;
    font-family: inherit;
    background: transparent;
}

.action-btn svg[b-6kg9z5j5ak] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-outline-primary[b-6kg9z5j5ak] {
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    border-color: var(--theme-primary, #7c3aed);
}

.btn-outline-primary:hover[b-6kg9z5j5ak] {
    background: rgba(124, 58, 237, 0.08);
}

.btn-outline-warning[b-6kg9z5j5ak] {
    color: #f59e0b;
    border-color: #f59e0b;
}

.btn-outline-warning:hover[b-6kg9z5j5ak] {
    background: rgba(245, 158, 11, 0.08);
}

.btn-outline-info[b-6kg9z5j5ak] {
    color: #3b82f6;
    border-color: #3b82f6;
}

.btn-outline-info:hover[b-6kg9z5j5ak] {
    background: rgba(59, 130, 246, 0.08);
}

.btn-outline-success[b-6kg9z5j5ak] {
    color: #10b981;
    border-color: #10b981;
}

.btn-outline-success:hover[b-6kg9z5j5ak] {
    background: rgba(16, 185, 129, 0.08);
}

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

.desktop-only[b-6kg9z5j5ak] {
    display: block;
}

@media (max-width: 960px) {
    .ticket-grid[b-6kg9z5j5ak] {
        grid-template-columns: 1fr;
    }

    .desktop-only[b-6kg9z5j5ak] {
        display: none;
    }

    .ticket-title[b-6kg9z5j5ak] {
        font-size: 1.25rem;
    }

    .ticket-header[b-6kg9z5j5ak] {
        flex-direction: column;
    }
}

/* HD-V-3 (2026-05-01): Resolution card. Visually distinguished with a soft
   success-tinted border so the submitter immediately sees the closure when
   they open a resolved ticket. The accent stays subtle — celebratory, not
   neon — because plenty of resolutions carry friction (workarounds,
   "won't fix") and the card should respect that. */
.resolution-card[b-6kg9z5j5ak] {
    border-color: color-mix(in srgb, var(--theme-success, #10b981) 35%, var(--theme-border, rgba(0, 0, 0, 0.08)));
    background: color-mix(in srgb, var(--theme-success, #10b981) 6%, var(--theme-surface, #ffffff));
}

.resolution-meta[b-6kg9z5j5ak] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.resolution-meta-label[b-6kg9z5j5ak] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-tertiary, #94a3b8);
}

.resolution-meta-value[b-6kg9z5j5ak] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}

.resolution-note[b-6kg9z5j5ak] {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--theme-text-primary, #0f172a);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.resolution-note.muted[b-6kg9z5j5ak] {
    color: var(--theme-text-tertiary, #94a3b8);
    font-style: italic;
}

.resolution-author[b-6kg9z5j5ak] {
    display: block;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #475569);
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */

.is-dark .card[b-6kg9z5j5ak] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(12px);
    box-shadow: none;
}

.is-dark .resolution-card[b-6kg9z5j5ak] {
    background: color-mix(in srgb, var(--theme-success, #10b981) 10%, rgba(30, 41, 59, 0.6));
    border-color: color-mix(in srgb, var(--theme-success, #10b981) 35%, rgba(148, 163, 184, 0.2));
}

.is-dark .resolution-meta-value[b-6kg9z5j5ak],
.is-dark .resolution-note[b-6kg9z5j5ak] {
    color: #f1f5f9;
}
/* /Pages/Settings/Settings.razor.rz.scp.css */
.settings-page[b-g936dehd71] {
    padding: 24px;
    background: var(--theme-page-bg, #f8fafc);
    min-height: calc(100vh - 56px);
}

.settings-container[b-g936dehd71] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

/* Header */
.page-header[b-g936dehd71] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #4c1d95 100%);
    padding: 32px 40px;
    border-radius: 20px;
    margin-bottom: 24px;
    color: white;
}

.theme-space .page-header[b-g936dehd71] {
    background: linear-gradient(135deg, #0f0a1e 0%, #2d1b69 50%, #4c1d95 100%);
}

.theme-winter .page-header[b-g936dehd71],
.theme-ocean .page-header[b-g936dehd71] {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0284c7 100%);
}

.theme-nature .page-header[b-g936dehd71] {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, #22c55e 100%);
}

.header-content[b-g936dehd71] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-icon[b-g936dehd71] {
    width: 48px;
    height: 48px;
    fill: currentColor;
}

.page-header h1[b-g936dehd71] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.page-header .subtitle[b-g936dehd71] {
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 4px 0 0;
}

/* Loading bar */
.loading-bar[b-g936dehd71] {
    height: 4px;
    background: linear-gradient(90deg, var(--theme-accent, #6366f1) 0%, transparent 50%, var(--theme-accent, #6366f1) 100%);
    background-size: 200% 100%;
    animation: loading-b-g936dehd71 1.5s ease-in-out infinite;
    border-radius: 2px;
    margin-bottom: 24px;
}

@keyframes loading-b-g936dehd71 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Grid */
.settings-grid[b-g936dehd71] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .settings-grid[b-g936dehd71] {
        grid-template-columns: 1fr;
    }
}

/* Cards */
.settings-card[b-g936dehd71] {
    background: var(--theme-surface, white);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
}

.settings-card.full-width[b-g936dehd71] {
    grid-column: 1 / -1;
}

.card-header[b-g936dehd71] {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-title[b-g936dehd71] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.header-title svg[b-g936dehd71] {
    width: 24px;
    height: 24px;
    fill: var(--theme-accent, #6366f1);
}

.divider[b-g936dehd71] {
    border: none;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    margin: 0;
}

.card-content[b-g936dehd71] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form groups */
.form-group[b-g936dehd71] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-g936dehd71] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.form-group input[b-g936dehd71],
.form-group select[b-g936dehd71] {
    padding: 12px 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    font-size: 0.95rem;
    background: var(--theme-input-bg, white);
    color: var(--theme-text-primary, #1e293b);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus[b-g936dehd71],
.form-group select:focus[b-g936dehd71] {
    outline: none;
    border-color: var(--theme-accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.helper-text[b-g936dehd71] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Color input */
.color-input-wrapper[b-g936dehd71] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.color-input-wrapper input[type="color"][b-g936dehd71] {
    width: 50px;
    height: 42px;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
}

.color-input-wrapper .color-text[b-g936dehd71] {
    flex: 1;
}

/* Toggle switch */
.toggle-switch[b-g936dehd71] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 0;
}

.toggle-switch input[b-g936dehd71] {
    display: none;
}

.toggle-slider[b-g936dehd71] {
    width: 44px;
    height: 24px;
    background: #cbd5e1;
    border-radius: 12px;
    position: relative;
    transition: background 0.3s;
}

.toggle-slider[b-g936dehd71]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider[b-g936dehd71] {
    background: var(--theme-accent, #6366f1);
}

.toggle-switch input:checked + .toggle-slider[b-g936dehd71]::after {
    transform: translateX(20px);
}

.toggle-switch.danger input:checked + .toggle-slider[b-g936dehd71] {
    background: #ef4444;
}

.toggle-label[b-g936dehd71] {
    font-size: 0.95rem;
    color: var(--theme-text-primary, #1e293b);
}

.toggles-list[b-g936dehd71] {
    gap: 12px;
}

/* Status chips */
.status-chip[b-g936dehd71] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-chip.success[b-g936dehd71] {
    background: #dcfce7;
    color: #166534;
}

.status-chip.warning[b-g936dehd71] {
    background: #fef3c7;
    color: #92400e;
}

.status-chip.error[b-g936dehd71] {
    background: #fee2e2;
    color: #991b1b;
}

.status-chip.info[b-g936dehd71] {
    background: #dbeafe;
    color: #1e40af;
}

/* Alerts */
.alert[b-g936dehd71] {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.alert-success[b-g936dehd71] {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-warning[b-g936dehd71] {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info[b-g936dehd71] {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Provider list */
.provider-list[b-g936dehd71] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.provider-item[b-g936dehd71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 10px;
}

.provider-info[b-g936dehd71] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.provider-info svg[b-g936dehd71] {
    width: 20px;
    height: 20px;
    fill: var(--theme-text-secondary, #64748b);
}

/* Info grid */
.info-grid[b-g936dehd71] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

@media (max-width: 768px) {
    .info-grid[b-g936dehd71] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-item[b-g936dehd71] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-label[b-g936dehd71] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-g936dehd71] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

/* Actions bar */
.actions-bar[b-g936dehd71] {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding: 20px 0;
}

/* Spinner */
.spinner-small[b-g936dehd71] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-g936dehd71 0.8s linear infinite;
}

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

/* Theme adjustments for dark themes */
.theme-space .settings-card[b-g936dehd71],
.theme-winter .settings-card[b-g936dehd71],
.theme-nature .settings-card[b-g936dehd71],
.theme-ocean .settings-card[b-g936dehd71] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .header-title[b-g936dehd71],
.theme-winter .header-title[b-g936dehd71],
.theme-nature .header-title[b-g936dehd71],
.theme-ocean .header-title[b-g936dehd71],
.theme-space .toggle-label[b-g936dehd71],
.theme-winter .toggle-label[b-g936dehd71],
.theme-nature .toggle-label[b-g936dehd71],
.theme-ocean .toggle-label[b-g936dehd71],
.theme-space .info-value[b-g936dehd71],
.theme-winter .info-value[b-g936dehd71],
.theme-nature .info-value[b-g936dehd71],
.theme-ocean .info-value[b-g936dehd71] {
    color: rgba(255, 255, 255, 0.95);
}

.theme-space .form-group label[b-g936dehd71],
.theme-winter .form-group label[b-g936dehd71],
.theme-nature .form-group label[b-g936dehd71],
.theme-ocean .form-group label[b-g936dehd71],
.theme-space .info-label[b-g936dehd71],
.theme-winter .info-label[b-g936dehd71],
.theme-nature .info-label[b-g936dehd71],
.theme-ocean .info-label[b-g936dehd71] {
    color: rgba(255, 255, 255, 0.7);
}

.theme-space .form-group input[b-g936dehd71],
.theme-winter .form-group input[b-g936dehd71],
.theme-nature .form-group input[b-g936dehd71],
.theme-ocean .form-group input[b-g936dehd71],
.theme-space .form-group select[b-g936dehd71],
.theme-winter .form-group select[b-g936dehd71],
.theme-nature .form-group select[b-g936dehd71],
.theme-ocean .form-group select[b-g936dehd71] {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
}

.theme-space .provider-item[b-g936dehd71],
.theme-winter .provider-item[b-g936dehd71],
.theme-nature .provider-item[b-g936dehd71],
.theme-ocean .provider-item[b-g936dehd71] {
    background: rgba(0, 0, 0, 0.2);
}

.theme-space .divider[b-g936dehd71],
.theme-winter .divider[b-g936dehd71],
.theme-nature .divider[b-g936dehd71],
.theme-ocean .divider[b-g936dehd71] {
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .btn-outlined[b-g936dehd71],
.theme-winter .btn-outlined[b-g936dehd71],
.theme-nature .btn-outlined[b-g936dehd71],
.theme-ocean .btn-outlined[b-g936dehd71] {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

.theme-space .btn-outlined:hover[b-g936dehd71],
.theme-winter .btn-outlined:hover[b-g936dehd71],
.theme-nature .btn-outlined:hover[b-g936dehd71],
.theme-ocean .btn-outlined:hover[b-g936dehd71] {
    background: rgba(255, 255, 255, 0.1);
}
/* /Pages/Shared/Assistant.razor.rz.scp.css */
/* ============================================
   Chat.razor.css - Floating AI Chat Component
   Scoped CSS following THEMING_INITIATIVE.md
   ============================================ */

/* Floating Chat Button */
/* FAB-HERO-1: while a page's hero mark is on screen, the FAB steps aside (two of him is the
   AIC-V-4 redundancy). html.fab-hero-in-view is written by js/fabHeroGate.js. Scoping lands on
   the LAST compound (.floating-chat-button, this component's own element); the html class is
   an unscoped ancestor - same shape as `html:not(.is-dark) .pro-peek-mark--halo` below. */
html.fab-hero-in-view .floating-chat-button[b-vdeg5zn4rh] {
    opacity: 0;
    pointer-events: none;
    scale: 0.85;   /* the independent property: `transform` belongs to AUDIO-WATCH / drag */
}

.floating-chat-button[b-vdeg5zn4rh] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    /* FAB-TOUCH-1 (2026-10-21): a touch that starts on the mark belongs to the mark (tap opens,
       drag moves). Without this iOS reads a finger-drag as a page scroll and fires pointercancel
       mid-gesture - fabDrag.js now survives that, but the drag itself only works with it. */
    touch-action: none;
    -webkit-touch-callout: none;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.6s ease,
                top 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                bottom 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.28s ease,                                   /* FAB-HERO-1 */
                scale 0.28s cubic-bezier(0.22, 1, 0.36, 1);           /* FAB-HERO-1 */
}

/* AUDIO-WATCH (2026-05-18): while an audio briefing is playing on the detail view,
   the companion peek slides up from its bottom-right resting position to viewport
   vertical center — where the highlighted topic block is centered after scroll.
   Reads as "Atlas is watching what he's reading to you" rather than the static
   corner-peek of normal browsing. A gentle 4s bob keeps the avatar visibly alive
   so it doesn't feel frozen mid-page. The class is added/removed by the eval in
   ViewDailyBriefing.OnSegmentStart / OnPlaybackEnd — nothing in Assistant.razor
   needs to know about it. Restores cleanly on stop because we only override the
   bottom property (the transition already smooths it back). */
/* AUDIO-CENTER (2026-05-19): companion peek docks BOTTOM-CENTER during audio playback.
   AUDIO-CENTER-2.3 (2026-05-19): Option B layout — caption strip pinned at bottom edge,
   companion floats ABOVE it. translateY(-110px) lifts the scaled FAB up so its bottom
   edge sits above the 80px-tall caption strip with a small gap.

   Transform composition (applied bottom-up due to right-to-left transform reading):
     1. scale(1.5)                          — grow the FAB to its larger reading size
     2. translateY(-110px)                  — lift above the caption strip
     3. translateX(calc(-50vw + 52px))      — slide horizontally to viewport center

   transform-origin: bottom center makes scale grow upward from the base bottom anchor,
   so translateY is calculated against the unscaled position consistently. */
/* PRO-LISTEN-FAB-1 (2026-07-14) — REVERSED by LISTEN-STAGE-1 (2026-08-18, Josh).
   The July rule kept center stage COMPANION-ONLY: scaling the then-STATIC robot glyph
   1.5× to viewport center produced "a looming robot head over the content" (Josh,
   8:47 PM QA) — chat-buddy theater in the mode that promised none. Both premises are
   gone. (1) The robot is no longer a dead glyph: it breathes, blinks, glances
   (ROBOT-LIFE-1), its mouth talks from real amplitude, and its eyes track the caption
   word-by-word (ROBOT-LIFE-2) — center stage now reads as ATTENTION, not a sticker.
   (2) In July these wrap classes meant MODE; after AVATAR-SPLIT-1 they mean AVATAR,
   so keeping the old scoping didn't protect Professional mode — it punished anyone
   who CHOSE the robot body. Both avatars now take the same stage while reading.
   ListenCard still toggles .is-tracking-listen unconditionally, unchanged. */
.floating-chat-button.companion-fab-wrap.is-tracking-listen[b-vdeg5zn4rh],
.floating-chat-button.professional-fab-wrap.is-tracking-listen[b-vdeg5zn4rh] {
    /* AUDIO-CENTER-3.0 (2026-05-19): caption is now a JS-managed bottom bar in
       document.body at the viewport bottom. Companion floats just above it.
       AUDIO-CENTER-3.3 (2026-06-10): the lift used to be a fixed -130px,
       calibrated for an ~80-120px bar — long multi-line captions grow the bar
       past that and the companion sat on top of the text. audioBriefing.js now
       publishes the measured bar height as --nts-caption-height on <html> each
       time the caption changes; the 20px addend is the visual gap. The 110px
       fallback preserves the original resting lift when no bar is shown
       (caption dismissed / pre-first-segment). */
    transform: translateX(calc(-50vw + 52px))
               translateY(calc(-1 * (var(--nts-caption-height, 110px) + 20px)))
               scale(1.5);
    transform-origin: bottom center;
}

/* LISTEN-STAGE-1: the watch-bob rides the .chat-fab CHILD on both wraps. On the robot
   it composes with ProBot's own breathe (different elements, different transforms) —
   the slight double-rhythm is the same layered-clocks trick as the idle life. */
.floating-chat-button.companion-fab-wrap.is-tracking-listen .chat-fab[b-vdeg5zn4rh],
.floating-chat-button.professional-fab-wrap.is-tracking-listen .chat-fab[b-vdeg5zn4rh] {
    animation: companion-watch-bob-b-vdeg5zn4rh 4s ease-in-out infinite;
}

@keyframes companion-watch-bob-b-vdeg5zn4rh {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Companion slides up to deliver reward — clears toasts, creates a memorable moment */
/* NOTE: scale is on the CHILD (.chat-fab) via animation, NOT here — CSS transforms
   on child animations override parent transforms, so keeping scale here causes the
   companion to snap back to 1x when the child animation ends. */
/* translateX: calc moves companion from right:24px corner toward horizontal center.
   50vw = half viewport, minus 24px (right offset) minus ~28px (half FAB width). */
.floating-chat-button.celebrating[b-vdeg5zn4rh] {
    transform: translateY(-240px) translateX(calc(-50vw + 52px));
    filter: drop-shadow(0 0 32px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.5));
}

/* Graceful exit — parent slides back to corner while keeping structure intact
   so the child FAB can transition its scale down smoothly. */
.floating-chat-button.celebration-exiting[b-vdeg5zn4rh] {
    transform: translateY(0) translateX(0);
    filter: none;
}

/* CHAT-FABMOVE-1 (2026-07-23): drag-to-move support.
   While dragging, kill the wrapper transition (it animates top/bottom over 0.8s
   and would make the drag lag). And when the FAB has been repositioned away from
   its bottom-right anchor, neutralize the center-slide/lift transforms — their
   translateX(calc(-50vw + 52px)) math assumes right:24px and would fling a moved
   FAB off-screen. Child .chat-fab scale animations still fire, so Listen and
   celebration keep visible feedback in place. Drag/persist logic: js/fabDrag.js. */
.floating-chat-button.fab-dragging[b-vdeg5zn4rh] {
    transition: none !important;
    cursor: grabbing;
}

.floating-chat-button.fab-repositioned.is-tracking-listen[b-vdeg5zn4rh],
.floating-chat-button.fab-repositioned.celebrating[b-vdeg5zn4rh],
.floating-chat-button.fab-repositioned.celebration-exiting[b-vdeg5zn4rh] {
    transform: none !important;
}

/* FAB-PEEK-1 (2026-10-18): the hover peek. A small card that rises out of the closed mark on
   hover / keyboard focus, anchored to the wrapper so it rides with a dragged FAB. At the default
   corner it hangs to the LEFT of the mark (right-aligned); parked at bottom-centre
   (fab-at-centre, fabDrag.js) it centres above it. Pointer-events off: it never steals the
   click that opens the chat. Hover-only media so touch never shows a card it can't dismiss. */
.fab-peek[b-vdeg5zn4rh] {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: max-content;
    max-width: min(320px, calc(100vw - 32px));
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #0f172a);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.16s ease, transform 0.16s ease;
    z-index: 1202;
}

.floating-chat-button.fab-at-left .fab-peek[b-vdeg5zn4rh] {
    right: auto;
    left: 0;
    transform-origin: bottom left;
}

.floating-chat-button.fab-at-centre .fab-peek[b-vdeg5zn4rh] {
    right: 50%;
    transform: translate(50%, 6px) scale(0.98);
    transform-origin: bottom center;
}

/* FAB-PEEK-2 (2026-10-18, Josh: "not sure the tip should show after I closed the fab, then I
   have to hover over it to remove the tooltip"). This used :focus-within for the keyboard
   case. Closing the panel returns focus to the FAB (correct for keyboard users), which
   matched :focus-within and pinned the card open after a MOUSE close until something else
   took focus. :has(:focus-visible) keeps the keyboard affordance and drops the mouse case:
   the browser only sets :focus-visible when focus arrived by keyboard, not when it was
   handed back programmatically after a click. */
@media (hover: hover) {
    .floating-chat-button:not(.fab-dragging):hover .fab-peek[b-vdeg5zn4rh],
    .floating-chat-button:not(.fab-dragging):has(:focus-visible) .fab-peek[b-vdeg5zn4rh] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .floating-chat-button.fab-at-centre:not(.fab-dragging):hover .fab-peek[b-vdeg5zn4rh],
    .floating-chat-button.fab-at-centre:not(.fab-dragging):has(:focus-visible) .fab-peek[b-vdeg5zn4rh] {
        transform: translate(50%, 0) scale(1);
    }
}

.fab-peek-label[b-vdeg5zn4rh] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.fab-peek-title[b-vdeg5zn4rh] {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
}

.fab-peek-reason[b-vdeg5zn4rh] {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--theme-text-secondary, #64748b);
}

.is-dark .fab-peek[b-vdeg5zn4rh] {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}

.is-dark .fab-peek-reason[b-vdeg5zn4rh] {
    color: rgba(241, 245, 249, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .fab-peek[b-vdeg5zn4rh] { transition: none; }
}

/* FAB-SNAP-1 (2026-10-18): bottom-centre magnet. The snap itself eases left/top for 240ms (the
   wrapper's own 0.8s transition is killed during the drag and restored on release, so the snap
   gets its own short one). */
.floating-chat-button.fab-snapping[b-vdeg5zn4rh] {
    transition: left 0.24s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Radial spotlight — glowing aura behind the companion during celebration */
.celebration-backdrop[b-vdeg5zn4rh] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 220px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25) 0%,
        rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12) 40%,
        rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04) 65%,
        transparent 80%
    );
    animation: spotlightPulse-b-vdeg5zn4rh 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes spotlightPulse-b-vdeg5zn4rh {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* Backdrop fade-out when celebration ends */
.celebration-backdrop.fading-out[b-vdeg5zn4rh] {
    animation: backdropFadeOut-b-vdeg5zn4rh 0.5s ease-out forwards;
}

@keyframes backdropFadeOut-b-vdeg5zn4rh {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

.chat-fab[b-vdeg5zn4rh] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--theme-cta-gradient);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px var(--theme-shadow-color);
    transition: all 0.3s ease;
    position: relative;
}

.chat-fab.has-conversation[b-vdeg5zn4rh] {
    /* AI-D-1 (2026-05): conversation halo flows through theme primary instead
       of hardcoded purple — keeps the affordance theme-coherent. */
    box-shadow: 0 4px 20px var(--theme-shadow-color), 0 0 0 3px rgba(var(--theme-primary-rgb, 168, 85, 247), 0.3);
}

/* FAB-DOT-1 (2026-07-02): .conversation-indicator (green dot, AI-D-2 styling,
   AI-D-8 gating) + its pulse-indicator keyframes REMOVED — decorative
   live-thread dot, not a notification surface; looked like noise on the
   companion. The .has-conversation halo above remains the engaged affordance. */

.chat-fab:hover[b-vdeg5zn4rh] {
    transform: scale(1.1);
    /* AI-D-1 (2026-05): hover glow flows through theme primary RGB so each
       theme gets its own appropriate accent color. */
    box-shadow: 0 6px 28px rgba(var(--theme-primary-rgb, 124, 58, 237), 0.5);
}

.chat-fab:active[b-vdeg5zn4rh] {
    transform: scale(0.95);
}

/* Subtle breathing glow on non-companion FAB — draws attention without being distracting */
.chat-fab:not(.companion-mode):not(.robot-mode):not(.celebrating):not(.celebration-return)[b-vdeg5zn4rh] {
    animation: fabBreathe-b-vdeg5zn4rh 4s ease-in-out infinite;
}

@keyframes fabBreathe-b-vdeg5zn4rh {
    0%, 100% { box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3); }
    50% { box-shadow: 0 6px 28px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.5), 0 0 0 4px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08); }
}

/* Companion mode FAB - show avatar instead of robot */
.chat-fab.companion-mode[b-vdeg5zn4rh] {
    overflow: visible;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transition: transform 0.25s ease;
}

.chat-fab.companion-mode:hover[b-vdeg5zn4rh] {
    background: transparent;
    box-shadow: none;
    transform: scale(1.2);
}

.chat-fab.companion-mode:active[b-vdeg5zn4rh] {
    transform: scale(0.95);
}

.chat-fab.companion-mode.has-conversation[b-vdeg5zn4rh] {
    box-shadow: none;
}

/* Celebration bounce when companion delivers a reward.
   Bounce lands at scale(1.35) and holds via forwards fill mode so the
   companion stays enlarged for the entire speech-bubble typing duration. */
.chat-fab.celebrating[b-vdeg5zn4rh] {
    animation: companionCelebrate-b-vdeg5zn4rh 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Smooth scale-down when celebration ends — no jarring snap */
.chat-fab.celebration-return[b-vdeg5zn4rh] {
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* CELEBRATE-HALO-1 (2026-09-22): the Halo mark has no body to bounce, so its
   celebration is the ARC - a two-turn compass whirl on the drift group (the JS-owned
   gaze group is untouched, per the Halo component's drift/gaze rule) that lands as the
   bubble starts typing. From there the per-word voice beats (audioBriefing
   pulseCelebrationWord -> --nts-voice-level) carry the arc's glow, the same way a
   read does. ::deep because Halo is a child component behind its own scope attribute. */
.chat-fab.celebrating[b-vdeg5zn4rh]  .nts-halo-drift {
    animation: haloCelebrateWhirl-b-vdeg5zn4rh 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes haloCelebrateWhirl-b-vdeg5zn4rh {
    from { transform: rotate(0deg); }
    to   { transform: rotate(720deg); }
}

/* CELEBRATE-PROBOT-1 (2026-09-23, Josh on prod, 38-day streak bubble: "animation here
   would be nice"). CELEBRATE-HALO-1 put every mark on the ONE talking switch, which for
   ProBot means .pro-bot--reading - and the reading pose parks the eyes at the bottom-left
   "line start" of a Listen caption that a celebration never shows. So the robot bounced
   once, then stared at nothing while its 56px mouth flickered. This is ProBot's own cheer,
   the counterpart of the Halo whirl:
     body    -> small repeating hop + wiggle while the bubble types (the one-shot
                companionCelebrate bounce stays on .chat-fab; this runs on the svg, so
                the two compose instead of fighting)
     eyes    -> look UP at the user (gaze group) and squint happy (the circles)
     antenna -> gold flash x3, the robot's status light saying "yes!"
   🔴 The MOUTH is left alone: pulseCelebrationWord writes it inline per typed word, and a
   CSS animation on it would beat that and mute it (the PRO-MOUTH-1 / #258 trap).
   ::deep because ProBot is a child component behind its own scope attribute, same as
   the Halo rule above. */
.chat-fab.celebrating[b-vdeg5zn4rh]  .pro-bot {
    animation: proBotCheer-b-vdeg5zn4rh 0.62s ease-in-out 0.9s infinite;
    transform-origin: 50% 100%;
}

.chat-fab.celebrating[b-vdeg5zn4rh]  .pro-bot .pro-bot-gaze {
    animation: none;
    transform: translate(0, -9%);
    transition: transform 240ms ease-out;
}

.chat-fab.celebrating[b-vdeg5zn4rh]  .pro-bot .pro-bot-eye {
    animation: proBotHappyEyes-b-vdeg5zn4rh 2.4s ease-in-out infinite;
}

.chat-fab.celebrating[b-vdeg5zn4rh]  .pro-bot .pro-bot-antenna-tip {
    animation: proBotAntennaFlash-b-vdeg5zn4rh 0.5s ease-in-out 3;
}

@keyframes proBotCheer-b-vdeg5zn4rh {
    0%, 100% { transform: translateY(0)     rotate(0deg)  scale(1, 1); }
    18%      { transform: translateY(0)     rotate(0deg)  scale(1.06, 0.92); }  /* crouch */
    45%      { transform: translateY(-12%)  rotate(-4deg) scale(0.97, 1.04); }  /* hop */
    70%      { transform: translateY(-4%)   rotate(3deg)  scale(1, 1); }
    85%      { transform: translateY(0)     rotate(0deg)  scale(1.03, 0.97); }  /* land */
}

/* Happy squint: eyes rest half-closed (the "^ ^" read), with one quick full blink so
   they still look alive rather than painted on. */
@keyframes proBotHappyEyes-b-vdeg5zn4rh {
    0%, 100% { transform: scaleY(0.5); }
    88%      { transform: scaleY(0.5); }
    93%      { transform: scaleY(0.1); }
}

@keyframes proBotAntennaFlash-b-vdeg5zn4rh {
    0%, 100% { transform: scale(1);   fill: currentColor; }
    50%      { transform: scale(1.7); fill: #fbbf24; }
}

@keyframes companionCelebrate-b-vdeg5zn4rh {
    0%   { transform: scale(1)    rotate(0deg);  }
    15%  { transform: scale(1.5)  rotate(-5deg); }
    30%  { transform: scale(1.1)  rotate(3deg);  }
    45%  { transform: scale(1.45) rotate(-2deg); }
    60%  { transform: scale(1.2)  rotate(1deg);  }
    75%  { transform: scale(1.38) rotate(0deg);  }
    100% { transform: scale(1.35) rotate(0deg);  }
}

/* Keyboard focus ring — visible on tab, hidden on click */
.chat-fab.companion-mode:focus-visible[b-vdeg5zn4rh] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 4px;
    border-radius: 50%;
}

.fab-companion-icon[b-vdeg5zn4rh] {
    font-size: 24px;
    line-height: 1;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #818cf8));
    color: white;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Dropdown backdrop — invisible overlay that catches clicks outside the menu */
.dropdown-backdrop[b-vdeg5zn4rh] {
    position: fixed;
    inset: 0;
    z-index: 1199;
    background: transparent;
    cursor: default;
}

/* Floating Chat Dialog */
.floating-chat-dialog[b-vdeg5zn4rh] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1200;
    animation: slideIn-b-vdeg5zn4rh 0.25s ease-out;
}

/* Companion avatar peeking outside the dialog — top-left corner.
   Size/position consume CSS custom properties set by Assistant.razor
   (--peek-size, --peek-top, --peek-left) so the button tracks
   CompanionDisplay.CurrentSize. Fallback values are the 72px default
   used before size-aware sizing was wired up. In practice the default
   CompanionDisplay.CurrentSize is Large (160px), so real-world
   geometry is a 160×160 button at top:-76 left:-62 — its bounding box
   extends ~84px down + ~98px right into the dialog.

   That bounding-box overshoot was the root cause of ticket #669:
   the button's transparent bottom-right corner was capturing clicks
   over the "AI" / "Transmit" / "Tools" tab row, making the tabs
   effectively un-clickable while the dialog was open. The fix is
   to disable pointer events on the button itself and restore them
   only on a circular pseudo-element matching the orb's visible
   footprint. Clicks on the orb still fire the @onclick handler
   (events bubble from the pseudo up to the button element), while
   the transparent corners pass clicks through to the dialog. */
.companion-peek-avatar[b-vdeg5zn4rh] {
    position: absolute;
    top: var(--peek-top, -32px);
    left: var(--peek-left, -18px);
    z-index: 1201;
    width: var(--peek-size, 72px);
    height: var(--peek-size, 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.3s ease;
    animation: companionPeekIn-b-vdeg5zn4rh 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
               companionFloat-b-vdeg5zn4rh 3s ease-in-out 0.5s infinite;
    pointer-events: none;
}

/* Hit-target for the peek avatar — an ellipse in the UPPER portion of
   the button, positioned so it covers the orb's core but stays ABOVE
   the dialog's tab row. Ticket #669 (2026-04): this replaces the
   button's full bounding box as the click region. At Large=160px
   (the default CompanionDisplay size) the hit ellipse ends at ~y=96
   in button coords = ~y=20 in dialog coords — comfortably above the
   tab row (~y=50-80). Accepts a minor UX trade-off: the bottom ~40%
   of the visible orb isn't clickable, but the alternative (a full
   circle over the orb) overlaps the tab row and re-creates the bug.
   Sized in percentages so it scales with CompanionDisplay.CurrentSize. */
.companion-peek-avatar[b-vdeg5zn4rh]::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 18%;
    width: 64%;
    height: 55%;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
}

.companion-peek-avatar:hover[b-vdeg5zn4rh] {
    transform: scale(1.15) translateY(-4px);
    filter: drop-shadow(0 8px 20px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.4));
}

.companion-peek-avatar:active[b-vdeg5zn4rh] {
    transform: scale(0.95);
}

/* Entrance: companion peeks up from behind the dialog corner */
@keyframes companionPeekIn-b-vdeg5zn4rh {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.6) rotate(-12deg);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.05) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* Gentle floating idle bob */
@keyframes companionFloat-b-vdeg5zn4rh {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Response-locus halo — fires when AI starts streaming a reply.
   Add the .is-responding class to the peek avatar for ~1s to play
   a single outward ring pulse. Complements the canvas-rendered
   ripple (companionEntity.emitResponse) as a DOM-level signal. */
.companion-peek-avatar.is-responding[b-vdeg5zn4rh]::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.55);
    /* Decorative-only — never capture clicks. Matters now that the parent
       .companion-peek-avatar is pointer-events:none (ticket #669) and this
       pseudo's default `auto` would otherwise re-introduce the hit-capture. */
    pointer-events: none;
    animation: companionResponsePulse-b-vdeg5zn4rh 0.9s ease-out forwards;
    pointer-events: none;
}

@keyframes companionResponsePulse-b-vdeg5zn4rh {
    0%   { opacity: 0.9; transform: scale(0.85); }
    60%  { opacity: 0.4; transform: scale(1.25); }
    100% { opacity: 0;   transform: scale(1.55); }
}

/* Attention-pending — subtle pre-open nudge. Parent adds this class
   to the FAB briefly when there's a notification to surface, so the
   companion leans in the direction of the new item without needing
   a red badge. */
.chat-fab.attention-pending[b-vdeg5zn4rh] {
    animation: fabAttentionLean-b-vdeg5zn4rh 1.4s ease-in-out 1;
}

@keyframes fabAttentionLean-b-vdeg5zn4rh {
    0%, 100% { transform: none; }
    30% { transform: translate(-3px, -2px) rotate(-4deg); }
    55% { transform: translate(2px, -1px) rotate(3deg); }
    80% { transform: translate(-1px, 0) rotate(-1deg); }
}

@keyframes slideIn-b-vdeg5zn4rh {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.92);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================
   CHAT-FABMOVE-2 (2026-07-23): open the dialog in the FAB's quadrant.
   Anchor class (anchor-tl/tr/bl/br) is set by Blazor from js/fabDrag.js
   getQuadrant(). Default (bottom-right) is the base .floating-chat-dialog
   rule — anchor-br needs no override. Each non-default corner flips the
   dialog's edge anchoring, mirrors the peek orb to the dialog corner that
   faces INTO the viewport (so it never clips off-screen), and — for
   top-anchored dialogs — flips the orb's click-ellipse to its lower half
   (the part hanging below the dialog, clear of the chat input; keeps the
   #669 no-overlap invariant, just vertically mirrored).
   ============================================================ */

/* Edge anchoring */
.floating-chat-dialog.anchor-bl[b-vdeg5zn4rh] { left: 24px; right: auto; bottom: 24px; top: auto; }
.floating-chat-dialog.anchor-tr[b-vdeg5zn4rh] { right: 24px; left: auto; top: 24px; bottom: auto; }
.floating-chat-dialog.anchor-tl[b-vdeg5zn4rh] { left: 24px; right: auto; top: 24px; bottom: auto; }

/* Top-anchored dialogs slide DOWN from above instead of up from below.
   Overrides only animation-name; duration/easing carry from the base shorthand. */
.floating-chat-dialog.anchor-tr[b-vdeg5zn4rh],
.floating-chat-dialog.anchor-tl[b-vdeg5zn4rh] { animation-name: slideInTop-b-vdeg5zn4rh; }

@keyframes slideInTop-b-vdeg5zn4rh {
    0%   { opacity: 0; transform: translateY(-24px) scale(0.92); }
    60%  { opacity: 1; transform: translateY(4px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Peek orb → dialog's inward-facing corner. Offsets mirror the razor-computed
   top-left math (top: 4 - size/2; left: 18 - size/2) onto the opposite edges. */
.floating-chat-dialog.anchor-bl .companion-peek-avatar[b-vdeg5zn4rh],
.floating-chat-dialog.anchor-tl .companion-peek-avatar[b-vdeg5zn4rh] {
    left: auto;
    right: calc(18px - var(--peek-size, 72px) / 2);
}
.floating-chat-dialog.anchor-tr .companion-peek-avatar[b-vdeg5zn4rh],
.floating-chat-dialog.anchor-tl .companion-peek-avatar[b-vdeg5zn4rh] {
    top: auto;
    bottom: calc(4px - var(--peek-size, 72px) / 2);
}

/* Top-anchored → orb hangs off the BOTTOM, so its clickable ellipse moves to the
   lower portion (over empty space below the dialog), never over the chat input. */
.floating-chat-dialog.anchor-tr .companion-peek-avatar[b-vdeg5zn4rh]::before,
.floating-chat-dialog.anchor-tl .companion-peek-avatar[b-vdeg5zn4rh]::before {
    top: auto;
    bottom: 5%;
}

.chat-container[b-vdeg5zn4rh] {
    position: relative; /* CHAT-RESIZE-1: positioning context for .chat-resize-handle */
    width: 420px;
    max-width: calc(100vw - 48px);
    height: 580px;
    max-height: calc(100vh - 120px);
    background: var(--theme-surface);
    border-radius: 20px;
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.18),
        0 12px 24px -8px rgba(0, 0, 0, 0.08),
        0 0 0 1px var(--theme-border);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--theme-border);
    transition: box-shadow 0.3s ease;
}

/* CHAT-RESIZE-1 (2026-07-22): user drag-resize grip for the floating chat.
   Panel is anchored bottom-right; the grip lives on the LEFT edge just below
   the ~48px header — the one spot free in BOTH modes. Top-left corner is out:
   in companion mode the peek orb paints over it (z 1201) and its clickable
   ellipse owns x:0-69,y:0-20 (#669); the model pill owns the header-left.
   Dragging the grip up/left grows the panel toward the free top/left space.
   Behavior + localStorage persistence: js/chatResize.js. */
.chat-resize-handle[b-vdeg5zn4rh] {
    position: absolute;
    top: 56px;
    left: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted, #94a3b8);
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    cursor: nwse-resize;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.18s ease, transform 0.18s ease, color 0.18s ease;
    z-index: 6;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* Reveal on panel hover/focus-within; keep it discoverable but unobtrusive. */
.chat-container:hover .chat-resize-handle[b-vdeg5zn4rh],
.chat-container:focus-within .chat-resize-handle[b-vdeg5zn4rh],
body.nts-chat-resizing .chat-resize-handle[b-vdeg5zn4rh] {
    opacity: 0.75;
    transform: scale(1);
}

.chat-resize-handle:hover[b-vdeg5zn4rh] {
    opacity: 1;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.chat-resize-handle svg[b-vdeg5zn4rh] { pointer-events: none; display: block; }


/* AI-D-1 / AI-D-4 (2026-05): unify the dark-theme dialog glows.
   Was 6 separate rules with hardcoded per-theme RGBs (purple, indigo,
   green, cyan, mystic-purple, tron-cyan). Each theme already exposes
   the correct accent color via --theme-primary-rgb, so a single rule
   that consumes that token reproduces all six glows correctly and
   automatically picks up any future theme additions. Dropped from
   ~40 lines to 5. */
.is-dark .chat-container[b-vdeg5zn4rh] {
    border-color: rgba(var(--theme-primary-rgb, 168, 85, 247), 0.3);
    box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(var(--theme-primary-rgb, 168, 85, 247), 0.25),
        0 0 32px rgba(var(--theme-primary-rgb, 168, 85, 247), 0.12);
}

/* Dark theme glow on peeking companion */
.is-dark .companion-peek-avatar[b-vdeg5zn4rh] {
    filter: drop-shadow(0 4px 16px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35));
}

.is-dark .companion-peek-avatar:hover[b-vdeg5zn4rh] {
    filter: drop-shadow(0 8px 24px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.55));
}

/* Chat Header */
.chat-header[b-vdeg5zn4rh] {
    background: var(--theme-cta-gradient);
    padding: 12px 16px;
    flex-shrink: 0;
    color: var(--theme-btn-text);
    border-radius: 20px 20px 0 0;
}

.header-content[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* Companion mode: model selector on left, actions on right */
.header-content.companion-header[b-vdeg5zn4rh] {
    justify-content: space-between;
}

.header-content.companion-header .header-left[b-vdeg5zn4rh] {
    flex: 1;
    min-width: 0;
    overflow: visible;
}

.header-content.companion-header .header-actions[b-vdeg5zn4rh] {
    gap: 4px;
}

/* Slim header when companion peeks outside — reclaim vertical space */
.chat-header:has(.companion-header)[b-vdeg5zn4rh] {
    padding: 8px 16px;
}

/* MODEL-PICK-PARITY-1 (2026-10-18): the companion header's own model selector - the sparkle +
   name + chevron pill and its centred modal copy of the picker (AI-V-16) - is gone; every sleeve
   uses the icon-row book button and the inline menu below. ~150 lines of pill/modal rules left
   with it. */

.header-left[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--theme-btn-text);
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

/* Companion Status in Header */
/* Clickable companion avatar in header */
.companion-avatar-btn[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.2s ease, filter 0.2s ease;
    flex-shrink: 0;
}

.companion-avatar-btn:hover[b-vdeg5zn4rh] {
    transform: scale(1.1);
    filter: brightness(1.15);
}

.companion-avatar-btn:active[b-vdeg5zn4rh] {
    transform: scale(0.95);
}

.header-title[b-vdeg5zn4rh] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--theme-btn-text);
}

.header-actions[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.header-icon-btn[b-vdeg5zn4rh] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative; /* For badge positioning */
}

.header-icon-btn:hover[b-vdeg5zn4rh] {
    background: rgba(255, 255, 255, 0.15);
}

.header-icon-btn.close-btn:hover[b-vdeg5zn4rh] {
    background: rgba(255, 255, 255, 0.2);
}

/* Provider Dropdown */
.provider-dropdown[b-vdeg5zn4rh] {
    position: relative;
}

.provider-menu[b-vdeg5zn4rh] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    /* 2026-05: bumped from 180px to 240px so longer model names
       ("Gemini 2.5 Flash-Lite") + chevron fit on one line. The
       companion-mode override below sets a higher ceiling for the
       FAB chat where there's more horizontal room to play with. */
    min-width: 240px;
    background: var(--theme-surface);
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1300;
    animation: fadeIn-b-vdeg5zn4rh 0.15s ease-out;
    border: 1px solid var(--theme-border);
}

.provider-menu[b-vdeg5zn4rh]::-webkit-scrollbar {
    width: 5px;
}

.provider-menu[b-vdeg5zn4rh]::-webkit-scrollbar-track {
    background: transparent;
}

.provider-menu[b-vdeg5zn4rh]::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

.provider-menu[b-vdeg5zn4rh]::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

@keyframes fadeIn-b-vdeg5zn4rh {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.provider-menu-header[b-vdeg5zn4rh] {
    padding: 6px 10px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--theme-border);
    background: var(--theme-surface-secondary);
}

.model-category-header[b-vdeg5zn4rh] {
    padding: 6px 10px 3px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--theme-border);
    margin-top: 2px;
}

.model-category-header:first-of-type[b-vdeg5zn4rh] {
    border-top: none;
    margin-top: 0;
}

.provider-menu-item[b-vdeg5zn4rh] {
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    color: var(--theme-text-primary);
}

.provider-menu-item:hover[b-vdeg5zn4rh] {
    background: var(--theme-secondary);
}

.provider-menu-item.selected[b-vdeg5zn4rh] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
    border-left: 3px solid var(--theme-primary);
    font-weight: 600;
}

.model-emoji[b-vdeg5zn4rh] {
    font-size: 1rem;
    flex-shrink: 0;
}

.model-btn-emoji[b-vdeg5zn4rh] {
    font-size: 1.2rem;
}

.model-details[b-vdeg5zn4rh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1px;
}

.provider-name[b-vdeg5zn4rh] {
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* AI-V-2 (2026-05): tertiary line under the model name carrying the catalog
   Description copy (e.g. "Free AI chat for everyone. Fast and efficient."). */
.model-description[b-vdeg5zn4rh] {
    font-size: 0.68rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.3;
    margin-top: 1px;
}

/* 2026-05: per-row expand toggle for the model description. Description is
   hidden by default to keep the picker compact; tapping the chevron next to
   the model name reveals the description for that row only. The chevron
   rotates 180° when expanded and tints to the theme primary color. The
   parent <button> still selects the model on click — chevron uses
   stopPropagation to prevent that. */
.model-info-toggle[b-vdeg5zn4rh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    padding: 0;
    border-radius: 4px;
    color: var(--theme-text-muted, #94a3b8);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.model-info-toggle:hover[b-vdeg5zn4rh] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-hover, rgba(99, 102, 241, 0.08));
}

.model-info-toggle.expanded[b-vdeg5zn4rh] {
    transform: rotate(180deg);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Dark themes — hover surface needs to match the row's dark background */
.is-dark .model-info-toggle:hover[b-vdeg5zn4rh] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.95);
}

/* AI-V-3 (2026-05): "Default" pill marking the catalog's recommended row. */
.model-default-pill[b-vdeg5zn4rh] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 15%, transparent);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 25%, transparent);
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
}

/* IMG-Hotfix-3a (2026-05): "Admin" pill marking catalog rows that are
   AdminOnly — hidden from general users, visible to admins for monitoring.
   Uses a subdued slate ramp so it reads as informational, not promotional;
   distinct from the theme-primary "Default" pill so admins can scan the
   picker and immediately spot which rows are gated vs recommended. */
.model-admin-pill[b-vdeg5zn4rh] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--theme-text-muted, #94a3b8) 15%, transparent);
    color: var(--theme-text-secondary, #64748b);
    border: 1px solid color-mix(in srgb, var(--theme-text-muted, #94a3b8) 30%, transparent);
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    cursor: help;
}

/* AI-V-8 (2026-05): warning chip for verification-gated models — communicates
   "this model may return 403 until the org-verification queue clears" so users
   don't burn an expectation on a model that fails at request time. Uses warning
   token with danger-leaning ramp so the affordance reads as a heads-up, not an
   error. */
.model-warning-chip[b-vdeg5zn4rh] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: color-mix(in srgb, var(--theme-text-warning, #f59e0b) 15%, transparent);
    color: var(--theme-text-warning, #f59e0b);
    border: 1px solid color-mix(in srgb, var(--theme-text-warning, #f59e0b) 30%, transparent);
    border-radius: 8px;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: help;
}

/* AI-V-13 (2026-05): modality pill so users can see at a glance that an image
   or video model is non-conversational. Sits next to the model name in every
   picker row. Section headers ("🎨 Image") group rows by category, but a row
   the eye lands on without seeing the header would otherwise look like any
   other model — and selecting one auto-prefixes /image so a text question
   silently becomes an image-gen request. The pill is the cheapest defense
   against that misuse pattern. Chat / Knowledge Base rows are unmarked
   because conversational text is the expected default. */
.model-modality-pill[b-vdeg5zn4rh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: help;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.model-modality-pill.image[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-accent, #ec4899) 15%, transparent);
    color: var(--theme-accent, #ec4899);
    border: 1px solid color-mix(in srgb, var(--theme-accent, #ec4899) 30%, transparent);
}

.model-modality-pill.video[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-accent-secondary, #8b5cf6) 15%, transparent);
    color: var(--theme-accent-secondary, #8b5cf6);
    border: 1px solid color-mix(in srgb, var(--theme-accent-secondary, #8b5cf6) 30%, transparent);
}

.model-cost[b-vdeg5zn4rh] {
    font-size: 0.62rem;
    /* AI-D-1 (2026-05): credit cost uses theme warning color (amber/orange family).
       Hardcoded #f59e0b kept as fallback for themes without a warning token. */
    color: var(--theme-text-warning, #f59e0b);
    font-weight: 500;
}

/* Knowledge Base / Free mode styling — flows through success token so the
   "this is free" semantic stays consistent across themes. */
.model-cost.free[b-vdeg5zn4rh] {
    color: var(--theme-text-success, #10b981);
}

.model-category-header.knowledge-base[b-vdeg5zn4rh] {
    color: var(--theme-text-success, #10b981);
}

.provider-menu-item.knowledge-base-item.selected[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-text-success, #10b981) 15%, transparent);
    border-left: 3px solid var(--theme-text-success, #10b981);
}

.header-icon-btn.free-mode[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-text-success, #10b981) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-text-success, #10b981) 30%, transparent);
}

.header-icon-btn.free-mode:hover[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-text-success, #10b981) 25%, transparent);
}

.model-category-badge.free[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-text-success, #10b981) 20%, transparent);
    color: var(--theme-text-success, #10b981);
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 600;
}

/* MODEL-FREE-1 (2026-10-14, Josh: "the model icon here doesn't look good" / "still doesn't look
   great"): the KB model's button was a colour emoji with a "Free" tag over it, then a green text
   pill - either way one coloured blob in a row of grey line glyphs. Now it IS a grey line glyph (a
   book, Assistant.razor) with a 7px green dot in the corner as the free signal. No tint, no border. */
.header-icon-btn.free-mode[b-vdeg5zn4rh] {
    position: relative;
    background: transparent;
    border: 0;
}

.header-icon-btn.free-mode:hover[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 12%, transparent);
}

.model-free-dot[b-vdeg5zn4rh] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--theme-text-success, #10b981);
    box-shadow: 0 0 0 2px var(--theme-surface, #ffffff);
}

.check-icon[b-vdeg5zn4rh] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

/* ── FAB Badges (unread + recording) ──
   AI-D-2 (2026-05): danger color flows through theme token so the
   badge shifts to the theme's red on themes that override
   --theme-text-danger; falls back to the canonical red elsewhere. */
/* NOTICE-1 (2026-10-20): unread reminders waiting for the assistant to deliver - a dot where the Transmit
   badge sits (the badge wins when both apply). The belt's buckle on Home carries the same state. */
.assistant-notice-dot[b-vdeg5zn4rh] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 2px var(--theme-surface, #ffffff);
    pointer-events: none;
}

.transmit-unread-badge[b-vdeg5zn4rh] {
    position: absolute;
    top: -4px;
    left: -4px;
    min-width: 18px;
    height: 18px;
    border-radius: 10px;
    background: var(--theme-text-danger, #ef4444);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--theme-surface, white);
    z-index: 2;
    animation: badgePop-b-vdeg5zn4rh 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes badgePop-b-vdeg5zn4rh {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.timer-recording-dot[b-vdeg5zn4rh] {
    position: absolute;
    bottom: -2px;
    left: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--theme-text-danger, #ef4444);
    border: 2px solid var(--theme-surface, white);
    z-index: 2;
    animation: recordPulse-b-vdeg5zn4rh 1.2s ease-in-out infinite;
}

@keyframes recordPulse-b-vdeg5zn4rh {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

/* ── Mode Tabs ── */
.companion-mode-tabs[b-vdeg5zn4rh] {
    display: flex;
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.15));
    background: var(--theme-surface, #ffffff);
    flex-shrink: 0;
}

.mode-tab[b-vdeg5zn4rh] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.mode-tab:hover[b-vdeg5zn4rh] {
    color: var(--theme-text-primary, #1e293b);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04);
}

.mode-tab.active[b-vdeg5zn4rh] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
}

.mode-tab.active[b-vdeg5zn4rh]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: var(--theme-primary, #6366f1);
    border-radius: 2px 2px 0 0;
}

.tab-icon[b-vdeg5zn4rh] {
    font-size: 0.9rem;
    line-height: 1;
}

.tab-label[b-vdeg5zn4rh] {
    white-space: nowrap;
}

.tab-badge[b-vdeg5zn4rh] {
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    /* AI-D-2 (2026-05): danger color flows through theme token */
    background: var(--theme-text-danger, #ef4444);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.tab-recording-dot[b-vdeg5zn4rh] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme-text-danger, #ef4444);
    animation: recordPulse-b-vdeg5zn4rh 1.2s ease-in-out infinite;
}

/* Dark theme mode tabs — AI-D-1 (2026-05): hoisted out of per-theme RGBs.
   The tabs already inherit muted/primary text from theme tokens in the
   base rule; the dark-theme override only needs to swap the surface and
   keep contrast on hover. Now flows through --theme-surface-secondary
   and --theme-text-primary. */
.is-dark .companion-mode-tabs[b-vdeg5zn4rh] {
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.6));
    border-bottom-color: var(--theme-border);
}

.is-dark .mode-tab[b-vdeg5zn4rh] {
    color: var(--theme-text-muted, rgba(226, 232, 240, 0.5));
}

.is-dark .mode-tab:hover[b-vdeg5zn4rh] {
    color: var(--theme-text-primary, #e2e8f0);
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
}

.is-dark .mode-tab.active[b-vdeg5zn4rh] {
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
}

/* ── Mode Panel Wrapper ── */
.companion-mode-panel[b-vdeg5zn4rh] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Messages Area */
.chat-messages[b-vdeg5zn4rh] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--theme-surface-secondary);
}

.chat-messages[b-vdeg5zn4rh]::-webkit-scrollbar {
    width: 6px;
}

.chat-messages[b-vdeg5zn4rh]::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.chat-messages[b-vdeg5zn4rh]::-webkit-scrollbar-thumb {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
    border-radius: 3px;
}

.chat-messages[b-vdeg5zn4rh]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.3);
}

/* Welcome State */
.chat-welcome[b-vdeg5zn4rh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 28px 24px;
}

.welcome-icon[b-vdeg5zn4rh] {
    color: var(--theme-primary-ink, var(--theme-primary));
    animation: sparkleFloat-b-vdeg5zn4rh 3s ease-in-out infinite, welcomeFadeIn-b-vdeg5zn4rh 0.5s ease both;
}

@keyframes sparkleFloat-b-vdeg5zn4rh {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(8deg); }
}

@keyframes welcomeFadeIn-b-vdeg5zn4rh {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.welcome-title[b-vdeg5zn4rh] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    letter-spacing: -0.01em;
    animation: welcomeFadeIn-b-vdeg5zn4rh 0.5s ease 0.08s both;
}

.welcome-subtitle[b-vdeg5zn4rh] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
    line-height: 1.4;
    animation: welcomeFadeIn-b-vdeg5zn4rh 0.5s ease 0.16s both;
}

/* First-visit chat mode tip */
.chat-mode-tip[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(var(--theme-primary-rgb), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.15);
    border-radius: 10px;
    margin-top: 4px;
    animation: fadeIn-b-vdeg5zn4rh 0.3s ease;
}

.tip-icon[b-vdeg5zn4rh] {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.tip-text[b-vdeg5zn4rh] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    line-height: 1.3;
}

.tip-dismiss[b-vdeg5zn4rh] {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--theme-text-secondary);
    cursor: pointer;
    padding: 2px;
    font-size: 0.75rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.tip-dismiss:hover[b-vdeg5zn4rh] {
    opacity: 1;
}

@keyframes fadeIn-b-vdeg5zn4rh {
    from { opacity: 0; }
    to { opacity: 1; }
}

.loading-text[b-vdeg5zn4rh] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary);
}

/* Spinner — AI-D-1 (2026-05): theme-aware so the loading state reads
   correctly across all 8 themes instead of always being purple. */
.spinner[b-vdeg5zn4rh] {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(var(--theme-primary-rgb, 124, 58, 237), 0.2);
    border-top-color: var(--theme-primary, #7c3aed);
    border-radius: 50%;
    animation: spin-b-vdeg5zn4rh 1s linear infinite;
}

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

/* Quick Commands */
.quick-commands[b-vdeg5zn4rh] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
    animation: welcomeFadeIn-b-vdeg5zn4rh 0.5s ease 0.24s both;
}

/* Secondary row — slash commands, delayed entrance */
.quick-commands.secondary-commands[b-vdeg5zn4rh] {
    margin-top: 4px;
    animation-delay: 0.36s;
}

/* Slash command chip variant — subtler, monospace hint */
.command-chip.cmd-chip[b-vdeg5zn4rh] {
    font-size: 0.75rem;
    padding: 5px 12px;
    opacity: 0.8;
    border-style: dashed;
}

.command-chip.cmd-chip:hover[b-vdeg5zn4rh] {
    opacity: 1;
    border-style: solid;
}

.command-chip[b-vdeg5zn4rh] {
    padding: 7px 14px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-primary-ink, var(--theme-primary));
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: chipPopIn-b-vdeg5zn4rh 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.quick-commands .command-chip:nth-child(1)[b-vdeg5zn4rh] { animation-delay: 0.2s; }
.quick-commands .command-chip:nth-child(2)[b-vdeg5zn4rh] { animation-delay: 0.28s; }
.quick-commands .command-chip:nth-child(3)[b-vdeg5zn4rh] { animation-delay: 0.36s; }

@keyframes chipPopIn-b-vdeg5zn4rh {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.command-chip:hover[b-vdeg5zn4rh] {
    background: var(--theme-chip-hover-bg);
    border-color: var(--theme-chip-border);
    color: var(--theme-chip-color);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}

/* Contextual image creation pills */
.context-pills[b-vdeg5zn4rh] {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-width: 300px;
    margin: 8px auto 0;
}

.image-chip[b-vdeg5zn4rh] {
    text-align: left;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.welcome-icon-emoji[b-vdeg5zn4rh] {
    font-size: 2.4rem;
    line-height: 1;
}

.welcome-hint[b-vdeg5zn4rh] {
    font-size: 0.72rem;
    color: var(--theme-text-muted);
    line-height: 1.4;
    margin-top: 4px;
    max-width: 280px;
    text-align: center;
}

/* Message Rows */
.message-row[b-vdeg5zn4rh] {
    display: flex;
}

.message-row.user[b-vdeg5zn4rh] {
    justify-content: flex-end;
}

.message-row.assistant[b-vdeg5zn4rh] {
    justify-content: flex-start;
}

/* Message Bubbles */
.message-bubble[b-vdeg5zn4rh] {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-wrap: break-word;
    overflow: visible;
    min-width: 0;
}

.message-bubble:has(.image-message)[b-vdeg5zn4rh] {
    padding: 0;
    max-width: 95%;
    background: transparent;
    border: none;
    box-shadow: none;
}

.user-bubble[b-vdeg5zn4rh] {
    background: var(--theme-cta-gradient);
    color: var(--theme-btn-text);
    border-bottom-right-radius: 4px;
}

.assistant-bubble[b-vdeg5zn4rh] {
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    border-bottom-left-radius: 4px;
    /* AI-D-1 (2026-05): consume theme shadow token so the bubble shadow
       matches the rest of the theme's elevation system. */
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.08));
}

.message-time[b-vdeg5zn4rh] {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 4px;
    text-align: right;
}

/* Message Content Types */
.message-image[b-vdeg5zn4rh] {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 4px;
    object-fit: contain;
}

.image-error-placeholder[b-vdeg5zn4rh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    /* AI-D-1 (2026-05): error tint flows through theme danger token */
    background: color-mix(in srgb, var(--theme-text-danger, #ef4444) 10%, transparent);
    border-radius: 8px;
    color: var(--theme-text-danger, #ef4444);
}

.error-icon[b-vdeg5zn4rh] {
    opacity: 0.6;
}

.error-text[b-vdeg5zn4rh] {
    font-size: 0.8rem;
}

.json-content[b-vdeg5zn4rh] {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    /* JSON code blocks intentionally retain dark IDE-style appearance across
       all themes — code blocks read better with consistent syntax-highlighting
       contrast. Hardcoded colors here are by design, not by oversight. */
    background: #1e293b;
    color: #a5f3fc;
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0;
    white-space: pre-wrap;
}

/* Typing Indicator */
.typing-indicator[b-vdeg5zn4rh] {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span[b-vdeg5zn4rh] {
    width: 8px;
    height: 8px;
    /* AI-D-1 (2026-05): typing dots use theme-muted text so they keep
       contrast against both light and dark assistant bubbles. */
    background: var(--theme-text-muted, #94a3b8);
    border-radius: 50%;
    animation: bounce-b-vdeg5zn4rh 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1)[b-vdeg5zn4rh] {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2)[b-vdeg5zn4rh] {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3)[b-vdeg5zn4rh] {
    animation-delay: 0.4s;
}

@keyframes bounce-b-vdeg5zn4rh {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Input Area */
.chat-input[b-vdeg5zn4rh] {
    padding: 12px 16px;
    background: var(--theme-surface);
    border-top: 1px solid var(--theme-border);
    flex-shrink: 0;
}

.input-wrapper[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--theme-surface-secondary);
    border-radius: 24px;
    padding: 4px 4px 4px 16px;
    border: 1px solid var(--theme-border);
}

.message-input[b-vdeg5zn4rh] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.9rem;
    color: var(--theme-input-text);
    outline: none;
    padding: 8px 0;
}

.message-input[b-vdeg5zn4rh]::placeholder {
    color: var(--theme-text-hint);
}

.message-input:disabled[b-vdeg5zn4rh] {
    opacity: 0.6;
}

.send-btn[b-vdeg5zn4rh] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--theme-cta-gradient);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.send-btn:hover:not(:disabled)[b-vdeg5zn4rh] {
    transform: scale(1.05);
    box-shadow: 0 2px 10px rgba(var(--theme-primary-rgb, 124, 58, 237), 0.3);
}

.send-btn:disabled[b-vdeg5zn4rh] {
    opacity: 0.5;
    cursor: not-allowed;
}

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

/* Mobile/tablet: shrink the corner peek avatar.
   Desktop pins the peek to the dialog's top-left corner at 72px; on
   ≤768px the dialog spans the viewport and 72px crowds the header.
   Keep the corner-peek aesthetic but scale to 56px and tighten the
   offset — mirrors the treatment already used in
   CompanionChatDialog.razor.css (top:-24 left:-8 at 56×56). The base
   rule consumes CSS custom properties (--peek-size/--peek-top/
   --peek-left) set inline by Razor; overriding width/height/top/left
   here wins cleanly because concrete properties in a later rule beat
   a var() reference, and the inline style only sets custom properties
   rather than the concrete ones — so no !important arms race is needed.
   Header-icon-btn keeps its 30×30 visible size (32 docked on phones,
   CHAT-HEAD-ICON-1), but gets an invisible ::before
   hit-target extension so finger taps have more room to land. */
@media (max-width: 768px) {
    /* !important is kept here as a belt-and-suspenders guard. The
       inline style on the button only sets custom properties now
       (--peek-size etc.), so this rule *should* win on cascade alone,
       but Blazor scoped CSS + browser caching has bitten this rule
       before. Forcing precedence keeps the peek at 56×56 no matter
       what stale state a dev environment is in. */
    .companion-peek-avatar[b-vdeg5zn4rh] {
        top: -36px !important;
        left: 8px !important;
        width: 56px !important;
        height: 56px !important;
    }

    /* Canvas pointer-events + visual scale-down for the peek mode
       live in CompanionEntity.razor.css under the ancestor selector
       `.companion-peek-avatar .companion-entity`. That rule compiles
       to `.companion-peek-avatar .companion-entity[b-ccyi3mllr8]`
       which matches correctly because .companion-entity carries the
       CompanionEntity component's scope attribute. Keeping the rule
       there (rather than trying to reach across the component
       boundary with ::deep, which is banned per CSS_ARCHITECTURE.md)
       is the approved pattern. */

    /* Invisible hit-target extension — extends clickable area to
       ~40×40 without changing visual size. inset: -5px is modest
       enough that neighbor buttons (header-actions gap: 2px) don't
       steal each other's overlap; each button still "owns" the
       nearest 3.5px of gap toward its neighbor which is fine for
       tap disambiguation. Sits at z-index 0 so it's below the
       badge (z-index: 2 elsewhere) but above transparent padding. */
    .header-icon-btn[b-vdeg5zn4rh]::before {
        content: "";
        position: absolute;
        inset: -5px;
        z-index: 0;
    }
}

@media (max-width: 600px) {
    .floating-chat-button[b-vdeg5zn4rh] {
        bottom: 12px;
        right: 12px;
    }

    .floating-chat-dialog[b-vdeg5zn4rh] {
        bottom: 12px;
        right: 12px;
        left: 12px;
    }

    .chat-container[b-vdeg5zn4rh] {
        width: calc(100vw - 24px);
        height: calc(100vh - 100px);
        max-height: none;
    }

    .chat-fab[b-vdeg5zn4rh] {
        width: 48px;
        height: 48px;
    }

    .chat-fab svg[b-vdeg5zn4rh] {
        width: 24px;
        height: 24px;
    }

    /* Keep companion touch target at least 48px on mobile */
    .chat-fab.companion-mode[b-vdeg5zn4rh] {
        min-width: 48px;
        min-height: 48px;
    }

    /* Scale avatar to fit the smaller button */
    .chat-fab.companion-mode .companion-avatar[b-vdeg5zn4rh] {
        transform: scale(0.85);
    }
}

@media (max-width: 400px) {
    .floating-chat-button[b-vdeg5zn4rh] {
        bottom: 10px;
        right: 10px;
    }

    .chat-fab[b-vdeg5zn4rh] {
        width: 44px;
        height: 44px;
    }

    .chat-fab svg[b-vdeg5zn4rh] {
        width: 22px;
        height: 22px;
    }

    /* Ensure 44px minimum touch target for accessibility */
    .chat-fab.companion-mode[b-vdeg5zn4rh] {
        min-width: 44px;
        min-height: 44px;
    }

    /* Scale avatar to fit 44px button */
    .chat-fab.companion-mode .companion-avatar[b-vdeg5zn4rh] {
        transform: scale(0.8);
    }
    
    .chat-container[b-vdeg5zn4rh] {
        width: calc(100vw - 20px);
        height: calc(100vh - 80px);
    }
}

/* ============================================
   TOOL CONTEXT BAR
   Shows current tool with favorite/feedback/help
   ============================================ */

.tool-context-bar[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--theme-surface-secondary);
    border-bottom: 1px solid var(--theme-border);
    flex-shrink: 0;
}

.tool-context-info[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-context-icon[b-vdeg5zn4rh] {
    font-size: 18px;
    color: var(--theme-primary-ink, var(--theme-primary));
}

.tool-context-name[b-vdeg5zn4rh] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.tool-context-actions[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tool-action-btn[b-vdeg5zn4rh] {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--theme-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.tool-action-btn:hover[b-vdeg5zn4rh] {
    background: var(--theme-hover);
    color: var(--theme-text-primary);
}

.tool-action-btn.favorited[b-vdeg5zn4rh] {
    color: #fbbf24;
}

.tool-action-btn.favorited:hover[b-vdeg5zn4rh] {
    color: #f59e0b;
}

.tool-action-btn .material-symbols-rounded[b-vdeg5zn4rh] {
    font-size: 18px;
}

.tool-action-btn.has-badge[b-vdeg5zn4rh] {
    position: relative;
}

.action-badge[b-vdeg5zn4rh] {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--theme-primary);
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 8px;
    min-width: 14px;
    text-align: center;
}

/* ============================================
   HISTORY DROPDOWN
   Shows recent conversations
   ============================================ */

.history-dropdown[b-vdeg5zn4rh] {
    position: relative;
}

.header-icon-btn.active[b-vdeg5zn4rh] {
    background: rgba(255, 255, 255, 0.2);
}

.history-menu[b-vdeg5zn4rh] {
    position: absolute;
    top: 100%;
    right: -50px;
    margin-top: 8px;
    width: 280px;
    background: var(--theme-surface);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    z-index: 1300;
    animation: slideDown-b-vdeg5zn4rh 0.2s ease-out;
    border: 1px solid var(--theme-border);
}

@keyframes slideDown-b-vdeg5zn4rh {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history-menu-header[b-vdeg5zn4rh] {
    padding: 14px 16px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.history-loading[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: var(--theme-text-secondary);
    font-size: 0.85rem;
}

.spinner-small[b-vdeg5zn4rh] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--theme-primary-rgb, 124, 58, 237), 0.2);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-vdeg5zn4rh 1s linear infinite;
}

.history-empty[b-vdeg5zn4rh] {
    padding: 32px 16px;
    text-align: center;
    color: var(--theme-text-secondary);
    font-size: 0.85rem;
}

.history-item[b-vdeg5zn4rh] {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    transition: all 0.15s ease;
    text-align: left;
    position: relative;
}

/* CHAT-HIST-MGMT-1 (2026-10-06): the row split into an OPEN button (title + date, takes the width)
   and an actions cluster (archive, delete) that shows on hover / focus-within, always on touch.
   Delete is a two-tap: the row swaps to an inline "Delete this conversation? Delete / Keep". */
.history-open[b-vdeg5zn4rh] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 8px 12px 16px;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}

.history-actions[b-vdeg5zn4rh] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.history-item:hover .history-actions[b-vdeg5zn4rh],
.history-item:focus-within .history-actions[b-vdeg5zn4rh],
.history-actions--confirm[b-vdeg5zn4rh] {
    opacity: 1;
}

@media (hover: none) {
    .history-actions[b-vdeg5zn4rh] { opacity: 1; }
}

.history-action[b-vdeg5zn4rh] {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--theme-text-muted, #94a3b8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.history-action:hover[b-vdeg5zn4rh] {
    color: var(--theme-text-primary, #0f172a);
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 12%, transparent);
}

.history-action--danger:hover[b-vdeg5zn4rh] {
    color: var(--theme-danger, #dc2626);
    background: color-mix(in srgb, var(--theme-danger, #dc2626) 12%, transparent);
}

.history-item--confirm[b-vdeg5zn4rh] {
    padding: 10px 8px 10px 16px;
    justify-content: space-between;
    background: color-mix(in srgb, var(--theme-danger, #dc2626) 6%, transparent);
}

.history-confirm-text[b-vdeg5zn4rh] {
    font-size: 0.8rem;
    color: var(--theme-text-primary, #0f172a);
}

.history-confirm-btn[b-vdeg5zn4rh] {
    padding: 4px 10px;
    border: 1px solid var(--theme-border, rgba(148, 163, 184, 0.3));
    border-radius: 6px;
    background: transparent;
    color: var(--theme-text-primary, #0f172a);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.history-confirm-btn--danger[b-vdeg5zn4rh] {
    border-color: var(--theme-danger, #dc2626);
    background: var(--theme-danger, #dc2626);
    color: #ffffff;
}

.history-item[b-vdeg5zn4rh]::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: var(--theme-border);
}

.history-item:last-of-type[b-vdeg5zn4rh]::before {
    display: none;
}

.history-item:hover[b-vdeg5zn4rh] {
    background: var(--theme-secondary);
}

.history-item.active[b-vdeg5zn4rh] {
    background: var(--theme-chip-bg);
}

.history-item.active[b-vdeg5zn4rh]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--theme-primary);
    border-radius: 0 2px 2px 0;
}

.history-title[b-vdeg5zn4rh] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

.history-date[b-vdeg5zn4rh] {
    font-size: 0.7rem;
    color: var(--theme-text-muted);
    font-weight: 500;
}

.history-menu-footer[b-vdeg5zn4rh] {
    padding: 10px 12px;
    border-top: 1px solid var(--theme-border);
    background: var(--theme-surface-secondary);
}

.view-all-btn[b-vdeg5zn4rh] {
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
    transition: all 0.15s ease;
}

.view-all-btn:hover[b-vdeg5zn4rh] {
    background: var(--theme-chip-bg);
}

/* ============================================
   CHAT INPUT AREA (Compact for floating chat)
   ============================================ */

.chat-input-area[b-vdeg5zn4rh] {
    flex-shrink: 0;
    border-top: none;
    background: var(--theme-surface);
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    box-shadow: 0 -1px 0 var(--theme-border), 0 -6px 12px -6px rgba(0, 0, 0, 0.04);
}

/* Model Mode Indicator - shows when image/video model selected */
.model-mode-indicator[b-vdeg5zn4rh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--theme-surface-secondary);
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.8rem;
}

/* AI-D-7 (2026-05): mode-indicator gradients flow through the active theme so
   "image mode" and "video mode" pick up the user's accent instead of always
   being purple-pink / blue-indigo. The gradient stays — it's a recognizable
   "you've switched into a different generation lane" affordance — but now uses
   the theme's primary→accent ramp so it cohers with the rest of the dialog
   chrome. Reverses the AI-D-1 ADR's "intentional category differentiator" call
   after the AI Models audit re-flagged the same pattern as a theme break. */
.model-mode-indicator.image-mode[b-vdeg5zn4rh] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #a855f7) 12%, transparent),
        color-mix(in srgb, var(--theme-accent, #ec4899) 12%, transparent));
    border-bottom-color: color-mix(in srgb, var(--theme-primary, #a855f7) 22%, transparent);
}

.model-mode-indicator.video-mode[b-vdeg5zn4rh] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #3b82f6) 12%, transparent),
        color-mix(in srgb, var(--theme-accent, #6366f1) 12%, transparent));
    border-bottom-color: color-mix(in srgb, var(--theme-primary, #3b82f6) 22%, transparent);
}

.mode-icon[b-vdeg5zn4rh] {
    font-size: 1rem;
}

.mode-text[b-vdeg5zn4rh] {
    font-weight: 600;
    color: var(--theme-text-primary);
}

.mode-hint[b-vdeg5zn4rh] {
    color: var(--theme-text-secondary);
    font-size: 0.75rem;
}

/* Model Category Badge on selector button */
.model-category-badge[b-vdeg5zn4rh] {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 0.55rem;
    background: var(--theme-surface);
    border-radius: 4px;
    padding: 1px 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* AI-D-6 (2026-05): category badges flow through theme primary→accent gradient.
   The image/video category split stays semantically distinct (different shapes
   of model, different prefix routing), but the *color* of that distinction is
   now the active theme's gradient so Tron/Nature/Ocean don't get a foreign
   purple-pink chip stuck to their otherwise-cohesive picker. */
.model-category-badge.image[b-vdeg5zn4rh] {
    background: linear-gradient(135deg, var(--theme-primary, #a855f7), var(--theme-accent, #ec4899));
}

.model-category-badge.video[b-vdeg5zn4rh] {
    background: linear-gradient(135deg, var(--theme-primary, #3b82f6), var(--theme-accent, #6366f1));
}

/* Note: Child component (ChatInput) styles are in themes.css
   with .floating-chat-dialog prefix for specificity */

/* Theme overrides removed - handled by variables */

/* =============================================
   REDUCED MOTION — accessibility gate
   The chat FAB, peek avatar, and dialog all have ambient animations
   that are pure decoration. Under prefers-reduced-motion, we drop the
   ambient loops but keep event-driven feedback (hover, active, open
   spring) so the UI still communicates state clearly.
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .chat-fab[b-vdeg5zn4rh],
    .chat-fab:not(.companion-mode):not(.celebrating):not(.celebration-return)[b-vdeg5zn4rh],
    .chat-fab.companion-mode.has-conversation[b-vdeg5zn4rh],
    .chat-fab.celebrating[b-vdeg5zn4rh],
    .chat-fab.celebrating[b-vdeg5zn4rh]  .pro-bot,
    .chat-fab.celebrating[b-vdeg5zn4rh]  .pro-bot .pro-bot-eye,
    .chat-fab.celebrating[b-vdeg5zn4rh]  .pro-bot .pro-bot-antenna-tip,
    .chat-fab.celebration-return[b-vdeg5zn4rh],
    .companion-peek-avatar[b-vdeg5zn4rh],
    .floating-chat-dialog[b-vdeg5zn4rh] {
        animation: none !important;
    }

    .companion-peek-avatar.is-responding[b-vdeg5zn4rh]::after {
        /* Keep the ripple as a single static flash — no expansion */
        animation: none !important;
        opacity: 0;
    }

    .chat-fab.attention-pending[b-vdeg5zn4rh] {
        animation: none !important;
    }

    /* Keep focus rings; drop hover transforms that translate */
    .companion-peek-avatar:hover[b-vdeg5zn4rh] {
        transform: none;
    }
}

/* ============================================
   AUDIO-TALK-MOUTH-2 (2026-07-02) — talking mouth replaces FAB equalizer
   The AUDIO-TALK bars overlay (2026-05-18) and its mouth-suppression rules
   are retired: while audio plays, the companion's canvas mouth itself
   animates (word-synced via audioBriefing.js + companionEntity.js).
   `.is-tracking-listen` on `.floating-chat-button` is still applied by
   ListenCard and keeps powering the FAB reading-lift styles above.
   ============================================ */

/* PRO-BOT-1 (2026-08-10): the robot's eye/mouth rules MOVED to
   Components/Chat/ProBot.razor.css so they travel with the mark. Scoped CSS here
   could never have reached the component anyway. Only the FAB's own chrome stays. */

/* PRO-MOUTH-1 v4 (2026-08-10): the robot head IS the button.
   Previously the head was an outline drawn inside the circular FAB — a robot in a badge.
   Now the circle is gone and the silhouette (antenna, ears, rounded head) is the control
   itself. The head takes `currentColor`, so the colour lives on ONE property here instead
   of being baked into the SVG; point --theme-fab-robot at a theme token when the palette
   work happens and the robot follows every theme for free. Eyes and mouth stay #fff
   because they must read against the head whatever colour it becomes.
   Drop shadow (not box-shadow) so the glow follows the robot outline, not a square. */
.chat-fab.robot-mode[b-vdeg5zn4rh] {
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    color: var(--theme-fab-robot, #334155);
    filter: drop-shadow(0 4px 10px var(--theme-shadow-color, rgba(15, 23, 42, 0.28)));
    transition: transform 0.25s ease, filter 0.25s ease;
}

.chat-fab.robot-mode:hover[b-vdeg5zn4rh] {
    background: transparent;
    box-shadow: none;
    transform: scale(1.1);
    filter: drop-shadow(0 6px 14px var(--theme-shadow-color, rgba(15, 23, 42, 0.35)));
}

.chat-fab.robot-mode:active[b-vdeg5zn4rh] {
    transform: scale(0.95);
}

/* HALO-1j v2 (2026-08-21, Josh: "this one needs more pop" -> a gradient DISC read as a
   generic filled button: "not quite"). The mark stays chrome-less; the INK changes.

   The measurement that explains it: .theme-ocean's page background ENDS on #0ea5e9
   (`--theme-page-bg` stop 100%) and its `--theme-gradient-text` IS #0ea5e9. The FAB sits in
   the bottom-right corner, so the ring was painting the exact colour behind it. No opacity,
   stroke or glow value can recover from ink == background.

   Fix: on THIS surface only, lift the ink toward `--theme-text-primary` - the colour each
   theme guarantees is readable ON ITS OWN PAGE, which is precisely the guarantee a mark
   floating on the page needs. Mixing (rather than replacing) keeps the theme's hue, so the
   FAB still reads cyan on Tron and amber on Mystic instead of going back to flat white.
   `--theme-primary` is the base, NOT `--theme-gradient-text`: that one holds a GRADIENT on
   two themes and color-mix() with a gradient is invalid, which would drop the ink and let
   robot-mode's slate through (GOTCHAS #371, same trap one layer along). */
.chat-fab.halo-mode[b-vdeg5zn4rh] {
    --nts-halo-ink: color-mix(in srgb,
            var(--theme-primary, #6366f1) 55%,
            var(--theme-text-primary, #ffffff) 45%);
    /* HALO-PUCK-1: the ::before below must stack BEHIND the <svg> inside this button.
       isolation gives the button its own stacking context so z-index:-1 on the pseudo
       cannot fall behind the page. */
    position: relative;
    isolation: isolate;
}

/* HALO-PUCK-1 (2026-10-18, Josh: "maybe we add some sort of effect on the bottom half
   here to make the avatar pop?"). The halo FAB is chrome-less (it rides robot-mode's
   transparent background, GOTCHAS #372), so a thin ring floats over whatever scrolls
   under it - on /manage-account the bottom half sat across a white <select> and lost
   its edge. HALO-1j tried a gradient DISC and Josh read it as "a generic filled button",
   and HALO-1k showed a white rim goes wrong per theme. So: neither a button nor a rim,
   a frosted PUCK - a soft-edged disc behind the ring, in the theme's own surface colour,
   that BLURS the content beneath it. The ring always sits on a calm surface, the page
   still shows through, and there is no hard edge to read as a button. The mask feathers
   the blur region so backdrop-filter does not show a square. */
.chat-fab.halo-mode[b-vdeg5zn4rh]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 50% auto auto 50%;
    width: 116px;                 /* 88px ring + breathing room */
    height: 116px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle,
            color-mix(in srgb, var(--theme-primary, #6366f1) 10%, transparent) 0 30%,
            transparent 60%),
        radial-gradient(circle,
            color-mix(in srgb, var(--theme-surface, #ffffff) 82%, transparent) 0 44%,
            color-mix(in srgb, var(--theme-surface, #ffffff) 45%, transparent) 60%,
            transparent 74%);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 74%);
    mask-image: radial-gradient(circle, #000 52%, transparent 74%);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.chat-fab.halo-mode:hover[b-vdeg5zn4rh]::before {
    transform: translate(-50%, -50%) scale(1.06);
}

/* Any live state (thinking / listening / reading) widens the puck a touch so the
   ripple and the amplitude glow have a surface to land on. */
.chat-fab.halo-mode:has(.nts-halo--listening)[b-vdeg5zn4rh]::before,
.chat-fab.halo-mode:has(.nts-halo--thinking)[b-vdeg5zn4rh]::before,
.chat-fab.halo-mode:has(.nts-halo--reading)[b-vdeg5zn4rh]::before {
    transform: translate(-50%, -50%) scale(1.18);
}

/* PRO-PEEK-1 (2026-08-13): Professional's corner mark. Positioned with the SAME
   custom-property contract as .companion-peek-avatar so both modes anchor identically
   off the panel's top-left, and reusing its entrance + float animations — the motion
   is what reads as "travelled here" rather than "appeared". */
.pro-peek-bot[b-vdeg5zn4rh] {
    position: absolute;
    top: var(--peek-top, -44px);
    left: var(--peek-left, -30px);
    z-index: 1201;
    width: var(--peek-size, 96px);
    height: var(--peek-size, 96px);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* CHAT-YOURAI-1: now a <button> - strip the chrome; the mark inside paints itself. */
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    animation: companionPeekIn-b-vdeg5zn4rh 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
               companionFloat-b-vdeg5zn4rh 3s ease-in-out 0.5s infinite;
}

/* CHAT-YOURAI-1: the peek is a click target where there is a pointer to hit it with.
   Touch keeps pointer-events:none (PRO-PEEK-1's #669 ellipse) and uses the header button. */
@media (hover: hover) {
    .pro-peek-bot[b-vdeg5zn4rh] { pointer-events: auto; cursor: pointer; }
    .pro-peek-bot:hover .pro-peek-mark[b-vdeg5zn4rh] { transform: scale(1.06); }
    .pro-peek-bot:focus-visible[b-vdeg5zn4rh] { outline: 2px solid var(--theme-primary, #6366f1); outline-offset: 4px; border-radius: 50%; }
}

/* PRO-MARK-1 (2026-08-13): the Professional AI mark, wherever it appears.
   Contract copied verbatim from .chat-fab.robot-mode (Assistant.razor.css ~2264),
   which had already settled this months ago: NO disc. Transparent background, a
   themeable head via --theme-fab-robot, and a drop-shadow FILTER — which hugs the
   robot's silhouette — instead of a box-shadow, which would draw a soft rectangle
   around a mark that has no box. I originally wrapped these in gradient circles and
   Josh called it: "we need to choose one - I'm thinking no circle." He was matching
   the FAB; I was inventing a third treatment.
   FaceColor stays at ProBot's #fff default: the head is dark here, so the face reads
   as cut out of it. (An earlier pass set FaceColor=#1e293b for a WHITE head inside a
   circle — with the circle gone that would be a white bot on a light page.)
   NOTE the colour must sit on this element, not a `.pro-bot` descendant selector —
   these are component-SCOPED stylesheets and .pro-bot carries ProBot's own scope
   attribute, so such a selector never matches (GOTCHAS #258). Inheritance crosses
   the boundary; selectors do not. */
.pro-peek-mark[b-vdeg5zn4rh] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--theme-fab-robot, #334155);
    /* PRO-PEEK-EDGE-1 (2026-08-13): the peek anchors to the panel's top-left, so its
       lower half overlaps the DARK navy panel header — where a dark mark on a dark
       header simply dissolves. Fix is background-ADAPTIVE, not a colour change: the
       mark is dark because on /home it sits on a LIGHT page, and recolouring it would
       just move the problem there. Chain a hairline white glow AFTER the depth shadow —
       tiny blur + full opacity means it's a crisp silhouette rim on the dark header and
       effectively invisible on the light page. Keeps "no circle" (PRO-MARK-1). */
    filter: drop-shadow(0 4px 10px var(--theme-shadow-color, rgba(15, 23, 42, 0.28)))
            drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}

/* HALO-1e (2026-08-21) / HALO-1j (2026-08-26, Josh: "let's remove the glow on the ring
   when the fab dialog is open ... the ring might look better without the additional
   brightness"): PRO-PEEK-EDGE-1's chained white rim ABOVE is a crisp silhouette edge on
   a SOLID head and a fuzzy white cloud around a thin ring. The halo takes the depth
   shadow alone — the arc already carries its own currentColor bloom (HALO-1d), which is
   theme-correct; the white rim was a SECOND, colourless glow stacked on top of it.
   ⚠️ THIS BLOCK MUST STAY AFTER .pro-peek-mark. Both compile to (0,2,0) — component
   scoping appends an attribute selector to each — so source order is the ONLY thing
   deciding the winner. HALO-1e's comment claimed "declared after" but the block was
   written BEFORE the base rule, so the override lost silently and the ring kept the
   bloom from 8/21 to 8/26. Do not reorder, and do not try to fix this from a global
   sheet — an unscoped .pro-peek-mark--halo is (0,1,0) and loses outright. */
.pro-peek-mark--halo[b-vdeg5zn4rh] {
    filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.35));
    /* HALO-PUCK-1: see .chat-fab.halo-mode::before. The peek straddles the page and the
       panel header (HALO-1k's two-surface problem); the frosted puck gives it ONE surface. */
    position: relative;
    isolation: isolate;
}

.pro-peek-mark--halo[b-vdeg5zn4rh]::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -8px;                  /* the mark is sized per-host (proMarkPx), so size by inset */
    border-radius: 50%;
    pointer-events: none;
    /* Unlike the FAB, this mark sits on a DARK card (the profile header, the panel's own
       header) where the theme surface is white on light themes - at the FAB's 82% it was a
       floodlight that swallowed the panel title. Here the puck is almost all BLUR and only
       a whisper of fill: enough to lift the ring off the navy, not enough to paint a disc. */
    background:
        radial-gradient(circle,
            color-mix(in srgb, var(--theme-surface, #ffffff) 28%, transparent) 0 38%,
            color-mix(in srgb, var(--theme-surface, #ffffff) 12%, transparent) 58%,
            transparent 72%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 72%);
    mask-image: radial-gradient(circle, #000 48%, transparent 72%);
}

/* HALO-1k (2026-08-26, Josh: "this is the only one that bugs me" — the LIGHT theme):
   HALO-1j stripped PRO-PEEK-EDGE-1's white rim off the halo and traded one bug for the
   other on exactly the two themes where the ink is DARK. The peek straddles two
   surfaces — its top half on the near-white page, its bottom third on the dark navy
   panel header — so with a #334155 ink and no rim the lower third dissolves into the
   header. That is PRO-PEEK-EDGE-1's original problem, verbatim.
   ⭐ THE RIM WAS NEVER WRONG — IT WAS UNCONDITIONAL. A white rim separates a DARK
   stroke from a dark header; on a LIGHT stroke it has no contrast job to do and is
   pure bloom, which is the cloud HALO-1j removed. The robot never showed this because
   its ink is always dark slate; the halo's ink flips with the theme
   (--theme-gradient-text), so the rim has to flip with it too.
   Keyed on .is-dark per PRO-DARK-2 — the single source of truth for "dark theme
   active" — NOT an enumeration of theme classes, so a tenth theme needs no edit here.
   Values are PRO-PEEK-EDGE-1's proven chain, unchanged: this is the same treatment on
   the same surface for the same reason, just scoped to where it earns its place.
   `filter` does not accumulate, so the depth shadow is restated rather than added. */
html:not(.is-dark) .pro-peek-mark--halo[b-vdeg5zn4rh] {
    filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.35))
            drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}

@media (prefers-reduced-motion: reduce) {
    .pro-peek-bot[b-vdeg5zn4rh] {
        animation: none;
    }
}

/* PEEK-GLOW-1 (2026-10-02, Josh on the phone: "maybe a glow or something so he stands out a bit"):
   the robot sits half on the page, half on the panel header, and on a light page it read as a
   flat grey sticker. Add a soft theme-coloured bloom AFTER PRO-PEEK-EDGE-1's chain (filter does
   not accumulate, so the whole chain is restated). drop-shadow hugs the silhouette, so this keeps
   PRO-MARK-1's "no circle". The halo is excluded on purpose: it already carries its own
   currentColor bloom (HALO-1d) and HALO-1j removed exactly this kind of stacked glow from it. */
.pro-peek-mark:not(.pro-peek-mark--halo)[b-vdeg5zn4rh] {
    filter: drop-shadow(0 4px 10px var(--theme-shadow-color, rgba(15, 23, 42, 0.28)))
            drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 12px color-mix(in srgb, var(--theme-primary, #6366f1) 60%, transparent));
}

/* PEEK-MOBILE-1 (2026-10-02, Josh: "on mobile let's show the whole avatar - it's getting cut off").
   The peek anchors at (18 - size/2, 4 - size/2) off the panel's top-left. At the default Large
   size (160px) that is left:-62px, and on <=768px the panel sits only 12px from the screen edge,
   so ~50px of the robot hung off the left of the phone. Dock it INSIDE the panel's corner at a
   phone-sized footprint instead.
   - Box: concrete top/left/width/height beat the base rule's var() values by source order (the
     inline style only sets custom properties), so no !important. The reading stage's
     body.nts-chat-reading rules in site.css are more specific and still win while a read is on.
   - Mark: scaled, not resized - its pixel size comes from the Razor Size parameter, and the box's
     own transform belongs to companionFloat. Scoped to NOT reading so it never compounds with the
     stage's scale(0.55). Assistant.razor sets --peek-mobile-scale = min(1, 70 / markPx), so every
     size draws ~70px in the 72px box (Large: 0.598 x 117px); 0.6 is only the fallback. */
@media (max-width: 768px) {
    .pro-peek-bot[b-vdeg5zn4rh] {
        top: -40px;
        left: 2px;
        width: 72px;
        height: 72px;
    }

    body:not(.nts-chat-reading) .pro-peek-mark[b-vdeg5zn4rh] {
        transform: scale(var(--peek-mobile-scale, 0.6));
        transform-origin: center center;
    }
}

/* FAB-MOBILE-1 (2026-10-02, Josh on the phone: "ideally he is fully visible with a bit of spacing").
   The robot (and halo) FAB draws an 88px mark inside a 48px (<=600px) / 44px (<=400px) button with
   overflow:visible, so 20-22px of robot spilled past the button on every side. The wrapper's 10-12px
   corner offset is measured from the BUTTON, which left the robot's ear and jaw hanging off the
   right and bottom edges of the screen. fabDrag.js clamps with the same button offsetWidth, so a
   dragged robot could hang off too.
   Fix: on phones the button IS the drawn mark (88px — ProBot's viewBox is ear-to-ear, so box width =
   drawn width). The corner offset then measures from what you see, the drag clamp keeps all of him
   on screen for free, and the tap target matches the robot. Desktop is unchanged (56px button,
   24px offset, ~8px visible margin). Companion orb untouched — its button already contains it.
   (0,2,0) beats the <=600/<=400 `.chat-fab` width rules regardless of order; a dragged FAB's inline
   left/top still win over the corner offset, as they should. */
@media (max-width: 600px) {
    .chat-fab.robot-mode[b-vdeg5zn4rh] {
        width: 88px;
        height: 88px;
    }

    .floating-chat-button.professional-fab-wrap[b-vdeg5zn4rh] {
        right: 14px;
        /* Home-screen app on iPhone: clear the home indicator when the page extends under it
           (env() is 0 everywhere else, so this is just 14px). */
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

/* PEEK-MOBILE-2 (2026-10-02, Josh on the phone after PEEK-MOBILE-1: "this could still use some work").
   PEEK-MOBILE-1 got the whole robot on screen, but on a phone the panel's top edge sits right under
   the app's dark top bar. The robot docked 40px above the panel therefore landed ON that bar - a dark
   slate robot on dark navy - and its lower part covered the start of the assistant's name.
   - Panel: shorter by 50px so its top clears the app bar with room for the robot to sit on the PAGE
     (the desktop look: robot above the corner, lower third over the panel header). dvh, with a vh
     line first for older browsers, so iOS's collapsing toolbar can't push the panel up under the bar.
   - Robot: 50px above / 22px into the panel header.
   - Title: pushed right past the robot (has-peek is set only when the corner peek renders).
   - Resize grip: chatResize.js already ignores it at <=600px, but a tap leaves :hover stuck on iOS,
     so the dead grip showed in the panel corner. Hide it where it can't work.
   Source order matters: this block must stay after PEEK-MOBILE-1's <=768px .pro-peek-bot rule. */
@media (max-width: 600px) {
    .chat-container[b-vdeg5zn4rh] {
        height: calc(100vh - 150px);
        height: calc(100dvh - 150px);
    }

    .pro-peek-bot[b-vdeg5zn4rh] {
        top: -50px;
    }

    .header-left.has-peek[b-vdeg5zn4rh] {
        padding-left: 64px;
    }

    .chat-resize-handle[b-vdeg5zn4rh] {
        display: none;
    }
}

/* MOBILE-AUDIT-10 + CHAT-HERO-MOBILE-1 (2026-10-02). Phones only (<=600px).

   1. Same sheet as the account menu / notifications (Josh: "same width on mobile"). The old
      <=600px rule set .chat-container to calc(100vw - 24px) but the base max-width
      calc(100vw - 48px) still applied, so the panel was 24px short and left-aligned. Now: 8px
      gutters, 8px (+ safe area) from the bottom, every quadrant anchor forced to the same sheet
      (a dragged FAB can't bring back the 24px desktop insets or a top-anchored panel).

   2. The robot moves INTO the panel, centred above the conversation (Josh: "the avatar should
      come down above the first message on mobile - centered"). The corner dock needed the panel
      150px short (PEEK-MOBILE-2) so the robot could sit on the page above it; with the robot
      inside, the panel runs from just under the app bar to the bottom - the same height as the
      menus (calc(100dvh - 72px)). The robot lives in an 84px band between the tabs and the
      messages: the band is a MARGIN on whatever follows the tab strip, so messages scroll below
      it and never under it, and the robot stays in view for Listen / thinking / talking.
      AI tab only (:has(.chat-messages)); Transmit and Tools get their full height back.
      Positioned with left/top, never transform - companionPeekIn / companionFloat animate
      transform and would overwrite a centering translate (PRO-MOUTH-1 trap).
      Every robot rule is guarded by body:not(.nts-chat-reading): during a read the peek is the
      STAGED mark (position:fixed above the caption bar, site.css), and this rule's scoped
      specificity would otherwise beat the stage.
      --chat-band-top = the panel's own top padding + 50px header + 30px tab strip (measured
      2026-10-02 at 440px: tabs end 89px below the dialog top).

   3. Header title: the 64px has-peek indent existed only to clear the corner robot. */
@media (max-width: 600px) {
    .floating-chat-dialog[b-vdeg5zn4rh],
    .floating-chat-dialog.anchor-bl[b-vdeg5zn4rh],
    .floating-chat-dialog.anchor-tr[b-vdeg5zn4rh],
    .floating-chat-dialog.anchor-tl[b-vdeg5zn4rh] {
        left: 8px;
        right: 8px;
        top: auto;
        /* SAFE-AREA-1 (2026-10-02, Josh's iPhone): ChatInput already pads its own bottom by
           env(safe-area-inset-bottom) at <=768px (ChatInput.razor.css), so lifting the sheet by
           it as well left ~34px of empty white under the input on a Home Screen iPhone. The
           input owns the home-indicator clearance; the sheet sits 8px from the screen edge. */
        bottom: 8px;
        --chat-band-top: 92px;
    }

    .chat-container[b-vdeg5zn4rh] {
        width: calc(100vw - 16px);
        max-width: none;
        /* Same lift as the account menu + notifications sheets on phones (MOBILE-AUDIT-9);
           the 1px ring is the base rule's border line, kept. */
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.16), 0 0 0 1px var(--theme-border);
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px);
    }

    .header-left.has-peek[b-vdeg5zn4rh] {
        padding-left: 0;
    }

    /* CHAT-FIT-MOBILE-1 (2026-10-02, Josh: "lose the whitespace and allow it to grow with the
       convo?"): on the AI tab the sheet fits its conversation - bottom-anchored, so the input
       never moves; the TOP edge rises as messages arrive, up to the full-height cap above, then
       the messages scroll. A floor of ~55% of the screen keeps a one-message greeting from
       reading as a toast and limits how often the top edge moves on short exchanges.
       Transmit / Tools keep the fixed full height - their panels fill the container. */
    .chat-container:has(.chat-messages)[b-vdeg5zn4rh] {
        height: auto;
        min-height: min(55dvh, calc(100dvh - 72px));
        max-height: calc(100vh - 72px);
        max-height: calc(100dvh - 72px);
    }

    .chat-container:has(.chat-messages) .chat-messages[b-vdeg5zn4rh] {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* The band: room above the first message (or the tool-context bar above it).
       A BORDER, not a margin (Josh, 10/2: the white strip over the grey messages read as a
       separate box): it takes the messages' own surface colour so the robot sits at the top of
       the conversation, and on the scroll container a border stays put while content scrolls
       inside the padding box - so messages still never pass under the robot. */
    .chat-container:has(.chat-messages) .companion-mode-tabs + *[b-vdeg5zn4rh] {
        border-top: 84px solid var(--theme-surface-secondary);
    }

    /* Robot / halo mark, centred in the band. 72px box (PEEK-MOBILE-1 sizing). */
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-br .pro-peek-bot[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-bl .pro-peek-bot[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-tr .pro-peek-bot[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-tl .pro-peek-bot[b-vdeg5zn4rh] {
        top: calc(var(--chat-band-top, 92px) + 6px);
        bottom: auto;
        left: calc(50% - 36px);
        right: auto;
        width: 72px;
        height: 72px;
    }

    /* Spark companion orb: the <=768px dock rule pins it with !important (top:-36px left:8px,
       56x56), so the band position has to answer with !important too. */
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-br .companion-peek-avatar[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-bl .companion-peek-avatar[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-tr .companion-peek-avatar[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.anchor-tl .companion-peek-avatar[b-vdeg5zn4rh] {
        top: calc(var(--chat-band-top, 92px) + 14px) !important;
        bottom: auto !important;
        left: calc(50% - 28px) !important;
        right: auto !important;
    }

    /* Transmit / Tools: no band, so no robot floating over their content. visibility, not
       display:none - the companion's canvas sizes itself once at init (@key comment in
       Assistant.razor) and must not init inside a display:none box if the panel opens on
       Transmit. */
    body:not(.nts-chat-reading) .floating-chat-dialog:not(:has(.chat-messages)) .pro-peek-bot[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog:not(:has(.chat-messages)) .companion-peek-avatar[b-vdeg5zn4rh] {
        visibility: hidden;
        pointer-events: none !important;
    }
}


/* ── GLITCH-TAB-1 (2026-10-05): the dialog docked in the Home hub card's Glitch tab ──────
   js/chatDock.js sets position/top/left/width/height inline (with !important) to pin the
   dialog over #hub-glitch-slot. Everything here strips the FLOAT chrome so it reads as the
   card's own content: no corner peek (the hero keeps the mark), no resize grip (the slot
   decides the size), no lift shadow, no slide-in. Late in the file + !important on purpose:
   it must beat the anchor-* corners, the saved CHAT-RESIZE size (inline), and the phone
   sheet rules (CHAT-FIT-MOBILE-1) without editing any of them. */
.floating-chat-dialog.is-docked[b-vdeg5zn4rh] {
    z-index: 40;   /* under the sticky app header (1100) and every header popup */
    animation: chatDockIn-b-vdeg5zn4rh 0.18s ease-out;
}

@keyframes chatDockIn-b-vdeg5zn4rh {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.floating-chat-dialog.is-docked .chat-container[b-vdeg5zn4rh] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 14px;
    box-shadow: none !important;
}

.floating-chat-dialog.is-docked .chat-resize-handle[b-vdeg5zn4rh] {
    display: none !important;
}

.floating-chat-dialog.is-docked .header-left.has-peek[b-vdeg5zn4rh] {
    padding-left: 0 !important;
}


@media (prefers-reduced-motion: reduce) {
    .floating-chat-dialog.is-docked[b-vdeg5zn4rh] { animation: none; }
}

/* GLITCH-TAB-1b (2026-10-05, Josh's first walk): docked, the panel is the card's CONTENT, so it
   drops what made it a window. The title repeats the tab label beside it; the close X sat right
   under the card's own X (two closes, two meanings). The other tabs are the way out. The admin
   model picker stays - it is a control, not chrome. */
.floating-chat-dialog.is-docked .chat-header[b-vdeg5zn4rh] {
    padding: 6px 12px;
    border-radius: 14px 14px 0 0;
}

.floating-chat-dialog.is-docked .header-title[b-vdeg5zn4rh],
.floating-chat-dialog.is-docked .header-left[b-vdeg5zn4rh]  .pro-bot,
.floating-chat-dialog.is-docked .close-btn[b-vdeg5zn4rh] {
    display: none !important;
}

.floating-chat-dialog.is-docked .header-content[b-vdeg5zn4rh] {
    justify-content: flex-end;
}

.floating-chat-dialog.is-docked .header-left:empty[b-vdeg5zn4rh],
.floating-chat-dialog.is-docked .header-left:not(:has(*))[b-vdeg5zn4rh] {
    display: none;
}

/* GLITCH-TAB-1c (2026-10-05, Slate walk): with the title gone the header was an empty gradient
   strip with four icons at its far end. Docked, it is not a bar - it is the panel's surface
   with an icon row on it, sitting on the mode tabs' own border. Icons take the text colour
   since they no longer sit on the CTA gradient. */
.floating-chat-dialog.is-docked .chat-header[b-vdeg5zn4rh] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-secondary, #64748b);
    padding: 4px 8px 0;
}

.floating-chat-dialog.is-docked .header-icon-btn[b-vdeg5zn4rh] {
    color: var(--theme-text-secondary, #64748b);
}

.floating-chat-dialog.is-docked .header-icon-btn:hover[b-vdeg5zn4rh] {
    color: var(--theme-text-primary, #0f172a);
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 12%, transparent);
}

.floating-chat-dialog.is-docked .companion-mode-tabs[b-vdeg5zn4rh] {
    border-top: 0;
}

/* GLITCH-TAB-3 (2026-10-05): docked, the hub strip IS the mode switch (Glitch / Transmit), so the
   panel's own AI / Transmit / Tools bar goes; Tools has no hub tab and stays floating-only. */
.floating-chat-dialog.is-docked .companion-mode-tabs[b-vdeg5zn4rh] {
    display: none !important;
}

.floating-chat-dialog.is-docked .chat-header[b-vdeg5zn4rh] {
    border-bottom: 1px solid var(--theme-border, rgba(148, 163, 184, 0.15));
    padding-bottom: 4px;
}

/* GLITCH-TAB-4 (2026-10-05, Josh: "the avatar should be visible here... maybe similar to the
   mobile look?"): with the hero folded (GLITCH-TAB-2) the mark had left the page. Docked, the
   panel borrows the PHONE layout (CHAT-FIT-MOBILE-1 band): the corner peek sits centred in an
   84px band at the top of the conversation, above the first message - alive (float, blink,
   mouth on TTS: same element, so audioBriefing.js still finds .pro-bot-mouth). Same recipe as
   the phone rules, at every width: box + transform scale via --peek-mobile-scale, never a resize
   (mark px come from the Razor Size parameter; the orb's canvas is sized once at init and must
   never sit in display:none, which is why the dock no longer hides either peek).
   --chat-band-top = the docked header's height (icon row + border), measured, not the phone's 92.
   Specificity: the phone rules are body:not(.nts-chat-reading) .floating-chat-dialog.anchor-*
   .pro-peek-bot with !important, so these repeat .is-docked to outrank them and answer in kind. */
.floating-chat-dialog.is-docked[b-vdeg5zn4rh] {
    --chat-band-top: 40px;
}

/* The band: a BORDER on the scroll container in the messages' own surface colour (same reasoning
   as the phone rule - a margin read as a separate white strip). Transmit has no .chat-messages,
   so it gets no band and no robot. */
.floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .companion-mode-tabs + *[b-vdeg5zn4rh] {
    border-top: 84px solid var(--theme-surface-secondary);
}

body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-bot[b-vdeg5zn4rh] {
    top: calc(var(--chat-band-top) + 6px) !important;
    left: calc(50% - 36px) !important;
    bottom: auto !important;
    right: auto !important;
    width: 72px !important;
    height: 72px !important;
    visibility: visible;
}

body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-mark[b-vdeg5zn4rh] {
    transform: scale(var(--peek-mobile-scale, 0.6));
    transform-origin: center center;
}

body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .companion-peek-avatar[b-vdeg5zn4rh] {
    top: calc(var(--chat-band-top) + 14px) !important;
    left: calc(50% - 28px) !important;
    bottom: auto !important;
    right: auto !important;
    width: 56px !important;
    height: 56px !important;
    visibility: visible;
    pointer-events: none !important;
}

/* Transmit: no band, so no robot over the inbox. visibility, not display (orb canvas init rule). */
body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked:not(:has(.chat-messages)) .pro-peek-bot[b-vdeg5zn4rh],
body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked:not(:has(.chat-messages)) .companion-peek-avatar[b-vdeg5zn4rh] {
    visibility: hidden;
}

/* GLITCH-TAB-10 (2026-10-06, Josh): docked on Transmit, the header still showed the AI controls -
   model picker, new conversation, history - over an inbox where none of them mean anything. Hide
   them there; the bug-report button is generic and stays. Transmit is the only docked mode with no
   .chat-messages (Tools has no hub tab), so the :not(:has()) test the band rules already use is
   the mode test. Attribute selectors on title because the three buttons share one class. */
.floating-chat-dialog.is-docked:not(:has(.chat-messages)) .provider-dropdown[b-vdeg5zn4rh],
.floating-chat-dialog.is-docked:not(:has(.chat-messages)) .history-dropdown[b-vdeg5zn4rh],
.floating-chat-dialog.is-docked:not(:has(.chat-messages)) .header-icon-btn[title="New Chat"][b-vdeg5zn4rh],
.floating-chat-dialog.is-docked:not(:has(.chat-messages)) .header-icon-btn[title="Chat History"][b-vdeg5zn4rh],
.floating-chat-dialog.is-docked:not(:has(.chat-messages)) .header-icon-btn--phone[b-vdeg5zn4rh] {
    display: none !important;
}

/* GLITCH-TAB-12 (2026-10-06, Josh: "these chat history links aren't working"): the dropdown backdrop
   (.dropdown-backdrop, z 1199, a SIBLING of the dialog) is meant to sit under the floating dialog
   (z 1200) and catch outside clicks. Docked, the dialog is z 40 to stay under the sticky header, so
   the backdrop landed ON TOP of it - every history-item click hit the backdrop and closed the menu.
   While a menu is open, lift the docked dialog above the backdrop; the header is still above it
   (1100 < 1250 is fine - a dropdown is a transient overlay, and it should paint over the header). */
.floating-chat-dialog.is-docked:has(.history-menu)[b-vdeg5zn4rh],
.floating-chat-dialog.is-docked:has(.provider-menu)[b-vdeg5zn4rh] {
    z-index: 1250;
}

/* CHAT-HIST-ALL-1 (2026-10-06): the history menu holds the full list. Five rows need no scroll;
   "all" caps the list at ~60vh and scrolls inside it (the menu itself has overflow:hidden for the
   rounded corners, so the scroll container is the list, not the menu). */
.history-list--all[b-vdeg5zn4rh] {
    max-height: min(60vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.history-footer[b-vdeg5zn4rh] {
    display: block;
    width: 100%;
    padding: 10px 16px 12px;
    border: 0;
    border-top: 1px solid var(--theme-border, rgba(148, 163, 184, 0.15));
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.78rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.history-footer:hover[b-vdeg5zn4rh] {
    background: color-mix(in srgb, var(--theme-text-secondary, #64748b) 8%, transparent);
}

.history-footer--static[b-vdeg5zn4rh] {
    color: var(--theme-text-tertiary, #94a3b8);
    font-weight: 500;
    cursor: default;
}

.history-footer--static:hover[b-vdeg5zn4rh] {
    background: transparent;
}

/* GLITCH-PHONE-1 (2026-10-13, Josh's iPhone: "we can make better use of the real estate here").
   Docked on a phone, the 84px band above the conversation (GLITCH-TAB-4) was the third Glitch mark on
   screen - the tab pill and each message's avatar already carry it - and it read as a loading spinner.
   Phones only: the band goes; the mark returns as a floating chip (GLITCH-PHONE-3 below). Reading
   mode is untouched: every mark rule is guarded the same way as the band rules, so the staged mark
   still appears during Listen. Desktop keeps the band.
   The panel also drops its border, padding and corners: on a phone the card itself is gone while
   the chat is up (TodaysWorkCard.razor.css hub-card--chat), so the conversation is the screen. */
@media (max-width: 480px) {
    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .companion-mode-tabs + *[b-vdeg5zn4rh] {
        border-top: 0;
    }

    .floating-chat-dialog.is-docked .chat-container[b-vdeg5zn4rh] {
        border: 0;
        /* GLITCH-PHONE-2 (2026-10-14, Josh's second phone walk): the container's own 10px padding was
           the frame still visible inside the card - grey messages surface floating in a white box.
           Phones: the conversation IS the card below the tab strip; the input area takes the card's
           bottom corners. */
        padding: 0 !important;
    }

    /* GLITCH-PHONE-3: with the card gone on phones (TodaysWorkCard.razor.css hub-card--chat) the
       panel has nothing to round into - square, no top line, and the input area sits flat on the
       bottom tab strip. The dialog is NOT a descendant of the card (it is laid over the slot by
       chatDock.js), so this keys on the dock state alone: on a phone, docked = that layout. */
    .floating-chat-dialog.is-docked .chat-container[b-vdeg5zn4rh],
    .floating-chat-dialog.is-docked .chat-input-area[b-vdeg5zn4rh] {
        border-radius: 0;
        border-top: 0;
    }

    /* GLITCH-PHONE-3: the mark comes back as a CHIP floating over the conversation (Muse's Koda),
       not a band it owns - content scrolls under it. 44px box, top centre, under the icon row.
       The same two elements the band rules position, so the orb-canvas init rule still holds;
       pointer-events off so it never steals a tap from the first message. */
    /* First walk: the chip landed ON the first message's name row. The messages get a top inset the
       chip's height, so the conversation starts under it and only scrolls under it afterwards. */
    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .chat-messages[b-vdeg5zn4rh] {
        padding-top: 52px;
    }

    /* GLITCH-PHONE-8c (10:15 PM, keyboard closed, chip mid-conversation): absolute-from-the-dialog
       keeps losing on the phone - the Razor's inline --peek-top / --peek-left feed the base rule and
       on this device that beat the override. So: FIXED to the viewport, same as the slot, 48px app
       header + the icon row. Nothing between it and the screen edge can move it. The animations on
       the base rule animate transform, which is fine on a fixed box. Desktop (band) untouched. */
    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-bot[b-vdeg5zn4rh] {
        visibility: visible;
        position: fixed !important;
        top: 82px !important;
        bottom: auto !important;
        left: calc(50% - 22px) !important;
        right: auto !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        z-index: 41;
        pointer-events: none;
        filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.18));
    }

    /* GLITCH-PHONE-8 (2026-10-14, Josh on the PWA: "the ring should be up top, we can probably remove
       the sparkles"): in the empty "What can I do for you?" state the chip IS the mark - the sparkles
       glyph above the title goes, and the welcome block gets room under the chip. */
    .floating-chat-dialog.is-docked .chat-welcome .welcome-icon[b-vdeg5zn4rh] {
        display: none;
    }

    .floating-chat-dialog.is-docked .chat-welcome[b-vdeg5zn4rh] {
        padding-top: 8px;
    }

    /* GLITCH-PHONE-8b (9:52 PM, still wandering): the peek is a child of the DIALOG, so its top is
       measured from the dialog box - and with the keyboard up chatDock pins the dialog to 412px while
       the phone sheet rules let .chat-container size itself to content (min-height 55dvh, max 100dvh).
       The container overflowed the dialog, the dialog became an internal scroller, and the chip's
       "top" followed that scroll origin into the input. Pin the container to the dialog, overflow
       hidden, so the dialog never scrolls and the chip's top is the dialog's top. */
    .floating-chat-dialog.is-docked[b-vdeg5zn4rh] {
        overflow: hidden;
    }

    .floating-chat-dialog.is-docked .chat-container[b-vdeg5zn4rh],
    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages)[b-vdeg5zn4rh] {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-mark[b-vdeg5zn4rh] {
        transform: scale(calc(var(--peek-mobile-scale, 0.6) * 0.6));
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .companion-peek-avatar[b-vdeg5zn4rh] {
        visibility: visible;
        top: var(--chat-band-top) !important;
        left: calc(50% - 20px) !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* Transmit: no conversation, no chip (same test as GLITCH-TAB-4). */
    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked:not(:has(.chat-messages)) .pro-peek-bot[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked:not(:has(.chat-messages)) .companion-peek-avatar[b-vdeg5zn4rh] {
        visibility: hidden;
    }

    /* The icon row (model, new, history, bug) is a full row of air with four glyphs at its end.
       Tighten it to the glyphs' own height. */
    .floating-chat-dialog.is-docked .chat-header[b-vdeg5zn4rh] {
        padding: 0 6px;
        min-height: 0;
    }


    .floating-chat-dialog.is-docked .chat-header[b-vdeg5zn4rh] {
        border-radius: 0;
    }
}

/* ─── MENU-SHEET-1 (2026-10-14, Josh: "those menus don't look great") ─────────────────────────
   The model picker and Recent Conversations are desktop dropdowns: anchored under a 30px icon,
   240-280px wide, hanging off the right edge. On a phone that is a cramped column with rows
   wrapping ("Gemini 3.8 Flash / DEFAULT") and a scrollbar inside a scrollbar. Phones only: both
   become BOTTOM SHEETS - fixed, full width, rising from the bottom edge, capped at 70% of the
   screen, rounded top corners, page dimmed behind. The dim is a 100vmax box-shadow spread on the
   sheet itself rather than the dropdown backdrop, which sits below the docked dialog (GLITCH-TAB-12)
   and cannot dim it; the backdrop still closes on an outside tap. (The companion picker's own centred
   dialog was excluded here until MODEL-PICK-PARITY-1 retired it.) Safe-area padding so the last row clears the iPhone home indicator. */
@media (max-width: 480px) {
    .provider-menu[b-vdeg5zn4rh],
    .history-menu[b-vdeg5zn4rh] {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        min-width: 0;
        max-height: 70dvh;
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border: 0;
        border-radius: 18px 18px 0 0;
        /* The dim is a 100vmax shadow spread: it paints only OUTSIDE the sheet (a ::before at
           z-index -1 painted over the sheet's own background and greyed the list - first walk). */
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.25), 0 0 0 100vmax rgba(15, 23, 42, 0.35);
        z-index: 1300;
        animation: menuSheetUp-b-vdeg5zn4rh 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* A grab-handle line at the top, the sheet idiom; the header text follows it. */
    .provider-menu > .provider-menu-header:first-child[b-vdeg5zn4rh],
    .history-menu > .history-menu-header[b-vdeg5zn4rh] {
        padding-top: 18px;
        background: linear-gradient(var(--theme-border, rgba(148, 163, 184, 0.4)), var(--theme-border, rgba(148, 163, 184, 0.4))) no-repeat center 8px / 36px 4px;
    }

    .provider-menu .provider-menu-item[b-vdeg5zn4rh] {
        padding: 10px 16px;
        min-height: 48px;
    }

    .history-menu .history-item[b-vdeg5zn4rh] {
        min-height: 52px;
    }

    .history-list--all[b-vdeg5zn4rh] {
        max-height: none;
    }
}

@keyframes menuSheetUp-b-vdeg5zn4rh {
    from { transform: translateY(24px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .provider-menu[b-vdeg5zn4rh],
    .history-menu[b-vdeg5zn4rh] {
        animation: none;
    }
}

/* ─── CHAT-CUR-MGMT-1 (2026-10-14): Archive / Delete on the open conversation, phones only ─────
   The history sheet's row icons are desktop affordances (hover-revealed, 16px). On phones they go,
   and the two actions sit in the chat's own icon row, acting on the conversation you are looking at.
   Desktop is unchanged: the header pair is hidden, the rows keep their icons. */
.header-icon-btn--phone[b-vdeg5zn4rh] {
    display: none;
}

@media (max-width: 480px) {
    .header-icon-btn--phone[b-vdeg5zn4rh] {
        display: flex;
    }

    /* Order matches desktop (Josh: "keep them consistent"); only the Archive/Delete pair gets a
       little air on each side so model | new | [archive delete] | history | bug read as groups. */
    .header-icon-btn--phone:first-of-type[b-vdeg5zn4rh],
    .header-icon-btn--phone + .history-dropdown[b-vdeg5zn4rh] {
        margin-left: 6px;
    }

    .history-menu .history-actions[b-vdeg5zn4rh] {
        display: none;
    }

    /* Two-tap delete: the armed state is a red text pill, unmistakable at a glance. */
    .header-icon-btn--danger-confirm[b-vdeg5zn4rh] {
        width: auto;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #ffffff !important;
        background: var(--theme-text-danger, #dc2626) !important;
    }
}

/* ─── CHAT-HEAD-ICON-1 (2026-10-18, Josh's iPhone: "make the ai chat header icons the same size as
   the belt icons - they look a bit small", then "we want excellent mobile accessibility") ──────
   Both rows were 20px boxes, but the eye sizes INK: the belt's filled glyphs cover 16-17.5px of
   their box, the header's 12.5 (the plus) to 15.8. Docked on a phone the header now takes the
   belt tab's exact geometry - 32px buttons on a 2px gap - with 22px glyphs, so the ink lands at
   14-19px beside the belt's 16-17.5. Touch: the generic -5px hit-slop (above, <=768) gave ~42px
   and reached 3px into each neighbour's face; here it is -6px vertical / -1px horizontal: a
   44px-tall target that fills its own 34px pitch and nothing else (WCAG 2.5.8 asks 24; iOS's 44
   is met on the axis a thumb actually misses by - eight-across rows can't give 44 wide). The row
   sits flush under the app bar, which would swallow an upward slop, so it carries 6px of its own
   headroom for the slop to live in. */
@media (max-width: 480px) {
    .floating-chat-dialog.is-docked .chat-header[b-vdeg5zn4rh] { padding-top: 6px; }
    .floating-chat-dialog.is-docked .header-icon-btn[b-vdeg5zn4rh] { width: 32px; height: 32px; }
    .floating-chat-dialog.is-docked .header-icon-btn svg[b-vdeg5zn4rh] { width: 22px; height: 22px; }
    .floating-chat-dialog.is-docked .header-icon-btn[b-vdeg5zn4rh]::before { inset: -6px -1px; }
    .floating-chat-dialog.is-docked .header-icon-btn--danger-confirm[b-vdeg5zn4rh] { width: auto; }   /* the "Delete?" pill */
}

/* ─── GLITCH-PHONE-6 (2026-10-14, Josh: "let's fix that wasted row") ─────────────────────────
   Docked on Transmit on a phone, the icon strip held one button (bug report - GLITCH-TAB-10 hides
   the AI controls there) and still took a full row above the inbox's own New Message row, whose
   left half is empty. The strip leaves the flow and the bug button floats into that empty left
   side instead: same button, same handler, one row fewer. Transmit = docked with no .chat-messages
   (the GLITCH-TAB-10 mode test). .chat-container is position:relative already. */
@media (max-width: 480px) {
    .floating-chat-dialog.is-docked:not(:has(.chat-messages)) .chat-header[b-vdeg5zn4rh] {
        position: absolute;
        top: 6px;
        left: 6px;
        width: auto;
        padding: 0;
        border: 0;
        background: transparent;
        z-index: 2;
    }
}
/* GLITCH-DESK-2 (2026-10-17, Josh: "a bit more space here" - the ring sat right under the icon row).
   Desktop/tablet only: 20px more air above the mark, and the band grows by the same so the ring still
   clears it. Phone (<=480) keeps GLITCH-PHONE-3's zero band + fixed chip. */
@media (min-width: 481px) {
    .floating-chat-dialog.is-docked[b-vdeg5zn4rh] {
        --chat-band-top: 60px;
    }

    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .companion-mode-tabs + *[b-vdeg5zn4rh] {
        border-top: 104px solid var(--theme-surface-secondary);
    }
}

/* GLITCH-DESK-3 (2026-10-17): on a SHORT desktop viewport (<=820px tall - a 1280x671 laptop at 100%)
   the 104px ring band is a sixth of the whole conversation. Shrink it to a small mark on a 64px band;
   taller screens keep GLITCH-DESK-2's air. Selectors repeat the band rules' specificity + !important. */
@media (min-width: 481px) and (max-height: 820px) {
    .floating-chat-dialog.is-docked[b-vdeg5zn4rh] {
        --chat-band-top: 40px;
    }

    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .companion-mode-tabs + *[b-vdeg5zn4rh] {
        border-top: 64px solid var(--theme-surface-secondary);
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-bot[b-vdeg5zn4rh] {
        top: calc(var(--chat-band-top) - 4px) !important;
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-mark[b-vdeg5zn4rh] {
        transform: scale(0.42);
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .companion-peek-avatar[b-vdeg5zn4rh] {
        top: calc(var(--chat-band-top) + 2px) !important;
        width: 44px !important;
        height: 44px !important;
        left: calc(50% - 22px) !important;
    }
}

/* HERO-SIZE-2/3/4 — the docked mark's size.
   HERO-SIZE-2 (2026-10-17, Josh: "biggest here too ... bigger") drew it at 88px; HERO-SIZE-3 gave the
   phone a "middle" 64px fixed chip. HERO-SIZE-4 (2026-10-18, Josh on prod: "grow" -> "already as big as
   I get", "shrink" -> "Shrinking down." and nothing moved): pinning 88 had disconnected the docked
   mark from the chat size commands. It now follows the user's size via --dock-mark (from the dialog's
   dock-size-* class, set by Assistant.razor): Normal 59 / Small 88 (the default, so 88 stands) / Large 117 / Hero 176. The
   mark renders natively at that size (Razor Size = proMarkPx), so no transform on desktop.
   Desktop geometry: --chat-band-top is the measured header bottom (chatResize.js syncBand), where the
   band's border starts; the mark sits 12px into a band of mark + 24px. Phone: the fixed chip at
   64/88 of the mark (64px at the default), messages inset under it, keyboard behaviour unchanged. */
/* --dock-mark per size = 0.733 x the companion size, the same ratio as proMarkPx in Assistant.razor. */
.floating-chat-dialog.dock-size-mini[b-vdeg5zn4rh] { --dock-mark: 29px; }
.floating-chat-dialog.dock-size-tiny[b-vdeg5zn4rh] { --dock-mark: 41px; }
.floating-chat-dialog.dock-size-normal[b-vdeg5zn4rh] { --dock-mark: 59px; }
.floating-chat-dialog.dock-size-small[b-vdeg5zn4rh] { --dock-mark: 88px; }
.floating-chat-dialog.dock-size-large[b-vdeg5zn4rh] { --dock-mark: 117px; }
.floating-chat-dialog.dock-size-hero[b-vdeg5zn4rh] { --dock-mark: 176px; }

@media (min-width: 481px) {
    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .companion-mode-tabs + *[b-vdeg5zn4rh] {
        border-top: calc(var(--dock-mark, 88px) + 24px) solid var(--theme-surface-secondary);
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-bot[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .companion-peek-avatar[b-vdeg5zn4rh] {
        top: calc(var(--chat-band-top) + 12px) !important;
        left: calc(50% - var(--dock-mark, 88px) / 2) !important;
        width: var(--dock-mark, 88px) !important;
        height: var(--dock-mark, 88px) !important;
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-mark[b-vdeg5zn4rh] {
        transform: none;
    }
}

/* HERO-SIZE-6 (2026-10-18, Josh from his phone, Home hero next to the hub-tab chat: "Let's make the
   sleeve the same size - keep the hero size - for all sleeves"). HERO-SIZE-3's phone chip was a
   "middle" 64/88 of the mark; beside the Home hero at the full 88 it read as a different, smaller
   assistant. The chip is now the SAME size as the hero (--dock-mark, 88 at the default) for every
   sleeve and the orb, drawn natively (no transform), and the messages inset grows with it. */
@media (max-width: 480px) {
    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .chat-messages[b-vdeg5zn4rh] {
        padding-top: calc(var(--dock-mark, 88px) + 8px);
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-bot[b-vdeg5zn4rh],
    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .companion-peek-avatar[b-vdeg5zn4rh] {
        left: calc(50% - var(--dock-mark, 88px) / 2) !important;
        width: var(--dock-mark, 88px) !important;
        height: var(--dock-mark, 88px) !important;
    }

    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-mark[b-vdeg5zn4rh] {
        transform: none;
    }
}

/* HERO-SIZE-5 (2026-10-18, Josh: "would be nice if that size persisted to the closed state"). The
   closed FAB's halo / robot mark is drawn at --fab-mark (Razor Size = 0.733 x the chat size, 88 at
   the default). Desktop: the button grows so the mark overflows it by the same 16px a side it always
   has (button = mark - 32, never under 56). The wrapper's corner offset and fabDrag.js's clamp both
   measure the button, so a Hero mark stays on screen and drags correctly. Phones: FAB-MOBILE-1 makes
   the button the 88px mark; a bigger chat size is zoomed back to 88 there (--fab-phone-zoom =
   min(1, 88/mark)). The companion orb FAB is unchanged. */
@media (min-width: 601px) {
    .chat-fab.robot-mode[b-vdeg5zn4rh] {
        width: max(56px, calc(var(--fab-mark, 88px) - 32px));
        height: max(56px, calc(var(--fab-mark, 88px) - 32px));
    }
}

@media (max-width: 600px) {
    .chat-fab.robot-mode > *[b-vdeg5zn4rh] {
        zoom: var(--fab-phone-zoom, 1);
    }
}

/* HUB-BUCKLE-1 (2026-10-18): on a phone, with the hub strip's buckle present (TodaysWorkCard, /home), the
   corner FAB has no job - the buckle is the FAB, landed in the belt. Off /home (no strip) the FAB behaves
   as before.
   BELT-DESK-1 (2026-10-19): the belt came to every width (TodaysWorkCard.razor.css BELT-DESK-1), so the
   rule lost its phone gate - on Home the mark lives in the belt at any size; the hero gate (FAB-HERO-3)
   still decides dormant vs landed there. The fab-peek rides inside the FAB and goes with it on Home, where
   the Focus card already says the same thing. Off Home nothing changes. */
body:has(.hub-tab-buckle) .floating-chat-button[b-vdeg5zn4rh] { display: none !important; }

/* GLITCH-DESK-4 (2026-10-18, Josh, desktop docked chat next to the phone: "let's make desktop like
   mobile - we can see more of the conversation with the sleeve on top w/ transparency"). GLITCH-TAB-4 /
   GLITCH-DESK-2 / HERO-SIZE-4 reserved a BAND above the conversation (border-top = --dock-mark + 24px,
   ~112px) for the mark. The phone (GLITCH-PHONE-3) never had one: the mark floats over the conversation
   as a chip and the content scrolls under it. Desktop now does the same: no band; the messages get a top
   inset the mark's height so the first message starts under it, and everything after scrolls beneath.
   The mark keeps its position (--chat-band-top + 12px) and its frosted puck (HALO-PUCK-1), which is the
   transparency: a translucent disc over whatever scrolls past. !important because the three band rules
   (84px / 104px / --dock-mark + 24px) are all (0,4,0) and in media blocks; this is later and answers in
   kind. GLITCH-DESK-3's short-viewport small mark is unchanged - it simply floats now too. */
@media (min-width: 481px) {
    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .companion-mode-tabs + *[b-vdeg5zn4rh] {
        border-top-width: 0 !important;
    }

    .floating-chat-dialog.is-docked .chat-container:has(.chat-messages) .chat-messages[b-vdeg5zn4rh] {
        padding-top: calc(var(--dock-mark, 88px) + 20px);
    }

    /* GLITCH-DESK-3's 0.42 mark was budgeting for the band on short viewports. No band, no budget: the
       mark floats at its native size everywhere (same specificity as DESK-3's rule, later source). */
    body:not(.nts-chat-reading) .floating-chat-dialog.is-docked.is-docked .pro-peek-mark[b-vdeg5zn4rh] {
        transform: none;
    }
}
/* /Pages/Shared/Newsletter.razor.rz.scp.css */
/* Newsletter Component Scoped CSS */

.newsletter-component[b-6fnqwqf5yc] {
    padding: 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    max-width: 420px;
}

/* Theme Variants */
.newsletter-component.theme-space[b-6fnqwqf5yc],
.newsletter-component.theme-winter[b-6fnqwqf5yc],
.newsletter-component.theme-nature[b-6fnqwqf5yc],
.newsletter-component.theme-ocean[b-6fnqwqf5yc] {
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px transparent;
}

/* Header */
.newsletter-header[b-6fnqwqf5yc] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}

.newsletter-icon[b-6fnqwqf5yc] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.newsletter-icon svg[b-6fnqwqf5yc] {
    width: 24px;
    height: 24px;
    color: white;
}

/* Theme-specific icon colors */
.theme-space .newsletter-icon[b-6fnqwqf5yc] { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.theme-winter .newsletter-icon[b-6fnqwqf5yc] { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.theme-nature .newsletter-icon[b-6fnqwqf5yc] { background: linear-gradient(135deg, #4ade80, #22c55e); }
.theme-ocean .newsletter-icon[b-6fnqwqf5yc] { background: linear-gradient(135deg, #22d3d1, #06b6d4); }

.header-text[b-6fnqwqf5yc] {
    flex: 1;
}

.newsletter-title[b-6fnqwqf5yc] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #1e293b;
}

.newsletter-subtitle[b-6fnqwqf5yc] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Dark theme text */
.theme-space .newsletter-title[b-6fnqwqf5yc],
.theme-winter .newsletter-title[b-6fnqwqf5yc],
.theme-nature .newsletter-title[b-6fnqwqf5yc],
.theme-ocean .newsletter-title[b-6fnqwqf5yc] {
    color: #f1f5f9;
}

.theme-space .newsletter-subtitle[b-6fnqwqf5yc],
.theme-winter .newsletter-subtitle[b-6fnqwqf5yc],
.theme-nature .newsletter-subtitle[b-6fnqwqf5yc],
.theme-ocean .newsletter-subtitle[b-6fnqwqf5yc] {
    color: #94a3b8;
}

/* Alert */
.alert[b-6fnqwqf5yc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 0.875rem;
}

.alert-error[b-6fnqwqf5yc] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-icon[b-6fnqwqf5yc] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Form */
.newsletter-form[b-6fnqwqf5yc] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-6fnqwqf5yc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-group[b-6fnqwqf5yc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-6fnqwqf5yc] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
}

.theme-space .form-label[b-6fnqwqf5yc],
.theme-winter .form-label[b-6fnqwqf5yc],
.theme-nature .form-label[b-6fnqwqf5yc],
.theme-ocean .form-label[b-6fnqwqf5yc] {
    color: #cbd5e1;
}

.form-input[b-6fnqwqf5yc] {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.9375rem;
    background: #fff;
    color: #1e293b;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-input:focus[b-6fnqwqf5yc] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-input[b-6fnqwqf5yc]::placeholder {
    color: #94a3b8;
}

/* Dark theme inputs */
.theme-space .form-input[b-6fnqwqf5yc],
.theme-winter .form-input[b-6fnqwqf5yc],
.theme-nature .form-input[b-6fnqwqf5yc],
.theme-ocean .form-input[b-6fnqwqf5yc] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #f1f5f9;
}

.theme-space .form-input:focus[b-6fnqwqf5yc] { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2); }
.theme-winter .form-input:focus[b-6fnqwqf5yc] { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); }
.theme-nature .form-input:focus[b-6fnqwqf5yc] { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); }
.theme-ocean .form-input:focus[b-6fnqwqf5yc] { border-color: #22d3d1; box-shadow: 0 0 0 3px rgba(34, 211, 209, 0.2); }

/* Checkbox */
.checkbox-group[b-6fnqwqf5yc] {
    margin-top: 4px;
}

.checkbox-label[b-6fnqwqf5yc] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #475569;
}

.theme-space .checkbox-label[b-6fnqwqf5yc],
.theme-winter .checkbox-label[b-6fnqwqf5yc],
.theme-nature .checkbox-label[b-6fnqwqf5yc],
.theme-ocean .checkbox-label[b-6fnqwqf5yc] {
    color: #cbd5e1;
}

.checkbox-input[b-6fnqwqf5yc] {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
    cursor: pointer;
}

.theme-space .checkbox-input[b-6fnqwqf5yc] { accent-color: #a855f7; }
.theme-winter .checkbox-input[b-6fnqwqf5yc] { accent-color: #38bdf8; }
.theme-nature .checkbox-input[b-6fnqwqf5yc] { accent-color: #4ade80; }
.theme-ocean .checkbox-input[b-6fnqwqf5yc] { accent-color: #22d3d1; }

.terms-link[b-6fnqwqf5yc] {
    color: #6366f1;
    text-decoration: none;
    font-weight: 600;
}

.terms-link:hover[b-6fnqwqf5yc] {
    text-decoration: underline;
}

.theme-space .terms-link[b-6fnqwqf5yc] { color: #a855f7; }
.theme-winter .terms-link[b-6fnqwqf5yc] { color: #38bdf8; }
.theme-nature .terms-link[b-6fnqwqf5yc] { color: #4ade80; }
.theme-ocean .terms-link[b-6fnqwqf5yc] { color: #22d3d1; }

/* Subscribe Button */
.btn-subscribe[b-6fnqwqf5yc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    width: 100%;
    margin-top: 4px;
}

.btn-subscribe:hover:not(:disabled)[b-6fnqwqf5yc] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-subscribe:disabled[b-6fnqwqf5yc] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-icon[b-6fnqwqf5yc] {
    width: 18px;
    height: 18px;
}

/* Theme-specific button colors */
.theme-space .btn-subscribe[b-6fnqwqf5yc] { background: linear-gradient(135deg, #a855f7, #7c3aed); }
.theme-space .btn-subscribe:hover:not(:disabled)[b-6fnqwqf5yc] { box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4); }

.theme-winter .btn-subscribe[b-6fnqwqf5yc] { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.theme-winter .btn-subscribe:hover:not(:disabled)[b-6fnqwqf5yc] { box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4); }

.theme-nature .btn-subscribe[b-6fnqwqf5yc] { background: linear-gradient(135deg, #4ade80, #22c55e); }
.theme-nature .btn-subscribe:hover:not(:disabled)[b-6fnqwqf5yc] { box-shadow: 0 4px 12px rgba(74, 222, 128, 0.4); }

.theme-ocean .btn-subscribe[b-6fnqwqf5yc] { background: linear-gradient(135deg, #22d3d1, #06b6d4); }
.theme-ocean .btn-subscribe:hover:not(:disabled)[b-6fnqwqf5yc] { box-shadow: 0 4px 12px rgba(34, 211, 209, 0.4); }

/* Spinner */
.spinner[b-6fnqwqf5yc] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-6fnqwqf5yc 0.8s linear infinite;
}

@keyframes spin-b-6fnqwqf5yc {
    to { transform: rotate(360deg); }
}

/* Privacy Note */
.privacy-note[b-6fnqwqf5yc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 8px 0 0;
}

.privacy-icon[b-6fnqwqf5yc] {
    width: 14px;
    height: 14px;
}

/* Success State */
.newsletter-success[b-6fnqwqf5yc] {
    text-align: center;
    padding: 20px 10px;
}

.success-icon[b-6fnqwqf5yc] {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.success-icon svg[b-6fnqwqf5yc] {
    width: 36px;
    height: 36px;
    color: white;
}

.success-title[b-6fnqwqf5yc] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}

.success-message[b-6fnqwqf5yc] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.theme-space .success-title[b-6fnqwqf5yc],
.theme-winter .success-title[b-6fnqwqf5yc],
.theme-nature .success-title[b-6fnqwqf5yc],
.theme-ocean .success-title[b-6fnqwqf5yc] {
    color: #f1f5f9;
}

.theme-space .success-message[b-6fnqwqf5yc],
.theme-winter .success-message[b-6fnqwqf5yc],
.theme-nature .success-message[b-6fnqwqf5yc],
.theme-ocean .success-message[b-6fnqwqf5yc] {
    color: #94a3b8;
}

/* Responsive */
@media (max-width: 480px) {
    .newsletter-component[b-6fnqwqf5yc] {
        padding: 20px;
    }

    .form-row[b-6fnqwqf5yc] {
        grid-template-columns: 1fr;
    }

    .newsletter-header[b-6fnqwqf5yc] {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .newsletter-title[b-6fnqwqf5yc] {
        font-size: 1.125rem;
    }
}
/* /Pages/Shared/NewsletterDialog.razor.rz.scp.css */
/* Data Display */
/* Wrapper styles removed */

.newsletter-dialog-content[b-u47mk89903] {
    padding: 24px;
    background: var(--theme-surface);
    border-radius: 12px;
}

.newsletter-success[b-u47mk89903] {
    text-align: center;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.success-icon-large[b-u47mk89903] {
    width: 64px;
    height: 64px;
    color: var(--theme-text-success);
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px var(--theme-shadow-color));
}

.success-title[b-u47mk89903] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0 0 15px;
}

.success-message[b-u47mk89903] {
    font-size: 1rem;
    color: var(--theme-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.dialog-header-text[b-u47mk89903] {
    margin-bottom: 24px;
}

.dialog-title[b-u47mk89903] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0 0 8px;
}

.dialog-subtitle[b-u47mk89903] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--theme-text-hint);
}

/* Form Styles */
.form-grid[b-u47mk89903] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group[b-u47mk89903] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.full-width[b-u47mk89903] {
    grid-column: 1 / -1;
}

.form-label[b-u47mk89903] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
}

.form-control[b-u47mk89903] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    width: 100%;
    background: var(--theme-input-bg);
    transition: all 0.2s;
    color: var(--theme-input-text);
}

.form-control:focus[b-u47mk89903] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
    background: var(--theme-input-bg);
}

.helper-text[b-u47mk89903] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    margin-top: 4px;
}

/* Checkbox */
.checkbox-wrapper[b-u47mk89903] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox-input[b-u47mk89903] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--theme-primary);
}

.checkbox-label[b-u47mk89903] {
    font-size: 0.9rem;
    color: var(--theme-text-primary);
}

.terms-link[b-u47mk89903] {
    color: var(--theme-primary-ink, var(--theme-primary));
    text-decoration: none;
    font-weight: 600;
}
.terms-link:hover[b-u47mk89903] { text-decoration: underline; }

/* Actions */
.dialog-actions[b-u47mk89903] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--theme-border);
}

/* /Pages/Storyteller/MobyDick.razor.rz.scp.css */
/* ============================================
   MOBY DICK STORYTELLER - IMMERSIVE EXPERIENCE
   ============================================ */

.storyteller-page.moby-dick[b-eyizp0jirt] {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(180deg, #0c1929 0%, #1a3a52 30%, #0d2137 70%, #051018 100%);
    color: #e8f1f8;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* ============================================
   OCEAN AMBIENT BACKGROUND
   ============================================ */

.ocean-ambient[b-eyizp0jirt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.wave[b-eyizp0jirt] {
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 200px;
    background: linear-gradient(180deg, transparent 0%, rgba(30, 80, 120, 0.15) 100%);
    border-radius: 50% 50% 0 0;
    animation: wave-motion-b-eyizp0jirt 8s ease-in-out infinite;
}

.wave-1[b-eyizp0jirt] {
    height: 180px;
    animation-delay: 0s;
    opacity: 0.6;
}

.wave-2[b-eyizp0jirt] {
    height: 150px;
    animation-delay: -2s;
    opacity: 0.4;
    animation-duration: 10s;
}

.wave-3[b-eyizp0jirt] {
    height: 120px;
    animation-delay: -4s;
    opacity: 0.3;
    animation-duration: 12s;
}

@keyframes wave-motion-b-eyizp0jirt {
    0%, 100% {
        transform: translateX(-2%) translateY(0);
    }
    50% {
        transform: translateX(2%) translateY(-10px);
    }
}

.fog[b-eyizp0jirt] {
    position: absolute;
    width: 150%;
    height: 300px;
    background: linear-gradient(90deg, transparent 0%, rgba(200, 220, 240, 0.08) 50%, transparent 100%);
    animation: fog-drift-b-eyizp0jirt 20s linear infinite;
}

.fog-1[b-eyizp0jirt] {
    top: 20%;
    animation-duration: 25s;
}

.fog-2[b-eyizp0jirt] {
    top: 40%;
    animation-delay: -10s;
    animation-duration: 30s;
    opacity: 0.5;
}

@keyframes fog-drift-b-eyizp0jirt {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(50%);
    }
}

/* ============================================
   PROGRESS BAR
   ============================================ */

.story-progress[b-eyizp0jirt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.progress-bar[b-eyizp0jirt] {
    height: 100%;
    background: linear-gradient(90deg, #3d7ea6 0%, #5fa8d3 100%);
    transition: width 0.5s ease-out;
    box-shadow: 0 0 10px rgba(95, 168, 211, 0.5);
}

/* ============================================
   TOP NAVIGATION BAR
   ============================================ */

.story-top-bar[b-eyizp0jirt] {
    position: fixed;
    top: 56px; /* Flush against the main NTS header */
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    z-index: 100;
    pointer-events: none;
    background: rgba(15, 35, 55, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.story-top-bar > *[b-eyizp0jirt] {
    pointer-events: auto;
}

.back-btn[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(30, 60, 90, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 25px;
    color: #e8f1f8;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.back-btn:hover[b-eyizp0jirt] {
    background: rgba(50, 100, 140, 0.9);
    transform: translateX(-2px);
}

.back-btn svg[b-eyizp0jirt] {
    width: 18px;
    height: 18px;
}

.story-top-bar .chapter-indicator[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.story-top-bar .chapter-indicator:hover[b-eyizp0jirt],
.story-top-bar .chapter-indicator.active[b-eyizp0jirt] {
    background: rgba(50, 100, 140, 0.9);
    transform: scale(1.02);
}

.story-top-bar .chapter-indicator svg[b-eyizp0jirt] {
    width: 18px;
    height: 18px;
}

.story-top-bar .sound-toggle[b-eyizp0jirt] {
    position: relative;
    top: auto;
    right: auto;
}

/* ============================================
   TABLE OF CONTENTS DRAWER
   ============================================ */

.toc-overlay[b-eyizp0jirt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 200;
    animation: fade-in-b-eyizp0jirt 0.2s ease;
}

@keyframes fade-in-b-eyizp0jirt {
    from { opacity: 0; }
    to { opacity: 1; }
}

.toc-drawer[b-eyizp0jirt] {
    position: fixed;
    top: 0;
    right: 0;
    width: min(350px, 85vw);
    height: 100vh;
    background: rgba(15, 35, 55, 0.98);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 201;
    display: flex;
    flex-direction: column;
    animation: slide-in-b-eyizp0jirt 0.3s ease;
    backdrop-filter: blur(20px);
}

@keyframes slide-in-b-eyizp0jirt {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.toc-header[b-eyizp0jirt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.toc-header h3[b-eyizp0jirt] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #e8f1f8;
    font-family: Georgia, serif;
}

.toc-close[b-eyizp0jirt] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #e8f1f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.toc-close:hover[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.2);
}

.toc-close svg[b-eyizp0jirt] {
    width: 20px;
    height: 20px;
}

.toc-list[b-eyizp0jirt] {
    list-style: none;
    margin: 0;
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.toc-item[b-eyizp0jirt] {
    margin-bottom: 0.5rem;
}

.toc-item button[b-eyizp0jirt] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 12px;
    color: #8ab8d4;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.toc-item button:hover[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.1);
    border-color: rgba(95, 168, 211, 0.3);
}

.toc-item.active button[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.15);
    border-color: rgba(95, 168, 211, 0.4);
    color: #ffffff;
}

.toc-item.completed button[b-eyizp0jirt] {
    color: #6ab8d4;
}

.toc-number[b-eyizp0jirt] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 500;
    flex-shrink: 0;
}

.toc-item.active .toc-number[b-eyizp0jirt] {
    background: #5fa8d3;
    color: #ffffff;
}

.toc-item.completed .toc-number[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.3);
}

.toc-title[b-eyizp0jirt] {
    flex: 1;
    font-family: Georgia, serif;
}

.toc-current[b-eyizp0jirt] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.5rem;
    background: rgba(95, 168, 211, 0.3);
    border-radius: 4px;
    color: #7dc4e8;
}

.toc-check[b-eyizp0jirt] {
    width: 18px;
    height: 18px;
    color: #5fa8d3;
}

/* ============================================
   NAVIGATION CONTROLS
   ============================================ */

.story-nav[b-eyizp0jirt] {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    z-index: 50;
    pointer-events: none;
}

.nav-btn[b-eyizp0jirt] {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(30, 60, 90, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8f1f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.nav-btn:hover:not(.disabled)[b-eyizp0jirt] {
    background: rgba(50, 100, 140, 0.9);
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(95, 168, 211, 0.4);
}

.nav-btn.disabled[b-eyizp0jirt] {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-btn svg[b-eyizp0jirt] {
    width: 24px;
    height: 24px;
}

.chapter-indicator[b-eyizp0jirt] {
    background: rgba(30, 60, 90, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: auto;
}

/* ============================================
   SOUND TOGGLE
   ============================================ */

.sound-toggle[b-eyizp0jirt] {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(30, 60, 90, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8f1f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 100;
    backdrop-filter: blur(8px);
}

.sound-toggle:hover[b-eyizp0jirt] {
    background: rgba(50, 100, 140, 0.9);
    transform: scale(1.05);
}

.sound-toggle.active[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.8);
    box-shadow: 0 0 15px rgba(95, 168, 211, 0.5);
}

.sound-toggle svg[b-eyizp0jirt] {
    width: 22px;
    height: 22px;
}

/* ============================================
   CHAPTER CONTAINER
   ============================================ */

.chapter-container[b-eyizp0jirt] {
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 4rem; /* Adjusted for new top bar position */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.chapter-container.transitioning[b-eyizp0jirt] {
    opacity: 0;
    transform: translateY(20px);
}

/* ============================================
   CHAPTER VISUAL
   ============================================ */

.chapter-visual[b-eyizp0jirt] {
    width: 100%;
    max-width: 600px;
    height: 200px;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.visual-emoji[b-eyizp0jirt] {
    font-size: 6rem;
    filter: drop-shadow(0 0 30px rgba(95, 168, 211, 0.4));
    animation: float-b-eyizp0jirt 4s ease-in-out infinite;
}

@keyframes float-b-eyizp0jirt {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}

/* Whale Silhouette Animation */
.whale-silhouette[b-eyizp0jirt] {
    position: absolute;
    width: 200px;
    height: 80px;
    background: linear-gradient(135deg, rgba(220, 240, 255, 0.8) 0%, rgba(180, 210, 240, 0.6) 100%);
    border-radius: 60% 40% 45% 55% / 50% 50% 50% 50%;
    animation: whale-swim-b-eyizp0jirt 6s ease-in-out infinite;
    box-shadow: 
        0 0 40px rgba(255, 255, 255, 0.3),
        inset -10px -5px 20px rgba(150, 190, 220, 0.4);
}

.whale-silhouette[b-eyizp0jirt]::before {
    content: '';
    position: absolute;
    right: -40px;
    top: 20px;
    width: 60px;
    height: 40px;
    background: inherit;
    border-radius: 0 80% 20% 60%;
    transform: rotate(-10deg);
}

.whale-silhouette[b-eyizp0jirt]::after {
    content: '';
    position: absolute;
    left: 30px;
    top: 25px;
    width: 8px;
    height: 8px;
    background: #1a3a52;
    border-radius: 50%;
}

@keyframes whale-swim-b-eyizp0jirt {
    0%, 100% {
        transform: translateX(-20px) translateY(0) rotate(-2deg);
    }
    25% {
        transform: translateX(0) translateY(-10px) rotate(0deg);
    }
    50% {
        transform: translateX(20px) translateY(5px) rotate(2deg);
    }
    75% {
        transform: translateX(0) translateY(-5px) rotate(0deg);
    }
}

/* Ship Silhouette */
.ship-silhouette[b-eyizp0jirt] {
    position: absolute;
    width: 120px;
    height: 60px;
    background: linear-gradient(180deg, #2d1810 0%, #1a0f0a 100%);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    animation: ship-rock-b-eyizp0jirt 3s ease-in-out infinite;
}

.ship-silhouette[b-eyizp0jirt]::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 4px;
    height: 80px;
    background: #2d1810;
    transform: translateX(-50%);
}

.ship-silhouette[b-eyizp0jirt]::after {
    content: '';
    position: absolute;
    left: calc(50% + 2px);
    bottom: calc(100% + 20px);
    width: 50px;
    height: 40px;
    background: rgba(220, 200, 180, 0.9);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

@keyframes ship-rock-b-eyizp0jirt {
    0%, 100% {
        transform: rotate(-3deg) translateY(0);
    }
    50% {
        transform: rotate(3deg) translateY(-5px);
    }
}

/* Storm Lightning */
.storm-lightning[b-eyizp0jirt] {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.storm-lightning[b-eyizp0jirt]::before,
.storm-lightning[b-eyizp0jirt]::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 80px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), transparent);
    animation: lightning-b-eyizp0jirt 4s ease-in-out infinite;
    opacity: 0;
}

.storm-lightning[b-eyizp0jirt]::before {
    left: 30%;
    top: 0;
    animation-delay: 0s;
}

.storm-lightning[b-eyizp0jirt]::after {
    right: 25%;
    top: 10px;
    animation-delay: 2s;
}

@keyframes lightning-b-eyizp0jirt {
    0%, 100% {
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    12% {
        opacity: 0.8;
    }
    15% {
        opacity: 0;
    }
}

/* ============================================
   CHAPTER CONTENT
   ============================================ */

.chapter-content[b-eyizp0jirt] {
    max-width: 700px;
    width: 100%;
}

.chapter-header[b-eyizp0jirt] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.chapter-number[b-eyizp0jirt] {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #5fa8d3;
    margin-bottom: 0.75rem;
    font-family: system-ui, -apple-system, sans-serif;
}

.chapter-title[b-eyizp0jirt] {
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 20px transparent;
}

.chapter-text[b-eyizp0jirt] {
    font-size: 1.2rem;
    line-height: 1.9;
}

.story-paragraph[b-eyizp0jirt] {
    margin-bottom: 1.5rem;
    text-indent: 2rem;
    opacity: 0;
    animation: paragraph-appear-b-eyizp0jirt 0.8s ease-out forwards;
}

.story-paragraph:nth-child(1)[b-eyizp0jirt] { animation-delay: 0.2s; }
.story-paragraph:nth-child(2)[b-eyizp0jirt] { animation-delay: 0.4s; }
.story-paragraph:nth-child(3)[b-eyizp0jirt] { animation-delay: 0.6s; }
.story-paragraph:nth-child(4)[b-eyizp0jirt] { animation-delay: 0.8s; }

@keyframes paragraph-appear-b-eyizp0jirt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.story-paragraph.quote[b-eyizp0jirt] {
    font-style: italic;
    text-indent: 0;
    padding: 1.5rem 2rem;
    background: rgba(95, 168, 211, 0.1);
    border-left: 3px solid #5fa8d3;
    border-radius: 0 8px 8px 0;
    margin: 2rem 0;
    position: relative;
}

.quote-mark[b-eyizp0jirt] {
    font-size: 2rem;
    color: #5fa8d3;
    font-family: Georgia, serif;
    line-height: 0;
    vertical-align: middle;
}

.quote-attribution[b-eyizp0jirt] {
    display: block;
    text-align: right;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    font-style: normal;
    color: #5fa8d3;
    opacity: 0.9;
}

.story-paragraph.emphasized[b-eyizp0jirt] {
    font-size: 1.3rem;
    color: #ffffff;
    font-weight: 400;
}

.story-paragraph em[b-eyizp0jirt] {
    font-style: italic;
    color: #7dc4e8;
}

.chapter-attribution[b-eyizp0jirt] {
    text-align: right;
    margin-top: 2rem;
    font-size: 0.95rem;
    color: #8ab8d4;
    font-style: italic;
}

/* ============================================
   CONTINUE BUTTON
   ============================================ */

.continue-btn[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 3rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #3d7ea6 0%, #2a5f7f 100%);
    border: none;
    border-radius: 30px;
    color: white;
    font-size: 1.1rem;
    font-family: system-ui, -apple-system, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(61, 126, 166, 0.4);
}

.continue-btn:hover[b-eyizp0jirt] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(61, 126, 166, 0.5);
    background: linear-gradient(135deg, #4a8fb8 0%, #336d8f 100%);
}

.continue-btn svg[b-eyizp0jirt] {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.continue-btn:hover svg[b-eyizp0jirt] {
    transform: translateX(5px);
}

.continue-section[b-eyizp0jirt] {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* ============================================
   STORY COMPLETE
   ============================================ */

.story-complete[b-eyizp0jirt] {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
}

.complete-icon[b-eyizp0jirt] {
    font-size: 5rem;
    display: block;
    margin-bottom: 1.5rem;
    animation: float-b-eyizp0jirt 3s ease-in-out infinite;
}

.story-complete h2[b-eyizp0jirt] {
    font-size: 2rem;
    margin: 0 0 1rem;
    font-weight: 400;
}

.story-complete p[b-eyizp0jirt] {
    color: #8ab8d4;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.restart-btn[b-eyizp0jirt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(95, 168, 211, 0.2);
    border: 1px solid rgba(95, 168, 211, 0.5);
    border-radius: 25px;
    color: #7dc4e8;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.restart-btn:hover[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.3);
    transform: scale(1.05);
}

.restart-btn svg[b-eyizp0jirt] {
    width: 18px;
    height: 18px;
}

/* ============================================
   THEME OVERRIDES
   ============================================ */

/* Cloud Theme (Light) */
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean)[b-eyizp0jirt] {
    background: linear-gradient(180deg, #f0f7fc 0%, #d4e8f5 30%, #b8d4e8 70%, #a0c4dc 100%);
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .wave[b-eyizp0jirt] {
    background: linear-gradient(180deg, transparent 0%, rgba(30, 80, 120, 0.1) 100%);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .chapter-number[b-eyizp0jirt] {
    color: #3d7ea6;
    font-weight: 500;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .chapter-title[b-eyizp0jirt] {
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph[b-eyizp0jirt] {
    color: #2d4a5e;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.emphasized[b-eyizp0jirt] {
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .quote-attribution[b-eyizp0jirt] {
    color: #3d7ea6;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .nav-btn[b-eyizp0jirt],
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .sound-toggle[b-eyizp0jirt],
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .chapter-indicator[b-eyizp0jirt],
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .back-btn[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.9);
    color: #1a3a52;
    border-color: rgba(26, 58, 82, 0.2);
}

/* Cloud Theme - TOC Drawer */
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-drawer[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(26, 58, 82, 0.15);
}

/* Cloud Theme - Top Bar */
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-top-bar[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(26, 58, 82, 0.15);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-header[b-eyizp0jirt] {
    border-color: rgba(26, 58, 82, 0.1);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-header h3[b-eyizp0jirt] {
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-close[b-eyizp0jirt] {
    background: rgba(26, 58, 82, 0.1);
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-item button[b-eyizp0jirt] {
    background: rgba(26, 58, 82, 0.03);
    color: #2d5a7a;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-item.active button[b-eyizp0jirt] {
    background: rgba(61, 126, 166, 0.15);
    border-color: rgba(61, 126, 166, 0.4);
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-number[b-eyizp0jirt] {
    background: rgba(26, 58, 82, 0.1);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .toc-item.active .toc-number[b-eyizp0jirt] {
    background: #3d7ea6;
}

/* Cloud Theme - Story Complete (The End) */
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-complete h2[b-eyizp0jirt] {
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-complete p[b-eyizp0jirt] {
    color: #2d5a7a;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .restart-btn[b-eyizp0jirt] {
    background: rgba(26, 58, 82, 0.15);
    border-color: rgba(26, 58, 82, 0.4);
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .restart-btn:hover[b-eyizp0jirt] {
    background: rgba(26, 58, 82, 0.25);
}

/* Winter Theme */
.storyteller-page.moby-dick.theme-winter[b-eyizp0jirt] {
    background: linear-gradient(180deg, #1a2a3a 0%, #2d4a5e 30%, #1a3a52 70%, #0d1f2d 100%);
}

.storyteller-page.moby-dick.theme-winter .wave[b-eyizp0jirt] {
    background: linear-gradient(180deg, transparent 0%, rgba(150, 200, 230, 0.1) 100%);
}

/* Ocean Theme */
.storyteller-page.moby-dick.theme-ocean[b-eyizp0jirt] {
    background: linear-gradient(180deg, #0a1628 0%, #143d5c 30%, #0d2840 70%, #051520 100%);
}

.storyteller-page.moby-dick.theme-ocean .progress-bar[b-eyizp0jirt] {
    background: linear-gradient(90deg, #2d8ccc 0%, #4fa8e0 100%);
}

/* Nature Theme */
.storyteller-page.moby-dick.theme-nature[b-eyizp0jirt] {
    background: linear-gradient(180deg, #1a2e1a 0%, #2d4a3a 30%, #1a3828 70%, #0d1f12 100%);
}

.storyteller-page.moby-dick.theme-nature .chapter-number[b-eyizp0jirt],
.storyteller-page.moby-dick.theme-nature .progress-bar[b-eyizp0jirt] {
    background: linear-gradient(90deg, #4a8f5a 0%, #6ab07a 100%);
}

.storyteller-page.moby-dick.theme-nature .chapter-number[b-eyizp0jirt] {
    background: #1e293b;
    color: #6ab07a;
}

/* Space Theme */
.storyteller-page.moby-dick.theme-space[b-eyizp0jirt] {
    background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 30%, #12121f 70%, #0a0a12 100%);
}

.storyteller-page.moby-dick.theme-space .wave[b-eyizp0jirt] {
    background: linear-gradient(180deg, transparent 0%, rgba(100, 80, 180, 0.1) 100%);
}

.storyteller-page.moby-dick.theme-space .chapter-number[b-eyizp0jirt],
.storyteller-page.moby-dick.theme-space em[b-eyizp0jirt] {
    color: #9d8cff;
}

.storyteller-page.moby-dick.theme-space .progress-bar[b-eyizp0jirt] {
    background: linear-gradient(90deg, #6d5ccc 0%, #9d8cff 100%);
}

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

@media (max-width: 768px) {
    .chapter-container[b-eyizp0jirt] {
        padding: 5rem 1.5rem 3rem;
    }

    .chapter-title[b-eyizp0jirt] {
        font-size: 1.8rem;
    }

    .chapter-text[b-eyizp0jirt] {
        font-size: 1.05rem;
    }

    .story-paragraph[b-eyizp0jirt] {
        text-indent: 1.5rem;
    }

    .visual-emoji[b-eyizp0jirt] {
        font-size: 4rem;
    }

    .chapter-visual[b-eyizp0jirt] {
        height: 150px;
        margin-bottom: 2rem;
    }

    .story-nav[b-eyizp0jirt] {
        padding: 0 0.5rem;
    }

    .nav-btn[b-eyizp0jirt] {
        width: 40px;
        height: 40px;
    }

    .story-top-bar[b-eyizp0jirt] {
        top: 0.5rem;
        padding: 0 0.75rem;
    }

    .back-btn span[b-eyizp0jirt] {
        display: none;
    }

    .back-btn[b-eyizp0jirt] {
        padding: 0.5rem;
        border-radius: 50%;
    }

    .chapter-indicator[b-eyizp0jirt] {
        font-size: 0.75rem;
        padding: 0.4rem 0.8rem;
    }

    .chapter-indicator span:not(.toc-title)[b-eyizp0jirt] {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .whale-silhouette[b-eyizp0jirt] {
        width: 140px;
        height: 60px;
    }

    .toc-drawer[b-eyizp0jirt] {
        width: 100vw;
    }
}

@media (max-width: 480px) {
    .chapter-title[b-eyizp0jirt] {
        font-size: 1.5rem;
    }

    .chapter-text[b-eyizp0jirt] {
        font-size: 1rem;
        line-height: 1.8;
    }

    .continue-btn[b-eyizp0jirt] {
        padding: 0.85rem 1.5rem;
        font-size: 1rem;
    }

    .reading-controls[b-eyizp0jirt] {
        gap: 0.25rem;
    }

    .control-btn[b-eyizp0jirt] {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   READING CONTROLS
   ============================================ */

.reading-controls[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-btn[b-eyizp0jirt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(30, 60, 90, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8f1f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    font-size: 0.8rem;
    font-weight: 600;
}

.control-btn:hover:not(:disabled)[b-eyizp0jirt] {
    background: rgba(50, 100, 140, 0.9);
    transform: scale(1.05);
}

.control-btn:disabled[b-eyizp0jirt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.control-btn.active[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.8);
    box-shadow: 0 0 15px rgba(95, 168, 211, 0.5);
}

.control-btn svg[b-eyizp0jirt] {
    width: 18px;
    height: 18px;
}

/* ============================================
   FONT SIZE LEVELS
   ============================================ */

.storyteller-page.font-small .chapter-text[b-eyizp0jirt] {
    font-size: 1rem;
}

.storyteller-page.font-large .chapter-text[b-eyizp0jirt] {
    font-size: 1.4rem;
}

.storyteller-page.font-small .story-paragraph.emphasized[b-eyizp0jirt] {
    font-size: 1.1rem;
}

.storyteller-page.font-large .story-paragraph.emphasized[b-eyizp0jirt] {
    font-size: 1.5rem;
}

/* ============================================
   FOCUS MODE
   ============================================ */

.storyteller-page.focus-mode[b-eyizp0jirt] {
    background: #0a1520 !important;
}

.storyteller-page.focus-mode .ocean-ambient[b-eyizp0jirt],
.storyteller-page.focus-mode .weather-particles[b-eyizp0jirt] {
    opacity: 0.2;
}

.storyteller-page.focus-mode .story-nav[b-eyizp0jirt],
.storyteller-page.focus-mode .reading-stats[b-eyizp0jirt] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.storyteller-page.focus-mode:hover .story-nav[b-eyizp0jirt] {
    opacity: 1;
    pointer-events: auto;
}

.storyteller-page.focus-mode .story-top-bar.hidden[b-eyizp0jirt] {
    transform: translateY(-100%);
    opacity: 0;
}

.storyteller-page.focus-mode .chapter-container[b-eyizp0jirt] {
    max-width: 650px;
    margin: 0 auto;
}

/* Force light text colors in focus mode regardless of theme */
.storyteller-page.focus-mode .chapter-title[b-eyizp0jirt] {
    color: #ffffff !important;
    text-shadow: 0 2px 20px transparent;
}

.storyteller-page.focus-mode .chapter-number[b-eyizp0jirt] {
    color: #5fa8d3 !important;
}

.storyteller-page.focus-mode .story-paragraph[b-eyizp0jirt] {
    color: #d0e0f0 !important;
}

.storyteller-page.focus-mode .story-paragraph.emphasized[b-eyizp0jirt] {
    color: #ffffff !important;
}

.storyteller-page.focus-mode .story-paragraph em[b-eyizp0jirt] {
    color: #7dc4e8 !important;
}

.storyteller-page.focus-mode .story-paragraph.quote[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.15) !important;
    border-color: #5fa8d3 !important;
}

.storyteller-page.focus-mode .quote-attribution[b-eyizp0jirt] {
    color: #5fa8d3 !important;
}

.storyteller-page.focus-mode .quote-mark[b-eyizp0jirt] {
    color: #5fa8d3 !important;
}

/* Reading-active paragraph in focus mode - HIGH SPECIFICITY */
.storyteller-page.moby-dick.focus-mode .story-paragraph.reading-active[b-eyizp0jirt] {
    background: rgba(40, 80, 120, 0.6) !important;
    border-left: 4px solid #7dc4e8 !important;
    box-shadow: 0 2px 25px rgba(95, 168, 211, 0.5) !important;
    animation: none !important;
}

.storyteller-page.moby-dick.focus-mode .story-paragraph.reading-active[b-eyizp0jirt],
.storyteller-page.moby-dick.focus-mode .story-paragraph.reading-active span[b-eyizp0jirt],
.storyteller-page.moby-dick.focus-mode .story-paragraph.reading-active .glossary-term[b-eyizp0jirt] {
    color: #ffffff !important;
}

.storyteller-page.moby-dick.focus-mode .story-paragraph.reading-active[b-eyizp0jirt]::before {
    color: #7dc4e8 !important;
}

.storyteller-page.moby-dick.focus-mode .story-paragraph.reading-active em[b-eyizp0jirt] {
    color: #a0d8f0 !important;
}

.storyteller-page.focus-mode .chapter-attribution[b-eyizp0jirt] {
    color: #8ab8d4 !important;
}

.storyteller-page.focus-mode .chapter-reading-time[b-eyizp0jirt] {
    color: #5fa8d3 !important;
}

/* Nav buttons in focus mode */
.storyteller-page.focus-mode .nav-btn[b-eyizp0jirt] {
    background: rgba(30, 60, 90, 0.9) !important;
    border-color: rgba(95, 168, 211, 0.4) !important;
    color: #e8f1f8 !important;
}

.focus-hint[b-eyizp0jirt] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 100;
    animation: hint-fade-b-eyizp0jirt 3s ease forwards;
}

.focus-hint kbd[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
}

@keyframes hint-fade-b-eyizp0jirt {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

/* ============================================
   READING STATS
   ============================================ */

.reading-stats[b-eyizp0jirt] {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    gap: 1rem;
    z-index: 50;
    transition: opacity 0.3s ease;
}

.reading-stats.hidden[b-eyizp0jirt] {
    opacity: 0;
    pointer-events: none;
}

.reading-stats .stat[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(30, 60, 90, 0.7);
    padding: 0.4rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    color: #8ab8d4;
    backdrop-filter: blur(8px);
}

.reading-stats .stat svg[b-eyizp0jirt] {
    width: 14px;
    height: 14px;
}

/* ============================================
   CHAPTER READING TIME
   ============================================ */

.chapter-reading-time[b-eyizp0jirt] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #5fa8d3;
    font-family: system-ui, -apple-system, sans-serif;
}

/* ============================================
   READING ACHIEVEMENT
   ============================================ */

.reading-achievement[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(95, 168, 211, 0.15);
    border: 1px solid rgba(95, 168, 211, 0.3);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    margin: 2rem 0;
}

.achievement-icon[b-eyizp0jirt] {
    font-size: 2.5rem;
}

.achievement-text[b-eyizp0jirt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.achievement-text strong[b-eyizp0jirt] {
    font-size: 1.1rem;
    color: #7dc4e8;
}

.achievement-text span[b-eyizp0jirt] {
    font-size: 0.9rem;
    color: #8ab8d4;
}

/* ============================================
   GLOSSARY TOOLTIPS
   ============================================ */

.glossary-term[b-eyizp0jirt] {
    border-bottom: 1px dotted currentColor;
    cursor: help;
    position: relative;
}

.glossary-term:hover[b-eyizp0jirt] {
    color: #7dc4e8;
}

.glossary-term[b-eyizp0jirt]::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 35, 55, 0.95);
    color: #e8f1f8;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-style: normal;
    white-space: nowrap;
    max-width: 250px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 20px transparent;
}

.glossary-term:hover[b-eyizp0jirt]::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 8px);
}

/* ============================================
   WEATHER PARTICLES (STORM)
   ============================================ */

.weather-particles[b-eyizp0jirt] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.weather-particles.storm-active[b-eyizp0jirt] {
    background: linear-gradient(180deg, rgba(20, 30, 50, 0.3) 0%, transparent 50%);
}

.raindrop[b-eyizp0jirt] {
    position: absolute;
    top: -20px;
    left: var(--x);
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, transparent, rgba(150, 200, 255, 0.6));
    animation: rain-fall-b-eyizp0jirt 0.8s linear infinite;
    animation-delay: var(--delay);
}

@keyframes rain-fall-b-eyizp0jirt {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0.3;
    }
}

/* ============================================
   CLOUD THEME OVERRIDES FOR NEW COMPONENTS
   ============================================ */

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .control-btn[b-eyizp0jirt],
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .reading-stats .stat[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.9);
    color: #1a3a52;
    border-color: rgba(26, 58, 82, 0.2);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .control-btn.active[b-eyizp0jirt] {
    background: #3d7ea6;
    color: white;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .glossary-term[b-eyizp0jirt]::after {
    background: rgba(255, 255, 255, 0.98);
    color: #1a3a52;
    border: 1px solid rgba(26, 58, 82, 0.15);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .reading-achievement[b-eyizp0jirt] {
    background: rgba(61, 126, 166, 0.15);
    border-color: rgba(61, 126, 166, 0.3);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .achievement-text strong[b-eyizp0jirt] {
    color: #2d6a8a;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .raindrop[b-eyizp0jirt] {
    background: linear-gradient(180deg, transparent, rgba(50, 100, 150, 0.4));
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean).focus-mode[b-eyizp0jirt] {
    background: #0a1520 !important;
}

/* ============================================
   VOICE READER
   ============================================ */

.voice-reader-bar[b-eyizp0jirt] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 35, 55, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    z-index: 200;
    backdrop-filter: blur(20px);
    animation: slide-up-b-eyizp0jirt 0.3s ease;
}

@keyframes slide-up-b-eyizp0jirt {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.voice-reader-info[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #8ab8d4;
    font-size: 0.85rem;
}

.voice-reader-info svg[b-eyizp0jirt] {
    width: 18px;
    height: 18px;
    color: #5fa8d3;
}

.voice-reader-controls[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.voice-btn[b-eyizp0jirt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #e8f1f8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.voice-btn:hover:not(:disabled)[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.voice-btn:disabled[b-eyizp0jirt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.voice-btn svg[b-eyizp0jirt] {
    width: 20px;
    height: 20px;
}

.voice-btn.primary[b-eyizp0jirt] {
    width: 50px;
    height: 50px;
    background: #5fa8d3;
    border-color: #5fa8d3;
}

.voice-btn.primary:hover[b-eyizp0jirt] {
    background: #7dc4e8;
    box-shadow: 0 0 20px rgba(95, 168, 211, 0.5);
}

.voice-btn.stop[b-eyizp0jirt] {
    background: rgba(220, 80, 80, 0.3);
    border-color: rgba(220, 80, 80, 0.5);
}

.voice-btn.stop:hover[b-eyizp0jirt] {
    background: rgba(220, 80, 80, 0.5);
}

.voice-btn.auto-continue[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.1);
}

.voice-btn.auto-continue.active[b-eyizp0jirt] {
    background: rgba(100, 200, 100, 0.4);
    border-color: rgba(100, 200, 100, 0.6);
    color: #a0ffb0;
}

.voice-btn.auto-continue.active:hover[b-eyizp0jirt] {
    background: rgba(100, 200, 100, 0.5);
}

.voice-options[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.voice-speed[b-eyizp0jirt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #8ab8d4;
    font-size: 0.8rem;
}

.voice-speed label[b-eyizp0jirt] {
    color: #5fa8d3;
}

.voice-speed input[type="range"][b-eyizp0jirt] {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
}

.voice-speed input[type="range"][b-eyizp0jirt]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #5fa8d3;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.voice-speed input[type="range"][b-eyizp0jirt]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Extra bottom padding when voice reader bar is active */
.storyteller-page:has(.voice-reader-bar) .chapter-container[b-eyizp0jirt] {
    padding-bottom: 10rem;
}

.storyteller-page:has(.voice-reader-bar) .continue-section[b-eyizp0jirt] {
    margin-bottom: 5rem;
}

.storyteller-page:has(.voice-reader-bar) .story-complete[b-eyizp0jirt] {
    padding-bottom: 6rem;
}

/* Reading Active Paragraph Highlight */
.story-paragraph.reading-active[b-eyizp0jirt] {
    background: rgba(95, 168, 211, 0.25) !important;
    border-left: 4px solid #5fa8d3 !important;
    padding-left: 1.5rem !important;
    margin-left: 0;
    padding-right: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-radius: 0 12px 12px 0;
    animation: pulse-highlight-b-eyizp0jirt 2s ease-in-out infinite !important;
    box-shadow: 0 2px 15px rgba(95, 168, 211, 0.3);
    position: relative;
    opacity: 1 !important;
    text-indent: 0 !important;
}

.story-paragraph.reading-active[b-eyizp0jirt]::before {
    content: "▶";
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: #5fa8d3;
    font-size: 0.7rem;
}

@keyframes pulse-highlight-b-eyizp0jirt {
    0%, 100% { background: rgba(95, 168, 211, 0.2); }
    50% { background: rgba(95, 168, 211, 0.35); }
}

/* Cloud Theme Voice Reader */
.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .voice-reader-bar[b-eyizp0jirt] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(26, 58, 82, 0.15);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .voice-reader-info[b-eyizp0jirt] {
    color: #2d5a7a;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .voice-btn[b-eyizp0jirt] {
    background: rgba(26, 58, 82, 0.1);
    border-color: rgba(26, 58, 82, 0.2);
    color: #1a3a52;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .voice-btn.primary[b-eyizp0jirt] {
    background: #3d7ea6;
    border-color: #3d7ea6;
    color: white;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .voice-speed[b-eyizp0jirt] {
    color: #2d5a7a;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .voice-speed input[type="range"][b-eyizp0jirt] {
    background: rgba(26, 58, 82, 0.2);
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .voice-btn.auto-continue.active[b-eyizp0jirt] {
    background: rgba(60, 160, 80, 0.3);
    border-color: rgba(60, 160, 80, 0.5);
    color: #2a8040;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active[b-eyizp0jirt] {
    background: rgba(61, 126, 166, 0.3) !important;
    border-color: #3d7ea6 !important;
    box-shadow: 0 2px 20px rgba(61, 126, 166, 0.4);
    color: #1a3a52 !important;
}

.storyteller-page.moby-dick:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active[b-eyizp0jirt]::before {
    color: #3d7ea6;
}

/* Cloud Theme reading-active in FOCUS MODE - override dark text with white */
.storyteller-page.moby-dick.focus-mode:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active[b-eyizp0jirt] {
    background: rgba(30, 70, 110, 0.85) !important;
    border-color: #7dc4e8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 30px rgba(95, 168, 211, 0.6) !important;
}

.storyteller-page.moby-dick.focus-mode:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active[b-eyizp0jirt],
.storyteller-page.moby-dick.focus-mode:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active span[b-eyizp0jirt],
.storyteller-page.moby-dick.focus-mode:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active .glossary-term[b-eyizp0jirt] {
    color: #ffffff !important;
}

.storyteller-page.moby-dick.focus-mode:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active[b-eyizp0jirt]::before {
    color: #7dc4e8 !important;
}

.storyteller-page.moby-dick.focus-mode:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean) .story-paragraph.reading-active em[b-eyizp0jirt] {
    color: #a0e0ff !important;
}

/* Mobile Voice Reader */
@media (max-width: 768px) {
    .voice-reader-bar[b-eyizp0jirt] {
        flex-wrap: wrap;
        padding: 0.5rem 1rem;
        gap: 0.75rem;
    }

    .voice-reader-info[b-eyizp0jirt] {
        order: 1;
        width: 100%;
        justify-content: center;
        font-size: 0.75rem;
    }

    .voice-reader-controls[b-eyizp0jirt] {
        order: 2;
    }

    .voice-options[b-eyizp0jirt] {
        order: 3;
        gap: 0.5rem;
    }

    .voice-speed[b-eyizp0jirt] {
        order: 4;
    }

    .voice-btn[b-eyizp0jirt] {
        width: 36px;
        height: 36px;
    }

    .voice-btn.primary[b-eyizp0jirt] {
        width: 44px;
        height: 44px;
    }

    .voice-speed input[type="range"][b-eyizp0jirt] {
        width: 60px;
    }

    /* Adjust chapter container when voice reader is active */
    .storyteller-page .chapter-container[b-eyizp0jirt] {
        padding-bottom: 8rem;
    }
}
/* /Pages/Storyteller/PowerOfHabit.razor.rz.scp.css */
/* ============================================
   POWER OF HABIT STORYTELLER - IMMERSIVE EXPERIENCE
   ============================================ */

.storyteller-page.power-of-habit[b-6zt7p4gbh2] {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 30%, #0f3460 70%, #1a1a2e 100%);
    color: #e8f1f8;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* ============================================
   NEURAL AMBIENT BACKGROUND
   ============================================ */

.neural-ambient[b-6zt7p4gbh2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.synapse[b-6zt7p4gbh2] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(var(--theme-primary-rgb), 0.6);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.4);
    animation: synapse-pulse-b-6zt7p4gbh2 3s ease-in-out infinite;
}

.synapse-1[b-6zt7p4gbh2] {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.synapse-2[b-6zt7p4gbh2] {
    top: 45%;
    right: 20%;
    animation-delay: -1s;
}

.synapse-3[b-6zt7p4gbh2] {
    bottom: 30%;
    left: 25%;
    animation-delay: -2s;
}

@keyframes synapse-pulse-b-6zt7p4gbh2 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(2);
        opacity: 1;
    }
}

.loop[b-6zt7p4gbh2] {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(var(--theme-primary-rgb), 0.15);
    border-radius: 50%;
    animation: loop-rotate-b-6zt7p4gbh2 20s linear infinite;
}

.loop-1[b-6zt7p4gbh2] {
    top: 10%;
    right: 10%;
    width: 300px;
    height: 300px;
    animation-duration: 25s;
}

.loop-2[b-6zt7p4gbh2] {
    bottom: 15%;
    left: 5%;
    animation-delay: -10s;
    animation-direction: reverse;
}

@keyframes loop-rotate-b-6zt7p4gbh2 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================
   HABIT LOOP ANIMATION
   ============================================ */

.habit-loop-animation[b-6zt7p4gbh2] {
    position: fixed;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    width: 150px;
    height: 150px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.3;
}

.loop-segment[b-6zt7p4gbh2] {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.loop-segment.cue[b-6zt7p4gbh2] {
    animation: loop-cue-b-6zt7p4gbh2 4s ease-in-out infinite;
}

.loop-segment.routine[b-6zt7p4gbh2] {
    animation: loop-routine-b-6zt7p4gbh2 4s ease-in-out infinite;
    animation-delay: 1.33s;
}

.loop-segment.reward[b-6zt7p4gbh2] {
    animation: loop-reward-b-6zt7p4gbh2 4s ease-in-out infinite;
    animation-delay: 2.66s;
}

.loop-segment.cue span[b-6zt7p4gbh2] {
    transform: translateY(-60px);
    color: #f59e0b;
}

.loop-segment.routine span[b-6zt7p4gbh2] {
    transform: translateX(50px) translateY(30px);
    color: #10b981;
}

.loop-segment.reward span[b-6zt7p4gbh2] {
    transform: translateX(-50px) translateY(30px);
    color: #ec4899;
}

@keyframes loop-cue-b-6zt7p4gbh2 {
    0%, 100% { opacity: 0.3; }
    25% { opacity: 1; }
    50%, 75% { opacity: 0.3; }
}

@keyframes loop-routine-b-6zt7p4gbh2 {
    0%, 25% { opacity: 0.3; }
    50% { opacity: 1; }
    75%, 100% { opacity: 0.3; }
}

@keyframes loop-reward-b-6zt7p4gbh2 {
    0%, 50% { opacity: 0.3; }
    75% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* ============================================
   PROGRESS BAR
   ============================================ */

.story-progress[b-6zt7p4gbh2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.progress-bar[b-6zt7p4gbh2] {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent), #ec4899);
    transition: width 0.5s ease;
}

/* ============================================
   TOP NAVIGATION BAR
   ============================================ */

.story-top-bar[b-6zt7p4gbh2] {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    height: 60px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(26, 26, 46, 0) 100%);
    z-index: 50;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.story-top-bar.hidden[b-6zt7p4gbh2] {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.back-btn[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #e8f1f8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.back-btn:hover[b-6zt7p4gbh2] {
    background: rgba(255, 255, 255, 0.2);
}

.back-btn svg[b-6zt7p4gbh2] {
    width: 20px;
    height: 20px;
}

.chapter-indicator[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #e8f1f8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chapter-indicator:hover[b-6zt7p4gbh2],
.chapter-indicator.active[b-6zt7p4gbh2] {
    background: rgba(var(--theme-primary-rgb), 0.3);
}

.chapter-indicator svg[b-6zt7p4gbh2] {
    width: 18px;
    height: 18px;
}

.reading-controls[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-btn[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #e8f1f8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.control-btn:hover[b-6zt7p4gbh2] {
    background: rgba(255, 255, 255, 0.2);
}

.control-btn.active[b-6zt7p4gbh2] {
    background: rgba(var(--theme-primary-rgb), 0.4);
    color: #a5b4fc;
}

.control-btn:disabled[b-6zt7p4gbh2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.control-btn svg[b-6zt7p4gbh2] {
    width: 18px;
    height: 18px;
}

/* ============================================
   FOCUS MODE
   ============================================ */

.focus-hint[b-6zt7p4gbh2] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.75rem 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    z-index: 50;
    animation: hint-fade-b-6zt7p4gbh2 3s ease-out forwards;
}

.focus-hint kbd[b-6zt7p4gbh2] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: monospace;
    margin: 0 0.25rem;
}

@keyframes hint-fade-b-6zt7p4gbh2 {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
}

/* ============================================
   VOICE READER BAR
   ============================================ */

.voice-reader-bar[b-6zt7p4gbh2] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 1.5rem;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 60;
}

.voice-reader-info[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #a5b4fc;
    font-size: 0.875rem;
}

.voice-reader-info svg[b-6zt7p4gbh2] {
    width: 20px;
    height: 20px;
}

.voice-reader-controls[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.voice-btn[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #e8f1f8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.voice-btn:hover[b-6zt7p4gbh2] {
    background: rgba(255, 255, 255, 0.2);
}

.voice-btn.primary[b-6zt7p4gbh2] {
    width: 48px;
    height: 48px;
    background: var(--theme-primary);
}

.voice-btn.primary:hover[b-6zt7p4gbh2] {
    background: var(--theme-primary-hover);
}

.voice-btn.stop[b-6zt7p4gbh2] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.voice-btn.stop:hover[b-6zt7p4gbh2] {
    background: rgba(239, 68, 68, 0.4);
}

.voice-btn.auto-continue.active[b-6zt7p4gbh2] {
    background: rgba(var(--theme-primary-rgb), 0.3);
    color: #a5b4fc;
}

.voice-btn:disabled[b-6zt7p4gbh2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.voice-btn svg[b-6zt7p4gbh2] {
    width: 20px;
    height: 20px;
}

.voice-options[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.voice-speed[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    font-size: 0.875rem;
}

.voice-speed input[type="range"][b-6zt7p4gbh2] {
    width: 80px;
    accent-color: var(--theme-primary);
}

/* ============================================
   READING STATS
   ============================================ */

.reading-stats[b-6zt7p4gbh2] {
    position: fixed;
    top: 140px;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 40;
    transition: opacity 0.3s ease;
}

.reading-stats.hidden[b-6zt7p4gbh2] {
    opacity: 0;
    pointer-events: none;
}

.reading-stats .stat[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.875rem;
}

.reading-stats .stat svg[b-6zt7p4gbh2] {
    width: 16px;
    height: 16px;
}

/* ============================================
   TABLE OF CONTENTS
   ============================================ */

.toc-overlay[b-6zt7p4gbh2] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 70;
}

.toc-drawer[b-6zt7p4gbh2] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-right: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    z-index: 80;
    overflow-y: auto;
    animation: toc-slide-in-b-6zt7p4gbh2 0.3s ease;
}

@keyframes toc-slide-in-b-6zt7p4gbh2 {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.toc-header[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.toc-header h3[b-6zt7p4gbh2] {
    margin: 0;
    font-size: 1.25rem;
    color: #e8f1f8;
}

.toc-close[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #e8f1f8;
    cursor: pointer;
}

.toc-close:hover[b-6zt7p4gbh2] {
    background: rgba(255, 255, 255, 0.2);
}

.toc-close svg[b-6zt7p4gbh2] {
    width: 20px;
    height: 20px;
}

.toc-list[b-6zt7p4gbh2] {
    list-style: none;
    margin: 0;
    padding: 1rem;
}

.toc-item[b-6zt7p4gbh2] {
    margin-bottom: 0.5rem;
}

.toc-item button[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #94a3b8;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toc-item button:hover[b-6zt7p4gbh2] {
    background: rgba(255, 255, 255, 0.05);
    color: #e8f1f8;
}

.toc-item.active button[b-6zt7p4gbh2] {
    background: rgba(var(--theme-primary-rgb), 0.2);
    color: #a5b4fc;
}

.toc-item.completed button[b-6zt7p4gbh2] {
    color: #6ee7b7;
}

.toc-number[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: bold;
}

.toc-item.active .toc-number[b-6zt7p4gbh2] {
    background: var(--theme-primary);
    color: white;
}

.toc-item.completed .toc-number[b-6zt7p4gbh2] {
    background: rgba(16, 185, 129, 0.2);
}

.toc-title[b-6zt7p4gbh2] {
    flex: 1;
}

.toc-current[b-6zt7p4gbh2] {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: rgba(var(--theme-primary-rgb), 0.3);
    border-radius: 4px;
    color: #a5b4fc;
}

.toc-check[b-6zt7p4gbh2] {
    width: 18px;
    height: 18px;
    color: #10b981;
}

/* ============================================
   NAVIGATION CONTROLS
   ============================================ */

.story-nav[b-6zt7p4gbh2] {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    pointer-events: none;
    z-index: 30;
}

.nav-btn[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(26, 26, 46, 0.8);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.3);
    border-radius: 50%;
    color: #e8f1f8;
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.2s ease;
}

.nav-btn:hover:not(.disabled)[b-6zt7p4gbh2] {
    background: rgba(var(--theme-primary-rgb), 0.3);
    border-color: var(--theme-primary);
}

.nav-btn.disabled[b-6zt7p4gbh2] {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-btn svg[b-6zt7p4gbh2] {
    width: 24px;
    height: 24px;
}

/* ============================================
   CHAPTER CONTAINER
   ============================================ */

.chapter-container[b-6zt7p4gbh2] {
    position: relative;
    z-index: 10;
    padding: 160px 1.5rem 3rem;
    max-width: 800px;
    margin: 0 auto;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.chapter-container.transitioning[b-6zt7p4gbh2] {
    opacity: 0;
    transform: translateY(20px);
}

/* ============================================
   CHAPTER VISUAL
   ============================================ */

.chapter-visual[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    margin-bottom: 2rem;
    position: relative;
}

.visual-emoji[b-6zt7p4gbh2] {
    font-size: 5rem;
    animation: emoji-float-b-6zt7p4gbh2 3s ease-in-out infinite;
}

@keyframes emoji-float-b-6zt7p4gbh2 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Visual variations */
.visual-loop[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(var(--theme-primary-rgb), 0.1) 0%, transparent 70%);
}

.visual-cue[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
}

.visual-routine[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
}

.visual-reward[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
}

.visual-brain[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(var(--theme-accent-rgb), 0.1) 0%, transparent 70%);
}

.visual-keystone[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
}

.visual-willpower[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
}

.visual-change[b-6zt7p4gbh2] {
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.1) 0%, transparent 70%);
}

/* Brain pulse animation */
.brain-pulse[b-6zt7p4gbh2] {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--theme-accent-rgb), 0.3) 0%, transparent 70%);
    animation: brain-pulse-b-6zt7p4gbh2 2s ease-in-out infinite;
}

@keyframes brain-pulse-b-6zt7p4gbh2 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.2;
    }
}

/* Habit loop icon */
.habit-loop-icon[b-6zt7p4gbh2] {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--theme-primary-rgb), 0.3) 0%, transparent 70%);
    animation: habit-glow-pulse-b-6zt7p4gbh2 3s ease-in-out infinite;
}

.habit-loop-icon[b-6zt7p4gbh2]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    animation: habit-ring-pulse-b-6zt7p4gbh2 3s ease-in-out infinite;
}

@keyframes habit-glow-pulse-b-6zt7p4gbh2 {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

@keyframes habit-ring-pulse-b-6zt7p4gbh2 {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.1;
    }
}

/* ============================================
   CHAPTER CONTENT
   ============================================ */

.chapter-content[b-6zt7p4gbh2] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
}

.chapter-header[b-6zt7p4gbh2] {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(var(--theme-primary-rgb), 0.1);
}

.chapter-number[b-6zt7p4gbh2] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--theme-primary-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: bold;
    color: #a5b4fc;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.chapter-title[b-6zt7p4gbh2] {
    font-size: 2rem;
    font-weight: normal;
    color: #f1f5f9;
    margin: 0.5rem 0;
    line-height: 1.3;
}

.chapter-reading-time[b-6zt7p4gbh2] {
    font-size: 0.875rem;
    color: #64748b;
}

/* Chapter scroll progress indicator */
.chapter-scroll-indicator[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--theme-primary-rgb), 0.1);
}

.scroll-track[b-6zt7p4gbh2] {
    flex: 1;
    height: 4px;
    background: rgba(var(--theme-primary-rgb), 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.scroll-fill[b-6zt7p4gbh2] {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
    border-radius: 2px;
    transition: width 0.1s ease-out;
}

.scroll-percent[b-6zt7p4gbh2] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #a5b4fc;
    min-width: 36px;
    text-align: right;
}

.chapter-text[b-6zt7p4gbh2] {
    line-height: 1.9;
    font-size: 1.125rem;
}

.story-paragraph[b-6zt7p4gbh2] {
    margin-bottom: 1.5rem;
    color: #cbd5e1;
    transition: all 0.3s ease;
}

.story-paragraph.reading-active[b-6zt7p4gbh2] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    padding: 0.5rem 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 8px;
    border-left: 3px solid var(--theme-primary);
}

.story-paragraph.quote[b-6zt7p4gbh2] {
    font-style: italic;
    padding-left: 1.5rem;
    border-left: 3px solid var(--theme-primary);
    color: #e2e8f0;
}

.quote-mark[b-6zt7p4gbh2] {
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -0.2em;
}

.quote-attribution[b-6zt7p4gbh2] {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #64748b;
    font-style: normal;
}

.story-paragraph.emphasized[b-6zt7p4gbh2] {
    color: #f1f5f9;
    font-size: 1.2em;
}

.story-paragraph.key-insight[b-6zt7p4gbh2] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--theme-primary);
    margin-left: -0.5rem;
}

.insight-icon[b-6zt7p4gbh2] {
    margin-right: 0.5rem;
}

.chapter-attribution[b-6zt7p4gbh2] {
    text-align: right;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--theme-primary-rgb), 0.1);
    margin-top: 2rem;
    color: #64748b;
    font-style: italic;
}

/* ============================================
   CONTINUE & COMPLETE SECTIONS
   ============================================ */

.continue-section[b-6zt7p4gbh2] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.continue-btn[b-6zt7p4gbh2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-accent) 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.continue-btn:hover[b-6zt7p4gbh2] {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(var(--theme-primary-rgb), 0.3);
}

.continue-btn svg[b-6zt7p4gbh2] {
    width: 24px;
    height: 24px;
}

.story-complete[b-6zt7p4gbh2] {
    text-align: center;
    padding: 3rem 1.5rem;
}

.complete-icon[b-6zt7p4gbh2] {
    font-size: 4rem;
    display: block;
    margin-bottom: 1rem;
}

.story-complete h2[b-6zt7p4gbh2] {
    font-size: 2rem;
    color: #f1f5f9;
    margin-bottom: 1rem;
}

.story-complete p[b-6zt7p4gbh2] {
    color: #94a3b8;
    font-size: 1.125rem;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.reading-achievement[b-6zt7p4gbh2] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(var(--theme-primary-rgb), 0.1);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.achievement-icon[b-6zt7p4gbh2] {
    font-size: 2rem;
}

.achievement-text[b-6zt7p4gbh2] {
    text-align: left;
}

.achievement-text strong[b-6zt7p4gbh2] {
    display: block;
    color: #a5b4fc;
    margin-bottom: 0.25rem;
}

.achievement-text span[b-6zt7p4gbh2] {
    font-size: 0.875rem;
    color: #64748b;
}

.restart-btn[b-6zt7p4gbh2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #e8f1f8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.restart-btn:hover[b-6zt7p4gbh2] {
    background: rgba(255, 255, 255, 0.2);
}

.restart-btn svg[b-6zt7p4gbh2] {
    width: 18px;
    height: 18px;
}

/* ============================================
   FONT SIZE VARIATIONS
   ============================================ */

.power-of-habit.font-small .chapter-text[b-6zt7p4gbh2] {
    font-size: 1rem;
}

.power-of-habit.font-large .chapter-text[b-6zt7p4gbh2] {
    font-size: 1.25rem;
}

/* ============================================
   FOCUS MODE
   ============================================ */

.power-of-habit.focus-mode .chapter-container[b-6zt7p4gbh2] {
    padding-top: 80px;
}

.power-of-habit.focus-mode .story-nav[b-6zt7p4gbh2] {
    opacity: 0;
}

.power-of-habit.focus-mode:hover .story-nav[b-6zt7p4gbh2] {
    opacity: 1;
}

/* ============================================
   THEME VARIATIONS
   ============================================ */

/* Space Theme */
.power-of-habit.theme-space[b-6zt7p4gbh2] {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.theme-space .chapter-content[b-6zt7p4gbh2] {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(99, 102, 241, 0.2);
}

/* Winter Theme */
.power-of-habit.theme-winter[b-6zt7p4gbh2] {
    background: linear-gradient(180deg, #1e3a5f 0%, #2c5282 50%, #1e3a5f 100%);
}

.theme-winter .progress-bar[b-6zt7p4gbh2] {
    background: linear-gradient(90deg, #63b3ed, #90cdf4);
}

.theme-winter .chapter-content[b-6zt7p4gbh2] {
    background: rgba(30, 58, 95, 0.8);
}

/* Nature Theme */
.power-of-habit.theme-nature[b-6zt7p4gbh2] {
    background: linear-gradient(180deg, #1a2f1a 0%, #2d4a2d 50%, #1a2f1a 100%);
}

.theme-nature .progress-bar[b-6zt7p4gbh2] {
    background: linear-gradient(90deg, #68d391, #9ae6b4);
}

.theme-nature .chapter-content[b-6zt7p4gbh2] {
    background: rgba(26, 47, 26, 0.8);
}

.theme-nature .chapter-number[b-6zt7p4gbh2] {
    background: rgba(104, 211, 145, 0.2);
    color: #9ae6b4;
}

/* Ocean Theme */
.power-of-habit.theme-ocean[b-6zt7p4gbh2] {
    background: linear-gradient(180deg, #0c4a6e 0%, #0369a1 50%, #0c4a6e 100%);
}

.theme-ocean .progress-bar[b-6zt7p4gbh2] {
    background: linear-gradient(90deg, #38bdf8, #7dd3fc);
}

.theme-ocean .chapter-content[b-6zt7p4gbh2] {
    background: rgba(12, 74, 110, 0.8);
}

/* Mystic Theme */
.power-of-habit.theme-mystic[b-6zt7p4gbh2] {
    background: linear-gradient(180deg, #2d1b4e 0%, #4c1d95 50%, #2d1b4e 100%);
}

.theme-mystic .progress-bar[b-6zt7p4gbh2] {
    background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}

.theme-mystic .chapter-content[b-6zt7p4gbh2] {
    background: rgba(45, 27, 78, 0.8);
}

/* Tron Theme */
.power-of-habit.theme-tron[b-6zt7p4gbh2] {
    background: linear-gradient(180deg, #0a0a0a 0%, #111827 50%, #0a0a0a 100%);
}

.theme-tron .progress-bar[b-6zt7p4gbh2] {
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
}

.theme-tron .chapter-content[b-6zt7p4gbh2] {
    background: rgba(10, 10, 10, 0.9);
    border-color: rgba(34, 211, 238, 0.3);
}

.theme-tron .chapter-number[b-6zt7p4gbh2] {
    background: rgba(34, 211, 238, 0.2);
    color: #22d3ee;
}

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

@media (max-width: 768px) {
    .story-top-bar[b-6zt7p4gbh2] {
        padding: 0 1rem;
    }

    .back-btn span[b-6zt7p4gbh2] {
        display: none;
    }

    .chapter-indicator span[b-6zt7p4gbh2] {
        display: none;
    }

    .reading-controls[b-6zt7p4gbh2] {
        gap: 0.25rem;
    }

    .control-btn[b-6zt7p4gbh2] {
        width: 32px;
        height: 32px;
    }

    .chapter-container[b-6zt7p4gbh2] {
        padding: 140px 1rem 2rem;
    }

    .chapter-content[b-6zt7p4gbh2] {
        padding: 1.5rem;
    }

    .chapter-title[b-6zt7p4gbh2] {
        font-size: 1.5rem;
    }

    .chapter-text[b-6zt7p4gbh2] {
        font-size: 1rem;
    }

    .nav-btn[b-6zt7p4gbh2] {
        width: 40px;
        height: 40px;
    }

    .voice-reader-bar[b-6zt7p4gbh2] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .voice-options[b-6zt7p4gbh2] {
        width: 100%;
        justify-content: center;
    }

    .habit-loop-animation[b-6zt7p4gbh2] {
        display: none;
    }

    .reading-stats[b-6zt7p4gbh2] {
        display: none;
    }
}

@media (max-width: 480px) {
    .toc-drawer[b-6zt7p4gbh2] {
        width: 100%;
        max-width: none;
    }

    .chapter-visual[b-6zt7p4gbh2] {
        height: 150px;
    }

    .visual-emoji[b-6zt7p4gbh2] {
        font-size: 3.5rem;
    }

    .chapter-content[b-6zt7p4gbh2] {
        padding: 1rem;
        border-radius: 12px;
    }

    .continue-btn[b-6zt7p4gbh2] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Storyteller/Rumi.razor.rz.scp.css */
/* ============================================
   RUMI STORYTELLER - THE PATH OF LOVE
   A mystical journey through Sufi wisdom
   ============================================ */

.storyteller-page.rumi[b-6b6kqnuq8p] {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 30%, #1f1035 70%, #0f0518 100%);
    color: #f0e6ff;
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* ============================================
   MYSTICAL AMBIENT BACKGROUND
   ============================================ */

.mystical-ambient[b-6b6kqnuq8p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Starfield */
.stars[b-6b6kqnuq8p] {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255, 220, 180, 0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 200, 150, 0.6), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255, 220, 180, 0.7), transparent),
        radial-gradient(1px 1px at 160px 120px, rgba(255, 200, 150, 0.5), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle-b-6b6kqnuq8p 4s ease-in-out infinite alternate;
}

@keyframes twinkle-b-6b6kqnuq8p {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

.cosmic-dust[b-6b6kqnuq8p] {
    position: absolute;
    width: 200%;
    height: 300px;
    background: linear-gradient(90deg, transparent 0%, rgba(180, 130, 220, 0.06) 50%, transparent 100%);
    animation: dust-drift-b-6b6kqnuq8p 30s linear infinite;
}

.cosmic-dust.dust-1[b-6b6kqnuq8p] {
    top: 15%;
    animation-duration: 35s;
}

.cosmic-dust.dust-2[b-6b6kqnuq8p] {
    top: 55%;
    animation-delay: -15s;
    animation-duration: 40s;
    opacity: 0.6;
}

@keyframes dust-drift-b-6b6kqnuq8p {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

.light-rays[b-6b6kqnuq8p] {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 100%;
    height: 200%;
    background: conic-gradient(from 180deg at 50% 50%, 
        transparent 0deg, 
        rgba(200, 150, 255, 0.03) 30deg, 
        transparent 60deg,
        rgba(255, 200, 150, 0.02) 90deg,
        transparent 120deg);
    animation: rotate-rays-b-6b6kqnuq8p 60s linear infinite;
    transform-origin: center;
}

@keyframes rotate-rays-b-6b6kqnuq8p {
    0% { transform: translateX(-50%) rotate(0deg); }
    100% { transform: translateX(-50%) rotate(360deg); }
}

/* ============================================
   ROSE PETALS (Floating Animation)
   ============================================ */

.rose-petals[b-6b6kqnuq8p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.petal[b-6b6kqnuq8p] {
    position: absolute;
    top: -20px;
    left: var(--x);
    width: calc(12px * var(--size));
    height: calc(18px * var(--size));
    background: linear-gradient(135deg, rgba(220, 120, 150, 0.6) 0%, rgba(180, 80, 120, 0.4) 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: petal-fall-b-6b6kqnuq8p 15s linear infinite;
    animation-delay: var(--delay);
    opacity: 0.7;
}

@keyframes petal-fall-b-6b6kqnuq8p {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.7; }
    90% { opacity: 0.7; }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   PROGRESS BAR
   ============================================ */

.storyteller-page.rumi .story-progress[b-6b6kqnuq8p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.storyteller-page.rumi .progress-bar[b-6b6kqnuq8p] {
    height: 100%;
    background: linear-gradient(90deg, #9d6bcc 0%, #d4a5ff 50%, #ffcc80 100%);
    transition: width 0.5s ease-out;
    box-shadow: 0 0 15px rgba(200, 150, 255, 0.6);
}

/* ============================================
   TOP NAVIGATION BAR
   ============================================ */

.storyteller-page.rumi .story-top-bar[b-6b6kqnuq8p] {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    z-index: 100;
    pointer-events: none;
    background: rgba(30, 15, 50, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(200, 150, 255, 0.15);
}

.storyteller-page.rumi .story-top-bar > *[b-6b6kqnuq8p] {
    pointer-events: auto;
}

.storyteller-page.rumi .back-btn[b-6b6kqnuq8p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(80, 50, 120, 0.8);
    border: 1px solid rgba(200, 150, 255, 0.2);
    border-radius: 25px;
    color: #f0e6ff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.storyteller-page.rumi .back-btn:hover[b-6b6kqnuq8p] {
    background: rgba(120, 80, 160, 0.9);
    transform: translateX(-2px);
}

.storyteller-page.rumi .back-btn svg[b-6b6kqnuq8p] {
    width: 18px;
    height: 18px;
}

.storyteller-page.rumi .chapter-indicator[b-6b6kqnuq8p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(80, 50, 120, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    border: 1px solid rgba(200, 150, 255, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.storyteller-page.rumi .chapter-indicator:hover[b-6b6kqnuq8p],
.storyteller-page.rumi .chapter-indicator.active[b-6b6kqnuq8p] {
    background: rgba(120, 80, 160, 0.9);
}

.storyteller-page.rumi .chapter-indicator svg[b-6b6kqnuq8p] {
    width: 18px;
    height: 18px;
}

/* ============================================
   TABLE OF CONTENTS DRAWER
   ============================================ */

.storyteller-page.rumi .toc-overlay[b-6b6kqnuq8p] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 200;
    animation: fade-in-b-6b6kqnuq8p 0.2s ease;
}

@keyframes fade-in-b-6b6kqnuq8p {
    from { opacity: 0; }
    to { opacity: 1; }
}

.storyteller-page.rumi .toc-drawer[b-6b6kqnuq8p] {
    position: fixed;
    top: 0;
    right: 0;
    width: min(350px, 85vw);
    height: 100vh;
    background: rgba(30, 15, 50, 0.98);
    border-left: 1px solid rgba(200, 150, 255, 0.15);
    z-index: 201;
    display: flex;
    flex-direction: column;
    animation: slide-in-b-6b6kqnuq8p 0.3s ease;
    backdrop-filter: blur(20px);
}

@keyframes slide-in-b-6b6kqnuq8p {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.storyteller-page.rumi .toc-header[b-6b6kqnuq8p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(200, 150, 255, 0.15);
}

.storyteller-page.rumi .toc-header h3[b-6b6kqnuq8p] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    color: #f0e6ff;
}

.storyteller-page.rumi .toc-close[b-6b6kqnuq8p] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(200, 150, 255, 0.15);
    border: none;
    color: #f0e6ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.storyteller-page.rumi .toc-close:hover[b-6b6kqnuq8p] {
    background: rgba(200, 150, 255, 0.25);
}

.storyteller-page.rumi .toc-list[b-6b6kqnuq8p] {
    list-style: none;
    margin: 0;
    padding: 1rem;
    overflow-y: auto;
    flex: 1;
}

.storyteller-page.rumi .toc-item[b-6b6kqnuq8p] {
    margin-bottom: 0.5rem;
}

.storyteller-page.rumi .toc-item button[b-6b6kqnuq8p] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(200, 150, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 12px;
    color: #c4b0e0;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.storyteller-page.rumi .toc-item button:hover[b-6b6kqnuq8p] {
    background: rgba(200, 150, 255, 0.15);
    border-color: rgba(200, 150, 255, 0.3);
}

.storyteller-page.rumi .toc-item.active button[b-6b6kqnuq8p] {
    background: rgba(200, 150, 255, 0.2);
    border-color: rgba(200, 150, 255, 0.4);
    color: #ffffff;
}

.storyteller-page.rumi .toc-number[b-6b6kqnuq8p] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 150, 255, 0.15);
    border-radius: 50%;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.storyteller-page.rumi .toc-item.active .toc-number[b-6b6kqnuq8p] {
    background: linear-gradient(135deg, #9d6bcc, #d4a5ff);
    color: #ffffff;
}

.storyteller-page.rumi .toc-current[b-6b6kqnuq8p] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.25rem 0.5rem;
    background: rgba(200, 150, 255, 0.3);
    border-radius: 4px;
    color: #d4a5ff;
}

/* ============================================
   NAVIGATION CONTROLS
   ============================================ */

.storyteller-page.rumi .story-nav[b-6b6kqnuq8p] {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    z-index: 50;
    pointer-events: none;
}

.storyteller-page.rumi .nav-btn[b-6b6kqnuq8p] {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(80, 50, 120, 0.8);
    border: 1px solid rgba(200, 150, 255, 0.2);
    color: #f0e6ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
}

.storyteller-page.rumi .nav-btn:hover:not(.disabled)[b-6b6kqnuq8p] {
    background: rgba(120, 80, 160, 0.9);
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(200, 150, 255, 0.4);
}

.storyteller-page.rumi .nav-btn.disabled[b-6b6kqnuq8p] {
    opacity: 0.3;
    cursor: not-allowed;
}

.storyteller-page.rumi .nav-btn svg[b-6b6kqnuq8p] {
    width: 24px;
    height: 24px;
}

/* ============================================
   READING CONTROLS
   ============================================ */

.storyteller-page.rumi .reading-controls[b-6b6kqnuq8p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.storyteller-page.rumi .control-btn[b-6b6kqnuq8p] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(80, 50, 120, 0.8);
    border: 1px solid rgba(200, 150, 255, 0.2);
    color: #f0e6ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    font-weight: 600;
}

.storyteller-page.rumi .control-btn:hover:not(:disabled)[b-6b6kqnuq8p] {
    background: rgba(120, 80, 160, 0.9);
    transform: scale(1.05);
}

.storyteller-page.rumi .control-btn:disabled[b-6b6kqnuq8p] {
    opacity: 0.4;
    cursor: not-allowed;
}

.storyteller-page.rumi .control-btn.active[b-6b6kqnuq8p] {
    background: rgba(200, 150, 255, 0.6);
    box-shadow: 0 0 15px rgba(200, 150, 255, 0.5);
}

.storyteller-page.rumi .control-btn svg[b-6b6kqnuq8p] {
    width: 18px;
    height: 18px;
}

/* ============================================
   READING STATS
   ============================================ */

.storyteller-page.rumi .reading-stats[b-6b6kqnuq8p] {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    gap: 1rem;
    z-index: 50;
}

.storyteller-page.rumi .reading-stats.hidden[b-6b6kqnuq8p] {
    opacity: 0;
    pointer-events: none;
}

.storyteller-page.rumi .reading-stats .stat[b-6b6kqnuq8p] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(80, 50, 120, 0.7);
    padding: 0.4rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    color: #c4b0e0;
}

/* ============================================
   CHAPTER CONTAINER
   ============================================ */

.storyteller-page.rumi .chapter-container[b-6b6kqnuq8p] {
    position: relative;
    z-index: 10;
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7rem 2rem 4rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.storyteller-page.rumi .chapter-container.transitioning[b-6b6kqnuq8p] {
    opacity: 0;
    transform: translateY(20px);
}

/* ============================================
   CHAPTER VISUAL
   ============================================ */

.storyteller-page.rumi .chapter-visual[b-6b6kqnuq8p] {
    width: 100%;
    max-width: 600px;
    height: 180px;
    margin-bottom: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.storyteller-page.rumi .visual-emoji[b-6b6kqnuq8p] {
    font-size: 5rem;
    filter: drop-shadow(0 0 40px rgba(200, 150, 255, 0.5));
    animation: pulse-glow-b-6b6kqnuq8p 3s ease-in-out infinite;
}

@keyframes pulse-glow-b-6b6kqnuq8p {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(200, 150, 255, 0.4)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 50px rgba(200, 150, 255, 0.7)); }
}

/* Whirling Dervish Animation */
.whirling-dervish[b-6b6kqnuq8p] {
    position: absolute;
    width: 80px;
    height: 120px;
    animation: whirl-b-6b6kqnuq8p 4s linear infinite;
}

.whirling-dervish[b-6b6kqnuq8p]::before {
    content: '🕺';
    font-size: 4rem;
    position: absolute;
    animation: whirl-inner-b-6b6kqnuq8p 2s linear infinite;
}

@keyframes whirl-b-6b6kqnuq8p {
    0% { transform: rotate(0deg) translateX(60px) rotate(0deg); }
    100% { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

@keyframes whirl-inner-b-6b6kqnuq8p {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   CHAPTER CONTENT
   ============================================ */

.storyteller-page.rumi .chapter-content[b-6b6kqnuq8p] {
    max-width: 700px;
    width: 100%;
}

.storyteller-page.rumi .chapter-header[b-6b6kqnuq8p] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.storyteller-page.rumi .chapter-number[b-6b6kqnuq8p] {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #d4a5ff;
    margin-bottom: 0.75rem;
    font-family: system-ui, sans-serif;
}

.storyteller-page.rumi .chapter-title[b-6b6kqnuq8p] {
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 30px rgba(200, 150, 255, 0.4);
}

.storyteller-page.rumi .chapter-reading-time[b-6b6kqnuq8p] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #c4b0e0;
    font-family: system-ui, sans-serif;
}

.storyteller-page.rumi .chapter-text[b-6b6kqnuq8p] {
    font-size: 1.2rem;
    line-height: 1.9;
}

/* ============================================
   RUMI QUOTES
   ============================================ */

.rumi-quote[b-6b6kqnuq8p] {
    margin: 2rem 0;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, rgba(100, 60, 140, 0.3) 0%, rgba(80, 40, 120, 0.2) 100%);
    border-left: 4px solid #9d6bcc;
    border-radius: 0 16px 16px 0;
    position: relative;
    opacity: 0;
    animation: quote-appear-b-6b6kqnuq8p 0.8s ease-out forwards;
}

.rumi-quote:nth-child(1)[b-6b6kqnuq8p] { animation-delay: 0.2s; }
.rumi-quote:nth-child(2)[b-6b6kqnuq8p] { animation-delay: 0.4s; }
.rumi-quote:nth-child(3)[b-6b6kqnuq8p] { animation-delay: 0.6s; }
.rumi-quote:nth-child(4)[b-6b6kqnuq8p] { animation-delay: 0.8s; }
.rumi-quote:nth-child(5)[b-6b6kqnuq8p] { animation-delay: 1.0s; }

@keyframes quote-appear-b-6b6kqnuq8p {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.rumi-quote[b-6b6kqnuq8p]::before {
    content: '"';
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-size: 4rem;
    color: rgba(200, 150, 255, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

.rumi-quote p[b-6b6kqnuq8p] {
    margin: 0;
    font-style: italic;
    color: #f0e6ff;
    text-indent: 0;
}

.rumi-quote.highlighted[b-6b6kqnuq8p] {
    background: linear-gradient(135deg, rgba(200, 150, 255, 0.25) 0%, rgba(255, 200, 150, 0.15) 100%);
    border-color: #d4a5ff;
    box-shadow: 0 4px 30px rgba(200, 150, 255, 0.2);
}

.rumi-quote.highlighted p[b-6b6kqnuq8p] {
    font-size: 1.35rem;
    color: #ffffff;
}

/* Quote Reflection */
.quote-reflection[b-6b6kqnuq8p] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(200, 150, 255, 0.2);
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.reflection-icon[b-6b6kqnuq8p] {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.quote-reflection p[b-6b6kqnuq8p] {
    font-size: 0.95rem !important;
    font-style: normal !important;
    color: #c4b0e0 !important;
    line-height: 1.6;
}

/* ============================================
   CHAPTER ATTRIBUTION
   ============================================ */

.storyteller-page.rumi .chapter-attribution[b-6b6kqnuq8p] {
    text-align: right;
    margin-top: 2rem;
    font-size: 0.95rem;
    color: #a890c4;
    font-style: italic;
}

/* ============================================
   CONTINUE BUTTON
   ============================================ */

.storyteller-page.rumi .continue-section[b-6b6kqnuq8p] {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.storyteller-page.rumi .continue-btn[b-6b6kqnuq8p] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #7d4bac 0%, #9d6bcc 100%);
    border: none;
    border-radius: 30px;
    color: white;
    font-size: 1.1rem;
    font-family: system-ui, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 25px rgba(157, 107, 204, 0.4);
}

.storyteller-page.rumi .continue-btn:hover[b-6b6kqnuq8p] {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(157, 107, 204, 0.5);
    background: linear-gradient(135deg, #8d5bbc 0%, #ad7bdc 100%);
}

.storyteller-page.rumi .continue-btn svg[b-6b6kqnuq8p] {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.storyteller-page.rumi .continue-btn:hover svg[b-6b6kqnuq8p] {
    transform: translateX(5px);
}

/* ============================================
   STORY COMPLETE
   ============================================ */

.storyteller-page.rumi .story-complete[b-6b6kqnuq8p] {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
}

.storyteller-page.rumi .complete-icon[b-6b6kqnuq8p] {
    font-size: 5rem;
    display: block;
    margin-bottom: 1.5rem;
    animation: pulse-glow-b-6b6kqnuq8p 3s ease-in-out infinite;
}

.storyteller-page.rumi .story-complete h2[b-6b6kqnuq8p] {
    font-size: 2rem;
    margin: 0 0 1rem;
    font-weight: 400;
    color: #ffffff;
}

.storyteller-page.rumi .story-complete > p[b-6b6kqnuq8p] {
    color: #c4b0e0;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.storyteller-page.rumi .reading-achievement[b-6b6kqnuq8p] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(200, 150, 255, 0.15);
    border: 1px solid rgba(200, 150, 255, 0.3);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    margin: 2rem auto;
    max-width: 300px;
}

.storyteller-page.rumi .achievement-icon[b-6b6kqnuq8p] {
    font-size: 2.5rem;
}

.storyteller-page.rumi .achievement-text[b-6b6kqnuq8p] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
}

.storyteller-page.rumi .achievement-text strong[b-6b6kqnuq8p] {
    color: #d4a5ff;
}

.storyteller-page.rumi .achievement-text span[b-6b6kqnuq8p] {
    font-size: 0.9rem;
    color: #c4b0e0;
}

.storyteller-page.rumi .restart-btn[b-6b6kqnuq8p] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(200, 150, 255, 0.2);
    border: 1px solid rgba(200, 150, 255, 0.5);
    border-radius: 25px;
    color: #d4a5ff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.storyteller-page.rumi .restart-btn:hover[b-6b6kqnuq8p] {
    background: rgba(200, 150, 255, 0.3);
    transform: scale(1.05);
}

/* ============================================
   FOCUS MODE
   ============================================ */

.storyteller-page.rumi.focus-mode[b-6b6kqnuq8p] {
    background: #0f0518 !important;
}

.storyteller-page.rumi.focus-mode .mystical-ambient[b-6b6kqnuq8p],
.storyteller-page.rumi.focus-mode .rose-petals[b-6b6kqnuq8p] {
    opacity: 0.2;
}

.storyteller-page.rumi.focus-mode .story-nav[b-6b6kqnuq8p],
.storyteller-page.rumi.focus-mode .reading-stats[b-6b6kqnuq8p] {
    opacity: 0;
    pointer-events: none;
}

.storyteller-page.rumi.focus-mode:hover .story-nav[b-6b6kqnuq8p] {
    opacity: 1;
    pointer-events: auto;
}

.storyteller-page.rumi.focus-mode .story-top-bar.hidden[b-6b6kqnuq8p] {
    transform: translateY(-100%);
    opacity: 0;
}

.storyteller-page.rumi.focus-mode .chapter-container[b-6b6kqnuq8p] {
    max-width: 650px;
    margin: 0 auto;
}

.storyteller-page.rumi .focus-hint[b-6b6kqnuq8p] {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    z-index: 100;
    animation: hint-fade-b-6b6kqnuq8p 3s ease forwards;
}

.storyteller-page.rumi .focus-hint kbd[b-6b6kqnuq8p] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
}

@keyframes hint-fade-b-6b6kqnuq8p {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

/* ============================================
   FONT SIZE LEVELS
   ============================================ */

.storyteller-page.rumi.font-small .chapter-text[b-6b6kqnuq8p] { font-size: 1rem; }
.storyteller-page.rumi.font-large .chapter-text[b-6b6kqnuq8p] { font-size: 1.4rem; }
.storyteller-page.rumi.font-small .rumi-quote.highlighted p[b-6b6kqnuq8p] { font-size: 1.15rem; }
.storyteller-page.rumi.font-large .rumi-quote.highlighted p[b-6b6kqnuq8p] { font-size: 1.55rem; }

/* ============================================
   CLOUD THEME (Light)
   ============================================ */

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron)[b-6b6kqnuq8p] {
    background: linear-gradient(180deg, #faf5ff 0%, #f0e6ff 30%, #e8d8f8 70%, #dcc8f0 100%);
    color: #3d2060;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .stars[b-6b6kqnuq8p] {
    opacity: 0.2;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .chapter-title[b-6b6kqnuq8p] {
    color: #3d2060;
    text-shadow: none;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .chapter-number[b-6b6kqnuq8p] {
    color: #7d4bac;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .rumi-quote[b-6b6kqnuq8p] {
    background: linear-gradient(135deg, rgba(157, 107, 204, 0.15) 0%, rgba(200, 150, 255, 0.1) 100%);
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .rumi-quote p[b-6b6kqnuq8p] {
    color: #4d3070;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .rumi-quote.highlighted p[b-6b6kqnuq8p] {
    color: #3d2060;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .quote-reflection p[b-6b6kqnuq8p] {
    color: #6d5090 !important;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .nav-btn[b-6b6kqnuq8p],
.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .control-btn[b-6b6kqnuq8p],
.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .back-btn[b-6b6kqnuq8p],
.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .chapter-indicator[b-6b6kqnuq8p] {
    background: rgba(255, 255, 255, 0.9);
    color: #3d2060;
    border-color: rgba(157, 107, 204, 0.3);
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .story-top-bar[b-6b6kqnuq8p] {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(157, 107, 204, 0.2);
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .toc-drawer[b-6b6kqnuq8p] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(157, 107, 204, 0.2);
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .toc-header h3[b-6b6kqnuq8p] {
    color: #3d2060;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .toc-item button[b-6b6kqnuq8p] {
    color: #5d4080;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron) .progress-bar[b-6b6kqnuq8p] {
    background: linear-gradient(90deg, #9d6bcc 0%, #7d4bac 100%);
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron).focus-mode[b-6b6kqnuq8p] {
    background: #1a0a2e !important;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron).focus-mode .chapter-title[b-6b6kqnuq8p] {
    color: #ffffff !important;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron).focus-mode .rumi-quote p[b-6b6kqnuq8p] {
    color: #f0e6ff !important;
}

.storyteller-page.rumi:not(.theme-space):not(.theme-winter):not(.theme-nature):not(.theme-ocean):not(.theme-mystic):not(.theme-tron).focus-mode .quote-reflection p[b-6b6kqnuq8p] {
    color: #c4b0e0 !important;
}

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

@media (max-width: 768px) {
    .storyteller-page.rumi .chapter-container[b-6b6kqnuq8p] {
        padding: 5rem 1.5rem 3rem;
    }

    .storyteller-page.rumi .chapter-title[b-6b6kqnuq8p] {
        font-size: 1.8rem;
    }

    .storyteller-page.rumi .rumi-quote[b-6b6kqnuq8p] {
        padding: 1.5rem;
    }

    .storyteller-page.rumi .rumi-quote.highlighted p[b-6b6kqnuq8p] {
        font-size: 1.2rem;
    }

    .storyteller-page.rumi .visual-emoji[b-6b6kqnuq8p] {
        font-size: 4rem;
    }

    .storyteller-page.rumi .chapter-visual[b-6b6kqnuq8p] {
        height: 140px;
        margin-bottom: 2rem;
    }

    .storyteller-page.rumi .story-nav[b-6b6kqnuq8p] {
        padding: 0 0.5rem;
    }

    .storyteller-page.rumi .nav-btn[b-6b6kqnuq8p] {
        width: 40px;
        height: 40px;
    }

    .storyteller-page.rumi .back-btn span[b-6b6kqnuq8p] {
        display: none;
    }

    .storyteller-page.rumi .back-btn[b-6b6kqnuq8p] {
        padding: 0.5rem;
        border-radius: 50%;
    }

    .storyteller-page.rumi .toc-drawer[b-6b6kqnuq8p] {
        width: 100vw;
    }
}

@media (max-width: 480px) {
    .storyteller-page.rumi .chapter-title[b-6b6kqnuq8p] {
        font-size: 1.5rem;
    }

    .storyteller-page.rumi .chapter-text[b-6b6kqnuq8p] {
        font-size: 1rem;
    }

    .storyteller-page.rumi .continue-btn[b-6b6kqnuq8p] {
        padding: 0.85rem 1.5rem;
        font-size: 1rem;
    }

    .storyteller-page.rumi .reading-controls[b-6b6kqnuq8p] {
        gap: 0.25rem;
    }

    .storyteller-page.rumi .control-btn[b-6b6kqnuq8p] {
        width: 32px;
        height: 32px;
    }
}
/* /Pages/Storyteller/StorytellerHub.razor.rz.scp.css */
/* ============================================
   STORYTELLER HUB - STORY LIBRARY
   ============================================ */

.storyteller-hub[b-h3nrxx6khr] {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
    color: #1e293b;
}

/* ============================================
   AMBIENT BACKGROUND
   ============================================ */

.hub-ambient[b-h3nrxx6khr] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle[b-h3nrxx6khr] {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    animation: particle-float-b-h3nrxx6khr 15s ease-in-out infinite;
}

.particle-1[b-h3nrxx6khr] {
    left: 20%;
    top: 30%;
    animation-delay: 0s;
}

.particle-2[b-h3nrxx6khr] {
    left: 70%;
    top: 50%;
    animation-delay: -5s;
}

.particle-3[b-h3nrxx6khr] {
    left: 45%;
    top: 70%;
    animation-delay: -10s;
}

@keyframes particle-float-b-h3nrxx6khr {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-30px) translateX(10px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-60px) translateX(-5px);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-30px) translateX(15px);
        opacity: 0.5;
    }
}

.glow[b-h3nrxx6khr] {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}

.glow-1[b-h3nrxx6khr] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    top: -100px;
    right: -100px;
    animation: glow-pulse-b-h3nrxx6khr 8s ease-in-out infinite;
}

.glow-2[b-h3nrxx6khr] {
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    bottom: -100px;
    left: -100px;
    animation: glow-pulse-b-h3nrxx6khr 8s ease-in-out infinite reverse;
}

@keyframes glow-pulse-b-h3nrxx6khr {
    0%, 100% {
        transform: scale(1);
        opacity: 0.15;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.2;
    }
}

/* ============================================
   CONTAINER
   ============================================ */

.hub-container[b-h3nrxx6khr] {
    position: relative;
    z-index: 10;
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* ============================================
   HERO SECTION
   ============================================ */

.hub-hero[b-h3nrxx6khr] {
    text-align: center;
    margin-bottom: 4rem;
}

.hero-icon[b-h3nrxx6khr] {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: gentle-bounce-b-h3nrxx6khr 3s ease-in-out infinite;
}

@keyframes gentle-bounce-b-h3nrxx6khr {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.hero-title[b-h3nrxx6khr] {
    font-size: 3rem;
    font-weight: 700;
    margin: 0 0 1rem;
    background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle[b-h3nrxx6khr] {
    font-size: 1.2rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title[b-h3nrxx6khr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #1e293b;
}

.section-title svg[b-h3nrxx6khr] {
    width: 24px;
    height: 24px;
    color: #6366f1;
}

/* ============================================
   STORIES GRID
   ============================================ */

.stories-grid[b-h3nrxx6khr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.story-card[b-h3nrxx6khr] {
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
    cursor: pointer;
}

.story-card:hover[b-h3nrxx6khr] {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.story-card.featured[b-h3nrxx6khr] {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 280px 1fr auto;
    align-items: center;
}

.story-card.featured .story-cover[b-h3nrxx6khr] {
    height: 100%;
    min-height: 220px;
}

.story-card.coming-soon[b-h3nrxx6khr] {
    opacity: 0.7;
    cursor: default;
}

.story-card.coming-soon:hover[b-h3nrxx6khr] {
    transform: none;
    box-shadow: none;
}

.card-glow[b-h3nrxx6khr] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #06b6d4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.story-card:hover .card-glow[b-h3nrxx6khr] {
    opacity: 1;
}

/* ============================================
   STORY COVER
   ============================================ */

.story-cover[b-h3nrxx6khr] {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    position: relative;
    overflow: hidden;
}

.story-cover.moby-dick-cover[b-h3nrxx6khr] {
    background: linear-gradient(180deg, #0c1929 0%, #1a3a52 50%, #0d2137 100%);
}

.story-cover.rumi-cover[b-h3nrxx6khr] {
    background: linear-gradient(180deg, #1a0a2e 0%, #2d1b4e 50%, #1f1035 100%);
    position: relative;
}

.story-cover.rumi-cover[b-h3nrxx6khr]::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(1px 1px at 20px 30px, rgba(255, 220, 180, 0.6), transparent),
        radial-gradient(1px 1px at 60px 50px, rgba(255, 200, 150, 0.4), transparent),
        radial-gradient(1px 1px at 100px 70px, rgba(255, 255, 255, 0.3), transparent);
    background-size: 120px 100px;
    animation: twinkle-stars-b-h3nrxx6khr 3s ease-in-out infinite alternate;
}

@keyframes twinkle-stars-b-h3nrxx6khr {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.story-cover.habit-cover[b-h3nrxx6khr] {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    position: relative;
}

.story-cover.habit-cover[b-h3nrxx6khr]::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.4) 0%, transparent 70%);
    animation: habit-cover-pulse-b-h3nrxx6khr 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes habit-cover-pulse-b-h3nrxx6khr {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

.cover-emoji[b-h3nrxx6khr] {
    font-size: 4rem;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.cover-wave[b-h3nrxx6khr] {
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 60px;
    background: linear-gradient(180deg, transparent 0%, rgba(95, 168, 211, 0.3) 100%);
    border-radius: 50% 50% 0 0;
    animation: cover-wave-b-h3nrxx6khr 4s ease-in-out infinite;
}

@keyframes cover-wave-b-h3nrxx6khr {
    0%, 100% {
        transform: translateX(-2%);
    }
    50% {
        transform: translateX(2%);
    }
}

/* ============================================
   STORY INFO
   ============================================ */

.story-info[b-h3nrxx6khr] {
    padding: 1.5rem;
}

.story-badge[b-h3nrxx6khr] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.story-badge.soon[b-h3nrxx6khr] {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.story-title[b-h3nrxx6khr] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: #1e293b;
}

.story-author[b-h3nrxx6khr] {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 0.75rem;
    font-style: italic;
}

.story-description[b-h3nrxx6khr] {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

.story-meta[b-h3nrxx6khr] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.meta-item[b-h3nrxx6khr] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #64748b;
}

.meta-item svg[b-h3nrxx6khr] {
    width: 14px;
    height: 14px;
}

/* ============================================
   READ BUTTON
   ============================================ */

.read-btn[b-h3nrxx6khr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 25px;
    color: white;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.read-btn:hover[b-h3nrxx6khr] {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.read-btn svg[b-h3nrxx6khr] {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.read-btn:hover svg[b-h3nrxx6khr] {
    transform: translateX(4px);
}

/* ============================================
   FEATURES SECTION
   ============================================ */

.features-section[b-h3nrxx6khr] {
    margin-top: 4rem;
}

.features-grid[b-h3nrxx6khr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.feature-card[b-h3nrxx6khr] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover[b-h3nrxx6khr] {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.feature-icon[b-h3nrxx6khr] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-card h3[b-h3nrxx6khr] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #1e293b;
}

.feature-card p[b-h3nrxx6khr] {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   DARK THEME OVERRIDES
   ============================================ */

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron)[b-h3nrxx6khr] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    color: #e2e8f0;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .hero-title[b-h3nrxx6khr] {
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .hero-subtitle[b-h3nrxx6khr] {
    color: #94a3b8;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .section-title[b-h3nrxx6khr] {
    color: #e2e8f0;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .story-card[b-h3nrxx6khr] {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(51, 65, 85, 0.5);
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .story-title[b-h3nrxx6khr] {
    color: #e2e8f0;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .story-description[b-h3nrxx6khr] {
    color: #94a3b8;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .story-author[b-h3nrxx6khr] {
    color: #94a3b8;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .feature-card[b-h3nrxx6khr] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(51, 65, 85, 0.5);
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .feature-card h3[b-h3nrxx6khr] {
    color: #e2e8f0;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .feature-card p[b-h3nrxx6khr] {
    color: #94a3b8;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .meta-item[b-h3nrxx6khr] {
    color: #94a3b8;
}

:is(.storyteller-hub.theme-space,
    .storyteller-hub.theme-winter,
    .storyteller-hub.theme-nature,
    .storyteller-hub.theme-ocean,
    .storyteller-hub.theme-mystic,
    .storyteller-hub.theme-tron) .story-cover[b-h3nrxx6khr] {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
}

/* Theme-specific accents */
.storyteller-hub.theme-space .section-title svg[b-h3nrxx6khr] {
    color: #9d8cff;
}

.storyteller-hub.theme-ocean .section-title svg[b-h3nrxx6khr] {
    color: #38bdf8;
}

.storyteller-hub.theme-nature .section-title svg[b-h3nrxx6khr] {
    color: #4ade80;
}

.storyteller-hub.theme-winter .section-title svg[b-h3nrxx6khr] {
    color: #7dd3fc;
}

.storyteller-hub.theme-mystic .section-title svg[b-h3nrxx6khr] {
    color: #c084fc;
}

.storyteller-hub.theme-tron .section-title svg[b-h3nrxx6khr] {
    color: #22d3ee;
}

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

@media (max-width: 900px) {
    .story-card.featured[b-h3nrxx6khr] {
        grid-column: span 1;
        display: block;
    }

    .story-card.featured .story-cover[b-h3nrxx6khr] {
        min-height: 180px;
    }

    .read-btn[b-h3nrxx6khr] {
        width: calc(100% - 3rem);
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .hub-container[b-h3nrxx6khr] {
        padding: 2rem 1rem;
    }

    .hero-title[b-h3nrxx6khr] {
        font-size: 2.25rem;
    }

    .hero-subtitle[b-h3nrxx6khr] {
        font-size: 1rem;
    }

    .stories-grid[b-h3nrxx6khr] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-icon[b-h3nrxx6khr] {
        font-size: 3rem;
    }

    .hero-title[b-h3nrxx6khr] {
        font-size: 1.75rem;
    }

    .section-title[b-h3nrxx6khr] {
        font-size: 1.25rem;
    }
}
/* /Pages/Teams/TeamDetail.razor.rz.scp.css */
/* Team Detail Scoped CSS */

/* Members Empty State */
.members-empty[b-vct5loi8j8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    text-align: center;
    color: #64748b;
}

.is-dark .members-empty[b-vct5loi8j8] {
    color: rgba(255, 255, 255, 0.5);
}

/* Team Image Preview */
.team-image-preview[b-vct5loi8j8] {
    border-radius: 12px;
    overflow: hidden;
}

.team-image-preview img[b-vct5loi8j8] {
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* Section Header */
.section-header[b-vct5loi8j8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Search */
.search-wrapper[b-vct5loi8j8] {
    position: relative;
    width: 100%;
    max-width: 260px;
}

.search-icon[b-vct5loi8j8] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.search-input[b-vct5loi8j8] {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
    color: #1e293b;
    box-sizing: border-box;
}

.search-input:focus[b-vct5loi8j8] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .search-input[b-vct5loi8j8] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Data Table */
.table-responsive[b-vct5loi8j8] {
    overflow-x: auto;
    width: 100%;
}

.data-table[b-vct5loi8j8] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-vct5loi8j8] {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

.data-table td[b-vct5loi8j8] {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
}

.data-table tr:hover[b-vct5loi8j8] {
    background: #f8fafc;
}

.is-dark .data-table th[b-vct5loi8j8] {
    color: rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table td[b-vct5loi8j8] {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.is-dark .data-table tr:hover[b-vct5loi8j8] {
    background: rgba(255, 255, 255, 0.05);
}

/* Member Cell */
.member-cell[b-vct5loi8j8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.member-info[b-vct5loi8j8] {
    display: flex;
    flex-direction: column;
}

.member-name[b-vct5loi8j8] {
    font-weight: 500;
}

.member-email[b-vct5loi8j8] {
    font-size: 0.75rem;
    color: #64748b;
}

.is-dark .member-email[b-vct5loi8j8] {
    color: rgba(255, 255, 255, 0.5);
}

/* Avatar */
.avatar[b-vct5loi8j8] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: white;
    background: var(--theme-primary, #6366f1);
    overflow: hidden;
    flex-shrink: 0;
}

.small-avatar[b-vct5loi8j8] {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

/* Chips */
.chip[b-vct5loi8j8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.chip-primary[b-vct5loi8j8] { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.chip-success[b-vct5loi8j8] { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.chip-warning[b-vct5loi8j8] { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
.chip-info[b-vct5loi8j8] { background: rgba(99, 102, 241, 0.12); color: #6366f1; }

/* Actions */
.actions-group[b-vct5loi8j8] {
    display: flex;
    gap: 4px;
}

/* Responsive */
@media (max-width: 640px) {
    .data-table th:nth-child(3)[b-vct5loi8j8],
    .data-table td:nth-child(3)[b-vct5loi8j8] {
        display: none;
    }
}

/* /Pages/Teams/TeamDialog.razor.rz.scp.css */
/* ============================================
   TEAM DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.team-form[b-dcfqmuwokw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.team-form-row[b-dcfqmuwokw] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .team-form-row[b-dcfqmuwokw] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.team-form-group[b-dcfqmuwokw] {
    margin-bottom: 8px;
}

.team-form-group label[b-dcfqmuwokw] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.required-indicator[b-dcfqmuwokw] {
    color: #ef4444;
}

/* Checkbox group styling */
.team-checkbox-group label[b-dcfqmuwokw] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.team-checkbox-group input[type="checkbox"][b-dcfqmuwokw] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Helper text & character counter */
.team-helper-text[b-dcfqmuwokw],
.team-char-counter[b-dcfqmuwokw] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.team-char-counter[b-dcfqmuwokw] {
    text-align: right;
}

/* Form Inputs */
.team-form-input[b-dcfqmuwokw],
.team-form-textarea[b-dcfqmuwokw] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    font-family: inherit;
}

.team-form-textarea[b-dcfqmuwokw] {
    resize: vertical;
    min-height: 80px;
}

.team-form-input:focus[b-dcfqmuwokw],
.team-form-textarea:focus[b-dcfqmuwokw] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

/* Section divider */
.team-section-divider[b-dcfqmuwokw] {
    display: flex;
    align-items: center;
    margin: 8px 0;
    gap: 12px;
}

.team-section-divider[b-dcfqmuwokw]::before,
.team-section-divider[b-dcfqmuwokw]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--theme-border);
}

.team-section-divider span[b-dcfqmuwokw] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
}

/* Team image preview */
.team-image-preview[b-dcfqmuwokw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.02));
    border-radius: 12px;
}

.team-image-preview img[b-dcfqmuwokw] {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.is-dark .team-image-preview[b-dcfqmuwokw] {
    background: rgba(255, 255, 255, 0.05);
}

/* Metadata section */
.team-metadata[b-dcfqmuwokw] {
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
    margin-top: 8px;
}

.team-metadata-item[b-dcfqmuwokw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
}

.team-metadata-item svg[b-dcfqmuwokw] {
    width: 14px;
    height: 14px;
}

/* Placeholder styling */
.team-form-input[b-dcfqmuwokw]::placeholder,
.team-form-textarea[b-dcfqmuwokw]::placeholder {
    color: #9ca3af;
}

.is-dark .team-form-input[b-dcfqmuwokw]::placeholder,
.is-dark .team-form-textarea[b-dcfqmuwokw]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
/* /Pages/Teams/TeamMemberDialog.razor.rz.scp.css */
/* ============================================
   TEAM MEMBER DIALOG - Form-specific Styles
   ============================================ */

/* Form Layout */
.team-member-form[b-dgg0nz6d27] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Form Group */
.team-member-form-group[b-dgg0nz6d27] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-member-form-group label[b-dgg0nz6d27] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
}

.required-indicator[b-dgg0nz6d27] {
    color: #ef4444;
}

/* Text Input */
.team-member-form-input[b-dgg0nz6d27] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.team-member-form-input.with-icon[b-dgg0nz6d27] {
    padding-left: 36px;
}

.team-member-form-input:focus[b-dgg0nz6d27] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary, #6366f1));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
}

.team-member-form-input[b-dgg0nz6d27]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

/* Input with icon */
.team-member-input-with-icon[b-dgg0nz6d27] {
    position: relative;
}

.team-member-input-icon[b-dgg0nz6d27] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--theme-text-muted, #6b7280);
    pointer-events: none;
}

/* Helper text */
.team-member-helper-text[b-dgg0nz6d27] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

/* Info box */
.team-member-info-box[b-dgg0nz6d27] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    border-radius: 8px;
    color: var(--theme-primary-ink, var(--theme-primary, #1d4ed8));
    font-size: 0.8125rem;
}

.team-member-info-box svg[b-dgg0nz6d27] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Member info row (edit mode) */
.team-member-info-row[b-dgg0nz6d27] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 10px;
}

.team-member-avatar[b-dgg0nz6d27] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-primary, #6366f1), var(--theme-accent, #8b5cf6));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    flex-shrink: 0;
}

.team-member-details[b-dgg0nz6d27] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-member-name[b-dgg0nz6d27] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--theme-text-primary, #1e293b);
}

.team-member-email[b-dgg0nz6d27] {
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #6b7280);
}
/* /Pages/Time/BulkTimeEntryDialog.razor.rz.scp.css */
/* BulkTimeEntryDialog - Scoped CSS */

/* Form */
.form-group[b-0dm75xqkns] {
    margin-bottom: 8px;
}

.form-label[b-0dm75xqkns] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.form-row[b-0dm75xqkns] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.checkbox-group[b-0dm75xqkns] {
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}

.checkbox-label[b-0dm75xqkns] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.checkbox-label input[type="checkbox"][b-0dm75xqkns] {
    width: 18px;
    height: 18px;
    accent-color: var(--theme-accent);
}

/* Day Selector */
.day-selector[b-0dm75xqkns] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.day-btn[b-0dm75xqkns] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px;
    border: 2px solid var(--theme-border);
    border-radius: 10px;
    background: var(--theme-surface);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    color: var(--theme-text-primary);
}

.day-btn:hover[b-0dm75xqkns] {
    border-color: var(--theme-accent);
    background: var(--theme-secondary);
}

.day-btn.selected[b-0dm75xqkns] {
    border-color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

.day-btn.today[b-0dm75xqkns] {
    box-shadow: inset 0 -2px 0 var(--theme-accent);
}

.day-name[b-0dm75xqkns] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--theme-text-secondary);
}

.day-btn.selected .day-name[b-0dm75xqkns] {
    color: var(--theme-accent);
}

.day-date[b-0dm75xqkns] {
    font-size: 0.7rem;
    color: var(--theme-text-secondary);
}

.check-icon[b-0dm75xqkns] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    color: var(--theme-accent);
}

.day-actions[b-0dm75xqkns] {
    display: flex;
    gap: 8px;
}

/* Hours Input */
.hours-input-group[b-0dm75xqkns] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.hours-input[b-0dm75xqkns] {
    max-width: 120px;
}

.hours-suffix[b-0dm75xqkns] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

.hours-presets[b-0dm75xqkns] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.preset-btn[b-0dm75xqkns] {
    padding: 6px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 20px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.preset-btn:hover[b-0dm75xqkns] {
    border-color: var(--theme-accent);
    background: var(--theme-secondary);
}

.preset-btn.active[b-0dm75xqkns] {
    border-color: var(--theme-accent);
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    color: var(--theme-accent);
    font-weight: 600;
}

/* Summary */
.entry-summary[b-0dm75xqkns] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--theme-accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 25%, transparent);
    border-radius: 12px;
}

.summary-icon svg[b-0dm75xqkns] {
    width: 24px;
    height: 24px;
    color: var(--theme-accent);
}

.summary-text[b-0dm75xqkns] {
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.total-hours[b-0dm75xqkns] {
    font-weight: 700;
    color: var(--theme-accent);
}

/* Responsive */
@media (max-width: 600px) {
    .day-selector[b-0dm75xqkns] {
        grid-template-columns: repeat(4, 1fr);
    }

    .form-row[b-0dm75xqkns] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Time/SuggestFromGit.razor.rz.scp.css */
/* GITSYNC-1 (2026-09-03): Suggest-from-Git review screen. Theme tokens only.
   THEME-TOKENS-1 (2026-09-28): --theme-bg-primary/-secondary/-tertiary do NOT exist in any theme, so every
   surface here fell back to white - fine on Executive/Cloud, broken on every dark theme (Slate: light text
   on white cards). Surfaces now use the real tokens: --theme-surface, --theme-chip-bg/-color,
   --theme-text-warning/-danger (see wwwroot/css/themes/theme-variables.css for the list that exists). */

.suggest-page[b-s3oeuanot7] {
    min-height: calc(100vh - 56px);
    background: transparent; /* the layout paints the themed page bg */
    padding: 24px;
    color: var(--theme-text-primary, #1e293b);
}

.suggest-container[b-s3oeuanot7] { max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */ margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.suggest-header[b-s3oeuanot7] { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.back-link[b-s3oeuanot7] { display: inline-flex; align-items: center; gap: 6px; color: var(--theme-text-secondary, #64748b); text-decoration: none; font-size: 0.9rem; margin-bottom: 8px; }
.back-link:hover[b-s3oeuanot7] { color: var(--theme-accent, #3b82f6); }
.back-link svg[b-s3oeuanot7] { width: 18px; height: 18px; }
.suggest-title[b-s3oeuanot7] { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 700; margin: 0; }
.suggest-title svg[b-s3oeuanot7] { width: 28px; height: 28px; color: var(--theme-accent, #3b82f6); }
.suggest-subtitle[b-s3oeuanot7] { margin: 4px 0 0; color: var(--theme-text-secondary, #64748b); font-size: 0.95rem; }
.suggest-actions[b-s3oeuanot7] { display: flex; gap: 8px; }

.suggest-card[b-s3oeuanot7] {
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    padding: 16px 20px;
}
.suggest-card-head[b-s3oeuanot7] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.suggest-card-head h2[b-s3oeuanot7] { font-size: 1.05rem; margin: 0; }

/* Mapping form */
.mapping-form[b-s3oeuanot7] { border: 1px dashed var(--theme-border, #e2e8f0); border-radius: 10px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.form-row[b-s3oeuanot7] { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3[b-s3oeuanot7] { grid-template-columns: 1fr 1fr 1.4fr; }
.form-group[b-s3oeuanot7] { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form-label[b-s3oeuanot7] { font-size: 0.8rem; font-weight: 600; color: var(--theme-text-secondary, #64748b); }
.form-label .hint[b-s3oeuanot7] { font-weight: 400; opacity: 0.8; }
.mapping-form-actions[b-s3oeuanot7] { display: flex; align-items: center; gap: 10px; }
.spacer[b-s3oeuanot7] { flex: 1; }
.checkbox-label[b-s3oeuanot7] { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; cursor: pointer; }

.rate-wrap[b-s3oeuanot7] { position: relative; }
.rate-prefix[b-s3oeuanot7] { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--theme-text-secondary, #64748b); pointer-events: none; }
.rate-input[b-s3oeuanot7] { padding-left: 1.6rem; }

.mapping-table[b-s3oeuanot7] { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.mapping-table th[b-s3oeuanot7] { text-align: left; font-weight: 600; color: var(--theme-text-secondary, #64748b); padding: 6px 8px; border-bottom: 1px solid var(--theme-border, #e2e8f0); font-size: 0.8rem; }
.mapping-table td[b-s3oeuanot7] { padding: 8px; border-bottom: 1px solid var(--theme-border, #e2e8f0); }
.mapping-table tr.inactive td[b-s3oeuanot7] { opacity: 0.5; }
.row-actions[b-s3oeuanot7] { white-space: nowrap; text-align: right; }
.link-btn[b-s3oeuanot7] { background: none; border: none; color: var(--theme-accent, #3b82f6); cursor: pointer; font: inherit; padding: 2px 6px; }
.link-btn.danger[b-s3oeuanot7] { color: var(--theme-error, #dc2626); }
code[b-s3oeuanot7] { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; }

/* Pull bar */
.pull-bar[b-s3oeuanot7] { display: grid; grid-template-columns: 1.2fr 1.2fr repeat(4, 0.6fr) auto; gap: 12px; align-items: end; }
.pull-btn[b-s3oeuanot7] { justify-content: flex-end; }
.spinner[b-s3oeuanot7] { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: spin-b-s3oeuanot7 0.8s linear infinite; margin-right: 6px; }
@keyframes spin-b-s3oeuanot7 { to { transform: rotate(360deg); } }

.pull-summary[b-s3oeuanot7] { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.9rem; color: var(--theme-text-secondary, #64748b); padding: 0 4px; }
.pull-summary .error[b-s3oeuanot7] { color: var(--theme-error, #dc2626); }
.muted[b-s3oeuanot7] { color: var(--theme-text-secondary, #64748b); }
.muted.empty[b-s3oeuanot7] { text-align: center; padding: 32px; }

/* Day groups + drafts */
.day-group[b-s3oeuanot7] { display: flex; flex-direction: column; gap: 10px; }
.day-head[b-s3oeuanot7] { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.day-head h3[b-s3oeuanot7] { margin: 0; font-size: 1.05rem; }
.day-total[b-s3oeuanot7] { color: var(--theme-text-secondary, #64748b); font-size: 0.9rem; }

.draft-row[b-s3oeuanot7] {
    display: grid; grid-template-columns: 1fr auto; gap: 16px;
    background: var(--theme-surface, #fff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-left: 4px solid var(--theme-accent, #3b82f6);
    border-radius: 10px; padding: 12px 16px;
}
.draft-row.unbilled[b-s3oeuanot7] { border-left-color: var(--theme-warning, #f59e0b); }
.draft-row.overlaps[b-s3oeuanot7] { border-left-color: var(--theme-error, #dc2626); background: color-mix(in srgb, var(--theme-error, #dc2626) 4%, var(--theme-surface, #fff)); }
.badge.overlap[b-s3oeuanot7] { background: color-mix(in srgb, var(--theme-error, #dc2626) 14%, transparent); color: var(--theme-text-danger, #b91c1c); font-weight: 600; }
.overlap-list[b-s3oeuanot7] { margin: 0; padding-left: 18px; font-size: 0.85rem; color: var(--theme-text-secondary, #64748b); }
.overlap-list a[b-s3oeuanot7] { color: inherit; text-decoration: underline dotted; }
.draft-main[b-s3oeuanot7] { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.draft-meta[b-s3oeuanot7] { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--theme-text-secondary, #64748b); flex-wrap: wrap; }
.repo-chip[b-s3oeuanot7] { background: var(--theme-chip-bg, #f1f5f9); color: var(--theme-chip-color, inherit); padding: 2px 8px; border-radius: 999px; }
.time-span[b-s3oeuanot7] { font-variant-numeric: tabular-nums; }
.badge[b-s3oeuanot7] { background: var(--theme-chip-bg, #f1f5f9); color: var(--theme-chip-color, inherit); border-radius: 999px; padding: 2px 8px; font-size: 0.78rem; }
.badge.warn[b-s3oeuanot7] { background: color-mix(in srgb, var(--theme-warning, #f59e0b) 18%, transparent); color: var(--theme-text-warning, #b45309); }
.draft-desc[b-s3oeuanot7] { font-weight: 500; }
.draft-fields[b-s3oeuanot7] { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 10px; align-items: center; }
.form-group.hours[b-s3oeuanot7] { flex-direction: row; align-items: center; gap: 6px; }
.hours-input[b-s3oeuanot7] { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.unit[b-s3oeuanot7] { color: var(--theme-text-secondary, #64748b); }
.commits summary[b-s3oeuanot7] { cursor: pointer; font-size: 0.85rem; color: var(--theme-text-secondary, #64748b); }
.commits ul[b-s3oeuanot7] { margin: 6px 0 0; padding-left: 18px; font-size: 0.85rem; }
.commits li[b-s3oeuanot7] { margin: 2px 0; }
.c-time[b-s3oeuanot7] { color: var(--theme-text-secondary, #64748b); margin: 0 6px; font-variant-numeric: tabular-nums; }
.draft-actions[b-s3oeuanot7] { display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.draft-actions .danger[b-s3oeuanot7] { color: var(--theme-error, #dc2626); }

@media (max-width: 900px) {
    .pull-bar[b-s3oeuanot7] { grid-template-columns: 1fr 1fr; }
    .pull-btn[b-s3oeuanot7] { grid-column: 1 / -1; }
    .form-row[b-s3oeuanot7], .form-row-3[b-s3oeuanot7] { grid-template-columns: 1fr; }
    .draft-row[b-s3oeuanot7] { grid-template-columns: 1fr; }
    .draft-actions[b-s3oeuanot7] { flex-direction: row; }
    .draft-fields[b-s3oeuanot7] { grid-template-columns: 1fr 1fr; }
}
/* /Pages/Time/TimeEntries.razor.rz.scp.css */
/* ============================================
   TIME TRACKING PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css - only Time-specific 
   styles remain here
   ============================================ */

/* ============================================
   STOPWATCH SECTION
   ============================================ */
.stopwatch-card[b-dkoqzzwa28] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.25);
}

.stopwatch-header[b-dkoqzzwa28] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    cursor: pointer;
    color: white;
}

.stopwatch-toggle[b-dkoqzzwa28] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stopwatch-toggle .icon[b-dkoqzzwa28] {
    width: 24px;
    height: 24px;
}

.stopwatch-title[b-dkoqzzwa28] {
    font-size: 1rem;
    font-weight: 600;
}

.stopwatch-mini[b-dkoqzzwa28] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stopwatch-mini-time[b-dkoqzzwa28] {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    opacity: 0.9;
}

.stopwatch-running-indicator[b-dkoqzzwa28] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4caf50;
    animation: pulse-b-dkoqzzwa28 1s ease-in-out infinite;
}

@keyframes pulse-b-dkoqzzwa28 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

.stopwatch-content[b-dkoqzzwa28] {
    padding: 16px 24px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.stopwatch-display[b-dkoqzzwa28] {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.stopwatch-actions[b-dkoqzzwa28] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stopwatch-btn[b-dkoqzzwa28] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.stopwatch-btn svg[b-dkoqzzwa28] {
    width: 18px;
    height: 18px;
}

.stopwatch-btn-primary[b-dkoqzzwa28] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
}

.stopwatch-btn-primary:hover[b-dkoqzzwa28] {
    background: rgba(255, 255, 255, 0.3);
}

.stopwatch-btn-outline[b-dkoqzzwa28] {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.stopwatch-btn-outline:hover[b-dkoqzzwa28] {
    background: rgba(255, 255, 255, 0.1);
}

.stopwatch-btn-success[b-dkoqzzwa28] {
    background: #22c55e;
    color: white;
    border: none;
}

.stopwatch-btn-success:hover[b-dkoqzzwa28] {
    background: #16a34a;
}

/* ============================================
   ACCOUNT HOURS BREAKDOWN SECTION
   ============================================ */
.account-hours-section[b-dkoqzzwa28] {
    background: var(--theme-surface, #ffffff);
    border-radius: 14px;
    margin-bottom: 20px;
    overflow: hidden;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.account-hours-header[b-dkoqzzwa28] {
    padding: 14px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-hours-header:hover[b-dkoqzzwa28] {
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.02));
}

.account-hours-toggle[b-dkoqzzwa28] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.account-hours-toggle .icon[b-dkoqzzwa28] {
    width: 20px;
    height: 20px;
    color: var(--theme-text-secondary, #64748b);
}

.account-hours-title[b-dkoqzzwa28] {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--theme-text-secondary, #64748b);
}

.account-hours-count[b-dkoqzzwa28] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    margin-left: auto;
}

.account-hours-grid[b-dkoqzzwa28] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    padding: 0 20px 16px;
}

.account-hour-card[b-dkoqzzwa28] {
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.account-hour-info[b-dkoqzzwa28] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.account-hour-name[b-dkoqzzwa28] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.account-hour-value[b-dkoqzzwa28] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-accent, #3b82f6);
}

.account-hour-bar-track[b-dkoqzzwa28] {
    height: 6px;
    background: var(--theme-border, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}

.account-hour-bar-fill[b-dkoqzzwa28] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.account-hour-details[b-dkoqzzwa28] {
    display: flex;
    gap: 12px;
    font-size: 0.7rem;
    color: var(--theme-text-muted, #94a3b8);
}

.account-hour-detail[b-dkoqzzwa28] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.account-hour-detail svg[b-dkoqzzwa28] {
    width: 12px;
    height: 12px;
}

/* ============================================
   TIME ENTRY DATE BADGE (unique to time entries)
   ============================================ */
.time-entry-date[b-dkoqzzwa28] {
    width: 52px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.entry-day[b-dkoqzzwa28] {
    font-size: 1.25rem;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.entry-month[b-dkoqzzwa28] {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .account-hours-section[b-dkoqzzwa28] {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .account-hour-card[b-dkoqzzwa28] {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   STREAK & ENERGY GAMIFICATION
   ============================================ */
.streak-card[b-dkoqzzwa28] {
    position: relative;
    overflow: hidden;
}

.streak-card[b-dkoqzzwa28]::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 149, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.icon-orange[b-dkoqzzwa28] {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
}

.icon-purple[b-dkoqzzwa28] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.is-dark .icon-orange[b-dkoqzzwa28] {
    background: rgba(255, 149, 0, 0.2);
    color: #ffb340;
}

.is-dark .icon-purple[b-dkoqzzwa28] {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .stopwatch-content[b-dkoqzzwa28] {
        flex-direction: column;
        align-items: stretch;
    }

    .stopwatch-display[b-dkoqzzwa28] {
        font-size: 2.5rem;
        text-align: center;
    }

    .stopwatch-actions[b-dkoqzzwa28] {
        justify-content: center;
    }

    .account-hours-grid[b-dkoqzzwa28] {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   TIME-TOTAL-1 (2026-10-05): FILTERED TOTALS LINE
   Sums exactly the entries the filters show.
   ============================================ */
.time-filtered-total[b-dkoqzzwa28] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    padding: 10px 16px;
    margin-bottom: 12px;
    border-radius: 10px;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
    color: var(--theme-text-secondary, #4b5563);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.time-filtered-total-item:not(:last-child)[b-dkoqzzwa28]::after {
    content: "·";
    margin: 0 10px;
    color: var(--theme-text-muted, #9ca3af);
}

.time-filtered-total-strong[b-dkoqzzwa28] {
    color: var(--theme-text-primary, #111827);
    font-weight: 600;
}

.time-filtered-total-muted[b-dkoqzzwa28] {
    color: var(--theme-text-muted, #6b7280);
}

.is-dark .time-filtered-total[b-dkoqzzwa28] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}


/* TIME-TOTAL-2 (2026-10-05): period label + clickable account cards */
.account-hours-period[b-dkoqzzwa28] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

button.account-hour-card[b-dkoqzzwa28] {
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

button.account-hour-card:hover[b-dkoqzzwa28] {
    border-color: var(--theme-border, rgba(0, 0, 0, 0.12));
}

button.account-hour-card:focus-visible[b-dkoqzzwa28] {
    outline: 2px solid var(--theme-accent, #3b82f6);
    outline-offset: 2px;
}

button.account-hour-card.is-selected[b-dkoqzzwa28] {
    border-color: var(--theme-accent, #3b82f6);
    box-shadow: 0 0 0 1px var(--theme-accent, #3b82f6);
}
/* /Pages/Time/TimeEntryDetail.razor.rz.scp.css */
/* TE-DETAIL-1 (2026-07-05): scoped styles for the prototype time-entry detail page.
   Uses the design-system --theme-* tokens (with safe fallbacks) so surfaces, borders,
   and text read correctly on all 8 themes. Plain `.card` gets no surface outside a
   `.workitem-detail-page` wrapper, so we theme our own cards here. */

.te-detail-wrap[b-xs4mtorgy6] {
    max-width: 760px;
    margin: 0 auto;
    padding: 4px 4px 48px;
}

/* ── Header ─────────────────────────────────────────── */
.te-detail-header[b-xs4mtorgy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.te-detail-title[b-xs4mtorgy6] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.te-detail-title h1[b-xs4mtorgy6] {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--theme-text-primary, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.te-detail-actions[b-xs4mtorgy6] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Chain spine spacing ────────────────────────────── */
.te-chain[b-xs4mtorgy6] {
    margin: 0 0 1.1rem;
}

/* ── Hero ───────────────────────────────────────────── */
.te-hero[b-xs4mtorgy6] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1rem;
}

.te-hero-duration[b-xs4mtorgy6] {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-variant-numeric: tabular-nums;
}

.te-hero-meta[b-xs4mtorgy6] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.te-hero-when[b-xs4mtorgy6] {
    color: var(--theme-text-secondary, #475569);
    font-size: 0.95rem;
}

.te-hero-dot[b-xs4mtorgy6] {
    margin: 0 0.4rem;
    opacity: 0.5;
}

/* ── Chips ──────────────────────────────────────────── */
.te-chips[b-xs4mtorgy6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.te-chip[b-xs4mtorgy6] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background: var(--theme-surface-secondary, rgba(128, 128, 128, 0.12));
    color: var(--theme-text-secondary, #475569);
    border: 1px solid var(--theme-border, #e2e8f0);
    white-space: nowrap;
}

.te-chip-muted[b-xs4mtorgy6] {
    opacity: 0.7;
}

.te-chip-money[b-xs4mtorgy6] {
    background: var(--theme-bg-success, rgba(16, 185, 129, 0.14));
    color: var(--theme-text-success, #059669);
    border-color: transparent;
}

.te-chip-info[b-xs4mtorgy6] {
    background: var(--theme-bg-info, rgba(59, 130, 246, 0.14));
    color: var(--theme-text-info, #2563eb);
    border-color: transparent;
}

.te-chip-accent[b-xs4mtorgy6] {
    background: rgba(var(--theme-accent-rgb, 99, 102, 241), 0.14);
    color: var(--theme-accent, #6366f1);
    border-color: transparent;
}

/* ── Card ───────────────────────────────────────────── */
.te-card[b-xs4mtorgy6] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    padding: 1.1rem 1.4rem 1.25rem;
}

.te-card-title[b-xs4mtorgy6] {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-muted, #94a3b8);
}

.te-detail-grid[b-xs4mtorgy6] {
    display: flex;
    flex-direction: column;
}

.te-detail-row[b-xs4mtorgy6] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--theme-border, rgba(128, 128, 128, 0.15));
}

.te-detail-row:last-child[b-xs4mtorgy6] {
    border-bottom: none;
}

.te-detail-label[b-xs4mtorgy6] {
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.9rem;
    white-space: nowrap;
}

.te-detail-value[b-xs4mtorgy6] {
    color: var(--theme-text-primary, #0f172a);
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

/* ── Empty (unlinked) state ─────────────────────────── */
.te-empty[b-xs4mtorgy6] {
    margin: 0.35rem 0 0;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.95rem;
    line-height: 1.5;
}

.te-link-btn[b-xs4mtorgy6] {
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.25rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    cursor: pointer;
}

.te-link-btn:hover[b-xs4mtorgy6] {
    text-decoration: underline;
}

@media (max-width: 520px) {
    .te-detail-title h1[b-xs4mtorgy6] { font-size: 1.2rem; white-space: normal; }
    .te-hero[b-xs4mtorgy6] { gap: 0.75rem; padding: 1rem 1.1rem; }
    .te-hero-duration[b-xs4mtorgy6] { font-size: 2rem; }
}
/* /Pages/Time/TimeEntryDialog.razor.rz.scp.css */
/* TimeEntryDialog - Scoped styles (dialog structure provided by BaseDialog) */

/* Form Group */
.time-form-group[b-hl3qn4y0f1] {
    margin-bottom: 8px;
}

.time-form-group label[b-hl3qn4y0f1] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

/* Label + Now button row */
.time-label-row[b-hl3qn4y0f1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.time-label-row label[b-hl3qn4y0f1] {
    margin-bottom: 0;
}

.time-now-btn[b-hl3qn4y0f1] {
    background: none;
    border: none;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.15s;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.time-now-btn:hover[b-hl3qn4y0f1] {
    background: rgba(var(--theme-primary-rgb), 0.1);
}

/* Form Input */
.time-form-input[b-hl3qn4y0f1] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
}

.time-form-input:focus[b-hl3qn4y0f1] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

.time-form-input.input-error[b-hl3qn4y0f1] {
    border-color: var(--theme-text-danger);
}

/* Time inputs row */
.time-inputs-row[b-hl3qn4y0f1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Error message */
.time-error-message[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-danger);
    font-size: 0.8125rem;
    margin-top: 2px;
}

.time-error-message svg[b-hl3qn4y0f1] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Duration display */
.time-duration-display[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--theme-secondary);
    border-radius: 6px;
    color: var(--theme-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 2px;
}


.time-duration-display svg[b-hl3qn4y0f1] {
    width: 18px;
    height: 18px;
}

/* Section divider */
.time-section-divider[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 6px;
    color: var(--theme-text-secondary);
}

.time-section-divider[b-hl3qn4y0f1]::before,
.time-section-divider[b-hl3qn4y0f1]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--theme-border);
}


.time-section-label[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
}


.time-section-label svg[b-hl3qn4y0f1] {
    width: 16px;
    height: 16px;
}

/* Switch / Toggle Row */
.time-switch-row[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.time-switch-label[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}


.time-switch-label svg[b-hl3qn4y0f1] {
    width: 20px;
    height: 20px;
    color: var(--theme-text-secondary);
}

.time-switch-group[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Toggle Switch */
.time-toggle[b-hl3qn4y0f1] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.time-toggle input[b-hl3qn4y0f1] {
    opacity: 0;
    width: 0;
    height: 0;
}

.time-toggle-slider[b-hl3qn4y0f1] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-border, #d1d5db);
    transition: 0.2s;
    border-radius: 24px;
}

.time-toggle-slider[b-hl3qn4y0f1]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.2s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.time-toggle input:checked + .time-toggle-slider[b-hl3qn4y0f1] {
    background-color: #22c55e;
}

.time-toggle input:checked + .time-toggle-slider.time-toggle-slider-info[b-hl3qn4y0f1] {
    background-color: #3b82f6;
}

.time-toggle input:checked + .time-toggle-slider[b-hl3qn4y0f1]:before {
    transform: translateX(20px);
}

/* Chip */
.time-chip[b-hl3qn4y0f1] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.time-chip svg[b-hl3qn4y0f1] {
    width: 14px;
    height: 14px;
}

.time-chip-info[b-hl3qn4y0f1] {
    background: var(--theme-chip-bg);
    color: var(--theme-chip-color);
}


/* Input with prefix */
.time-input-with-prefix[b-hl3qn4y0f1] {
    position: relative;
    display: flex;
    align-items: center;
}

.time-input-prefix[b-hl3qn4y0f1] {
    position: absolute;
    left: 14px;
    color: var(--theme-text-hint);
    font-size: 1rem;
    pointer-events: none;
}


.time-form-input-prefixed[b-hl3qn4y0f1] {
    padding-left: 32px !important;
}

/* Helper text */
.time-helper-text[b-hl3qn4y0f1] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
    margin-top: 2px;
    display: block;
}


/* Info text */
.time-info-text[b-hl3qn4y0f1] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--theme-text-hint);
    margin-top: 4px;
}


.time-info-text svg[b-hl3qn4y0f1] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Client visibility card */
.time-visibility-card[b-hl3qn4y0f1] {
    padding: 6px;
    margin-top: 4px;
    background: var(--theme-surface-secondary);
    border-radius: 6px;
    border: 1px solid var(--theme-border);
}


.time-visibility-header[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.time-visibility-label[b-hl3qn4y0f1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
}


.time-visibility-label svg[b-hl3qn4y0f1] {
    width: 18px;
    height: 18px;
}

.time-visibility-hint[b-hl3qn4y0f1] {
    margin: 4px 0 0 0;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

/* /Pages/Time/WeeklyTimesheet.razor.rz.scp.css */
/* ============================================
   WEEKLY TIMESHEET STYLES
   ============================================ */

.weekly-timesheet[b-3dr4jjdqqe] {
    min-height: calc(100vh - 56px);
    background: transparent; /* layout paints the themed page bg (THEME-TOKENS-1) */
    padding: 24px;
}

.timesheet-container[b-3dr4jjdqqe] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 0 auto;
}

/* Header */
.timesheet-header[b-3dr4jjdqqe] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.timesheet-title-section[b-3dr4jjdqqe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-link[b-3dr4jjdqqe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.back-link:hover[b-3dr4jjdqqe] {
    color: var(--theme-accent, #3b82f6);
}

.back-link svg[b-3dr4jjdqqe] {
    width: 18px;
    height: 18px;
}

.timesheet-title[b-3dr4jjdqqe] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.timesheet-title svg[b-3dr4jjdqqe] {
    width: 32px;
    height: 32px;
    color: var(--theme-accent, #3b82f6);
}

.timesheet-actions[b-3dr4jjdqqe] {
    display: flex;
    gap: 8px;
}

/* Week Navigation */
.week-navigation[b-3dr4jjdqqe] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.week-label[b-3dr4jjdqqe] {
    font-size: 0.9rem;
    color: var(--theme-text-secondary, #64748b);
}

.week-dates[b-3dr4jjdqqe] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.week-total[b-3dr4jjdqqe] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 8px 16px;
    background: var(--theme-bg-info, rgba(59, 130, 246, 0.1));
    color: var(--theme-accent, #3b82f6);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.95rem;
}

.week-total svg[b-3dr4jjdqqe] {
    width: 18px;
    height: 18px;
}

/* Loading State */
.timesheet-loading[b-3dr4jjdqqe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: var(--theme-text-secondary, #64748b);
}

.loading-spinner[b-3dr4jjdqqe] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-accent, #3b82f6);
    border-radius: 50%;
    animation: spin-b-3dr4jjdqqe 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-3dr4jjdqqe {
    to { transform: rotate(360deg); }
}

/* Timesheet Grid */
.timesheet-grid[b-3dr4jjdqqe] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
    margin-bottom: 24px;
}

.timesheet-row[b-3dr4jjdqqe] {
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) repeat(7, 1fr) 100px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.timesheet-row:last-child[b-3dr4jjdqqe] {
    border-bottom: none;
}

.timesheet-header-row[b-3dr4jjdqqe] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.timesheet-totals-row[b-3dr4jjdqqe] {
    background: var(--theme-surface-secondary, #f8fafc);
    font-weight: 600;
}

.timesheet-cell[b-3dr4jjdqqe] {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border-right: 1px solid var(--theme-border, #e2e8f0);
    min-height: 56px;
}

.timesheet-cell:last-child[b-3dr4jjdqqe] {
    border-right: none;
}

.cell-label[b-3dr4jjdqqe] {
    justify-content: flex-start;
}

.cell-day[b-3dr4jjdqqe] {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 2px;
}

.day-name[b-3dr4jjdqqe] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    text-transform: uppercase;
}

.day-date[b-3dr4jjdqqe] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.cell-today[b-3dr4jjdqqe] {
    background: var(--theme-bg-info, rgba(59, 130, 246, 0.08));
}

.cell-today .day-name[b-3dr4jjdqqe],
.cell-today .day-date[b-3dr4jjdqqe] {
    color: var(--theme-accent, #3b82f6);
}

.cell-weekend[b-3dr4jjdqqe] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.cell-hours[b-3dr4jjdqqe] {
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.cell-hours:hover[b-3dr4jjdqqe] {
    background: var(--theme-bg-info, rgba(59, 130, 246, 0.1));
}

.cell-hours.has-hours[b-3dr4jjdqqe] {
    background: var(--theme-bg-success, rgba(34, 197, 94, 0.08));
}

.cell-hours.has-hours:hover[b-3dr4jjdqqe] {
    background: var(--theme-bg-success, rgba(34, 197, 94, 0.15));
}

.hours-value[b-3dr4jjdqqe] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

.cell-total[b-3dr4jjdqqe] {
    background: var(--theme-surface-secondary, #f8fafc);
    justify-content: center;
}

.cell-total-cell[b-3dr4jjdqqe] {
    background: var(--theme-surface-secondary, #f8fafc);
}

.cell-grand-total[b-3dr4jjdqqe] {
    background: var(--theme-bg-info, rgba(59, 130, 246, 0.1));
}

.cell-grand-total .hours-value[b-3dr4jjdqqe] {
    color: var(--theme-accent, #3b82f6);
    font-weight: 700;
}

.total-value[b-3dr4jjdqqe] {
    font-weight: 600;
}

.totals-label[b-3dr4jjdqqe] {
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

/* Entry Labels */
.entry-label[b-3dr4jjdqqe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-name[b-3dr4jjdqqe] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.95rem;
}

.project-name[b-3dr4jjdqqe] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

.no-project[b-3dr4jjdqqe] {
    font-style: italic;
    color: var(--theme-text-muted, #94a3b8);
}

/* Empty State */
.timesheet-empty[b-3dr4jjdqqe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--theme-text-secondary, #64748b);
}

.timesheet-empty svg[b-3dr4jjdqqe] {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.timesheet-empty p[b-3dr4jjdqqe] {
    margin: 0 0 20px;
    font-size: 1rem;
}

/* Summary Cards */
.timesheet-summary[b-3dr4jjdqqe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.summary-card[b-3dr4jjdqqe] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.summary-icon[b-3dr4jjdqqe] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon svg[b-3dr4jjdqqe] {
    width: 24px;
    height: 24px;
}

.summary-icon.icon-blue[b-3dr4jjdqqe] {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.summary-icon.icon-green[b-3dr4jjdqqe] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.summary-icon.icon-purple[b-3dr4jjdqqe] {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.summary-icon.icon-amber[b-3dr4jjdqqe] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.summary-content[b-3dr4jjdqqe] {
    display: flex;
    flex-direction: column;
}

.summary-value[b-3dr4jjdqqe] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

.summary-label[b-3dr4jjdqqe] {
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Dark Theme - TS-SLATE-1 (2026-09-30): was a six-theme enumeration (space/winter/nature/
   ocean/mystic/tron) that omitted Slate (executivedark) and Grid, so on Slate every header
   label, total and the week pill fell through to the LIGHT fallbacks (#1e293b on a dark
   surface - invisible). `.is-dark` is the marker every dark theme carries (PRO-DARK-2,
   feedback_slate_legacy_theme_enumeration). Never enumerate theme classes here again. */
.is-dark .weekly-timesheet[b-3dr4jjdqqe] {
    background: transparent;
}

.is-dark .timesheet-grid[b-3dr4jjdqqe],
.is-dark .week-navigation[b-3dr4jjdqqe],
.is-dark .summary-card[b-3dr4jjdqqe] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.is-dark .timesheet-header-row[b-3dr4jjdqqe],
.is-dark .timesheet-totals-row[b-3dr4jjdqqe],
.is-dark .cell-total[b-3dr4jjdqqe],
.is-dark .cell-weekend[b-3dr4jjdqqe] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .timesheet-cell[b-3dr4jjdqqe] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .timesheet-row[b-3dr4jjdqqe] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .timesheet-title[b-3dr4jjdqqe],
.is-dark .week-dates[b-3dr4jjdqqe],
.is-dark .day-name[b-3dr4jjdqqe],
.is-dark .timesheet-header-row .cell-label[b-3dr4jjdqqe],
.is-dark .timesheet-header-row .cell-total[b-3dr4jjdqqe],
.is-dark .week-label[b-3dr4jjdqqe],
.is-dark .hours-value[b-3dr4jjdqqe],
.is-dark .account-name[b-3dr4jjdqqe],
.is-dark .summary-value[b-3dr4jjdqqe] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .back-link[b-3dr4jjdqqe],
.is-dark .day-date[b-3dr4jjdqqe],
.is-dark .project-name[b-3dr4jjdqqe],
.is-dark .summary-label[b-3dr4jjdqqe],
.is-dark .totals-label[b-3dr4jjdqqe] {
    color: rgba(255, 255, 255, 0.7);
}


/* TS-SLATE-1: Slate's --theme-accent is a mid-grey that vanishes on its own ground. */
.theme-executivedark .week-total[b-3dr4jjdqqe],
.theme-executivedark .cell-grand-total .hours-value[b-3dr4jjdqqe],
.theme-executivedark .cell-today .day-name[b-3dr4jjdqqe],
.theme-executivedark .cell-today .day-date[b-3dr4jjdqqe] {
    color: rgba(255, 255, 255, 0.95);
}
.theme-executivedark .week-total[b-3dr4jjdqqe] {
    background: rgba(255, 255, 255, 0.08);
}

/* Responsive */
@media (max-width: 1024px) {
    .timesheet-row[b-3dr4jjdqqe] {
        grid-template-columns: minmax(150px, 1fr) repeat(7, 1fr) 80px;
    }

    .timesheet-cell[b-3dr4jjdqqe] {
        padding: 10px 12px;
    }
    
    .day-name[b-3dr4jjdqqe] {
        font-size: 0.75rem;
    }
    
    .day-date[b-3dr4jjdqqe] {
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    .weekly-timesheet[b-3dr4jjdqqe] {
        padding: 16px;
    }

    .timesheet-header[b-3dr4jjdqqe] {
        flex-direction: column;
        align-items: stretch;
    }

    .timesheet-actions[b-3dr4jjdqqe] {
        justify-content: center;
    }

    .week-navigation[b-3dr4jjdqqe] {
        flex-direction: column;
        text-align: center;
    }

    .week-total[b-3dr4jjdqqe] {
        margin-left: 0;
    }

    .timesheet-grid[b-3dr4jjdqqe] {
        overflow-x: auto;
    }

    .timesheet-row[b-3dr4jjdqqe] {
        min-width: 800px;
    }
}
/* /Pages/Tools/DesignComparisonDialog.razor.rz.scp.css */
/* DesignComparisonDialog.razor.css */

.form-row[b-toeeha35o3] {
    display: flex;
    gap: 16px;
}

@media (max-width: 768px) {
    .form-row[b-toeeha35o3] {
        flex-direction: column;
        gap: 12px;
    }
}

.form-group[b-toeeha35o3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-label[b-toeeha35o3] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-control[b-toeeha35o3] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    width: 100%;
    transition: border-color 0.2s;
    background-color: var(--theme-input-bg);
    color: var(--theme-input-text);
}

.form-control:focus[b-toeeha35o3] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

.helper-text[b-toeeha35o3] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

/* Comparison Grid */
.comparison-grid[b-toeeha35o3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .comparison-grid[b-toeeha35o3] {
        grid-template-columns: 1fr;
    }
}

.comparison-card[b-toeeha35o3] {
    background: var(--theme-surface-secondary);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid var(--theme-border);
}

.card-title[b-toeeha35o3] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-before[b-toeeha35o3] {
    color: var(--theme-text-hint);
}

.icon-after[b-toeeha35o3] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.image-preview[b-toeeha35o3] {
    margin-top: 10px;
    width: 100%;
    height: 150px;
    background: var(--theme-input-bg);
    border-radius: 8px;
    border: 1px dashed var(--theme-input-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-preview img[b-toeeha35o3] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.no-preview[b-toeeha35o3] {
    color: var(--theme-text-hint);
    font-size: 0.8125rem;
}

/* Toggle Switch */
.switch-wrapper[b-toeeha35o3] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-top: 20px;
}

.switch[b-toeeha35o3] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input[b-toeeha35o3] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-toeeha35o3] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--theme-input-border);
    transition: 0.4s;
    border-radius: 24px;
}

.slider[b-toeeha35o3]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider[b-toeeha35o3] {
    background-color: var(--theme-primary);
}

input:checked + .slider[b-toeeha35o3]:before {
    transform: translateX(20px);
}
/* /Pages/Tools/DesignVoting.razor.rz.scp.css */
.design-voting-page[b-y6a0nytb37] {
        padding: 0 24px 40px;
        max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
        margin: 0 auto;
        min-height: calc(100vh - 56px);
    }

    /* Hero Section */
    .design-hero[b-y6a0nytb37] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 50px 30px;
        border-radius: 28px;
        margin-bottom: 40px;
        color: white;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        position: relative;
        overflow: hidden;
    }

    .design-voting-page.theme-space .design-hero[b-y6a0nytb37] {
        background: linear-gradient(135deg, #0f0a1e 0%, #4c1d95 50%, #7c3aed 100%);
    }

    .design-voting-page.theme-winter .design-hero[b-y6a0nytb37],
    .design-voting-page.theme-ocean .design-hero[b-y6a0nytb37] {
        background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0ea5e9 100%);
    }

    .design-voting-page.theme-nature .design-hero[b-y6a0nytb37] {
        background: linear-gradient(135deg, #14532d 0%, #166534 50%, #22c55e 100%);
    }

    .design-hero[b-y6a0nytb37]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    }

    .design-hero-content[b-y6a0nytb37] {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .design-hero-text h1[b-y6a0nytb37] {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .design-hero-subtitle[b-y6a0nytb37] {
        font-size: 1rem;
        opacity: 0.9;
    }

    .design-hero-btn[b-y6a0nytb37] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 24px;
        background: white;
        color: #667eea;
        border: none;
        border-radius: 12px;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .design-hero-btn:hover[b-y6a0nytb37] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(255, 255, 255, 0.3);
    }

    /* Filter Bar */
    .filter-bar[b-y6a0nytb37] {
        background: white;
        border-radius: 16px;
        padding: 16px 20px;
        margin-bottom: 30px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        border: 1px solid #e2e8f0;
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
        align-items: center;
    }

    .design-voting-page.theme-space .filter-bar[b-y6a0nytb37],
    .design-voting-page.theme-winter .filter-bar[b-y6a0nytb37],
    .design-voting-page.theme-nature .filter-bar[b-y6a0nytb37],
    .design-voting-page.theme-ocean .filter-bar[b-y6a0nytb37] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .filter-select[b-y6a0nytb37] {
        padding: 10px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        font-size: 0.9rem;
        background: #f8fafc;
        min-width: 180px;
        cursor: pointer;
    }

    .design-voting-page.theme-space .filter-select[b-y6a0nytb37],
    .design-voting-page.theme-winter .filter-select[b-y6a0nytb37],
    .design-voting-page.theme-nature .filter-select[b-y6a0nytb37],
    .design-voting-page.theme-ocean .filter-select[b-y6a0nytb37] {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: white;
    }

    .filter-toggle[b-y6a0nytb37] {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        user-select: none;
    }

    .filter-toggle input[type="checkbox"][b-y6a0nytb37] {
        width: 18px;
        height: 18px;
        accent-color: #667eea;
    }

    .filter-toggle span[b-y6a0nytb37] {
        font-size: 0.9rem;
        color: #64748b;
    }

    .design-voting-page.theme-space .filter-toggle span[b-y6a0nytb37],
    .design-voting-page.theme-winter .filter-toggle span[b-y6a0nytb37],
    .design-voting-page.theme-nature .filter-toggle span[b-y6a0nytb37],
    .design-voting-page.theme-ocean .filter-toggle span[b-y6a0nytb37] {
        color: rgba(255, 255, 255, 0.8);
    }

    .filter-count[b-y6a0nytb37] {
        margin-left: auto;
        font-size: 0.85rem;
        color: #94a3b8;
    }

    /* Comparison Cards Grid */
    .comparisons-grid[b-y6a0nytb37] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 24px;
    }

    .comparison-card[b-y6a0nytb37] {
        background: white;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        border: 1px solid #e2e8f0;
        overflow: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .comparison-card:hover[b-y6a0nytb37] {
        transform: translateY(-6px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    }

    .design-voting-page.theme-space .comparison-card[b-y6a0nytb37],
    .design-voting-page.theme-winter .comparison-card[b-y6a0nytb37],
    .design-voting-page.theme-nature .comparison-card[b-y6a0nytb37],
    .design-voting-page.theme-ocean .comparison-card[b-y6a0nytb37] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .card-header[b-y6a0nytb37] {
        padding: 16px 20px;
    }

    .card-title-row[b-y6a0nytb37] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .card-title[b-y6a0nytb37] {
        font-size: 1.1rem;
        font-weight: 700;
        color: #1e293b;
    }

    .design-voting-page.theme-space .card-title[b-y6a0nytb37],
    .design-voting-page.theme-winter .card-title[b-y6a0nytb37],
    .design-voting-page.theme-nature .card-title[b-y6a0nytb37],
    .design-voting-page.theme-ocean .card-title[b-y6a0nytb37] {
        color: white;
    }

    .status-chip[b-y6a0nytb37] {
        display: inline-block;
        padding: 4px 10px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-chip.closed[b-y6a0nytb37] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
    .status-chip.voted[b-y6a0nytb37] { background: rgba(34, 197, 94, 0.15); color: #22c55e; }

    .category-chip[b-y6a0nytb37] {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 500;
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        border: 1px solid rgba(59, 130, 246, 0.2);
    }

    .card-images[b-y6a0nytb37] {
        display: flex;
        height: 120px;
        overflow: hidden;
        margin: 0 16px;
        border-radius: 10px;
    }

    .card-images .before[b-y6a0nytb37],
    .card-images .after[b-y6a0nytb37] {
        flex: 1;
        background-size: cover;
        background-position: center;
    }

    .card-images .before[b-y6a0nytb37] {
        border-radius: 10px 0 0 10px;
    }

    .card-images .after[b-y6a0nytb37] {
        border-radius: 0 10px 10px 0;
    }

    .card-footer[b-y6a0nytb37] {
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .vote-count[b-y6a0nytb37] {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        color: #64748b;
    }

    .design-voting-page.theme-space .vote-count[b-y6a0nytb37],
    .design-voting-page.theme-winter .vote-count[b-y6a0nytb37],
    .design-voting-page.theme-nature .vote-count[b-y6a0nytb37],
    .design-voting-page.theme-ocean .vote-count[b-y6a0nytb37] {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Empty State */
    .empty-state[b-y6a0nytb37] {
        background: white;
        border-radius: 20px;
        padding: 60px 40px;
        text-align: center;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
        border: 1px solid #e2e8f0;
    }

    .design-voting-page.theme-space .empty-state[b-y6a0nytb37],
    .design-voting-page.theme-winter .empty-state[b-y6a0nytb37],
    .design-voting-page.theme-nature .empty-state[b-y6a0nytb37],
    .design-voting-page.theme-ocean .empty-state[b-y6a0nytb37] {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .empty-icon[b-y6a0nytb37] {
        width: 80px;
        height: 80px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        color: #667eea;
    }

    .empty-title[b-y6a0nytb37] {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 8px;
    }

    .design-voting-page.theme-space .empty-title[b-y6a0nytb37],
    .design-voting-page.theme-winter .empty-title[b-y6a0nytb37],
    .design-voting-page.theme-nature .empty-title[b-y6a0nytb37],
    .design-voting-page.theme-ocean .empty-title[b-y6a0nytb37] {
        color: white;
    }

    .empty-desc[b-y6a0nytb37] {
        font-size: 0.9rem;
        color: #64748b;
    }

    .design-voting-page.theme-space .empty-desc[b-y6a0nytb37],
    .design-voting-page.theme-winter .empty-desc[b-y6a0nytb37],
    .design-voting-page.theme-nature .empty-desc[b-y6a0nytb37],
    .design-voting-page.theme-ocean .empty-desc[b-y6a0nytb37] {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Back Button */
    .back-btn[b-y6a0nytb37] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        background: transparent;
        color: #667eea;
        border: none;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 20px;
    }

    .back-btn:hover[b-y6a0nytb37] {
        background: rgba(102, 126, 234, 0.1);
    }

    .design-voting-page.theme-space .back-btn[b-y6a0nytb37],
    .design-voting-page.theme-winter .back-btn[b-y6a0nytb37],
    .design-voting-page.theme-nature .back-btn[b-y6a0nytb37],
    .design-voting-page.theme-ocean .back-btn[b-y6a0nytb37] {
        color: #a78bfa;
    }

    /* Loading */
    .loading-bar[b-y6a0nytb37] {
        height: 4px;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
        background-size: 200% 100%;
        animation: loading-b-y6a0nytb37 1.5s ease-in-out infinite;
        border-radius: 2px;
        margin-bottom: 30px;
    }

    @keyframes loading-b-y6a0nytb37 {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    @media (max-width: 640px) {
        .design-hero-content[b-y6a0nytb37] {
            flex-direction: column;
            text-align: center;
        }

        .filter-bar[b-y6a0nytb37] {
            flex-direction: column;
            align-items: stretch;
        }

        .filter-count[b-y6a0nytb37] {
            margin-left: 0;
            text-align: center;
        }
    }
/* /Pages/Tools/FlipBookStudio.razor.rz.scp.css */
/* ============================================
   FLIP-BOOK STUDIO — SCOPED STYLES
   Single-screen tool: source picker, frame strip,
   preview + export. Uses theme CSS vars so all
   8 NTS themes are supported automatically.
   ============================================ */

.flipbook-page[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    min-height: 100vh;
    color: var(--theme-text-primary, #1e293b);

    /* FB-V-1 (2026-05-11): Was `background: var(--theme-surface-secondary, #f8fafc)`. The
       `--theme-bg` token doesn't exist in the theme system — themes use
       `--theme-page-bg` on body and `--theme-surface` on cards — so the
       fallback `#f8fafc` (light gray) always won, painting a white page
       over the body's themed gradient + ambient effects. Switching to
       transparent lets the themed body (Space stars, Winter snow, Nature
       leaves, etc.) show through. Tile cards still use `--theme-surface`
       for their own opaque backgrounds, so contrast is preserved. */
    background: transparent;
}

/* ----- hero ----- */
.flipbook-hero[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    /* VG-D-2 (2026-05): hardcoded rgba(0,0,0,...) shadows → theme-shadow-color so
       dark themes (Space, Tron, Mystic) get a tinted glow instead of double-darken. */
    box-shadow: 0 1px 2px var(--theme-shadow-color, rgba(0, 0, 0, 0.03));
}

.flipbook-hero-left[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.flipbook-hero-icon[b-w0ssp8tqbx] {
    font-size: 2rem;
    line-height: 1;
}

.flipbook-hero-title[b-w0ssp8tqbx] {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
}

.flipbook-hero-subtitle[b-w0ssp8tqbx] {
    margin: 0.15rem 0 0 0;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
}

/* FB-V-15 (2026-05-12): Inline rename in the editor hero. The title-button
   is the at-rest affordance — looks like a normal H1 plus a faint pencil
   that brightens on hover. The input swaps in for edit mode and inherits
   the H1 sizing so the swap doesn't shift the layout. */
.flipbook-hero-text[b-w0ssp8tqbx] {
    /* Wrapper around the swap so the click-to-edit hit area is bounded to
       the title block, not the full hero-left flex row. */
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.flipbook-hero-title-button[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    margin: -0.1rem -0.45rem;
    cursor: text;
    color: var(--theme-text-primary, #1e293b);
    text-align: left;
    transition: background 120ms ease, border-color 120ms ease;
}
.flipbook-hero-title-button:hover[b-w0ssp8tqbx],
.flipbook-hero-title-button:focus-visible[b-w0ssp8tqbx] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.18);
    outline: none;
}
.flipbook-hero-title-button .flipbook-hero-title[b-w0ssp8tqbx] {
    /* The button wraps the H1 — re-flow inline so the pencil sits on the
       same baseline as the title text. */
    display: inline;
}
.flipbook-hero-title-edit-icon[b-w0ssp8tqbx] {
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 120ms ease;
}
.flipbook-hero-title-button:hover .flipbook-hero-title-edit-icon[b-w0ssp8tqbx],
.flipbook-hero-title-button:focus-visible .flipbook-hero-title-edit-icon[b-w0ssp8tqbx] {
    opacity: 0.7;
}

.flipbook-hero-title-input[b-w0ssp8tqbx] {
    /* Match the H1 styling so the swap is layout-neutral. Border lights up
       to telegraph "you're editing now". */
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-surface-primary, #ffffff);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.45);
    border-radius: 6px;
    padding: 0.1rem 0.45rem;
    margin: -0.1rem -0.45rem;
    min-width: 0;
    width: min(420px, 100%);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}
.flipbook-hero-title-input[b-w0ssp8tqbx]::placeholder {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 600;
}

/* FB-V-13 (2026-05-11): Hero-right cluster. Holds the persistent Media
   Library link and (when a project is open) the Back-to-Projects button. */
.flipbook-hero-right[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* FB-V-13: Persistent "Media Library" hero link. Promoted from the empty-
   state CTA row because the Media Library is a navigation affordance — the
   central media surface across the whole app — not a per-action button.
   Visually subtle so it doesn't compete with the per-state CTAs in the
   page body, but always discoverable from the hero. Theme-token-driven. */
.flipbook-hero-link[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.flipbook-hero-link:hover[b-w0ssp8tqbx] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* FB-V-13.2 (2026-05-11): Sizes the inline SVG (and emoji fallback) for the
   hero link. Width/height in rem so it tracks the rest of the link's typography
   under theme zoom. `fill: currentColor` is set on the SVG itself so the icon
   tracks the link's text-secondary → theme-primary hover transition. */
.flipbook-hero-link-icon[b-w0ssp8tqbx] {
    width: 1rem;
    height: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

/* "Back to Projects" hero button — only renders while a project is open.
   Inherits the shared .flipbook-secondary-btn base so it tracks the NTS
   design system across all eight themes; the overrides here just tighten
   padding / gap for the hero-right slot and add the arrow icon. */
.flipbook-back-to-projects-btn[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.9rem;
}

.flipbook-back-to-projects-icon[b-w0ssp8tqbx] {
    font-size: 1rem;
    line-height: 1;
}

/* ----- loading / empty ----- */
.flipbook-loading[b-w0ssp8tqbx] {
    padding: 3rem;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
}

.flipbook-empty[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.flipbook-empty-card[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    background: var(--theme-surface, #ffffff);
    border: 1px dashed var(--theme-border, #cbd5e1);
    border-radius: 16px;
    text-align: center;
}

.flipbook-empty-icon[b-w0ssp8tqbx] { font-size: 2.5rem; }
.flipbook-empty-card h2[b-w0ssp8tqbx] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
}
.flipbook-empty-card p[b-w0ssp8tqbx] {
    max-width: 42rem;
    margin: 0;
    color: var(--theme-text-secondary, #64748b);
}

/* VG-V-3 (2026-05): empty-state action cluster — primary CTA + secondary affordances
   wrap into a column on narrow viewports. Items align center for visual balance. */
.flipbook-empty-actions[b-w0ssp8tqbx] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin-top: 0.25rem;
}

/* VG-V-4 (2026-05): post-save deep-link banner. Lives above the main studio panels
   so the user notices it immediately after a save without it stealing the panel
   real estate. Theme-aware surface + primary border so the banner harmonizes with
   the active theme. */
.flipbook-saved-banner[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
    background: var(--theme-surface-elevated, #f8fafc);
    border: 1px solid var(--theme-primary, #6366f1);
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--theme-text-primary, #1e293b);
}
.flipbook-saved-banner-icon[b-w0ssp8tqbx] {
    font-size: 1.1rem;
    flex: 0 0 auto;
}
.flipbook-saved-banner-text[b-w0ssp8tqbx] {
    flex: 1 1 auto;
    color: var(--theme-text-secondary, #64748b);
}
.flipbook-saved-banner-text strong[b-w0ssp8tqbx] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
}
.flipbook-saved-banner-link[b-w0ssp8tqbx] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    text-decoration: none;
    flex: 0 0 auto;
}
.flipbook-saved-banner-link:hover[b-w0ssp8tqbx] {
    text-decoration: underline;
}
.flipbook-saved-banner-dismiss[b-w0ssp8tqbx] {
    background: transparent;
    border: none;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    flex: 0 0 auto;
    line-height: 1;
}
.flipbook-saved-banner-dismiss:hover[b-w0ssp8tqbx] {
    color: var(--theme-text-primary, #1e293b);
}

/* ----- drafts ----- */
.flipbook-drafts-title[b-w0ssp8tqbx] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--theme-text-primary, #1e293b);
}

.flipbook-drafts-grid[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.flipbook-draft-card[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}
.flipbook-draft-card:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    transform: translateY(-1px);
}
.flipbook-draft-thumb[b-w0ssp8tqbx] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}
.flipbook-draft-thumb-placeholder[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 8px;
    font-size: 2rem;
}
.flipbook-draft-title[b-w0ssp8tqbx] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
}
.flipbook-draft-meta[b-w0ssp8tqbx] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

/* Drafts toolbar: heading + "Archived (N)" pill button on the right side.
   Previously the heading was a naked <h3>; adding the archive button pushed
   us into a flex row so the button right-aligns cleanly against the grid. */
.flipbook-drafts-header[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.flipbook-drafts-header .flipbook-drafts-title[b-w0ssp8tqbx] {
    /* Header wraps the title now — drop its margin so the row is flat. */
    margin: 0;
}

/* FB-V-14 (2026-05-12): Archived projects link tucked at the bottom of the
   page. Was previously a pill next to the "Your drafts" heading where it
   competed for attention with the primary CTA — archive is a recovery
   surface, not a top-level action. Quiet ghost-pill keeps it discoverable
   without ever feeling primary. */
.flipbook-archived-footer[b-w0ssp8tqbx] {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--theme-border, rgba(148, 163, 184, 0.3));
}
.flipbook-archived-footer-btn[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.flipbook-archived-footer-btn:hover[b-w0ssp8tqbx],
.flipbook-archived-footer-btn:focus-visible[b-w0ssp8tqbx] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    color: var(--theme-text-primary, #1e293b);
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.25);
    outline: none;
}

/* Per-card wrapper + hover-revealed archive icon. The icon sits OUTSIDE the
   <button class="flipbook-draft-card"> so we don't nest buttons (invalid
   HTML) and the icon's click doesn't bubble into card-open. It's absolutely
   positioned in the top-right corner and fades in at card:hover. */
.flipbook-draft-card-wrap[b-w0ssp8tqbx] {
    position: relative;
    display: flex;
}
.flipbook-draft-card-wrap .flipbook-draft-card[b-w0ssp8tqbx] {
    flex: 1;
    width: 100%;
}
.flipbook-draft-archive-icon[b-w0ssp8tqbx],
.flipbook-draft-rename-icon[b-w0ssp8tqbx] {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    font-size: 1rem;
    line-height: 1;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    /* Sit above the card thumb so image opacity doesn't dim us. */
    z-index: 2;
    box-shadow: 0 1px 2px var(--theme-shadow-color, rgba(0, 0, 0, 0.06));
}
.flipbook-draft-card-wrap:hover .flipbook-draft-archive-icon[b-w0ssp8tqbx],
.flipbook-draft-card-wrap:focus-within .flipbook-draft-archive-icon[b-w0ssp8tqbx],
.flipbook-draft-card-wrap:hover .flipbook-draft-rename-icon[b-w0ssp8tqbx],
.flipbook-draft-card-wrap:focus-within .flipbook-draft-rename-icon[b-w0ssp8tqbx] {
    opacity: 1;
    transform: translateY(0);
}
.flipbook-draft-archive-icon:hover[b-w0ssp8tqbx],
.flipbook-draft-rename-icon:hover[b-w0ssp8tqbx] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
    border-color: var(--theme-primary, #6366f1);
}
.flipbook-draft-archive-icon:focus-visible[b-w0ssp8tqbx],
.flipbook-draft-rename-icon:focus-visible[b-w0ssp8tqbx] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
    opacity: 1;
    transform: translateY(0);
}

/* FB-V-15.1 (2026-05-12): Pencil sits LEFT of the archive icon so the
   archive stays anchored in the absolute top-right corner of the card
   (consistent with the editor-strip pattern). 2rem icon width + 0.35rem
   gap puts it at right: 2.75rem from the card edge. */
.flipbook-draft-rename-icon[b-w0ssp8tqbx] {
    right: 2.75rem;
}

/* Touch-first devices don't have hover, so always show the icons there.
   Users on iPads / phones can still rename / archive without fiddling
   with a long-press. */
@media (hover: none) {
    .flipbook-draft-archive-icon[b-w0ssp8tqbx],
    .flipbook-draft-rename-icon[b-w0ssp8tqbx] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* FB-V-15.1 (2026-05-12): Inline rename input on a draft card. The card
   div (renamed variant) keeps the same layout as the at-rest button, but
   the title slot becomes an editable input. Border lights up to telegraph
   "you're editing now" — same pattern as the hero rename. */
.flipbook-draft-card-renaming[b-w0ssp8tqbx] {
    /* Mirror .flipbook-draft-card so the swap is layout-neutral. */
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.45);
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    flex: 1;
    width: 100%;
}
.flipbook-draft-rename-input[b-w0ssp8tqbx] {
    /* Match .flipbook-draft-title sizing so the swap doesn't shift the
       meta line below. */
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-surface-primary, #ffffff);
    border: 1px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35);
    border-radius: 6px;
    padding: 0.2rem 0.4rem;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}
.flipbook-draft-rename-input:focus[b-w0ssp8tqbx] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.7);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.18);
}
.flipbook-draft-rename-input[b-w0ssp8tqbx]::placeholder {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 600;
}

/* ----- studio sections ----- */
.flipbook-studio[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.flipbook-panel[b-w0ssp8tqbx] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: 0 1px 2px var(--theme-shadow-color, rgba(0, 0, 0, 0.03));
}

.flipbook-panel-header[b-w0ssp8tqbx] {
    margin-bottom: 1rem;
}
.flipbook-panel-header h2[b-w0ssp8tqbx] {
    margin: 0 0 0.2rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}
.flipbook-panel-header p[b-w0ssp8tqbx] {
    margin: 0;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.88rem;
}
.flipbook-panel-header p strong[b-w0ssp8tqbx] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* ----- source picker ----- */
.flipbook-source-picker[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.flipbook-source-tile[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.25rem;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 2px dashed var(--theme-border, #cbd5e1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.flipbook-source-tile:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    background: var(--theme-surface, #ffffff);
}
.flipbook-source-tile--prompt[b-w0ssp8tqbx] {
    cursor: default;
    gap: 0.6rem;
}

/* Library tile is a <button>, reset native styling so it matches the others. */
.flipbook-source-tile--library[b-w0ssp8tqbx] {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    color: inherit;
    width: 100%;
}

/* Hide the native file input inside the upload tile; the whole tile is the trigger. */
.flipbook-source-tile[b-w0ssp8tqbx]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.flipbook-source-tile-icon[b-w0ssp8tqbx] { font-size: 1.75rem; }
.flipbook-source-tile-label[b-w0ssp8tqbx] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}
.flipbook-source-tile-hint[b-w0ssp8tqbx] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}
/* FB-V-2 (2026-05-11): Upgraded from a cramped single-line input to a
   multi-line textarea matching the VG Lab Quick Video pattern. Theme-token-
   driven so all 8 themes work without overrides. */
.flipbook-source-prompt[b-w0ssp8tqbx] {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
    min-height: 96px;
    resize: vertical;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.flipbook-source-prompt[b-w0ssp8tqbx]::placeholder {
    color: var(--theme-text-muted, #94a3b8);
}

.flipbook-source-prompt:focus[b-w0ssp8tqbx] {
    outline: none;
    border-color: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.18);
}

.flipbook-source-prompt-meta[b-w0ssp8tqbx] {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: -0.25rem;
}

.flipbook-source-char-count[b-w0ssp8tqbx] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.flipbook-source-char-count.is-warning[b-w0ssp8tqbx] {
    color: #f59e0b;
}

/* Inspiration pills row — click a pill to autofill the prompt, click the
   dice to shuffle a new set from the 20-prompt corpus. */
.flipbook-inspiration[b-w0ssp8tqbx] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.flipbook-inspiration-label[b-w0ssp8tqbx] {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 500;
}

.flipbook-inspiration-pills[b-w0ssp8tqbx] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.flipbook-inspiration-pill[b-w0ssp8tqbx] {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 12px;
    background: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.12);
    border: 1px solid rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.25);
    border-radius: 20px;
    font: inherit;
    font-size: 0.78rem;
    color: var(--theme-text-primary, #1e293b);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
}

.flipbook-inspiration-pill:hover[b-w0ssp8tqbx] {
    background: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.22);
    border-color: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.45);
    transform: translateY(-1px);
}

.flipbook-inspiration-pill:active[b-w0ssp8tqbx] {
    transform: translateY(0);
}

.flipbook-inspiration-shuffle[b-w0ssp8tqbx] {
    flex-shrink: 0;
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.35);
    font-size: 0.95rem;
    padding: 6px 10px;
}

.flipbook-inspiration-shuffle:hover[b-w0ssp8tqbx] {
    background: rgba(251, 191, 36, 0.28);
    border-color: rgba(251, 191, 36, 0.55);
}

/* FB-V-5 (2026-05-11): Unified "Refine your prompt" disclosure. Consolidates
   what would have been six stacked widget rows (Style + Character + Scene +
   Shot + Time + Mood) into one collapsible panel with a 3x2 grid. The Refine
   toggle is always visible above the Generate button so the affordance is
   discoverable without taking space when collapsed. */
.flipbook-refine[b-w0ssp8tqbx] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.flipbook-refine-toggle[b-w0ssp8tqbx] {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--theme-text-muted, #94a3b8);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}

.flipbook-refine-toggle:hover[b-w0ssp8tqbx] {
    background: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.08);
    color: var(--theme-text-primary, #1e293b);
}

.flipbook-refine-chevron[b-w0ssp8tqbx] {
    display: inline-block;
    width: 0.85rem;
    text-align: center;
    color: inherit;
    transition: transform 0.15s ease;
}

.flipbook-refine-title[b-w0ssp8tqbx] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.flipbook-refine-hint[b-w0ssp8tqbx] {
    margin-left: 0.15rem;
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--theme-text-muted, #94a3b8);
    opacity: 0.7;
}

/* 3x2 grid on wide screens, collapses to 2x3 / 1x6 on narrow viewports. */
.flipbook-refine-grid[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem 0.75rem;
    padding: 0.25rem 0 0.1rem;
}

@media (max-width: 720px) {
    .flipbook-refine-grid[b-w0ssp8tqbx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .flipbook-refine-grid[b-w0ssp8tqbx] {
        grid-template-columns: 1fr;
    }
}

.flipbook-refine-field[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.flipbook-refine-field label[b-w0ssp8tqbx] {
    font-size: 0.72rem;
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.flipbook-refine-select[b-w0ssp8tqbx] {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.42rem 0.6rem;
    padding-right: 1.6rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.35rem center;
    background-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    text-overflow: ellipsis;
}

.flipbook-refine-select:focus[b-w0ssp8tqbx] {
    outline: none;
    border-color: rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--theme-accent-rgb, var(--theme-primary-rgb, 99, 102, 241)), 0.15);
}

/* Dark-theme chevron — lighter slate stays visible on dark surfaces. */
.is-dark .flipbook-refine-select[b-w0ssp8tqbx] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'><path d='M7 10l5 5 5-5z'/></svg>");
}

/* FB-V-11 (2026-05-11): Two-column grid for the source-preview state.
   Pre-fix this was `flex-direction: column` which left ~75% of the panel
   empty on the right. Now image takes the left column at a usable size and
   the prompt editor + fingerprint panel + replace button stack on the right
   in `.flipbook-source-side`. Collapses to single-column on narrow viewports
   so the image still gets full width on mobile. */
.flipbook-source-preview[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .flipbook-source-preview[b-w0ssp8tqbx] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.flipbook-source-image[b-w0ssp8tqbx] {
    width: 100%;
    max-width: 420px;
    /* FB-V-17 (2026-05-12): Cap height so a tall source (e.g. a 1024×1024
       DALL-E square or a portrait upload) doesn't dwarf the right-side
       column, which often only carries a collapsed Fingerprint disclosure
       + Replace-source link. Image preserves natural aspect ratio inside
       the cap, so a square 1024×1024 ends up at 320×320 instead of
       420×420. Lightbox still serves the full-resolution view on click. */
    max-height: 320px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    cursor: zoom-in; /* hint that clicking opens the lightbox */
}

.flipbook-source-side[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* FB-V-17: anchor children to the left so
                                "Replace source" link doesn't drift to
                                the column's right edge when the row is
                                otherwise empty. Width: 100% on the
                                full-width children (textarea, fingerprint
                                panel) keeps them spanning. */
    gap: 0.75rem;
    min-width: 0; /* let textareas inside actually shrink instead of overflowing */
}
.flipbook-source-side > .flipbook-source-prompt-editor[b-w0ssp8tqbx],
.flipbook-source-side > .flipbook-fingerprint-panel[b-w0ssp8tqbx] {
    /* Children that should still span the full column width, despite the
       align-items: flex-start above. */
    align-self: stretch;
}

/* Source prompt editor — only rendered for DALL-E-generated sources (where
   _project.SourceImagePrompt is non-null). Sits below the locked preview,
   above the "Replace source" escape hatch, so the user can tweak + regenerate
   without having to clear the frame chain first.

   Styling matches the existing planner + insert-panel cards so it feels like
   part of the same family: subtle surface tint, theme-aware border, a single
   primary CTA. The max-width is capped so the textarea doesn't sprawl across
   wide viewports; the editor lines up naturally under the 260px-wide preview
   image. */
.flipbook-source-prompt-editor[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    max-width: 420px;
    padding: 0.75rem;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
}
.flipbook-source-prompt-label[b-w0ssp8tqbx] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.flipbook-source-prompt-textarea[b-w0ssp8tqbx] {
    width: 100%;
    resize: vertical;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    font-size: 0.9rem;
    line-height: 1.35;
    font-family: inherit;
}
.flipbook-source-prompt-textarea:disabled[b-w0ssp8tqbx] {
    opacity: 0.6;
    cursor: not-allowed;
}
.flipbook-source-prompt-hint[b-w0ssp8tqbx] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
}
.flipbook-source-prompt-actions[b-w0ssp8tqbx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ----- character fingerprint panel -----
   Shows the GPT-4o Vision descriptor that's injected into every frame-edit
   prompt as the identity anchor. Lives directly under the source preview,
   above the "Replace source" escape hatch. Collapsed by default so the
   source card stays calm — the vast majority of users will never expand it.
   Matches the same surface-tint-in-rounded-card treatment as the prompt
   editor above it, but with a click-to-expand chevron header because this
   block is usually dormant (source prompt editor is always open). */
.flipbook-fingerprint-panel[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 420px;
    padding: 0.65rem 0.75rem;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
}
.flipbook-fingerprint-header[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
}
.flipbook-fingerprint-toggle[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.flipbook-fingerprint-toggle:hover[b-w0ssp8tqbx] {
    color: var(--theme-text-primary, #1e293b);
}
.flipbook-fingerprint-chevron[b-w0ssp8tqbx] {
    display: inline-block;
    width: 0.75rem;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--theme-text-muted, #64748b);
}
.flipbook-fingerprint-title[b-w0ssp8tqbx] {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.flipbook-fingerprint-desc[b-w0ssp8tqbx] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--theme-text-muted, #64748b);
    line-height: 1.35;
}
.flipbook-fingerprint-text[b-w0ssp8tqbx] {
    margin: 0;
    padding: 0.55rem 0.65rem;
    background: var(--theme-input-bg, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--theme-text-primary, #1e293b);
    white-space: pre-wrap;
}
.flipbook-fingerprint-empty[b-w0ssp8tqbx] {
    margin: 0;
    padding: 0.55rem 0.65rem;
    background: var(--theme-input-bg, #ffffff);
    border: 1px dashed var(--theme-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--theme-text-muted, #64748b);
    font-style: italic;
}
.flipbook-fingerprint-textarea[b-w0ssp8tqbx] {
    width: 100%;
    resize: vertical;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    font-size: 0.85rem;
    line-height: 1.4;
    font-family: inherit;
}
.flipbook-fingerprint-textarea:disabled[b-w0ssp8tqbx] {
    opacity: 0.6;
    cursor: not-allowed;
}
.flipbook-fingerprint-actions[b-w0ssp8tqbx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ----- frame strip ----- */
.flipbook-frame-strip[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.flipbook-frame-tile[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    position: relative;
    transition: all 0.15s ease;
}
.flipbook-frame-tile.is-ready[b-w0ssp8tqbx] {
    border-color: var(--theme-success, #10b981);
}
.flipbook-frame-tile.is-generating[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    animation: flipbook-pulse-b-w0ssp8tqbx 1.2s ease-in-out infinite;
}
.flipbook-frame-tile.is-failed[b-w0ssp8tqbx] {
    border-color: var(--theme-danger, #ef4444);
}
.flipbook-frame-tile.is-skipped[b-w0ssp8tqbx] {
    border-color: var(--theme-warning, #f59e0b);
    border-style: dashed;
    opacity: 0.82;
}
.flipbook-frame-tile.is-skipped .flipbook-frame-thumb[b-w0ssp8tqbx] {
    background: var(--theme-surface, #f1f5f9);
    color: var(--theme-text-muted, #6b7280);
    font-weight: 600;
}

/* VG-D-3 (2026-05): pulse glow tracks the active theme via color-mix on
   --theme-primary. Falls back to indigo only if the browser is too old to
   support color-mix (Safari 16.4+ / Chrome 111+) or the var resolves blank. */
@keyframes flipbook-pulse-b-w0ssp8tqbx {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--theme-primary, #6366f1) 40%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--theme-primary, #6366f1) 0%, transparent); }
}

.flipbook-frame-thumb[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 8px;
    overflow: hidden;
}
.flipbook-frame-thumb img[b-w0ssp8tqbx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.flipbook-frame-placeholder[b-w0ssp8tqbx] {
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.85rem;
}

/* FB-V-22 (2026-05-12): Two-line empty-frame placeholder. Frame number on
   top, "+ Add prompt" hint below in the theme-primary tint so it reads as
   an actionable affordance rather than dead space. flex-column centers
   both lines vertically inside the existing thumb box. */
.flipbook-frame-placeholder-empty[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    height: 100%;
}
.flipbook-frame-placeholder-num[b-w0ssp8tqbx] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-muted, #94a3b8);
    line-height: 1;
}
.flipbook-frame-placeholder-hint[b-w0ssp8tqbx] {
    font-size: 0.65rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
}

/* Ring-spinner shown while a single frame is in flight. The static ⏳ emoji
   read as frozen to users (people literally asked if the tile was stuck), so
   we use an actual rotating ring + a short "Generating…" caption. The parent
   `.is-generating` class also drives a border pulse + shimmer overlay — the
   three cues together make it unambiguous that work is happening. */
.flipbook-frame-spinner[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.25rem;
    color: var(--theme-text-secondary, #475569);
}
.flipbook-spinner-ring[b-w0ssp8tqbx] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--theme-border, rgba(148, 163, 184, 0.35));
    border-top-color: var(--theme-primary, #6366f1);
    animation: flipbook-spin-b-w0ssp8tqbx 0.9s linear infinite;
}
.flipbook-spinner-label[b-w0ssp8tqbx] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--theme-text-secondary, #64748b);
    text-align: center;
}

@keyframes flipbook-spin-b-w0ssp8tqbx {
    to { transform: rotate(360deg); }
}

.flipbook-frame-prompt[b-w0ssp8tqbx] {
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    font-size: 0.85rem;
    font-family: inherit;
    resize: vertical;
}

.flipbook-frame-actions[b-w0ssp8tqbx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}
.flipbook-tiny-btn[b-w0ssp8tqbx] {
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    font-size: 0.85rem;
    transition: color 120ms ease, border-color 120ms ease;
}
/* Default tiny-btn (the ✕ delete) — destructive, turns red on hover. */
.flipbook-tiny-btn:hover:not(:disabled)[b-w0ssp8tqbx] {
    color: var(--theme-danger, #ef4444);
    border-color: var(--theme-danger, #ef4444);
}
.flipbook-tiny-btn:disabled[b-w0ssp8tqbx] {
    opacity: 0.45;
    cursor: not-allowed;
}
/* Regenerate tiny-btn is non-destructive, so it adopts the theme accent
   instead of red. Overrides the :hover default above with higher specificity
   via the chained class. */
.flipbook-tiny-btn.flipbook-regenerate-btn:hover:not(:disabled)[b-w0ssp8tqbx] {
    color: var(--theme-primary-ink, var(--theme-primary, #8b5cf6));
    border-color: var(--theme-primary, #8b5cf6);
}
/* While regenerate is in flight we spin the ↻ glyph itself — the surrounding
   button stays disabled, so the rotating icon becomes the visible "working"
   indicator on the actions row. The glyph is wrapped in `.flipbook-regenerate-icon`
   so only the icon rotates, not the button box / focus ring. */
.flipbook-regenerate-icon[b-w0ssp8tqbx] {
    display: inline-block;
    line-height: 1;
    transform-origin: 50% 55%; /* ↻ is slightly top-heavy; nudge center down */
}
.flipbook-tiny-btn.flipbook-regenerate-btn.is-spinning[b-w0ssp8tqbx] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: var(--theme-primary, #6366f1);
}
.flipbook-tiny-btn.flipbook-regenerate-btn.is-spinning .flipbook-regenerate-icon[b-w0ssp8tqbx] {
    animation: flipbook-spin-b-w0ssp8tqbx 0.9s linear infinite;
}

.flipbook-frame-error[b-w0ssp8tqbx] {
    font-size: 0.8rem;
    color: var(--theme-danger, #ef4444);
    background: rgba(239, 68, 68, 0.08);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}
/* Soft amber warning when an upstream regenerate has invalidated this frame's
   chain input. Intentionally lighter-weight than .flipbook-frame-error so it
   reads as "heads up" rather than "something broke". */
.flipbook-frame-stale[b-w0ssp8tqbx] {
    font-size: 0.78rem;
    color: var(--theme-warning, #d97706);
    background: rgba(217, 119, 6, 0.10);
    border: 1px solid rgba(217, 119, 6, 0.25);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}

.flipbook-frame-add[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 2px dashed var(--theme-border, #cbd5e1);
    border-radius: 10px;
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.15s ease;
}
.flipbook-frame-add:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* =============================================================
   Timeline (replaces the frame strip for the timeline UX).
   Horizontal scrollable track of thumbnails with "+" gap buttons
   between every pair. The scrub range input sits right under the
   track. A detail panel below opens for the selected frame. All
   colors come from theme vars so it reads correctly across all 8
   themes.
   ============================================================= */
.flipbook-timeline[b-w0ssp8tqbx] {
    display: flex;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.04));
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    /* Faint inner shadow to suggest the "track" metaphor. */
    box-shadow: inset 0 1px 0 var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

/* One frame cell in the timeline. Clickable to select. Keeps a stable
   width so the track reads as evenly-spaced keyframes rather than a
   justify-content flexbox that would squish thumbnails as the count
   grows. */
.flipbook-timeline-frame[b-w0ssp8tqbx] {
    flex: 0 0 auto;
    width: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem;
    border-radius: 10px;
    border: 2px solid transparent;
    background: var(--theme-surface, #ffffff);
    cursor: pointer;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
    position: relative;
}
.flipbook-timeline-frame:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-border, #cbd5e1);
    transform: translateY(-1px);
}
.flipbook-timeline-frame.is-selected[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    /* VG-D-3 (2026-05): selected-frame ring tracks the theme primary so the
       indicator harmonizes with Tron / Mystic / Nature instead of always indigo. */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #6366f1) 15%, transparent);
}
.flipbook-timeline-frame.is-ready[b-w0ssp8tqbx] {
    /* Ready frames still get a subtle check via the success color on the
       bottom edge — not a full border so selection remains readable. */
    box-shadow: inset 0 -2px 0 var(--theme-success, #10b981);
}
.flipbook-timeline-frame.is-generating[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    animation: flipbook-pulse-b-w0ssp8tqbx 1.2s ease-in-out infinite;
}
/* A left-to-right shimmer sweep on the thumb background adds a third "live"
   cue on top of the border pulse + ring spinner. We scope it to
   `.is-generating .flipbook-timeline-thumb` so idle tiles never shimmer, and
   we keep it transparent/low-opacity so it doesn't fight the spinner label. */
.flipbook-timeline-frame.is-generating .flipbook-timeline-thumb[b-w0ssp8tqbx] {
    position: relative;
    background: linear-gradient(
        110deg,
        var(--theme-surface-secondary, #f1f5f9) 0%,
        var(--theme-surface, #e2e8f0) 50%,
        var(--theme-surface-secondary, #f1f5f9) 100%
    );
    background-size: 200% 100%;
    animation: flipbook-shimmer-b-w0ssp8tqbx 1.6s ease-in-out infinite;
}

@keyframes flipbook-shimmer-b-w0ssp8tqbx {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.flipbook-timeline-frame.is-failed[b-w0ssp8tqbx] {
    border-color: var(--theme-danger, #ef4444);
}
.flipbook-timeline-frame.is-skipped[b-w0ssp8tqbx] {
    border-color: var(--theme-warning, #f59e0b);
    border-style: dashed;
    opacity: 0.82;
}

/* The source thumb on the far left is visually pinned — it can be selected
   for preview but not deleted/regenerated, so we de-emphasize its border
   and label it 'Source'. */
.flipbook-timeline-source[b-w0ssp8tqbx] {
    cursor: default;
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.04));
}
.flipbook-timeline-source:hover[b-w0ssp8tqbx] {
    transform: none;
}

.flipbook-timeline-thumb[b-w0ssp8tqbx] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 6px;
    overflow: hidden;
}
.flipbook-timeline-thumb img[b-w0ssp8tqbx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.flipbook-timeline-label[b-w0ssp8tqbx] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    font-weight: 600;
    line-height: 1;
}

/* Stale badge on the thumbnail corner — a small amber circle so users can
   spot chain-broken frames from across the timeline at a glance. */
.flipbook-timeline-badge[b-w0ssp8tqbx] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-warning, #d97706);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* The "+" gap button between frames. Sits in the track's flex flow so it
   occupies its own column. Small, unobtrusive by default; grows / turns
   primary on hover so the insert affordance is discoverable without being
   visually noisy on a 6-frame timeline. */
.flipbook-timeline-insert[b-w0ssp8tqbx] {
    flex: 0 0 auto;
    align-self: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px dashed var(--theme-border, #cbd5e1);
    background: transparent;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease, border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.flipbook-timeline-insert:hover:not(:disabled)[b-w0ssp8tqbx] {
    transform: scale(1.2);
    border-style: solid;
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: var(--theme-surface, #ffffff);
}
.flipbook-timeline-insert.is-open[b-w0ssp8tqbx] {
    border-style: solid;
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: var(--theme-surface, #ffffff);
    transform: scale(1.2);
}
.flipbook-timeline-insert:disabled[b-w0ssp8tqbx] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============================================================= */
/* Timeline toolbar — sits above the track and exposes the drag  */
/* hint, the "Archive (N)" button, and the restore-mode chip.    */
/* Kept small and subdued so it doesn't compete with the track   */
/* itself, which is the main UI element on this screen.          */
/* ============================================================= */
.flipbook-timeline-toolbar[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0 0.25rem 0.5rem 0.25rem;
    min-height: 28px;
}
/* First child (hint / restore hint) takes up remaining space so the
   archive pill hugs the right edge of the toolbar. */
.flipbook-timeline-toolbar > :first-child[b-w0ssp8tqbx] {
    flex: 1 1 auto;
    min-width: 0;
}
.flipbook-timeline-hint[b-w0ssp8tqbx] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.3;
}
.flipbook-restore-hint[b-w0ssp8tqbx] {
    font-size: 0.78rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    line-height: 1.3;
}

/* The archive button lives on the right side of the toolbar. Pill
   shape + muted surface so it reads as a secondary entry point
   rather than a primary CTA. */
.flipbook-archive-btn[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 999px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.flipbook-archive-btn:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}
.flipbook-archive-btn:focus-visible[b-w0ssp8tqbx] {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #6366f1) 25%, transparent);
}
.flipbook-archive-btn:disabled[b-w0ssp8tqbx] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================= */
/* Drag-and-drop reorder — visual feedback on the tiles. Native   */
/* HTML5 DnD handles the event plumbing; these classes are just   */
/* styling for the "source" tile (being dragged) and the "over"  */
/* tile (drop target). Keep transitions short so the track feels */
/* responsive while dragging through multiple tiles quickly.     */
/* ============================================================= */
.flipbook-timeline-frame[draggable="true"][b-w0ssp8tqbx] {
    cursor: grab;
}
.flipbook-timeline-frame[draggable="true"]:active[b-w0ssp8tqbx] {
    cursor: grabbing;
}
.flipbook-timeline-frame.is-drag-source[b-w0ssp8tqbx] {
    opacity: 0.45;
    transform: scale(0.96);
}
.flipbook-timeline-frame.is-drag-over[b-w0ssp8tqbx] {
    /* Primary-colored insert bar on the left edge of the target tile
       to show "drop here will insert before this frame". */
    box-shadow: inset 3px 0 0 var(--theme-primary, #6366f1);
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 6%, var(--theme-surface, #ffffff));
}

/* Restore-mode styling — the timeline dims slightly and the "+" gap
   buttons take on a primary tint to say "click a gap to restore
   here". Tiles are not clickable while in restore mode; cursor flips
   to default so users don't think they can click the tile itself. */
.flipbook-timeline.is-restore-mode .flipbook-timeline-frame[b-w0ssp8tqbx] {
    cursor: default;
}
.flipbook-timeline-insert.is-restore-target[b-w0ssp8tqbx] {
    border-style: solid;
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
    animation: flipbook-pulse-b-w0ssp8tqbx 1.6s ease-in-out infinite;
}
.flipbook-timeline-insert.is-restore-target:hover:not(:disabled)[b-w0ssp8tqbx] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
}

/* ============================================================= */
/* Archive modal — a separate panel that lists all archived      */
/* frames with thumbnail, prompt preview, and a Restore action.  */
/* Reuses the base .flipbook-modal shell but defines its own     */
/* grid and card styles so archived frames read as a gallery.    */
/* ============================================================= */
.flipbook-archive-grid[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
    padding: 0.25rem;
}
.flipbook-archive-card[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface, #ffffff);
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.flipbook-archive-card:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}
.flipbook-archive-thumb[b-w0ssp8tqbx] {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--theme-surface-secondary, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}
.flipbook-archive-thumb img[b-w0ssp8tqbx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.flipbook-archive-thumb-empty[b-w0ssp8tqbx] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #94a3b8);
    text-align: center;
    padding: 0.5rem;
    line-height: 1.3;
}
.flipbook-archive-prompt[b-w0ssp8tqbx] {
    font-size: 0.8rem;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.35;
    /* Clamp to 3 lines so cards stay a consistent height. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.15em;
}
.flipbook-archive-prompt-empty[b-w0ssp8tqbx] {
    font-style: italic;
    color: var(--theme-text-secondary, #94a3b8);
}
.flipbook-archive-actions[b-w0ssp8tqbx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
}
/* Restore button reuses the shared .flipbook-secondary-btn class (see below),
   so we only need to stretch it inside the actions row. */
.flipbook-archive-actions .flipbook-secondary-btn[b-w0ssp8tqbx] {
    flex: 1 1 auto;
}
/* .flipbook-modal-empty styling already lives further down (library picker
   uses the same class). The archive empty state reuses it unchanged. */
.flipbook-modal-hint[b-w0ssp8tqbx] {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--theme-text-secondary, #64748b);
    font-style: italic;
}

/* Scrub bar. Native range input gets us keyboard + touch for free; we just
   need theme-aware track + thumb styling. WebKit/Blink and Firefox take
   different pseudo-elements, so the rules are duplicated. */
/* FB-V-25 (2026-05-12): Wrapper row for play button + label + scrub
   slider so the slider isn't sitting alone in the page. The slider keeps
   its own existing styling — flex-1 lets it consume the remaining width
   after the fixed-size button + label. */
.flipbook-timeline-scrub-row[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.flipbook-timeline-scrub-row .flipbook-timeline-scrub[b-w0ssp8tqbx] {
    flex: 1;
    margin-bottom: 0; /* the row already provides bottom margin */
}
.flipbook-scrub-play-btn[b-w0ssp8tqbx] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--theme-primary, #6366f1);
    border: 1px solid var(--theme-primary, #6366f1);
    border-radius: 50%;
    color: white;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
.flipbook-scrub-play-btn:hover:not(:disabled)[b-w0ssp8tqbx] {
    transform: scale(1.05);
    box-shadow: 0 0 0 4px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.18);
}
.flipbook-scrub-play-btn:disabled[b-w0ssp8tqbx] {
    opacity: 0.45;
    cursor: not-allowed;
}
.flipbook-scrub-play-btn:focus-visible[b-w0ssp8tqbx] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
}
.flipbook-scrub-label[b-w0ssp8tqbx] {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary, #64748b);
}

.flipbook-timeline-scrub[b-w0ssp8tqbx] {
    padding: 0 0.5rem;
    margin-bottom: 1rem;
}
.flipbook-timeline-scrub input[type="range"][b-w0ssp8tqbx] {
    width: 100%;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}
.flipbook-timeline-scrub input[type="range"][b-w0ssp8tqbx]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--theme-border, #cbd5e1);
}
.flipbook-timeline-scrub input[type="range"][b-w0ssp8tqbx]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--theme-border, #cbd5e1);
}
.flipbook-timeline-scrub input[type="range"][b-w0ssp8tqbx]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    margin-top: -6px;
    border: 2px solid var(--theme-surface, #ffffff);
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.2));
}
.flipbook-timeline-scrub input[type="range"][b-w0ssp8tqbx]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    border: 2px solid var(--theme-surface, #ffffff);
    box-shadow: 0 1px 3px var(--theme-shadow-color, rgba(0, 0, 0, 0.2));
}
.flipbook-timeline-scrub input[type="range"]:focus-visible[b-w0ssp8tqbx] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Inline insert-frame panel. Opens below the timeline when the user clicks
   a gap "+" button. Houses the seed prompt (editable) + confirm/cancel. */
.flipbook-insert-panel[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-primary, #6366f1);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.06));
}
.flipbook-insert-header[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--theme-text-primary, #0f172a);
}
.flipbook-insert-prompt[b-w0ssp8tqbx] {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 6px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}
.flipbook-insert-actions[b-w0ssp8tqbx] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Detail panel for the currently-selected frame. Replaces the per-tile
   textarea that used to live in the strip — now the timeline stays compact
   and only the selected frame's edit affordances are visible.
   `min-height` is intentionally large enough to cover the "full" state
   (header + 3-row textarea + actions row) so that during preview playback
   — as `_selectedFrameOrder` cycles through each frame and the per-frame
   metadata swaps (saved pill, stale badge, error banner) — the panel's
   outer height stays fixed. Same min-height on the `-hint` variant so the
   "no frame selected" state doesn't collapse either. Prevents the page
   from jittering vertically as frames cycle. */
.flipbook-frame-detail[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
    /* FB-V-19 (2026-05-12): Dropped the `min-height: 14rem` floor that
       was sizing the box for the worst case (header + textarea +
       actions + stale + error banners). In the common case nothing
       triggers the banners, leaving ~6rem of dead space below the
       action buttons. Letting the box size to its content keeps it
       tight; banners still grow it naturally when they appear. */
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
}
.flipbook-frame-detail-header[b-w0ssp8tqbx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    color: var(--theme-text-primary, #0f172a);
}
.flipbook-frame-detail-status[b-w0ssp8tqbx] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary, #64748b);
}

/* FB-V-23 (2026-05-12): Color-coded state pills. The default rule above
   stays as the fallback (any unknown status renders as the muted gray
   text); the modifiers below add the colored chip treatment for the
   four real statuses. Background tint + border so the pill reads as a
   chip; tints are kept low-opacity so they work across all 8 themes
   without theme-specific overrides. */
.flipbook-frame-detail-status.status-pending[b-w0ssp8tqbx],
.flipbook-frame-detail-status.status-generating[b-w0ssp8tqbx] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.flipbook-frame-detail-status.status-ready[b-w0ssp8tqbx] {
    color: #15803d;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.flipbook-frame-detail-status.status-failed[b-w0ssp8tqbx] {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.flipbook-frame-detail-status.status-skipped[b-w0ssp8tqbx] {
    color: var(--theme-text-secondary, #64748b);
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
}
.flipbook-frame-detail-hint[b-w0ssp8tqbx] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
    text-align: center;
    padding: 1rem;
    font-style: italic;
    /* FB-V-19 (2026-05-12): Hint state used to inherit the 14rem floor
       so the centered text didn't hug the top of an oversized box.
       Now that the parent sizes to content, this state is just one
       short line of italic text — no need for vertical centering. */
}

/* ----- controls (mode + delay) ----- */
.flipbook-controls[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.flipbook-control-label[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-secondary, #64748b);
    margin-bottom: 0.4rem;
}

/* FB-V-20 (2026-05-12): Small (?) helper next to control labels. Round
   pill that surfaces the label's title= tooltip on hover/focus, so the
   tooltip is discoverable without users having to randomly hover the
   slider track. tabindex="0" makes it keyboard-focusable so screen
   reader users hit the aria-label too. */
.flipbook-control-help[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: var(--theme-surface-secondary, #f1f5f9);
    border: 1px solid var(--theme-border, #e2e8f0);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: none;
    line-height: 1;
    cursor: help;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.flipbook-control-help:hover[b-w0ssp8tqbx],
.flipbook-control-help:focus-visible[b-w0ssp8tqbx] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35);
    outline: none;
}

.flipbook-toggle-row[b-w0ssp8tqbx] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.flipbook-toggle[b-w0ssp8tqbx] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface-secondary, #f8fafc);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.flipbook-toggle input[b-w0ssp8tqbx] { display: none; }
.flipbook-toggle.is-active[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}
.flipbook-toggle-hint[b-w0ssp8tqbx] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--theme-text-secondary, #64748b);
}

.flipbook-slider-row[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.flipbook-slider-row input[type="range"][b-w0ssp8tqbx] {
    flex: 1;
    accent-color: var(--theme-primary, #6366f1);
}
.flipbook-slider-value[b-w0ssp8tqbx] {
    min-width: 68px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* ----- generate bar ----- */
.flipbook-generate-row[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.flipbook-generate-status[b-w0ssp8tqbx] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
}

/* ----- preview + export ----- */
.flipbook-preview[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.flipbook-preview-image[b-w0ssp8tqbx] {
    /* Lock the preview to a fixed 1:1 box so swapping frames with different
       natural aspect ratios (gpt-image-1 doesn't always honor `size` exactly,
       especially in a sequential chain where the previous output feeds the
       next edit) doesn't reflow the page. `object-fit: contain` letterboxes
       the actual image inside a stable box; the subtle background fill makes
       the letterboxing look intentional across all 8 themes. */
    max-width: 420px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.35));
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
}
.flipbook-preview-actions[b-w0ssp8tqbx] {
    display: flex;
    gap: 0.5rem;
}
/* Smooth-motion export toggle.
   Sits under the Play / Export row in the preview panel; kept visually quiet
   so it doesn't compete with the primary Export button but is always visible
   when the user is deciding to render. */
.flipbook-smooth-toggle[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #475569);
    cursor: pointer;
    user-select: none;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    background: var(--theme-surface-secondary, rgba(15, 23, 42, 0.04));
    border: 1px solid var(--theme-border, #e2e8f0);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.flipbook-smooth-toggle:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #2563eb);
}
.flipbook-smooth-toggle input[type="checkbox"][b-w0ssp8tqbx] {
    accent-color: var(--theme-primary, #2563eb);
    cursor: pointer;
}
.flipbook-smooth-toggle input[type="checkbox"]:disabled[b-w0ssp8tqbx] {
    cursor: not-allowed;
}
.flipbook-smooth-label[b-w0ssp8tqbx] {
    font-weight: 600;
    color: var(--theme-text-primary, #0f172a);
}
.flipbook-smooth-hint[b-w0ssp8tqbx] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.78rem;
}
.flipbook-export-result[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.flipbook-export-video[b-w0ssp8tqbx] {
    max-width: 480px;
    width: 100%;
    border-radius: 10px;
}

/* ----- buttons ----- */
.flipbook-primary-btn[b-w0ssp8tqbx] {
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 10px;
    background: var(--theme-primary, #6366f1);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.flipbook-primary-btn:hover:not(:disabled)[b-w0ssp8tqbx] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.flipbook-primary-btn:disabled[b-w0ssp8tqbx] {
    opacity: 0.55;
    cursor: not-allowed;
}

.flipbook-secondary-btn[b-w0ssp8tqbx] {
    padding: 0.55rem 0.95rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.flipbook-secondary-btn:hover:not(:disabled)[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}
.flipbook-secondary-btn:disabled[b-w0ssp8tqbx] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Cancel button during export — destructive accent to signal "abort",
   borrows the shared primary-btn shape for the same visual weight. */
.flipbook-danger-btn[b-w0ssp8tqbx] {
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: 10px;
    background: var(--theme-danger, #dc2626);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.flipbook-danger-btn:hover:not(:disabled)[b-w0ssp8tqbx] {
    filter: brightness(1.08);
    transform: translateY(-1px);
}
.flipbook-danger-btn:disabled[b-w0ssp8tqbx] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Export progress — shown only while _isExporting is true. The bar drives a
   determinate fill when JS reports scene % (render phase), and falls back to
   an indeterminate slider for phases where we don't have a % (transfer,
   upload, persist). */
.flipbook-export-progress[b-w0ssp8tqbx] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: var(--theme-surface-raised, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.flipbook-export-progress-message[b-w0ssp8tqbx] {
    font-size: 0.88rem;
    color: var(--theme-text-primary, #1e293b);
    font-weight: 500;
}
.flipbook-export-progress-percent[b-w0ssp8tqbx] {
    font-size: 0.78rem;
    color: var(--theme-text-muted, #64748b);
    text-align: right;
}
.flipbook-progress-bar[b-w0ssp8tqbx] {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--theme-border, #e2e8f0);
    overflow: hidden;
}
.flipbook-progress-bar-fill[b-w0ssp8tqbx] {
    height: 100%;
    background: var(--theme-primary, #6366f1);
    border-radius: 3px;
    transition: width 0.25s ease;
}
.flipbook-progress-bar-indeterminate .flipbook-progress-bar-fill[b-w0ssp8tqbx] {
    width: 40%;
    animation: flipbook-progress-slide-b-w0ssp8tqbx 1.3s ease-in-out infinite;
}
@keyframes flipbook-progress-slide-b-w0ssp8tqbx {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* FB-V-13 (2026-05-11): Dropped the always-on `text-decoration: underline`.
   Pre-fix this read as inconsistent — a `<button>` styled like a link with
   a permanent underline competed visually with adjacent primary buttons in
   the empty state. Now it's a clean tappable link with underline-on-hover,
   matching the modern link-affordance pattern. The Download MP4 anchor
   (the third user of this class) still reads as a link via the cursor +
   color + hover underline, just without the visual noise at rest. */
.flipbook-link-btn[b-w0ssp8tqbx] {
    background: none;
    border: none;
    padding: 0.25rem 0.4rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 500;
    font-size: 0.88rem;
    cursor: pointer;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.12s ease, color 0.12s ease;
}
.flipbook-link-btn:hover[b-w0ssp8tqbx] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}
.flipbook-link-btn:disabled[b-w0ssp8tqbx] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ----- library picker modal ----- */
/* VG-Hotfix-1 (2026-05): z-index lifted from 1000 → 1500 so the modal sits
   above the Companion FAB cluster (Assistant.razor.css uses 1199–1300). The
   prior 1000 let the FAB + spark egg sprite bleed through onto the modal
   content, which was visible on the Archived projects dialog. Stays below
   the lightbox (2000) so a lightbox triggered from inside the modal still
   wins, and below the toast layer (9999) so toasts always read above. */
.flipbook-modal-backdrop[b-w0ssp8tqbx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1500;
    padding: 1rem;
    animation: flipbook-fade-b-w0ssp8tqbx 0.15s ease-out;
}
@keyframes flipbook-fade-b-w0ssp8tqbx {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.flipbook-modal[b-w0ssp8tqbx] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 14px;
    width: min(920px, 100%);
    max-height: min(720px, 90vh);
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px var(--theme-shadow-color, rgba(0, 0, 0, 0.35));
    overflow: hidden;
}

.flipbook-modal-header[b-w0ssp8tqbx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}
.flipbook-modal-header h3[b-w0ssp8tqbx] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}
.flipbook-modal-header p[b-w0ssp8tqbx] {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
}
.flipbook-modal-close[b-w0ssp8tqbx] {
    background: transparent;
    border: 1px solid transparent;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--theme-text-secondary, #64748b);
    cursor: pointer;
    padding: 0.35rem 0.55rem;
    border-radius: 8px;
}
.flipbook-modal-close:hover[b-w0ssp8tqbx] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
}

.flipbook-modal-toolbar[b-w0ssp8tqbx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    flex-wrap: wrap;
}
.flipbook-modal-tabs[b-w0ssp8tqbx] {
    display: flex;
    gap: 0.25rem;
    background: var(--theme-surface-secondary, #f1f5f9);
    padding: 0.25rem;
    border-radius: 10px;
}
.flipbook-modal-tab[b-w0ssp8tqbx] {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--theme-text-secondary, #64748b);
    font: inherit;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
}
.flipbook-modal-tab.is-active[b-w0ssp8tqbx] {
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    box-shadow: 0 1px 2px var(--theme-shadow-color, rgba(0, 0, 0, 0.08));
    font-weight: 600;
}
.flipbook-modal-search[b-w0ssp8tqbx] {
    flex: 1 1 240px;
    max-width: 360px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-input-text, #1e293b);
    font-size: 0.88rem;
}

.flipbook-modal-body[b-w0ssp8tqbx] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.flipbook-modal-empty[b-w0ssp8tqbx] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.92rem;
}

.flipbook-library-grid[b-w0ssp8tqbx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.flipbook-library-card[b-w0ssp8tqbx] {
    position: relative;
    appearance: none;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.flipbook-library-card:hover[b-w0ssp8tqbx] {
    border-color: var(--theme-primary, #6366f1);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--theme-shadow-color, rgba(0, 0, 0, 0.18));
}
.flipbook-library-card img[b-w0ssp8tqbx] {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    /* VG-D-1 (2026-05): placeholder background while the image is loading.
       Use the theme's background-secondary so dark themes don't flash an
       unrelated near-black tile and light themes get a soft tile. */
    background: var(--theme-background-secondary, #0b1020);
}
.flipbook-library-card-label[b-w0ssp8tqbx] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    padding: 0.4rem 0.5rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flipbook-library-card-fav[b-w0ssp8tqbx] {
    position: absolute;
    top: 0.3rem;
    right: 0.4rem;
    /* VG-D-1 (2026-05): scrim + icon flow through theme tokens — the favorite
       chip overlays the card image and needs to read against any theme background. */
    background: var(--theme-overlay-strong, rgba(0, 0, 0, 0.55));
    color: var(--theme-warning, #ffd166);
    font-size: 0.85rem;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    line-height: 1;
}

.flipbook-modal-footer[b-w0ssp8tqbx] {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* ----- save-to-library ----- */
/* The "Save to Media Library" affordance appears in two places:
   - Inside the frame detail panel (as a pill button next to Regenerate / Remove).
   - Under the exported video (as a pill button next to Download MP4).
   Both open the same compact modal (.flipbook-save-modal) which reuses the
   generic .flipbook-modal shell but with a narrower max-width for a form.
   Once the item is saved, the pill collapses to a non-interactive "✓ In library"
   badge so the user sees at a glance that it's been captured. */
.flipbook-save-pill[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 35%, var(--theme-border, #e2e8f0));
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, var(--theme-surface, #ffffff));
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.flipbook-save-pill:hover:not(:disabled)[b-w0ssp8tqbx] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 18%, var(--theme-surface, #ffffff));
    border-color: var(--theme-primary, #6366f1);
}
.flipbook-save-pill:disabled[b-w0ssp8tqbx] {
    opacity: 0.5;
    cursor: not-allowed;
}
.flipbook-save-pill.is-saved[b-w0ssp8tqbx] {
    background: color-mix(in srgb, var(--theme-success, #10b981) 12%, var(--theme-surface, #ffffff));
    border-color: color-mix(in srgb, var(--theme-success, #10b981) 40%, var(--theme-border, #e2e8f0));
    color: var(--theme-success, #10b981);
    cursor: default;
}
.flipbook-save-pill.is-saved:hover[b-w0ssp8tqbx] { background: color-mix(in srgb, var(--theme-success, #10b981) 12%, var(--theme-surface, #ffffff)); }

/* Narrow variant of the generic modal for a quick "name + optional description"
   form. Uses the existing .flipbook-modal structure so theming is automatic. */
.flipbook-save-modal[b-w0ssp8tqbx] {
    width: min(460px, 100%);
    max-height: min(520px, 90vh);
}
.flipbook-save-form[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.25rem;
}
.flipbook-save-field[b-w0ssp8tqbx] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.flipbook-save-label[b-w0ssp8tqbx] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}
.flipbook-save-input[b-w0ssp8tqbx],
.flipbook-save-textarea[b-w0ssp8tqbx] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-input-bg, var(--theme-surface, #ffffff));
    color: var(--theme-input-text, var(--theme-text-primary, #1e293b));
    font-size: 0.9rem;
    font-family: inherit;
    box-sizing: border-box;
}
.flipbook-save-textarea[b-w0ssp8tqbx] {
    resize: vertical;
    min-height: 64px;
    line-height: 1.4;
}
.flipbook-save-input:focus[b-w0ssp8tqbx],
.flipbook-save-textarea:focus[b-w0ssp8tqbx] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
}
.flipbook-save-error[b-w0ssp8tqbx] {
    color: var(--theme-danger, #ef4444);
    font-size: 0.82rem;
    min-height: 1em;
}

/* Compact "already saved" hint under the frame detail panel so the user
   doesn't re-open the dialog by accident. */
.flipbook-save-hint-saved[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--theme-success, #10b981);
    font-weight: 500;
}

/* ----- AI frame planner card ----- */
/* Sits above the frame-edit grid. Uses a gradient-tinted surface so it reads
   as an AI feature without needing an emoji-only hook. */
.flipbook-planner-card[b-w0ssp8tqbx] {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-primary, #6366f1) 10%, var(--theme-surface, #ffffff)),
        var(--theme-surface, #ffffff) 65%
    );
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 25%, var(--theme-border, #e2e8f0));
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
/* FB-V-26 (2026-05-12): Collapsed variant trims the visual weight so it
   reads as a quiet disclosure rather than a primary panel — primary tint
   muted, vertical padding shrunk to just the toggle row. */
.flipbook-planner-card.is-collapsed[b-w0ssp8tqbx] {
    padding: 0.5rem 1.1rem;
    background: var(--theme-surface, #ffffff);
    gap: 0;
}
.flipbook-planner-header[b-w0ssp8tqbx] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
/* FB-V-26: Toggle button wrapping the chevron + title, mirrors the
   fingerprint disclosure pattern. The button itself is invisible — the
   chevron + title are the visible affordance. */
.flipbook-planner-toggle[b-w0ssp8tqbx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    text-align: left;
}
.flipbook-planner-toggle:focus-visible[b-w0ssp8tqbx] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 3px;
    border-radius: 4px;
}
.flipbook-planner-chevron[b-w0ssp8tqbx] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1;
}
.flipbook-planner-title[b-w0ssp8tqbx] {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}
.flipbook-planner-desc[b-w0ssp8tqbx] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.45;
}
.flipbook-planner-row[b-w0ssp8tqbx] {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    flex-wrap: wrap;
}
.flipbook-planner-input[b-w0ssp8tqbx] {
    flex: 1 1 260px;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    line-height: 1.45;
}
.flipbook-planner-input:focus[b-w0ssp8tqbx] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
}
.flipbook-planner-status[b-w0ssp8tqbx] {
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #64748b);
    min-height: 1em;
}
.flipbook-planner-status.is-error[b-w0ssp8tqbx] { color: var(--theme-danger, #ef4444); }
.flipbook-planner-status.is-success[b-w0ssp8tqbx] { color: var(--theme-success, #10b981); }

/* ----- playback lockout -----
   While the preview is playing we gate every edit affordance via the
   `disabled` attribute on the underlying control (that handles buttons,
   inputs, radios, and the smooth-motion checkbox). For wrapper elements
   that have no native `disabled` (drag-sources, radio-labels, insert
   panel, smooth-motion label row) we layer an `is-playback-locked` class
   that carries the visual dim + not-allowed cursor so the whole group
   reads as inert — matching the disabled-button styles already in this
   file (opacity 0.45–0.55, cursor: not-allowed).
   See FlipBookStudio.razor → `var canEdit = !_isPlayingPreview;` and
   Docs/FLIP_BOOK_STUDIO.md "Playback lockout". */
.flipbook-timeline-frame.is-playback-locked[b-w0ssp8tqbx] {
    cursor: not-allowed;
    opacity: 0.55;
}
.flipbook-timeline-frame.is-playback-locked:hover[b-w0ssp8tqbx] {
    /* Suppress drag/hover affordance while locked. */
    cursor: not-allowed;
}
.flipbook-toggle.is-playback-locked[b-w0ssp8tqbx],
.flipbook-smooth-toggle.is-playback-locked[b-w0ssp8tqbx],
.flipbook-insert-panel.is-playback-locked[b-w0ssp8tqbx] {
    opacity: 0.55;
    cursor: not-allowed;
}
.flipbook-toggle.is-playback-locked input[b-w0ssp8tqbx],
.flipbook-smooth-toggle.is-playback-locked input[b-w0ssp8tqbx] {
    cursor: not-allowed;
}

/* ----- image lightbox -----
   Fullscreen viewer for the source image + any Ready frame. Triggered by a
   single-click on the big source preview or a double-click on a timeline
   thumb. Uses its own higher z-index (2000) so it sits above the regular
   modals (backdrop is 1000-ish). Intentionally NOT sharing `.flipbook-modal`
   styles because this is a borderless, full-viewport viewer with no surface
   chrome — adopting modal-card styling would force an extra container that
   clips the image. Controls are floated over the image instead. All colors
   use theme-aware variables so this works across the 8 themes. */
.flipbook-lightbox-backdrop[b-w0ssp8tqbx] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 2rem;
    outline: none; /* backdrop is tabindex=-1 for keyboard; hide focus ring */
    animation: flipbook-lightbox-fade-in-b-w0ssp8tqbx 120ms ease-out;
}
@keyframes flipbook-lightbox-fade-in-b-w0ssp8tqbx {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.flipbook-lightbox-content[b-w0ssp8tqbx] {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flipbook-lightbox-image[b-w0ssp8tqbx] {
    max-width: 90vw;
    /* Capped below 85vh to leave room for the two-line caption block
       that sits below the image (bottom: -72px). Without this the caption
       can spill off the viewport on short laptop screens. */
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
    /* VG-D-2 (2026-05): theme-aware shadow so dark themes get a tinted halo
       around the lightbox image instead of pure-black double-darken. */
    box-shadow: 0 12px 48px var(--theme-shadow-color, rgba(0, 0, 0, 0.6));
    background: var(--theme-background, #0b1220);
    display: block;
}
.flipbook-lightbox-nav[b-w0ssp8tqbx] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 64px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, transform 120ms ease;
    z-index: 2; /* above the image */
}
.flipbook-lightbox-nav:hover:not(:disabled)[b-w0ssp8tqbx] {
    background: rgba(0, 0, 0, 0.75);
    transform: translateY(-50%) scale(1.05);
}
.flipbook-lightbox-nav:disabled[b-w0ssp8tqbx] {
    opacity: 0.35;
    cursor: default;
}
.flipbook-lightbox-prev[b-w0ssp8tqbx] { left: -8px; }
.flipbook-lightbox-next[b-w0ssp8tqbx] { right: -8px; }
.flipbook-lightbox-close[b-w0ssp8tqbx] {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease;
    z-index: 2;
}
.flipbook-lightbox-close:hover[b-w0ssp8tqbx] {
    background: rgba(220, 38, 38, 0.85);
}
.flipbook-lightbox-caption[b-w0ssp8tqbx] {
    position: absolute;
    bottom: -72px; /* extra room so a 2-line prompt doesn't crowd the image */
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90vw, 720px);
    text-align: center;
    color: #e5e7eb;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.flipbook-lightbox-caption-title[b-w0ssp8tqbx] {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Prompt sub-text: secondary tint, italic so it reads as metadata, and
   clamped to two lines with an ellipsis. The full prompt is available via
   the tooltip (`title="..."`) if the user wants to read a long one. */
.flipbook-lightbox-caption-prompt[b-w0ssp8tqbx] {
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(229, 231, 235, 0.75);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Long unbroken strings (e.g. URLs) shouldn't blow out the viewport. */
    word-break: break-word;
    padding: 0 0.75rem;
}
/* Give timeline thumbs a zoom-in affordance so users discover the
   double-click → lightbox interaction. Keep the regular cursor on
   archived/skipped states where it would mislead. */
.flipbook-timeline-frame:not(.is-skipped) .flipbook-timeline-thumb[b-w0ssp8tqbx] {
    cursor: zoom-in;
}

/* ----- responsive ----- */
@media (max-width: 768px) {
    .flipbook-page[b-w0ssp8tqbx] { padding: 1rem; }
    .flipbook-hero[b-w0ssp8tqbx] { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .flipbook-frame-strip[b-w0ssp8tqbx] { grid-template-columns: repeat(2, 1fr); }
    .flipbook-library-grid[b-w0ssp8tqbx] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .flipbook-modal[b-w0ssp8tqbx] { max-height: 92vh; border-radius: 12px; }
    .flipbook-modal-toolbar[b-w0ssp8tqbx] { flex-direction: column; align-items: stretch; }
    .flipbook-modal-search[b-w0ssp8tqbx] { max-width: 100%; }
    .flipbook-planner-row[b-w0ssp8tqbx] { flex-direction: column; }
    .flipbook-archive-grid[b-w0ssp8tqbx] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .flipbook-timeline-toolbar[b-w0ssp8tqbx] { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .flipbook-timeline-toolbar-right[b-w0ssp8tqbx] { align-self: stretch; justify-content: flex-end; }

    /* Tighten lightbox nav positioning on narrow viewports so the Prev/Next
       buttons don't spill off-screen. */
    .flipbook-lightbox-backdrop[b-w0ssp8tqbx] { padding: 1rem; }
    .flipbook-lightbox-image[b-w0ssp8tqbx] { max-width: 96vw; max-height: 70vh; }
    .flipbook-lightbox-prev[b-w0ssp8tqbx] { left: 4px; }
    .flipbook-lightbox-next[b-w0ssp8tqbx] { right: 4px; }
    .flipbook-lightbox-close[b-w0ssp8tqbx] { top: -44px; }
}
/* /Pages/Tools/MediaStudio.razor.rz.scp.css */
/* ============================================
   VIDEO DASHBOARD — SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css. Dashboard-specific styles here.
   ============================================ */

/* ============================================
   TAB STRIP
   ============================================ */
.vd-tabs[b-pyuh5e6nzi] {
    display: flex;
    gap: 4px;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    padding-bottom: 0;
}

.vd-tab[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.25rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
    border-radius: 8px 8px 0 0;
}

.vd-tab svg[b-pyuh5e6nzi] {
    width: 18px;
    height: 18px;
}

.vd-tab:hover[b-pyuh5e6nzi] {
    color: var(--theme-text-primary, #1e293b);
    background: var(--theme-surface-secondary, rgba(0, 0, 0, 0.03));
}

.vd-tab.active[b-pyuh5e6nzi] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    border-bottom-color: var(--theme-primary, #6366f1);
    font-weight: 600;
}

.vd-tab-count[b-pyuh5e6nzi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}

.vd-tab.active .vd-tab-count[b-pyuh5e6nzi] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.12);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Clickable stat cards */
.vd-stat-clickable[b-pyuh5e6nzi] {
    cursor: pointer;
}

.vd-stat-clickable:active[b-pyuh5e6nzi] {
    transform: translateY(0);
}

/* Result count */
.vd-result-count[b-pyuh5e6nzi] {
    font-size: 0.85rem;
    color: var(--theme-text-muted, #64748b);
    margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}

.vd-result-count strong[b-pyuh5e6nzi] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
}

.vd-filter-active[b-pyuh5e6nzi] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 500;
}

.vd-clear-filters[b-pyuh5e6nzi] {
    background: none;
    border: none;
    color: var(--theme-text-muted, #94a3b8);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 0.25rem;
    transition: all 0.15s;
}

.vd-clear-filters:hover[b-pyuh5e6nzi] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.is-dark .vd-clear-filters[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .vd-clear-filters:hover[b-pyuh5e6nzi] {
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
    background: rgba(255, 255, 255, 0.08);
}

.is-dark .vd-result-count strong[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .vd-tabs[b-pyuh5e6nzi] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .vd-tab[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .vd-tab:hover[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .vd-tab.active[b-pyuh5e6nzi] {
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
}

.is-dark .vd-tab-count[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .vd-tab.active .vd-tab-count[b-pyuh5e6nzi] {
    background: rgba(var(--theme-primary-rgb, 124, 58, 237), 0.2);
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
}

/* ============================================
   VIEW TOGGLE
   ============================================ */
.ml-view-toggle[b-pyuh5e6nzi] {
    flex: 0 0 auto;
    min-width: auto;
}

.ml-toggle-btns[b-pyuh5e6nzi] {
    display: flex;
    gap: 4px;
}

.ml-toggle-btn[b-pyuh5e6nzi] {
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}

.ml-toggle-btn svg[b-pyuh5e6nzi] {
    width: 20px;
    height: 20px;
}

.ml-toggle-btn:hover[b-pyuh5e6nzi] {
    background: var(--theme-surface-hover, #e2e8f0);
}

.ml-toggle-btn.active[b-pyuh5e6nzi] {
    background: var(--theme-primary, #6366f1);
    color: white;
}

.is-dark .ml-toggle-btn[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .ml-toggle-btn:hover[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.15);
}

.is-dark .ml-toggle-btn.active[b-pyuh5e6nzi] {
    background: var(--theme-primary, #7c3aed);
    color: white;
}

/* ============================================
   MEDIA GRID
   ============================================ */
.ml-grid[b-pyuh5e6nzi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
    padding: 0.5rem 0;
}

@media (max-width: 768px) {
    .ml-grid[b-pyuh5e6nzi] {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 0.75rem;
    }
}

/* ============================================
   MEDIA CARD
   ============================================ */
.ml-card[b-pyuh5e6nzi] {
    position: relative;
    background: var(--theme-surface, white);
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    display: flex;
    flex-direction: column;
}

.ml-card:hover[b-pyuh5e6nzi] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px var(--theme-shadow-color, rgba(0, 0, 0, 0.1));
    border-color: var(--theme-primary, #6366f1);
}

.is-dark .ml-card[b-pyuh5e6nzi] {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .ml-card:hover[b-pyuh5e6nzi] {
    border-color: var(--theme-primary, rgba(255, 255, 255, 0.3));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CARD PREVIEW (IMAGE/VIDEO THUMBNAIL)
   ============================================ */
.ml-card-preview[b-pyuh5e6nzi] {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--theme-surface-secondary, #f1f5f9);
}

.is-dark .ml-card-preview[b-pyuh5e6nzi] {
    background: rgba(15, 23, 42, 0.6);
}

.ml-card-preview img[b-pyuh5e6nzi],
.ml-card-preview video[b-pyuh5e6nzi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    z-index: 1;
}

.ml-card:hover .ml-card-preview img[b-pyuh5e6nzi],
.ml-card:hover .ml-card-preview video[b-pyuh5e6nzi] {
    transform: scale(1.05);
}

.ml-card-placeholder[b-pyuh5e6nzi] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.4;
    background: linear-gradient(135deg, var(--theme-surface-secondary, #f1f5f9) 0%, var(--theme-surface, #e2e8f0) 100%);
}

.is-dark .ml-card-placeholder[b-pyuh5e6nzi] {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.4) 100%);
}

/* Overlay badges */
.ml-card-overlay[b-pyuh5e6nzi] {
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    z-index: 2;
}

.ml-type-badge[b-pyuh5e6nzi] {
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 1.4;
}

/* ML-D-2 (2026-05): badge backgrounds flow through theme tokens
   so the type tag harmonizes with the active theme instead of using
   hardcoded indigo/emerald that fight the Cloud / Space / Tron palettes. */
.badge-image[b-pyuh5e6nzi] {
    background: var(--theme-primary, rgba(99, 102, 241, 0.85));
    color: var(--theme-primary-contrast, white);
}

.badge-video[b-pyuh5e6nzi] {
    background: var(--theme-text-success, rgba(16, 185, 129, 0.85));
    color: var(--theme-primary-contrast, white);
}

.ml-fav-badge[b-pyuh5e6nzi] {
    font-size: 0.9rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* Play icon for videos */
.ml-play-icon[b-pyuh5e6nzi] {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 3;
}

.ml-card:hover .ml-play-icon[b-pyuh5e6nzi] {
    opacity: 1;
}

/* ============================================
   CARD INFO
   ============================================ */
.ml-card-info[b-pyuh5e6nzi] {
    padding: 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
}

.ml-card-name[b-pyuh5e6nzi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-dark .ml-card-name[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.95);
}

.ml-card-meta[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: var(--theme-text-secondary, #64748b);
}

.is-dark .ml-card-meta[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.5);
}

.ml-card-credits[b-pyuh5e6nzi] {
    font-weight: 500;
}

.ml-card-duration[b-pyuh5e6nzi],
.ml-card-size[b-pyuh5e6nzi] {
    font-weight: 500;
    white-space: nowrap;
}

.ml-card-category[b-pyuh5e6nzi] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    align-self: flex-start;
}

.is-dark .ml-card-category[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   CARD ACTIONS
   ============================================ */
.ml-card-actions[b-pyuh5e6nzi] {
    padding: 0 0.75rem 0.75rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.ml-card:hover .ml-card-actions[b-pyuh5e6nzi] {
    opacity: 1;
}

.ml-action-btn[b-pyuh5e6nzi] {
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.8rem;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.ml-action-btn:hover[b-pyuh5e6nzi] {
    background: var(--theme-primary, #6366f1);
    color: white;
}

.is-dark .ml-action-btn[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .ml-action-btn:hover[b-pyuh5e6nzi] {
    background: var(--theme-primary, rgba(255, 255, 255, 0.2));
    color: white;
}

/* ML-D-1 (2026-05): theme-token sweep on action hovers — destructive uses
   --theme-text-danger; editor uses --theme-primary so the affordance harmonizes
   across all 8 themes instead of locking in one hex. */
.ml-action-archive:hover[b-pyuh5e6nzi],
.is-dark .ml-action-archive:hover[b-pyuh5e6nzi] {
    background: var(--theme-text-danger, #ef4444);
    color: var(--theme-primary-contrast, white);
}

.ml-action-editor:hover[b-pyuh5e6nzi],
.is-dark .ml-action-editor:hover[b-pyuh5e6nzi] {
    background: var(--theme-primary, #8b5cf6);
    color: var(--theme-primary-contrast, white);
}

/* ============================================
   LIST VIEW - THUMBNAIL
   ============================================ */
.ml-list-thumb[b-pyuh5e6nzi] {
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--theme-surface-secondary, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: 1rem;
}

.is-dark .ml-list-thumb[b-pyuh5e6nzi] {
    background: rgba(15, 23, 42, 0.6);
}

.ml-list-thumb img[b-pyuh5e6nzi],
.ml-list-thumb video[b-pyuh5e6nzi] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.ml-list-thumb-emoji[b-pyuh5e6nzi] {
    font-size: 1.5rem;
    opacity: 0.5;
}

.ml-list-play[b-pyuh5e6nzi] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: white;
    font-size: 1rem;
    border-radius: 10px;
    z-index: 2;
}

/* Make list items display thumbnail alongside content */
.list-page-item[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
}

/* ============================================
   EXPIRED IMAGE INDICATORS
   ============================================ */
.ml-expired-icon[b-pyuh5e6nzi] {
    font-size: 2rem;
    opacity: 0.6;
}

.ml-expired-label[b-pyuh5e6nzi] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #94a3b8);
    margin-top: 0.25rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .vd-section-header[b-pyuh5e6nzi] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .ml-toolbar[b-pyuh5e6nzi] {
        flex-wrap: wrap;
    }

    .ml-compare-images[b-pyuh5e6nzi] {
        grid-template-columns: 1fr;
    }

    /* MS-Mob1 (2026-05-03): Tab strip on mobile.
       4 tabs (Media Library / My Projects / Screen Recordings /
       Generated Videos) with labels + counts overflow a 390px viewport.
       Switch to nowrap + horizontal scroll so labels stay readable
       (each tab is too important for icon-only collapse — users
       wouldn't decode "screen recordings" from an icon alone). Hide
       the scrollbar visually; users discover swipe naturally on touch. */
    .vd-tabs[b-pyuh5e6nzi] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 2px;
    }

    .vd-tabs[b-pyuh5e6nzi]::-webkit-scrollbar {
        display: none;
    }

    .vd-tab[b-pyuh5e6nzi] {
        padding: 0.55rem 0.85rem;
        font-size: 0.82rem;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .vd-tab svg[b-pyuh5e6nzi] {
        width: 16px;
        height: 16px;
    }

    /* MS-Mob1 (2026-05-03): Force the four stat cards to 2x2 on mobile
       so they stay tappable instead of squishing to four-across. The
       parent grid (.list-page-stats) defaults to auto-fit which can
       collapse to 4 columns at 390px and make each card ~90px wide. */
    .list-page-stats[b-pyuh5e6nzi] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   MEDIA TOOLBAR (Features 4, 6, 7, 8)
   ============================================ */
.ml-toolbar[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

.ml-toolbar-group[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.ml-toolbar-label[b-pyuh5e6nzi] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
}

/* ============================================
   GRID SIZE TOGGLE (Feature 8)
   ============================================ */
.ml-size-toggle[b-pyuh5e6nzi] {
    display: flex;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
}

.ml-size-btn[b-pyuh5e6nzi] {
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    background: transparent;
    border: none;
    border-right: 1px solid var(--theme-border, #e2e8f0);
    color: var(--theme-text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ml-size-btn:last-child[b-pyuh5e6nzi] {
    border-right: none;
}

.ml-size-btn.active[b-pyuh5e6nzi] {
    background: var(--theme-primary);
    color: white;
}

.ml-size-btn:hover:not(.active)[b-pyuh5e6nzi] {
    background: var(--theme-surface-secondary, #f1f5f9);
}

.is-dark .ml-size-toggle[b-pyuh5e6nzi] {
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .ml-size-btn[b-pyuh5e6nzi] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .ml-size-btn:hover:not(.active)[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.08);
}

/* Grid size variants */
.ml-grid.ml-grid-small[b-pyuh5e6nzi] {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.ml-grid.ml-grid-medium[b-pyuh5e6nzi] {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.ml-grid.ml-grid-large[b-pyuh5e6nzi] {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* ============================================
   GROUP BY CATEGORY (Feature 6)
   ============================================ */
.ml-group-header[b-pyuh5e6nzi] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0 0.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    margin-bottom: 0.25rem;
}

.ml-group-count[b-pyuh5e6nzi] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--theme-text-muted);
    background: var(--theme-surface-secondary, #f1f5f9);
    padding: 1px 8px;
    border-radius: 10px;
}

.is-dark .ml-group-header[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .ml-group-count[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   BULK SELECT (Feature 4)
   ============================================ */
.ml-card-selected[b-pyuh5e6nzi] {
    outline: 2px solid var(--theme-primary);
    outline-offset: -2px;
}

/* ML-V-3 (2026-05): pulse-highlight for ?asset= deep links so the user lands on
   the right card visually even if the dialog auto-opens. Fades after 4 cycles. */
.ml-card-highlighted[b-pyuh5e6nzi] {
    animation: ml-card-pulse-b-pyuh5e6nzi 1.2s ease-in-out 4;
    outline: 2px solid var(--theme-primary);
    outline-offset: -2px;
}

@keyframes ml-card-pulse-b-pyuh5e6nzi {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--theme-primary-rgb, 99, 102, 241), 0.0); }
    50%      { box-shadow: 0 0 0 8px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.35); }
}

.ml-select-check[b-pyuh5e6nzi] {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ml-card:not(.ml-card-selected) .ml-select-check[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.85);
    color: transparent;
    border: 2px solid var(--theme-border, #cbd5e1);
}

/* Bulk actions floating bar */
.ml-bulk-bar[b-pyuh5e6nzi] {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 100;
    animation: ml-bulk-slide-up-b-pyuh5e6nzi 0.2s ease-out;
}

@keyframes ml-bulk-slide-up-b-pyuh5e6nzi {
    from { transform: translateX(-50%) translateY(20px); opacity: 0; }
    to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.ml-bulk-count[b-pyuh5e6nzi] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary);
}

.is-dark .ml-bulk-bar[b-pyuh5e6nzi] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================
   COMPARE OVERLAY (Feature 7)
   ============================================ */
.ml-compare-overlay[b-pyuh5e6nzi] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.88);
    padding: 2rem;
    cursor: pointer;
    animation: ml-compare-in-b-pyuh5e6nzi 0.2s ease-out;
}

@keyframes ml-compare-in-b-pyuh5e6nzi {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ml-compare-container[b-pyuh5e6nzi] {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: default;
}

.ml-compare-header[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.ml-compare-header h3[b-pyuh5e6nzi] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.ml-compare-close[b-pyuh5e6nzi] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.15s;
}

.ml-compare-close:hover[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.2);
}

.ml-compare-images[b-pyuh5e6nzi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.ml-compare-item[b-pyuh5e6nzi] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ml-compare-media[b-pyuh5e6nzi] {
    width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.ml-compare-placeholder[b-pyuh5e6nzi] {
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    opacity: 0.4;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.ml-compare-info[b-pyuh5e6nzi] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ml-compare-info h4[b-pyuh5e6nzi] {
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.ml-compare-meta[b-pyuh5e6nzi] {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   PINNED FAVORITES STRIP (Feature 5)
   ============================================ */
.ml-favorites-strip[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.ml-favorites-label[b-pyuh5e6nzi] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    white-space: nowrap;
}

.ml-favorites-scroll[b-pyuh5e6nzi] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
}

.ml-favorites-scroll[b-pyuh5e6nzi]::-webkit-scrollbar {
    display: none;
}

.ml-favorites-thumb[b-pyuh5e6nzi] {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-surface-secondary, #f1f5f9);
}

.ml-favorites-thumb:hover[b-pyuh5e6nzi] {
    border-color: var(--theme-primary);
    transform: scale(1.08);
}

.ml-favorites-thumb img[b-pyuh5e6nzi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-favorites-thumb span[b-pyuh5e6nzi] {
    font-size: 1.2rem;
}

.is-dark .ml-favorites-thumb[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.08);
}

/* ============================================
   RECENTLY VIEWED STRIP (Feature 10)
   ============================================ */
.ml-recently-viewed[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-bottom: 0.25rem;
}

.ml-recent-label[b-pyuh5e6nzi] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    white-space: nowrap;
}

.ml-recent-scroll[b-pyuh5e6nzi] {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px;
}

.ml-recent-scroll[b-pyuh5e6nzi]::-webkit-scrollbar {
    display: none;
}

.ml-recent-thumb[b-pyuh5e6nzi] {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-surface-secondary, #f1f5f9);
    opacity: 0.8;
}

.ml-recent-thumb:hover[b-pyuh5e6nzi] {
    opacity: 1;
    transform: scale(1.08);
}

.ml-recent-thumb img[b-pyuh5e6nzi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ml-recent-thumb span[b-pyuh5e6nzi] {
    font-size: 1rem;
}

.is-dark .ml-recent-thumb[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════
   Generated Videos — Expandable Clip Preview
   ═══════════════════════════════════════════════ */

/* No inner hover tint on clickable cards — the shared .list-page-item:hover
   already gives enough feedback (slide + shadow), matching every other tab. */

.vj-expanded[b-pyuh5e6nzi] {
    border-color: var(--theme-primary, #6366f1) !important;
    /* The shared .list-page-item is flex-row; allow the clips panel to wrap
       onto its own line instead of competing with the content/actions for
       row space (which squeezes the info column and stacks the tags). */
    flex-wrap: wrap;
}

.vj-chevron[b-pyuh5e6nzi] {
    transition: transform 0.2s ease;
}

.vj-chevron-open[b-pyuh5e6nzi] {
    transform: rotate(180deg);
}

.vj-clips-panel[b-pyuh5e6nzi] {
    /* flex-basis 100% guarantees the panel wraps onto its own line inside
       the flex-row article; width alone is ignored in flex context. */
    flex: 0 0 100%;
    width: 100%;
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    animation: vjSlideDown-b-pyuh5e6nzi 0.2s ease;
}

@keyframes vjSlideDown-b-pyuh5e6nzi {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 600px; }
}

.vj-clips-loading[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--theme-text-muted, #94a3b8);
}

.vj-clips-spinner[b-pyuh5e6nzi] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: vjSpin-b-pyuh5e6nzi 0.6s linear infinite;
}

@keyframes vjSpin-b-pyuh5e6nzi {
    to { transform: rotate(360deg); }
}

.vj-clips-grid[b-pyuh5e6nzi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}

.vj-clip-card[b-pyuh5e6nzi] {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, #fff);
    transition: box-shadow 0.15s ease;
}

.vj-clip-card:hover[b-pyuh5e6nzi] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.vj-clip-video-wrap[b-pyuh5e6nzi] {
    position: relative;
    background: #000;
    aspect-ratio: 16 / 9;
}

.vj-clip-video[b-pyuh5e6nzi] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.vj-clip-duration-badge[b-pyuh5e6nzi] {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
}

.vj-clip-placeholder[b-pyuh5e6nzi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #94a3b8;
    gap: 0.25rem;
    font-size: 0.8rem;
}

.vj-clip-placeholder span:first-child[b-pyuh5e6nzi] {
    font-size: 1.5rem;
}

.vj-clip-footer[b-pyuh5e6nzi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.65rem;
    font-size: 0.78rem;
}

.vj-clip-meta[b-pyuh5e6nzi] {
    color: var(--theme-text-muted, #94a3b8);
}

.vj-clip-download[b-pyuh5e6nzi] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 4px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.vj-clip-download:hover[b-pyuh5e6nzi] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
}

.vj-clips-prompt[b-pyuh5e6nzi] {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.05);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
    word-break: break-word;
}

.vj-clips-prompt strong[b-pyuh5e6nzi] {
    color: var(--theme-text-primary, #1e293b);
    margin-right: 0.35rem;
}

.vj-clips-empty[b-pyuh5e6nzi] {
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.85rem;
    color: var(--theme-text-muted, #94a3b8);
}

/* Dark theme overrides */
.is-dark .vj-clips-panel[b-pyuh5e6nzi] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

.is-dark .vj-clip-card[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .vj-clip-card:hover[b-pyuh5e6nzi] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.is-dark .vj-clips-prompt[b-pyuh5e6nzi] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .vj-clips-prompt strong[b-pyuh5e6nzi] {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
    .vj-clips-grid[b-pyuh5e6nzi] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Tools/ScreenRecorder.razor.rz.scp.css */
/* ============================================
   SCREEN RECORDER - SCOPED STYLES
   Uses shared .list-page classes from utilities.css
   Only screen-recorder-specific styles here
   ============================================ */

/* Page Layout */
.sr-page[b-fx478g155h] {
    min-height: calc(100vh - 56px);
}

.sr-page .list-page-title svg[b-fx478g155h] {
    width: 28px;
    height: 28px;
    color: #dc2626;
}

/* Main Card */
.sr-main-card[b-fx478g155h] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
}

/* Info Cards */
.sr-info-card[b-fx478g155h] {
    background: var(--theme-surface, #ffffff);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    display: flex;
    gap: 16px;
    transition: all 0.2s ease;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.sr-info-card.info-blue[b-fx478g155h],
.sr-info-card.info-yellow[b-fx478g155h] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
}

.sr-info-card.info-green[b-fx478g155h] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    cursor: pointer;
}
.sr-info-card.info-green:hover:not(.enabled)[b-fx478g155h] { border-color: #22c55e; transform: translateY(-2px); }
.sr-info-card.info-green.enabled[b-fx478g155h] { border: 2px solid #22c55e; cursor: default; }

.sr-info-card.info-violet[b-fx478g155h] {
    background: var(--theme-surface, #ffffff);
    border: 1px solid var(--theme-border, #e2e8f0);
    cursor: pointer;
}
.sr-info-card.info-violet:hover:not(.enabled)[b-fx478g155h] { border-color: #8b5cf6; transform: translateY(-2px); }
.sr-info-card.info-violet.enabled[b-fx478g155h] { border: 2px solid #8b5cf6; cursor: default; }

.sr-info-icon[b-fx478g155h] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.sr-info-icon svg[b-fx478g155h] { width: 24px; height: 24px; }
/* SR-D-2 (2026-05): info-icon gradients track theme tokens.
   blue → --theme-primary (lifts Cloud's blue / Tron's cyan, etc.)
   yellow → --theme-warning (universal warning amber)
   green → --theme-text-success (universal success green)
   violet → --theme-primary at deeper mix (visually distinct sibling). */
.sr-info-icon.icon-blue[b-fx478g155h] {
    background: linear-gradient(135deg,
        var(--theme-primary, #3b82f6) 0%,
        color-mix(in srgb, var(--theme-primary, #2563eb) 75%, black 25%) 100%);
}
.sr-info-icon.icon-yellow[b-fx478g155h] {
    background: linear-gradient(135deg,
        var(--theme-warning, #f59e0b) 0%,
        color-mix(in srgb, var(--theme-warning, #d97706) 80%, black 20%) 100%);
}
.sr-info-icon.icon-green[b-fx478g155h] {
    background: linear-gradient(135deg,
        var(--theme-text-success, #22c55e) 0%,
        color-mix(in srgb, var(--theme-text-success, #16a34a) 80%, black 20%) 100%);
}
.sr-info-icon.icon-violet[b-fx478g155h] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--theme-primary, #8b5cf6) 80%, white 20%) 0%,
        color-mix(in srgb, var(--theme-primary, #7c3aed) 70%, black 30%) 100%);
}

.sr-info-content[b-fx478g155h] { flex: 1; }
.sr-info-content h3[b-fx478g155h] { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: var(--theme-text-primary, #1e293b); }
.sr-info-content p[b-fx478g155h] { margin: 0; font-size: 0.9rem; color: var(--theme-text-secondary, #64748b); line-height: 1.5; }
.sr-info-content strong[b-fx478g155h] { color: var(--theme-text-primary, #1e293b); }

/* Webcam Settings */
.sr-webcam-header[b-fx478g155h] { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sr-webcam-settings[b-fx478g155h] { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
.sr-webcam-options[b-fx478g155h] { display: flex; flex-direction: column; gap: 10px; }
.sr-option-label[b-fx478g155h] { font-size: 0.8rem; font-weight: 600; color: var(--theme-text-secondary, #64748b); text-transform: uppercase; }

.sr-position-btns[b-fx478g155h] { display: flex; gap: 6px; }
.sr-pos-btn[b-fx478g155h] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, white);
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
    color: var(--theme-text-primary, #1e293b);
}
.sr-pos-btn:hover[b-fx478g155h] { border-color: #22c55e; }
.sr-pos-btn.active[b-fx478g155h] { background: #22c55e; border-color: #22c55e; color: white; }

.sr-size-slider[b-fx478g155h] { width: 150px; accent-color: #22c55e; }
.sr-btn-disable[b-fx478g155h] {
    padding: 8px 14px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
}
.sr-btn-disable:hover[b-fx478g155h] { background: rgba(239, 68, 68, 0.2); }

.sr-webcam-preview[b-fx478g155h] { position: relative; }
.sr-preview-screen[b-fx478g155h] {
    width: 200px;
    height: 120px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.sr-preview-cam[b-fx478g155h] {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid white;
    box-shadow: 0 2px 8px transparent;
}
.sr-preview-cam.top-left[b-fx478g155h] { top: 8px; left: 8px; }
.sr-preview-cam.top-right[b-fx478g155h] { top: 8px; right: 8px; }
.sr-preview-cam.bottom-left[b-fx478g155h] { bottom: 8px; left: 8px; }
.sr-preview-cam.bottom-right[b-fx478g155h] { bottom: 8px; right: 8px; }

.sr-preview-loading[b-fx478g155h] {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sr-text-error[b-fx478g155h] { color: #dc2626 !important; }

/* Status Display */
.sr-status[b-fx478g155h] {
    background: var(--theme-surface, #f8fafc);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.sr-status.recording[b-fx478g155h] { background: rgba(239, 68, 68, 0.08); border-color: #fca5a5; }
.sr-status.processing[b-fx478g155h] { background: rgba(245, 158, 11, 0.08); border-color: #fcd34d; }
.sr-status.complete[b-fx478g155h] { background: rgba(34, 197, 94, 0.08); border-color: #86efac; }

.sr-status-indicator[b-fx478g155h] { display: flex; align-items: center; gap: 12px; }
.sr-status-text[b-fx478g155h] { font-weight: 600; font-size: 1rem; }
.sr-status-text.recording[b-fx478g155h] { color: #dc2626; }
.sr-status-text.processing[b-fx478g155h] { color: #d97706; }
.sr-status-text.complete[b-fx478g155h] { color: #16a34a; }
.sr-status-text.ready[b-fx478g155h] { color: var(--theme-text-secondary, #64748b); }

.sr-status-icon[b-fx478g155h] { width: 24px; height: 24px; }
.sr-status-icon.ready[b-fx478g155h] { color: var(--theme-text-secondary, #64748b); }
.sr-status-icon.success[b-fx478g155h] { color: #16a34a; }

.sr-recording-dot[b-fx478g155h] {
    width: 16px;
    height: 16px;
    background: #dc2626;
    border-radius: 50%;
    animation: sr-pulse-b-fx478g155h 1.5s ease-in-out infinite;
}

.sr-elapsed-time[b-fx478g155h] {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'SF Mono', monospace;
    color: #dc2626;
}

@keyframes sr-pulse-b-fx478g155h {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.9); }
}

/* Spinner */
.sr-spinner[b-fx478g155h], .sr-spinner-sm[b-fx478g155h] {
    border: 3px solid #fde68a;
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: sr-spin-b-fx478g155h 0.8s linear infinite;
}
.sr-spinner[b-fx478g155h] { width: 24px; height: 24px; }
.sr-spinner-sm[b-fx478g155h] { width: 16px; height: 16px; border-width: 2px; }

@keyframes sr-spin-b-fx478g155h {
    to { transform: rotate(360deg); }
}

/* Action Buttons */
/* SR-NAME-2 (2026-09-09): optional recording name, read by recordingFileName(). */
.sr-name-row[b-fx478g155h] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px 0;
}
.sr-name-label[b-fx478g155h] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    white-space: nowrap;
}
.sr-name-input[b-fx478g155h] {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    background: var(--theme-input-bg, #ffffff);
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.95rem;
    font-family: inherit;
}
.sr-name-input:focus[b-fx478g155h] { outline: none; border-color: var(--theme-primary, #6366f1); }

.sr-action-buttons[b-fx478g155h] {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.sr-btn-record[b-fx478g155h] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sr-btn-record svg[b-fx478g155h] { width: 24px; height: 24px; }

.sr-btn-record.start[b-fx478g155h] {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.3);
}
.sr-btn-record.start:hover:not(:disabled)[b-fx478g155h] { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4); }
.sr-btn-record.start:disabled[b-fx478g155h] { opacity: 0.5; cursor: not-allowed; }

.sr-btn-record.stop[b-fx478g155h] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-primary, #475569);
    border: 1px solid var(--theme-border, #e2e8f0);
}
.sr-btn-record.stop:hover:not(:disabled)[b-fx478g155h] { background: var(--theme-border, #e2e8f0); }
.sr-btn-record.stop:disabled[b-fx478g155h] { opacity: 0.4; cursor: not-allowed; }

.sr-recording-dot-sm[b-fx478g155h] {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    animation: sr-pulse-b-fx478g155h 1s infinite;
}

/* Recording Result */
.sr-recording-result[b-fx478g155h] {
    background: var(--theme-surface, #f8fafc);
    border-radius: 14px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.sr-result-header[b-fx478g155h] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sr-result-header h3[b-fx478g155h] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.1rem;
    color: var(--theme-text-primary, #1e293b);
}

.sr-result-header h3 svg[b-fx478g155h] { width: 24px; height: 24px; color: var(--theme-primary-ink, var(--theme-primary, #8b5cf6)); }
.sr-result-header h3 small[b-fx478g155h] { font-weight: 400; color: var(--theme-text-secondary, #64748b); }

/* SR-Hotfix-1 (2026-05): "Additional options" section sits below the Record button.
   Subtle separator + quieter heading so the user understands these are optional
   tweaks, not required pre-record steps. The four essential cards (Permissions,
   Pro Tip, Webcam, Mic) + status + Record button now stay above the fold. */
.sr-additional-options[b-fx478g155h] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}
.sr-additional-options-title[b-fx478g155h] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 12px 0;
}

/* SR-V-4 (2026-05): Quality preset pills — three-segment selector for low/medium/high.
   Active state uses --theme-primary; idle uses --theme-surface for clean theme parity. */
.sr-quality-row[b-fx478g155h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.sr-quality-pill[b-fx478g155h] {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--theme-border, #cbd5e1);
    background: var(--theme-surface, #ffffff);
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sr-quality-pill:hover:not(:disabled)[b-fx478g155h] {
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-text-primary, #1e293b);
}
/* SR-V-1.2 (2026-05-08): polish on the active state. Pre-fix this rendered as
   a flat var(--theme-primary), which in Executive theme is dark navy — high
   contrast but visually muted, didn't read as a celebrated "selected" state.
   New treatment: gradient from primary to accent (catches the eye, hints at
   the same vocabulary the AI/Glitch surfaces use), a soft outer shadow tinted
   to the primary so the pill lifts off the page, and an inset highlight at
   the top to mimic a subtle bevel. Works across all 8 themes via color-mix —
   themes with brighter primaries (Space, Mystic) get more pop, Executive's
   navy gets warmth from the accent gradient stop. */
.sr-quality-pill.active[b-fx478g155h] {
    background: linear-gradient(
        135deg,
        var(--theme-primary, #6366f1),
        color-mix(in srgb, var(--theme-primary, #6366f1) 70%, var(--theme-accent, #a855f7))
    );
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 80%, transparent);
    color: var(--theme-primary-contrast, #ffffff);
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--theme-primary, #6366f1) 28%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
    font-weight: 600;
}
.sr-quality-pill.active:hover:not(:disabled)[b-fx478g155h] {
    /* Override the non-active hover rule so the gradient stays put on hover —
       only the shadow lifts slightly to confirm interactivity. */
    border-color: color-mix(in srgb, var(--theme-primary, #6366f1) 80%, transparent);
    color: var(--theme-primary-contrast, #ffffff);
    box-shadow:
        0 4px 12px color-mix(in srgb, var(--theme-primary, #6366f1) 36%, transparent),
        inset 0 1px 0 color-mix(in srgb, #ffffff 18%, transparent);
}
.sr-quality-pill:disabled[b-fx478g155h] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* SR-V-1 (2026-05-07): hint that surfaces only when the demo16x9 preset is
   selected. Live window dimensions feed a traffic-light indicator: green
   "ready" state when browser is sized 1920×1080, amber "needs adjustment"
   when not. Tells the user the constraint side of the deal — browsers
   honor the width/height/aspectRatio request best when the shared target
   (Window or Tab) is already shaped 16:9, and this hint makes the user's
   compliance with that constraint visible at a glance. */
.sr-quality-hint[b-fx478g155h] {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 18%, transparent);
    font-size: 0.82rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sr-quality-hint.ready[b-fx478g155h] {
    background: color-mix(in srgb, var(--theme-success, #22c55e) 10%, transparent);
    border-color: color-mix(in srgb, var(--theme-success, #22c55e) 28%, transparent);
}
.sr-quality-hint.not-ready[b-fx478g155h] {
    background: color-mix(in srgb, var(--theme-warning, #f59e0b) 10%, transparent);
    border-color: color-mix(in srgb, var(--theme-warning, #f59e0b) 28%, transparent);
}
.sr-quality-hint strong[b-fx478g155h] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
}
.sr-quality-hint code[b-fx478g155h] {
    background: color-mix(in srgb, var(--theme-text-primary, #1e293b) 6%, transparent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Status row: indicator + sentence sharing one line on wide viewports. */
.sr-hint-status[b-fx478g155h] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.sr-hint-indicator[b-fx478g155h] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}
.sr-hint-indicator.ready[b-fx478g155h] {
    background: var(--theme-success, #22c55e);
    color: #ffffff;
}
.sr-hint-indicator.not-ready[b-fx478g155h] {
    background: var(--theme-warning, #f59e0b);
    color: #ffffff;
}

/* Secondary line: marketing-mode auto-enable callout. Italicized + smaller so
   it reads as a side note rather than a second equally-weighted instruction. */
.sr-hint-meta[b-fx478g155h] {
    font-size: 0.76rem;
    font-style: italic;
    color: var(--theme-text-tertiary, #94a3b8);
    padding-top: 4px;
    border-top: 1px solid color-mix(in srgb, var(--theme-text-secondary, #64748b) 10%, transparent);
}

/* SR-V-1 followup (2026-05-08): step list shown only in the not-ready state.
   Compact bullets, slightly indented, reads as "here's how to fix it" rather
   than "here's a wall of options". The browser-restriction note below is
   styled with monospace inline code for the API name and a slightly muted
   color to read as an aside, not a primary instruction. */
.sr-hint-steps[b-fx478g155h] {
    margin: 6px 0 0 0;
    padding-left: 22px;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--theme-text-secondary, #64748b);
}
.sr-hint-steps li[b-fx478g155h] {
    margin-bottom: 2px;
}
.sr-hint-steps li:last-child[b-fx478g155h] {
    margin-bottom: 0;
}
.sr-hint-meta-warning[b-fx478g155h] {
    margin-top: 6px;
    font-size: 0.74rem;
    color: var(--theme-text-tertiary, #94a3b8);
    line-height: 1.5;
}
.sr-hint-meta-warning code[b-fx478g155h] {
    background: color-mix(in srgb, var(--theme-text-primary, #1e293b) 6%, transparent);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* SR-V-2 (2026-05): markers summary block — appears between the result header
   and the video preview. Renders mm:ss timestamps + names so the user can
   navigate to each marked moment in the rendered video. */
.sr-markers-summary[b-fx478g155h] {
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 8%, var(--theme-surface, #f8fafc));
    border: 1px solid color-mix(in srgb, var(--theme-primary, #6366f1) 25%, transparent);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.sr-markers-summary-header[b-fx478g155h] {
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.95rem;
    margin-bottom: 8px;
}
.sr-markers-list[b-fx478g155h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 16px;
}
.sr-markers-list li[b-fx478g155h] {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
}
.sr-marker-time[b-fx478g155h] {
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    flex: 0 0 auto;
}
.sr-marker-name[b-fx478g155h] {
    color: var(--theme-text-primary, #1e293b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SR-V-5 (2026-05): "Record another" sits next to Discard. Inherits the
   .sr-btn-discard layout but uses neutral-themed colors instead of the
   discard-red ramp so the user understands the difference at a glance. */
.sr-btn-record-another[b-fx478g155h] {
    background: var(--theme-surface-elevated, #f1f5f9);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid var(--theme-border, #cbd5e1);
}
.sr-btn-record-another:hover[b-fx478g155h] {
    background: var(--theme-surface, #ffffff);
    border-color: var(--theme-primary, #6366f1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.sr-btn-discard[b-fx478g155h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
}
.sr-btn-discard:hover[b-fx478g155h] { background: rgba(239, 68, 68, 0.2); }
.sr-btn-discard svg[b-fx478g155h] { width: 18px; height: 18px; }

.sr-video-preview[b-fx478g155h] {
    width: 100%;
    border-radius: 10px;
    background: #0f172a;
    aspect-ratio: 16/9;
}

.sr-result-actions[b-fx478g155h] {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.sr-btn-action[b-fx478g155h] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sr-btn-action svg[b-fx478g155h] { width: 20px; height: 20px; }

/* SR-D-2 (2026-05): post-recording action buttons. The download/save-success
   green stays universal (it's the "your file is ready" semantic), but edit / media-studio
   / save-library / share all flow through --theme-primary so the panel harmonizes
   with the active theme instead of being indigo+sky+blue regardless of context. */
.sr-btn-action.download[b-fx478g155h] {
    background: linear-gradient(135deg, var(--theme-text-success, #22c55e) 0%, color-mix(in srgb, var(--theme-text-success, #16a34a) 80%, black 20%) 100%);
    color: var(--theme-primary-contrast, white);
}
.sr-btn-action.download:hover[b-fx478g155h] { transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-text-success, #22c55e) 30%, transparent); }

.sr-btn-action.edit[b-fx478g155h] {
    background: linear-gradient(135deg, color-mix(in srgb, var(--theme-primary, #8b5cf6) 85%, white 15%) 0%, color-mix(in srgb, var(--theme-primary, #7c3aed) 75%, black 25%) 100%);
    color: var(--theme-primary-contrast, white);
}
.sr-btn-action.edit:hover[b-fx478g155h] { transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #8b5cf6) 30%, transparent); }

.sr-btn-action.media-studio[b-fx478g155h] {
    background: linear-gradient(135deg, var(--theme-primary, #0ea5e9) 0%, color-mix(in srgb, var(--theme-primary, #0284c7) 75%, black 25%) 100%);
    color: var(--theme-primary-contrast, white);
}
.sr-btn-action.media-studio:hover[b-fx478g155h] { transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #0ea5e9) 30%, transparent); }

.sr-btn-action.save-library[b-fx478g155h] {
    background: linear-gradient(135deg, var(--theme-primary, #0ea5e9) 0%, color-mix(in srgb, var(--theme-primary, #0284c7) 75%, black 25%) 100%);
    color: var(--theme-primary-contrast, white);
    cursor: pointer;
    border: none;
    font-size: inherit;
    font-family: inherit;
}
.sr-btn-action.save-library svg[b-fx478g155h] { width: 20px; height: 20px; }
.sr-btn-action.save-library:hover[b-fx478g155h] { transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #0ea5e9) 30%, transparent); }

.sr-btn-action.save-library.saving[b-fx478g155h] {
    opacity: 0.8;
    cursor: not-allowed;
}
.sr-btn-action.save-library.saving:hover[b-fx478g155h] { transform: none; box-shadow: none; }

.sr-btn-action.save-library.saved[b-fx478g155h] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    opacity: 0.9;
    cursor: default;
}
.sr-btn-action.save-library.saved:hover[b-fx478g155h] { transform: none; box-shadow: none; }

.sr-btn-action.share[b-fx478g155h] {
    background: linear-gradient(135deg, var(--theme-primary, #3b82f6) 0%, color-mix(in srgb, var(--theme-primary, #2563eb) 75%, black 25%) 100%);
    color: var(--theme-primary-contrast, white);
    cursor: pointer;
    border: none;
    font-size: inherit;
    font-family: inherit;
}
.sr-btn-action.share:hover[b-fx478g155h] { transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-primary, #3b82f6) 30%, transparent); }

.sr-btn-action.share.uploading[b-fx478g155h] {
    opacity: 0.8;
    cursor: not-allowed;
}
.sr-btn-action.share.uploading:hover[b-fx478g155h] { transform: none; box-shadow: none; }

.sr-btn-action.share.shared[b-fx478g155h] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}
.sr-btn-action.share.shared:hover[b-fx478g155h] { box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); }

.sr-btn-action.share.preview-link[b-fx478g155h] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    flex: 0;
    white-space: nowrap;
}
.sr-btn-action.share.preview-link:hover[b-fx478g155h] { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3); }

.sr-btn-action.share.upgrade-cta[b-fx478g155h] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.sr-btn-action.share.upgrade-cta:hover[b-fx478g155h] { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3); }
.sr-btn-action.share.upgrade-cta svg[b-fx478g155h] { width: 18px; height: 18px; }

.sr-share-spinner[b-fx478g155h] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: sr-spin-b-fx478g155h 0.8s linear infinite;
    display: inline-block;
}

/* Navigation */
.sr-nav[b-fx478g155h] {
    background: var(--theme-surface, rgba(255, 255, 255, 0.9));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.08));
}

.sr-nav-title[b-fx478g155h] {
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
}

.sr-nav-links[b-fx478g155h] { display: flex; gap: 12px; flex-wrap: wrap; }

.sr-nav-link[b-fx478g155h] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.sr-nav-link svg[b-fx478g155h] { width: 18px; height: 18px; }
.sr-nav-link:hover[b-fx478g155h] { background: rgba(59, 130, 246, 0.2); transform: translateY(-1px); }

/* Warning Card */
.sr-warning-card[b-fx478g155h] {
    text-align: center;
    padding: 40px 20px;
}

.sr-warning-icon[b-fx478g155h] {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sr-warning-icon svg[b-fx478g155h] { width: 40px; height: 40px; color: #dc2626; }

.sr-warning-card h2[b-fx478g155h] { margin: 0 0 12px; color: var(--theme-text-primary, #1e293b); }
.sr-warning-card p[b-fx478g155h] { color: var(--theme-text-secondary, #64748b); margin-bottom: 24px; }

.sr-alternatives h3[b-fx478g155h] { font-size: 0.9rem; color: var(--theme-text-secondary, #64748b); margin-bottom: 16px; }

.sr-alt-link[b-fx478g155h] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 12px;
    margin-bottom: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--theme-border, #e2e8f0);
}

.sr-alt-link:hover[b-fx478g155h] { background: var(--theme-border, #f1f5f9); transform: translateX(4px); }

.sr-alt-icon[b-fx478g155h] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.sr-alt-icon svg[b-fx478g155h] { width: 24px; height: 24px; }
.sr-alt-icon.icon-purple[b-fx478g155h] { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.sr-alt-icon.icon-blue[b-fx478g155h] { background: linear-gradient(135deg, #3b82f6, #2563eb); }

.sr-alt-text[b-fx478g155h] { text-align: left; }
.sr-alt-text strong[b-fx478g155h] { display: block; color: var(--theme-text-primary, #1e293b); }
.sr-alt-text small[b-fx478g155h] { color: var(--theme-text-secondary, #64748b); }

/* Countdown Overlay */
/* SR-D-3 (2026-05): countdown backdrop tints from --theme-background so light themes
   (Cloud, Winter) get a clean dimmed backdrop instead of an unrelated dark slate.
   Mix 90% with black to keep the countdown legible regardless of theme luminance. */
.sr-countdown-overlay[b-fx478g155h] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--theme-background, #0f172a) 90%, black 10%);
    background-color: color-mix(in oklch, var(--theme-background, #0f172a) 90%, black 10%);
    opacity: 0.94;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.sr-countdown-content[b-fx478g155h] {
    text-align: center;
    color: var(--theme-primary-contrast, white);
    padding: 48px 64px 40px;
    background: color-mix(in srgb, var(--theme-surface-elevated, #1e293b) 60%, transparent);
    border-radius: 24px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
    min-width: 320px;
}

.sr-countdown-number[b-fx478g155h] {
    font-size: 8rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    background: linear-gradient(180deg, #ff6b6b 0%, #dc2626 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 24px rgba(239, 68, 68, 0.4));
    animation: sr-countdown-pop-b-fx478g155h 1s ease-out;
}

.sr-countdown-text[b-fx478g155h] {
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.7;
    margin: 0 0 32px;
    letter-spacing: 0.02em;
}

.sr-countdown-cancel[b-fx478g155h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sr-countdown-cancel:hover[b-fx478g155h] {
    background: rgba(255, 255, 255, 0.18);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

@keyframes sr-countdown-pop-b-fx478g155h {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Dark Theme */
.is-dark .sr-main-card[b-fx478g155h] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .sr-info-card[b-fx478g155h] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.is-dark .sr-pos-btn[b-fx478g155h] {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(255, 255, 255, 0.2);
    color: white;
}

.is-dark .sr-status[b-fx478g155h] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .sr-recording-result[b-fx478g155h] {
    background: rgba(30, 41, 59, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .sr-nav[b-fx478g155h] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .sr-main-card[b-fx478g155h] { padding: 16px; }
    .sr-action-buttons[b-fx478g155h] { flex-direction: column; }
    .sr-name-row[b-fx478g155h] { flex-direction: column; align-items: stretch; }
    .sr-btn-record[b-fx478g155h] { width: 100%; justify-content: center; }
    .sr-result-actions[b-fx478g155h] { flex-direction: column; }
    .sr-webcam-settings[b-fx478g155h] { flex-direction: column; }
    .sr-nav[b-fx478g155h] { flex-direction: column; align-items: stretch; }
    .sr-nav-links[b-fx478g155h] { justify-content: center; }
    .sr-countdown-content[b-fx478g155h] { padding: 36px 28px 32px; min-width: unset; margin: 0 16px; }
    .sr-countdown-number[b-fx478g155h] { font-size: 6rem; }
}

/* Saved Badge (header) */
.sr-autosave-badge[b-fx478g155h] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.sr-autosave-badge.saved[b-fx478g155h] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.is-dark .sr-autosave-badge.saved[b-fx478g155h] {
    background: rgba(16, 185, 129, 0.2);
}
/* /Pages/Tools/Swot/SwotAnalysisDetail.razor.rz.scp.css */
/* SwotAnalysisDetail.razor.css */
/* Scoped CSS for native HTML implementation */

.swot-detail-container[b-i3jr9kjxko] {
    max-width: max(1400px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1400px contained, grows in Wide */
    margin: 24px auto;
    padding: 0 24px;
}

/* Skeleton Loading */
.loading-skeleton[b-i3jr9kjxko] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.skeleton-header[b-i3jr9kjxko] {
    height: 100px;
    background: rgba(0,0,0,0.05);
    border-radius: 12px;
}

.skeleton-grid[b-i3jr9kjxko] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.skeleton-quadrant[b-i3jr9kjxko] {
    height: 300px;
    background: rgba(0,0,0,0.05);
    border-radius: 12px;
}

@media (max-width: 768px) {
    .skeleton-grid[b-i3jr9kjxko] {
        grid-template-columns: 1fr;
    }
}

/* Not Found State */
.not-found-state[b-i3jr9kjxko] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    background: var(--theme-surface);
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
    gap: 16px;
}

.not-found-icon[b-i3jr9kjxko] {
    color: var(--theme-text-muted);
    width: 64px;
    height: 64px;
}

.not-found-title[b-i3jr9kjxko] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--theme-text-primary);
}

/* Header Section */
.detail-header[b-i3jr9kjxko] {
    background: var(--theme-surface);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.header-content[b-i3jr9kjxko] {
    flex: 1;
    min-width: 300px;
}

.breadcrumbs[b-i3jr9kjxko] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

.breadcrumb-link[b-i3jr9kjxko] {
    color: var(--theme-text-secondary);
    text-decoration: none;
}
.breadcrumb-link:hover[b-i3jr9kjxko] { color: var(--theme-primary-ink, var(--theme-primary)); text-decoration: underline; }

.separator[b-i3jr9kjxko] { color: #cbd5e1; }

.page-title[b-i3jr9kjxko] {
    margin: 0 0 12px;
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
}

.meta-row[b-i3jr9kjxko] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.badge[b-i3jr9kjxko] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-primary[b-i3jr9kjxko] { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.badge-secondary[b-i3jr9kjxko] { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.badge-tertiary[b-i3jr9kjxko] { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.badge-info[b-i3jr9kjxko] { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.badge-default[b-i3jr9kjxko] { background: rgba(148, 163, 184, 0.1); color: #94a3b8; }

.meta-text[b-i3jr9kjxko] {
    font-size: 0.875rem;
    color: #64748b;
}

.description[b-i3jr9kjxko] {
    margin: 0;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

.header-actions[b-i3jr9kjxko] {
    display: flex;
    gap: 8px;
}

/* Buttons */
.btn[b-i3jr9kjxko] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-primary-filled[b-i3jr9kjxko] {
    background: #3b82f6;
    color: white;
    border: none;
}
.btn-primary-filled:hover[b-i3jr9kjxko] { background: #2563eb; }

.btn-outlined[b-i3jr9kjxko] {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #64748b;
}
.btn-outlined:hover[b-i3jr9kjxko] { background: #f8fafc; border-color: #94a3b8; color: #1e293b; }

.btn-danger-outlined[b-i3jr9kjxko] {
    background: transparent;
    border: 1px solid #fecaca;
    color: #ef4444;
}
.btn-danger-outlined:hover[b-i3jr9kjxko] { background: #fef2f2; border-color: #ef4444; }

/* Quadrants Grid */
.swot-grid[b-i3jr9kjxko] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .swot-grid[b-i3jr9kjxko] {
        grid-template-columns: 1fr;
    }
}

.swot-quadrant[b-i3jr9kjxko] {
    border-radius: 12px;
    padding: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.strength-bg[b-i3jr9kjxko] { 
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 100%); 
    border: 2px solid #4caf50; 
}
.weakness-bg[b-i3jr9kjxko] { 
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15) 0%, rgba(244, 67, 54, 0.05) 100%); 
    border: 2px solid #f44336; 
}
.opportunity-bg[b-i3jr9kjxko] { 
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.05) 100%); 
    border: 2px solid #2196f3; 
}
.threat-bg[b-i3jr9kjxko] { 
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15) 0%, rgba(255, 152, 0, 0.05) 100%); 
    border: 2px solid #ff9800; 
}

.quadrant-header[b-i3jr9kjxko] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quadrant-title[b-i3jr9kjxko] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.text-success[b-i3jr9kjxko] { color: #2e7d32; }
.text-error[b-i3jr9kjxko] { color: #d32f2f; }
.text-info[b-i3jr9kjxko] { color: #0288d1; }
.text-warning[b-i3jr9kjxko] { color: #ed6c02; }

.count-badge[b-i3jr9kjxko] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.bg-success[b-i3jr9kjxko] { background: #4caf50; }
.bg-error[b-i3jr9kjxko] { background: #f44336; }
.bg-info[b-i3jr9kjxko] { background: #2196f3; }
.bg-warning[b-i3jr9kjxko] { background: #ff9800; }

.quadrant-desc[b-i3jr9kjxko] {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.quadrant-items[b-i3jr9kjxko] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.swot-item[b-i3jr9kjxko] {
    background: white;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    border: 1px solid transparent;
}

.swot-item:hover[b-i3jr9kjxko] {
    transform: translateX(4px);
    border-color: rgba(0,0,0,0.1);
}

.item-text[b-i3jr9kjxko] {
    margin: 0;
    font-weight: 500;
    color: #1e293b;
}

.item-notes[b-i3jr9kjxko] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: #64748b;
}

.empty-message[b-i3jr9kjxko] {
    text-align: center;
    padding: 24px;
    font-size: 0.9rem;
    color: #64748b;
    font-style: italic;
}

/* Dark Mode */
/* Dark theme support - NTS theme classes */
.is-dark .detail-header[b-i3jr9kjxko], .not-found-state[b-i3jr9kjxko] {
        background: #1e293b;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    
.is-dark .page-title[b-i3jr9kjxko], .not-found-title[b-i3jr9kjxko] { color: #f1f5f9; }
.is-dark .meta-text[b-i3jr9kjxko], .breadcrumbs[b-i3jr9kjxko], .breadcrumb-link[b-i3jr9kjxko] { color: #94a3b8; }
.is-dark .breadcrumb-link:hover[b-i3jr9kjxko] { color: #3b82f6; }
.is-dark .description[b-i3jr9kjxko] { color: #cbd5e1; }
    
.is-dark .btn-outlined[b-i3jr9kjxko] { border-color: #475569; color: #cbd5e1; }
.is-dark .btn-outlined:hover[b-i3jr9kjxko] { background: #334155; color: white; }
    
.is-dark .swot-item[b-i3jr9kjxko] {
        background: #334155;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
.is-dark .item-text[b-i3jr9kjxko] { color: #f1f5f9; }
.is-dark .item-notes[b-i3jr9kjxko] { color: #94a3b8; }
    
.is-dark .text-success[b-i3jr9kjxko] { color: #4ade80; }
.is-dark .text-error[b-i3jr9kjxko] { color: #f87171; }
.is-dark .text-info[b-i3jr9kjxko] { color: #38bdf8; }
.is-dark .text-warning[b-i3jr9kjxko] { color: #fbbf24; }
    
.is-dark .strength-bg[b-i3jr9kjxko] { border-color: rgba(76, 175, 80, 0.5); background: rgba(76, 175, 80, 0.1); }
.is-dark .weakness-bg[b-i3jr9kjxko] { border-color: rgba(244, 67, 54, 0.5); background: rgba(244, 67, 54, 0.1); }
.is-dark .opportunity-bg[b-i3jr9kjxko] { border-color: rgba(33, 150, 243, 0.5); background: rgba(33, 150, 243, 0.1); }
.is-dark .threat-bg[b-i3jr9kjxko] { border-color: rgba(255, 152, 0, 0.5); background: rgba(255, 152, 0, 0.1); }
/* /Pages/Tools/Swot/SwotAnalysisDialog.razor.rz.scp.css */
/* ============================================
   SWOT ANALYSIS DIALOG STYLES
   ============================================ */

/* Form Layout */
.form-section[b-tg0h7zt71y] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .form-section[b-tg0h7zt71y] {
        grid-template-columns: 1fr;
    }
}

.form-group[b-tg0h7zt71y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.full-width[b-tg0h7zt71y],
.full-width-mobile[b-tg0h7zt71y] {
    /* full-width-mobile handled by grid fallback */
}

.full-width[b-tg0h7zt71y] {
    grid-column: 1 / -1;
}

.form-label[b-tg0h7zt71y] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.form-control[b-tg0h7zt71y] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, var(--theme-border));
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    width: 100%;
    background: var(--theme-input-bg, var(--theme-surface));
    color: var(--theme-input-text, var(--theme-text-primary));
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus[b-tg0h7zt71y] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.form-control[b-tg0h7zt71y]::placeholder {
    color: var(--theme-text-hint);
}

textarea.form-control[b-tg0h7zt71y] {
    resize: vertical;
    min-height: 70px;
}

/* Quadrants Grid */
.quadrants-grid[b-tg0h7zt71y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 768px) {
    .quadrants-grid[b-tg0h7zt71y] {
        grid-template-columns: 1fr;
    }
}

.quadrant-panel[b-tg0h7zt71y] {
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 250px;
    border: 1px solid transparent;
}

.strength-bg[b-tg0h7zt71y] {
    background: var(--theme-bg-success);
    border-color: var(--theme-text-success);
    border-left: 4px solid var(--theme-text-success);
}

.weakness-bg[b-tg0h7zt71y] {
    background: var(--theme-bg-danger);
    border-color: var(--theme-text-danger);
    border-left: 4px solid var(--theme-text-danger);
}

.opportunity-bg[b-tg0h7zt71y] {
    background: var(--theme-bg-info);
    border-color: var(--theme-text-info);
    border-left: 4px solid var(--theme-text-info);
}

.threat-bg[b-tg0h7zt71y] {
    background: var(--theme-bg-warning);
    border-color: var(--theme-text-warning);
    border-left: 4px solid var(--theme-text-warning);
}

/* Panel Header */
.panel-header[b-tg0h7zt71y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title[b-tg0h7zt71y] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-primary);
}

.text-success[b-tg0h7zt71y] { color: var(--theme-text-success); }
.text-error[b-tg0h7zt71y] { color: var(--theme-text-danger); }
.text-info[b-tg0h7zt71y] { color: var(--theme-text-info); }
.text-warning[b-tg0h7zt71y] { color: var(--theme-text-warning); }

.icon-btn-sm[b-tg0h7zt71y] {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.icon-btn-sm:hover[b-tg0h7zt71y] {
    background-color: var(--theme-secondary-hover);
}

/* Items List */
.items-list[b-tg0h7zt71y] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.swot-item-row[b-tg0h7zt71y] {
    background: var(--theme-input-bg);
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-input[b-tg0h7zt71y] {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 0.875rem;
    padding: 4px;
    color: var(--theme-input-text);
}

.item-input:focus[b-tg0h7zt71y] {
    outline: none;
}

.delete-btn[b-tg0h7zt71y] {
    color: var(--theme-text-muted);
    padding: 4px;
}

.delete-btn:hover[b-tg0h7zt71y] {
    color: var(--theme-text-danger);
    background: var(--theme-bg-danger);
}

.empty-placeholder[b-tg0h7zt71y] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--theme-text-muted);
    font-size: 0.8rem;
    font-style: italic;
    cursor: pointer;
}

.empty-placeholder:hover[b-tg0h7zt71y] {
    color: var(--theme-text-secondary);
}
/* /Pages/Tools/VideoEditor/VideoEditorActionButtons.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR ACTION BUTTONS STYLES
   ============================================ */

.ve-action-buttons[b-eqbnowzfjr] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.ve-upgrade-hint[b-eqbnowzfjr] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
}

.ve-nav-link[b-eqbnowzfjr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--theme-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.ve-nav-link:hover[b-eqbnowzfjr] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    background: var(--theme-surface-secondary, #f1f5f9);
}

.is-dark .ve-nav-link[b-eqbnowzfjr] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .ve-nav-link:hover[b-eqbnowzfjr] {
    color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    background: rgba(255, 255, 255, 0.08);
}

.ve-link[b-eqbnowzfjr] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-weight: 600;
    text-decoration: underline;
}

.ve-link:hover[b-eqbnowzfjr] {
    opacity: 0.8;
}
/* /Pages/Tools/VideoEditor/VideoEditorClipUploader.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR CLIP UPLOADER STYLES
   ============================================ */

.ve-clip-uploader[b-8k3ultq1u4] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1.5rem;
}

.ve-upload-btn[b-8k3ultq1u4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--theme-primary, #6366f1);
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.ve-upload-btn:hover[b-8k3ultq1u4] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.ve-upload-btn input[type="file"][b-8k3ultq1u4] {
    display: none;
}

.ve-upload-icon[b-8k3ultq1u4] {
    width: 1.15rem;
    height: 1.15rem;
}

.ve-add-recording-btn[b-8k3ultq1u4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #10b981;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.ve-add-recording-btn:hover:not(:disabled)[b-8k3ultq1u4] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.ve-add-recording-btn:disabled[b-8k3ultq1u4] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.ve-library-btn[b-8k3ultq1u4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    padding: 10px 20px;
    border-radius: 10px;
    border: 1.5px solid var(--theme-primary, #6366f1);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.ve-library-btn:hover:not(:disabled)[b-8k3ultq1u4] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
    transform: translateY(-1px);
}

.ve-library-btn:disabled[b-8k3ultq1u4] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.is-dark .ve-library-btn[b-8k3ultq1u4] {
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
    border-color: var(--theme-primary, #818cf8);
}

.is-dark .ve-library-btn:hover:not(:disabled)[b-8k3ultq1u4] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.ve-library-btn .ve-upload-icon[b-8k3ultq1u4] {
    width: 1.15rem;
    height: 1.15rem;
}

.ve-clip-limit-warning[b-8k3ultq1u4] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 10px 16px;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.85rem;
}

.is-dark .ve-clip-limit-warning[b-8k3ultq1u4] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
}

.ve-limit-link[b-8k3ultq1u4] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.ve-limit-link:hover[b-8k3ultq1u4] {
    opacity: 0.8;
}

.ve-clip-counter[b-8k3ultq1u4] {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--theme-text-muted, #94a3b8);
    padding: 6px 12px;
    background: var(--theme-surface-secondary, #f1f5f9);
    border-radius: 8px;
}

.is-dark .ve-clip-counter[b-8k3ultq1u4] {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
}
/* /Pages/Tools/VideoEditor/VideoEditorEmptyState.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR EMPTY STATE STYLES
   ============================================ */

.ve-empty-state[b-pljwcigstd] {
    background: var(--theme-surface, white);
    padding: 3rem 2rem;
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    text-align: center;
}

.is-dark .ve-empty-state[b-pljwcigstd] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.ve-empty-icon-wrap[b-pljwcigstd] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.is-dark .ve-empty-icon-wrap[b-pljwcigstd] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.ve-empty-icon[b-pljwcigstd] {
    width: 2rem;
    height: 2rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.is-dark .ve-empty-icon[b-pljwcigstd] {
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
}

.ve-empty-title[b-pljwcigstd] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 0.5rem 0;
}

.is-dark .ve-empty-title[b-pljwcigstd] {
    color: rgba(255, 255, 255, 0.9);
}

.ve-empty-text[b-pljwcigstd] {
    color: var(--theme-text-secondary, #64748b);
    margin: 0 0 1.5rem 0;
    font-size: 0.85rem;
}

.is-dark .ve-empty-text[b-pljwcigstd] {
    color: rgba(255, 255, 255, 0.5);
}

/* Step-flow indicators */
.ve-empty-steps[b-pljwcigstd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ve-empty-step[b-pljwcigstd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
}

.is-dark .ve-empty-step[b-pljwcigstd] {
    color: rgba(255, 255, 255, 0.5);
}

.ve-step-num[b-pljwcigstd] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.is-dark .ve-step-num[b-pljwcigstd] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    color: var(--theme-primary-ink, var(--theme-primary, #818cf8));
}

.ve-empty-step-arrow[b-pljwcigstd] {
    color: var(--theme-text-muted, #cbd5e1);
    font-size: 0.75rem;
}

.is-dark .ve-empty-step-arrow[b-pljwcigstd] {
    color: rgba(255, 255, 255, 0.2);
}

.ve-empty-step-arrow svg[b-pljwcigstd] {
    width: 1rem;
    height: 1rem;
}

.ve-empty-cta[b-pljwcigstd] {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ve-empty-cta .nts-btn[b-pljwcigstd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* /Pages/Tools/VideoEditor/VideoEditorExport.razor.rz.scp.css */

    .ve-export[b-ur750mh2lj] {
        background: var(--theme-surface, white);
        padding: 1.5rem;
        border-radius: 14px;
        border: 1px solid var(--theme-border, #e2e8f0);
        box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    }

    .is-dark .ve-export[b-ur750mh2lj] {
        background: rgba(30, 41, 59, 0.7);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .ve-export-title[b-ur750mh2lj] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--theme-text-primary, #1e293b);
        margin: 0 0 1rem 0;
    }

    .is-dark .ve-export-title[b-ur750mh2lj] {
        color: rgba(255, 255, 255, 0.95);
    }

    .ve-export-title-icon[b-ur750mh2lj] {
        width: 1.15rem;
        height: 1.15rem;
        color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    }

    /* Quality Section */
    .ve-quality-section[b-ur750mh2lj] {
        margin-bottom: 1rem;
        padding: 1rem;
        background: var(--theme-surface-secondary, #f8fafc);
        border-radius: 10px;
        border: 1px solid var(--theme-border, #e2e8f0);
    }

    .is-dark .ve-quality-section[b-ur750mh2lj] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .ve-quality-label[b-ur750mh2lj] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--theme-text-primary, #1e293b);
        margin-bottom: 0.5rem;
    }

    .is-dark .ve-quality-label[b-ur750mh2lj] {
        color: rgba(255, 255, 255, 0.9);
    }

    .ve-quality-icon[b-ur750mh2lj] {
        width: 1rem;
        height: 1rem;
    }

    .ve-quality-buttons[b-ur750mh2lj] {
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .ve-quality-btn[b-ur750mh2lj] {
        padding: 8px 16px;
        border-radius: 8px;
        border: 1px solid var(--theme-border, #e2e8f0);
        background: var(--theme-surface, white);
        color: var(--theme-text-primary, #374151);
        cursor: pointer;
        font-weight: 500;
        font-size: 0.8rem;
        transition: all 0.2s ease;
    }

    .ve-quality-btn:hover:not(:disabled)[b-ur750mh2lj] {
        border-color: var(--theme-primary, #6366f1);
    }

    .ve-quality-btn-selected[b-ur750mh2lj] {
        border-color: var(--theme-primary, #6366f1);
        background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
        color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
        font-weight: 600;
    }

    .is-dark .ve-quality-btn[b-ur750mh2lj] {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.7);
    }

    .is-dark .ve-quality-btn-selected[b-ur750mh2lj] {
        background: rgba(var(--theme-primary-rgb, 124, 58, 237), 0.15);
        border-color: var(--theme-primary, #7c3aed);
        color: var(--theme-primary-ink, var(--theme-primary, #7c3aed));
    }

    .ve-quality-btn:disabled[b-ur750mh2lj] {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .ve-quality-info[b-ur750mh2lj] {
        margin: 0.5rem 0 0 0;
        font-size: 0.72rem;
        color: var(--theme-text-secondary, #64748b);
    }

    .is-dark .ve-quality-info[b-ur750mh2lj] {
        color: rgba(255, 255, 255, 0.5);
    }

    /* Warning Banner */
    .ve-warning-banner[b-ur750mh2lj] {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.3);
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
        border-radius: 10px;
    }

    .is-dark .ve-warning-banner[b-ur750mh2lj] {
        background: rgba(245, 158, 11, 0.12);
        border-color: rgba(245, 158, 11, 0.25);
    }

    .ve-warning-icon[b-ur750mh2lj] {
        width: 1.15rem;
        height: 1.15rem;
        color: #f59e0b;
        flex-shrink: 0;
    }

    .ve-warning-banner p[b-ur750mh2lj] {
        margin: 0;
        color: var(--theme-text-secondary, #92400e);
        font-size: 0.8rem;
    }

    .is-dark .ve-warning-banner p[b-ur750mh2lj] {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Progress Section */
    .ve-progress-section[b-ur750mh2lj] {
        margin-bottom: 1rem;
        padding: 1rem;
        background: var(--theme-surface-secondary, #f8fafc);
        border-radius: 10px;
        border: 1px solid var(--theme-border, #e2e8f0);
    }

    .is-dark .ve-progress-section[b-ur750mh2lj] {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }

    .ve-progress-header[b-ur750mh2lj] {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--theme-text-primary, #1e293b);
    }

    .is-dark .ve-progress-header[b-ur750mh2lj] {
        color: rgba(255, 255, 255, 0.9);
    }

    .ve-progress-bar[b-ur750mh2lj] {
        height: 6px;
        background: var(--theme-surface-secondary, #e2e8f0);
        border-radius: 9999px;
        overflow: hidden;
    }

    .is-dark .ve-progress-bar[b-ur750mh2lj] {
        background: rgba(255, 255, 255, 0.1);
    }

    .ve-progress-fill[b-ur750mh2lj] {
        height: 100%;
        background: var(--theme-primary, #6366f1);
        border-radius: 9999px;
        transition: width 0.3s;
    }

    .ve-progress-footer[b-ur750mh2lj] {
        display: flex;
        justify-content: space-between;
        margin-top: 0.5rem;
        font-size: 0.72rem;
        color: var(--theme-text-secondary, #64748b);
    }

    .is-dark .ve-progress-footer[b-ur750mh2lj] {
        color: rgba(255, 255, 255, 0.5);
    }

    .ve-progress-footer span[b-ur750mh2lj] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .ve-time-icon[b-ur750mh2lj] {
        width: 0.875rem;
        height: 0.875rem;
    }

    /* Export Success */
    .ve-export-success[b-ur750mh2lj] {
        margin-bottom: 1rem;
        padding: 1rem;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.3);
        border-radius: 10px;
    }

    .is-dark .ve-export-success[b-ur750mh2lj] {
        background: rgba(16, 185, 129, 0.12);
        border-color: rgba(16, 185, 129, 0.25);
    }

    .ve-export-success-info[b-ur750mh2lj] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ve-export-success-title[b-ur750mh2lj] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        color: #059669;
        margin: 0 0 0.25rem 0;
        font-weight: 600;
        font-size: 0.85rem;
    }

    .is-dark .ve-export-success-title[b-ur750mh2lj] {
        color: #34d399;
    }

    .ve-check-icon[b-ur750mh2lj] {
        width: 1rem;
        height: 1rem;
    }

    .ve-export-success-size[b-ur750mh2lj] {
        color: var(--theme-text-secondary, #64748b);
        margin: 0;
        font-size: 0.8rem;
    }

    .is-dark .ve-export-success-size[b-ur750mh2lj] {
        color: rgba(255, 255, 255, 0.6);
    }

    .ve-cloud-badge[b-ur750mh2lj] {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 500;
    }

    .ve-cloud-badge svg[b-ur750mh2lj] {
        width: 0.875rem;
        height: 0.875rem;
    }

    .ve-cloud-saved[b-ur750mh2lj] {
        background: rgba(16, 185, 129, 0.12);
        color: #059669;
    }

    .is-dark .ve-cloud-saved[b-ur750mh2lj] {
        background: rgba(16, 185, 129, 0.15);
        color: #34d399;
    }

    .ve-cloud-warning[b-ur750mh2lj] {
        background: rgba(245, 158, 11, 0.1);
        color: #d97706;
    }

    .is-dark .ve-cloud-warning[b-ur750mh2lj] {
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
    }

    /* Final Video Container */
    .ve-final-video-container[b-ur750mh2lj] {
        margin-bottom: 1rem;
    }

    .ve-final-video-container video[b-ur750mh2lj] {
        width: 100%;
        max-height: 400px;
        background: #0f172a;
        border-radius: 10px;
    }

    /* Export Buttons */
    .ve-export-buttons[b-ur750mh2lj] {
        display: flex;
        gap: 0.75rem;
        flex-wrap: wrap;
    }

    .ve-btn[b-ur750mh2lj] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 10px 20px;
        border-radius: 10px;
        border: none;
        cursor: pointer;
        font-weight: 600;
        font-size: 0.85rem;
        transition: all 0.2s ease;
    }

    .ve-btn-icon[b-ur750mh2lj] {
        width: 1rem;
        height: 1rem;
    }

    .ve-btn-primary[b-ur750mh2lj] {
        background: var(--theme-primary, #6366f1);
        color: white;
    }

    .ve-btn-primary:hover:not(.ve-btn-disabled)[b-ur750mh2lj] {
        filter: brightness(1.1);
        transform: translateY(-1px);
    }

    /* VE-D-1 (2026-05): action button colors flow through theme tokens.
       Success → --theme-text-success (universal "operation complete" green)
       Danger  → --theme-text-danger (universal destructive red)
       Warning → --theme-warning (universal pending/caution amber)
       Info    → --theme-primary (theme-active primary, harmonizes per theme)
       Hover variants use color-mix to darken the base by 20% for the pressed
       state, replacing the prior hardcoded palette-2 colors. */
    .ve-btn-success[b-ur750mh2lj] {
        background: var(--theme-text-success, #10b981);
        color: var(--theme-primary-contrast, white);
    }

    .ve-btn-success:hover:not(.ve-btn-disabled)[b-ur750mh2lj] {
        background: color-mix(in srgb, var(--theme-text-success, #059669) 80%, black 20%);
        transform: translateY(-1px);
    }

    .ve-btn-danger[b-ur750mh2lj] {
        background: var(--theme-text-danger, #ef4444);
        color: var(--theme-primary-contrast, white);
    }

    .ve-btn-danger:hover:not(.ve-btn-disabled)[b-ur750mh2lj] {
        background: color-mix(in srgb, var(--theme-text-danger, #dc2626) 80%, black 20%);
    }

    .ve-btn-warning[b-ur750mh2lj] {
        background: var(--theme-warning, #f59e0b);
        color: var(--theme-primary-contrast, white);
    }

    .ve-btn-warning:hover:not(.ve-btn-disabled)[b-ur750mh2lj] {
        background: color-mix(in srgb, var(--theme-warning, #d97706) 80%, black 20%);
    }

    .ve-btn-info[b-ur750mh2lj] {
        background: var(--theme-primary, #3b82f6);
        color: var(--theme-primary-contrast, white);
    }

    .ve-btn-info:hover:not(.ve-btn-disabled)[b-ur750mh2lj] {
        background: color-mix(in srgb, var(--theme-primary, #2563eb) 80%, black 20%);
    }

    .ve-btn-secondary[b-ur750mh2lj] {
        background: var(--theme-surface-secondary, #f1f5f9);
        color: var(--theme-text-secondary, #64748b);
    }

    .ve-btn-secondary:hover:not(.ve-btn-disabled)[b-ur750mh2lj] {
        background: var(--theme-surface-hover, #e2e8f0);
        color: var(--theme-text-primary, #1e293b);
    }

    .is-dark .ve-btn-secondary[b-ur750mh2lj] {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.7);
    }

    .is-dark .ve-btn-secondary:hover:not(.ve-btn-disabled)[b-ur750mh2lj] {
        background: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.9);
    }

    .ve-btn-disabled[b-ur750mh2lj] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none !important;
    }

    .ve-btn-full[b-ur750mh2lj] {
        margin-top: 1rem;
    }

    /* Spinner */
    .ve-spinner[b-ur750mh2lj] {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: ve-spin-b-ur750mh2lj 0.8s linear infinite;
        vertical-align: middle;
    }

    @keyframes ve-spin-b-ur750mh2lj {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Backup Notice */
    .ve-backup-notice[b-ur750mh2lj] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
        padding: 1rem;
        background: rgba(16, 185, 129, 0.08);
        border: 1px solid rgba(16, 185, 129, 0.3);
        border-radius: 10px;
    }

    .is-dark .ve-backup-notice[b-ur750mh2lj] {
        background: rgba(16, 185, 129, 0.12);
        border-color: rgba(16, 185, 129, 0.25);
    }

    .ve-backup-icon[b-ur750mh2lj] {
        width: 1.15rem;
        height: 1.15rem;
        color: #059669;
        flex-shrink: 0;
    }

    .is-dark .ve-backup-icon[b-ur750mh2lj] {
        color: #34d399;
    }

    .ve-backup-notice p[b-ur750mh2lj] {
        color: #059669;
        margin: 0;
        font-size: 0.8rem;
    }

    .is-dark .ve-backup-notice p[b-ur750mh2lj] {
        color: #34d399;
    }

/* /Pages/Tools/VideoEditor/VideoEditorHeader.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR HEADER STYLES
   Uses shared list-page-header from utilities.css
   ============================================ */

/* Breadcrumb */
.ve-breadcrumb[b-q20s24dywr] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.ve-breadcrumb-link[b-q20s24dywr] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
}

.ve-breadcrumb-link:hover[b-q20s24dywr] {
    opacity: 0.8;
    text-decoration: underline;
}

.ve-breadcrumb-sep[b-q20s24dywr] {
    color: var(--theme-text-muted, #94a3b8);
    font-weight: 400;
    user-select: none;
}

.ve-breadcrumb-current[b-q20s24dywr] {
    color: var(--theme-text-secondary, #64748b);
    font-weight: 500;
}

.ve-breadcrumb-project[b-q20s24dywr] {
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-dark .ve-breadcrumb-current[b-q20s24dywr] {
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .ve-breadcrumb-project[b-q20s24dywr] {
    color: rgba(255, 255, 255, 0.85);
}

.is-dark .ve-breadcrumb-sep[b-q20s24dywr] {
    color: rgba(255, 255, 255, 0.3);
}

.ve-icon-color[b-q20s24dywr] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ve-project-label[b-q20s24dywr] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .ve-project-label[b-q20s24dywr] {
    color: rgba(255, 255, 255, 0.85);
}
/* /Pages/Tools/VideoEditor/VideoEditorMediaPicker.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR MEDIA PICKER STYLES
   ============================================ */

.ve-media-picker[b-3a4zntlmwx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* --- Toolbar: search + filters --- */
.ve-picker-toolbar[b-3a4zntlmwx] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.ve-picker-search[b-3a4zntlmwx] {
    flex: 1;
    min-width: 180px;
}

.ve-picker-filters[b-3a4zntlmwx] {
    display: flex;
    gap: 0.25rem;
}

/* --- Loading --- */
.ve-picker-loading[b-3a4zntlmwx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.85rem;
}

.is-dark .ve-picker-loading[b-3a4zntlmwx] {
    color: rgba(255, 255, 255, 0.5);
}

/* --- Empty --- */
.ve-picker-empty[b-3a4zntlmwx] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--theme-text-secondary, #64748b);
    font-size: 0.9rem;
}

.ve-picker-empty-hint[b-3a4zntlmwx] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #94a3b8);
    margin-top: 0.25rem;
}

.is-dark .ve-picker-empty[b-3a4zntlmwx] {
    color: rgba(255, 255, 255, 0.5);
}

.is-dark .ve-picker-empty-hint[b-3a4zntlmwx] {
    color: rgba(255, 255, 255, 0.3);
}

/* --- Asset grid --- */
.ve-picker-grid[b-3a4zntlmwx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 50vh;
    padding: 4px;
}

/* --- Asset card --- */
.ve-picker-card[b-3a4zntlmwx] {
    border-radius: 10px;
    border: 2px solid var(--theme-border, #e2e8f0);
    background: var(--theme-surface, white);
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.ve-picker-card:hover[b-3a4zntlmwx] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ve-picker-card-selected[b-3a4zntlmwx] {
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 1px var(--theme-primary, #6366f1);
}

.is-dark .ve-picker-card[b-3a4zntlmwx] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .ve-picker-card:hover[b-3a4zntlmwx] {
    border-color: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.is-dark .ve-picker-card-selected[b-3a4zntlmwx] {
    border-color: var(--theme-primary, #818cf8);
    box-shadow: 0 0 0 1px var(--theme-primary, #818cf8);
}

/* --- Thumbnail area --- */
.ve-picker-thumb[b-3a4zntlmwx] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--theme-surface-secondary, #f1f5f9);
}

.is-dark .ve-picker-thumb[b-3a4zntlmwx] {
    background: rgba(255, 255, 255, 0.05);
}

.ve-picker-thumb img[b-3a4zntlmwx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ve-picker-video-thumb[b-3a4zntlmwx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    background: #0f172a;
}

.ve-picker-no-thumb[b-3a4zntlmwx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-text-muted, #94a3b8);
}

.ve-picker-no-thumb svg[b-3a4zntlmwx] {
    width: 2rem;
    height: 2rem;
}

/* --- Expired asset placeholder --- */
.ve-picker-expired[b-3a4zntlmwx] {
    flex-direction: column;
    gap: 0.35rem;
    opacity: 0.6;
    color: var(--theme-text-muted, #94a3b8);
}

.ve-picker-expired svg[b-3a4zntlmwx] {
    width: 1.75rem;
    height: 1.75rem;
}

.ve-expired-label[b-3a4zntlmwx] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--theme-text-muted, #94a3b8);
}

.is-dark .ve-picker-expired[b-3a4zntlmwx] {
    color: rgba(255, 255, 255, 0.3);
}

.is-dark .ve-expired-label[b-3a4zntlmwx] {
    color: rgba(255, 255, 255, 0.3);
}

/* --- Selection check --- */
.ve-picker-check[b-3a4zntlmwx] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--theme-primary, #6366f1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.ve-picker-check svg[b-3a4zntlmwx] {
    width: 14px;
    height: 14px;
}

/* --- Type badge --- */
.ve-picker-type-badge[b-3a4zntlmwx] {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* --- Hover info overlay --- */
.ve-picker-hover-info[b-3a4zntlmwx] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 3;
    text-align: center;
}

.ve-picker-card:hover .ve-picker-hover-info[b-3a4zntlmwx] {
    opacity: 1;
}

.ve-hover-name[b-3a4zntlmwx] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.ve-hover-meta[b-3a4zntlmwx] {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.ve-hover-desc[b-3a4zntlmwx] {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* --- Card info row --- */
.ve-picker-info[b-3a4zntlmwx] {
    padding: 6px 8px;
}

.ve-picker-name[b-3a4zntlmwx] {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.is-dark .ve-picker-name[b-3a4zntlmwx] {
    color: rgba(255, 255, 255, 0.85);
}

/* --- Footer with selection summary --- */
.ve-picker-footer[b-3a4zntlmwx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--theme-border, #e2e8f0);
}

.is-dark .ve-picker-footer[b-3a4zntlmwx] {
    border-color: rgba(255, 255, 255, 0.1);
}

.ve-picker-count[b-3a4zntlmwx] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}
/* /Pages/Tools/VideoEditor/VideoEditorPreview.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR PREVIEW STYLES
   ============================================ */

.ve-preview[b-vyfoxceolc] {
    background: var(--theme-surface, white);
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);

    /* VE-V-7 (2026-05-11): Upgraded shadow from a flat 12px card-on-surface
       depth to a layered "floating panel" elevation. Because .ve-preview is
       `position: sticky` and pins to the top of the viewport while the
       timeline scrolls underneath, the previous shadow was so subtle the pin
       read as accidental — users couldn't tell whether the preview was
       intentionally floating or just happened to be there. The new shadow
       (close + far + ambient) is what other floating UI in the app uses
       (dialogs, dropdowns) so the pinned state reads as deliberate.
       CSS has no `:stuck` selector, so we apply the elevation always —
       harmless when the preview is at the top of the page, and correct
       once it pins on scroll. */
    box-shadow:
        0 2px 4px var(--theme-shadow-color, rgba(15, 23, 42, 0.04)),
        0 8px 20px var(--theme-shadow-color, rgba(15, 23, 42, 0.06)),
        0 0 0 1px var(--theme-border, rgba(15, 23, 42, 0.04));

    position: sticky;
    top: 1rem;
    align-self: start;
}

.is-dark .ve-preview[b-vyfoxceolc] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
    /* Dark-theme version of the layered floating shadow — close shadow uses
       a deeper alpha because the dark surface blends into the page bg. */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ve-preview-title[b-vyfoxceolc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0 0 0.75rem 0;
}

.is-dark .ve-preview-title[b-vyfoxceolc] {
    color: rgba(255, 255, 255, 0.95);
}

.ve-preview-title-icon[b-vyfoxceolc] {
    width: 1rem;
    height: 1rem;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.ve-preview-warning[b-vyfoxceolc] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 10px;
}

.is-dark .ve-preview-warning[b-vyfoxceolc] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
}

.ve-warning-icon[b-vyfoxceolc] {
    width: 1rem;
    height: 1rem;
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 1px;
}

.ve-preview-warning p[b-vyfoxceolc] {
    margin: 0;
    color: var(--theme-text-secondary, #92400e);
    font-size: 0.75rem;
}

.is-dark .ve-preview-warning p[b-vyfoxceolc] {
    color: rgba(255, 255, 255, 0.7);
}

.ve-preview-video-container[b-vyfoxceolc] {
    margin-bottom: 0.75rem;
}

.ve-preview-video-container video[b-vyfoxceolc] {
    width: 100%;
    max-height: 250px;
    background: #0f172a;
    border-radius: 10px;
}

/* VE-V-10 (2026-05-12): image-clip preview. Mirrors the video container
   sizing so a clip-type swap (video → image → video) doesn't reflow the
   layout. object-fit:contain matches the export pipeline's letterbox
   behavior so the preview reads as truthful. */
.ve-preview-video-container .ve-preview-image[b-vyfoxceolc] {
    width: 100%;
    max-height: 250px;
    background: #0f172a;
    border-radius: 10px;
    object-fit: contain;
    display: block;
}

.ve-preview-controls-grid[b-vyfoxceolc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ve-preview-input-group[b-vyfoxceolc] {
    display: flex;
    flex-direction: column;
}

.ve-preview-input-group label[b-vyfoxceolc] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.is-dark .ve-preview-input-group label[b-vyfoxceolc] {
    color: rgba(255, 255, 255, 0.5);
}

.ve-preview-input-group input[b-vyfoxceolc] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--theme-surface-secondary, #f8fafc);
    color: var(--theme-text-primary, #1e293b);
    transition: all 0.2s ease;
}

.ve-preview-input-group input:focus[b-vyfoxceolc] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .ve-preview-input-group input[b-vyfoxceolc] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

.ve-preview-buttons[b-vyfoxceolc] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ve-btn-sm[b-vyfoxceolc] {
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.ve-btn-primary[b-vyfoxceolc] {
    background: var(--theme-primary, #6366f1);
    color: white;
}

.ve-btn-primary:hover[b-vyfoxceolc] {
    filter: brightness(1.1);
}

.ve-btn-warning[b-vyfoxceolc] {
    background: #f59e0b;
    color: white;
}

.ve-btn-warning:hover[b-vyfoxceolc] {
    background: #d97706;
}

.ve-btn-secondary[b-vyfoxceolc] {
    background: var(--theme-surface-secondary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
}

.ve-btn-secondary:hover[b-vyfoxceolc] {
    background: var(--theme-surface-hover, #e2e8f0);
    color: var(--theme-text-primary, #1e293b);
}

.is-dark .ve-btn-secondary[b-vyfoxceolc] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .ve-btn-secondary:hover[b-vyfoxceolc] {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.ve-btn-danger[b-vyfoxceolc] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.ve-btn-danger:hover[b-vyfoxceolc] {
    background: #ef4444;
    color: white;
}

.is-dark .ve-btn-danger[b-vyfoxceolc] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

.is-dark .ve-btn-danger:hover[b-vyfoxceolc] {
    background: #ef4444;
    color: white;
}

.ve-preview-empty[b-vyfoxceolc] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--theme-text-secondary, #94a3b8);
}

.ve-preview-empty-icon[b-vyfoxceolc] {
    width: 3rem;
    height: 3rem;
    color: var(--theme-text-muted, #cbd5e1);
    margin-bottom: 0.75rem;
}

.is-dark .ve-preview-empty-icon[b-vyfoxceolc] {
    color: rgba(255, 255, 255, 0.2);
}

.ve-preview-empty p[b-vyfoxceolc] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--theme-text-muted, #94a3b8);
}

.is-dark .ve-preview-empty p[b-vyfoxceolc] {
    color: rgba(255, 255, 255, 0.4);
}
/* /Pages/Tools/VideoEditor/VideoEditorSaveDialog.razor.rz.scp.css */
/* --- Info banner --- */

.ve-save-info-banner[b-xrhi4r58yz] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: var(--theme-bg-info, rgba(var(--theme-primary-rgb), 0.08));
    border-left: 4px solid var(--theme-primary);
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

.ve-info-icon[b-xrhi4r58yz] {
    width: 1rem;
    height: 1rem;
    color: var(--theme-primary-ink, var(--theme-primary));
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.ve-save-info-banner p[b-xrhi4r58yz] {
    margin: 0;
    color: var(--theme-text-info, var(--theme-primary));
    font-size: 0.875rem;
}

/* --- Form fields --- */

.ve-save-field[b-xrhi4r58yz] {
    margin-bottom: 1rem;
}

.ve-save-label[b-xrhi4r58yz] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    margin-bottom: 4px;
}

.ve-save-input[b-xrhi4r58yz],
.ve-save-textarea[b-xrhi4r58yz] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.ve-save-input:focus[b-xrhi4r58yz],
.ve-save-textarea:focus[b-xrhi4r58yz] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.ve-save-textarea[b-xrhi4r58yz] {
    resize: vertical;
    min-height: 4rem;
}

/* --- Checkbox --- */

.ve-save-checkbox-label[b-xrhi4r58yz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.ve-save-checkbox[b-xrhi4r58yz] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--theme-primary);
}

/* --- Upload progress --- */

.ve-upload-progress[b-xrhi4r58yz] {
    margin-bottom: 1rem;
}

.ve-progress-header[b-xrhi4r58yz] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

.ve-progress-bar[b-xrhi4r58yz] {
    height: 0.375rem;
    background: var(--theme-border);
    border-radius: 9999px;
    overflow: hidden;
}

.ve-progress-fill[b-xrhi4r58yz] {
    height: 100%;
    background: var(--theme-primary);
    transition: width 0.3s;
}

.ve-btn-secondary[b-xrhi4r58yz] {
    background-color: #6b7280;
    color: white;
}

.ve-btn-secondary:hover:not(:disabled)[b-xrhi4r58yz] {
    background-color: #4b5563;
}

.ve-btn-disabled[b-xrhi4r58yz] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ve-spinner[b-xrhi4r58yz] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: ve-spin-b-xrhi4r58yz 0.8s linear infinite;
    vertical-align: middle;
}

@keyframes ve-spin-b-xrhi4r58yz {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Pages/Tools/VideoEditor/VideoEditorStatusBanner.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR STATUS BANNER STYLES
   ============================================ */

.ve-status-banner[b-xv8xo2cj8z] {
    margin-bottom: 1rem;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ve-status-info[b-xv8xo2cj8z] {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #2563eb;
}

.is-dark .ve-status-info[b-xv8xo2cj8z] {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.ve-status-error[b-xv8xo2cj8z] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

.is-dark .ve-status-error[b-xv8xo2cj8z] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.ve-status-message[b-xv8xo2cj8z] {
    flex-grow: 1;
    font-size: 0.85rem;
    font-weight: 500;
}

.ve-status-dismiss[b-xv8xo2cj8z] {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ve-status-dismiss:hover[b-xv8xo2cj8z] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06);
}

.is-dark .ve-status-dismiss:hover[b-xv8xo2cj8z] {
    background: rgba(255, 255, 255, 0.1);
}

.ve-status-dismiss svg[b-xv8xo2cj8z] {
    width: 1rem;
    height: 1rem;
}

.ve-status-info .ve-status-dismiss svg[b-xv8xo2cj8z] {
    fill: currentColor;
}

.ve-status-error .ve-status-dismiss svg[b-xv8xo2cj8z] {
    fill: currentColor;
}

.ve-spinner[b-xv8xo2cj8z] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #4f46e5;
    border-radius: 50%;
    animation: ve-spin-b-xv8xo2cj8z 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes ve-spin-b-xv8xo2cj8z {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Pages/Tools/VideoEditor/VideoEditorTierBanner.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR TIER BANNER STYLES
   ============================================ */

.ve-tier-banner[b-lm4syj2uec] {
    margin-bottom: 1rem;
    padding: 10px 16px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.3);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.is-dark .ve-tier-banner[b-lm4syj2uec] {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
}

.ve-tier-icon[b-lm4syj2uec] {
    width: 1.15rem;
    height: 1.15rem;
    color: #f59e0b;
    flex-shrink: 0;
}

.ve-tier-text[b-lm4syj2uec] {
    color: #b45309;
    flex-grow: 1;
    font-size: 0.8rem;
}

.is-dark .ve-tier-text[b-lm4syj2uec] {
    color: rgba(255, 255, 255, 0.7);
}

.ve-tier-link[b-lm4syj2uec] {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.ve-tier-link:hover[b-lm4syj2uec] {
    opacity: 0.8;
}
/* /Pages/Tools/VideoEditor/VideoEditorTimeline.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR TIMELINE STYLES
   ============================================ */

.ve-timeline[b-hpqrrgkhbi] {
    background: var(--theme-surface, white);
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));

    /* VE-V-6 (2026-05-11): Removed `max-height: 500px; overflow-y: auto`. The
       internal scroll created a classic scroll trap — the page would scroll
       until the cursor entered the timeline, at which point only the timeline
       scrolled. With the sticky preview pane keeping controls in view, the
       page can scroll naturally and the timeline grows with its content.
       The ve-timeline-header below retains its `position: sticky` rule; with
       no internal scroll container, it now sticks to the page scroll, which
       is the desired behavior on long projects. */
}

.is-dark .ve-timeline[b-hpqrrgkhbi] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.ve-timeline-header[b-hpqrrgkhbi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    position: sticky;
    top: -1.25rem;
    background: var(--theme-surface, white);
    padding: 1.25rem 0 0.5rem 0;
    margin-top: -1.25rem;
    z-index: 10;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.is-dark .ve-timeline-header[b-hpqrrgkhbi] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.ve-timeline-title[b-hpqrrgkhbi] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.is-dark .ve-timeline-title[b-hpqrrgkhbi] {
    color: rgba(255, 255, 255, 0.95);
}

.ve-timeline-duration[b-hpqrrgkhbi] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
    background: var(--theme-surface-secondary, #f1f5f9);
    padding: 3px 10px;
    border-radius: 6px;
}

.is-dark .ve-timeline-duration[b-hpqrrgkhbi] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.ve-timeline-clips[b-hpqrrgkhbi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ve-clip[b-hpqrrgkhbi] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ve-clip:hover[b-hpqrrgkhbi] {
    border-color: var(--theme-primary, #6366f1);
    background: var(--theme-surface, white);
}

.ve-clip-selected[b-hpqrrgkhbi] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.06);
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 1px rgba(var(--theme-primary-rgb, 99, 102, 241), 0.15);
}

.is-dark .ve-clip[b-hpqrrgkhbi] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .ve-clip:hover[b-hpqrrgkhbi] {
    border-color: var(--theme-primary, #7c3aed);
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .ve-clip-selected[b-hpqrrgkhbi] {
    background: rgba(var(--theme-primary-rgb, 124, 58, 237), 0.12);
    border-color: var(--theme-primary, #7c3aed);
}

.ve-clip-order-controls[b-hpqrrgkhbi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

.ve-clip-order-btn[b-hpqrrgkhbi] {
    padding: 2px;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.ve-clip-order-btn:hover:not(:disabled)[b-hpqrrgkhbi] {
    opacity: 1;
    background: var(--theme-surface-secondary, #f1f5f9);
}

.ve-clip-order-btn:disabled[b-hpqrrgkhbi] {
    opacity: 0.2;
    cursor: not-allowed;
}

.ve-clip-order-btn svg[b-hpqrrgkhbi] {
    width: 0.875rem;
    height: 0.875rem;
    fill: var(--theme-text-secondary, #64748b);
}

.is-dark .ve-clip-order-btn svg[b-hpqrrgkhbi] {
    fill: rgba(255, 255, 255, 0.5);
}

.is-dark .ve-clip-order-btn:hover:not(:disabled)[b-hpqrrgkhbi] {
    background: rgba(255, 255, 255, 0.1);
}

.ve-clip-order-num[b-hpqrrgkhbi] {
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
    font-size: 0.72rem;
}

.ve-clip-thumbnail[b-hpqrrgkhbi] {
    width: 80px;
    height: 48px;
    background: #0f172a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.ve-clip-thumbnail img[b-hpqrrgkhbi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ve-clip-thumbnail svg[b-hpqrrgkhbi] {
    width: 1.25rem;
    height: 1.25rem;
    fill: #475569;
}

.ve-clip-info[b-hpqrrgkhbi] {
    flex-grow: 1;
    min-width: 0;
}

.ve-clip-name[b-hpqrrgkhbi] {
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.is-dark .ve-clip-name[b-hpqrrgkhbi] {
    color: rgba(255, 255, 255, 0.95);
}

.ve-clip-meta[b-hpqrrgkhbi] {
    font-size: 0.72rem;
    color: var(--theme-text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 2px;
}

.is-dark .ve-clip-meta[b-hpqrrgkhbi] {
    color: rgba(255, 255, 255, 0.5);
}

.ve-clip-trimmed[b-hpqrrgkhbi] {
    color: #f59e0b;
}

.ve-clip-backed-up[b-hpqrrgkhbi] {
    color: #10b981;
    display: inline-flex;
}

.ve-clip-backed-up svg[b-hpqrrgkhbi] {
    width: 0.875rem;
    height: 0.875rem;
}

.ve-clip-remove-btn[b-hpqrrgkhbi] {
    padding: 6px;
    background: transparent;
    color: var(--theme-text-secondary, #94a3b8);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
}

.ve-clip:hover .ve-clip-remove-btn[b-hpqrrgkhbi] {
    opacity: 1;
}

.ve-clip-remove-btn:hover[b-hpqrrgkhbi] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.is-dark .ve-clip-remove-btn:hover[b-hpqrrgkhbi] {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.ve-clip-remove-btn svg[b-hpqrrgkhbi] {
    width: 0.875rem;
    height: 0.875rem;
    fill: currentColor;
}

/* Transition Row */
.ve-transition-row[b-hpqrrgkhbi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    margin-left: 1.5rem;
}

.ve-transition-line[b-hpqrrgkhbi] {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--theme-border, #d1d5db), transparent);
}

.ve-transition-selector[b-hpqrrgkhbi] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--theme-surface-secondary, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 8px;
    padding: 4px 8px;
}

.ve-transition-active[b-hpqrrgkhbi] {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.3);
}

.is-dark .ve-transition-selector[b-hpqrrgkhbi] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .ve-transition-active[b-hpqrrgkhbi] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
}

.ve-transition-icon[b-hpqrrgkhbi] {
    width: 0.75rem;
    height: 0.75rem;
    fill: var(--theme-text-secondary, #64748b);
}

.ve-transition-selector select[b-hpqrrgkhbi] {
    font-size: 0.7rem;
    padding: 2px 4px;
    border: none;
    background: transparent;
    color: var(--theme-text-primary, #374151);
    cursor: pointer;
    outline: none;
}

.is-dark .ve-transition-selector select[b-hpqrrgkhbi] {
    color: rgba(255, 255, 255, 0.8);
}

.ve-transition-active select[b-hpqrrgkhbi] {
    color: #059669;
}

.ve-transition-selector input[type="number"][b-hpqrrgkhbi] {
    width: 3rem;
    font-size: 0.7rem;
    padding: 2px;
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 4px;
    text-align: center;
    background: var(--theme-surface, white);
    color: var(--theme-text-primary, #374151);
}

.is-dark .ve-transition-selector input[type="number"][b-hpqrrgkhbi] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.ve-transition-unit[b-hpqrrgkhbi] {
    font-size: 0.65rem;
    color: var(--theme-text-secondary, #64748b);
}
/* /Pages/Tools/VideoEditorPage.razor.rz.scp.css */
/* ============================================
   VIDEO EDITOR PAGE STYLES
   Uses shared list-page classes from utilities.css.
   Theme backgrounds defined in themes.css.
   ============================================ */

/* Loading container */
.loading-container[b-xr0hvnh18f] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner[b-xr0hvnh18f] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--theme-primary-rgb, 99, 102, 241), 0.2);
    border-top-color: var(--theme-primary, #6366f1);
    border-radius: 50%;
    animation: spin-b-xr0hvnh18f 0.8s linear infinite;
}

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

/* Two-column grid layout for Timeline + Preview */
.video-editor-grid[b-xr0hvnh18f] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
    .video-editor-grid[b-xr0hvnh18f] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/TourDemo.razor.rz.scp.css */
/* TourDemo.razor.css - Tour management page */

.tour-demo-page[b-3o0pqythrb] {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    min-height: calc(100vh - 56px);
}

.demo-header[b-3o0pqythrb] {
    text-align: center;
    margin-bottom: 32px;
}

.demo-header h1[b-3o0pqythrb] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.demo-subtitle[b-3o0pqythrb] {
    color: #6b7280;
    font-size: 1.1rem;
}

/* Tour Selection */
.tour-selection[b-3o0pqythrb] {
    margin-bottom: 32px;
}

.tour-selection h3[b-3o0pqythrb] {
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tour-cards[b-3o0pqythrb] {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tour-card[b-3o0pqythrb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 140px;
}

.tour-card:hover[b-3o0pqythrb] {
    border-color: #8b5cf6;
    transform: translateY(-2px);
}

.tour-card.selected[b-3o0pqythrb] {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.tour-card-icon[b-3o0pqythrb] {
    font-size: 2rem;
    margin-bottom: 8px;
}

.tour-card-name[b-3o0pqythrb] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1f2937;
    margin-bottom: 4px;
}

.tour-card-desc[b-3o0pqythrb] {
    font-size: 0.8rem;
    color: #6b7280;
}

.demo-controls[b-3o0pqythrb] {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.demo-btn[b-3o0pqythrb] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.demo-btn:disabled[b-3o0pqythrb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.demo-btn-primary[b-3o0pqythrb] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.demo-btn-primary:hover:not(:disabled)[b-3o0pqythrb] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.demo-btn-secondary[b-3o0pqythrb] {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.demo-btn-secondary:hover:not(:disabled)[b-3o0pqythrb] {
    background: #e5e7eb;
}

.demo-content[b-3o0pqythrb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.demo-card[b-3o0pqythrb] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e5e7eb;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.demo-card:hover[b-3o0pqythrb] {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.demo-card-icon[b-3o0pqythrb] {
    font-size: 3rem;
    margin-bottom: 16px;
}

.demo-card h3[b-3o0pqythrb] {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1f2937;
}

.demo-card p[b-3o0pqythrb] {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.5;
}

.demo-status[b-3o0pqythrb] {
    text-align: center;
}

.status-badge[b-3o0pqythrb] {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.status-badge.active[b-3o0pqythrb] {
    background: #dbeafe;
    color: #1d4ed8;
}

.status-badge.completed[b-3o0pqythrb] {
    background: #dcfce7;
    color: #15803d;
}


.status-badge.cancelled[b-3o0pqythrb] {
    background: #fee2e2;
    color: #b91c1c;
}

/* Dark theme overrides */
.theme-space .tour-card[b-3o0pqythrb],
.theme-winter .tour-card[b-3o0pqythrb],
.theme-nature .tour-card[b-3o0pqythrb],
.theme-ocean .tour-card[b-3o0pqythrb],
.theme-mystic .tour-card[b-3o0pqythrb],
.theme-tron .tour-card[b-3o0pqythrb] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
}

.theme-space .tour-card.selected[b-3o0pqythrb],
.theme-winter .tour-card.selected[b-3o0pqythrb],
.theme-nature .tour-card.selected[b-3o0pqythrb],
.theme-ocean .tour-card.selected[b-3o0pqythrb],
.theme-mystic .tour-card.selected[b-3o0pqythrb],
.theme-tron .tour-card.selected[b-3o0pqythrb] {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.15);
}

.theme-space .tour-card-name[b-3o0pqythrb],
.theme-winter .tour-card-name[b-3o0pqythrb],
.theme-nature .tour-card-name[b-3o0pqythrb],
.theme-ocean .tour-card-name[b-3o0pqythrb],
.theme-mystic .tour-card-name[b-3o0pqythrb],
.theme-tron .tour-card-name[b-3o0pqythrb] {
    color: white;
}

.theme-space .tour-card-desc[b-3o0pqythrb],
.theme-winter .tour-card-desc[b-3o0pqythrb],
.theme-nature .tour-card-desc[b-3o0pqythrb],
.theme-ocean .tour-card-desc[b-3o0pqythrb],
.theme-mystic .tour-card-desc[b-3o0pqythrb],
.theme-tron .tour-card-desc[b-3o0pqythrb] {
    color: rgba(255, 255, 255, 0.6);
}

.theme-space .tour-selection h3[b-3o0pqythrb],
.theme-winter .tour-selection h3[b-3o0pqythrb],
.theme-nature .tour-selection h3[b-3o0pqythrb],
.theme-ocean .tour-selection h3[b-3o0pqythrb],
.theme-mystic .tour-selection h3[b-3o0pqythrb],
.theme-tron .tour-selection h3[b-3o0pqythrb] {
    color: rgba(255, 255, 255, 0.6);
}

.theme-space .demo-card[b-3o0pqythrb],
.theme-winter .demo-card[b-3o0pqythrb],
.theme-nature .demo-card[b-3o0pqythrb],
.theme-ocean .demo-card[b-3o0pqythrb],
.theme-mystic .demo-card[b-3o0pqythrb],
.theme-tron .demo-card[b-3o0pqythrb] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-space .demo-card h3[b-3o0pqythrb],
.theme-winter .demo-card h3[b-3o0pqythrb],
.theme-nature .demo-card h3[b-3o0pqythrb],
.theme-ocean .demo-card h3[b-3o0pqythrb],
.theme-mystic .demo-card h3[b-3o0pqythrb],
.theme-tron .demo-card h3[b-3o0pqythrb] {
    color: white;
}

.theme-space .demo-card p[b-3o0pqythrb],
.theme-winter .demo-card p[b-3o0pqythrb],
.theme-nature .demo-card p[b-3o0pqythrb],
.theme-ocean .demo-card p[b-3o0pqythrb],
.theme-mystic .demo-card p[b-3o0pqythrb],
.theme-tron .demo-card p[b-3o0pqythrb] {
    color: rgba(255, 255, 255, 0.7);
}

.theme-space .demo-subtitle[b-3o0pqythrb],
.theme-winter .demo-subtitle[b-3o0pqythrb],
.theme-nature .demo-subtitle[b-3o0pqythrb],
.theme-ocean .demo-subtitle[b-3o0pqythrb],
.theme-mystic .demo-subtitle[b-3o0pqythrb],
.theme-tron .demo-subtitle[b-3o0pqythrb] {
    color: rgba(255, 255, 255, 0.6);
}

.theme-space .demo-btn-secondary[b-3o0pqythrb],
.theme-winter .demo-btn-secondary[b-3o0pqythrb],
.theme-nature .demo-btn-secondary[b-3o0pqythrb],
.theme-ocean .demo-btn-secondary[b-3o0pqythrb],
.theme-mystic .demo-btn-secondary[b-3o0pqythrb],
.theme-tron .demo-btn-secondary[b-3o0pqythrb] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Tron specific */
.theme-tron .demo-header h1[b-3o0pqythrb] {
    background: linear-gradient(135deg, #00ffff 0%, #00cccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

.theme-tron .demo-btn-primary[b-3o0pqythrb] {
    background: #00ffff;
    color: #0a1628;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.theme-tron .tour-card.selected[b-3o0pqythrb] {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.theme-tron .demo-card[b-3o0pqythrb] {
    border: 1px solid rgba(0, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}
/* /Pages/Upgrade/ChoosePlan.razor.rz.scp.css */
/* ============================================
   UPGRADE / CHOOSE PLAN PAGE
   Uses CSS theme variables for all 8 themes
   3-column: Starter | Growth (featured) | Scale
   ============================================ */

.upgrade-page[b-lknaxkqwlw] {
    min-height: calc(100vh - 56px);
    padding: 32px 24px;
    background: var(--theme-page-bg);
}

.upgrade-container[b-lknaxkqwlw] {
    max-width: 1200px;
    margin: 0 auto;
}

/* Back Link */
.back-link[b-lknaxkqwlw] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--theme-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 16px;
    transition: color 0.2s ease;
}

.back-link:hover[b-lknaxkqwlw] {
    color: var(--theme-text-primary);
}

/* Plans Grid - 3 columns on desktop */
.plans-grid[b-lknaxkqwlw] {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 24px;
    align-items: start;
}

/* Hero Section - fixed branded gradient (marketing, not data) */
.upgrade-hero[b-lknaxkqwlw] {
    background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #4c1d95 100%);
    border-radius: 28px;
    padding: 50px 40px;
    margin-bottom: 32px;
    color: white;
    text-align: center;
    box-shadow: 0 20px 60px var(--theme-shadow-color);
    position: relative;
    overflow: hidden;
}

.upgrade-hero[b-lknaxkqwlw]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.upgrade-hero-content[b-lknaxkqwlw] {
    position: relative;
    z-index: 1;
}

.upgrade-hero h1[b-lknaxkqwlw] {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 12px 0;
}

.upgrade-hero h1 .highlight[b-lknaxkqwlw] {
    color: #fef3c7;
}

.upgrade-hero p[b-lknaxkqwlw] {
    font-size: 1.1rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.badge-highlight[b-lknaxkqwlw] {
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 20px;
    border-radius: 25px;
    display: inline-block;
    margin-bottom: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== Billing Toggle ===== */
.billing-toggle-wrapper[b-lknaxkqwlw] {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}

.billing-toggle[b-lknaxkqwlw] {
    display: inline-flex;
    background: var(--theme-surface-secondary);
    border-radius: 14px;
    padding: 4px;
    border: 1px solid var(--theme-border);
    gap: 4px;
}

.billing-option[b-lknaxkqwlw] {
    padding: 10px 24px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--theme-text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.billing-option.active[b-lknaxkqwlw] {
    background: var(--theme-primary);
    color: var(--theme-btn-text);
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.3);
}

.save-badge[b-lknaxkqwlw] {
    background: #fbbf24;
    color: #78350f;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== Plan Card (shared) ===== */
.plan-card[b-lknaxkqwlw] {
    background: var(--theme-surface);
    border-radius: 24px;
    padding: 36px 28px;
    box-shadow: 0 4px 24px var(--theme-shadow-color);
    border: 2px solid var(--theme-border);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover[b-lknaxkqwlw] {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px var(--theme-shadow-color);
}

/* Starter Card - muted, "you are here" */
.starter-card[b-lknaxkqwlw] {
    opacity: 0.85;
    border-style: dashed;
}

.starter-card:hover[b-lknaxkqwlw] {
    opacity: 1;
}

.current-badge[b-lknaxkqwlw] {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-surface);
    color: var(--theme-text-secondary);
    padding: 6px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    border: 2px solid var(--theme-border);
}

.current-plan-indicator[b-lknaxkqwlw] {
    text-align: center;
    padding: 14px;
    border-radius: 12px;
    background: rgba(var(--theme-primary-rgb), 0.08);
    color: var(--theme-text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: auto;
}

/* Growth Card - featured, highlighted */
.growth-card[b-lknaxkqwlw] {
    border-color: var(--theme-primary);
    border-width: 3px;
    box-shadow: 0 8px 40px rgba(var(--theme-primary-rgb), 0.15);
}

.popular-badge[b-lknaxkqwlw] {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-primary);
    color: var(--theme-btn-text);
    padding: 7px 22px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Scale Card */
.scale-card[b-lknaxkqwlw] {
    border-color: var(--theme-accent);
}

.power-badge[b-lknaxkqwlw] {
    background: var(--theme-accent) !important;
}

.plan-title[b-lknaxkqwlw] {
    color: var(--theme-text-primary);
    margin: 0 0 4px 0;
    font-size: 1.3rem;
}

.plan-tagline[b-lknaxkqwlw] {
    color: var(--theme-text-secondary);
    margin: 0 0 20px 0;
    font-size: 0.95rem;
}

/* ===== Price Display ===== */
.plan-price[b-lknaxkqwlw] {
    text-align: center;
    margin-bottom: 24px;
}

.plan-price .amount[b-lknaxkqwlw] {
    font-size: 3.2rem;
    font-weight: 800;
    color: var(--theme-primary-ink, var(--theme-primary));
    display: inline;
    line-height: 1;
}

.plan-price .period[b-lknaxkqwlw] {
    font-size: 1.1rem;
    color: var(--theme-text-muted);
}

.annual-note[b-lknaxkqwlw] {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    margin-top: 4px;
}

.credits-badge[b-lknaxkqwlw] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.85rem;
    margin-top: 10px;
    border: 1px solid #fcd34d;
}

.power-credits[b-lknaxkqwlw] {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
    border-color: #f59e0b;
}

/* ===== Feature List ===== */
.feature-list[b-lknaxkqwlw] {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

.feature-list li[b-lknaxkqwlw] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.feature-list li:last-child[b-lknaxkqwlw] {
    border-bottom: none;
}

.feature-list li span[b-lknaxkqwlw] {
    flex: 1;
}

.highlight-feature[b-lknaxkqwlw] {
    background: rgba(var(--theme-accent-rgb), 0.06);
    margin: 0 -12px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 8px;
}

.check-icon[b-lknaxkqwlw] {
    width: 18px;
    height: 18px;
    color: var(--theme-text-success);
    flex-shrink: 0;
    margin-top: 3px;
}

/* ===== CTA Button ===== */
.cta-button[b-lknaxkqwlw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: var(--theme-primary);
    color: var(--theme-btn-text);
    padding: 16px 32px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(var(--theme-primary-rgb), 0.35);
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.cta-button:hover[b-lknaxkqwlw] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--theme-primary-rgb), 0.45);
    background: var(--theme-primary-hover);
    color: var(--theme-btn-text);
}

.power-cta[b-lknaxkqwlw] {
    background: var(--theme-accent);
    box-shadow: 0 6px 20px rgba(var(--theme-accent-rgb), 0.35);
}

.power-cta:hover[b-lknaxkqwlw] {
    box-shadow: 0 10px 28px rgba(var(--theme-accent-rgb), 0.45);
}

.power-note[b-lknaxkqwlw] {
    text-align: center;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    font-style: italic;
}

/* ===== Trust Strip ===== */
.trust-strip[b-lknaxkqwlw] {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
    padding: 16px;
}

.trust-item[b-lknaxkqwlw] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.trust-item svg[b-lknaxkqwlw] {
    color: var(--theme-text-success);
    flex-shrink: 0;
}

/* ===== Credit Packs Card ===== */
.credit-packs-card[b-lknaxkqwlw] {
    background: var(--theme-surface-secondary);
    border-radius: 20px;
    padding: 32px;
    text-align: center;
    margin-top: 16px;
    border: 1px solid var(--theme-border);
}

.credit-packs-card h3[b-lknaxkqwlw] {
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.credit-packs-card p[b-lknaxkqwlw] {
    color: var(--theme-text-secondary);
    margin: 0 0 20px 0;
    font-size: 0.95rem;
}

.btn-outlined[b-lknaxkqwlw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: 2px solid var(--theme-primary);
    border-radius: 12px;
    color: var(--theme-primary-ink, var(--theme-primary));
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.btn-outlined:hover[b-lknaxkqwlw] {
    background: var(--theme-primary);
    color: var(--theme-btn-text);
}

/* ===== Compare Section ===== */
.compare-section[b-lknaxkqwlw] {
    text-align: center;
    padding: 24px;
    margin-top: 8px;
}

.compare-section h3[b-lknaxkqwlw] {
    color: var(--theme-text-primary);
    font-weight: 700;
    margin: 0 0 12px 0;
}

.compare-section p[b-lknaxkqwlw] {
    color: var(--theme-text-secondary);
    margin: 0 0 6px 0;
    font-size: 0.95rem;
}

/* ===== Dark Theme Overrides ===== */
.is-dark .plan-card[b-lknaxkqwlw] {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(16px);
}

.is-dark .current-badge[b-lknaxkqwlw] {
    background: rgba(30, 41, 59, 0.9);
}

.is-dark .billing-toggle[b-lknaxkqwlw] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .credits-badge[b-lknaxkqwlw] {
    background: rgba(254, 243, 199, 0.15);
    color: #fde68a;
    border-color: rgba(253, 230, 138, 0.3);
}

.is-dark .power-credits[b-lknaxkqwlw] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

.is-dark .credit-packs-card[b-lknaxkqwlw] {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
}

.is-dark .highlight-feature[b-lknaxkqwlw] {
    background: rgba(var(--theme-accent-rgb), 0.1);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .plans-grid[b-lknaxkqwlw] {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    /* Starter card spans full width on top */
    .starter-card[b-lknaxkqwlw] {
        grid-column: 1 / -1;
        max-width: 400px;
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .plans-grid[b-lknaxkqwlw] {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .starter-card[b-lknaxkqwlw] {
        max-width: none;
    }

    .upgrade-page[b-lknaxkqwlw] {
        padding: 20px 16px;
    }

    .upgrade-hero[b-lknaxkqwlw] {
        padding: 36px 20px;
        border-radius: 20px;
    }

    .upgrade-hero h1[b-lknaxkqwlw] {
        font-size: 1.8rem;
    }

    .upgrade-hero p[b-lknaxkqwlw] {
        font-size: 1rem;
    }

    .plan-card[b-lknaxkqwlw] {
        padding: 28px 20px;
        border-radius: 20px;
    }

    .plan-price .amount[b-lknaxkqwlw] {
        font-size: 2.8rem;
    }

    .feature-list li[b-lknaxkqwlw] {
        font-size: 0.9rem;
    }

    .cta-button[b-lknaxkqwlw] {
        padding: 14px 24px;
        font-size: 1rem;
    }

    .trust-strip[b-lknaxkqwlw] {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}
/* /Pages/Users/Components/AssignCreditsDialog.razor.rz.scp.css */
/* ============================================
   ASSIGN CREDITS DIALOG STYLES
   ============================================ */

.dialog-subtitle[b-z8gb0fb5t6] {
    margin: 0 0 16px 0;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}

/* Form Fields */
.form-group[b-z8gb0fb5t6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

.form-group label[b-z8gb0fb5t6] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.form-group input[b-z8gb0fb5t6],
.form-group select[b-z8gb0fb5t6],
.form-group textarea[b-z8gb0fb5t6] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, var(--theme-border));
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg, var(--theme-surface));
    color: var(--theme-input-text, var(--theme-text-primary));
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus[b-z8gb0fb5t6],
.form-group select:focus[b-z8gb0fb5t6],
.form-group textarea:focus[b-z8gb0fb5t6] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.form-group input[b-z8gb0fb5t6]::placeholder,
.form-group textarea[b-z8gb0fb5t6]::placeholder {
    color: var(--theme-text-hint);
}

.form-group textarea[b-z8gb0fb5t6] {
    resize: vertical;
    min-height: 60px;
}

/* Quick Amounts */
.quick-amounts[b-z8gb0fb5t6] {
    margin-top: 12px;
}

.quick-amounts-label[b-z8gb0fb5t6] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.quick-amount-buttons[b-z8gb0fb5t6] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.quick-btn[b-z8gb0fb5t6] {
    padding: 6px 14px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-surface);
    color: var(--theme-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-btn:hover[b-z8gb0fb5t6] {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: white;
}

/* Email Notification Option */
.notification-option[b-z8gb0fb5t6] {
    background: var(--theme-surface-secondary, var(--theme-surface));
    border-radius: 8px;
    padding: 12px;
    margin-top: 16px;
}

.notification-option.no-email[b-z8gb0fb5t6] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}

.notification-option.no-email svg[b-z8gb0fb5t6] {
    color: var(--theme-warning, #f59e0b);
    flex-shrink: 0;
}

.checkbox-wrapper[b-z8gb0fb5t6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checkbox-wrapper input[type="checkbox"][b-z8gb0fb5t6] {
    width: 18px;
    height: 18px;
    accent-color: var(--theme-primary);
    cursor: pointer;
}

.checkbox-wrapper label[b-z8gb0fb5t6] {
    font-weight: 500;
    color: var(--theme-text-primary);
    cursor: pointer;
    font-size: 0.875rem;
}

.notification-preview[b-z8gb0fb5t6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-left: 28px;
    color: var(--theme-text-secondary);
    font-size: 0.8125rem;
}

.notification-preview svg[b-z8gb0fb5t6] {
    color: var(--theme-primary-ink, var(--theme-primary));
    flex-shrink: 0;
}
/* /Pages/Users/Components/UserAccountAlertsCard.razor.rz.scp.css */
/* ============================================
   USER ACCOUNT ALERTS CARD STYLES
   ============================================ */
.card[b-n8n36aa4fn] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.card-title[b-n8n36aa4fn] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-n8n36aa4fn] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.card-title.warning svg[b-n8n36aa4fn] {
    color: #f59e0b;
}

.alerts-list[b-n8n36aa4fn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert[b-n8n36aa4fn] {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.alert strong[b-n8n36aa4fn] {
    font-weight: 600;
}

.alert-warning[b-n8n36aa4fn] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.alert-info[b-n8n36aa4fn] {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: #0c4a6e;
}
/* /Pages/Users/Components/UserAccountStatusCard.razor.rz.scp.css */
/* ============================================
   USER ACCOUNT STATUS CARD STYLES
   ============================================ */
.card[b-vkjzntnwk3] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-vkjzntnwk3] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-vkjzntnwk3] {
    border-left-color: var(--theme-primary);
}

.info-card-success[b-vkjzntnwk3] {
    border-left-color: #10b981;
}

.info-card-warning[b-vkjzntnwk3] {
    border-left-color: #f59e0b;
}

.info-card-error[b-vkjzntnwk3] {
    border-left-color: #ef4444;
}

.card-title[b-vkjzntnwk3] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-vkjzntnwk3] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.info-list[b-vkjzntnwk3] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row[b-vkjzntnwk3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon[b-vkjzntnwk3] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-icon.primary[b-vkjzntnwk3] { color: var(--theme-primary-ink, var(--theme-primary)); }
.info-icon.success[b-vkjzntnwk3] { color: #10b981; }
.info-icon.warning[b-vkjzntnwk3] { color: #f59e0b; }
.info-icon.error[b-vkjzntnwk3] { color: #ef4444; }
.info-icon.info[b-vkjzntnwk3] { color: #0ea5e9; }
.info-icon.secondary[b-vkjzntnwk3] { color: var(--theme-text-secondary); }

.info-content[b-vkjzntnwk3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.info-label[b-vkjzntnwk3] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-vkjzntnwk3] {
    font-size: 0.9375rem;
    color: var(--theme-text-primary);
    word-break: break-word;
}

.info-caption[b-vkjzntnwk3] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

.divider[b-vkjzntnwk3] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 0;
}

/* Chips */
.chip[b-vkjzntnwk3] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chip.warning[b-vkjzntnwk3] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
/* /Pages/Users/Components/UserActionButtons.razor.rz.scp.css */
/* ============================================
   USER ACTION BUTTONS STYLES
   ============================================ */
.action-buttons-container[b-d2xz9kxdhi] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.action-buttons-primary[b-d2xz9kxdhi],
.action-buttons-secondary[b-d2xz9kxdhi],
.action-buttons-danger[b-d2xz9kxdhi] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.action-buttons-secondary[b-d2xz9kxdhi] {
    margin-left: auto;
}

.action-buttons-danger[b-d2xz9kxdhi] {
    margin-left: 8px;
    padding-left: 20px;
    border-left: 1px solid var(--theme-border);
}

@media (max-width: 768px) {
    .action-buttons-secondary[b-d2xz9kxdhi] {
        margin-left: 0;
        width: 100%;
    }
    
    .action-buttons-danger[b-d2xz9kxdhi] {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        padding-top: 12px;
        border-top: 1px solid var(--theme-border);
        width: 100%;
    }
}

/* Action Buttons */
.action-btn[b-d2xz9kxdhi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.action-btn svg[b-d2xz9kxdhi] {
    width: 18px;
    height: 18px;
}

.action-btn:disabled[b-d2xz9kxdhi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn.primary[b-d2xz9kxdhi] {
    background: var(--theme-primary);
    color: var(--theme-btn-text);
}

.action-btn.primary:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: var(--theme-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-btn.secondary[b-d2xz9kxdhi] {
    background: #0ea5e9;
    color: white;
}

.action-btn.secondary:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: #0284c7;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.action-btn.impersonate[b-d2xz9kxdhi] {
    background: #7c3aed;
    color: white;
}

.action-btn.impersonate:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: #6d28d9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.action-btn.success[b-d2xz9kxdhi] {
    background: #10b981;
    color: white;
}

.action-btn.success:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.action-btn.danger[b-d2xz9kxdhi] {
    background: #ef4444;
    color: white;
}

.action-btn.danger:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.action-btn.outlined[b-d2xz9kxdhi] {
    background: transparent;
    border: 1px solid var(--theme-border);
    color: var(--theme-text-secondary);
}

.action-btn.outlined:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: var(--theme-secondary);
    color: var(--theme-text-primary);
}

.action-btn.outlined.success[b-d2xz9kxdhi] {
    border-color: #10b981;
    color: #10b981;
}

.action-btn.outlined.success:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: rgba(16, 185, 129, 0.1);
}

.action-btn.outlined.warning[b-d2xz9kxdhi] {
    border-color: #f59e0b;
    color: #f59e0b;
}

.action-btn.outlined.warning:hover:not(:disabled)[b-d2xz9kxdhi] {
    background: rgba(245, 158, 11, 0.1);
}

/* Protected Notice */
.protected-notice[b-d2xz9kxdhi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.protected-notice svg[b-d2xz9kxdhi] {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}
/* /Pages/Users/Components/UserActivityCard.razor.rz.scp.css */
/* ============================================
   USER ACTIVITY CARD STYLES
   ============================================ */
.card[b-03ib9pee1o] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-03ib9pee1o] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-03ib9pee1o] {
    border-left-color: var(--theme-primary);
}

.card-title[b-03ib9pee1o] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-03ib9pee1o] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.info-list[b-03ib9pee1o] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row[b-03ib9pee1o] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon[b-03ib9pee1o] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-icon.primary[b-03ib9pee1o] { color: var(--theme-primary-ink, var(--theme-primary)); }
.info-icon.success[b-03ib9pee1o] { color: #10b981; }
.info-icon.warning[b-03ib9pee1o] { color: #f59e0b; }
.info-icon.error[b-03ib9pee1o] { color: #ef4444; }
.info-icon.info[b-03ib9pee1o] { color: #0ea5e9; }
.info-icon.secondary[b-03ib9pee1o] { color: var(--theme-text-secondary); }

.info-content[b-03ib9pee1o] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.info-label[b-03ib9pee1o] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-03ib9pee1o] {
    font-size: 0.9375rem;
    color: var(--theme-text-primary);
    word-break: break-word;
}

.info-caption[b-03ib9pee1o] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

.chip[b-03ib9pee1o] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chip.warning[b-03ib9pee1o] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}
/* /Pages/Users/Components/UserActivitySummary.razor.rz.scp.css */
/* ============================================
   USER ACTIVITY SUMMARY STYLES
   ============================================ */
.activity-summary-section[b-tsbfqn4n19] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.section-header[b-tsbfqn4n19] {
    margin-bottom: 20px;
}

.section-title[b-tsbfqn4n19] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.section-title svg[b-tsbfqn4n19] {
    width: 24px;
    height: 24px;
    color: var(--theme-primary-ink, var(--theme-primary));
}

.stats-cards-grid[b-tsbfqn4n19] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .stats-cards-grid[b-tsbfqn4n19] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-cards-grid[b-tsbfqn4n19] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-card[b-tsbfqn4n19] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: var(--theme-secondary);
    border-radius: 12px;
    border: 1px solid var(--theme-border);
    transition: all 0.2s ease;
}

.stat-card:hover[b-tsbfqn4n19] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-card-icon[b-tsbfqn4n19] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card-icon svg[b-tsbfqn4n19] {
    width: 24px;
    height: 24px;
}

.stat-card-icon.goals[b-tsbfqn4n19] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.stat-card-icon.objectives[b-tsbfqn4n19] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.stat-card-icon.tasks[b-tsbfqn4n19] {
    background: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
}

.stat-card-icon.contacts[b-tsbfqn4n19] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.stat-card-icon.time-entries[b-tsbfqn4n19] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.stat-card-icon.transactions[b-tsbfqn4n19] {
    background: rgba(124, 58, 237, 0.15);
    color: #7c3aed;
}

.stat-card-content[b-tsbfqn4n19] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-card-value[b-tsbfqn4n19] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    line-height: 1;
}

.stat-card-label[b-tsbfqn4n19] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* /Pages/Users/Components/UserArchivedBanner.razor.rz.scp.css */
/* ============================================
   USER ARCHIVED BANNER STYLES
   ============================================ */
.alert[b-k9pi1lzqgi] {
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert-warning[b-k9pi1lzqgi] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.alert-filled[b-k9pi1lzqgi] {
    color: white;
}

.alert-filled.alert-warning[b-k9pi1lzqgi] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
}

.alert-content[b-k9pi1lzqgi] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-content svg[b-k9pi1lzqgi] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-content span[b-k9pi1lzqgi] {
    line-height: 1.5;
}
/* /Pages/Users/Components/UserAuditTrailCard.razor.rz.scp.css */
/* ============================================
   USER AUDIT TRAIL CARD STYLES
   ============================================ */
.card[b-9fxtz02y8e] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-9fxtz02y8e] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-9fxtz02y8e] {
    border-left-color: var(--theme-primary);
}

.card-title[b-9fxtz02y8e] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-9fxtz02y8e] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.info-list[b-9fxtz02y8e] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row[b-9fxtz02y8e] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon[b-9fxtz02y8e] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-icon.primary[b-9fxtz02y8e] { color: var(--theme-primary-ink, var(--theme-primary)); }
.info-icon.success[b-9fxtz02y8e] { color: #10b981; }
.info-icon.warning[b-9fxtz02y8e] { color: #f59e0b; }
.info-icon.error[b-9fxtz02y8e] { color: #ef4444; }
.info-icon.info[b-9fxtz02y8e] { color: #0ea5e9; }
.info-icon.secondary[b-9fxtz02y8e] { color: var(--theme-text-secondary); }

.info-content[b-9fxtz02y8e] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.info-label[b-9fxtz02y8e] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-9fxtz02y8e] {
    font-size: 0.9375rem;
    color: var(--theme-text-primary);
    word-break: break-word;
}

.info-caption[b-9fxtz02y8e] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

.divider[b-9fxtz02y8e] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 0;
}
/* /Pages/Users/Components/UserContactInfoCard.razor.rz.scp.css */
/* ============================================
   USER CONTACT INFO CARD STYLES
   ============================================ */
.card[b-iwfyc2v16u] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-iwfyc2v16u] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-iwfyc2v16u] {
    border-left-color: var(--theme-primary);
}

.card-title[b-iwfyc2v16u] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-iwfyc2v16u] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.info-list[b-iwfyc2v16u] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row[b-iwfyc2v16u] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon[b-iwfyc2v16u] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-icon.primary[b-iwfyc2v16u] { color: var(--theme-primary-ink, var(--theme-primary)); }
.info-icon.success[b-iwfyc2v16u] { color: #10b981; }
.info-icon.warning[b-iwfyc2v16u] { color: #f59e0b; }
.info-icon.error[b-iwfyc2v16u] { color: #ef4444; }
.info-icon.info[b-iwfyc2v16u] { color: #0ea5e9; }
.info-icon.secondary[b-iwfyc2v16u] { color: var(--theme-text-secondary); }

.info-content[b-iwfyc2v16u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.info-label[b-iwfyc2v16u] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-iwfyc2v16u] {
    font-size: 0.9375rem;
    color: var(--theme-text-primary);
    word-break: break-word;
}

.info-caption[b-iwfyc2v16u] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

.divider[b-iwfyc2v16u] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 0;
}
/* /Pages/Users/Components/UserCreditHistoryCard.razor.rz.scp.css */
/* ============================================
   USER CREDIT HISTORY CARD STYLES
   ============================================ */
.card[b-ivl2t87wa1] {
    background: var(--theme-surface);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
    overflow: hidden;
}

.history-card[b-ivl2t87wa1] {
    margin-top: 24px;
}

.card-header[b-ivl2t87wa1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--theme-border);
}

.card-title[b-ivl2t87wa1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.card-title svg[b-ivl2t87wa1] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.transaction-count[b-ivl2t87wa1] {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary);
    background: var(--theme-hover, rgba(0,0,0,0.05));
    padding: 4px 12px;
    border-radius: 12px;
}

/* Transaction List */
.transaction-list[b-ivl2t87wa1] {
    max-height: 400px;
    overflow-y: auto;
}

.transaction-item[b-ivl2t87wa1] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--theme-border);
    transition: background 0.2s;
}

.transaction-item:last-child[b-ivl2t87wa1] {
    border-bottom: none;
}

.transaction-item:hover[b-ivl2t87wa1] {
    background: var(--theme-hover, rgba(0,0,0,0.02));
}

.transaction-icon[b-ivl2t87wa1] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.transaction-icon svg[b-ivl2t87wa1] {
    width: 20px;
    height: 20px;
}

.transaction-item.credit .transaction-icon[b-ivl2t87wa1] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.transaction-item.debit .transaction-icon[b-ivl2t87wa1] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.transaction-details[b-ivl2t87wa1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.transaction-type[b-ivl2t87wa1] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.transaction-description[b-ivl2t87wa1] {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-date[b-ivl2t87wa1] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

.transaction-amount[b-ivl2t87wa1] {
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.transaction-amount.positive[b-ivl2t87wa1] {
    color: #10b981;
}

.transaction-amount.negative[b-ivl2t87wa1] {
    color: #ef4444;
}

/* View All Link */
.view-all-link[b-ivl2t87wa1] {
    padding: 12px 24px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--theme-text-secondary);
    border-top: 1px solid var(--theme-border);
}

/* Loading State */
.loading-state[b-ivl2t87wa1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--theme-text-secondary);
    padding: 40px 24px;
}

.spinner-small[b-ivl2t87wa1] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-ivl2t87wa1 0.8s linear infinite;
}

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

/* Empty State */
.empty-state[b-ivl2t87wa1] {
    text-align: center;
    padding: 40px 24px;
    color: var(--theme-text-secondary);
}

.empty-icon[b-ivl2t87wa1] {
    opacity: 0.3;
    margin-bottom: 12px;
}

.empty-state p[b-ivl2t87wa1] {
    margin: 0;
}
/* /Pages/Users/Components/UserCreditsCard.razor.rz.scp.css */
/* ============================================
   USER CREDITS CARD STYLES
   ============================================ */
.card[b-hqsqvs1rco] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-hqsqvs1rco] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-hqsqvs1rco] {
    border-left-color: var(--theme-primary);
}

.info-card-success[b-hqsqvs1rco] {
    border-left-color: #10b981;
}

.info-card-warning[b-hqsqvs1rco] {
    border-left-color: #f59e0b;
}

.info-card-error[b-hqsqvs1rco] {
    border-left-color: #ef4444;
}

.card-title[b-hqsqvs1rco] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-hqsqvs1rco] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.info-list[b-hqsqvs1rco] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.info-row[b-hqsqvs1rco] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon[b-hqsqvs1rco] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-icon.primary[b-hqsqvs1rco] { color: var(--theme-primary-ink, var(--theme-primary)); }
.info-icon.success[b-hqsqvs1rco] { color: #10b981; }
.info-icon.warning[b-hqsqvs1rco] { color: #f59e0b; }
.info-icon.error[b-hqsqvs1rco] { color: #ef4444; }
.info-icon.info[b-hqsqvs1rco] { color: #0ea5e9; }
.info-icon.secondary[b-hqsqvs1rco] { color: var(--theme-text-secondary); }

.info-content[b-hqsqvs1rco] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.info-label[b-hqsqvs1rco] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-hqsqvs1rco] {
    font-size: 0.9375rem;
    color: var(--theme-text-primary);
    word-break: break-word;
}

.credit-balance[b-hqsqvs1rco] {
    font-size: 1.5rem;
    font-weight: 700;
}

.credit-balance.success[b-hqsqvs1rco] { color: #10b981; }
.credit-balance.warning[b-hqsqvs1rco] { color: #f59e0b; }
.credit-balance.error[b-hqsqvs1rco] { color: #ef4444; }
.credit-balance.primary[b-hqsqvs1rco] { color: var(--theme-primary-ink, var(--theme-primary)); }

.divider[b-hqsqvs1rco] {
    border: none;
    border-top: 1px solid var(--theme-border);
    margin: 0;
}

/* Chips */
.chip[b-hqsqvs1rco] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
}

.chip.warning[b-hqsqvs1rco] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.chip.success[b-hqsqvs1rco] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

/* Card Actions */
.card-actions[b-hqsqvs1rco] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
    display: flex;
    gap: 8px;
}

/* Loading State */
.loading-state[b-hqsqvs1rco] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--theme-text-secondary);
    padding: 20px 0;
}

.spinner-small[b-hqsqvs1rco] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-hqsqvs1rco 0.8s linear infinite;
}

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

/* Empty State */
.empty-state[b-hqsqvs1rco] {
    text-align: center;
    padding: 20px 0;
    color: var(--theme-text-secondary);
}

.empty-state p[b-hqsqvs1rco] {
    margin-bottom: 16px;
}
/* /Pages/Users/Components/UserHeaderCard.razor.rz.scp.css */
/* ============================================
   USER HEADER CARD STYLES
   ============================================ */
.card[b-45emy2l6hl] {
    background: var(--theme-surface);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.user-header-card[b-45emy2l6hl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.user-header-grid[b-45emy2l6hl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    padding: 28px;
    background: linear-gradient(135deg, var(--theme-surface) 0%, var(--theme-secondary) 100%);
    border-bottom: 1px solid var(--theme-border);
}

.user-info[b-45emy2l6hl] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.avatar-large[b-45emy2l6hl] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    background: var(--theme-primary);
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 3px solid var(--theme-surface);
}

.avatar-large.error[b-45emy2l6hl] { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
.avatar-large.success[b-45emy2l6hl] { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.avatar-large.warning[b-45emy2l6hl] { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.avatar-large.info[b-45emy2l6hl] { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }
.avatar-large.primary[b-45emy2l6hl] { background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-hover) 100%); }

.user-details[b-45emy2l6hl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-name-row[b-45emy2l6hl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.user-name-row h1[b-45emy2l6hl] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--theme-text-primary);
    margin: 0;
    line-height: 1.2;
}

.verified-badge[b-45emy2l6hl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.verified-badge svg[b-45emy2l6hl] {
    width: 14px;
    height: 14px;
}

.user-meta[b-45emy2l6hl] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.role-chip[b-45emy2l6hl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.role-chip.error[b-45emy2l6hl] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.role-chip.success[b-45emy2l6hl] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.role-chip.warning[b-45emy2l6hl] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.role-chip.info[b-45emy2l6hl] {
    background: rgba(14, 165, 233, 0.15);
    color: #0ea5e9;
}

.role-chip.primary[b-45emy2l6hl] {
    background: var(--theme-chip-bg);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.email-text[b-45emy2l6hl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--theme-text-secondary);
    font-size: 0.875rem;
}

.email-text svg[b-45emy2l6hl] {
    color: var(--theme-text-hint);
}

.header-actions[b-45emy2l6hl] {
    display: flex;
    align-items: flex-start;
}

.btn-back[b-45emy2l6hl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-back:hover[b-45emy2l6hl] {
    background: var(--theme-secondary);
    color: var(--theme-text-primary);
    border-color: var(--theme-primary);
}

.btn-back svg[b-45emy2l6hl] {
    width: 18px;
    height: 18px;
}

.action-bar[b-45emy2l6hl] {
    padding: 20px 28px;
    background: var(--theme-surface);
}

@media (max-width: 600px) {
    .user-header-grid[b-45emy2l6hl] {
        padding: 20px;
    }
    
    .user-info[b-45emy2l6hl] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .avatar-large[b-45emy2l6hl] {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }
    
    .user-name-row h1[b-45emy2l6hl] {
        font-size: 1.5rem;
    }
    
    .action-bar[b-45emy2l6hl] {
        padding: 16px 20px;
    }
}
/* /Pages/Users/Components/UserLoginHistoryCard.razor.rz.scp.css */
/* ============================================
   USER LOGIN HISTORY CARD STYLES
   ============================================ */
.card[b-ok9i93dzhn] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-ok9i93dzhn] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-ok9i93dzhn] {
    border-left-color: var(--theme-primary);
}

.card-title[b-ok9i93dzhn] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-ok9i93dzhn] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.empty-text[b-ok9i93dzhn] {
    color: var(--theme-text-hint);
    font-size: 0.875rem;
    margin: 0;
}

.table-container[b-ok9i93dzhn] {
    overflow-x: auto;
}

.data-table[b-ok9i93dzhn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-ok9i93dzhn] {
    text-align: left;
    padding: 12px 16px;
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-ok9i93dzhn] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
}

.data-table tbody tr:hover[b-ok9i93dzhn] {
    background: var(--theme-secondary);
}
/* /Pages/Users/Components/UserNewsletterCard.razor.rz.scp.css */
/* ============================================
   USER NEWSLETTER CARD STYLES
   ============================================ */
.card[b-i86veextf7] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-i86veextf7] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-tertiary[b-i86veextf7] {
    border-left-color: #7c3aed;
}

.card-title[b-i86veextf7] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-i86veextf7] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.card-title.tertiary[b-i86veextf7] {
    color: var(--theme-text-primary);
}

.card-title.tertiary svg[b-i86veextf7] {
    color: #7c3aed;
}

.empty-text[b-i86veextf7] {
    color: var(--theme-text-hint);
    font-size: 0.875rem;
    margin: 0;
}

.table-container[b-i86veextf7] {
    overflow-x: auto;
}

.data-table[b-i86veextf7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-i86veextf7] {
    text-align: left;
    padding: 12px 16px;
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-i86veextf7] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
}

.data-table tbody tr:hover[b-i86veextf7] {
    background: var(--theme-secondary);
}

/* Chips */
.chip[b-i86veextf7] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.chip.primary[b-i86veextf7] {
    background: var(--theme-chip-bg);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.chip.info[b-i86veextf7] {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.chip.success[b-i86veextf7] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.chip.warning[b-i86veextf7] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.chip.error[b-i86veextf7] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.chip.tertiary[b-i86veextf7] {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}
/* /Pages/Users/Components/UserRemindersCard.razor.rz.scp.css */
/* ============================================
   USER REMINDERS CARD STYLES
   ============================================ */
.card[b-rvi3snjzzx] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.info-card[b-rvi3snjzzx] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-rvi3snjzzx] {
    border-left-color: var(--theme-primary);
}

.card-title[b-rvi3snjzzx] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-rvi3snjzzx] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--theme-text-secondary);
}

.empty-text[b-rvi3snjzzx] {
    color: var(--theme-text-hint);
    font-size: 0.875rem;
    margin: 0;
}

.table-container[b-rvi3snjzzx] {
    overflow-x: auto;
}

.data-table[b-rvi3snjzzx] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-rvi3snjzzx] {
    text-align: left;
    padding: 12px 16px;
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--theme-border);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table td[b-rvi3snjzzx] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
}

.data-table tbody tr:hover[b-rvi3snjzzx] {
    background: var(--theme-secondary);
}

/* Chips */
.chip[b-rvi3snjzzx] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.chip.primary[b-rvi3snjzzx] {
    background: var(--theme-chip-bg);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.chip.secondary[b-rvi3snjzzx] {
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
}

.chip.info[b-rvi3snjzzx] {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.chip.success[b-rvi3snjzzx] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.chip.warning[b-rvi3snjzzx] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.chip.error[b-rvi3snjzzx] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.chip-row[b-rvi3snjzzx] {
    display: flex;
    gap: 4px;
}
/* /Pages/Users/CopyLinkDialog.razor.rz.scp.css */
/* CopyLinkDialog.razor.css */

.content-text[b-vn0hho9b48] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
    line-height: 1.6;
    margin: 0 0 16px 0;
}

/* Link Container */
.link-container[b-vn0hho9b48] {
    margin-top: 12px;
}

.form-label[b-vn0hho9b48] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 6px;
}

.link-input-wrapper[b-vn0hho9b48] {
    display: flex;
    gap: 8px;
}

.form-input[b-vn0hho9b48] {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    font-family: 'Monaco', 'Consolas', monospace;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    transition: border-color 0.2s;
}

.form-input:focus[b-vn0hho9b48] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

.link-input[b-vn0hho9b48] {
    cursor: text;
    user-select: all;
}

.btn-copy[b-vn0hho9b48] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-height: 38px;
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    background: var(--theme-surface);
    color: var(--theme-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-copy:hover[b-vn0hho9b48] {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
    color: var(--theme-btn-text, #fff);
}

.copy-success[b-vn0hho9b48] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--theme-success);
    font-weight: 500;
    animation: fade-in-b-vn0hho9b48 0.3s ease;
}

@keyframes fade-in-b-vn0hho9b48 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 560px) {
    .link-input-wrapper[b-vn0hho9b48] {
        flex-direction: column;
    }

    .btn-copy[b-vn0hho9b48] {
        width: 100%;
        height: 38px;
    }
}
/* /Pages/Users/User.razor.rz.scp.css */
/* ============================================
   USER DETAIL PAGE STYLES (Scoped CSS)
   ============================================ */

/* Page container */
.user-detail-page[b-vyx7q2fbr9] {
    min-height: calc(100vh - 56px);
    padding-top: 0;
    transition: background 0.5s ease;
    background: transparent;
}

.user-detail-container[b-vyx7q2fbr9] {
    max-width: max(1200px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: 1200px contained, grows in Wide */
    margin: 0 auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ============================================
   LOADING STATE
   ============================================ */
.loading-state[b-vyx7q2fbr9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    gap: 16px;
}

.spinner[b-vyx7q2fbr9] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: spin-b-vyx7q2fbr9 1s linear infinite;
}

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

/* ============================================
   CARDS (shared base styles)
   ============================================ */
.card[b-vyx7q2fbr9] {
    background: var(--theme-surface);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--theme-border);
}

.card-title[b-vyx7q2fbr9] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 20px 0;
}

.card-title svg[b-vyx7q2fbr9] {
    width: 24px;
    height: 24px;
    color: var(--theme-text-secondary);
}

/* ============================================
   INFO CARDS GRID
   ============================================ */
.info-cards-grid[b-vyx7q2fbr9] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 960px) {
    .info-cards-grid[b-vyx7q2fbr9] {
        grid-template-columns: 1fr;
    }
}

/* Info Card Styling */
.info-card[b-vyx7q2fbr9] {
    border-left: 4px solid var(--theme-primary);
}

.info-card-primary[b-vyx7q2fbr9] {
    border-left-color: var(--theme-primary);
}

.info-card-success[b-vyx7q2fbr9] {
    border-left-color: #10b981;
}

.info-card-warning[b-vyx7q2fbr9] {
    border-left-color: #f59e0b;
}

.info-card-error[b-vyx7q2fbr9] {
    border-left-color: #ef4444;
}

.info-card-tertiary[b-vyx7q2fbr9] {
    border-left-color: #7c3aed;
}

.info-list[b-vyx7q2fbr9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row[b-vyx7q2fbr9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-icon[b-vyx7q2fbr9] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-icon.primary[b-vyx7q2fbr9] { color: var(--theme-primary-ink, var(--theme-primary)); }
.info-icon.success[b-vyx7q2fbr9] { color: #10b981; }
.info-icon.warning[b-vyx7q2fbr9] { color: #f59e0b; }
.info-icon.error[b-vyx7q2fbr9] { color: #ef4444; }
.info-icon.info[b-vyx7q2fbr9] { color: #0ea5e9; }
.info-icon.secondary[b-vyx7q2fbr9] { color: var(--theme-text-secondary); }

.info-content[b-vyx7q2fbr9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-label[b-vyx7q2fbr9] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.info-value[b-vyx7q2fbr9] {
    font-size: 0.875rem;
    color: var(--theme-text-primary);
}

.info-caption[b-vyx7q2fbr9] {
    font-size: 0.75rem;
    color: var(--theme-text-hint);
}

/* ============================================
   CHIPS
   ============================================ */
.chip[b-vyx7q2fbr9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chip.primary[b-vyx7q2fbr9] {
    background: var(--theme-chip-bg);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.chip.secondary[b-vyx7q2fbr9] {
    background: var(--theme-secondary);
    color: var(--theme-text-secondary);
}

.chip.info[b-vyx7q2fbr9] {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

.chip.success[b-vyx7q2fbr9] {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.chip.warning[b-vyx7q2fbr9] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.chip.error[b-vyx7q2fbr9] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.chip.tertiary[b-vyx7q2fbr9] {
    background: rgba(124, 58, 237, 0.1);
    color: #7c3aed;
}

.chip.default[b-vyx7q2fbr9] {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
}

.chip-row[b-vyx7q2fbr9] {
    display: flex;
    gap: 4px;
}

/* ============================================
   ALERTS
   ============================================ */
.alert[b-vyx7q2fbr9] {
    padding: 16px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.alert h3[b-vyx7q2fbr9] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.alert p[b-vyx7q2fbr9] {
    margin: 0;
    font-size: 0.875rem;
}

.alert-error[b-vyx7q2fbr9] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #991b1b;
}

.alert-warning[b-vyx7q2fbr9] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #92400e;
}

.alert-info[b-vyx7q2fbr9] {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.2);
    color: #0c4a6e;
}

.alert-filled[b-vyx7q2fbr9] {
    color: white;
}

.alert-filled.alert-warning[b-vyx7q2fbr9] {
    background: #f59e0b;
    border: none;
}

.alert-content[b-vyx7q2fbr9] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-content svg[b-vyx7q2fbr9] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.alerts-list[b-vyx7q2fbr9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================
   DATA TABLES
   ============================================ */
.table-container[b-vyx7q2fbr9] {
    overflow-x: auto;
}

.data-table[b-vyx7q2fbr9] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.data-table th[b-vyx7q2fbr9] {
    text-align: left;
    padding: 12px 16px;
    background: var(--theme-surface-secondary);
    color: var(--theme-text-secondary);
    font-weight: 600;
    border-bottom: 1px solid var(--theme-border);
}

.data-table td[b-vyx7q2fbr9] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--theme-border);
    color: var(--theme-text-primary);
}

.data-table tbody tr:hover[b-vyx7q2fbr9] {
    background: var(--theme-secondary);
}

.empty-text[b-vyx7q2fbr9] {
    color: var(--theme-text-hint);
    font-size: 0.875rem;
    margin: 0;
}

/* Theme overrides removed - handled by variables */

/* ============================================
   THEME: Winter (Dark)
   ============================================ */
.user-detail-page.theme-winter[b-vyx7q2fbr9] {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 50%, #1e1b4b 100%);
}

.is-dark .card[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .card-title[b-vyx7q2fbr9],
.is-dark .user-name-row h1[b-vyx7q2fbr9],
.is-dark .info-value[b-vyx7q2fbr9],
.is-dark .stat-value[b-vyx7q2fbr9],
.is-dark .data-table td[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .card-title svg[b-vyx7q2fbr9],
.is-dark .email[b-vyx7q2fbr9],
.is-dark .info-label[b-vyx7q2fbr9],
.is-dark .stat-label[b-vyx7q2fbr9],
.is-dark .info-caption[b-vyx7q2fbr9],
.is-dark .empty-text[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .divider[b-vyx7q2fbr9] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table th[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table td[b-vyx7q2fbr9] {
    border-color: rgba(255, 255, 255, 0.05);
}

.is-dark .data-table tbody tr:hover[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .loading-state p[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   THEME: Nature (Dark)
   ============================================ */
.user-detail-page.theme-nature[b-vyx7q2fbr9] {
    background: linear-gradient(135deg, #14532d 0%, #1a2e1a 50%, #365314 100%);
}

.is-dark .card[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .card-title[b-vyx7q2fbr9],
.is-dark .user-name-row h1[b-vyx7q2fbr9],
.is-dark .info-value[b-vyx7q2fbr9],
.is-dark .stat-value[b-vyx7q2fbr9],
.is-dark .data-table td[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .card-title svg[b-vyx7q2fbr9],
.is-dark .email[b-vyx7q2fbr9],
.is-dark .info-label[b-vyx7q2fbr9],
.is-dark .stat-label[b-vyx7q2fbr9],
.is-dark .info-caption[b-vyx7q2fbr9],
.is-dark .empty-text[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .divider[b-vyx7q2fbr9] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table th[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table td[b-vyx7q2fbr9] {
    border-color: rgba(255, 255, 255, 0.05);
}

.is-dark .data-table tbody tr:hover[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .loading-state p[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   THEME: Ocean (Dark)
   ============================================ */
.user-detail-page.theme-ocean[b-vyx7q2fbr9] {
    background: linear-gradient(135deg, #0c4a6e 0%, #164e63 50%, #0f766e 100%);
}

.is-dark .card[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.is-dark .card-title[b-vyx7q2fbr9],
.is-dark .user-name-row h1[b-vyx7q2fbr9],
.is-dark .info-value[b-vyx7q2fbr9],
.is-dark .stat-value[b-vyx7q2fbr9],
.is-dark .data-table td[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.95);
}

.is-dark .card-title svg[b-vyx7q2fbr9],
.is-dark .email[b-vyx7q2fbr9],
.is-dark .info-label[b-vyx7q2fbr9],
.is-dark .stat-label[b-vyx7q2fbr9],
.is-dark .info-caption[b-vyx7q2fbr9],
.is-dark .empty-text[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .divider[b-vyx7q2fbr9] {
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table th[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .data-table td[b-vyx7q2fbr9] {
    border-color: rgba(255, 255, 255, 0.05);
}

.is-dark .data-table tbody tr:hover[b-vyx7q2fbr9] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .loading-state p[b-vyx7q2fbr9] {
    color: rgba(255, 255, 255, 0.9);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .user-detail-container[b-vyx7q2fbr9] {
        padding: 12px;
        gap: 16px;
    }
    
    .user-header-grid[b-vyx7q2fbr9] {
        flex-direction: column;
    }
    
    .header-actions[b-vyx7q2fbr9] {
        width: 100%;
    }
    
    .header-actions .btn[b-vyx7q2fbr9] {
        width: 100%;
        justify-content: center;
    }
    
    .action-buttons[b-vyx7q2fbr9] {
        flex-direction: column;
    }
    
    .action-buttons .btn[b-vyx7q2fbr9] {
        width: 100%;
        justify-content: center;
    }
    
    .spacer[b-vyx7q2fbr9] {
        display: none;
    }
    
    .user-info[b-vyx7q2fbr9] {
        flex-direction: column;
        text-align: center;
    }
    
    .user-meta[b-vyx7q2fbr9] {
        justify-content: center;
    }
    
    .user-name-row[b-vyx7q2fbr9] {
        flex-direction: column;
    }
}
/* /Pages/Users/UserEditDialog.razor.rz.scp.css */
/* ============================================
   USER EDIT DIALOG - Clean Theme-Variable CSS
   ============================================ */

/* Form Layout */
.user-form-row[b-14ultrcv80] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.user-form-group[b-14ultrcv80] {
    margin-bottom: 20px;
}

.user-form-row .user-form-group[b-14ultrcv80] {
    margin-bottom: 20px;
}

.user-form-group label[b-14ultrcv80] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-primary, #374151);
    margin-bottom: 4px;
}

.required-indicator[b-14ultrcv80] {
    color: #ef4444;
}

/* Form Inputs */
.user-form-input[b-14ultrcv80],
.user-form-group input[b-14ultrcv80] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.user-form-input:focus[b-14ultrcv80],
.user-form-group input:focus[b-14ultrcv80] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.user-form-input:disabled[b-14ultrcv80],
.user-form-group input:disabled[b-14ultrcv80] {
    opacity: 0.5;
    cursor: not-allowed;
}

.user-form-input[b-14ultrcv80]::placeholder,
.user-form-group input[b-14ultrcv80]::placeholder {
    color: var(--theme-text-muted, #9ca3af);
}

/* Helper Text */
.user-helper-text[b-14ultrcv80] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    margin-top: 4px;
    display: block;
}

/* Checkbox */
.user-checkbox-label[b-14ultrcv80] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--theme-text-primary, #374151);
}

.user-checkbox-label input[type="checkbox"][b-14ultrcv80] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--theme-primary);
}

/* Validation */
.validation-message[b-14ultrcv80] {
    color: #ef4444;
    font-size: 0.75rem;
    margin-top: 4px;
}

/* Alerts */
.user-alert[b-14ultrcv80] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.user-alert svg[b-14ultrcv80] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.user-alert-info[b-14ultrcv80] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-hover, var(--theme-primary));
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.user-alert-info svg[b-14ultrcv80] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.user-alert-warning[b-14ultrcv80] {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.user-alert-warning svg[b-14ultrcv80] {
    color: #f59e0b;
}

.is-dark .user-alert-warning[b-14ultrcv80] {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.25);
}

.user-alert-success[b-14ultrcv80] {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #047857;
}

.user-alert-success svg[b-14ultrcv80] {
    fill: #10b981;
}

.is-dark .user-alert-success[b-14ultrcv80] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

/* Affiliate Section */
.user-form-section[b-14ultrcv80] {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--theme-border, #e2e8f0);
    border-radius: 12px;
    background: var(--theme-surface-secondary, #f8fafc);
}

.user-section-header[b-14ultrcv80] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--theme-text-primary, #374151);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
}

.user-section-header svg[b-14ultrcv80] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.user-affiliate-stats[b-14ultrcv80] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    background: rgba(var(--theme-primary-rgb), 0.05);
    border-radius: 8px;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.1);
}

.is-dark .user-affiliate-stats[b-14ultrcv80] {
    background: rgba(var(--theme-primary-rgb), 0.15);
    border-color: rgba(var(--theme-primary-rgb), 0.2);
}

.affiliate-stat[b-14ultrcv80] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.affiliate-stat .stat-value[b-14ultrcv80] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary));
}

.affiliate-stat .stat-label[b-14ultrcv80] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #64748b);
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 560px) {
    .user-form-row[b-14ultrcv80] {
        grid-template-columns: 1fr;
    }

    .user-affiliate-stats[b-14ultrcv80] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/Users/UserPasswordDialog.razor.rz.scp.css */
/* ============================================
   USER PASSWORD PAGE STYLES
   ============================================ */

.password-dialog[b-5nkatz1zii] {
    min-width: 400px;
    max-width: 450px;
}

.dialog-header[b-5nkatz1zii] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--theme-border);
}

.dialog-title[b-5nkatz1zii] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0;
}

.dialog-title svg[b-5nkatz1zii] {
    color: var(--theme-primary-ink, var(--theme-primary));
}

.dialog-content[b-5nkatz1zii] {
    padding: 20px;
}

/* Form Elements */
.form-group[b-5nkatz1zii] {
    margin-bottom: 16px;
}

.form-label[b-5nkatz1zii] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 4px;
}

.password-input-wrapper[b-5nkatz1zii] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-5nkatz1zii] {
    width: 100%;
    padding: 8px 40px 8px 10px;
    border: 1px solid var(--theme-input-border, var(--theme-border));
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    font-family: inherit;
    background: var(--theme-input-bg, var(--theme-surface));
    color: var(--theme-input-text, var(--theme-text-primary));
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus[b-5nkatz1zii] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}

.form-input[b-5nkatz1zii]::placeholder {
    color: var(--theme-text-hint);
}

.password-toggle[b-5nkatz1zii] {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--theme-text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.password-toggle:hover[b-5nkatz1zii] {
    color: var(--theme-primary-ink, var(--theme-primary));
    background: rgba(var(--theme-primary-rgb), 0.1);
}

/* Validation */
.validation-message[b-5nkatz1zii] {
    color: var(--theme-text-danger);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Password Requirements */
.password-requirements[b-5nkatz1zii] {
    background: rgba(var(--theme-primary-rgb), 0.06);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.12);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.requirements-title[b-5nkatz1zii] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-primary-ink, var(--theme-primary));
    margin: 0 0 8px 0;
}

.requirements-list[b-5nkatz1zii] {
    margin: 0;
    padding-left: 20px;
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

.requirements-list li[b-5nkatz1zii] {
    margin-bottom: 4px;
}

.requirements-list li:last-child[b-5nkatz1zii] {
    margin-bottom: 0;
}

/* Dialog Actions */
.dialog-actions[b-5nkatz1zii] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.text-error[b-5nkatz1zii] {
    color: var(--theme-text-danger);
}

/* Responsive */
@media (max-width: 480px) {
    .password-dialog[b-5nkatz1zii] {
        min-width: auto;
        max-width: 100%;
    }

    .dialog-actions[b-5nkatz1zii] {
        flex-direction: column;
    }

    .dialog-actions button[b-5nkatz1zii] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Users/Users.razor.rz.scp.css */
/* ============================================
   USER MANAGEMENT PAGE - SCOPED STYLES
   Main layout uses shared .list-page classes
   from utilities.css. Table rendering handled
   by NativeDataGrid component.
   ============================================ */

/* 6-column stats grid for users page */
.users-stats-grid[b-tk67li222c] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Responsive: 3 columns on medium, 2 on small */
@media (max-width: 1200px) {
    .users-stats-grid[b-tk67li222c] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .users-stats-grid[b-tk67li222c] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Cell content styles — these elements are rendered by
   CellTemplate (authored here) so page scope applies */
.col-name[b-tk67li222c] {
    font-weight: 600;
    min-width: 140px;
    display: inline-block;
}

.col-icon-center[b-tk67li222c] {
    text-align: center;
}

/* Status icons */
.status-icon[b-tk67li222c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
}

.status-icon.status-success[b-tk67li222c] {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.status-icon.status-warning[b-tk67li222c] {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.status-icon.status-error[b-tk67li222c] {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* USER-MODE-LOG (2026-06-28): Mode column — current mode tag stacked over a
   muted "switched from …" line shown only when the user changed modes. */
.col-mode[b-tk67li222c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.col-mode-origin[b-tk67li222c] {
    font-size: 0.6875rem;
    color: var(--text-muted, #6b7280);
    font-style: italic;
}
/* /Pages/Watch.razor.rz.scp.css */
.watch-page[b-dtv575sc6l] {
    min-height: calc(100vh - 56px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Loading */
.watch-loading[b-dtv575sc6l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: #64748b;
    font-size: 1.1rem;
}

.watch-spinner[b-dtv575sc6l] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: watch-spin-b-dtv575sc6l 0.8s linear infinite;
}

@keyframes watch-spin-b-dtv575sc6l {
    to { transform: rotate(360deg); }
}

/* Not Found */
.watch-not-found[b-dtv575sc6l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 1rem;
}

.not-found-icon[b-dtv575sc6l] {
    font-size: 4rem;
    opacity: 0.6;
}

.watch-not-found h1[b-dtv575sc6l] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.watch-not-found p[b-dtv575sc6l] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

/* Container */
.watch-container[b-dtv575sc6l] {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Video */
.watch-video-wrapper[b-dtv575sc6l] {
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.watch-video[b-dtv575sc6l] {
    width: 100%;
    display: block;
    max-height: 70vh;
}

.watch-no-video[b-dtv575sc6l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: #94a3b8;
    gap: 0.5rem;
}

.no-video-icon[b-dtv575sc6l] {
    font-size: 3rem;
    opacity: 0.5;
}

/* Info */
.watch-info[b-dtv575sc6l] {
    padding: 0 0.5rem;
}

.watch-title[b-dtv575sc6l] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem;
}

.watch-description[b-dtv575sc6l] {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.watch-meta[b-dtv575sc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.watch-separator[b-dtv575sc6l] {
    color: #cbd5e1;
}

/* Branding CTA */
.watch-branding[b-dtv575sc6l] {
    margin-top: 1rem;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}

.branding-content[b-dtv575sc6l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.branding-logo[b-dtv575sc6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.logo-icon[b-dtv575sc6l] {
    color: #6366f1;
    font-size: 1.25rem;
}

.branding-tagline[b-dtv575sc6l] {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
}

.watch-cta-btn[b-dtv575sc6l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.watch-cta-btn:hover[b-dtv575sc6l] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
    color: white;
    text-decoration: none;
}

/* Dark theme support */
.is-dark .watch-page[b-dtv575sc6l] {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.is-dark .watch-not-found h1[b-dtv575sc6l],
.is-dark .watch-title[b-dtv575sc6l],
.is-dark .branding-logo[b-dtv575sc6l] {
    color: #f1f5f9;
}

.is-dark .watch-not-found p[b-dtv575sc6l],
.is-dark .watch-description[b-dtv575sc6l],
.is-dark .branding-tagline[b-dtv575sc6l] {
    color: #94a3b8;
}

.is-dark .watch-branding[b-dtv575sc6l] {
    border-top-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
    .watch-page[b-dtv575sc6l] {
        padding: 1rem 0.5rem;
    }

    .watch-container[b-dtv575sc6l] {
        gap: 1rem;
    }

    .watch-title[b-dtv575sc6l] {
        font-size: 1.25rem;
    }

    .watch-video-wrapper[b-dtv575sc6l] {
        border-radius: 12px;
    }
}
/* /Pages/WelcomeFriend.razor.rz.scp.css */
/* ============================================
   WELCOME FRIEND PAGE
   Fully migrated from Bootstrap - March 2026
   ============================================ */

.welcome-friend-page[b-pcibk9z92v] {
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb, 59, 130, 246), 0.05) 0%, rgba(var(--theme-primary-rgb, 59, 130, 246), 0.1) 100%);
    padding: 3rem 1rem;
}

/* Loading State */
.loading-state[b-pcibk9z92v] {
    max-width: 500px;
    text-align: center;
    color: var(--theme-text-secondary, #64748b);
}

.loading-spinner[b-pcibk9z92v] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--theme-border, #e2e8f0);
    border-top-color: var(--theme-primary, #3b82f6);
    border-radius: 50%;
    animation: spin-b-pcibk9z92v 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* Error State */
.error-state[b-pcibk9z92v] {
    max-width: 500px;
    text-align: center;
}

.error-state h2[b-pcibk9z92v] {
    font-size: 2.5rem;
    color: var(--theme-text-primary, #1e293b);
    margin-bottom: 1rem;
}

.error-state p[b-pcibk9z92v] {
    color: var(--theme-text-secondary, #64748b);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Welcome Content */
.welcome-content[b-pcibk9z92v] {
    max-width: 1000px;
    width: 100%;
}

/* Welcome Card */
.welcome-card[b-pcibk9z92v] {
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    background: var(--theme-surface, #ffffff);
}

/* Welcome Header */
.welcome-header[b-pcibk9z92v] {
    background: linear-gradient(135deg, var(--theme-primary, #3b82f6) 0%, var(--theme-primary-hover, #2563eb) 100%);
    padding: 3rem;
    text-align: center;
    color: white;
}

.avatar-group[b-pcibk9z92v] {
    margin-bottom: 1.5rem;
}

.invite-icon[b-pcibk9z92v] {
    font-size: 3rem;
    background: rgba(255, 255, 255, 0.2);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.welcome-header h1[b-pcibk9z92v] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.header-subtitle[b-pcibk9z92v] {
    opacity: 0.85;
    font-size: 1.1rem;
    margin: 0;
}

/* Welcome Body */
.welcome-body[b-pcibk9z92v] {
    padding: 3rem;
}

/* Quote */
.personality-quote[b-pcibk9z92v] {
    background: var(--theme-surface-secondary, #f8fafc);
    padding: 1.5rem;
    border-radius: 1rem;
    border-left: 4px solid var(--theme-primary, #3b82f6);
    margin-bottom: 2.5rem;
    font-style: italic;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.quote-mark[b-pcibk9z92v] {
    font-family: serif;
    font-size: 3rem;
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
    line-height: 0;
    vertical-align: middle;
    opacity: 0.3;
}

.quote-end[b-pcibk9z92v] {
    display: block;
    text-align: right;
}

.personality-quote p[b-pcibk9z92v] {
    font-size: 1.25rem;
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
}

/* Content Grid */
.content-grid[b-pcibk9z92v] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3rem;
    align-items: center;
}

@media (max-width: 768px) {
    .content-grid[b-pcibk9z92v] {
        grid-template-columns: 1fr;
    }
}

/* Info Section */
.info-section h2[b-pcibk9z92v] {
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--theme-text-primary, #1e293b);
}

.info-text[b-pcibk9z92v] {
    font-size: 1.1rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.6;
}

/* Features List */
.features-list[b-pcibk9z92v] {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.features-list li[b-pcibk9z92v] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.feature-icon[b-pcibk9z92v] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.feature-success[b-pcibk9z92v] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.feature-info[b-pcibk9z92v] {
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
}

.feature-warning[b-pcibk9z92v] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

/* CTA Section */
.cta-box[b-pcibk9z92v] {
    background: linear-gradient(135deg, var(--theme-primary, #3b82f6) 0%, var(--theme-primary-hover, #2563eb) 100%);
    padding: 2rem;
    border-radius: 1.5rem;
    text-align: center;
    color: white;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.cta-box h3[b-pcibk9z92v] {
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.cta-box > p[b-pcibk9z92v] {
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
    opacity: 0.9;
}

/* Buttons */
.cta-button[b-pcibk9z92v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.cta-primary[b-pcibk9z92v] {
    background: white;
    color: var(--theme-primary, #3b82f6);
    width: 100%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.cta-primary:hover[b-pcibk9z92v] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.signin-text[b-pcibk9z92v] {
    margin-top: 1rem;
    font-size: 0.8rem;
    opacity: 0.8;
}

.signin-text a[b-pcibk9z92v] {
    color: white;
    text-decoration: underline;
}

/* Animation */
.animate-fade-in[b-pcibk9z92v] {
    animation: fadeIn-b-pcibk9z92v 1s ease-out;
}

@keyframes fadeIn-b-pcibk9z92v {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Dark Theme */
.is-dark .welcome-card[b-pcibk9z92v] {
    background: rgba(30, 41, 59, 0.95);
}

.is-dark .personality-quote[b-pcibk9z92v] {
    background: rgba(255, 255, 255, 0.05);
}
/* /Pages/WelcomeVip.razor.rz.scp.css */
/* VIP Welcome Page Styles */
.vip-welcome-page[b-cx5z3441o4] {
    min-height: calc(100vh - 56px);
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    color: white;
    overflow-x: hidden;
    position: relative;
}

/* Space Effects Container - positioned behind content */
.space-effects[b-cx5z3441o4] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Stars - reusing styles from public-pages.css */
.theme-space .star[b-cx5z3441o4] {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: twinkle-b-cx5z3441o4 3s ease-in-out infinite;
}

/* Star positions */
.theme-space .star:nth-child(1)[b-cx5z3441o4] { width: 2px; height: 2px; left: 10%; top: 15%; animation-duration: 4s; animation-delay: 0s; }
.theme-space .star:nth-child(2)[b-cx5z3441o4] { width: 3px; height: 3px; left: 20%; top: 25%; animation-duration: 5s; animation-delay: 1s; }
.theme-space .star:nth-child(3)[b-cx5z3441o4] { width: 2px; height: 2px; left: 35%; top: 10%; animation-duration: 4.5s; animation-delay: 0.5s; }
.theme-space .star:nth-child(4)[b-cx5z3441o4] { width: 2px; height: 2px; left: 45%; top: 30%; animation-duration: 3.5s; animation-delay: 2s; }
.theme-space .star:nth-child(5)[b-cx5z3441o4] { width: 3px; height: 3px; left: 55%; top: 20%; animation-duration: 4s; animation-delay: 1.5s; }
.theme-space .star:nth-child(6)[b-cx5z3441o4] { width: 2px; height: 2px; left: 70%; top: 35%; animation-duration: 5s; animation-delay: 0.3s; }
.theme-space .star:nth-child(7)[b-cx5z3441o4] { width: 2px; height: 2px; left: 80%; top: 15%; animation-duration: 4s; animation-delay: 2.5s; }
.theme-space .star:nth-child(8)[b-cx5z3441o4] { width: 3px; height: 3px; left: 90%; top: 25%; animation-duration: 4.5s; animation-delay: 1.2s; }
.theme-space .star:nth-child(9)[b-cx5z3441o4] { width: 2px; height: 2px; left: 15%; top: 45%; animation-duration: 5s; animation-delay: 0.8s; }
.theme-space .star:nth-child(10)[b-cx5z3441o4] { width: 2px; height: 2px; left: 25%; top: 55%; animation-duration: 4s; animation-delay: 1.8s; }
.theme-space .star:nth-child(11)[b-cx5z3441o4] { width: 3px; height: 3px; left: 40%; top: 50%; animation-duration: 4.5s; animation-delay: 0.4s; }
.theme-space .star:nth-child(12)[b-cx5z3441o4] { width: 2px; height: 2px; left: 60%; top: 45%; animation-duration: 5s; animation-delay: 2.2s; }
.theme-space .star:nth-child(13)[b-cx5z3441o4] { width: 2px; height: 2px; left: 75%; top: 55%; animation-duration: 3.5s; animation-delay: 1.4s; }
.theme-space .star:nth-child(14)[b-cx5z3441o4] { width: 3px; height: 3px; left: 85%; top: 50%; animation-duration: 4s; animation-delay: 0.6s; }
.theme-space .star:nth-child(15)[b-cx5z3441o4] { width: 2px; height: 2px; left: 5%; top: 70%; animation-duration: 5s; animation-delay: 1.9s; }
.theme-space .star:nth-child(16)[b-cx5z3441o4] { width: 2px; height: 2px; left: 30%; top: 75%; animation-duration: 4.5s; animation-delay: 0.2s; }
.theme-space .star:nth-child(17)[b-cx5z3441o4] { width: 3px; height: 3px; left: 50%; top: 65%; animation-duration: 4s; animation-delay: 2.6s; }
.theme-space .star:nth-child(18)[b-cx5z3441o4] { width: 2px; height: 2px; left: 65%; top: 70%; animation-duration: 5s; animation-delay: 1.1s; }
.theme-space .star:nth-child(19)[b-cx5z3441o4] { width: 2px; height: 2px; left: 78%; top: 75%; animation-duration: 4s; animation-delay: 0.9s; }
.theme-space .star:nth-child(20)[b-cx5z3441o4] { width: 3px; height: 3px; left: 92%; top: 68%; animation-duration: 4.5s; animation-delay: 2.1s; }

@keyframes twinkle-b-cx5z3441o4 {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* Shooting Star - subtle, long delay */
.theme-space .shooting-star[b-cx5z3441o4] {
    position: absolute;
    top: 45%;
    left: -50px;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9);
    opacity: 0;
    animation: shootingStar-b-cx5z3441o4 45s linear infinite;
    animation-delay: 15s;
    z-index: 2;
}

.theme-space .shooting-star[b-cx5z3441o4]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 120px;
    height: 2px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(168, 85, 247, 0.5), transparent);
    border-radius: 2px;
    transform: translateY(-50%) rotate(-20deg);
    transform-origin: right center;
}

.theme-space .shooting-star-2[b-cx5z3441o4] {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.8);
    opacity: 0;
    animation: shootingStar2-b-cx5z3441o4 55s linear infinite;
    animation-delay: 35s;
    z-index: 2;
}

.theme-space .shooting-star-2[b-cx5z3441o4]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 90px;
    height: 1.5px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(6, 182, 212, 0.5), transparent);
    border-radius: 2px;
    transform: translateY(-50%) rotate(18deg);
    transform-origin: right center;
}

@keyframes shootingStar-b-cx5z3441o4 {
    0%, 45% { opacity: 0; left: -5%; top: 45%; }
    47% { opacity: 1; left: 5%; top: 40%; }
    52% { opacity: 1; left: 25%; top: 32%; }
    58% { opacity: 1; left: 45%; top: 24%; }
    64% { opacity: 1; left: 65%; top: 16%; }
    70% { opacity: 0.8; left: 85%; top: 10%; }
    73%, 100% { opacity: 0; left: 100%; top: 6%; }
}

@keyframes shootingStar2-b-cx5z3441o4 {
    0%, 55% { opacity: 0; left: 10%; top: 12%; }
    57% { opacity: 1; left: 18%; top: 18%; }
    63% { opacity: 1; left: 38%; top: 32%; }
    69% { opacity: 1; left: 58%; top: 46%; }
    75% { opacity: 0.7; left: 78%; top: 58%; }
    79%, 100% { opacity: 0; left: 95%; top: 68%; }
}

/* Theme-specific backgrounds */
.vip-welcome-page.theme-executive[b-cx5z3441o4] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    color: #1e293b;
}

.vip-welcome-page.theme-cloud[b-cx5z3441o4] {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
    color: #1e293b;
}

.vip-welcome-page.theme-space[b-cx5z3441o4] {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.vip-welcome-page.theme-ocean[b-cx5z3441o4] {
    background: linear-gradient(135deg, #1a2980 0%, #26d0ce 100%);
}

.vip-welcome-page.theme-nature[b-cx5z3441o4] {
    background: linear-gradient(135deg, #134e5e 0%, #71b280 100%);
}

.vip-welcome-page.theme-winter[b-cx5z3441o4] {
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
}

.vip-welcome-page.theme-mystic[b-cx5z3441o4] {
    background: linear-gradient(135deg, #4a1a6b 0%, #9333ea 50%, #c026d3 100%);
}

.vip-welcome-page.theme-tron[b-cx5z3441o4] {
    background: linear-gradient(135deg, #0a0a0a 0%, #001a2c 50%, #0a0a0a 100%);
}

/* Light theme overrides (Executive, Cloud) */
.vip-welcome-page.theme-executive .hero-title[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .hero-title[b-cx5z3441o4] {
    background: linear-gradient(90deg, #1e293b, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vip-welcome-page.theme-executive .hero-subtitle[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .hero-subtitle[b-cx5z3441o4] {
    color: #475569;
}

.vip-welcome-page.theme-executive .vip-badge[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .vip-badge[b-cx5z3441o4] {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.vip-welcome-page.theme-executive .message-card[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .message-card[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #1e293b;
}

.vip-welcome-page.theme-executive .message-card cite[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .message-card cite[b-cx5z3441o4] {
    color: #64748b;
}

.vip-welcome-page.theme-executive .feature-card[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .feature-card[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: #1e293b;
}

.vip-welcome-page.theme-executive .feature-card:hover[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .feature-card:hover[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
}

.vip-welcome-page.theme-executive .feature-card p[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .feature-card p[b-cx5z3441o4] {
    color: #475569;
}

.vip-welcome-page.theme-executive .feature-reason[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .feature-reason[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.vip-welcome-page.theme-executive .location-card[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .location-card[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.05);
    color: #1e293b;
}

.vip-welcome-page.theme-executive .cta-card[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .cta-card[b-cx5z3441o4] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #1e293b;
}

.vip-welcome-page.theme-executive .cta-card > p[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .cta-card > p[b-cx5z3441o4] {
    color: #475569;
}

.vip-welcome-page.theme-executive .btn-cta[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .btn-cta[b-cx5z3441o4] {
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

.vip-welcome-page.theme-executive .btn-cta:hover[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .btn-cta:hover[b-cx5z3441o4] {
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.vip-welcome-page.theme-executive .cta-note a[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .cta-note a[b-cx5z3441o4] {
    color: #6366f1;
}

.vip-welcome-page.theme-executive .section-subtitle[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .section-subtitle[b-cx5z3441o4] {
    color: #64748b;
}

.vip-welcome-page.theme-executive .vip-footer[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .vip-footer[b-cx5z3441o4] {
    color: #64748b;
}

.vip-welcome-page.theme-executive .hero-particles[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .hero-particles[b-cx5z3441o4] {
    display: none;
}

/* Fun Facts Section */
.fun-facts-section[b-cx5z3441o4] {
    padding: 2rem;
}

.fun-facts-card[b-cx5z3441o4] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.fun-facts-card h3[b-cx5z3441o4] {
    text-align: center;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.fun-fact-item[b-cx5z3441o4] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.fun-fact-item:not(:last-child)[b-cx5z3441o4] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fun-fact-label[b-cx5z3441o4] {
    font-weight: 600;
    font-size: 0.9rem;
    opacity: 0.8;
    white-space: nowrap;
}

.fun-fact-value[b-cx5z3441o4] {
    font-size: 1rem;
}

/* Light theme fun facts */
.vip-welcome-page.theme-executive .fun-facts-card[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .fun-facts-card[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: #1e293b;
}

.vip-welcome-page.theme-executive .fun-fact-item:not(:last-child)[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .fun-fact-item:not(:last-child)[b-cx5z3441o4] {
    border-bottom: 1px solid rgba(99, 102, 241, 0.1);
}

/* Tron special accents */
.vip-welcome-page.theme-tron .vip-badge[b-cx5z3441o4] {
    background: linear-gradient(90deg, #00d4ff, #00ffcc);
    color: #0a0a0a;
}

.vip-welcome-page.theme-tron .hero-title[b-cx5z3441o4] {
    background: linear-gradient(90deg, #fff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vip-welcome-page.theme-tron .btn-cta[b-cx5z3441o4] {
    background: linear-gradient(90deg, #00d4ff, #00ffcc);
    color: #0a0a0a;
}

.vip-welcome-page.theme-tron .cta-note a[b-cx5z3441o4] {
    color: #00d4ff;
}

.vip-welcome-page.theme-tron .feature-reason[b-cx5z3441o4] {
    background: rgba(0, 212, 255, 0.15);
    color: #00d4ff;
}

.vip-welcome-page.theme-tron .cta-card[b-cx5z3441o4] {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(0, 255, 204, 0.05));
    border: 1px solid rgba(0, 212, 255, 0.2);
}

/* Mystic special accents */
.vip-welcome-page.theme-mystic .vip-badge[b-cx5z3441o4] {
    background: linear-gradient(90deg, #c026d3, #9333ea);
}

.vip-welcome-page.theme-mystic .hero-title[b-cx5z3441o4] {
    background: linear-gradient(90deg, #fff, #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vip-welcome-page.theme-mystic .btn-cta[b-cx5z3441o4] {
    background: linear-gradient(90deg, #c026d3, #9333ea);
}

.vip-welcome-page.theme-mystic .cta-note a[b-cx5z3441o4] {
    color: #e879f9;
}

.vip-welcome-page.theme-mystic .feature-reason[b-cx5z3441o4] {
    background: rgba(192, 38, 211, 0.2);
    color: #e879f9;
}

.vip-welcome-page.theme-mystic .cta-card[b-cx5z3441o4] {
    background: linear-gradient(135deg, rgba(192, 38, 211, 0.15), rgba(147, 51, 234, 0.1));
    border: 1px solid rgba(192, 38, 211, 0.3);
}

/* Loading State */
.loading-state[b-cx5z3441o4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    text-align: center;
}

.loading-icon[b-cx5z3441o4] {
    font-size: 4rem;
    animation: pulse-b-cx5z3441o4 1.5s ease-in-out infinite;
}

@keyframes pulse-b-cx5z3441o4 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* Error State */
.error-state[b-cx5z3441o4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 56px);
    text-align: center;
    padding: 2rem;
}

.error-state h2[b-cx5z3441o4] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

/* VIP Content */
.vip-content[b-cx5z3441o4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Hero Section */
.vip-hero[b-cx5z3441o4] {
    text-align: center;
    padding: 6rem 2rem;
    position: relative;
}

.hero-particles[b-cx5z3441o4] {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 50px 160px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 90px 40px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.8), transparent),
        radial-gradient(3px 3px at 160px 120px, rgba(255,255,255,0.5), transparent);
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: twinkle-b-cx5z3441o4 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes twinkle-b-cx5z3441o4 {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.hero-content[b-cx5z3441o4] {
    position: relative;
    z-index: 1;
}

.vip-badge[b-cx5z3441o4] {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(90deg, #f5af19, #f12711);
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 2rem;
    animation: shimmer-b-cx5z3441o4 2s ease-in-out infinite;
}

@keyframes shimmer-b-cx5z3441o4 {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 175, 25, 0.5); }
    50% { box-shadow: 0 0 40px rgba(245, 175, 25, 0.8); }
}

.hero-title[b-cx5z3441o4] {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #fff, #f5af19);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle[b-cx5z3441o4] {
    font-size: 1.5rem;
    opacity: 0.9;
}

/* Message Section */
.message-section[b-cx5z3441o4] {
    padding: 2rem;
}

.message-card[b-cx5z3441o4] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-avatar[b-cx5z3441o4] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.message-card blockquote[b-cx5z3441o4] {
    font-size: 1.5rem;
    font-style: italic;
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

.message-card cite[b-cx5z3441o4] {
    font-size: 1rem;
    opacity: 0.8;
}

/* Interests Section */
.interests-section[b-cx5z3441o4] {
    padding: 4rem 2rem;
    text-align: center;
}

.interests-section h2[b-cx5z3441o4] {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.interests-grid[b-cx5z3441o4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.interest-card[b-cx5z3441o4] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.interest-card:hover[b-cx5z3441o4] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px transparent;
}

.interest-icon[b-cx5z3441o4] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.interest-card h3[b-cx5z3441o4] {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.interest-card p[b-cx5z3441o4] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin: 0;
}

/* Browns card special styling */
.interest-card.browns[b-cx5z3441o4] {
    border-color: #FF3C00;
    background: linear-gradient(135deg, rgba(255, 60, 0, 0.2), rgba(49, 29, 0, 0.3));
}

.interest-card.astrology[b-cx5z3441o4] {
    border-color: #9b59b6;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(142, 68, 173, 0.3));
}

.interest-card.magic[b-cx5z3441o4] {
    border-color: #3498db;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(41, 128, 185, 0.3));
}

.interest-card.dogs[b-cx5z3441o4] {
    border-color: #e67e22;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.2), rgba(211, 84, 0, 0.3));
}

/* Features Section */
.features-section[b-cx5z3441o4] {
    padding: 4rem 2rem;
    text-align: center;
}

.features-section h2[b-cx5z3441o4] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.section-subtitle[b-cx5z3441o4] {
    opacity: 0.8;
    margin-bottom: 3rem;
}

.features-grid[b-cx5z3441o4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.feature-card[b-cx5z3441o4] {
    --feature-gradient: linear-gradient(135deg, #667eea, #764ba2);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card[b-cx5z3441o4]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--feature-gradient);
}

.feature-card:hover[b-cx5z3441o4] {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.feature-icon[b-cx5z3441o4] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
}

.feature-card h3[b-cx5z3441o4] {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.feature-card p[b-cx5z3441o4] {
    font-size: 0.95rem;
    opacity: 0.9;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.feature-reason[b-cx5z3441o4] {
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    background: rgba(245, 175, 25, 0.2);
    border-radius: 50px;
    color: #f5af19;
}

/* Location Section */
.location-section[b-cx5z3441o4] {
    padding: 2rem;
}

.location-card[b-cx5z3441o4] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.location-icon[b-cx5z3441o4] {
    font-size: 2rem;
}

.location-card p[b-cx5z3441o4] {
    margin: 0;
    font-size: 1rem;
}

/* CTA Section */
.cta-section[b-cx5z3441o4] {
    padding: 4rem 2rem;
    text-align: center;
}

/* What's New Section (existing users) */
.whats-new-section[b-cx5z3441o4] {
    padding: 4rem 2rem;
    text-align: center;
}

.whats-new-section h2[b-cx5z3441o4] {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.whats-new-grid[b-cx5z3441o4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.whats-new-card[b-cx5z3441o4] {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease;
}

.whats-new-card:hover[b-cx5z3441o4] {
    transform: translateY(-4px);
}

.whats-new-icon[b-cx5z3441o4] {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.whats-new-card h3[b-cx5z3441o4] {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.whats-new-card p[b-cx5z3441o4] {
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.5;
    margin: 0;
}

/* Light theme What's New overrides */
.vip-welcome-page.theme-executive .whats-new-card[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .whats-new-card[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: #1e293b;
}

.vip-welcome-page.theme-executive .whats-new-card p[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .whats-new-card p[b-cx5z3441o4] {
    color: #475569;
}

/* Companion Teaser Section (all users) */
.companion-teaser-section[b-cx5z3441o4] {
    padding: 3rem 2rem;
}

.companion-teaser[b-cx5z3441o4] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 3rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

.teaser-orb[b-cx5z3441o4] {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    animation: golden-pulse-b-cx5z3441o4 2.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes golden-pulse-b-cx5z3441o4 {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.4));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 28px rgba(255, 215, 0, 0.7));
    }
}

.companion-teaser h2[b-cx5z3441o4] {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.companion-teaser p[b-cx5z3441o4] {
    font-size: 1rem;
    opacity: 0.85;
    line-height: 1.6;
    margin: 0;
}

/* Light theme companion teaser overrides */
.vip-welcome-page.theme-executive .companion-teaser[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .companion-teaser[b-cx5z3441o4] {
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(245, 175, 25, 0.2);
    color: #1e293b;
}

.vip-welcome-page.theme-executive .companion-teaser p[b-cx5z3441o4],
.vip-welcome-page.theme-cloud .companion-teaser p[b-cx5z3441o4] {
    color: #475569;
}

.cta-card[b-cx5z3441o4] {
    background: linear-gradient(135deg, rgba(245, 175, 25, 0.2), rgba(241, 39, 17, 0.2));
    border-radius: 32px;
    padding: 4rem;
    border: 1px solid rgba(245, 175, 25, 0.3);
    max-width: 600px;
    margin: 0 auto;
}

.cta-card h2[b-cx5z3441o4] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.cta-card > p[b-cx5z3441o4] {
    opacity: 0.9;
    margin-bottom: 2rem;
}

.btn-cta[b-cx5z3441o4] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(90deg, #f5af19, #f12711);
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cta:hover[b-cx5z3441o4] {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(245, 175, 25, 0.4);
}

.btn-arrow[b-cx5z3441o4] {
    transition: transform 0.3s ease;
}

.btn-cta:hover .btn-arrow[b-cx5z3441o4] {
    transform: translateX(5px);
}

.cta-note[b-cx5z3441o4] {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.8;
}

.cta-note a[b-cx5z3441o4] {
    color: #f5af19;
    text-decoration: underline;
}

/* VIP Footer */
.vip-footer[b-cx5z3441o4] {
    text-align: center;
    padding: 3rem 2rem;
    opacity: 0.7;
    font-size: 1.1rem;
}

/* Standard Welcome (non-VIP) */
.standard-welcome[b-cx5z3441o4] {
    min-height: calc(100vh - 56px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

.standard-welcome h1[b-cx5z3441o4] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.standard-welcome blockquote[b-cx5z3441o4] {
    font-style: italic;
    font-size: 1.25rem;
    margin: 2rem 0;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title[b-cx5z3441o4] {
        font-size: 2.5rem;
    }

    .hero-subtitle[b-cx5z3441o4] {
        font-size: 1.1rem;
    }

    .interests-grid[b-cx5z3441o4] {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid[b-cx5z3441o4] {
        grid-template-columns: 1fr;
    }

    .whats-new-grid[b-cx5z3441o4] {
        grid-template-columns: 1fr;
    }

    .cta-card[b-cx5z3441o4] {
        padding: 2rem;
    }

    .companion-teaser[b-cx5z3441o4] {
        padding: 2rem;
    }
}

@media (max-width: 480px) {
    .interests-grid[b-cx5z3441o4] {
        grid-template-columns: 1fr;
    }
    
    .vip-hero[b-cx5z3441o4] {
        padding: 4rem 1rem;
    }
}
/* /Pages/Work/DeleteWorkItemDialog.razor.rz.scp.css */
/* ============================================
   DELETE WORK ITEM DIALOG - Scoped CSS
   ============================================ */

/* Text Elements */
.confirm-text[b-jrfou4ql4r] {
    font-size: 0.95rem;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.instruction-text[b-jrfou4ql4r] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

.warning-text[b-jrfou4ql4r] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

.warning-icon[b-jrfou4ql4r] {
    color: #ef4444;
}

/* Alerts */
.alert[b-jrfou4ql4r] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.alert svg[b-jrfou4ql4r] {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-warning[b-jrfou4ql4r] {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.alert-warning svg[b-jrfou4ql4r] {
    color: #f59e0b;
}

.alert-error[b-jrfou4ql4r] {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.alert-error svg[b-jrfou4ql4r] {
    color: #ef4444;
}

/* Action Options (Radio Group) */
.action-options[b-jrfou4ql4r] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-option[b-jrfou4ql4r] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--theme-border, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.action-option:hover[b-jrfou4ql4r] {
    border-color: var(--theme-text-muted, #cbd5e1);
}

.action-option input[type="radio"][b-jrfou4ql4r] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-custom[b-jrfou4ql4r] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--theme-text-muted, #cbd5e1);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 2px;
}

.action-option.selected .radio-custom[b-jrfou4ql4r]::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Unassign Option */
.action-option.option-unassign.selected[b-jrfou4ql4r] {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

.action-option.option-unassign.selected .radio-custom[b-jrfou4ql4r] {
    border-color: #3b82f6;
}

.action-option.option-unassign.selected .radio-custom[b-jrfou4ql4r]::after {
    background: #3b82f6;
}

/* Delete Option */
.action-option.option-delete.selected[b-jrfou4ql4r] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}

.action-option.option-delete.selected .radio-custom[b-jrfou4ql4r] {
    border-color: #ef4444;
}

.action-option.option-delete.selected .radio-custom[b-jrfou4ql4r]::after {
    background: #ef4444;
}

/* Cancel Option */
.action-option.option-cancel.selected[b-jrfou4ql4r] {
    border-color: #64748b;
    background: rgba(100, 116, 139, 0.08);
}

.action-option.option-cancel.selected .radio-custom[b-jrfou4ql4r] {
    border-color: #64748b;
}

.action-option.option-cancel.selected .radio-custom[b-jrfou4ql4r]::after {
    background: #64748b;
}

.option-content[b-jrfou4ql4r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.option-title[b-jrfou4ql4r] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1e293b);
}

.option-title svg[b-jrfou4ql4r] {
    color: var(--theme-text-secondary, #64748b);
}

.option-desc[b-jrfou4ql4r] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 520px) {
    .action-option[b-jrfou4ql4r] {
        padding: 12px 14px;
    }
}

/* Dark theme - alert readability overrides */
.is-dark .alert-warning[b-jrfou4ql4r] {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.3);
}

.is-dark .alert-error[b-jrfou4ql4r] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}
/* /Pages/Work/GanttChart.razor.rz.scp.css */
/* ===== Gantt Chart Page Styles ===== */
/* Theme-aware timeline. Colors are pulled from --theme-* vars and --gantt-* vars
   declared in wwwroot/css/utilities.css so each of the 8 themes can tune saturation
   without touching this file. */

/* Loading */
.gantt-loading[b-ya55lm2rht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: var(--theme-text-secondary);
}

.gantt-loading-spinner[b-ya55lm2rht] {
    width: 36px;
    height: 36px;
    border: 3px solid var(--theme-border);
    border-top-color: var(--theme-primary);
    border-radius: 50%;
    animation: gantt-spin-b-ya55lm2rht 0.8s linear infinite;
}

@keyframes gantt-spin-b-ya55lm2rht {
    to { transform: rotate(360deg); }
}

/* Empty state */
.gantt-empty[b-ya55lm2rht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 0.75rem;
    color: var(--theme-text-muted);
    text-align: center;
}

.gantt-empty h3[b-ya55lm2rht] {
    margin: 0;
    font-size: 1.1rem;
    color: var(--theme-text-secondary);
}

.gantt-empty p[b-ya55lm2rht] {
    margin: 0;
    font-size: 0.875rem;
}

/* Controls bar */
.gantt-controls[b-ya55lm2rht] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.gantt-controls-left[b-ya55lm2rht] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.gantt-controls-right[b-ya55lm2rht] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.gantt-filter-group[b-ya55lm2rht] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.gantt-filter-group label[b-ya55lm2rht] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--theme-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.gantt-select[b-ya55lm2rht] {
    min-width: 160px;
    font-size: 0.85rem;
    padding: 6px 10px !important;
}

.gantt-zoom-controls[b-ya55lm2rht] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    padding: 2px;
}

.gantt-zoom-label[b-ya55lm2rht] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
    min-width: 56px;
    text-align: center;
    font-weight: 600;
}

/* ===== Main Gantt container ===== */
.gantt-wrapper[b-ya55lm2rht] {
    position: relative; /* so .gantt-hover-card can anchor */
    border: 1px solid var(--theme-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--theme-surface);
    box-shadow: 0 1px 4px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
}

/* Visibility gate — applied on first render until OnAfterRenderAsync has scrolled
   the viewport to the "today-anchored" position. The chart must exist in the DOM
   (so JS can scrollTo it) but must be invisible to the user until the scroll
   lands, otherwise they see a frame of scroll-left=0 showing the earliest task
   date (possibly years in the past).

   `visibility: hidden` + `height: 0` hides both pixels and layout space, so the
   stacked loading spinner above it owns the vertical room. */
.gantt-wrapper.gantt-not-ready[b-ya55lm2rht] {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0;
    border: 0;
}

.gantt-container[b-ya55lm2rht] {
    display: flex;
    /* Default align-items: stretch — keeps labels & timeline the same height so the
       labels column's border-right and the today-marker (top:0 bottom:0) both
       extend the full chart height. */
    overflow-x: auto;
    /* Deliberately no overflow-y / max-height: when the chart has more rows than
       fit on screen, browsers stretch flex items only to the visible viewport
       height (not the full content height), which causes the labels border and
       today-marker to terminate mid-chart. Letting the page scroll vertically
       avoids the nested-scrollbar UX too. */
    position: relative;
    scroll-behavior: smooth;
}

/* Themed scrollbar to match the wrapper */
.gantt-container[b-ya55lm2rht]::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.gantt-container[b-ya55lm2rht]::-webkit-scrollbar-thumb {
    background: var(--theme-border);
    border-radius: 10px;
}

.gantt-container[b-ya55lm2rht]::-webkit-scrollbar-thumb:hover {
    background: var(--theme-text-muted);
}

/* ===== Labels column (left side) ===== */
.gantt-labels[b-ya55lm2rht] {
    min-width: 260px;
    max-width: 360px;
    flex: 0 0 320px;
    border-right: 2px solid var(--theme-border);
    background-color: var(--theme-surface);
    position: sticky;
    left: 0;
    /* z-index has to beat .gantt-bar (2), .gantt-today-marker (z: 4), and the
       sticky timeline-header (z: 5). Combined with isolation: isolate this forces a
       clean stacking context so bars can never bleed through the labels column. */
    z-index: 20;
    isolation: isolate;
    /* NOTE: deliberately NOT using transform: translateZ(0) here. It creates a new
       containing block which can clip sticky descendants (the header) and can
       shorten the painted height of the column, leaving the right-border dangling
       mid-chart. The opaque background + z-index 20 + isolation prevents overlap
       on its own. */
}

.gantt-labels-header[b-ya55lm2rht] {
    height: 62px;
    display: flex;
    align-items: flex-end;
    padding: 0 12px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted);
    border-bottom: 1px solid var(--theme-border);
    background-color: var(--theme-surface);
    position: sticky;
    top: 0;
    z-index: 21;
}

.gantt-label-row[b-ya55lm2rht] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-bottom: 1px solid rgba(var(--theme-border-rgb, 0, 0, 0), 0.05);
    cursor: pointer;
    transition: background-color 0.15s;
    overflow: hidden;
    position: relative;
    /* Explicit opaque background per row — belt-and-suspenders so bars can't
       show through even if the parent column's background fails to paint
       (e.g. scoped-CSS hot-reload edge cases). */
    background-color: var(--theme-surface);
    z-index: 1;
}

.gantt-label-row:hover[b-ya55lm2rht] {
    background: rgba(var(--theme-primary-rgb), 0.06);
}

.gantt-label-project[b-ya55lm2rht] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--theme-text-primary);
    background: rgba(var(--theme-primary-rgb), 0.03);
}

.gantt-label-task[b-ya55lm2rht] {
    font-size: 0.78rem;
    color: var(--theme-text-secondary);
    padding-left: 28px;
}

.gantt-expand-icon[b-ya55lm2rht] {
    font-size: 0.6rem;
    color: var(--theme-text-muted);
    width: 12px;
    text-align: center;
    flex-shrink: 0;
}

.gantt-project-name[b-ya55lm2rht] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.gantt-task-title[b-ya55lm2rht] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.gantt-task-count[b-ya55lm2rht] {
    font-size: 0.65rem;
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-primary-ink, var(--theme-primary));
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Themed high-priority indicator (replaces the 🔴 emoji). Rendered as a solid
   circle so it picks up var(--theme-danger) per theme — works in Tron, Executive,
   everything between. */
.gantt-priority-flag[b-ya55lm2rht] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-danger, #ef4444);
    box-shadow: 0 0 0 2px rgba(var(--theme-danger-rgb, 239, 68, 68), 0.2);
    flex-shrink: 0;
}

/* Per-row action buttons (edit pencil + open-in-new-tab). Hidden by default and
   revealed on row hover so they don't clutter the dense labels column. The buttons
   themselves are square 22px hit targets — large enough to click reliably without
   crowding the row text. Stop-propagation lives in the markup, not here. */
.gantt-row-btn[b-ya55lm2rht] {
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--theme-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.gantt-row-btn svg[b-ya55lm2rht] {
    width: 13px;
    height: 13px;
}

/* Reveal on row hover. Using the parent .gantt-label-row so both the pencil and
   open-page buttons appear together — feels less twitchy than per-button hover. */
.gantt-label-row:hover .gantt-row-btn[b-ya55lm2rht],
.gantt-row-btn:focus-visible[b-ya55lm2rht] {
    opacity: 0.7;
}

.gantt-row-btn:hover[b-ya55lm2rht] {
    opacity: 1 !important;
    background: rgba(var(--theme-primary-rgb), 0.12);
    border-color: rgba(var(--theme-primary-rgb), 0.25);
    color: var(--theme-primary-ink, var(--theme-primary));
}

.gantt-row-btn:focus-visible[b-ya55lm2rht] {
    outline: 2px solid var(--theme-primary);
    outline-offset: 1px;
}

/* Dark themes: primary-on-dark contrast is fine, but the resting hover background
   reads stronger against the dark surface — drop it a bit so the button doesn't
   shout when revealed. */
.is-dark .gantt-row-btn:hover[b-ya55lm2rht] {
    background: rgba(var(--theme-primary-rgb), 0.18);
    border-color: rgba(var(--theme-primary-rgb), 0.35);
    color: #ffffff;
}

/* Status dots */
.gantt-status-dot[b-ya55lm2rht] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-open[b-ya55lm2rht] { background: var(--gantt-status-open, #3b82f6); }
.dot-inprogress[b-ya55lm2rht] { background: var(--gantt-status-inprogress, #f59e0b); }
.dot-scheduled[b-ya55lm2rht] { background: var(--gantt-status-scheduled, #8b5cf6); }
.dot-planning[b-ya55lm2rht] { background: var(--gantt-status-planning, #22d3ee); }
.dot-testing[b-ya55lm2rht] { background: var(--gantt-status-testing, #f97316); }
.dot-complete[b-ya55lm2rht] { background: var(--gantt-status-complete, #10b981); }
.dot-onhold[b-ya55lm2rht] { background: var(--gantt-status-onhold, #64748b); }

/* ===== Timeline area (right side) ===== */
.gantt-timeline[b-ya55lm2rht] {
    position: relative;
    flex-shrink: 0; /* explicit width set inline; never let flex shrink it */
    /* NOTE: do NOT add `contain: paint` here — it establishes a new block formatting
       context that clamps the timeline's height mid-flow in this flex layout, which
       causes both the labels border-right and the today-marker (top:0 bottom:0) to
       stop halfway down. Overlap prevention comes from the sticky labels column's
       opaque background + z-index + isolation — bars can't position negatively
       into labels anyway (left is clamped to >= 0 by GetBarPosition). */
}

.gantt-timeline-header[b-ya55lm2rht] {
    display: block;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--theme-surface);
}

.gantt-months-row[b-ya55lm2rht] {
    height: 28px;
    position: relative;
}

.gantt-month-cell[b-ya55lm2rht] {
    position: absolute;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--theme-border);
    border-right: 1px solid var(--theme-border);
    background: var(--theme-surface);
    box-sizing: border-box;
}

.gantt-days-row[b-ya55lm2rht] {
    height: 34px;
    position: relative;
    border-bottom: 1px solid var(--theme-border);
}

.gantt-day-cell[b-ya55lm2rht] {
    position: absolute;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--theme-text-muted);
    border-right: 1px solid rgba(var(--theme-border-rgb, 0, 0, 0), 0.06);
    box-sizing: border-box;
    /* "MMM d" Monday labels are wider than a single day-cell at lower zooms; keep
       them on one line and let them overflow horizontally into the (unlabeled)
       Tue/Wed cells. With one labeled cell per 7 cells, no collision risk. */
    white-space: nowrap;
}

.gantt-day-today[b-ya55lm2rht] {
    background: rgba(var(--theme-primary-rgb), 0.12);
    font-weight: 700;
    color: var(--theme-primary-ink, var(--theme-primary));
}

.gantt-day-weekend[b-ya55lm2rht] {
    background: rgba(0, 0, 0, 0.04);
}

/* Major tick — Monday week markers at medium zoom */
.gantt-day-major[b-ya55lm2rht] {
    border-right: 1px solid rgba(var(--theme-border-rgb, 0, 0, 0), 0.18);
    font-weight: 700;
    color: var(--theme-text-secondary);
    font-size: 0.68rem;
}

/* Today marker line */
.gantt-today-marker[b-ya55lm2rht] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--theme-primary);
    z-index: 4;
    opacity: 0.85;
    pointer-events: none;
}

.gantt-today-pill[b-ya55lm2rht] {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--theme-primary);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ===== Bar area ===== */
.gantt-bars-area[b-ya55lm2rht] {
    position: relative;
}

.gantt-bar-row[b-ya55lm2rht] {
    height: 36px;
    position: relative;
    border-bottom: 1px solid rgba(var(--theme-border-rgb, 0, 0, 0), 0.05);
}

.gantt-bar-project-row[b-ya55lm2rht] {
    background: rgba(var(--theme-primary-rgb), 0.025);
}

/* Bars */
.gantt-bar[b-ya55lm2rht] {
    position: absolute;
    top: 6px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: grab;
    transition: filter 0.15s, box-shadow 0.15s;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
}

.gantt-bar:active[b-ya55lm2rht] {
    cursor: grabbing;
}

.gantt-bar:hover[b-ya55lm2rht] {
    filter: brightness(1.08);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    z-index: 3;
}

.gantt-bar-label[b-ya55lm2rht] {
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.gantt-bar-check[b-ya55lm2rht] {
    font-size: 0.7rem;
    margin-left: auto;
    color: #fff;
    flex-shrink: 0;
}

/* Priority accent — a bright left edge on the bar */
.gantt-bar-priority-high[b-ya55lm2rht]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--theme-danger, #ef4444);
    border-radius: 6px 0 0 6px;
}

/* Status bar colors — use themeable variables with sensible fallbacks */
.gantt-bar-open[b-ya55lm2rht] {
    background: linear-gradient(135deg,
        var(--gantt-status-open-a, #60a5fa),
        var(--gantt-status-open-b, #3b82f6));
}

.gantt-bar-inprogress[b-ya55lm2rht] {
    background: linear-gradient(135deg,
        var(--gantt-status-inprogress-a, #fbbf24),
        var(--gantt-status-inprogress-b, #f59e0b));
}

.gantt-bar-scheduled[b-ya55lm2rht] {
    background: linear-gradient(135deg,
        var(--gantt-status-scheduled-a, #a78bfa),
        var(--gantt-status-scheduled-b, #8b5cf6));
}

.gantt-bar-planning[b-ya55lm2rht] {
    background: linear-gradient(135deg,
        var(--gantt-status-planning-a, #67e8f9),
        var(--gantt-status-planning-b, #22d3ee));
}

.gantt-bar-testing[b-ya55lm2rht] {
    background: linear-gradient(135deg,
        var(--gantt-status-testing-a, #fb923c),
        var(--gantt-status-testing-b, #f97316));
}

.gantt-bar-complete[b-ya55lm2rht] {
    background: linear-gradient(135deg,
        var(--gantt-status-complete-a, #34d399),
        var(--gantt-status-complete-b, #10b981));
    opacity: 0.85;
}

.gantt-bar-onhold[b-ya55lm2rht] {
    background: linear-gradient(135deg,
        var(--gantt-status-onhold-a, #94a3b8),
        var(--gantt-status-onhold-b, #64748b));
}

.gantt-bar-overdue[b-ya55lm2rht] {
    box-shadow: 0 0 0 2px var(--theme-danger, #ef4444),
                0 2px 6px rgba(var(--theme-danger-rgb, 239, 68, 68), 0.3);
}

/* Project summary bar */
.gantt-bar-project-summary[b-ya55lm2rht] {
    background: rgba(var(--theme-primary-rgb), 0.12);
    border: 1px dashed rgba(var(--theme-primary-rgb), 0.3);
    top: 12px;
    height: 12px;
    border-radius: 3px;
    cursor: default;
}

.gantt-bar-project-summary:hover[b-ya55lm2rht] {
    filter: none;
    box-shadow: none;
}

/* Dot marker for tasks without date ranges */
.gantt-bar-dot[b-ya55lm2rht] {
    width: 12px !important;
    height: 12px;
    top: 12px;
    border-radius: 50%;
    padding: 0;
}

.gantt-bar-dot .gantt-bar-handle[b-ya55lm2rht] {
    display: none;
}

/* ===== Resize handles (hover to reveal) ===== */
.gantt-bar-handle[b-ya55lm2rht] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background: transparent;
    cursor: ew-resize;
    z-index: 3;
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease;
}

.gantt-bar:hover .gantt-bar-handle[b-ya55lm2rht] {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.45);
}

.gantt-bar-handle:hover[b-ya55lm2rht] {
    background-color: rgba(255, 255, 255, 0.75) !important;
}

.gantt-bar-handle-left[b-ya55lm2rht] {
    left: 0;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.gantt-bar-handle-right[b-ya55lm2rht] {
    right: 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Dark-theme handles: use a subtle black tint so the resize cue stays visible
   on lighter status colors (Open, Published, Won) too. */
.is-dark .gantt-bar:hover .gantt-bar-handle[b-ya55lm2rht] {
    background-color: rgba(0, 0, 0, 0.35);
}
.is-dark .gantt-bar-handle:hover[b-ya55lm2rht] {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* ===== Hover tooltip card ===== */
.gantt-hover-card[b-ya55lm2rht] {
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    max-width: 320px;
    padding: 10px 12px;
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    color: var(--theme-text-primary);
    font-size: 0.78rem;
    pointer-events: none;
}

.gantt-hover-title[b-ya55lm2rht] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    margin-bottom: 4px;
}

.gantt-hover-meta[b-ya55lm2rht] {
    color: var(--theme-text-secondary);
    font-size: 0.72rem;
    margin-top: 2px;
}

.gantt-hover-label[b-ya55lm2rht] {
    color: var(--theme-text-muted);
    font-weight: 600;
}

.gantt-hover-urgent[b-ya55lm2rht] {
    color: var(--theme-danger, #ef4444);
    font-weight: 600;
}

/* ===== Legend ===== */
.gantt-legend[b-ya55lm2rht] {
    display: flex;
    gap: 1.25rem;
    padding: 1rem 0 0;
    flex-wrap: wrap;
    justify-content: center;
}

.gantt-legend-item[b-ya55lm2rht] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--theme-text-secondary);
}

.gantt-legend-swatch[b-ya55lm2rht] {
    width: 16px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.gantt-today-marker-legend[b-ya55lm2rht] {
    width: 2px;
    height: 14px;
    background: var(--theme-primary);
    border-radius: 1px;
    opacity: 0.85;
}

/* ===== Dark theme overrides ===== */
.is-dark .gantt-wrapper[b-ya55lm2rht] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .gantt-labels[b-ya55lm2rht] {
    /* Must be fully opaque — sticky columns with alpha let bars bleed through. */
    background-color: #1e293b;
    border-right-color: rgba(255, 255, 255, 0.1);
}

.is-dark .gantt-labels-header[b-ya55lm2rht] {
    background-color: #1e293b;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.is-dark .gantt-label-row[b-ya55lm2rht] {
    background-color: #1e293b;
}

.is-dark .gantt-label-project[b-ya55lm2rht] {
    background: rgba(255, 255, 255, 0.04);
}

.is-dark .gantt-label-row:hover[b-ya55lm2rht] {
    background: rgba(255, 255, 255, 0.06);
}

.is-dark .gantt-timeline-header[b-ya55lm2rht] {
    background: rgba(30, 41, 59, 0.95);
}

.is-dark .gantt-month-cell[b-ya55lm2rht] {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.08);
}

.is-dark .gantt-day-weekend[b-ya55lm2rht] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .gantt-day-major[b-ya55lm2rht] {
    border-right-color: rgba(255, 255, 255, 0.2);
}

.is-dark .gantt-bar-project-row[b-ya55lm2rht] {
    background: rgba(255, 255, 255, 0.02);
}

.is-dark .gantt-bar-project-summary[b-ya55lm2rht] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.is-dark .gantt-zoom-controls[b-ya55lm2rht] {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .gantt-hover-card[b-ya55lm2rht] {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.is-dark .gantt-container[b-ya55lm2rht]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

.is-dark .gantt-container[b-ya55lm2rht]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .gantt-controls[b-ya55lm2rht] {
        flex-direction: column;
        align-items: stretch;
    }

    .gantt-controls-right[b-ya55lm2rht] {
        justify-content: flex-end;
    }

    .gantt-labels[b-ya55lm2rht] {
        min-width: 200px;
        max-width: 240px;
        flex-basis: 220px;
    }

    .gantt-label-task[b-ya55lm2rht] {
        padding-left: 20px;
    }
}
/* /Pages/Work/Kanban.razor.rz.scp.css */
/* ============================================
   KANBAN PAGE - SCOPED STYLES
   Uses shared .list-page / .list-page-container classes from utilities.css.
   .kanban-page is intentionally a class hook only — no positioning, no
   overflow override. The shared base handles document-flow scrolling so
   we don't get a second scrollbar or break the app shell's left offset.
   Only Kanban-specific styles here (board, columns, cards).
   ============================================ */

/* ============================================
   KANBAN BOARD
   ============================================ */
.kanban-board[b-6yly7ejojb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    min-height: 500px;
}

.kanban-column[b-6yly7ejojb] {
    display: flex;
    flex-direction: column;
    background: var(--theme-surface, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(10px);
    border-radius: 14px;
    border: 1px solid var(--theme-border, rgba(255, 255, 255, 0.6));
    min-height: 500px;
    overflow: hidden;
}

.kanban-column-header[b-6yly7ejojb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: var(--theme-surface-secondary, rgba(255, 255, 255, 0.5));
    border-bottom: 1px solid var(--theme-border, rgba(0, 0, 0, 0.05));
}

.column-title-group[b-6yly7ejojb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.column-title[b-6yly7ejojb] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
}

/* "showing top 50 of 417"-style hint that surfaces when the Completed
   column hits its render cap. Stays subtle so it doesn't compete with
   the column title or the count badge. */
.column-caption[b-6yly7ejojb] {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--theme-text-muted, #94a3b8);
    letter-spacing: 0.01em;
}

.column-count[b-6yly7ejojb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 14px;
    font-size: 0.8rem;
    font-weight: 700;
}

.column-count.count-cyan[b-6yly7ejojb] { background: rgba(14, 165, 233, 0.15); color: #0284c7; }
.column-count.count-amber[b-6yly7ejojb] { background: rgba(245, 158, 11, 0.15); color: #d97706; }
.column-count.count-green[b-6yly7ejojb] { background: rgba(34, 197, 94, 0.15); color: #16a34a; }
.column-count.count-gray[b-6yly7ejojb] { background: rgba(100, 116, 139, 0.15); color: #64748b; }

/* Per-column internal scroll cap.
   Accounts for the chrome above each column in the new flow layout:
   app shell header (~56px) + page header + stats grid + filter row +
   column header + page padding. ~280px is a touch generous on purpose so
   short stacks don't unnecessarily scroll, while tall stacks (e.g.
   Completed at the cap) get a contained inner scroll instead of pushing
   the whole document down. */
.kanban-column-content[b-6yly7ejojb] {
    flex: 1;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.kanban-column-content[b-6yly7ejojb]::-webkit-scrollbar {
    display: none;
}

/* Per-column empty placeholder. Status-aware copy is supplied from the
   GetColumnEmptyCopy helper so each column reads warmer than a bare
   "No tasks". Kept compact so it doesn't dominate the column. */
.kanban-column-empty[b-6yly7ejojb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: var(--theme-text-muted, #94a3b8);
    gap: 6px;
}

.kanban-column-empty svg[b-6yly7ejojb] {
    width: 32px;
    height: 32px;
    opacity: 0.5;
    margin-bottom: 4px;
}

.kanban-column-empty .column-empty-title[b-6yly7ejojb] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text-secondary, #64748b);
}

.kanban-column-empty .column-empty-subtitle[b-6yly7ejojb] {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--theme-text-muted, #94a3b8);
    max-width: 220px;
}

.kanban-column-footer[b-6yly7ejojb] {
    padding: 12px;
    border-top: 1px solid var(--theme-border, rgba(0, 0, 0, 0.05));
}

.kanban-add-task-btn[b-6yly7ejojb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px;
    border: 2px dashed var(--theme-border, rgba(100, 116, 139, 0.3));
    border-radius: 8px;
    background: transparent;
    color: var(--theme-text-muted, #64748b);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kanban-add-task-btn svg[b-6yly7ejojb] {
    width: 18px;
    height: 18px;
}

.kanban-add-task-btn:hover[b-6yly7ejojb] {
    border-color: var(--theme-accent, #3b82f6);
    color: var(--theme-accent, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

/* ============================================
   KANBAN CARDS
   ============================================ */
.kanban-card[b-6yly7ejojb] {
    padding: 14px;
    background: var(--theme-surface, rgba(255, 255, 255, 0.95));
    border-radius: 10px;
    cursor: grab;
    transition: all 0.2s ease;
    border-left: 4px solid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.kanban-card:active[b-6yly7ejojb] {
    cursor: grabbing;
}

.kanban-card-dragging[b-6yly7ejojb] {
    opacity: 0.4;
    transform: scale(0.97);
}

.kanban-card:hover[b-6yly7ejojb] {
    transform: translateY(-2px);
    background: var(--theme-surface, #ffffff);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.kanban-card-dragging:hover[b-6yly7ejojb] {
    transform: scale(0.97);
}

/* Column drop target highlight */
.kanban-column-dragover[b-6yly7ejojb] {
    outline: 2px dashed var(--theme-accent, #3b82f6);
    outline-offset: -2px;
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.04);
}

.kanban-column-dragover .kanban-column-content[b-6yly7ejojb] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.03);
}

.kanban-card:hover .kanban-card-actions[b-6yly7ejojb] {
    opacity: 1;
}

.kanban-card-priority-high[b-6yly7ejojb] { border-left-color: #ef4444; }
.kanban-card-priority-medium[b-6yly7ejojb] { border-left-color: #f59e0b; }
.kanban-card-priority-low[b-6yly7ejojb] { border-left-color: #22c55e; }

.kanban-card-overdue[b-6yly7ejojb] {
    animation: pulse-overdue-b-6yly7ejojb 2s ease-in-out infinite;
}

@keyframes pulse-overdue-b-6yly7ejojb {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

.kanban-card-header[b-6yly7ejojb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.kanban-card-title[b-6yly7ejojb] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    line-height: 1.3;
    color: var(--theme-text-primary, #1e293b);
}

.kanban-card-actions[b-6yly7ejojb] {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.kanban-icon-btn[b-6yly7ejojb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: var(--theme-surface-secondary, rgba(100, 116, 139, 0.1));
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--theme-text-secondary, #64748b);
}

.kanban-icon-btn svg[b-6yly7ejojb] {
    width: 16px;
    height: 16px;
}

.kanban-icon-btn:hover[b-6yly7ejojb] {
    background: var(--theme-accent, #3b82f6);
    color: white;
    transform: scale(1.1);
}

.kanban-icon-btn-success[b-6yly7ejojb] { color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.kanban-icon-btn-success:hover[b-6yly7ejojb] { background: #22c55e; color: white; }

.kanban-card-meta[b-6yly7ejojb] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.kanban-card-due[b-6yly7ejojb] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.kanban-card-due svg[b-6yly7ejojb] {
    width: 14px;
    height: 14px;
}

.kanban-card-due.overdue[b-6yly7ejojb] {
    color: #ef4444;
    font-weight: 600;
}

.overdue-label[b-6yly7ejojb] {
    font-size: 0.65rem;
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

/* ============================================
   DARK THEME ADJUSTMENTS
   ============================================ */
.is-dark .kanban-column[b-6yly7ejojb] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.is-dark .kanban-column-header[b-6yly7ejojb] {
    background: rgba(255, 255, 255, 0.05);
}

.is-dark .kanban-card[b-6yly7ejojb] {
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.is-dark .kanban-card:hover[b-6yly7ejojb] {
    background: rgba(51, 65, 85, 0.9);
    box-shadow: 0 4px 16px transparent;
}

.is-dark .kanban-column-dragover[b-6yly7ejojb] {
    outline-color: var(--theme-accent, #60a5fa);
    background: rgba(96, 165, 250, 0.06);
}

.is-dark .column-count.count-cyan[b-6yly7ejojb] { background: rgba(14, 165, 233, 0.2); color: #38bdf8; }
.is-dark .column-count.count-amber[b-6yly7ejojb] { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
.is-dark .column-count.count-green[b-6yly7ejojb] { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

.is-dark .kanban-icon-btn[b-6yly7ejojb] {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.is-dark .kanban-add-task-btn[b-6yly7ejojb] {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
}

.is-dark .kanban-add-task-btn:hover[b-6yly7ejojb] {
    border-color: var(--theme-accent, #60a5fa);
    color: var(--theme-accent, #60a5fa);
    background: rgba(96, 165, 250, 0.1);
}

.is-dark .overdue-label[b-6yly7ejojb] {
    background: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .kanban-board[b-6yly7ejojb] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .kanban-column[b-6yly7ejojb] {
        min-height: 300px;
    }
    
    .kanban-column-content[b-6yly7ejojb] {
        max-height: 300px;
    }
}

/* /Pages/Work/ManualCompletionDialog.razor.rz.scp.css */
/* ============================================
   MANUAL COMPLETION DIALOG
   Theme-aware via CSS variables — zero dark overrides
   ============================================ */

/* Alerts */
.alert[b-svhhabhp90] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.alert svg[b-svhhabhp90] {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-info[b-svhhabhp90] {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.alert-info svg[b-svhhabhp90] {
    color: #3b82f6;
}

.alert-success[b-svhhabhp90] {
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.alert-success svg[b-svhhabhp90] {
    color: #10b981;
}

.alert-warning[b-svhhabhp90] {
    background: rgba(245, 158, 11, 0.08);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.alert-warning svg[b-svhhabhp90] {
    color: #f59e0b;
}

/* Description Text */
.description-text[b-svhhabhp90] {
    font-size: 0.8125rem;
    color: var(--theme-text-secondary, #64748b);
    line-height: 1.6;
    margin: 0;
}

/* Add Completion Section */
.add-completion-section[b-svhhabhp90] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.section-label[b-svhhabhp90] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-text-primary, #475569);
}

/* Form Elements */
.form-group[b-svhhabhp90] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-svhhabhp90] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.form-textarea[b-svhhabhp90] {
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.875rem;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.15s ease;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
}

.form-textarea:focus[b-svhhabhp90] {
    outline: none;
    border-color: var(--theme-input-focus, #7c3aed);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 124, 58, 237), 0.12);
}

.form-textarea[b-svhhabhp90]::placeholder {
    color: var(--theme-text-hint, #94a3b8);
}
/* /Pages/Work/ProjectDetail.razor.rz.scp.css */
/* ============================================
   PROJECT DETAIL - Page-specific styles only.
   Base layout uses .detail-* classes from utilities.css
   ============================================ */

/* Description */
.description-text[b-zwk15r6n28] {
    margin: 0;
    color: var(--theme-text-secondary);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* Work Items List */
.work-items-list[b-zwk15r6n28] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.work-item-row[b-zwk15r6n28] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--theme-bg-secondary, rgba(0, 0, 0, 0.03));
    transition: background 0.2s ease;
}

.work-item-row:hover[b-zwk15r6n28] {
    background: var(--theme-link-hover-bg, rgba(0, 0, 0, 0.06));
}

.work-item-row:hover .row-action-btn[b-zwk15r6n28] {
    opacity: 1;
}

/* Row action buttons (edit + view) */
.row-actions[b-zwk15r6n28] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.row-action-btn[b-zwk15r6n28] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--theme-text-secondary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.row-action-btn:hover[b-zwk15r6n28] {
    background: var(--theme-link-hover-bg, rgba(0,0,0,0.08));
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

.work-item-name[b-zwk15r6n28] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary);
}

.view-all-link[b-zwk15r6n28] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-top: 8px;
    color: var(--theme-accent, #3b82f6);
    transition: opacity 0.2s ease;
}

.view-all-link:hover[b-zwk15r6n28] {
    opacity: 0.8;
}

/* Activity Timeline */
.activity-timeline[b-zwk15r6n28] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item[b-zwk15r6n28] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.activity-icon[b-zwk15r6n28] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(59, 130, 246, 0.1);
    color: var(--theme-primary-ink, var(--theme-primary, #3b82f6));
}

/* Time Entry rows */
.time-entry-meta[b-zwk15r6n28] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.time-entry-duration[b-zwk15r6n28] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    font-variant-numeric: tabular-nums;
}

.time-entry-date[b-zwk15r6n28] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

/* Total hours inline in card title */
.project-total-hours[b-zwk15r6n28] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-left: 6px;
}

.activity-text[b-zwk15r6n28] {
    font-size: 0.9rem;
    font-weight: 500;
    margin: 0 0 2px 0;
    color: var(--theme-text-primary);
}

.activity-date[b-zwk15r6n28] {
    font-size: 0.8rem;
    color: var(--theme-text-secondary);
}

/* P-Activity (2026-05-03): "+ N earlier events" footer line on the
   synthesized timeline. Reads as an aside (no icon, italic, dimmed) so
   it doesn't compete with the actual events above it. */
.activity-item-summary[b-zwk15r6n28] {
    padding-left: 48px; /* aligns with the icon-less items above */
    font-style: italic;
    opacity: 0.7;
}

/* PRJ-Detail3 (2026-05-03): Right sidebar Summary + Quick Actions cards.
   Visual language matches WorkItemDetail's sidebar so project and task
   detail pages read as the same family of surfaces. */

.summary-stats[b-zwk15r6n28] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 12px;
}

.summary-stat[b-zwk15r6n28] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-left: 3px solid var(--theme-primary, #6366f1);
    background: color-mix(in srgb, var(--theme-primary, #6366f1) 4%, transparent);
    border-radius: 0 8px 8px 0;
}

.summary-stat-label[b-zwk15r6n28] {
    font-size: 0.75rem;
    color: var(--theme-text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.summary-stat-value[b-zwk15r6n28] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-text-primary, #1e293b);
    line-height: 1.2;
}

.summary-stat-unit[b-zwk15r6n28] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.quick-actions-list[b-zwk15r6n28] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.quick-actions-list .nts-btn[b-zwk15r6n28] {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

/* Danger variant — destructive Quick Action (Delete Project). Soft tint
   on rest, fuller red on hover so the button reads as "this is the
   nuclear option" without dominating the column at rest. */
.nts-btn.danger[b-zwk15r6n28] {
    color: var(--theme-error, #ef4444);
    border-color: color-mix(in srgb, var(--theme-error, #ef4444) 30%, transparent);
}

.nts-btn.danger:hover[b-zwk15r6n28] {
    background: color-mix(in srgb, var(--theme-error, #ef4444) 10%, transparent);
    border-color: var(--theme-error, #ef4444);
    color: var(--theme-error, #ef4444);
}
/* /Pages/Work/ProjectDialog.razor.rz.scp.css */
/* ============================================
   PROJECT DIALOG - Form-specific Styles
   (Uses BaseDialog for common dialog styling)
   ============================================ */

/* Form Layout */
.project-form[b-xy1xz9l35e] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-form-row[b-xy1xz9l35e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .project-form-row[b-xy1xz9l35e] {
        grid-template-columns: 1fr;
    }
}

/* Form Group */
.project-form-group[b-xy1xz9l35e] {
    margin-bottom: 8px;
}

.project-form-group label[b-xy1xz9l35e] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
    margin-bottom: 3px;
}

.required-indicator[b-xy1xz9l35e] {
    color: #ef4444;
}

/* Form Inputs */
.project-form-input[b-xy1xz9l35e],
.project-form-textarea[b-xy1xz9l35e] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border);
    border-radius: 8px;
    font-size: 0.875rem;
    min-height: 38px;
    transition: all 0.15s ease;
    background: var(--theme-input-bg);
    color: var(--theme-input-text);
    box-sizing: border-box;
    font-family: inherit;
}

.project-form-textarea[b-xy1xz9l35e] {
    resize: vertical;
    min-height: 80px;
}

.project-form-input:focus[b-xy1xz9l35e],
.project-form-textarea:focus[b-xy1xz9l35e] {
    outline: none;
    border-color: var(--theme-input-focus);
    box-shadow: 0 0 0 3px var(--theme-shadow-color);
}

/* Error states */
.project-form-input.input-error[b-xy1xz9l35e] {
    border-color: var(--theme-text-danger);
}

.project-error-message[b-xy1xz9l35e] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.8125rem;
}

.project-error-message svg[b-xy1xz9l35e] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Helper text */
.project-helper-text[b-xy1xz9l35e] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}

/* Character counter */
.project-char-counter[b-xy1xz9l35e] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    text-align: right;
    margin-top: 2px;
}

/* Metadata section */
.project-metadata[b-xy1xz9l35e] {
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
    margin-top: 8px;
}

.project-metadata-item[b-xy1xz9l35e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
}

.project-metadata-item svg[b-xy1xz9l35e] {
    width: 14px;
    height: 14px;
}

/* Placeholder styling */
.project-form-input[b-xy1xz9l35e]::placeholder,
.project-form-textarea[b-xy1xz9l35e]::placeholder {
    color: #9ca3af;
}

.is-dark .project-form-input[b-xy1xz9l35e]::placeholder,
.is-dark .project-form-textarea[b-xy1xz9l35e]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
/* /Pages/Work/SnoozeDialog.razor.rz.scp.css */
/* === SNOOZE DIALOG === */

/* Snooze Prompt */
.snooze-prompt[b-gnmz5fm55h] {
    font-size: 0.95rem;
    color: var(--theme-text-muted, #64748b);
    margin: 0;
}

.snooze-prompt strong[b-gnmz5fm55h] {
    color: var(--theme-text-primary, #1e293b);
}

/* Snooze Options (Radio Group) */
.snooze-options[b-gnmz5fm55h] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.snooze-option[b-gnmz5fm55h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--theme-border, #e5e7eb);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: transparent;
}

.snooze-option:hover[b-gnmz5fm55h] {
    border-color: var(--theme-accent, #6366f1);
    background: rgba(var(--theme-primary-rgb), 0.05);
}

.snooze-option.selected[b-gnmz5fm55h] {
    border-color: var(--theme-accent, #6366f1);
    background: rgba(var(--theme-primary-rgb), 0.1);
}

.snooze-option input[type="radio"][b-gnmz5fm55h] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-custom[b-gnmz5fm55h] {
    width: 20px;
    height: 20px;
    border: 2px solid var(--theme-border, #d1d5db);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.snooze-option.selected .radio-custom[b-gnmz5fm55h] {
    border-color: var(--theme-accent, #6366f1);
}

.snooze-option.selected .radio-custom[b-gnmz5fm55h]::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--theme-accent, #6366f1);
    border-radius: 50%;
}

.option-content[b-gnmz5fm55h] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.option-content svg[b-gnmz5fm55h] {
    color: var(--theme-text-muted, #9ca3af);
    flex-shrink: 0;
}

.snooze-option.selected .option-content svg[b-gnmz5fm55h] {
    color: var(--theme-accent, #6366f1);
}

.option-label[b-gnmz5fm55h] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
}

.option-time[b-gnmz5fm55h] {
    font-size: 0.8rem;
    color: var(--theme-text-muted, #9ca3af);
    margin-left: auto;
}

/* Custom DateTime */
.custom-datetime[b-gnmz5fm55h] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
    background: var(--theme-surface-secondary, #f8fafc);
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e5e7eb);
}

.form-group[b-gnmz5fm55h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label[b-gnmz5fm55h] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #64748b);
}

.form-input[b-gnmz5fm55h] {
    padding: 10px 12px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
}

.form-input:focus[b-gnmz5fm55h] {
    outline: none;
    border-color: var(--theme-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2);
}

/* Alert */
.alert[b-gnmz5fm55h] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.alert svg[b-gnmz5fm55h] {
    flex-shrink: 0;
    margin-top: 1px;
}

.alert-info[b-gnmz5fm55h] {
    background: rgba(var(--theme-primary-rgb), 0.1);
    color: var(--theme-text-primary, #1e293b);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.2);
}

.alert-info svg[b-gnmz5fm55h] {
    color: var(--theme-accent, #6366f1);
}

/* Responsive */
@media (max-width: 480px) {
    .custom-datetime[b-gnmz5fm55h] {
        grid-template-columns: 1fr;
    }

    .option-time[b-gnmz5fm55h] {
        display: none;
    }

    /* MOB-Snooze (2026-05-03): Hide the info alert on mobile. The
       message ("Snoozed tasks will be hidden from your main task list
       until the snooze expires") is intuitive — users know what snooze
       does — and it was eating ~80px of vertical space, pushing the
       Cancel + Snooze footer buttons off the bottom of the dialog on
       iPhone-class viewports. Trade-off: fractional UX clarity loss
       vs. the dialog actually being submittable. */
    .alert-info[b-gnmz5fm55h] {
        display: none;
    }

    /* Tighten the radio option padding too — every saved pixel helps
       the footer stay above the fold. */
    .snooze-option[b-gnmz5fm55h] {
        padding: 9px 12px;
    }

    .snooze-options[b-gnmz5fm55h] {
        gap: 6px;
    }
}
/* /Pages/Work/TransferProjectItemsDialog.razor.rz.scp.css */
/* ============================================
   TRANSFER PROJECT ITEMS DIALOG
   ============================================ */

.source-project[b-zhlimwufx4] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary);
}

.source-project .label[b-zhlimwufx4] {
    margin-right: 4px;
}

.source-project strong[b-zhlimwufx4] {
    color: var(--theme-text-primary);
}

.form-group[b-zhlimwufx4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-zhlimwufx4] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary);
}

.required[b-zhlimwufx4] {
    color: var(--theme-text-danger, #ef4444);
}

.helper-text[b-zhlimwufx4] {
    font-size: 0.75rem;
    color: var(--theme-text-muted);
}
/* /Pages/Work/WorkItemAttachments.razor.rz.scp.css */
/* ============================================
   WORK ITEM ATTACHMENTS - Native CSS
   ============================================ */

.attachments-card[b-5sialm9hfw] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    margin-top: 16px;
    overflow: hidden;
}

.attachments-header[b-5sialm9hfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.attachments-title[b-5sialm9hfw] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
}

.attachments-title svg[b-5sialm9hfw] {
    color: #64748b;
}

.attachment-count[b-5sialm9hfw] {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
}

.attachments-content[b-5sialm9hfw] {
    padding: 20px;
}

/* Upload Button */
.upload-btn[b-5sialm9hfw] {
    cursor: pointer;
}

.upload-btn input[type="file"][b-5sialm9hfw] {
    display: none;
}

/* Upload Progress */
.upload-progress[b-5sialm9hfw] {
    text-align: center;
    padding: 16px;
}

.loading-bar[b-5sialm9hfw] {
    height: 4px;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}

.loading-bar-progress[b-5sialm9hfw] {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 2px;
    animation: loading-b-5sialm9hfw 1.5s ease-in-out infinite;
}

@keyframes loading-b-5sialm9hfw {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.upload-text[b-5sialm9hfw] {
    color: #64748b;
    font-size: 0.9rem;
}

/* Empty State */
.empty-state[b-5sialm9hfw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px dashed rgba(59, 130, 246, 0.3);
    border-radius: 12px;
}

.empty-icon[b-5sialm9hfw] {
    color: #93c5fd;
    margin-bottom: 12px;
}

.empty-title[b-5sialm9hfw] {
    font-size: 1rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 4px;
}

.empty-desc[b-5sialm9hfw] {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Attachment List */
.attachment-list[b-5sialm9hfw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attachment-item[b-5sialm9hfw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.attachment-info[b-5sialm9hfw] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.file-icon[b-5sialm9hfw] {
    flex-shrink: 0;
    color: #7c3aed;
}

.file-icon-image[b-5sialm9hfw] {
    color: #10b981;
}

.file-icon-pdf[b-5sialm9hfw] {
    color: #ef4444;
}

.file-icon-text[b-5sialm9hfw] {
    color: #3b82f6;
}

.attachment-details[b-5sialm9hfw] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.attachment-name[b-5sialm9hfw] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-meta[b-5sialm9hfw] {
    font-size: 0.75rem;
    color: #64748b;
}

.attachment-actions[b-5sialm9hfw] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Icon Buttons */
.icon-btn[b-5sialm9hfw] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #7c3aed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-btn:hover[b-5sialm9hfw] {
    background: rgba(124, 58, 237, 0.1);
}

.icon-btn-info[b-5sialm9hfw] {
    color: #3b82f6;
}

.icon-btn-info:hover[b-5sialm9hfw] {
    background: rgba(59, 130, 246, 0.1);
}

.icon-btn-danger[b-5sialm9hfw] {
    color: #ef4444;
}

.icon-btn-danger:hover[b-5sialm9hfw] {
    background: rgba(239, 68, 68, 0.1);
}

/* Supported Formats */
.supported-formats[b-5sialm9hfw] {
    margin-top: 16px;
    font-size: 0.75rem;
    color: #64748b;
}

/* Responsive */
@media (max-width: 640px) {
    .attachment-item[b-5sialm9hfw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .attachment-actions[b-5sialm9hfw] {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Dark theme support */
/* Dark theme support - NTS theme classes */
.is-dark .attachments-card[b-5sialm9hfw] {
        background: rgba(30, 41, 59, 0.8);
    }
    
.is-dark .attachments-header[b-5sialm9hfw] {
        background: rgba(51, 65, 85, 0.5);
        border-color: rgba(148, 163, 184, 0.2);
    }
    
.is-dark .attachments-title[b-5sialm9hfw] {
        color: #f1f5f9;
    }
    
.is-dark .attachment-item[b-5sialm9hfw] {
        background: rgba(51, 65, 85, 0.5);
        border-color: rgba(148, 163, 184, 0.2);
    }
    
.is-dark .attachment-name[b-5sialm9hfw] {
        color: #f1f5f9;
    }
    
.is-dark .attachment-meta[b-5sialm9hfw] {
        color: #94a3b8;
    }
    
.is-dark .empty-state[b-5sialm9hfw] {
        background: rgba(59, 130, 246, 0.1);
        border-color: rgba(59, 130, 246, 0.2);
    }
    
.is-dark .empty-title[b-5sialm9hfw] {
        color: #94a3b8;
    }
    
.is-dark .empty-desc[b-5sialm9hfw] {
        color: #64748b;
    }
    
.is-dark .supported-formats[b-5sialm9hfw] {
        color: #94a3b8;
    }
/* /Pages/Work/WorkItemDetail.razor.rz.scp.css */
/* ============================================
   WORK ITEM DETAIL PAGE STYLES
   ============================================ */

/* ============================================
   NATIVE LAYOUT STYLES
   ============================================ */

/* Container */
.detail-container[b-f78r824p3g] {
    max-width: var(--content-max-width, 1200px); /* LAYOUT-WIDTH-1: follows the Contained/Wide toggle */
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Loading States */
.loading-bar[b-f78r824p3g] {
    height: 4px;
    background: rgba(124, 58, 237, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar-progress[b-f78r824p3g] {
    height: 100%;
    width: 30%;
    background: var(--theme-primary);
    border-radius: 2px;
    animation: loading-b-f78r824p3g 1.5s ease-in-out infinite;
}

@keyframes loading-b-f78r824p3g {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.loading-text[b-f78r824p3g] {
    text-align: center;
    margin-top: 16px;
    color: var(--theme-text-secondary);
}

/* Alert */
.alert[b-f78r824p3g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    font-weight: 500;
}

.alert-error[b-f78r824p3g] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert svg[b-f78r824p3g] {
    flex-shrink: 0;
}

/* Buttons */
.btn[b-f78r824p3g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    font-family: inherit;
}

.mt-4[b-f78r824p3g] {
    margin-top: 16px;
}

.mb-4[b-f78r824p3g] {
    margin-bottom: 16px;
}

/* Grid Layout */
.detail-grid[b-f78r824p3g] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1rem;
}

.detail-main[b-f78r824p3g] {
    min-width: 0;
}

.detail-sidebar[b-f78r824p3g] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Card Styles - Following AccountDetail Gold Standard */
.card[b-f78r824p3g] {
    background: var(--theme-surface, #ffffff);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 12px var(--theme-shadow-color, rgba(0, 0, 0, 0.04));
    margin-bottom: 1rem;
}

.card-title[b-f78r824p3g] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    margin: 0 0 16px 0;
}

.card-title svg[b-f78r824p3g] {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.divider[b-f78r824p3g] {
    border: none;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    margin: 0 0 20px 0;
}

/* Snooze Banner */
.snooze-banner[b-f78r824p3g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: #f59e0b;
    color: white;
}

.snooze-banner svg[b-f78r824p3g] {
    flex-shrink: 0;
}

.snooze-banner > div[b-f78r824p3g] {
    display: flex;
    flex-direction: column;
}

.snooze-title[b-f78r824p3g] {
    font-weight: 600;
    font-size: 1rem;
}

.snooze-until[b-f78r824p3g] {
    font-size: 0.8rem;
    opacity: 0.9;
}

/* Responsive Visibility */
.mobile-only[b-f78r824p3g] {
    display: none;
}

.desktop-only[b-f78r824p3g] {
    display: block;
}

@media (max-width: 960px) {
    .detail-grid[b-f78r824p3g] {
        grid-template-columns: 1fr;
    }
    
    .mobile-only[b-f78r824p3g] {
        display: block;
    }
    
    .desktop-only[b-f78r824p3g] {
        display: none;
    }
}

/* Dark theme overrides for native elements */
.is-dark .card[b-f78r824p3g] {
    background: rgba(30, 41, 59, 0.6);
    border-color: rgba(148, 163, 184, 0.15);
    backdrop-filter: blur(12px);
    box-shadow: none;
}

/* TASK-SPOT-1: the spotlight player's home - right-aligned under the header, quiet (ghost
   button styling lives in site.css .nts-tour-btn--ghost). Hidden entirely once a read is
   running? No - the button doubles as Stop, so it stays. */
.item-spotlight-offer[b-f78r824p3g] {
    display: flex;
    justify-content: flex-end;
    margin: -8px 0 12px 0;
}
/* MOBILE-AUDIT-1 (2026-10-02): .detail-page already pads 16px at phone width, and this
   container added another 16px - every card sat 32px in from each edge (326 of 390px).
   Drop the inner padding, and pull the ghost "What matters here?" up against the header
   instead of floating it in a ~70px band of its own. */
@media (max-width: 600px) {
    .detail-container[b-f78r824p3g] {
        padding: 0;
    }

    .item-spotlight-offer[b-f78r824p3g] {
        margin: -20px 0 -4px 0;
    }
}
/* /Pages/Work/WorkItemDialog.razor.rz.scp.css */
/* WorkItemDialog - Scoped Styles */

/* Form Group */
.task-form-group[b-lh38imuhen] {
    margin-bottom: 8px;
}

.task-form-group label[b-lh38imuhen] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--theme-text-secondary, #374151);
    margin-bottom: 3px;
}

.required-indicator[b-lh38imuhen] {
    color: #ef4444;
}

/* Form Input */
.task-form-input[b-lh38imuhen] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--theme-input-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    background: var(--theme-input-bg, white);
    color: var(--theme-input-text, #1e293b);
    box-sizing: border-box;
}

.task-form-input:focus[b-lh38imuhen] {
    outline: none;
    border-color: var(--theme-input-focus, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.task-form-input.input-error[b-lh38imuhen] {
    border-color: #ef4444;
}

/* Form Textarea */
.task-form-textarea[b-lh38imuhen] {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

/* Inputs row (side by side) */
.task-inputs-row[b-lh38imuhen] {
    display: grid;
    /* WI-DLG-WIDTH-1 (2026-06-30): minmax(0,1fr), not 1fr. A bare `1fr` track is
       minmax(auto,1fr), so a column can't shrink below its content's min-width — a long
       SearchableSelect value (e.g. the Main Quest goal name) or a date picker then pushes
       the grid past the dialog and trips a horizontal scrollbar in .dialog-content
       (overflow-y:auto silently promotes overflow-x to auto). minmax(0,…) lets the column
       shrink so the width:100% children fit. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 8px;
}

.task-inputs-row .task-form-group[b-lh38imuhen] {
    margin-bottom: 0;
}

/* RECUR-PICK-1: "Every [n] months" */
.task-interval-wrap[b-lh38imuhen] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-interval-input[b-lh38imuhen] {
    width: 72px;
    flex: 0 0 72px;
}

.task-interval-unit[b-lh38imuhen] {
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #374151);
}

/* Helper text */
.task-helper-text[b-lh38imuhen] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    margin-top: 2px;
    display: block;
}

/* Character counter */
.task-char-counter[b-lh38imuhen] {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #9ca3af);
    text-align: right;
    margin-top: 2px;
}

/* Error message */
.task-error-message[b-lh38imuhen] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 6px;
}

.task-error-message svg[b-lh38imuhen] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Section divider */
.task-section-divider[b-lh38imuhen] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: var(--theme-text-muted, #64748b);
}

.task-section-divider[b-lh38imuhen]::before,
.task-section-divider[b-lh38imuhen]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--theme-border, #e2e8f0);
}

.task-section-label[b-lh38imuhen] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--theme-text-muted, #64748b);
}

.task-section-label svg[b-lh38imuhen] {
    width: 16px;
    height: 16px;
}

/* Checkbox */
.task-checkbox-group[b-lh38imuhen] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.task-checkbox-label[b-lh38imuhen] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--theme-text-secondary, #374151);
}

.task-checkbox-label input[type="checkbox"][b-lh38imuhen] {
    width: 18px;
    height: 18px;
    accent-color: var(--theme-primary);
}

/* Metadata */
.task-metadata[b-lh38imuhen] {
    padding-top: 10px;
    border-top: 1px solid var(--theme-border, #e2e8f0);
    margin-top: 10px;
}

.task-metadata-item[b-lh38imuhen] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    margin-bottom: 4px;
}

.task-metadata-item svg[b-lh38imuhen] {
    width: 14px;
    height: 14px;
}

/* Responsive */
@media (max-width: 600px) {
    .task-inputs-row[b-lh38imuhen] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Work/WorkItemNotes.razor.rz.scp.css */
/* ============================================
   WORK ITEM NOTES - Native CSS
   ============================================ */

.notes-container[b-qot4lvktsg] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.notes-header[b-qot4lvktsg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.notes-title[b-qot4lvktsg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.notes-title svg[b-qot4lvktsg] {
    color: #64748b;
}

.divider[b-qot4lvktsg] {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 0 0 16px 0;
}

/* Loading Bar */
.loading-bar[b-qot4lvktsg] {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.loading-bar-progress[b-qot4lvktsg] {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 100%);
    border-radius: 2px;
    animation: loading-b-qot4lvktsg 1.5s ease-in-out infinite;
}

@keyframes loading-b-qot4lvktsg {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Notes List */
.notes-list[b-qot4lvktsg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.note-card[b-qot4lvktsg] {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    border-left: 4px solid #667eea;
}

.note-header[b-qot4lvktsg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.note-meta[b-qot4lvktsg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.note-author[b-qot4lvktsg] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.note-date[b-qot4lvktsg] {
    font-size: 0.75rem;
    color: #64748b;
}

.note-actions[b-qot4lvktsg] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.note-content[b-qot4lvktsg] {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

/* Chips */
.chip[b-qot4lvktsg] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chip-warning[b-qot4lvktsg] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Icon Buttons */
.icon-btn[b-qot4lvktsg] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.icon-btn:hover[b-qot4lvktsg] {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.icon-btn-danger:hover[b-qot4lvktsg] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Empty State */
.empty-state[b-qot4lvktsg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-icon[b-qot4lvktsg] {
    color: #cbd5e1;
    margin-bottom: 12px;
}

.empty-title[b-qot4lvktsg] {
    font-size: 1rem;
    color: #64748b;
    margin-bottom: 4px;
}

.empty-desc[b-qot4lvktsg] {
    font-size: 0.875rem;
    color: #94a3b8;
}

/* Dialog */
.dialog-backdrop[b-qot4lvktsg] {
    position: fixed;
    inset: 0;
    background: transparent;
    backdrop-filter: blur(4px);
    z-index: 10000;
}

.dialog[b-qot4lvktsg] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 480px;
    z-index: 10001;
    animation: dialogSlideIn-b-qot4lvktsg 0.2s ease-out;
}

@keyframes dialogSlideIn-b-qot4lvktsg {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.dialog-header[b-qot4lvktsg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.dialog-title[b-qot4lvktsg] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.dialog-title svg[b-qot4lvktsg] {
    color: #7c3aed;
}

.dialog-close[b-qot4lvktsg] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.dialog-close:hover[b-qot4lvktsg] {
    background: #f1f5f9;
    color: #1e293b;
}

.dialog-content[b-qot4lvktsg] {
    padding: 24px;
}

.dialog-actions[b-qot4lvktsg] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 0 0 16px 16px;
}

/* Form Elements */
.form-group[b-qot4lvktsg] {
    margin-bottom: 16px;
}

.form-group label[b-qot4lvktsg] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
}

.required[b-qot4lvktsg] {
    color: #ef4444;
}

.form-textarea[b-qot4lvktsg] {
    width: 100%;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    transition: all 0.2s ease;
}

.form-textarea:focus[b-qot4lvktsg] {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.form-textarea[b-qot4lvktsg]::placeholder {
    color: #94a3b8;
}

/* Checkbox */
.checkbox-label[b-qot4lvktsg] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #475569;
}

.checkbox-label input[type="checkbox"][b-qot4lvktsg] {
    width: 18px;
    height: 18px;
    accent-color: #f59e0b;
    cursor: pointer;
}

.checkbox-text[b-qot4lvktsg] {
    flex: 1;
}

/* Dark theme support */
/* Dark theme support - NTS theme classes */
.is-dark .notes-container[b-qot4lvktsg] {
        background: rgba(30, 41, 59, 0.8);
    }
    
.is-dark .notes-title[b-qot4lvktsg] {
        color: #f1f5f9;
    }
    
.is-dark .divider[b-qot4lvktsg] {
        border-color: rgba(148, 163, 184, 0.2);
    }
    
.is-dark .note-card[b-qot4lvktsg] {
        background: rgba(51, 65, 85, 0.5);
    }
    
.is-dark .note-author[b-qot4lvktsg] {
        color: #f1f5f9;
    }
    
.is-dark .note-date[b-qot4lvktsg] {
        color: #94a3b8;
    }
    
.is-dark .note-content[b-qot4lvktsg] {
        color: #e2e8f0;
    }
    
.is-dark .dialog[b-qot4lvktsg] {
        background: #1e293b;
    }
    
.is-dark .dialog-header[b-qot4lvktsg] {
        border-color: rgba(148, 163, 184, 0.2);
    }
    
.is-dark .dialog-title[b-qot4lvktsg] {
        color: #f1f5f9;
    }
    
.is-dark .dialog-actions[b-qot4lvktsg] {
        background: rgba(30, 41, 59, 0.5);
        border-color: rgba(148, 163, 184, 0.2);
    }
    
.is-dark .form-group label[b-qot4lvktsg] {
        color: #e2e8f0;
    }
    
.is-dark .form-textarea[b-qot4lvktsg] {
        background: rgba(51, 65, 85, 0.5);
        border-color: rgba(148, 163, 184, 0.2);
        color: #f1f5f9;
    }
    
.is-dark .form-textarea:focus[b-qot4lvktsg] {
        border-color: #a855f7;
    }
    
.is-dark .checkbox-label[b-qot4lvktsg] {
        color: #e2e8f0;
    }
    
.is-dark .btn-secondary[b-qot4lvktsg] {
        background: rgba(51, 65, 85, 0.5);
        color: #e2e8f0;
        border-color: rgba(148, 163, 184, 0.2);
    }
    
.is-dark .empty-title[b-qot4lvktsg] {
        color: #94a3b8;
    }
    
.is-dark .empty-desc[b-qot4lvktsg] {
        color: #64748b;
    }
/* /Shared/AuthLayout.razor.rz.scp.css */
/* ===== Auth Layout Base Styles ===== */
*[b-x8v5zqjxbz] {
    box-sizing: border-box;
}

.auth-layout[b-x8v5zqjxbz] {
    min-height: 100vh;
    position: relative;
}

/* Content wrapper to sit above theme background */
.auth-content[b-x8v5zqjxbz] {
    position: relative;
    z-index: 10;
    min-height: 100vh;
}

/* ===== Common Form Styles ===== */
.form-control[b-x8v5zqjxbz] {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    transition: all 0.2s ease;
    box-sizing: border-box;
    color: #1e293b;
}

.form-control[b-x8v5zqjxbz]::placeholder {
    color: #9ca3af;
}

.form-control:focus[b-x8v5zqjxbz] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    background: #ffffff;
}

.form-label[b-x8v5zqjxbz] {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
    font-size: 0.875rem;
}

/* ===== Common Button Styles ===== */
.auth-button[b-x8v5zqjxbz] {
    width: 100%;
    padding: 14px 24px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    transition: all 0.2s ease;
    color: white;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

.auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
}

.auth-button:active:not(:disabled)[b-x8v5zqjxbz] {
    transform: translateY(0);
}

.auth-button:disabled[b-x8v5zqjxbz] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* ===== Theme-Specific Button Styles ===== */

/* ☁️ Cloud Theme - Default indigo */
.theme-cloud .auth-button[b-x8v5zqjxbz] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}
.theme-cloud .auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.4);
}

/* 💼 Executive Theme - Professional charcoal */
.theme-executive .auth-button[b-x8v5zqjxbz] {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
.theme-executive .auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    background: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}

/* 🚀 Space Theme - Purple/pink gradient */
.theme-space .auth-button[b-x8v5zqjxbz] {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.4);
}
.theme-space .auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.5);
}

/* ❄️ Winter Theme - Ice blue gradient */
.theme-winter .auth-button[b-x8v5zqjxbz] {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.4);
}
.theme-winter .auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    box-shadow: 0 12px 32px rgba(56, 189, 248, 0.5);
}

/* 🌿 Nature Theme - Green gradient */
.theme-nature .auth-button[b-x8v5zqjxbz] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
}
.theme-nature .auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    box-shadow: 0 12px 32px rgba(34, 197, 94, 0.5);
}

/* 🌊 Ocean Theme - Teal/cyan gradient */
.theme-ocean .auth-button[b-x8v5zqjxbz] {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    box-shadow: 0 8px 24px rgba(6, 182, 212, 0.4);
}
.theme-ocean .auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    box-shadow: 0 12px 32px rgba(6, 182, 212, 0.5);
}

/* ===== Common Link Styles ===== */
.link-section[b-x8v5zqjxbz] {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.link-item[b-x8v5zqjxbz] {
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.link-item:hover[b-x8v5zqjxbz] {
    color: #4f46e5;
    text-decoration: underline;
}

/* ===== Common Info Card Styles ===== */
.info-card[b-x8v5zqjxbz] {
    background: #f0f9ff;
    border-left: 3px solid #6366f1;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.info-card.success[b-x8v5zqjxbz] {
    background: #f0fdf4;
    border-left-color: #10b981;
}

.info-card-title[b-x8v5zqjxbz] {
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.info-card.success .info-card-title[b-x8v5zqjxbz] {
    color: #047857;
}

.info-card-text[b-x8v5zqjxbz] {
    color: #1e3a8a;
    line-height: 1.5;
    margin: 0;
    font-size: 0.85rem;
}

.info-card.success .info-card-text[b-x8v5zqjxbz] {
    color: #065f46;
}

/* ===== Common Alert Styles ===== */
.alert-danger[b-x8v5zqjxbz] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.875rem;
}

.text-danger[b-x8v5zqjxbz] {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}

.validation-message[b-x8v5zqjxbz] {
    color: #dc2626;
    font-size: 0.75rem;
    margin-top: 4px;
    display: block;
}

/* ===== Auth Card Base ===== */
.auth-card[b-x8v5zqjxbz] {
    background: #ffffff;
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 25px 50px -12px transparent;
}

.auth-logo[b-x8v5zqjxbz] {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo img[b-x8v5zqjxbz] {
    max-width: 120px;
    height: auto;
}

.auth-header[b-x8v5zqjxbz] {
    text-align: center;
    margin-bottom: 32px;
}

.auth-title[b-x8v5zqjxbz] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.auth-subtitle[b-x8v5zqjxbz] {
    color: #64748b;
    font-size: 1rem;
    margin: 0;
}

/* Content wrapper to sit above theme background */
.auth-content[b-x8v5zqjxbz] {
    position: relative;
    z-index: 10;
}

/* ===== Mobile Responsive ===== */
@media (max-width: 480px) {
    .auth-card[b-x8v5zqjxbz] {
        padding: 32px 24px;
        border-radius: 12px;
    }

    .auth-title[b-x8v5zqjxbz] {
        font-size: 1.5rem;
    }
}

/* ============================================
   💼 EXECUTIVE THEME - Professional Auth Pages
   Slate/charcoal accents, no purple
   ============================================ */
.theme-executive .auth-button[b-x8v5zqjxbz] {
    background: #1e293b;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

.theme-executive .auth-button:hover:not(:disabled)[b-x8v5zqjxbz] {
    background: #0f172a;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3);
}

.theme-executive .form-control:focus[b-x8v5zqjxbz] {
    border-color: #475569;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1);
}

.theme-executive .link-item[b-x8v5zqjxbz] {
    color: #475569;
}

.theme-executive .link-item:hover[b-x8v5zqjxbz] {
    color: #334155;
}

.theme-executive .info-card[b-x8v5zqjxbz] {
    border-left-color: #475569;
}
/* /Shared/FocusLayout.razor.rz.scp.css */
.focus-layout[b-dzoqb4fho8] {
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    transition: background 0.5s ease;
}

/* ☁️ Cloud Theme (default) */
.focus-layout.theme-cloud[b-dzoqb4fho8] {
    background: linear-gradient(160deg, 
        #f0f4ff 0%, 
        #e8eeff 20%, 
        #f5f0ff 40%, 
        #fff5f5 60%, 
        #fef3e2 80%, 
        #fef9e7 100%
    );
}

.focus-layout.theme-cloud[b-dzoqb4fho8]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(236, 72, 153, 0.04) 0%, transparent 60%);
    pointer-events: none;
    animation: gradientShift-b-dzoqb4fho8 20s ease-in-out infinite;
}

/* 🚀 Space Theme */
.focus-layout.theme-space[b-dzoqb4fho8] {
    background: linear-gradient(180deg, 
        #0f0a1e 0%, 
        #1a1333 20%, 
        #1e1b4b 40%, 
        #312e81 70%, 
        #4c1d95 100%
    );
}

.focus-layout.theme-space[b-dzoqb4fho8]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 70%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* ❄️ Winter Theme */
.focus-layout.theme-winter[b-dzoqb4fho8] {
    background: linear-gradient(180deg, 
        #1e3a5f 0%,
        #2d4a6f 20%,
        #3d5a7f 40%,
        #4d6a8f 60%,
        #5d7a9f 80%,
        #6d8aaf 100%
    );
}

.focus-layout.theme-winter[b-dzoqb4fho8]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 10% 30%, rgba(186, 230, 253, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 40%, rgba(186, 230, 253, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* 🌿 Nature Theme */
.focus-layout.theme-nature[b-dzoqb4fho8] {
    background: linear-gradient(180deg, 
        #134e2a 0%,
        #166534 15%,
        #15803d 35%,
        #22c55e 60%,
        #86efac 85%,
        #bbf7d0 100%
    );
}

.focus-layout.theme-nature[b-dzoqb4fho8]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 30% 0%, rgba(253, 224, 71, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 0%, rgba(253, 224, 71, 0.12) 0%, transparent 50%);
    pointer-events: none;
}

/* 🌊 Ocean Theme */
.focus-layout.theme-ocean[b-dzoqb4fho8] {
    background: linear-gradient(180deg, 
        #0c4a6e 0%,
        #0369a1 15%,
        #0ea5e9 35%,
        #38bdf8 55%,
        #7dd3fc 75%,
        #e0f2fe 100%
    );
}

.focus-layout.theme-ocean[b-dzoqb4fho8]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 75% 5%, rgba(251, 191, 36, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 75% 5%, rgba(251, 146, 60, 0.15) 0%, transparent 40%);
    pointer-events: none;
}

@keyframes gradientShift-b-dzoqb4fho8 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* 💼 Executive Theme (Light - Professional) */
.focus-layout.theme-executive[b-dzoqb4fho8] {
    background: linear-gradient(180deg, #f5f5f5 0%, #efefef 35%, #e8e8e8 65%, #e0e0e0 100%);
}

.focus-layout.theme-executive[b-dzoqb4fho8]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 20%, rgba(100, 116, 139, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(100, 116, 139, 0.04) 0%, transparent 50%);
    pointer-events: none;
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* App Layout */
.app-layout[b-54zr7zcf63] {
    width: 100%;
}

/* Layout body - flex row for ProductivityPanel + main content */
.layout-body[b-54zr7zcf63] {
    display: flex;
    flex-direction: row;
    min-height: calc(100vh - var(--header-height, 56px));
}

.page[b-54zr7zcf63] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-54zr7zcf63] {
    flex: 1;
}

/* ============================================
   ACCESSIBILITY UTILITIES
   ============================================ */
/* Visually hidden but accessible to screen readers */
.visually-hidden[b-54zr7zcf63] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Main Content - replacement for MudMainContent */
.main-content[b-54zr7zcf63] {
    flex: 1;
    min-width: 0; /* prevent flex blowout */
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height, 56px)); /* Use CSS variable with fallback */
}

/* Home page main content.
   HOME-SCROLL-3 (2026-07-07): fixed height + overflow:hidden removed so the
   Home page scrolls the document like every other page (the child
   .home-authenticated carries its own min-height + overflow:clip for the
   animated theme layers). Padding/background overrides retained. */
.main-content.home-main-content[b-54zr7zcf63] {
    padding: 0 !important;
    background: transparent !important;
}

/* HOME-SCROLL-3: replaces the old height:100% (meaningless without the
   fixed shell) — flex column so .home-authenticated stretches to fill the
   viewport when content is short, and grows past it when it isn't. */
.main-content.home-main-content > div[b-54zr7zcf63] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* MOBILE-AUDIT-7 (2026-10-02): the assistant FAB (88x88, fixed bottom-right) sat on top of
   the last row's actions at max scroll - on /workitems the last task's Edit button was
   unreachable on a phone. Give every page a runway at the bottom so content can scroll
   clear of it. Home zeroes main padding with !important, so it gets its own line. */
@media (max-width: 768px) {
    .main-content[b-54zr7zcf63] {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    }

    /* HOME-RUNWAY-1 (2026-10-02, Josh: "trim about half the space at the bottom"): Home ended
       on the centred "Browse tools by package" link, which never sat under the bottom-right
       FAB, so it didn't need the full 96px runway. 32px + safe area roughly halved the gap
       (~135pt -> ~70pt on an iPhone Home Screen app).
       HOME-RUNWAY-2 (2026-10-19): that link is gone (Home.razor HOME-BROWSE-2) and Home now ends
       on the hub card, whose right-edge controls DO reach under the FAB - so this 32px line is
       phones only (where HUB-BUCKLE-1 hides the FAB anyway and site.css HUB-PHONE-4 zeroes the
       runway while the card is up); 481px and wider take the page-standard runway below, less
       the hub wrapper's own 24px margin. !important throughout because the Home rule at the top
       zeroes padding with !important. */
    .main-content.home-main-content[b-54zr7zcf63] {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* BELT-DESK-1 (2026-10-19): from 481px up, Home's runway is clearance for the floating belt
   (TodaysWorkCard.razor.css BELT-DESK-1: 16px off the bottom + 52px pill + air), not for the corner
   FAB - the FAB is hidden on Home at every width now (Assistant.razor.css HUB-BUCKLE-1). 100px plus
   the hub wrapper's 24px margin puts the last row's bottom edge ~56px above the pill, clear of the
   landed mark's overhang at the centre. Skipped while the chat is docked (the slot is sized to the
   viewport, TodaysWorkCard.razor.css BELT-DESK-1). Replaces HOME-RUNWAY-2's two desktop lines. */
@media (min-width: 481px) {
    .main-content.home-main-content:not(:has(.home-main--docked))[b-54zr7zcf63] {
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* FAB-ROW-1 (2026-10-19, demo-day QA on Avery): the same collision on DESKTOP. HERO-SIZE-5 (10/18)
   grew the corner mark to 88px overflowing its button 16px a side, and MOBILE-AUDIT-7's runway above
   is phone-only - so on /workitems at max scroll the last row's Edit button sat under the robot and
   the click opened the chat. 112px = 24px corner offset + the 88px mark. Home originally kept its
   zero padding because its last element was the centred "Browse tools" link, never under the FAB;
   HOME-RUNWAY-2 (2026-10-19) gave it the same 112px once the hub card was last; BELT-DESK-1 (same
   night) moved Home's line above - its runway is belt clearance now. */
@media (min-width: 769px) {
    .main-content[b-54zr7zcf63] {
        padding-bottom: 112px;
    }

    /* Home's own line lives in the BELT-DESK-1 block above (481px up). */
}

/* Make the content area grow to push footer to bottom */
.main-content > .container-fluid[b-54zr7zcf63] {
    flex: 1;
}

.sidebar[b-54zr7zcf63] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-54zr7zcf63] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.top-row a[b-54zr7zcf63], .top-row .btn-link[b-54zr7zcf63] {
    white-space: nowrap;
    margin-left: 1.5rem;
}

.top-row a:first-child[b-54zr7zcf63] {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================
   CUSTOM APP HEADER
   ============================================ */
.app-header[b-54zr7zcf63] {
    position: sticky;
    top: 0;
    z-index: 1100;
    min-height: var(--header-height, 56px);
    padding: 8px 16px;
    backdrop-filter: blur(10px);
    background: var(--theme-header-bg, #0f172a) !important;
    border-bottom: 1px solid rgba(var(--theme-accent-rgb, 99, 102, 241), 0.3);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: background var(--transition-duration, 0.3s) var(--transition-easing, ease), 
                border-color var(--transition-duration, 0.3s) var(--transition-easing, ease);
    color: white;
}

.header-content[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
    max-width: max(1600px, var(--content-wide-max, 0px)); /* LAYOUT-WIDTH-1: keep header edges aligned with Wide pages */
    margin: 0 auto;
}

.header-left[b-54zr7zcf63],
.header-right[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-center[b-54zr7zcf63] {
    display: none;
    align-items: center;
    gap: 8px;
}

/* HEADER-CMD-1 (2026-10-08): the command bar's slot - takes the middle, centers the bar (max 520px,
   CommandBar.razor.css). Gone on a phone header: logo + credits + bell + avatar leave no room. */
.header-search[b-54zr7zcf63] {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
    padding: 0 16px;
}

@media (max-width: 699px) {
    .header-search[b-54zr7zcf63] {
        display: none;
    }
}

@media (min-width: 960px) {
    .header-center[b-54zr7zcf63] {
        display: flex;
    }
}

.logo-link[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* THEME-LONGPRESS-1: press-and-hold the logo cycles the theme on phones
       (searchOverlay.js). Kill iOS's link-preview / save-image callout and
       text selection so the hold isn't hijacked. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.logo-image[b-54zr7zcf63] {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.logo-image[b-54zr7zcf63] {
    max-width: 120px;
    height: auto;
    transition: transform 0.2s ease;
}

/* BRAND-FLAG-1 (2026-10-20): the preview wordmark - the mark (a lit dot, the product's symbol) and the
   name, sized to sit where the 120px logo image sat. Only renders when Branding:ProductName != "NTS". */
.logo-wordmark[b-54zr7zcf63] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;   /* Josh 3:06 PM: "a bit heavy on the text - the logo is right" (was 650 / 21px) */
    letter-spacing: 0.01em;
    line-height: 1;
    transition: transform 0.2s ease;
}
.logo-wordmark-mark[b-54zr7zcf63] {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: #f8fafc;
    box-shadow: 0 0 0 4px rgba(248, 250, 252, 0.14), 0 0 14px rgba(248, 250, 252, 0.55);
}
.logo-link:hover .logo-wordmark[b-54zr7zcf63] { transform: scale(1.02); }

.logo-link:hover .logo-image[b-54zr7zcf63] {
    transform: scale(1.02);
}

@media (min-width: 600px) {
    .logo-image[b-54zr7zcf63] {
        max-width: 140px;
    }
}

@media (min-width: 960px) {
    .logo-image[b-54zr7zcf63] {
        max-width: 160px;
    }
}

/* Header Icon Buttons */
.header-icon-btn[b-54zr7zcf63] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-icon-btn:hover[b-54zr7zcf63] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(var(--theme-accent-rgb, 99, 102, 241), 0.4);
}

/* Role Badges */
.role-badge[b-54zr7zcf63] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.role-badge-success[b-54zr7zcf63] {
    background: rgba(76, 175, 80, 0.9);
    color: white;
}

.role-badge-info[b-54zr7zcf63] {
    background: rgba(33, 150, 243, 0.9);
    color: white;
}

.affirmation-badge[b-54zr7zcf63] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* User Menu Button */
.user-menu-btn[b-54zr7zcf63] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border: none;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-menu-btn:hover[b-54zr7zcf63] {
    background: rgba(255, 255, 255, 0.2);
}

.user-avatar[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    color: #7c3aed;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease;
}

.user-menu-btn:hover .user-avatar[b-54zr7zcf63] {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

/* ============================================
   NATIVE USER MENU DROPDOWN
   ============================================ */
.user-menu-container[b-54zr7zcf63] {
    position: relative;
}

.user-menu-overlay[b-54zr7zcf63] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1199;
}

.user-menu-dropdown[b-54zr7zcf63] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    max-width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1200;
    overflow: hidden;
    animation: menuSlideIn-b-54zr7zcf63 0.2s ease-out;
}

@keyframes menuSlideIn-b-54zr7zcf63 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Menu Header */
.user-menu-dropdown .menu-header[b-54zr7zcf63] {
    padding: 20px;
    background: var(--theme-header-bg, #1e3a5f);
    color: white;
}

.menu-header-content[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.menu-presence-settings[b-54zr7zcf63] {
    margin-top: 16px;
}

.menu-avatar[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.menu-user-info[b-54zr7zcf63] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.menu-user-name[b-54zr7zcf63] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-user-email[b-54zr7zcf63] {
    font-size: 0.8rem;
    opacity: 0.8;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Menu Divider */
.menu-divider[b-54zr7zcf63] {
    height: 1px;
    background: #e5e7eb;
    margin: 6px 0;
}

/* Menu Items */
.menu-item[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 20px;
    margin: 0;
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    outline: none !important;
    background: transparent;
    color: #374151;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: none !important;
}

.menu-item:focus[b-54zr7zcf63],
.menu-item:focus-visible[b-54zr7zcf63] {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.menu-item:hover[b-54zr7zcf63] {
    background: #f3f4f6;
}

.menu-item svg[b-54zr7zcf63] {
    color: #6b7280;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.menu-item:hover svg[b-54zr7zcf63] {
    color: #374151;
}

/* Danger item (Sign Out) */
.menu-item-danger[b-54zr7zcf63] {
    color: #dc2626;
    margin-top: 4px;
    border-top: 1px solid #e5e7eb;
    padding-top: 16px;
}

.menu-item-danger:hover[b-54zr7zcf63] {
    background: #fef2f2;
}

.menu-item-danger svg[b-54zr7zcf63] {
    color: #dc2626;
}

/* Mode toggle item (Professional/Personal switch) */
.menu-item-mode[b-54zr7zcf63] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

.menu-item-mode:hover[b-54zr7zcf63] {
    background: rgba(var(--theme-primary-rgb, 99, 102, 241), 0.08);
}

.menu-item-mode svg[b-54zr7zcf63] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1));
}

/* Dark theme overrides for menu items */
.user-menu-dropdown.theme-space .menu-divider[b-54zr7zcf63],
.user-menu-dropdown.theme-winter .menu-divider[b-54zr7zcf63],
.user-menu-dropdown.theme-nature .menu-divider[b-54zr7zcf63],
.user-menu-dropdown.theme-ocean .menu-divider[b-54zr7zcf63],
.user-menu-dropdown.theme-mystic .menu-divider[b-54zr7zcf63],
.user-menu-dropdown.theme-tron .menu-divider[b-54zr7zcf63] {
    background: rgba(71, 85, 105, 0.5);
}

.user-menu-dropdown.theme-space .menu-item[b-54zr7zcf63],
.user-menu-dropdown.theme-winter .menu-item[b-54zr7zcf63],
.user-menu-dropdown.theme-nature .menu-item[b-54zr7zcf63],
.user-menu-dropdown.theme-ocean .menu-item[b-54zr7zcf63],
.user-menu-dropdown.theme-mystic .menu-item[b-54zr7zcf63],
.user-menu-dropdown.theme-tron .menu-item[b-54zr7zcf63] {
    color: #f1f5f9;
}

.user-menu-dropdown.theme-space .menu-item:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-winter .menu-item:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-nature .menu-item:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-ocean .menu-item:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-mystic .menu-item:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-tron .menu-item:hover[b-54zr7zcf63] {
    background: rgba(51, 65, 85, 0.5);
}

.user-menu-dropdown.theme-space .menu-item svg[b-54zr7zcf63],
.user-menu-dropdown.theme-winter .menu-item svg[b-54zr7zcf63],
.user-menu-dropdown.theme-nature .menu-item svg[b-54zr7zcf63],
.user-menu-dropdown.theme-ocean .menu-item svg[b-54zr7zcf63],
.user-menu-dropdown.theme-mystic .menu-item svg[b-54zr7zcf63],
.user-menu-dropdown.theme-tron .menu-item svg[b-54zr7zcf63] {
    color: #94a3b8;
}

.user-menu-dropdown.theme-space .menu-item:hover svg[b-54zr7zcf63],
.user-menu-dropdown.theme-winter .menu-item:hover svg[b-54zr7zcf63],
.user-menu-dropdown.theme-nature .menu-item:hover svg[b-54zr7zcf63],
.user-menu-dropdown.theme-ocean .menu-item:hover svg[b-54zr7zcf63],
.user-menu-dropdown.theme-mystic .menu-item:hover svg[b-54zr7zcf63],
.user-menu-dropdown.theme-tron .menu-item:hover svg[b-54zr7zcf63] {
    color: #f1f5f9;
}

.user-menu-dropdown.theme-space .menu-item-danger[b-54zr7zcf63],
.user-menu-dropdown.theme-winter .menu-item-danger[b-54zr7zcf63],
.user-menu-dropdown.theme-nature .menu-item-danger[b-54zr7zcf63],
.user-menu-dropdown.theme-ocean .menu-item-danger[b-54zr7zcf63],
.user-menu-dropdown.theme-mystic .menu-item-danger[b-54zr7zcf63],
.user-menu-dropdown.theme-tron .menu-item-danger[b-54zr7zcf63] {
    border-top-color: rgba(71, 85, 105, 0.5);
}

.user-menu-dropdown.theme-space .menu-item-danger:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-winter .menu-item-danger:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-nature .menu-item-danger:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-ocean .menu-item-danger:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-mystic .menu-item-danger:hover[b-54zr7zcf63],
.user-menu-dropdown.theme-tron .menu-item-danger:hover[b-54zr7zcf63] {
    background: rgba(220, 38, 38, 0.15);
}

/* Mobile-only items */
.menu-item.mobile-only[b-54zr7zcf63] {
    display: none;
}

@media (max-width: 599px) {
    .menu-item.mobile-only[b-54zr7zcf63] {
        display: flex;
    }
}

/* Work Mode section in menu */
.menu-workmode[b-54zr7zcf63] {
    display: none;
    padding: 8px 16px 12px;
}

.menu-workmode .menu-section-label[b-54zr7zcf63] {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

@media (max-width: 599px) {
    .menu-workmode.mobile-only[b-54zr7zcf63] {
        display: block;
    }
}

/* Mobile adjustments for dropdown */
@media (max-width: 599px) {
    .user-menu-dropdown[b-54zr7zcf63] {
        position: fixed !important;
        top: 56px !important;
        bottom: auto !important;
        left: 8px !important;
        right: 8px !important;
        max-width: calc(100% - 16px) !important;
        width: calc(100% - 16px) !important;
        max-height: calc(100vh - 72px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px !important;
        /* MOBILE-AUDIT-9: lift the sheet off the page (Josh, 10/2) - same shadow as
           .notification-dropdown in NotificationBell.razor.css. */
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(15, 23, 42, 0.16) !important;
        animation: menuFadeIn-b-54zr7zcf63 0.2s ease-out !important;
        padding-bottom: env(safe-area-inset-bottom, 8px);
    }
    
    @keyframes menuFadeIn-b-54zr7zcf63 {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .user-menu-overlay[b-54zr7zcf63] {
        background: transparent;
        }
    
    /* Larger touch targets on mobile */
    .user-menu-dropdown .menu-item[b-54zr7zcf63] {
        padding: 16px 20px !important;
        min-height: 52px !important;
    }
    
    .user-menu-dropdown .menu-header[b-54zr7zcf63] {
        padding: 20px !important;
    }
}

/* Sign In Button - Made prominent with solid background for Cloud theme */
.signin-btn[b-54zr7zcf63] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 24px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 
        0 4px 14px rgba(99, 102, 241, 0.4),
        0 2px 6px rgba(99, 102, 241, 0.2);
    position: relative;
    overflow: hidden;
}

.signin-btn[b-54zr7zcf63]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.signin-btn:hover[b-54zr7zcf63] {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 
        0 6px 20px rgba(99, 102, 241, 0.5),
        0 4px 10px rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
    color: white;
}

.signin-btn:hover[b-54zr7zcf63]::before {
    opacity: 1;
}

.signin-btn svg[b-54zr7zcf63] {
    opacity: 1;
    color: rgba(255, 255, 255, 0.9);
}

.signin-btn:hover svg[b-54zr7zcf63] {
    color: white;
}

/* ============================================
   NATIVE VISITOR DRAWER
   ============================================ */
.drawer-overlay[b-54zr7zcf63] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1200;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.visitor-drawer[b-54zr7zcf63] {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--drawer-width, 280px); /* Use CSS variable with fallback */
    height: 100vh;
    background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%);
    z-index: 1300;
    transform: translateX(-100%);
    transition: transform var(--transition-duration, 0.3s) var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: 4px 0 24px transparent;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.visitor-drawer.open[b-54zr7zcf63] {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(var(--theme-accent-rgb, 15, 23, 42), 0.2);
}

/* Theme-specific drawer backgrounds */
.visitor-drawer.theme-cloud[b-54zr7zcf63] {
    background: linear-gradient(180deg, #1e3a5f 0%, #312e81 100%);
}

.visitor-drawer.theme-space[b-54zr7zcf63] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1e1b4b 100%);
}

.visitor-drawer.theme-winter[b-54zr7zcf63] {
    background: linear-gradient(180deg, #1e3a5f 0%, #1e1b4b 100%);
}

.visitor-drawer.theme-nature[b-54zr7zcf63] {
    background: linear-gradient(180deg, #14532d 0%, #1a2e05 100%);
}

.visitor-drawer.theme-ocean[b-54zr7zcf63] {
    background: linear-gradient(180deg, #0c4a6e 0%, #134e4a 100%);
}

.visitor-drawer.theme-executive[b-54zr7zcf63] {
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

.drawer-header[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.drawer-logo-link[b-54zr7zcf63] {
    display: flex;
    align-items: center;
}

.drawer-logo[b-54zr7zcf63] {
    max-width: 140px;
    height: auto;
}

.drawer-close-btn[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.drawer-close-btn:hover[b-54zr7zcf63] {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.drawer-nav[b-54zr7zcf63] {
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 4px;
}

.drawer-cta[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.drawer-cta:hover[b-54zr7zcf63] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--theme-accent-rgb, 124, 58, 237), 0.4);
}

/* Theme-specific CTA accent */
.theme-nature .drawer-cta[b-54zr7zcf63] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.theme-ocean .drawer-cta[b-54zr7zcf63] {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
}

.drawer-divider[b-54zr7zcf63] {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 12px 0;
}

.drawer-section-label[b-54zr7zcf63] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
    padding: 0 12px;
    margin-bottom: 8px;
}

.drawer-link[b-54zr7zcf63] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.drawer-link:hover[b-54zr7zcf63] {
    background: rgba(var(--theme-accent-rgb, 255, 255, 255), 0.15);
    color: white;
    transform: translateX(4px);
}

.drawer-link svg[b-54zr7zcf63] {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.drawer-link:hover svg[b-54zr7zcf63] {
    opacity: 1;
}

/* Mobile optimizations */
@media (max-width: 599px) {
    .app-header[b-54zr7zcf63] {
        min-height: 48px;
        padding: 4px 8px;
    }
    
    .header-icon-btn[b-54zr7zcf63] {
        width: 36px;
        height: 36px;
    }
    
    .logo-image[b-54zr7zcf63] {
        max-width: 100px;
    }
}

/* Smooth scroll behavior */
html[b-54zr7zcf63] {
    scroll-behavior: smooth;
}

/* Footer modern styling */
.footer[b-54zr7zcf63] {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.02), transparent);
}

.footer-links[b-54zr7zcf63] {
    display: flex;
    justify-content: center;
    gap: 24px;
}

.footer-links a[b-54zr7zcf63] {
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-links a:hover[b-54zr7zcf63] {
    color: var(--theme-primary-ink, var(--theme-primary, #6366f1)) !important;
    transform: translateY(-2px);
}

/* Container improvements */
.container-fluid[b-54zr7zcf63] {
    max-width: 1600px;
    margin: 0 auto;
}

/* Mobile container optimization */
@media (max-width: 599px) {
    .container-fluid[b-54zr7zcf63] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Focus visible for accessibility */
*:focus-visible[b-54zr7zcf63] {
    outline: 2px solid var(--theme-primary, #6366f1);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Mobile touch optimization */
@media (hover: none) {
    .hover-scale:active[b-54zr7zcf63] {
        transform: scale(0.95);
    }
}

/* Prevent horizontal overflow on mobile */
body[b-54zr7zcf63] {
    overflow-x: hidden;
}

/* Improve text readability on mobile */
@media (max-width: 599px) {
    body[b-54zr7zcf63] {
        font-size: 14px;
    }
}

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-54zr7zcf63] {
        display: none;
    }

    .top-row.auth[b-54zr7zcf63] {
        justify-content: space-between;
    }

    .top-row a[b-54zr7zcf63], .top-row .btn-link[b-54zr7zcf63] {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-54zr7zcf63] {
        flex-direction: row;
    }

    .sidebar[b-54zr7zcf63] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-54zr7zcf63] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-54zr7zcf63], article[b-54zr7zcf63] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Animation keyframes */
@keyframes fadeIn-b-54zr7zcf63 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in[b-54zr7zcf63] {
    animation: fadeIn-b-54zr7zcf63 0.3s ease-out;
}

/* Loading skeleton */
.skeleton[b-54zr7zcf63] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-54zr7zcf63 1.5s ease-in-out infinite;
}

@keyframes loading-b-54zr7zcf63 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Improve menu dropdown on mobile */

/* ============================================
   THEME-AWARE FOOTER
   ============================================ */
.app-footer[b-54zr7zcf63] {
    padding: 40px 24px;
    margin-top: auto; /* Push footer to bottom of flex container */
    transition: background 0.3s ease, border-color 0.3s ease;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-container[b-54zr7zcf63] {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer-logo[b-54zr7zcf63] {
    max-width: 200px;
    height: auto;
    margin-bottom: 20px;
}

.app-footer .footer-copyright[b-54zr7zcf63] {
    font-size: 0.9rem;
    margin-bottom: 16px;
    opacity: 0.8;
}

.app-footer .footer-links[b-54zr7zcf63] {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.app-footer .footer-links a[b-54zr7zcf63] {
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 8px 16px;
    border-radius: 8px;
    position: relative;
}

.app-footer .footer-links a:hover[b-54zr7zcf63] {
    transform: translateY(-2px);
}

.app-footer .footer-links a[b-54zr7zcf63]::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: currentColor;
    transition: all 0.2s ease;
    transform: translateX(-50%);
    border-radius: 1px;
}

.app-footer .footer-links a:hover[b-54zr7zcf63]::after {
    width: calc(100% - 32px);
}

/* Cloud Theme Footer */
.app-footer.theme-cloud[b-54zr7zcf63] {
    background: #f8fafc;
    border-top-color: #e2e8f0;
}

.app-footer.theme-cloud .footer-copyright[b-54zr7zcf63] {
    color: #64748b;
}

.app-footer.theme-cloud .footer-links a[b-54zr7zcf63] {
    color: #3b82f6;
}

.app-footer.theme-cloud .footer-links a:hover[b-54zr7zcf63] {
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.15);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Space Theme Footer */
.app-footer.theme-space[b-54zr7zcf63] {
    background: linear-gradient(180deg, #0f0a1e 0%, #1a1040 100%);
    border-top-color: rgba(168, 85, 247, 0.3);
}

.app-footer.theme-space .footer-copyright[b-54zr7zcf63] {
    color: rgba(255, 255, 255, 0.7);
}

.app-footer.theme-space .footer-links a[b-54zr7zcf63] {
    color: #a78bfa;
}

.app-footer.theme-space .footer-links a:hover[b-54zr7zcf63] {
    color: #e9d5ff;
    background: rgba(167, 139, 250, 0.25);
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.4);
}

/* Winter Theme Footer */
.app-footer.theme-winter[b-54zr7zcf63] {
    background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 100%);
    border-top-color: rgba(56, 189, 248, 0.3);
}

.app-footer.theme-winter .footer-copyright[b-54zr7zcf63] {
    color: rgba(255, 255, 255, 0.7);
}


.app-footer.theme-winter .footer-links a[b-54zr7zcf63] {
    color: #38bdf8;
}

.app-footer.theme-winter .footer-links a:hover[b-54zr7zcf63] {
    color: #bae6fd;
    background: rgba(56, 189, 248, 0.25);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

/* Nature Theme Footer */
.app-footer.theme-nature[b-54zr7zcf63] {
    background: linear-gradient(180deg, #14532d 0%, #052e16 100%);
    border-top-color: rgba(74, 222, 128, 0.3);
}

.app-footer.theme-nature .footer-copyright[b-54zr7zcf63] {
    color: rgba(255, 255, 255, 0.7);
}

.app-footer.theme-nature .footer-links a[b-54zr7zcf63] {
    color: #4ade80;
}

.app-footer.theme-nature .footer-links a:hover[b-54zr7zcf63] {
    color: #bbf7d0;
    background: rgba(74, 222, 128, 0.25);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
}

/* Ocean Theme Footer */
.app-footer.theme-ocean[b-54zr7zcf63] {
    background: linear-gradient(180deg, #0c4a6e 0%, #164e63 100%);
    border-top-color: rgba(34, 211, 238, 0.3);
}

.app-footer.theme-ocean .footer-copyright[b-54zr7zcf63] {
    color: rgba(255, 255, 255, 0.7);
}

.app-footer.theme-ocean .footer-links a[b-54zr7zcf63] {
    color: #22d3ee;
}

.app-footer.theme-ocean .footer-links a:hover[b-54zr7zcf63] {
    color: #a5f3fc;
    background: rgba(34, 211, 238, 0.25);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
}

/* Executive Theme Footer */
.app-footer.theme-executive[b-54zr7zcf63] {
    background: #f8fafc;
    border-top-color: #e2e8f0;
}

.app-footer.theme-executive .footer-copyright[b-54zr7zcf63] {
    color: #64748b;
}

.app-footer.theme-executive .footer-links a[b-54zr7zcf63] {
    color: #475569;
}

.app-footer.theme-executive .footer-links a:hover[b-54zr7zcf63] {
    color: #1e293b;
    background: rgba(51, 65, 85, 0.08);
}

/* Mobile Footer */
@media (max-width: 599px) {
    .app-footer[b-54zr7zcf63] {
        padding: 32px 16px;
    }
    
    .footer-logo[b-54zr7zcf63] {
        max-width: 160px;
    }
    
    .app-footer .footer-links[b-54zr7zcf63] {
        flex-direction: column;
        gap: 12px;
    }
    
    .app-footer .footer-links a[b-54zr7zcf63] {
        padding: 8px 16px;
        border-radius: 8px;
        display: block;
    }
    
    .app-footer.theme-cloud .footer-links a[b-54zr7zcf63] {
        background: #f1f5f9;
    }
    
    .app-footer.theme-space .footer-links a[b-54zr7zcf63],
    .app-footer.theme-winter .footer-links a[b-54zr7zcf63],
    .app-footer.theme-nature .footer-links a[b-54zr7zcf63],
    .app-footer.theme-ocean .footer-links a[b-54zr7zcf63] {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    /* Hide all layout chrome */
    .app-header[b-54zr7zcf63],
    footer[b-54zr7zcf63],
    .footer[b-54zr7zcf63],
    .footer-links[b-54zr7zcf63],
    .footer-copyright[b-54zr7zcf63] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide stopwatch and notes panels */
    .stopwatch-panel-container[b-54zr7zcf63],
    .notes-panel-container[b-54zr7zcf63],
    .stopwatch-tab[b-54zr7zcf63],
    .notes-tab[b-54zr7zcf63],
    .stopwatch-drawer[b-54zr7zcf63],
    .notes-drawer[b-54zr7zcf63] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide floating controls and overlays */
    [class*="FloatingRecorder"][b-54zr7zcf63],
    [class*="GlobalSceneOverlay"][b-54zr7zcf63],
    [class*="floating-recorder"][b-54zr7zcf63],
    [class*="scene-overlay"][b-54zr7zcf63] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide all elements with no-print class */
    .no-print[b-54zr7zcf63],
    [class*="no-print"][b-54zr7zcf63] {
        display: none !important;
        visibility: hidden !important;
    }

    /* Reset body and html for print */
    html[b-54zr7zcf63], body[b-54zr7zcf63] {
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Ensure content fills the page */
    .page[b-54zr7zcf63], main[b-54zr7zcf63], article[b-54zr7zcf63] {
        padding: 0 !important;
        margin: 0 !important;
    }

    .container-fluid[b-54zr7zcf63] {
        max-width: 100% !important;
        padding: 20px !important;
        margin: 0 !important;
    }

    /* Preserve background colors and images */
    *[b-54zr7zcf63] {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Disable hover effects and transitions */
    *[b-54zr7zcf63] {
        transition: none !important;
    }

    /* Page break controls */
    .page-break-before[b-54zr7zcf63] {
        page-break-before: always !important;
    }

    .page-break-after[b-54zr7zcf63] {
        page-break-after: always !important;
    }

    .avoid-page-break[b-54zr7zcf63] {
        page-break-inside: avoid !important;
    }

    /* Ensure links are visible but not interactive */
    a[b-54zr7zcf63] {
        text-decoration: none !important;
    }

    a[href][b-54zr7zcf63]:after {
        content: none !important;
    }
}

/* /Shared/PublicLayout.razor.rz.scp.css */
.public-layout[b-h08p4wtj4u] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevent horizontal scrollbar from animations */
}
/* /Shared/RoadmapItemDialog.razor.rz.scp.css */
.confirm-dialog-overlay[b-xe8j4i5qy9] {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        animation: fadeIn-b-xe8j4i5qy9 0.2s ease;
    }

    .roadmap-dialog[b-xe8j4i5qy9] {
        background: var(--theme-surface, #fff);
        border-radius: 12px;
        box-shadow: 0 20px 60px transparent;
        width: 90%;
        max-width: 550px;
        max-height: 90vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        animation: slideIn-b-xe8j4i5qy9 0.2s ease;
    }

    .dialog-header[b-xe8j4i5qy9] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        border-bottom: 1px solid var(--theme-border, #e2e8f0);
        background: var(--theme-cta-gradient, linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%));
        color: white;
    }

    .dialog-title[b-xe8j4i5qy9] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .close-btn[b-xe8j4i5qy9] {
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 6px;
        padding: 0.25rem;
        cursor: pointer;
        color: white;
        transition: background 0.2s;
    }
    .close-btn:hover[b-xe8j4i5qy9] { background: rgba(255, 255, 255, 0.3); }

    .dialog-content[b-xe8j4i5qy9] {
        padding: 1.5rem;
        overflow-y: auto;
        flex: 1;
    }

    .form-group[b-xe8j4i5qy9] {
        margin-bottom: 1rem;
    }

    .form-group label[b-xe8j4i5qy9] {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--theme-text-secondary, #64748b);
        margin-bottom: 0.375rem;
    }

    .required[b-xe8j4i5qy9] { color: #ef4444; }

    .form-input[b-xe8j4i5qy9], .form-select[b-xe8j4i5qy9], .form-textarea[b-xe8j4i5qy9] {
        width: 100%;
        padding: 0.625rem 0.875rem;
        font-size: 0.9rem;
        border: 1px solid var(--theme-border, #e2e8f0);
        border-radius: 8px;
        background: var(--theme-surface, #fff);
        color: var(--theme-text-primary, #1e293b);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-input:focus[b-xe8j4i5qy9], .form-select:focus[b-xe8j4i5qy9], .form-textarea:focus[b-xe8j4i5qy9] {
        outline: none;
        border-color: var(--theme-input-focus, #8b5cf6);
        box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 139, 92, 246), 0.15);
    }

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

    .info-alert[b-xe8j4i5qy9] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        background: var(--theme-bg-info, #eff6ff);
        border-radius: 8px;
        font-size: 0.8rem;
        color: var(--theme-text-info, #1e40af);
    }

    .dialog-actions[b-xe8j4i5qy9] {
        display: flex;
        justify-content: flex-end;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        border-top: 1px solid var(--theme-border, #e2e8f0);
        background: var(--theme-surface-secondary, #f8fafc);
    }

    .btn[b-xe8j4i5qy9] {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
        font-weight: 500;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
    }

    .spinner[b-xe8j4i5qy9] {
        width: 14px;
        height: 14px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin-b-xe8j4i5qy9 0.8s linear infinite;
    }

    @keyframes fadeIn-b-xe8j4i5qy9 { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideIn-b-xe8j4i5qy9 { from { opacity: 0; transform: scale(0.95) translateY(-10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
    @keyframes spin-b-xe8j4i5qy9 { to { transform: rotate(360deg); } }

    @media (max-width: 600px) {
        .form-row[b-xe8j4i5qy9] { grid-template-columns: 1fr; }
    }
/* /Shared/SubscriptionDetailsDialog.razor.rz.scp.css */
/* SubscriptionDetailsDialog.razor.css */
/* Wrapper styles removed */

.subscription-dialog-overlay[b-grtogz8005] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-grtogz8005 0.2s ease-out;
}

.subscription-dialog-content[b-grtogz8005] {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: var(--theme-surface);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideIn-b-grtogz8005 0.2s ease-out;
}

.details-header[b-grtogz8005] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary);
    border-bottom: 1px solid var(--theme-border);
    padding-bottom: 12px;
}

.details-grid[b-grtogz8005] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .details-grid[b-grtogz8005] { grid-template-columns: 1fr; }
}

.full-width[b-grtogz8005] { grid-column: 1 / -1; }

.detail-item[b-grtogz8005] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-grtogz8005] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--theme-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value[b-grtogz8005] {
    font-size: 0.95rem;
    color: var(--theme-text-primary);
    padding: 10px 12px;
    background: var(--theme-surface-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    word-break: break-all;
}

.status-row[b-grtogz8005] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--theme-surface-secondary);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
}

.switch-label[b-grtogz8005] {
    font-size: 0.95rem;
    color: var(--theme-text-primary);
}

.dialog-actions[b-grtogz8005] {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--theme-border);
}

@keyframes fadeIn-b-grtogz8005 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn-b-grtogz8005 {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Dark Mode removed - handled by variables */