/* Shared product-quality layer. Page styles remain responsible for feature-specific layout. */
:root {
    --premium-ink: var(--text-strong);
    --premium-blue: var(--brand-1);
    --premium-teal: var(--brand-3);
    --premium-orange: var(--brand-warm);
    --premium-lilac: var(--brand-2);
    --premium-surface: color-mix(in srgb, var(--surface-0) 98%, transparent);
    --premium-surface-muted: color-mix(in srgb, var(--surface-1) 96%, transparent);
    --premium-border: color-mix(in srgb, var(--text-strong) 10%, transparent);
    --premium-border-strong: color-mix(in srgb, var(--premium-blue) 28%, var(--line-soft));
    --premium-shadow: 0 3px 12px rgba(15, 23, 42, 0.045);
    --premium-shadow-hover: 0 6px 18px rgba(15, 23, 42, 0.075);
    --premium-radius: 14px;
    --premium-radius-sm: 10px;
}

body.dark-mode {
    --premium-ink: #f2f6ff;
    --premium-surface: color-mix(in srgb, var(--surface-1) 94%, transparent);
    --premium-surface-muted: color-mix(in srgb, var(--surface-0) 90%, transparent);
    --premium-border: color-mix(in srgb, #d9e4ff 16%, transparent);
    --premium-border-strong: color-mix(in srgb, var(--brand-1) 38%, var(--line-soft));
    --premium-shadow: 0 4px 14px rgba(2, 8, 23, 0.22);
    --premium-shadow-hover: 0 8px 20px rgba(2, 8, 23, 0.3);
}

.main-wrapper {
    min-width: 0;
}

.main-content {
    width: 100%;
    max-width: 1680px;
    margin-inline: auto;
}

.sidebar {
    border-right: 1px solid var(--premium-border) !important;
    background: var(--premium-surface) !important;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.sidebar-brand-mark,
.profile-circle,
.sidebar-user-avatar,
.footer-logo-circle {
    border: 1px solid var(--premium-border-strong) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--premium-blue) 14%, transparent) !important;
}

.sidebar-menu {
    gap: 0.28rem !important;
}

.sidebar-menu a,
.theme-toggle-sidebar {
    min-height: 42px;
    border: 1px solid transparent !important;
    border-radius: var(--premium-radius-sm) !important;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast) !important;
}

.sidebar-menu a:hover,
.theme-toggle-sidebar:hover {
    transform: translateX(2px);
    border-color: var(--premium-border) !important;
    background: var(--premium-surface-muted) !important;
}

.sidebar-menu a.active {
    border-color: var(--premium-border-strong) !important;
    background: color-mix(in srgb, var(--premium-blue) 11%, var(--surface-0)) !important;
    color: var(--premium-blue) !important;
    box-shadow: inset 3px 0 0 var(--premium-blue);
}

.main-header-bar {
    border-bottom: 1px solid var(--premium-border) !important;
    background: color-mix(in srgb, var(--premium-surface) 90%, transparent) !important;
    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.04) !important;
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.header-page-title {
    letter-spacing: -0.02em;
}

.global-search,
.header-icon-btn,
.header-theme-toggle,
.header-profile-icon {
    border: 1px solid var(--premium-border) !important;
    background: var(--premium-surface-muted) !important;
    box-shadow: none !important;
}

.global-search:focus-within,
.global-search:hover,
.header-icon-btn:hover,
.header-theme-toggle:hover,
.header-profile-icon:hover {
    border-color: var(--premium-border-strong) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--premium-blue) 10%, transparent) !important;
}

.btn,
button,
input,
select,
textarea {
    font-family: inherit;
}

.btn {
    min-height: 40px;
    border-radius: var(--premium-radius-sm) !important;
    font-weight: 750;
    letter-spacing: 0;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast) !important;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--premium-blue) 34%, transparent) !important;
    outline-offset: 2px;
}

.btn-gradient-primary,
.btn-primary,
.btn-premium,
.btn-success {
    border-color: transparent !important;
    background: var(--premium-blue) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--premium-blue) 22%, transparent) !important;
}

.btn-gradient-primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.btn-premium:hover:not(:disabled),
.btn-success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--premium-blue) 88%, #000) !important;
    box-shadow: 0 12px 24px color-mix(in srgb, var(--premium-blue) 28%, transparent) !important;
}

.btn-outline-premium,
.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--premium-border-strong) !important;
    color: var(--premium-blue) !important;
    background: transparent !important;
}

.btn-outline-premium:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background: color-mix(in srgb, var(--premium-blue) 9%, var(--surface-0)) !important;
}

.card,
.dash-card,
.prompt-card,
.contact-card,
.settings-card,
.profile-card,
.payment-card,
.feature-card,
.highlight-card,
.quiz-card {
    border: 1px solid var(--premium-border) !important;
    border-radius: var(--premium-radius) !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow) !important;
}

.card:hover,
.dash-card:hover,
.feature-card:hover,
.highlight-card:hover {
    transform: none !important;
    border-color: var(--premium-border-strong) !important;
    box-shadow: var(--premium-shadow) !important;
}

.card-header,
.card-footer {
    border-color: var(--premium-border) !important;
    background: var(--premium-surface-muted) !important;
}

.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    min-height: 42px;
    border: 1px solid var(--premium-border) !important;
    border-radius: var(--premium-radius-sm) !important;
    background: color-mix(in srgb, var(--surface-0) 90%, transparent) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
}

textarea {
    min-height: 112px;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--premium-blue) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--premium-blue) 12%, transparent) !important;
}

.badge,
.pill,
.status-badge,
.chip,
.tag {
    border-radius: 999px !important;
    letter-spacing: 0.01em;
}

.section-title,
.dashboard-title,
.page-title,
.hero-title {
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.dashboard-shell,
.notes-page,
.quiz-page,
.saarthi-page,
.settings-page,
.profile-page,
.payment-page,
.community-page,
.scheduler-page {
    padding-block: clamp(1rem, 2vw, 2rem);
}

.empty-state,
.loading-state,
.error-state {
    border: 1px dashed var(--premium-border-strong);
    border-radius: var(--premium-radius);
    background: var(--premium-surface-muted);
    color: var(--text-soft);
}

.toast-stack {
    gap: 0.65rem !important;
}

.toast,
.toast-message,
.profile-dropdown-menu,
.global-search-suggestions {
    border: 1px solid var(--premium-border) !important;
    border-radius: var(--premium-radius-sm) !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow-hover) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.modern-footer {
    border-top: 1px solid var(--premium-border) !important;
    background: var(--premium-surface-muted) !important;
}

/* Feature surfaces */
.chat-workspace {
    gap: 0.9rem !important;
}

.chat-history-panel,
.chat-main-stage,
.chat-premium-footer,
.notes-premium-card,
.scheduler-main-card,
.saarthi-panel,
.status-card-modern,
.manual-verify-card,
.pricing-card,
.profile-premium-card,
.settings-card,
.community-layout > section,
.community-layout > article {
    border: 1px solid var(--premium-border) !important;
    border-radius: var(--premium-radius) !important;
    background: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow) !important;
}

.chat-history-panel,
.chat-main-stage {
    overflow: hidden;
}

.chat-stage-header,
.chat-history-head,
.settings-card-header,
.task-panel-head,
.community-card-head,
.panel-head {
    border-color: var(--premium-border) !important;
    background: var(--premium-surface-muted) !important;
}

.chat-messages-area {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--premium-blue) 54%, transparent) transparent;
}

.chat-input-wrapper,
.agent-selector,
.prompt-input,
.notes-input-card input,
.notes-input-card select,
.notes-input-card textarea {
    border-color: var(--premium-border) !important;
    background: var(--premium-surface-muted) !important;
}

.message-bubble,
.chat-message-bubble,
.user-message,
.assistant-message {
    border: 1px solid var(--premium-border) !important;
    border-radius: 15px !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05) !important;
}

.notes-premium-container,
.payment-premium-container,
.profile-premium-container,
.settings-page,
.saarthi-shell,
.community-shell,
.scheduler-page {
    max-width: 1540px;
    margin-inline: auto;
}

.notes-premium-header,
.profile-page-header,
.settings-hero,
.scheduler-header,
.pricing-clean-intro,
.saas-hero,
.saarthi-hero,
.community-hero {
    border-bottom: 1px solid var(--premium-border);
    padding-bottom: 1rem;
}

.notes-premium-header h1,
.profile-page-header h1,
.settings-hero h1,
.scheduler-heading h1,
.saas-hero h1,
.saarthi-hero h1,
.community-hero h1 {
    letter-spacing: -0.04em;
}

.quiz-streak-banner,
.community-snapshot-grid,
.profile-badges,
.status-details,
.manual-verify-row {
    gap: 0.7rem !important;
}

.quiz-streak-item,
.community-snapshot-metric,
.status-item,
.settings-option-tile,
.profile-stat-card {
    border: 1px solid var(--premium-border) !important;
    border-radius: var(--premium-radius-sm) !important;
    background: var(--premium-surface-muted) !important;
}

.scheduler-toolbar,
.scheduler-controls,
.task-form,
.community-mode-tabs,
.focus-mode-tabs {
    border: 1px solid var(--premium-border) !important;
    border-radius: var(--premium-radius-sm) !important;
    background: var(--premium-surface-muted) !important;
}

.scheduler-tabs button,
.community-mode-tabs button,
.focus-mode-tabs button,
.mode-tab {
    border-radius: 9px !important;
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.scheduler-tabs button.active,
.community-mode-tabs button.active,
.focus-mode-tabs button.active,
.mode-tab.active {
    background: var(--premium-blue) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--premium-blue) 22%, transparent) !important;
}

.pricing-card.is-featured,
.pricing-card.featured,
.plan-card.is-featured {
    border-color: color-mix(in srgb, var(--premium-orange) 56%, var(--premium-border)) !important;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--premium-orange) 16%, transparent) !important;
}

.saarthi-page-loader,
.quiz-loading-container,
.dashboard-loading-screen {
    background: color-mix(in srgb, var(--surface-0) 86%, transparent) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

@media (max-width: 640px) {
    .chat-workspace {
        gap: 0 !important;
    }

    .chat-history-panel {
        border-radius: 0 !important;
    }

    .scheduler-toolbar,
    .scheduler-controls,
    .task-form,
    .community-mode-tabs,
    .focus-mode-tabs {
        border-inline: 0 !important;
        border-radius: 0 !important;
    }
}

@media (max-width: 992px) {
    .main-content {
        padding-inline: clamp(0.8rem, 3vw, 1.5rem) !important;
    }

    .main-header-bar {
        min-height: 64px;
    }

    .header-context .header-overline {
        display: none;
    }
}

@media (max-width: 640px) {
    .main-content {
        padding-inline: 0.8rem !important;
    }

    .header-page-title {
        font-size: 1.05rem !important;
    }

    .card,
    .dash-card,
    .prompt-card,
    .contact-card,
    .settings-card,
    .profile-card,
    .payment-card,
    .feature-card,
    .highlight-card,
    .quiz-card {
        border-radius: 13px !important;
    }

    .btn {
        min-height: 42px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Shared surfaces stay calm; only controls carry the strongest emphasis. */
.card,
.dash-card,
.prompt-card,
.contact-card,
.settings-card,
.profile-card,
.payment-card,
.feature-card,
.highlight-card,
.quiz-card,
.chat-history-panel,
.chat-main-stage,
.notes-premium-card,
.scheduler-main-card,
.saarthi-panel,
.status-card-modern,
.manual-verify-card,
.pricing-card,
.profile-premium-card,
.community-layout > section,
.community-layout > article {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 640px) {
    .chat-main-stage,
    .notes-premium-card,
    .scheduler-main-card,
    .saarthi-panel,
    .status-card-modern,
    .manual-verify-card,
    .pricing-card,
    .profile-premium-card,
    .community-layout > section,
    .community-layout > article {
        border-radius: 12px !important;
    }
}