/* ============================================
   SETTINGS MODAL ENHANCEMENTS
   ============================================ */

/* Expanded Settings Modal (4 tabs) */
.settings-modal-expanded {
    max-width: 560px;
    width: 95%;
}

.settings-modal-expanded .modal-body {
    max-height: 75vh;
    overflow-y: auto;
    padding: 12px 20px;
}

/* Reduce tab bar margin in settings modal */
.settings-modal-expanded .settings-tabs {
    margin-bottom: 10px;
}

/* Tighter settings sections */
.settings-modal-expanded .settings-section {
    margin-bottom: 10px;
}

.settings-modal-expanded .settings-section h3 {
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.settings-modal-expanded .form-group {
    margin-bottom: 12px;
}

/* ============================================
   PREMIUM FORM INPUTS & SELECTS
   Using standardized input tokens from main.css
   ============================================ */
.settings-modal-expanded .form-group select,
.settings-modal-expanded .form-group input[type="text"],
.settings-modal-expanded .form-group input[type="number"] {
    width: 100%;
    padding: var(--input-padding-md);
    border: var(--input-border-width) solid var(--border-color);
    border-radius: var(--input-radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    background: var(--surface-primary);
    transition: all var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
}

.settings-modal-expanded .form-group select {
    cursor: pointer;
    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='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.settings-modal-expanded .form-group select:hover,
.settings-modal-expanded .form-group input:hover {
    border-color: var(--primary-200);
}

.settings-modal-expanded .form-group select:focus,
.settings-modal-expanded .form-group input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Dark Mode Inputs */
body.dark-mode .settings-modal-expanded .form-group select,
body.dark-mode .settings-modal-expanded .form-group input[type="text"],
body.dark-mode .settings-modal-expanded .form-group input[type="number"] {
    background: var(--color-dark-surface);
    border-color: var(--slate-600);
    color: var(--color-dark-text);
}

body.dark-mode .settings-modal-expanded .form-group select {
    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='%2394a3b8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

body.dark-mode .settings-modal-expanded .form-group select:hover,
body.dark-mode .settings-modal-expanded .form-group input:hover {
    border-color: var(--primary-500);
}

body.dark-mode .settings-modal-expanded .form-group select:focus,
body.dark-mode .settings-modal-expanded .form-group input:focus {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px var(--color-dark-glow);
}

/* ============================================
   SETTINGS SECTION CARDS
   ============================================ */
.settings-modal-expanded .settings-section {
    padding: 14px 16px;
    background: var(--bg-primary);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    border: 1px solid var(--color-primary-light);
    box-shadow: 0 1px 3px rgba(20, 184, 166, 0.04);
}

.settings-modal-expanded .settings-section:last-child {
    margin-bottom: 0;
}

.settings-modal-expanded .settings-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.settings-modal-expanded .settings-section h3 i {
    font-size: 0.875rem;
    color: var(--primary-500);
    width: 18px;
    text-align: center;
}

.settings-modal-expanded .settings-hint {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: -6px;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Dark Mode Section Cards */
body.dark-mode .settings-modal-expanded .settings-section {
    background: var(--color-dark-surface);
    border-color: var(--color-dark-glow);
    box-shadow: 0 1px 3px rgba(45, 212, 191, 0.05);
}

body.dark-mode .settings-modal-expanded .settings-section h3 {
    color: var(--color-dark-text);
    border-bottom-color: var(--slate-600);
}

body.dark-mode .settings-modal-expanded .settings-section h3 i {
    color: var(--primary-400);
}

body.dark-mode .settings-modal-expanded .settings-hint {
    color: var(--color-dark-text-secondary);
}

/* ============================================
   SMART TOGGLE ROWS
   ============================================ */
.settings-modal-expanded .smart-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.settings-modal-expanded .smart-toggle-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-modal-expanded .smart-toggle-row:first-child {
    padding-top: 0;
}

.settings-modal-expanded .smart-toggle-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.settings-modal-expanded .smart-toggle-label > i {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 2px;
}

.settings-modal-expanded .smart-toggle-label > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-modal-expanded .toggle-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
}

.settings-modal-expanded .toggle-hint {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.3;
}

/* Dark Mode Toggle Rows */
body.dark-mode .settings-modal-expanded .smart-toggle-row {
    border-bottom-color: #334155;
}

body.dark-mode .settings-modal-expanded .smart-toggle-label > i {
    color: #94a3b8;
}

body.dark-mode .settings-modal-expanded .toggle-title {
    color: #e2e8f0;
}

body.dark-mode .settings-modal-expanded .toggle-hint {
    color: #94a3b8;
}

/* ============================================
   FM SETTINGS ROWS (Fairness)
   ============================================ */
.settings-modal-expanded .fm-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f5f9;
}

.settings-modal-expanded .fm-settings-row:last-child {
    border-bottom: none;
}

.settings-modal-expanded .fm-settings-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.settings-modal-expanded .fm-settings-label > i {
    color: #64748b;
    font-size: 0.875rem;
    margin-top: 2px;
}

.settings-modal-expanded .fm-label-text {
    font-weight: 600;
    font-size: 0.85rem;
    color: #334155;
}

.settings-modal-expanded .fm-label-hint {
    font-size: 0.7rem;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.settings-modal-expanded .fm-number-input {
    width: 70px;
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    color: #1e293b;
    background: white;
    transition: all 0.2s ease;
}

.settings-modal-expanded .fm-number-input:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: var(--focus-ring-shadow);
}

/* Dark Mode FM Settings */
body.dark-mode .settings-modal-expanded .fm-settings-row {
    border-bottom-color: #334155;
}

body.dark-mode .settings-modal-expanded .fm-settings-label > i {
    color: #94a3b8;
}

body.dark-mode .settings-modal-expanded .fm-label-text {
    color: #e2e8f0;
}

body.dark-mode .settings-modal-expanded .fm-label-hint {
    color: #94a3b8;
}

body.dark-mode .settings-modal-expanded .fm-number-input {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

body.dark-mode .settings-modal-expanded .fm-number-input:focus {
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

/* ============================================
   FAIRNESS LEGEND
   ============================================ */
.settings-modal-expanded .fairness-legend {
    display: flex;
    gap: 16px;
    padding: 10px 12px;
    background: #f1f5f9;
    border-radius: 8px;
}

.settings-modal-expanded .fairness-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #64748b;
}

.settings-modal-expanded .fairness-legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.settings-modal-expanded .fairness-legend-color.fair {
    background: #5b21b6;
}

.settings-modal-expanded .fairness-legend-color.moderate {
    background: #6d28d9;
}

.settings-modal-expanded .fairness-legend-color.unfair {
    background: #7c3aed;
}

body.dark-mode .settings-modal-expanded .fairness-legend {
    background: #334155;
}

body.dark-mode .settings-modal-expanded .fairness-legend-item {
    color: #94a3b8;
}

/* ============================================
   SETTINGS MODAL HEADER
   ============================================ */
.settings-modal-expanded .modal-header {
    padding: 16px 20px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.settings-modal-expanded .modal-header h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
}

body.dark-mode .settings-modal-expanded .modal-header {
    border-bottom-color: #334155;
}

body.dark-mode .settings-modal-expanded .modal-header h2 {
    color: #f1f5f9;
}

/* ============================================
   SETTINGS ACTION BUTTONS
   ============================================ */
.settings-modal-expanded .fm-dashboard-action .btn,
.settings-modal-expanded .settings-section .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-modal-expanded .fm-dashboard-action .btn:hover,
.settings-modal-expanded .settings-section .btn:hover {
    border-color: #14b8a6;
    color: #0d9488;
    background: rgba(20, 184, 166, 0.05);
}

.settings-modal-expanded .fm-dashboard-action .btn i,
.settings-modal-expanded .settings-section .btn i {
    font-size: 0.875rem;
}

body.dark-mode .settings-modal-expanded .fm-dashboard-action .btn,
body.dark-mode .settings-modal-expanded .settings-section .btn {
    background: #1e293b;
    border-color: #475569;
    color: #94a3b8;
}

body.dark-mode .settings-modal-expanded .fm-dashboard-action .btn:hover,
body.dark-mode .settings-modal-expanded .settings-section .btn:hover {
    border-color: #2dd4bf;
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.1);
}

/* ============================================
   WORK MODE FIELDS
   ============================================ */
.settings-modal-expanded .work-mode-settings {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.settings-modal-expanded .work-mode-field {
    margin-bottom: 12px;
}

.settings-modal-expanded .work-mode-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
}

.settings-modal-expanded .work-mode-field input,
.settings-modal-expanded .work-mode-field select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #1e293b;
    background: white;
    transition: all 0.2s ease;
}

.settings-modal-expanded .work-mode-field input:focus,
.settings-modal-expanded .work-mode-field select:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: var(--focus-ring-shadow);
}

body.dark-mode .settings-modal-expanded .work-mode-settings {
    border-top-color: #475569;
}

body.dark-mode .settings-modal-expanded .work-mode-field label {
    color: #94a3b8;
}

body.dark-mode .settings-modal-expanded .work-mode-field input,
body.dark-mode .settings-modal-expanded .work-mode-field select {
    background: #1e293b;
    border-color: #475569;
    color: #f1f5f9;
}

/* ============================================
   QUOTA SETTINGS
   ============================================ */
.settings-modal-expanded .quota-settings-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
}

.settings-modal-expanded .quota-settings-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 10px;
}

.settings-modal-expanded .quota-settings-section h4 i {
    color: #14b8a6;
}

.settings-modal-expanded .quota-config {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

body.dark-mode .settings-modal-expanded .quota-settings-section {
    border-top-color: #475569;
}

body.dark-mode .settings-modal-expanded .quota-settings-section h4 {
    color: #94a3b8;
}

body.dark-mode .settings-modal-expanded .quota-settings-section h4 i {
    color: #2dd4bf;
}

/* 3-Tab Layout */
.settings-tabs-3 {
    display: flex;
    gap: 4px;
}

.settings-tabs-3 .tab-btn {
    flex: 1;
    padding: 10px 8px;
    font-size: 0.85rem;
    text-align: center;
}

/* 4-Tab Layout (legacy) */
.settings-tabs-4 {
    display: flex;
    gap: 2px;
}

.settings-tabs-4 .tab-btn {
    flex: 1;
    padding: 8px 6px;
    font-size: 0.78rem;
    text-align: center;
}

/* Integrations Tab Content */
#integrations-tab {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#integrations-tab .integrations-section {
    margin-bottom: 0;
}

/* Fairness Tab Content - Simplified version */
#fairness-tab {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Remove any extra top margin from first element in fairness tab */
#fairness-tab > *:first-child {
    margin-top: 0;
}

/* Fairness Dashboard Launcher */
.fairness-dashboard-launcher {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 12px;
    color: white;
}

.fairness-dashboard-launcher .launcher-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 24px;
    flex-shrink: 0;
}

.fairness-dashboard-launcher .launcher-content {
    flex: 1;
}

.fairness-dashboard-launcher .launcher-content h3 {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 600;
}

.fairness-dashboard-launcher .launcher-content p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.fairness-dashboard-launcher .btn {
    background: white;
    color: #6366f1;
    border: none;
    padding: 10px 16px;
    font-weight: 600;
    white-space: nowrap;
}

.fairness-dashboard-launcher .btn:hover {
    background: rgba(255, 255, 255, 0.9);
}

/* Fairness Settings Inline */
.fairness-settings-inline {
    padding: 16px;
    background: var(--surface-secondary, #f8fafc);
    border-radius: 12px;
}

.fairness-settings-inline h4 {
    margin: 0 0 16px;
    font-size: 0.9rem;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fairness-settings-inline .form-group {
    margin-bottom: 16px;
}

.fairness-settings-inline .form-group:last-child {
    margin-bottom: 0;
}

.fairness-settings-inline .toggle-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.fairness-settings-inline .form-hint {
    display: block;
    font-size: 0.8rem;
    color: var(--text-tertiary, #94a3b8);
    margin-top: 4px;
    margin-left: 24px;
}

.fairness-settings-inline .form-input {
    width: 80px;
    padding: 8px 12px;
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Dark mode */
body.dark-mode .fairness-dashboard-launcher {
    background: linear-gradient(135deg, #4c1d95 0%, #6d28d9 100%);
}

body.dark-mode .fairness-settings-inline {
    background: var(--surface-secondary);
}

body.dark-mode .fairness-settings-inline .form-input {
    background: var(--surface-primary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

/* Ensure views display properly within settings modal */
#fairness-tab .fd-view {
    display: none;
}

#fairness-tab .fd-view.active {
    display: block !important;
    opacity: 1 !important;
}

/* Hide the settings drawer in settings modal context - it's redundant */
#fairness-tab .fd-settings-drawer {
    display: none !important;
}

/* Show simplified header in settings modal - keep tabs visible */
#fairness-tab .fd-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

/* Hide decorative pseudo-elements */
#fairness-tab .fd-header::before,
#fairness-tab .fd-header::after {
    display: none;
}

/* Hide brand section in settings context - just show tabs */
#fairness-tab .fd-header-top,
#fairness-tab .fd-brand {
    display: none;
}

#fairness-tab .fd-brand-tier {
    font-size: 9px;
    padding: 2px 6px;
}

#fairness-tab .fd-icon-btn {
    width: 32px;
    height: 32px;
}

#fairness-tab .fd-view-tabs {
    gap: 6px;
    padding-bottom: 12px;
}

#fairness-tab .fd-view-tab {
    padding: 8px 12px;
    font-size: 12px;
    gap: 6px;
}

#fairness-tab .fd-view-tab i {
    font-size: 12px;
}

#fairness-tab .fd-tab-badge {
    font-size: 8px;
    padding: 2px 5px;
}

/* Compact hero card */
#fairness-tab .fd-hero-card {
    padding: 16px;
    border-radius: 14px;
    margin-bottom: 14px;
}

#fairness-tab .fd-hero-content {
    gap: 16px;
}

#fairness-tab .fd-score-ring {
    width: 80px;
    height: 80px;
}

#fairness-tab .fd-score-ring svg {
    width: 80px;
    height: 80px;
}

#fairness-tab .fd-ring-bg,
#fairness-tab .fd-ring-progress {
    cx: 40;
    cy: 40;
    r: 34;
}

#fairness-tab .fd-score-number {
    font-size: 1.4rem;
}

#fairness-tab .fd-score-max {
    font-size: 0.6rem;
}

#fairness-tab .fd-hero-label {
    font-size: 12px;
}

#fairness-tab .fd-hero-status {
    font-size: 11px;
    padding: 4px 10px;
}

#fairness-tab .fd-hero-desc {
    font-size: 11px;
}

#fairness-tab .fd-hero-stats {
    padding: 12px 16px;
    gap: 20px;
}

#fairness-tab .fd-mini-value {
    font-size: 16px;
}

#fairness-tab .fd-mini-label {
    font-size: 9px;
}

/* Compact dimension cards */
#fairness-tab .fd-dimensions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

#fairness-tab .fd-dim-card {
    padding: 12px;
    border-radius: 10px;
}

#fairness-tab .fd-dim-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

#fairness-tab .fd-dim-icon i {
    font-size: 12px;
}

#fairness-tab .fd-dim-name {
    font-size: 11px;
}

#fairness-tab .fd-dim-score {
    font-size: 14px;
}

#fairness-tab .fd-dim-bar {
    height: 4px;
    border-radius: 2px;
}

#fairness-tab .fd-dim-desc {
    font-size: 9px;
}

/* Compact sections */
#fairness-tab .fd-section {
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
}

#fairness-tab .fd-section-title {
    font-size: 12px;
    margin-bottom: 10px;
}

#fairness-tab .fd-section-title i {
    font-size: 11px;
}

/* Hide certain views/elements in settings modal */
#fairness-tab .fd-view-tab[data-view="admin"] {
    display: none !important;
}

/* Responsive for smaller screens */
@media (max-width: 480px) {
    .settings-tabs-3 .tab-btn {
        padding: 8px 6px;
        font-size: 0.78rem;
    }

    .settings-tabs-4 .tab-btn {
        padding: 6px 4px;
        font-size: 0.72rem;
    }

    #fairness-tab .fd-hero-content {
        flex-direction: column;
        text-align: center;
    }

    #fairness-tab .fd-dimensions-grid {
        grid-template-columns: 1fr;
    }

    #fairness-tab .fd-view-tab span:not(.fd-tab-badge) {
        display: none;
    }
}

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

.integrations-modal-content {
    /* Wider modal so each integration card has room to frame its content
       (icon header, disclosure block, action row) without the connect
       button feeling crammed against the right edge. The previous 520px
       cut the disclosure text into 4-5 lines per item and made the
       primary CTA sit too close to the dialog frame. */
    max-width: 680px;
    width: 95%;
}

.integrations-modal-body {
    /* Tightened upper padding (was 28px) — the previous spacing pushed
       the Google Calendar card's Connect button below the fold at
       common laptop viewport heights (768/800). Trimming 12px from the
       top + 4px from the section gap brings the action row into view. */
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 80vh;
    overflow-y: auto;
}
.integrations-modal-body .integrations-section-header {
    /* The "Calendar Connections" header used to sit ~20px below the body
       padding. Slot it tight to the cards instead — same visual weight,
       less wasted space. */
    margin-top: 0;
    margin-bottom: 4px;
}

.integrations-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.integrations-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.integrations-section-header i {
    color: var(--primary-500, #14b8a6);
}

/* Premium crown icon uses amber/gold */
.integrations-section-header i.fa-crown {
    color: var(--warning, #f59e0b);
}

/* Integration Card — larger inner padding + soft shadow gives the connect
   button a proper frame instead of letting it sit flush against the card
   edge. The disclosure block now has space to breathe between the icon
   header above and the action row below. */
.integration-card {
    background: var(--surface-primary, #ffffff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-xl, 16px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--slate-900, #0f172a) 4%, transparent),
        0 2px 8px color-mix(in srgb, var(--slate-900, #0f172a) 3%, transparent);
    transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.integration-card:hover {
    border-color: color-mix(in srgb, var(--primary-500, #14b8a6) 25%, var(--border-default, #e2e8f0));
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--slate-900, #0f172a) 5%, transparent),
        0 6px 16px color-mix(in srgb, var(--slate-900, #0f172a) 6%, transparent);
}

body.dark-mode .integration-card {
    background: var(--surface-secondary, #1e293b);
    border-color: var(--border-default, #334155);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.integration-card-header {
    display: flex;
    align-items: center;
    gap: 11px;
}

.integration-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg, 12px);
    font-size: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.integration-icon.google {
    background: #ffffff;
    border: 1px solid #dadce0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* SOLID FALLBACK FIRST (2026-07-20, user: "Mobile Connected Google Calendar …
   on mobile it's gray without logo"). The multi-colour Google logo was painted
   ONLY via a background-clip:text gradient with -webkit-text-fill-color:
   transparent. When that technique fails — some mobile WebViews / older Safari
   don't honour background-clip:text on an icon-font glyph, and if the fa-brands
   webfont is slow/blocked the glyph box is empty — the transparent fill left the
   icon INVISIBLE, reading as a plain gray tile with no logo. Set a solid Google
   blue as the base colour so the glyph is ALWAYS visible; the 4-colour gradient
   is then layered as a progressive enhancement, guarded by @supports so it only
   turns the fill transparent where the clip is actually supported. */
.integration-icon.google i {
    color: #4285F4; /* solid fallback — visible even if clip/webfont fails */
    font-size: 1.6rem;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .integration-icon.google i {
        background: linear-gradient(135deg, #4285F4 25%, #34A853 25%, #34A853 50%, #FBBC05 50%, #FBBC05 75%, #EA4335 75%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.integration-icon.microsoft {
    background: #ffffff;
    border: 1px solid #d1d1d1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.integration-icon.microsoft i {
    color: #F25022; /* solid fallback — see the Google note above */
    font-size: 1.6rem;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .integration-icon.microsoft i {
        background: linear-gradient(135deg, #F25022 25%, #7FBA00 25%, #7FBA00 50%, #00A4EF 50%, #00A4EF 75%, #FFB900 75%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.integration-icon.slack {
    background: #4a154b;
}

.integration-icon.slack i {
    color: #ffffff;
    font-size: 1.6rem;
}

.integration-icon.teams {
    background: #6264a7;
}

.integration-icon.teams i {
    color: #ffffff;
    font-size: 1.6rem;
}

.integration-icon.discord {
    background: #5865f2;
}

.integration-icon.discord i {
    color: #ffffff;
    font-size: 1.6rem;
}

/* Webhook form styles */
.integration-webhook-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--slate-200);
}

.webhook-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--slate-300);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: monospace;
    background: var(--slate-50);
}

.webhook-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.webhook-hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--slate-500);
}

/* P1-12: "Synced X ago" suffix on a connected integration's status line. */
.int-last-synced {
    opacity: 0.75;
}

/* P2-19: expandable per-event ICS import warnings. */
.ics-warnings {
    margin: 10px 16px 0;
    font-size: 0.8125rem;
}
.ics-warnings-summary {
    cursor: pointer;
    color: var(--slate-400, #94a3b8);
}
.ics-warnings-list {
    margin: 6px 0 0;
    padding-left: 18px;
    color: var(--slate-400, #94a3b8);
    max-height: 160px;
    overflow-y: auto;
}
.ics-warnings-list li {
    margin: 2px 0;
    line-height: 1.4;
}

.integration-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.integration-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #1e293b);
}

.integration-status {
    font-size: 0.8rem;
    color: var(--text-tertiary, #94a3b8);
    display: flex;
    align-items: center;
    gap: 6px;
}

.integration-status i {
    font-size: 0.5rem;
}

.integration-status.connected {
    color: #16a34a;
}

.integration-status.connected i {
    color: #16a34a;
}

.integration-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.integration-actions .btn-sm {
    padding: 10px 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* (Removed) The old `.integration-actions .btn-primary` shimmer gradient was
   dead code: the calendar Connect buttons use class `sync-action`
   (sync-action--provider-google/microsoft), never `btn-primary`, so this rule
   never applied. The Connect CTA styling now lives on the provider modifiers in
   css/calendar-views.css. The local `@keyframes shimmer` went with it (its only
   user was this dead ::before; onboarding.css keeps its own copy). */

.integration-disclosure {
    margin: 0;
    padding: 12px 14px;
    background: var(--surface-muted, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-secondary, #475569);
}

.integration-disclosure p {
    margin: 0 0 8px 0;
}

.integration-disclosure p:last-child {
    margin-bottom: 0;
}

.integration-disclosure ul {
    margin: 4px 0 8px 0;
    padding-left: 20px;
}

.integration-disclosure li {
    margin-bottom: 4px;
}

.integration-disclosure strong {
    color: var(--text-primary, #0f172a);
}

/* Collapsible variant — used for OAuth providers (Google) where the
   user's actual gate is the upstream consent screen. The in-app
   disclosure is a trust signal, not a legal prerequisite, so it can
   sit collapsed and stay out of the way of the Connect button.
   <details> + <summary> handles the toggle natively (no JS required). */
.integration-disclosure--collapsible {
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.integration-disclosure--collapsible > summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary, #475569);
    user-select: none;
    transition: background-color 150ms ease;
}
.integration-disclosure--collapsible > summary::-webkit-details-marker {
    display: none;
}
.integration-disclosure--collapsible > summary::before {
    content: '▸';
    font-size: 0.7rem;
    color: var(--text-tertiary, #94a3b8);
    transition: transform 200ms ease;
    flex-shrink: 0;
}
.integration-disclosure--collapsible[open] > summary::before {
    transform: rotate(90deg);
}
.integration-disclosure--collapsible > summary:hover {
    background-color: color-mix(in srgb, var(--surface-muted, #f8fafc) 100%, transparent);
}
.integration-disclosure--collapsible > summary strong {
    color: var(--text-primary, #0f172a);
    font-weight: 600;
}
.integration-disclosure--collapsible > ul,
.integration-disclosure--collapsible > p {
    padding: 0 14px;
}
.integration-disclosure--collapsible > ul:last-child,
.integration-disclosure--collapsible > p:last-child {
    padding-bottom: 12px;
}
.integration-disclosure--collapsible > ul:first-of-type {
    margin-top: 0;
}
body.dark-mode .integration-disclosure--collapsible {
    border-color: var(--border-default, #334155);
}
body.dark-mode .integration-disclosure--collapsible > summary:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

.integration-disclosure a {
    color: var(--primary-600, #0d9488);
    text-decoration: underline;
}

/* Permission grant list — each scope is colour-coded on a permissive→
   restrictive scale so the "what you're granting" block reads at a glance:
   read = green (most permissive, just looks), create = amber (adds data),
   modify/delete = red (most restrictive — the one that changes existing
   data, so it gets the cautionary hue). Muted tints, not full alarm reds —
   a legible trust signal. Falls back to teal if a grant has no risk class. */
.permission-grants {
    list-style: none;
    margin: 0;
    padding: 0 14px 4px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.permission-grant {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    line-height: 1.4;
    /* Per-grant accent, defaulted to teal; overridden by risk modifiers. */
    --grant-accent: var(--primary-600, #0d9488);
    --grant-wash: color-mix(in srgb, var(--primary-500, #14b8a6) 12%, transparent);
}
.permission-grant--read {
    --grant-accent: #16a34a;
    --grant-wash: color-mix(in srgb, #22c55e 13%, transparent);
}
.permission-grant--create {
    --grant-accent: #d97706;
    --grant-wash: color-mix(in srgb, #f59e0b 15%, transparent);
}
.permission-grant--modify {
    --grant-accent: #dc2626;
    --grant-wash: color-mix(in srgb, #ef4444 13%, transparent);
}
.permission-grant-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.8rem;
    color: var(--grant-accent);
    background: var(--grant-wash);
}
.permission-grant strong {
    color: var(--text-primary, #0f172a);
    font-weight: 600;
}
body.dark-mode .permission-grant--read {
    --grant-accent: #86efac;
    --grant-wash: color-mix(in srgb, #4ade80 18%, transparent);
}
body.dark-mode .permission-grant--create {
    --grant-accent: #fcd34d;
    --grant-wash: color-mix(in srgb, #fbbf24 20%, transparent);
}
body.dark-mode .permission-grant--modify {
    --grant-accent: #fca5a5;
    --grant-wash: color-mix(in srgb, #f87171 20%, transparent);
}
body.dark-mode .permission-grant {
    --grant-accent: var(--primary-300, #5eead4);
    --grant-wash: color-mix(in srgb, var(--primary-400, #2dd4bf) 16%, transparent);
}

.integration-toggle {
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}

.toggle-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}

/* Two-line label inside the toggle-row: bold title on top, muted hint
   below explaining what the toggle actually does + how it relates to
   per-board sharing. The hint is the load-bearing piece — without it
   users assume auto-sync covers visibility-per-board too. */
.toggle-row-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.toggle-row-title {
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    font-size: 0.9rem;
}
.toggle-row-hint {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary, #64748b);
}
.toggle-row-hint strong {
    color: var(--text-primary, #0f172a);
    font-weight: 600;
}
body.dark-mode .toggle-row-title {
    color: var(--text-primary, #e2e8f0);
}
body.dark-mode .toggle-row-hint strong {
    color: var(--text-primary, #e2e8f0);
}

/* Premium Access Card - Brand Teal Theme */
/* ----- Subscription card (redesigned 2026-06) --------------------------
   A calm account block on the normal card surface — no full teal gradient,
   no shimmer, no animated rainbow bar. The previous treatment out-shouted
   every real setting around it for a card that's mostly "you're on Free".
   A thin left accent rail signals tier without dominating. */
.subscription-card {
    position: relative;
    padding: 0;
    overflow: hidden;
}

/* Left accent rail — neutral on free, branded on paid, amber on grace. */
.subscription-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: var(--slate-300, #cbd5e1);
}

.subscription-card[data-state="paid"]::before,
.subscription-card[data-state="trial"]::before {
    background: linear-gradient(180deg, var(--primary-500, #14b8a6), var(--accent-500, #06b6d4));
}

.subscription-card[data-state="grace"]::before {
    background: var(--amber-500, #f59e0b);
}

.subscription-main {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
}

.subscription-glyph {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.1rem;
    color: var(--slate-500, #64748b);
    background: var(--slate-100, #f1f5f9);
}

.subscription-card[data-state="paid"] .subscription-glyph,
.subscription-card[data-state="trial"] .subscription-glyph {
    color: white;
    background: linear-gradient(135deg, var(--primary-500, #14b8a6), var(--accent-500, #06b6d4));
}

.subscription-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subscription-tier {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--slate-800, #1e293b);
    line-height: 1.1;
}

.subscription-sublabel {
    font-size: 0.8rem;
    color: var(--slate-500, #64748b);
    line-height: 1.3;
}

/* Primary action — Upgrade (sales CTA, branded) or Manage (neutral). */
.subscription-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--radius-md, 8px);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--accent-500, #06b6d4) 100%);
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, filter 0.15s ease;
}

.subscription-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.32);
    filter: brightness(1.03);
}

.subscription-action:active {
    transform: translateY(0);
}

.subscription-action:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring, #2dd4bf);
    outline-offset: var(--focus-ring-offset, 2px);
}

/* Paid users see a neutral "Manage" — not a sales gradient. */
.subscription-card[data-state="paid"] .subscription-action {
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-700, #334155);
    box-shadow: none;
}

.subscription-card[data-state="paid"] .subscription-action:hover {
    background: var(--slate-200, #e2e8f0);
    filter: none;
}

/* Gift redemption — demoted to a quiet secondary row under a divider. */
.subscription-gift {
    padding: 14px 18px;
    border-top: 1px solid var(--slate-100, #f1f5f9);
}

.subscription-gift-label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--slate-500, #64748b);
}

.gift-code-form {
    display: flex;
    gap: 8px;
}

.gift-code-form input {
    flex: 1;
    padding: 9px 14px;
    border: 1px solid var(--slate-200, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
    text-transform: uppercase;
    background: var(--surface-primary, #ffffff);
    color: var(--slate-700, #334155);
    font-weight: 500;
    transition: all 0.2s ease;
}

.gift-code-form input::placeholder {
    text-transform: none;
    color: var(--slate-400, #94a3b8);
}

.gift-code-form input:focus {
    outline: none;
    border-color: var(--primary-400, #2dd4bf);
    background: var(--surface-primary, #ffffff);
    box-shadow: var(--focus-ring-shadow);
}

.gift-code-status {
    margin: 0 18px 14px;
    padding: 9px 14px;
    border-radius: var(--radius-md, 8px);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gift-code-status.success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success-700, #047857);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.gift-code-status.error {
    background: rgba(239, 68, 68, 0.10);
    color: var(--danger-700, #b91c1c);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Data Card */
.data-card {
    padding: 12px;
}

.data-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.data-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 12px;
    background: var(--surface-primary, white);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
}

.data-action-btn i {
    font-size: 1.2rem;
    color: var(--primary-500, #14b8a6);
}

.data-action-btn:hover {
    background: var(--surface-hover, #f1f5f9);
    border-color: var(--primary-300, #5eead4);
    color: var(--text-primary, #1e293b);
}

.data-action-btn.danger {
    color: #dc2626;
}

.data-action-btn.danger i {
    color: #dc2626;
}

.data-action-btn.danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.integrations-modal-footer {
    display: flex;
    justify-content: flex-start;
    padding: 16px 20px;
    border-top: 1px solid var(--border-default, #e2e8f0);
}

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

.fairness-modal-content {
    max-width: 560px;
    width: 95%;
}

.fairness-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Team-balance narrative — grouped chips, not prose. Two rows
   (carrying more / has room), each label + a sorted chip list. Chip
   colour rides on data-tilt so the magnitude reads at a glance.
   Hidden entirely when the team is solo, when there's no history,
   or when everyone is balanced — silence is the signal. */
.fm-team-balance {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
    background: var(--surface-secondary, #f9fafb);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-primary, #111827);
}

body.dark-mode .fm-team-balance {
    background: var(--surface-secondary-dark, #1f2937);
    border-color: var(--border-dark, #374151);
    color: var(--text-primary-dark, #f3f4f6);
}

.fm-team-balance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.fm-team-balance-period {
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}

.fm-team-balance-rest {
    font-size: 11px;
    color: var(--text-secondary, #6b7280);
}

.fm-team-balance-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.fm-team-balance-row-label {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-secondary, #6b7280);
    min-width: 110px;
    padding-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fm-team-balance-row[data-direction="over"]  .fm-team-balance-row-label { color: var(--fv-l8, #dc2626); }
.fm-team-balance-row[data-direction="under"] .fm-team-balance-row-label { color: var(--fv-l2, #16a34a); }

.fm-team-balance-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.fm-team-balance-name {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary, #111827);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: filter 120ms ease, transform 120ms ease;
}

/* Tilt → colour. Heavier tilt = stronger fill. Mirrors the canonical
   fairness ramp so the chip in the team-balance card agrees with the
   cell colour shown for the same member elsewhere. */
.fm-team-balance-name[data-tilt="much-over"] {
    background: color-mix(in srgb, var(--fv-l8, #dc2626) 22%, transparent);
    border-color: color-mix(in srgb, var(--fv-l8, #dc2626) 45%, transparent);
    color: var(--fv-l8, #b91c1c);
}
.fm-team-balance-name[data-tilt="over"] {
    background: color-mix(in srgb, var(--fv-l7, #ef4444) 14%, transparent);
    border-color: color-mix(in srgb, var(--fv-l7, #ef4444) 30%, transparent);
    color: color-mix(in srgb, var(--fv-l8, #b91c1c) 90%, var(--text-primary, #111827));
}
.fm-team-balance-name[data-tilt="under"] {
    background: color-mix(in srgb, var(--fv-l3, #4ade80) 14%, transparent);
    border-color: color-mix(in srgb, var(--fv-l3, #4ade80) 30%, transparent);
    color: color-mix(in srgb, var(--fv-l2, #16a34a) 90%, var(--text-primary, #111827));
}
.fm-team-balance-name[data-tilt="much-under"] {
    background: color-mix(in srgb, var(--fv-l2, #16a34a) 22%, transparent);
    border-color: color-mix(in srgb, var(--fv-l2, #16a34a) 45%, transparent);
    color: var(--fv-l2, #15803d);
}

.fm-team-balance-name:hover,
.fm-team-balance-name:focus-visible {
    filter: brightness(0.96) saturate(1.15);
    transform: translateY(-1px);
    outline: none;
}

body.dark-mode .fm-team-balance-name { color: var(--text-primary-dark, #f3f4f6); }
body.dark-mode .fm-team-balance-name[data-tilt="much-over"]  { color: #fca5a5; }
body.dark-mode .fm-team-balance-name[data-tilt="over"]       { color: #fecaca; }
body.dark-mode .fm-team-balance-name[data-tilt="under"]      { color: #bbf7d0; }
body.dark-mode .fm-team-balance-name[data-tilt="much-under"] { color: #86efac; }

@media (max-width: 540px) {
    .fm-team-balance-row { flex-direction: column; gap: 4px; }
    .fm-team-balance-row-label { min-width: 0; padding-top: 0; }
}

/* Hero Section */
.fm-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary-50, #f0fdfa) 0%, var(--primary-100, #ccfbf1) 100%);
    border-radius: var(--radius-xl, 16px);
    border: 1px solid var(--primary-200, #99f6e4);
    transition: background 0.4s ease, border-color 0.4s ease;
}

/* Hero band tint — set via [data-band] by updateHeroStatus(). The wash is
   derived from the canonical --fv-* ramp (single source of truth, see
   memory/traffic_light_palette.md) at low alpha so the dark hero text stays
   legible. Without this the hero was a fixed mint-green for EVERY score, so a
   low score showed a calming-green card around a red ring + green "Overloaded"
   text — three conflicting signals. Now the whole card reads the band.
   --fm-band-hue is the per-band anchor colour the children reference. */
.fm-hero[data-band="excellent"]  { --fm-band-hue: var(--fv-l2, #15803d); }
.fm-hero[data-band="balanced"]   { --fm-band-hue: var(--fv-l3, #16a34a); }
.fm-hero[data-band="mixed"]      { --fm-band-hue: var(--fv-l5, #d97706); }
.fm-hero[data-band="stretched"]  { --fm-band-hue: var(--fv-l7, #ea580c); }
.fm-hero[data-band="overloaded"] { --fm-band-hue: var(--fv-l8, #dc2626); }

.fm-hero[data-band] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--fm-band-hue) 8%, #fff) 0%,
        color-mix(in srgb, var(--fm-band-hue) 16%, #fff) 100%);
    border-color: color-mix(in srgb, var(--fm-band-hue) 30%, transparent);
}
.fm-hero[data-band] .fm-hero-title { color: color-mix(in srgb, var(--fm-band-hue) 75%, #0f172a); }
.fm-hero[data-band] .fm-hero-subtitle { color: color-mix(in srgb, var(--fm-band-hue) 60%, #334155); }
.fm-hero[data-band] .fm-score-number { color: var(--fm-band-hue); }
.fm-hero[data-band] .fm-score-label { color: color-mix(in srgb, var(--fm-band-hue) 70%, #475569); }
.fm-hero[data-band] .fm-hero-status { color: var(--fm-band-hue); }

/* Dark mode: lift the band hue for legibility and deepen the wash. */
body.dark-mode .fm-hero[data-band] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--fm-band-hue) 16%, #0f172a) 0%,
        color-mix(in srgb, var(--fm-band-hue) 26%, #0f172a) 100%);
    border-color: color-mix(in srgb, var(--fm-band-hue) 40%, transparent);
}
body.dark-mode .fm-hero[data-band] .fm-hero-title { color: color-mix(in srgb, var(--fm-band-hue) 50%, #f1f5f9); }
body.dark-mode .fm-hero[data-band] .fm-hero-subtitle { color: color-mix(in srgb, var(--fm-band-hue) 35%, #cbd5e1); }
body.dark-mode .fm-hero[data-band] .fm-score-number,
body.dark-mode .fm-hero[data-band] .fm-hero-status { color: color-mix(in srgb, var(--fm-band-hue) 55%, #f1f5f9); }

.fm-score-ring {
    position: relative;
    width: 88px;
    height: 88px;
    flex-shrink: 0;
}

.fm-score-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fm-score-ring .score-ring-bg {
    fill: none;
    stroke: var(--primary-100, #ccfbf1);
    stroke-width: 8;
}

.fm-score-ring .score-ring-progress {
    fill: none;
    stroke: var(--primary-500, #14b8a6);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease;
}

.fm-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.fm-score-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-600, #0d9488);
    line-height: 1;
}

.fm-score-label {
    font-size: 0.7rem;
    color: var(--primary-500, #14b8a6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fm-hero-content {
    flex: 1;
}

.fm-hero-title {
    margin: 0 0 4px 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-700, #0f766e);
}

.fm-hero-subtitle {
    margin: 0 0 10px 0;
    font-size: 0.85rem;
    color: var(--primary-600, #0d9488);
}

.fm-hero-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #16a34a;
}

.fm-hero-status i {
    font-size: 0.9rem;
}

/* Dimensions Grid */
.fm-dimensions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.fm-dimension-card {
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: 12px;
}

.fm-dim-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fm-dim-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.85rem;
    color: white;
}

.fm-dim-icon.accommodation { background: #8b5cf6; }
.fm-dim-icon.flexibility { background: #3b82f6; }
.fm-dim-icon.social { background: #ec4899; }
.fm-dim-icon.rest { background: #6366f1; }

.fm-dim-name {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.fm-dim-score {
    font-size: 0.9rem;
    font-weight: 700;
}

.fm-dim-score.good { color: #16a34a; }
.fm-dim-score.warning { color: #ca8a04; }
.fm-dim-score.danger { color: #dc2626; }

.fm-dim-gauge {
    height: 6px;
    background: var(--slate-200, #e2e8f0);
    border-radius: 3px;
    margin-bottom: 8px;
    overflow: hidden;
}

.fm-dim-gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-400, #2dd4bf) 0%, var(--primary-500, #14b8a6) 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.fm-dim-desc {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-tertiary, #94a3b8);
    line-height: 1.4;
}

/* Insight Card */
.fm-insight-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border-radius: var(--radius-lg, 12px);
}

.fm-insight-card.success {
    background: #dcfce7;
    border: 1px solid #86efac;
}

.fm-insight-card.warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.fm-insight-card.danger {
    background: #fee2e2;
    border: 1px solid #fca5a5;
}

/* `info` is the most common insight type generated (mid-band overall +
   every dimension insight). It had no colour rule, so info cards rendered
   with the base card but no accent — a neutral slate-blue keeps them
   distinct from the success/warning/danger states without alarming. */
.fm-insight-card.info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.fm-insight-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    font-size: 1rem;
}

.fm-insight-card.success .fm-insight-icon { color: #16a34a; }
.fm-insight-card.warning .fm-insight-icon { color: #ca8a04; }
.fm-insight-card.danger .fm-insight-icon { color: #dc2626; }
.fm-insight-card.info .fm-insight-icon { color: #2563eb; }

.fm-insight-content {
    flex: 1;
}

.fm-insight-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2px;
}

.fm-insight-card.success .fm-insight-title { color: #166534; }
.fm-insight-card.warning .fm-insight-title { color: #854d0e; }
.fm-insight-card.danger .fm-insight-title { color: #991b1b; }
.fm-insight-card.info .fm-insight-title { color: #1e40af; }

.fm-insight-message {
    font-size: 0.8rem;
}

.fm-insight-card.success .fm-insight-message { color: #15803d; }
.fm-insight-card.warning .fm-insight-message { color: #a16207; }
.fm-insight-card.danger .fm-insight-message { color: #b91c1c; }
.fm-insight-card.info .fm-insight-message { color: #1d4ed8; }

/* Settings */
.fm-settings-details {
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

.fm-settings-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: var(--surface-secondary, #f8fafc);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    list-style: none;
}

.fm-settings-toggle::-webkit-details-marker {
    display: none;
}

.fm-settings-toggle i:first-child {
    color: var(--primary-500, #14b8a6);
}

.fm-settings-toggle span {
    flex: 1;
}

.fm-chevron {
    transition: transform 0.2s ease;
    color: var(--text-tertiary, #94a3b8);
}

.fm-settings-details[open] .fm-chevron {
    transform: rotate(180deg);
}

.fm-settings-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--border-default, #e2e8f0);
}

.fm-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fm-settings-label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.fm-settings-label > i {
    color: var(--text-tertiary, #94a3b8);
    width: 20px;
    text-align: center;
}

.fm-label-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.fm-label-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary, #94a3b8);
}

.fm-number-input {
    width: 70px;
    padding: 8px 12px;
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Tier Pill */
.fm-tier-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--slate-100, #f1f5f9);
    border-radius: var(--radius-lg, 12px);
    font-size: 0.78rem;
    color: var(--text-secondary, #64748b);
}

.fm-tier-pill i {
    color: var(--primary-500, #14b8a6);
}

.fm-tier-pill a {
    color: var(--primary-600, #0d9488);
    font-weight: 600;
    text-decoration: none;
}

.fm-tier-pill a:hover {
    text-decoration: underline;
}

/* Dashboard Action Button */
.fm-dashboard-action {
    display: flex;
    justify-content: center;
    padding-top: 14px;
    border-top: 1px solid var(--border-default, #e2e8f0);
}

.fm-dashboard-action .btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-weight: 600;
}

/* View tabs (Current / History) */
.fm-view-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 8px 0 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-default, #e2e8f0);
}

.fm-view-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.fm-view-tab:hover {
    color: var(--text-primary, #1e293b);
}

.fm-view-tab.active {
    color: var(--primary-600, #4f46e5);
    border-bottom-color: var(--primary-600, #4f46e5);
    font-weight: 600;
}

body.dark-mode .fm-view-tabs {
    border-bottom-color: var(--border-default, #334155);
}

body.dark-mode .fm-view-tab {
    color: var(--text-secondary, #94a3b8);
}

body.dark-mode .fm-view-tab:hover {
    color: var(--text-primary, #f1f5f9);
}

body.dark-mode .fm-view-tab.active {
    color: var(--primary-400, #a5b4fc);
    border-bottom-color: var(--primary-400, #a5b4fc);
}

/* History pane — shown when "History" tab is active. Hides every other
   modal-body child via the .fm-view-history class on .fairness-modal-body. */
.fm-history-pane {
    padding: 16px 0;
}

.fairness-modal-body.fm-view-history > .fm-period-selector-bar,
.fairness-modal-body.fm-view-history > .fm-hero,
.fairness-modal-body.fm-view-history > .fm-dimensions,
.fairness-modal-body.fm-view-history > .fm-insight-card,
.fairness-modal-body.fm-view-history > .fm-section-break,
.fairness-modal-body.fm-view-history > .fm-tier-pill,
.fairness-modal-body.fm-view-history > [id^="fm-sparkline"],
.fairness-modal-body.fm-view-history > .fm-dashboard-action {
    display: none !important;
}

.fairness-modal-body:not(.fm-view-history) > .fm-history-pane {
    display: none;
}

.fm-history-quarter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fm-history-card {
    padding: 14px;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 10px;
}

.fm-history-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fm-history-card-score {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin-top: 4px;
}

.fm-history-card-trend {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
}

.fm-history-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
}

body.dark-mode .fm-history-card {
    background: var(--surface-secondary, #1e293b);
    border-color: var(--border-default, #334155);
}

body.dark-mode .fm-history-card-score {
    color: var(--text-primary, #f1f5f9);
}

/* Historic quarter card — quarter ended before today. Same shape and
   colour as a regular card; the slate "Historic" tag in the title says
   the record is closed. See past_day_mode_canonical memory for the rule:
   past-period fairness corrections go on the CURRENT period, never on
   the closed one. */
.fm-history-card--historic {
    background: var(--surface-tertiary, #f8fafc);
}
.fm-history-card-historic-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-600, #475569);
    background: var(--slate-100, #f1f5f9);
    border: 1px solid var(--slate-300, #cbd5e1);
    border-radius: 4px;
    vertical-align: middle;
}
body.dark-mode .fm-history-card--historic {
    background: var(--surface-tertiary, #0f172a);
}
body.dark-mode .fm-history-card-historic-tag {
    color: var(--slate-300, #cbd5e1);
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-600, #475569);
}

/* ── Phase 4: Team equity card ──────────────────────────────────────────
   Top-of-history card showing Gini + max-share + per-member voluntary/
   structural bars. Renders only when ledger data exists; sits above the
   quarter cards. */
.fm-equity-card {
    margin-bottom: 16px;
    padding: 16px 18px;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fm-equity-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.fm-equity-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.fm-equity-subtitle {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}

/* Plain-language concentration headline (redesign Phase 2). Coloured inline
   by the canonical band via a style="color:var(--fv-l*)" attribute so the
   sentence reads its own severity at a glance. */
.fm-equity-concentration {
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}
.fm-equity-concentration:empty {
    display: none;
}

.fm-equity-badge {
    padding: 4px 10px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.fm-equity-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.fm-equity-stat {
    padding: 10px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 8px;
    text-align: center;
}

.fm-equity-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-variant-numeric: tabular-nums;
}

.fm-equity-stat-suffix {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    margin-left: 2px;
}

.fm-equity-stat-label {
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-secondary, #64748b);
}

.fm-equity-members {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
}

.fm-equity-member-row {
    display: grid;
    grid-template-columns: minmax(0, 120px) 1fr auto;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    border-radius: 4px;
    transition: background-color 400ms ease-out, box-shadow 400ms ease-out;
}

/* Deep-link target — applied for ~2.5s after FairnessLinks.openDashboard
   navigates the user to a specific member's row, so the eye lands on
   the right place after the smooth-scroll. Uses the canonical fairness
   green so the highlight reads as "found it" rather than as a warning. */
.fm-equity-member-row.is-deeplink-target {
    background-color: var(--fv-l2, rgba(34, 197, 94, 0.18));
    box-shadow: 0 0 0 2px var(--fv-l3, rgba(34, 197, 94, 0.32));
}

.fm-equity-member-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1e293b);
}

.fm-equity-member-bar {
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-default, #e2e8f0);
}

.fm-equity-member-bar-voluntary {
    height: 100%;
    background: var(--fv-l5, #f59e0b);
}

.fm-equity-member-bar-structural {
    height: 100%;
    background: var(--fv-l3, #84cc16);
    opacity: 0.55;
}

.fm-equity-member-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
}

.fm-equity-member-chip.is-over {
    color: var(--fv-l8, #dc2626);
}

.fm-equity-actions {
    display: flex;
    justify-content: flex-end;
}

.fm-equity-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    cursor: pointer;
    transition: background 0.15s ease;
}
.fm-equity-export-btn:hover { background: var(--surface-secondary, #f1f5f9); }
.fm-equity-export-btn:focus-visible { outline: none; box-shadow: var(--focus-ring-shadow); }
.fm-equity-export-btn:disabled { opacity: 0.6; cursor: default; }

/* Small "Business" tier marker on gated export actions. */
.fm-equity-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--primary-100, #ccfbf1);
    color: var(--primary-700, #0f766e);
}
body.dark-mode .fm-equity-tier-badge {
    background: rgba(20, 184, 166, 0.18);
    color: var(--primary-300, #5eead4);
}

.fm-equity-legend {
    margin: 0;
    font-size: 10px;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.fm-equity-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 8px;
    border-radius: 2px;
    margin: 0 4px 0 8px;
}

.fm-equity-legend-swatch:first-child { margin-left: 0; }

.fm-equity-legend-voluntary  { background: var(--fv-l5, #f59e0b); }
.fm-equity-legend-structural { background: var(--fv-l3, #84cc16); opacity: 0.55; }

body.dark-mode .fm-equity-card {
    background: var(--surface-secondary, #1e293b);
    border-color: var(--border-default, #334155);
}

body.dark-mode .fm-equity-stat,
body.dark-mode .fm-equity-member-bar,
body.dark-mode .fm-equity-export-btn {
    background: var(--surface, #0f172a);
    border-color: var(--border-default, #334155);
}

body.dark-mode .fm-equity-stat-value,
body.dark-mode .fm-equity-member-name,
body.dark-mode .fm-equity-export-btn {
    color: var(--text-primary, #f1f5f9);
}

/* ── Bucket B.2: per-member voluntary trend (small multiples) ──────────
   Stacked mini-sparklines, one per member. Renders below the equity card
   and above the quarter cards. Scales to ~12 members visible; beyond that
   the rows scroll. */
.fm-trend-card {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--surface-secondary, #f8fafc);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 12px;
}

.fm-trend-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.fm-trend-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.fm-trend-range {
    font-size: 11px;
    color: var(--text-secondary, #64748b);
    font-variant-numeric: tabular-nums;
}

.fm-trend-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
}

.fm-trend-row {
    display: grid;
    grid-template-columns: minmax(0, 120px) 1fr auto auto;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    padding: 4px 0;
}

.fm-trend-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #1e293b);
}

.fm-trend-spark {
    width: 100%;
    height: 24px;
}

.fm-trend-spark-svg {
    width: 100%;
    height: 100%;
}

.fm-trend-spark-line {
    stroke: var(--fv-l5, #f59e0b);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fm-trend-spark-dot {
    fill: var(--fv-l5, #f59e0b);
}

.fm-trend-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    min-width: 50px;
    text-align: right;
}

.fm-trend-value-suffix {
    font-size: 10px;
    color: var(--text-secondary, #64748b);
    margin-left: 2px;
    font-weight: 500;
}

.fm-trend-delta {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
}

.fm-trend-delta-up   { color: var(--fv-l8, #dc2626); }  /* delta up = MORE voluntary = bad */
.fm-trend-delta-down { color: var(--fv-l3, #84cc16); }  /* delta down = LESS voluntary = good */
.fm-trend-delta-flat { color: var(--text-secondary, #64748b); }

.fm-trend-legend {
    margin: 8px 0 0;
    font-size: 10px;
    color: var(--text-secondary, #64748b);
}

body.dark-mode .fm-trend-card {
    background: var(--surface-secondary, #1e293b);
    border-color: var(--border-default, #334155);
}

body.dark-mode .fm-trend-title,
body.dark-mode .fm-trend-name,
body.dark-mode .fm-trend-value {
    color: var(--text-primary, #f1f5f9);
}

/* Footer */
.fairness-modal-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-default, #e2e8f0);
}

/* Advisory note — heuristic frame per docs/legal/POSTURE.md.
   Renders above action buttons so users see the frame before clicking. */
.fairness-modal-footer .fm-advisory-note {
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary, #64748b);
}

.fairness-modal-footer .fm-advisory-note i {
    margin-top: 2px;
    flex-shrink: 0;
    opacity: 0.7;
}

.fairness-modal-footer .fm-footer-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

body.dark-mode .fairness-modal-footer .fm-advisory-note {
    color: var(--text-secondary, #94a3b8);
}

/* ============================================
   DARK MODE
   ============================================ */

body.dark-mode .settings-launcher-btn {
    background: var(--surface-secondary);
    border-color: var(--border-default);
}

body.dark-mode .launcher-title {
    color: var(--text-primary);
}

body.dark-mode .integration-card {
    background: var(--surface-secondary);
    border-color: var(--border-default);
}

body.dark-mode .integration-name {
    color: var(--text-primary);
}

body.dark-mode .subscription-card::before {
    background: var(--slate-600, #475569);
}

body.dark-mode .subscription-card[data-state="paid"]::before,
body.dark-mode .subscription-card[data-state="trial"]::before {
    background: linear-gradient(180deg, var(--primary-400, #2dd4bf), var(--accent-400, #22d3ee));
}

body.dark-mode .subscription-glyph {
    background: rgba(255, 255, 255, 0.06);
    color: var(--slate-300, #cbd5e1);
}

body.dark-mode .subscription-tier {
    color: var(--slate-100, #f1f5f9);
}

body.dark-mode .subscription-sublabel {
    color: var(--slate-400, #94a3b8);
}

body.dark-mode .subscription-gift {
    border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .subscription-gift-label {
    color: var(--slate-400, #94a3b8);
}

body.dark-mode .subscription-card[data-state="paid"] .subscription-action {
    background: var(--slate-700, #334155);
    color: var(--slate-100, #f1f5f9);
}

body.dark-mode .subscription-card[data-state="paid"] .subscription-action:hover {
    background: var(--slate-600, #475569);
}

body.dark-mode .gift-code-form input {
    background: rgba(255,255,255,0.06);
    border-color: var(--slate-600, rgba(71, 85, 105, 0.6));
    color: var(--text-primary);
}

body.dark-mode .gift-code-form input::placeholder {
    color: var(--slate-500, #64748b);
}

body.dark-mode .gift-code-form input:focus {
    border-color: var(--primary-400, #2dd4bf);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

body.dark-mode .gift-code-status.success {
    color: #6ee7b7;
}

body.dark-mode .gift-code-status.error {
    color: #fca5a5;
}

body.dark-mode .data-action-btn {
    background: var(--surface-primary);
    border-color: var(--border-default);
    color: var(--text-secondary);
}

body.dark-mode .fm-hero {
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
    border-color: var(--primary-700);
}

body.dark-mode .fm-hero-title {
    color: var(--primary-200);
}

body.dark-mode .fm-hero-subtitle {
    color: var(--primary-300);
}

body.dark-mode .fm-hero-status {
    background: var(--surface-secondary);
}

body.dark-mode .fm-dimension-card {
    background: var(--surface-secondary);
    border-color: var(--border-default);
}

body.dark-mode .fm-dim-name {
    color: var(--text-primary);
}

body.dark-mode .fm-settings-toggle {
    background: var(--surface-secondary);
    color: var(--text-primary);
}

body.dark-mode .fm-settings-details {
    border-color: var(--border-default);
}

body.dark-mode .fm-settings-content {
    border-top-color: var(--border-default);
}

body.dark-mode .fm-label-text {
    color: var(--text-primary);
}

body.dark-mode .fm-number-input {
    background: var(--surface-primary);
    border-color: var(--border-default);
    color: var(--text-primary);
}

body.dark-mode .fm-tier-pill {
    background: var(--surface-secondary);
}

body.dark-mode .fm-dashboard-action {
    border-top-color: var(--border-default);
}

/* Insight card — dark mode. The four states shipped with only their light
   pastel backgrounds, so on a dark modal a success/warning/etc. card read as
   a bright slab with dark text. Use low-alpha tints over the dark surface +
   lightened text/icon so the accent still reads without the harsh contrast. */
body.dark-mode .fm-insight-card.success {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
}
body.dark-mode .fm-insight-card.warning {
    background: rgba(234, 179, 8, 0.12);
    border-color: rgba(234, 179, 8, 0.35);
}
body.dark-mode .fm-insight-card.danger {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}
body.dark-mode .fm-insight-card.info {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
}
body.dark-mode .fm-insight-card.success .fm-insight-title { color: #86efac; }
body.dark-mode .fm-insight-card.warning .fm-insight-title { color: #fde047; }
body.dark-mode .fm-insight-card.danger  .fm-insight-title { color: #fca5a5; }
body.dark-mode .fm-insight-card.info    .fm-insight-title { color: #93c5fd; }
body.dark-mode .fm-insight-card.success .fm-insight-message { color: #bbf7d0; }
body.dark-mode .fm-insight-card.warning .fm-insight-message { color: #fef08a; }
body.dark-mode .fm-insight-card.danger  .fm-insight-message { color: #fecaca; }
body.dark-mode .fm-insight-card.info    .fm-insight-message { color: #bfdbfe; }
body.dark-mode .fm-insight-card.success .fm-insight-icon { color: #4ade80; }
body.dark-mode .fm-insight-card.warning .fm-insight-icon { color: #facc15; }
body.dark-mode .fm-insight-card.danger  .fm-insight-icon { color: #f87171; }
body.dark-mode .fm-insight-card.info    .fm-insight-icon { color: #60a5fa; }
/* The icon sits on a white chip by default; in dark mode give it a dark chip
   so the lightened glyph stays legible. */
body.dark-mode .fm-insight-icon {
    background: var(--surface-primary, #0f172a);
}

/* Dimension description — pulled into dark-mode-aware muted text (it used the
   light --text-tertiary fallback only, washing out on the dark card). */
body.dark-mode .fm-dim-desc {
    color: var(--text-tertiary, #94a3b8);
}

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

@media (max-width: 600px) {
    .settings-launchers {
        flex-direction: column;
    }

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

    .fm-hero {
        flex-direction: column;
        text-align: center;
    }

    .fm-dimensions {
        grid-template-columns: 1fr;
    }

    .data-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   SETTINGS BUTTON GROUP (Timeline Display)
   ============================================ */

.settings-button-group {
    display: flex;
    gap: 4px;
    background: var(--slate-100, #f1f5f9);
    border-radius: var(--radius-md, 8px);
    padding: 3px;
}

.settings-option-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base, 0.15s ease);
    min-width: 40px;
}

.settings-option-btn:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary, #1e293b);
}

.settings-option-btn.active {
    background: #fff;
    color: var(--primary-600, #0d9488);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-option-btn i {
    font-size: 0.9rem;
}

/* Dark mode */
body.dark-mode .settings-button-group {
    background: var(--slate-800, #1e293b);
}

body.dark-mode .settings-option-btn {
    color: var(--text-secondary, #94a3b8);
}

body.dark-mode .settings-option-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #f1f5f9);
}

body.dark-mode .settings-option-btn.active {
    background: var(--slate-700, #334155);
    color: var(--primary-400, #2dd4bf);
}

/* ============================================
   SETTINGS MODAL REDESIGN - ACCORDION LAYOUT
   ============================================ */

/* Modal Container */
.settings-modal-redesign {
    max-width: 680px;
    width: 95%;
}

.settings-accordion-body {
    max-height: 75vh;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Accordion Section Base */
.settings-accordion-section {
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
    border-radius: var(--radius-lg, 16px);
    overflow: visible;
    background: var(--surface-primary, #fff);
}

.settings-accordion-section[open] {
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.06));
}

/* Accordion Header — summary element */
#settings-modal .settings-accordion-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 14px 16px;
    min-height: 64px;
    height: auto;
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: var(--bg-primary, #ffffff);
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
    overflow: visible;
}

#settings-modal .settings-accordion-header:hover {
    background: var(--slate-50, #f8fafc);
}

#settings-modal .settings-accordion-section[open] > .settings-accordion-header {
    border-bottom-color: var(--border-color, rgba(148, 163, 184, 0.2));
}

/* Hide default browser marker */
.settings-accordion-header::-webkit-details-marker,
.settings-accordion-header::marker {
    display: none !important;
}

/* Accordion Icon — teal circle with icon */
#settings-modal .accordion-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0fdfa;
    color: #0d9488;
    border-radius: 12px;
    font-size: 1rem;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}

#settings-modal .accordion-icon i {
    display: inline-block;
    color: #0d9488;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Accordion Title — text label */
#settings-modal .accordion-title {
    flex: 1 1 auto;
    min-width: 100px;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1e1b4b;
    line-height: 1.4;
}

/* Accordion Chevron — expand/collapse indicator */
#settings-modal .accordion-chevron {
    color: #64748b;
    transition: transform 0.2s ease;
    font-size: 0.75rem;
    flex-shrink: 0;
}

#settings-modal .settings-accordion-section[open] .accordion-chevron {
    transform: rotate(180deg);
}

/* Accordion Content */
.settings-accordion-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--surface-primary, #fff);
}

/* ============================================
   ACCOUNT SECTION
   ============================================ */

.account-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--slate-50, #f8fafc);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

/* "Export everything" row in the Account section. Mirrors the
   profile-card shape but tighter — it's an action, not a hero. */
.account-export-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-top: 12px;
    background: var(--slate-50, #f8fafc);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.account-export-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.account-export-info > i {
    color: var(--primary-600, #0d9488);
    font-size: 1.05rem;
    flex-shrink: 0;
}

.account-export-info > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.account-export-title {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-size: 0.875rem;
}

.account-export-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.profile-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-100, #ccfbf1);
    color: var(--primary-600, #0d9488);
    border-radius: 50%;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.profile-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.profile-name {
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-size: 0.875rem;
}

.profile-email {
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-tier {
    flex-shrink: 0;
}

.tier-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-600, #475569);
    border-radius: var(--radius-full, 9999px);
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tier-badge.tier-pro {
    background: var(--primary-100, #ccfbf1);
    color: var(--primary-700, #0f766e);
}

.tier-badge.tier-team {
    background: var(--amber-100, #fef3c7);
    color: var(--amber-700, #b45309);
}

.tier-badge.tier-enterprise {
    background: var(--purple-100, #f3e8ff);
    color: var(--purple-700, #7e22ce);
}

/* ============================================
   ENHANCED PLAN CARD
   ============================================ */

.plan-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f0fdfa 100%);
    border: 1px solid var(--primary-200, #99f6e4);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
    position: relative;
}

/* Tier-based color-coded backgrounds */
.plan-card[data-tier="free"] {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-color: #cbd5e1;
}
.plan-card[data-tier="free"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #94a3b8, #64748b);
}

.plan-card[data-tier="pro"] {
    background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
    border-color: #5eead4;
}
.plan-card[data-tier="pro"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #14b8a6, #0d9488);
}

.plan-card[data-tier="team"] {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
}
.plan-card[data-tier="team"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
}

.plan-card[data-tier="enterprise"] {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-color: #d8b4fe;
}
.plan-card[data-tier="enterprise"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #a855f7, #7c3aed);
}

.plan-card-header {
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--primary-100, #ccfbf1);
}

.plan-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.plan-name {
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-weight: 600;
    font-size: var(--font-size-base, 0.9375rem);
    color: var(--text-primary, #1e293b);
}

.plan-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    background: var(--green-100, #dcfce7);
    color: var(--green-700, #15803d);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 500;
    border-radius: var(--radius-full, 9999px);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Billing-state variants. The pill is green by default, which is right for an
   active subscription but actively misleading during the post-cancellation
   grace window - the user reads a healthy green "Active" while their plan is
   in fact ending. Amber for grace, neutral for trial/free. The `data-state`
   attribute is set by updatePlanCard() from LicenseService.getEffectiveState().
   The [data-tier] qualifier makes these outrank the per-tier .plan-status
   overrides further down the file, which have equal specificity and would
   otherwise win on source order. (2026-08-05 Settings audit.) */
.plan-card[data-tier] .plan-status[data-state="grace"] {
    background: var(--amber-100, #fef3c7);
    color: var(--amber-700, #b45309);
}

.plan-card[data-tier] .plan-status[data-state="trial"] {
    background: var(--blue-100, #dbeafe);
    color: var(--blue-700, #1d4ed8);
}

.plan-card[data-tier] .plan-status[data-state="free"] {
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-600, #475569);
}

body.dark-mode .plan-card[data-tier] .plan-status[data-state="grace"] {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

body.dark-mode .plan-card[data-tier] .plan-status[data-state="trial"] {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

body.dark-mode .plan-card[data-tier] .plan-status[data-state="free"] {
    background: var(--slate-700, #334155);
    color: var(--slate-300, #cbd5e1);
}

.plan-description {
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

.plan-card-body {
    padding: 16px;
}

/* Usage Meters */
.plan-usage-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.plan-usage-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.usage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usage-label {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.usage-label i {
    color: var(--primary-500, #14b8a6);
    font-size: 0.7rem;
}

.usage-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary, #1e1b4b);
}

.usage-bar {
    height: 6px;
    background: var(--slate-200, #e2e8f0);
    border-radius: 3px;
    overflow: hidden;
}

.usage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-400, #2dd4bf), var(--primary-500, #14b8a6));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.usage-bar-fill.usage-bar-fixed {
    background: var(--slate-400, #94a3b8);
}

/* Entitlement rows (e.g. "History retention") state a fixed allowance rather
   than consumption. They previously rendered a permanently 100%-full bar,
   which carried no information and read as "you are at your limit". Hide the
   whole track so the figure stands alone; JS adds this class in
   settings-handlers.js. Hiding the TRACK (not just the fill) avoids leaving
   an empty grey groove that still looks like an unfilled meter. */
.plan-usage-item.usage-value-only .usage-bar {
    display: none;
}

.plan-usage-item.usage-value-only .usage-count {
    color: var(--primary-600, #0d9488);
}

body.dark-mode .plan-usage-item.usage-value-only .usage-count {
    color: var(--primary-300, #5eead4);
}

/* Plan Features List */
.plan-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
}

.plan-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-primary, #1e1b4b);
}

.plan-feature.included i {
    color: var(--primary-500, #14b8a6);
    font-size: 0.7rem;
}

.plan-feature.locked {
    color: var(--text-secondary, #94a3b8);
}

.plan-feature.locked i {
    color: var(--slate-400, #94a3b8);
    font-size: 0.65rem;
}

/* Plan Footer */
.plan-card-footer {
    padding: 12px 16px 16px;
    background: var(--slate-50, #f8fafc);
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* Plan-tier card upgrade CTA. Shares the canonical primary-500 → accent-500
   gradient with .subscription-action and .modal-footer .btn-primary
   so the upgrade CTA looks the same everywhere it appears. */
.btn-upgrade {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-500, #14b8a6) 0%, var(--accent-500, #06b6d4) 100%);
    border: none;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3);
}

.btn-upgrade:hover {
    background: linear-gradient(135deg, var(--primary-600, #0d9488) 0%, var(--accent-600, #0891b2) 100%);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.4);
}

.plan-upgrade-hint {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
}

/* ============================================
   TIER ICON IN PLAN CARD HEADER
   ============================================ */
.plan-tier-icon {
    font-size: 1rem;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 8px);
    flex-shrink: 0;
}

/* Free: slate */
.plan-card[data-tier="free"] .plan-tier-icon {
    background: #f1f5f9;
    color: #64748b;
}
.plan-card[data-tier="free"] .plan-status {
    background: var(--slate-100, #f1f5f9);
    color: var(--slate-600, #475569);
}
.plan-card[data-tier="free"] .usage-bar-fill {
    background: linear-gradient(90deg, #94a3b8, #64748b);
}

/* Pro: teal */
.plan-card[data-tier="pro"] .plan-tier-icon {
    background: #ccfbf1;
    color: #0d9488;
}
.plan-card[data-tier="pro"] .plan-status {
    background: #ccfbf1;
    color: #0f766e;
}
.plan-card[data-tier="pro"] .usage-bar-fill {
    background: linear-gradient(90deg, #2dd4bf, #14b8a6);
}
.plan-card[data-tier="pro"] .plan-feature.included i {
    color: #14b8a6;
}

/* Team: blue */
.plan-card[data-tier="team"] .plan-tier-icon {
    background: #dbeafe;
    color: #2563eb;
}
.plan-card[data-tier="team"] .plan-status {
    background: #dbeafe;
    color: #1d4ed8;
}
.plan-card[data-tier="team"] .usage-bar-fill {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}
.plan-card[data-tier="team"] .plan-feature.included i {
    color: #3b82f6;
}
.plan-card[data-tier="team"] .btn-upgrade {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
.plan-card[data-tier="team"] .btn-upgrade:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Enterprise: purple */
.plan-card[data-tier="enterprise"] .plan-tier-icon {
    background: #f3e8ff;
    color: #7c3aed;
}
.plan-card[data-tier="enterprise"] .plan-status {
    background: #f3e8ff;
    color: #6d28d9;
}
.plan-card[data-tier="enterprise"] .usage-bar-fill {
    background: linear-gradient(90deg, #c084fc, #a855f7);
}
.plan-card[data-tier="enterprise"] .plan-feature.included i {
    color: #a855f7;
}

/* Unlimited usage bar shimmer */
.usage-bar-fill.usage-bar-unlimited {
    background-size: 200% 100%;
    animation: usage-shimmer 2.5s ease-in-out infinite;
}
@keyframes usage-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ============================================
   DARK MODE - TIER ICON & STATUS OVERRIDES
   ============================================ */
body.dark-mode .plan-card[data-tier="free"] .plan-tier-icon {
    background: #334155;
    color: #94a3b8;
}
body.dark-mode .plan-card[data-tier="free"] .plan-status {
    background: #334155;
    color: #94a3b8;
}
body.dark-mode .plan-card[data-tier="free"] .usage-bar-fill {
    background: linear-gradient(90deg, #64748b, #475569);
}

body.dark-mode .plan-card[data-tier="pro"] .plan-tier-icon {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}
body.dark-mode .plan-card[data-tier="pro"] .plan-status {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}
body.dark-mode .plan-card[data-tier="pro"] .usage-bar-fill {
    background: linear-gradient(90deg, #2dd4bf, #14b8a6);
}
body.dark-mode .plan-card[data-tier="pro"] .plan-feature.included i {
    color: #2dd4bf;
}

body.dark-mode .plan-card[data-tier="team"] .plan-tier-icon {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
body.dark-mode .plan-card[data-tier="team"] .plan-status {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}
body.dark-mode .plan-card[data-tier="team"] .usage-bar-fill {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}
body.dark-mode .plan-card[data-tier="team"] .plan-feature.included i {
    color: #60a5fa;
}
body.dark-mode .plan-card[data-tier="team"] .btn-upgrade {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
body.dark-mode .plan-card[data-tier="team"] .btn-upgrade:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

body.dark-mode .plan-card[data-tier="enterprise"] .plan-tier-icon {
    background: rgba(192, 132, 252, 0.15);
    color: #c084fc;
}
body.dark-mode .plan-card[data-tier="enterprise"] .plan-status {
    background: rgba(192, 132, 252, 0.15);
    color: #c084fc;
}
body.dark-mode .plan-card[data-tier="enterprise"] .usage-bar-fill {
    background: linear-gradient(90deg, #c084fc, #a855f7);
}
body.dark-mode .plan-card[data-tier="enterprise"] .plan-feature.included i {
    color: #c084fc;
}

/* ============================================
   GIFT CODE - EXPANDABLE PANEL
   ============================================ */

.gift-code-details {
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
    border-radius: var(--radius-lg, 16px);
    background: var(--slate-50, #f8fafc);
    overflow: hidden;
}

.gift-code-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    transition: background 0.15s ease;
}

.gift-code-trigger::-webkit-details-marker {
    display: none;
}

.gift-code-trigger:hover {
    background: var(--slate-100, #f1f5f9);
}

.gift-code-trigger-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1e1b4b);
}

.gift-code-trigger-content i {
    color: var(--pink-500, #ec4899);
    font-size: 1rem;
}

.gift-chevron {
    color: var(--text-secondary, #64748b);
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.gift-code-details[open] .gift-chevron {
    transform: rotate(180deg);
}

.gift-code-panel {
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
    background: var(--bg-primary, #fff);
}

.gift-code-description {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.5;
    margin: 14px 0 0 0;
}

/* Segmented Input */
.gift-code-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gift-code-segments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.gift-segment {
    width: 72px;
    padding: 12px 8px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 2px solid var(--border-color, rgba(148, 163, 184, 0.3));
    border-radius: var(--radius-md, 12px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary, #1e1b4b);
    transition: all 0.15s ease;
}

.gift-segment::placeholder {
    color: var(--slate-300, #cbd5e1);
    font-weight: 500;
}

.gift-segment:focus {
    outline: none;
    border-color: var(--primary-500, #14b8a6);
    box-shadow: var(--focus-ring-shadow);
}

.gift-segment.filled {
    border-color: var(--primary-400, #2dd4bf);
    background: var(--primary-50, #f0fdfa);
}

.gift-segment.error {
    border-color: var(--red-400, #f87171);
    background: var(--red-50, #fef2f2);
}

.gift-separator {
    color: var(--slate-400, #94a3b8);
    font-weight: 600;
    font-size: 1.1rem;
}

/* Redeem Button */
.gift-redeem-btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--pink-500, #ec4899), var(--pink-600, #db2777));
    border: none;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
    transition: all 0.2s ease;
}

.gift-redeem-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--pink-600, #db2777), var(--pink-700, #be185d));
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
    transform: translateY(-1px);
}

.gift-redeem-btn:disabled {
    background: var(--slate-300, #cbd5e1);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
}

.gift-redeem-btn i {
    font-size: 0.85rem;
}

/* Status Messages */
.gift-code-status {
    font-size: 0.8rem;
    padding: 10px 14px;
    border-radius: var(--radius-md, 12px);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gift-code-status:empty {
    display: none;
}

.gift-code-status.success {
    background: var(--green-50, #f0fdf4);
    color: var(--green-700, #15803d);
    border: 1px solid var(--green-200, #bbf7d0);
}

.gift-code-status.success::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--green-500, #22c55e);
}

.gift-code-status.error {
    background: var(--red-50, #fef2f2);
    color: var(--red-700, #b91c1c);
    border: 1px solid var(--red-200, #fecaca);
}

.gift-code-status.error::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--red-500, #ef4444);
}

.gift-code-status.loading {
    background: var(--blue-50, #eff6ff);
    color: var(--blue-700, #1d4ed8);
    border: 1px solid var(--blue-200, #bfdbfe);
}

/* Help Text */
.gift-code-help {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--text-secondary, #94a3b8);
}

.gift-code-help i {
    font-size: 0.65rem;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.settings-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-form-group.inline {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.settings-form-group.inline label {
    flex-shrink: 0;
    min-width: 100px;
    font-size: 0.85rem;
}

.form-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #1e1b4b);
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

.form-select,
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color, rgba(148, 163, 184, 0.3));
    border-radius: var(--radius-md, 12px);
    font-size: 0.875rem;
    color: var(--text-primary, #1e1b4b);
    background: var(--surface-primary, #fff);
    transition: all 0.15s ease;
}

.form-select {
    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='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary-500, #14b8a6);
    box-shadow: var(--focus-ring-shadow);
}

.form-select-sm,
.form-input-sm {
    padding: 10px 14px;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    border-radius: 10px;
    border: 2px solid #99f6e4;
    background: #f0fdfa;
    color: var(--text-primary, #1e293b);
    transition: all 0.2s ease;
}

.form-select-sm:hover,
.form-input-sm:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.04);
}

.form-select-sm:focus,
.form-input-sm:focus {
    outline: none;
    border-color: var(--focus-ring);
    box-shadow: var(--focus-ring-shadow);
}

.form-select-sm {
    padding-right: 32px;
    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='%2314b8a6' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    appearance: none;
}

/* ============================================
   SCHEDULING MODE CARDS
   ============================================ */

.scheduling-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid var(--border-color, rgba(148, 163, 184, 0.2));
    border-radius: var(--radius-md, 12px);
    background: var(--surface-primary, #fff);
    cursor: pointer;
    transition: all 0.15s ease;
}

.mode-card:hover {
    border-color: var(--primary-300, #5eead4);
    background: var(--primary-50, #f0fdfa);
}

.mode-card.active {
    border-color: var(--primary-500, #14b8a6);
    background: var(--primary-50, #f0fdfa);
}

.mode-card i {
    font-size: 1.25rem;
    color: var(--text-secondary, #64748b);
}

.mode-card.active i {
    color: var(--primary-600, #0d9488);
}

.mode-label {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary, #1e1b4b);
    text-align: center;
}

.mode-desc {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
    text-align: center;
}

/* ============================================
   APP MODE TOGGLE
   ============================================ */

.app-mode-toggle-group {
    display: flex;
    gap: 4px;
    background: var(--slate-100, #f1f5f9);
    border-radius: var(--radius-md, 12px);
    padding: 4px;
}

.app-mode-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.app-mode-btn:hover {
    background: rgba(255, 255, 255, 0.7);
}

.app-mode-btn.active {
    background: #fff;
    color: var(--primary-600, #0d9488);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   VISIBILITY PRESET CARDS (Traffic Light Shading)
   ============================================ */

.visibility-preset-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.visibility-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid transparent;
    border-radius: var(--radius-lg, 16px);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

/* Hide the dot indicator - using shaded backgrounds instead */
.visibility-indicator {
    display: none;
}

/* Private - Purple (matches PrivacyVisualConfig) */
.visibility-card.visibility-private {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.visibility-card.visibility-private:hover {
    background: #f5f3ff;
    border-color: #c4b5fd;
}

.visibility-card.visibility-private.active {
    background: #f5f3ff;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.visibility-card.visibility-private i {
    color: #64748b;
}

.visibility-card.visibility-private.active i {
    color: #8b5cf6;
}

.visibility-card.visibility-private .visibility-label {
    color: #475569;
}

.visibility-card.visibility-private.active .visibility-label {
    color: #7c3aed;
}

/* Busy - Amber, per the canonical PrivacyVisualConfig.VISIBILITY.busy
   (#f59e0b). Light mode used to paint Busy TEAL - the same hue as Shared,
   differing only in tint strength - so Busy and Shared were near-identical,
   and neither matched the purple/amber/green language that dark mode and the
   rest of the privacy UI already used. Light mode now matches dark mode and
   the config. Source of truth: js/config/privacy-visual-config.js. */
.visibility-card.visibility-busy {
    background: #f8fafc;
    border-color: #e2e8f0;
}

/* Busy is SLATE, per PrivacyVisualConfig.VISIBILITY.busy (rgb(120,130,150)).
   Was amber #f59e0b — which is --event-timeoff AND the conflict-edge hue, so
   the card taught a colour the board never uses for busy. Every event surface
   already renders busy as the canonical slate hatch. (2026-08-05) */
.visibility-card.visibility-busy:hover {
    background: #f1f5f9;
    border-color: rgb(148, 163, 184);
}

.visibility-card.visibility-busy.active {
    background: #e2e8f0;
    border-color: rgb(120, 130, 150);
    box-shadow: 0 0 0 3px rgba(120, 130, 150, 0.18);
}

.visibility-card.visibility-busy i {
    color: #94a3b8;
}

.visibility-card.visibility-busy.active i {
    color: rgb(100, 116, 139);
}

.visibility-card.visibility-busy .visibility-label {
    color: #475569;
}

.visibility-card.visibility-busy.active .visibility-label {
    color: rgb(100, 116, 139);
}

/* Shared ("full") - Green, per PrivacyVisualConfig.VISIBILITY.full (#22c55e).
   Was teal, which collided with the Busy card above and with the app's teal
   BRAND colour - so "selected" and "shared" read as the same signal. */
.visibility-card.visibility-full {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.visibility-card.visibility-full:hover {
    background: #f0fdf4;
    border-color: #86efac;
}

.visibility-card.visibility-full.active {
    background: #dcfce7;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

.visibility-card.visibility-full i {
    color: #22c55e;
}

.visibility-card.visibility-full.active i {
    color: #16a34a;
}

.visibility-card.visibility-full .visibility-label {
    color: #475569;
}

.visibility-card.visibility-full.active .visibility-label {
    color: #16a34a;
}

/* Icon base size */
.visibility-card i {
    font-size: 1.5rem;
    transition: transform 0.15s ease;
}

.visibility-card.active i {
    transform: scale(1.1);
}

.visibility-label {
    font-weight: 600;
    font-size: 0.85rem;
}

.visibility-desc {
    font-size: 0.7rem;
    color: var(--text-secondary, #64748b);
    text-align: center;
}

/* ============================================
   CALENDAR DEFAULTS
   ============================================ */

.calendar-defaults-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-default-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md, 12px);
}

.cal-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    color: var(--text-primary, #1e293b);
}

.cal-icon i {
    color: #14b8a6;
    font-size: 1rem;
}

/* ============================================
   TOGGLE ROWS
   ============================================ */

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, rgba(148, 163, 184, 0.1));
    cursor: pointer;
}

.toggle-row:last-child {
    border-bottom: none;
}

.toggle-row > span {
    font-size: 0.875rem;
    color: var(--text-primary, #1e1b4b);
}

.toggle-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-info > i {
    color: var(--primary-500, #14b8a6);
    font-size: 1rem;
}

.toggle-info > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.toggle-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1e1b4b);
}

.toggle-hint {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}

/* ============================================
   QUICK RULES
   ============================================ */

.quick-rules-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rule-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--slate-50, #f8fafc);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-primary, #1e1b4b);
    transition: background 0.15s ease;
}

.rule-checkbox:hover {
    background: var(--slate-100, #f1f5f9);
}

.rule-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-500, #14b8a6);
    cursor: pointer;
}


/* ============================================
   SETTINGS ACTION BUTTON
   ============================================ */

.settings-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
    border-radius: var(--radius-md, 12px);
    background: var(--surface-primary, #fff);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-primary, #1e1b4b);
    transition: all 0.15s ease;
}

.settings-action-btn:hover {
    background: var(--slate-50, #f8fafc);
    border-color: var(--primary-300, #5eead4);
}

.settings-action-btn i:first-child {
    color: var(--primary-500, #14b8a6);
}

.settings-action-btn span {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

/* The active-rule count badge is also a <span>, but must not stretch like the
   label above — scope it back to auto width and give it the pill treatment. */
.settings-action-btn .settings-count-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-500, #14b8a6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    text-align: center;
}

.settings-count-badge[hidden] {
    display: none;
}

/* Honesty note for sections whose controls persist immediately (Notifications).
   Muted, informational — not an error. */
.settings-autosave-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    background: var(--primary-50, rgba(20, 184, 166, 0.08));
    border: 1px solid var(--primary-100, rgba(20, 184, 166, 0.18));
    border-radius: var(--radius-md, 12px);
}

.settings-autosave-note i {
    color: var(--primary-500, #14b8a6);
    flex: 0 0 auto;
}

body.dark-mode .settings-autosave-note {
    background: rgba(20, 184, 166, 0.12);
    border-color: rgba(20, 184, 166, 0.28);
}

.settings-action-btn i:last-child {
    color: var(--text-secondary, #64748b);
}

.approval-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--red-500, #ef4444);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
}

/* ============================================
   ADMIN SECTION
   ============================================ */

/* Admin Locked State - Grayed out accordion */
.admin-section.locked {
    opacity: 0.85;
}

.admin-section.locked .settings-accordion-header {
    cursor: not-allowed;
}

#settings-modal .admin-section.locked .accordion-icon {
    background-color: var(--slate-200, #e2e8f0);
    color: var(--slate-400, #94a3b8);
}

#settings-modal .admin-section.locked .accordion-icon i {
    color: var(--slate-400, #94a3b8);
}

#settings-modal .admin-section.locked .accordion-title {
    color: var(--slate-400, #94a3b8);
}

#settings-modal .admin-section.locked .accordion-chevron {
    display: none;
}

/* Admin Lock Indicator in Header */
.admin-lock-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    padding: 4px 12px;
    background: var(--amber-50, #fffbeb);
    border: 1px solid var(--amber-200, #fde68a);
    border-radius: var(--radius-full, 9999px);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--amber-700, #b45309);
}

.admin-lock-indicator i {
    font-size: 0.65rem;
    color: var(--amber-500, #f59e0b);
}

/* Hide lock indicator when admin */
.admin-section.unlocked .admin-lock-indicator {
    display: none;
}

.admin-section .settings-accordion-content {
    position: relative;
}

/* Admin Lock Overlay (content) */
.admin-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary, #64748b);
    z-index: 10;
    border-radius: var(--radius-lg, 16px);
    backdrop-filter: blur(2px);
}

.admin-lock-overlay i {
    font-size: 2rem;
    color: var(--amber-400, #fbbf24);
}

.admin-lock-overlay span {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Admin unlocked state - hide overlay and lock icons */
.admin-section.unlocked .admin-lock-overlay {
    display: none;
}

.admin-section.unlocked .admin-lock-icon {
    display: none;
}

/* Restore normal styles when unlocked */
#settings-modal .admin-section.unlocked .accordion-icon {
    background-color: #f0fdfa;
    color: #0d9488;
}

#settings-modal .admin-section.unlocked .accordion-icon i {
    color: #0d9488;
}

#settings-modal .admin-section.unlocked .accordion-title {
    color: #1e1b4b;
}

#settings-modal .admin-section.unlocked .accordion-chevron {
    display: inline-block;
}

.admin-section.unlocked {
    opacity: 1;
}

/* Admin Setting Groups */
.admin-setting-group {
    padding: 16px;
    background: var(--slate-50, #f8fafc);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.admin-setting-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary, #1e1b4b);
}

.admin-setting-header i:first-child {
    color: var(--primary-500, #14b8a6);
}

.admin-lock-icon {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--amber-500, #f59e0b);
}

.quota-config {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.input-suffix {
    font-size: 0.85rem;
    color: var(--text-secondary, #64748b);
}

body.dark-mode .input-suffix {
    color: var(--color-dark-text-secondary, #94a3b8);
}

/* ============================================
   ADVANCED PRIVACY SECTION
   ============================================ */

.advanced-privacy-section {
    padding-top: 16px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.audit-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Settings modal secondary buttons - flat design matching app norms */
.settings-accordion-content .btn-secondary {
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    border: 2px solid var(--border-color, #e2e8f0);
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-accordion-content .btn-secondary:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.04);
    color: #0d9488;
}

.settings-accordion-content .btn-danger {
    background: #fef2f2;
    color: #dc2626;
    border: 2px solid #fecaca;
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-accordion-content .btn-danger:hover {
    background: #fee2e2;
    border-color: #dc2626;
}

/* ============================================
   DATA MANAGEMENT
   ============================================ */

.data-management-section {
    padding: 16px;
    background: var(--slate-50, #f8fafc);
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.data-management-section .form-label {
    margin-bottom: 12px;
}

/* ============================================
   INTEGRATION CARDS (enhanced)
   ============================================ */

.settings-accordion-content .integration-card {
    margin-bottom: 12px;
}

.settings-accordion-content .integration-card:last-of-type {
    margin-bottom: 0;
}

.integration-webhook-form {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

.webhook-input {
    width: 100%;
    margin-bottom: 4px;
}

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

.settings-modal-footer {
    display: flex;
    /* space-between (was flex-end) so the auto-save note sits left and Done
       stays right. */
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.2));
}

/* Tells the user why there is no Save button. Deliberately quiet - it is a
   reassurance, not a call to action. */
.settings-footer-note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--color-text-secondary, #64748b);
}

body.dark-mode .settings-footer-note {
    color: var(--slate-400, #94a3b8);
}

@media (max-width: 480px) {
    /* Stack on narrow screens so the note never squeezes the button. */
    .settings-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .settings-footer-note {
        text-align: center;
    }
}

/* ============================================
   DARK MODE
   ============================================ */

body.dark-mode #settings-modal .settings-accordion-section {
    border-color: #334155;
    background: #1e293b;
}

body.dark-mode #settings-modal .settings-accordion-header {
    background: #1e293b;
}

body.dark-mode #settings-modal .settings-accordion-header:hover {
    background: #334155;
}

body.dark-mode #settings-modal .accordion-icon {
    background-color: #134e4a;
    color: #5eead4;
}

body.dark-mode #settings-modal .accordion-icon i,
body.dark-mode #settings-modal .accordion-icon .fa-solid {
    color: #5eead4;
}

body.dark-mode #settings-modal .accordion-title {
    color: #f1f5f9;
}

body.dark-mode #settings-modal .accordion-chevron {
    color: #94a3b8;
}

body.dark-mode #settings-modal .settings-accordion-content {
    background: #1e293b;
}

body.dark-mode .account-profile-card,
body.dark-mode .plan-features-card,
body.dark-mode .gift-code-section,
body.dark-mode .admin-setting-group,
body.dark-mode .data-management-section {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
}

body.dark-mode .profile-name,
body.dark-mode .form-label,
body.dark-mode .mode-label,
body.dark-mode .visibility-label,
body.dark-mode .toggle-title,
body.dark-mode .admin-setting-header {
    color: var(--color-dark-text, #f1f5f9);
}

body.dark-mode .form-select,
body.dark-mode .form-input {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-600, #475569);
    color: var(--color-dark-text, #f1f5f9);
}

body.dark-mode .form-select {
    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='%2394a3b8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 12px !important;
}

body.dark-mode .mode-card {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
}

body.dark-mode .mode-card:hover {
    border-color: var(--primary-500, #14b8a6);
}

body.dark-mode .mode-card.active {
    border-color: var(--primary-500, #14b8a6);
    background: var(--primary-900, #134e4a);
}

/* Dark Mode Visibility Cards - Purple/Slate/Green per PrivacyVisualConfig */
body.dark-mode .visibility-card.visibility-private,
body.dark-mode .visibility-card.visibility-busy,
body.dark-mode .visibility-card.visibility-full {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-600, #475569);
}

body.dark-mode .visibility-card.visibility-private:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: #a78bfa;
}

body.dark-mode .visibility-card.visibility-busy:hover {
    background: rgba(120, 130, 150, 0.14);
    border-color: rgb(148, 163, 184);
}

body.dark-mode .visibility-card.visibility-full:hover {
    background: rgba(34, 197, 94, 0.1);
    border-color: #4ade80;
}

body.dark-mode .visibility-card.visibility-private.active {
    background: rgba(139, 92, 246, 0.15);
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

body.dark-mode .visibility-card.visibility-busy.active {
    background: rgba(120, 130, 150, 0.18);
    border-color: rgb(120, 130, 150);
    box-shadow: 0 0 0 3px rgba(120, 130, 150, 0.22);
}

body.dark-mode .visibility-card.visibility-full.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

body.dark-mode .visibility-card.visibility-private .visibility-label,
body.dark-mode .visibility-card.visibility-busy .visibility-label {
    color: #94a3b8;
}

body.dark-mode .visibility-card.visibility-private.active .visibility-label {
    color: #a78bfa;
}

body.dark-mode .visibility-card.visibility-busy.active .visibility-label {
    color: rgb(148, 163, 184);
}

body.dark-mode .visibility-card.visibility-full.active .visibility-label {
    color: #4ade80;
}

body.dark-mode .visibility-card.visibility-private i,
body.dark-mode .visibility-card.visibility-busy i {
    color: #64748b;
}

body.dark-mode .visibility-card.visibility-private.active i {
    color: #a78bfa;
}

body.dark-mode .visibility-card.visibility-busy.active i {
    color: rgb(148, 163, 184);
}

body.dark-mode .visibility-card.visibility-full.active i {
    color: #4ade80;
}

body.dark-mode .visibility-card.visibility-full i {
    color: #4ade80;
}

body.dark-mode .visibility-card.visibility-full .visibility-label {
    color: #4ade80;
}

body.dark-mode .app-mode-toggle-group {
    background: var(--slate-800, #1e293b);
}

body.dark-mode .app-mode-btn {
    color: var(--text-secondary, #94a3b8);
}

body.dark-mode .app-mode-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .app-mode-btn.active {
    background: var(--slate-700, #334155);
    color: var(--primary-400, #2dd4bf);
}

body.dark-mode .calendar-default-row {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
}

body.dark-mode .calendar-default-row .cal-icon i {
    color: #2dd4bf;
}

body.dark-mode .rule-checkbox {
    background: var(--slate-800, #1e293b);
}

body.dark-mode .rule-checkbox:hover {
    background: var(--slate-700, #334155);
}

body.dark-mode .settings-action-btn {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
    color: var(--color-dark-text, #f1f5f9);
}

body.dark-mode .settings-action-btn:hover {
    background: var(--slate-700, #334155);
}

/* Dark mode form-select-sm */
body.dark-mode .form-select-sm,
body.dark-mode .form-input-sm {
    background: rgba(20, 184, 166, 0.08);
    border-color: rgba(20, 184, 166, 0.3);
    color: var(--color-dark-text, #f1f5f9);
}

body.dark-mode .form-select-sm {
    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='%232dd4bf' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

body.dark-mode .form-select-sm:hover,
body.dark-mode .form-input-sm:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.15);
}

/* Dark mode settings buttons */
body.dark-mode .settings-accordion-content .btn-secondary {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-600, #475569);
    color: var(--color-dark-text, #f1f5f9);
}

body.dark-mode .settings-accordion-content .btn-secondary:hover {
    border-color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
    color: #2dd4bf;
}

body.dark-mode .settings-accordion-content .btn-danger {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.4);
    color: #f87171;
}

body.dark-mode .settings-accordion-content .btn-danger:hover {
    background: rgba(220, 38, 38, 0.25);
    border-color: #dc2626;
}

body.dark-mode .admin-lock-overlay {
    background: rgba(30, 41, 59, 0.95);
}

body.dark-mode .admin-lock-indicator {
    background: var(--amber-900, #78350f);
    border-color: var(--amber-700, #b45309);
    color: var(--amber-300, #fcd34d);
}

body.dark-mode .admin-lock-indicator i {
    color: var(--amber-400, #fbbf24);
}

body.dark-mode #settings-modal .admin-section.locked .accordion-icon {
    background-color: var(--slate-700, #334155);
    color: var(--slate-500, #64748b);
}

body.dark-mode #settings-modal .admin-section.locked .accordion-icon i {
    color: var(--slate-500, #64748b);
}

body.dark-mode #settings-modal .admin-section.locked .accordion-title {
    color: var(--slate-500, #64748b);
}

/* Dark Mode Plan Card */
body.dark-mode .plan-card {
    background: linear-gradient(135deg, var(--slate-800, #1e293b) 0%, #1a2e38 100%);
    border-color: var(--primary-700, #0f766e);
}

body.dark-mode .plan-card-header {
    border-color: var(--slate-700, #334155);
}

body.dark-mode .plan-name {
    color: var(--slate-100, #f1f5f9);
}

body.dark-mode .plan-status {
    background: var(--green-900, #14532d);
    color: var(--green-400, #4ade80);
}

body.dark-mode .plan-description {
    color: var(--slate-400, #94a3b8);
}

body.dark-mode .usage-label {
    color: var(--slate-400, #94a3b8);
}

body.dark-mode .usage-count {
    color: var(--slate-200, #e2e8f0);
}

body.dark-mode .usage-bar {
    background: var(--slate-700, #334155);
}

body.dark-mode .plan-feature {
    color: var(--slate-200, #e2e8f0);
}

body.dark-mode .plan-feature.locked {
    color: var(--slate-500, #64748b);
}

body.dark-mode .plan-card-footer {
    background: var(--slate-800, #1e293b);
}

body.dark-mode .plan-upgrade-hint {
    color: var(--slate-500, #64748b);
}

/* Dark Mode Tier-based color backgrounds */
body.dark-mode .plan-card[data-tier="free"] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #475569;
}
body.dark-mode .plan-card[data-tier="free"]::before {
    background: linear-gradient(90deg, #64748b, #475569);
}

body.dark-mode .plan-card[data-tier="pro"] {
    background: linear-gradient(135deg, #134e4a 0%, #0f3d3a 100%);
    border-color: #2dd4bf;
}
body.dark-mode .plan-card[data-tier="pro"]::before {
    background: linear-gradient(90deg, #2dd4bf, #14b8a6);
}

body.dark-mode .plan-card[data-tier="team"] {
    background: linear-gradient(135deg, #1e3a5f 0%, #172554 100%);
    border-color: #60a5fa;
}
body.dark-mode .plan-card[data-tier="team"]::before {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

body.dark-mode .plan-card[data-tier="enterprise"] {
    background: linear-gradient(135deg, #3b1e5f 0%, #2e1065 100%);
    border-color: #c084fc;
}
body.dark-mode .plan-card[data-tier="enterprise"]::before {
    background: linear-gradient(90deg, #c084fc, #a855f7);
}

/* Dark Mode Gift Code */
body.dark-mode .gift-code-details {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
}

body.dark-mode .gift-code-trigger:hover {
    background: var(--slate-700, #334155);
}

body.dark-mode .gift-code-trigger-content {
    color: var(--slate-200, #e2e8f0);
}

body.dark-mode .gift-code-panel {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
}

body.dark-mode .gift-code-description {
    color: var(--slate-400, #94a3b8);
}

body.dark-mode .gift-segment {
    background: var(--slate-900, #0f172a);
    border-color: var(--slate-600, #475569);
    color: var(--slate-100, #f1f5f9);
}

body.dark-mode .gift-segment::placeholder {
    color: var(--slate-600, #475569);
}

body.dark-mode .gift-segment:focus {
    border-color: var(--primary-400, #2dd4bf);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

body.dark-mode .gift-segment.filled {
    background: var(--primary-900, #134e4a);
    border-color: var(--primary-500, #14b8a6);
}

body.dark-mode .gift-separator {
    color: var(--slate-500, #64748b);
}

body.dark-mode .gift-redeem-btn:disabled {
    background: var(--slate-600, #475569);
}

body.dark-mode .gift-code-help {
    color: var(--slate-500, #64748b);
}

body.dark-mode .gift-code-status.success {
    background: var(--green-900, #14532d);
    color: var(--green-300, #86efac);
    border-color: var(--green-700, #15803d);
}

body.dark-mode .gift-code-status.error {
    background: var(--red-900, #7f1d1d);
    color: var(--red-300, #fca5a5);
    border-color: var(--red-700, #b91c1c);
}

body.dark-mode .toggle-row {
    border-color: var(--slate-700, #334155);
}

body.dark-mode .settings-modal-footer {
    border-color: var(--slate-700, #334155);
}

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

@media (max-width: 640px) {
    .settings-modal-redesign {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        height: 100vh;
        max-height: 100vh;
    }

    .settings-accordion-body {
        max-height: calc(100vh - 130px);
    }

    .scheduling-mode-cards {
        grid-template-columns: 1fr;
    }

    .visibility-preset-cards {
        grid-template-columns: 1fr;
    }

    .quota-config {
        grid-template-columns: 1fr;
    }

    .account-profile-card {
        flex-wrap: wrap;
    }

    /* 2026-08-06 (user: "enterprise pill should be above not below"): the
       tier badge is the THIRD flex child, and Sign out is appended inside
       .profile-info (the second). Forcing .profile-tier to width:100% on
       mobile therefore wrapped it onto its own row BELOW the button, so the
       plan the account is on read as a footnote to an action instead of a
       property of the identity. Order it above the name/email block and let
       it keep its intrinsic width so it hugs the badge. */
    .profile-tier {
        order: -1;
        width: auto;
        margin-top: 0;
        margin-left: auto;
    }

    /* Plan Card Responsive */
    .plan-features-list {
        grid-template-columns: 1fr;
    }

    .admin-lock-indicator span {
        display: none;
    }

    .admin-lock-indicator {
        padding: 6px 8px;
    }

    /* Gift Code Responsive */
    .gift-code-segments {
        gap: 4px;
    }

    .gift-segment {
        width: 60px;
        padding: 10px 6px;
        font-size: 0.9rem;
    }

    .gift-separator {
        font-size: 0.9rem;
    }
}

/* ============================================
   INLINE FEEDBACK (replaces toasts)
   ============================================ */

.inline-feedback {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    border-radius: var(--radius-md, 8px);
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.3s ease;
    pointer-events: none;
}

.inline-feedback.show {
    opacity: 1;
    transform: translateY(0);
}

/* Confirmation pulse — the success state gets a brief green ring expanding
   outward on first paint so the user's eye is drawn to the affirmation
   even if their attention was on a different part of the modal. Single
   shot animation; ring fades out so the resting state is just the soft
   green chip. Honors prefers-reduced-motion. */
@keyframes inline-feedback-confirm-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-500, #22c55e) 50%, transparent); }
    70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green-500, #22c55e) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-500, #22c55e) 0%, transparent); }
}
.inline-feedback-success.show {
    animation: inline-feedback-confirm-pulse 900ms ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
    .inline-feedback-success.show { animation: none; }
}

.inline-feedback i {
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Success */
.inline-feedback-success {
    background: var(--green-50, #f0fdf4);
    color: var(--green-700, #15803d);
    border: 1px solid var(--green-200, #bbf7d0);
}

.inline-feedback-success i {
    color: var(--green-500, #22c55e);
}

/* Error */
.inline-feedback-error {
    background: var(--red-50, #fef2f2);
    color: var(--red-700, #b91c1c);
    border: 1px solid var(--red-200, #fecaca);
}

.inline-feedback-error i {
    color: var(--red-500, #ef4444);
}

/* Info */
.inline-feedback-info {
    background: var(--blue-50, #eff6ff);
    color: var(--blue-700, #1d4ed8);
    border: 1px solid var(--blue-200, #bfdbfe);
}

.inline-feedback-info i {
    color: var(--blue-500, #3b82f6);
}

/* Dark mode */
body.dark-mode .inline-feedback-success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--green-300, #86efac);
    border-color: rgba(34, 197, 94, 0.3);
}

body.dark-mode .inline-feedback-error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red-300, #fca5a5);
    border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .inline-feedback-info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--blue-300, #93c5fd);
    border-color: rgba(59, 130, 246, 0.3);
}

/* ============================================
   NOTIFICATIONS SECTION
   ============================================ */

.notif-toggles-list {
    display: flex;
    flex-direction: column;
}

.notif-toggles-list .toggle-row > span {
    font-size: 0.875rem;
    color: var(--text-primary, #1e1b4b);
}

/* Quiet Hours Time Picker */
.quiet-hours-times {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    background: var(--slate-50, #f8fafc);
    border-radius: var(--radius-md, 12px);
    margin-top: 4px;
}

.quiet-hours-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.form-label-sm {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.quiet-hours-field .form-input {
    padding: 8px 10px;
    font-size: 0.875rem;
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.3));
    border-radius: var(--radius-sm, 8px);
    background: var(--surface-primary, #fff);
    color: var(--text-primary, #1e1b4b);
    width: 100%;
}

.quiet-hours-field .form-input:focus {
    outline: none;
    border-color: var(--primary-500, #14b8a6);
    box-shadow: var(--focus-ring-shadow);
}

.quiet-hours-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #64748b);
    font-size: 0.75rem;
    padding-bottom: 10px;
    flex-shrink: 0;
}

/* Notification Inline Feedback */
.settings-inline-feedback {
    font-size: 0.8rem;
    padding: 10px 14px;
    border-radius: var(--radius-md, 12px);
    display: none;
    align-items: center;
    gap: 8px;
}

.settings-inline-feedback.show {
    display: flex;
}

.settings-inline-feedback.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--green-600, #16a34a);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.settings-inline-feedback.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--red-600, #dc2626);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Dark mode - Notifications */
body.dark-mode .quiet-hours-times {
    background: var(--slate-800, #1e293b);
}

body.dark-mode .quiet-hours-field .form-input {
    background: var(--slate-700, #334155);
    border-color: var(--slate-600, #475569);
    color: var(--color-dark-text, #f1f5f9);
}

body.dark-mode .quiet-hours-field .form-input:focus {
    border-color: var(--primary-400, #2dd4bf);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

body.dark-mode .quiet-hours-separator {
    color: #94a3b8;
}

body.dark-mode .form-label-sm {
    color: #94a3b8;
}

body.dark-mode .notif-toggles-list .toggle-row > span {
    color: var(--color-dark-text, #f1f5f9);
}

body.dark-mode .settings-inline-feedback.success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--green-300, #86efac);
    border-color: rgba(34, 197, 94, 0.3);
}

body.dark-mode .settings-inline-feedback.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--red-300, #fca5a5);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Responsive - Notifications */
@media (max-width: 480px) {
    .quiet-hours-times {
        flex-direction: column;
        gap: 8px;
    }

    .quiet-hours-separator {
        padding-bottom: 0;
        transform: rotate(90deg);
    }
}

/* ============================================
   FOCUS-VISIBLE STATES (Keyboard Accessibility)
   ============================================ */

.settings-accordion-header:focus-visible {
    outline: 2px solid var(--primary-500, #14b8a6);
    outline-offset: -2px;
    border-radius: var(--radius-lg, 16px);
}

.mode-card:focus-visible,
.visibility-card:focus-visible,
.settings-action-btn:focus-visible {
    outline: 2px solid var(--primary-500, #14b8a6);
    outline-offset: 2px;
}

.toggle-row:focus-visible {
    outline: 2px solid var(--primary-500, #14b8a6);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 8px);
}

.rule-checkbox:focus-visible {
    outline: 2px solid var(--primary-500, #14b8a6);
    outline-offset: 2px;
}

body.dark-mode .settings-accordion-header:focus-visible,
body.dark-mode .mode-card:focus-visible,
body.dark-mode .visibility-card:focus-visible,
body.dark-mode .settings-action-btn:focus-visible,
body.dark-mode .toggle-row:focus-visible,
body.dark-mode .rule-checkbox:focus-visible {
    outline-color: var(--primary-400, #2dd4bf);
}

/* ============================================
   ACCOUNT DELETE — Danger zone (Audit T01 AUDIT-2026-05-30-01-17)
   ============================================ */
#settings-modal .settings-danger-zone {
  margin-top: var(--space-4, 16px);
  border: 1px solid var(--color-red-200, #fecaca);
  border-radius: var(--radius-md, 8px);
  background: var(--color-red-50, #fef2f2);
  padding: var(--space-3, 12px) var(--space-4, 16px);
}

#settings-modal .settings-danger-zone > .settings-subsection-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-weight: 600;
  color: var(--color-red-700, #b91c1c);
  cursor: pointer;
  list-style: none;
}

#settings-modal .settings-danger-zone > .settings-subsection-header::-webkit-details-marker {
  display: none;
}

#settings-modal .settings-danger-zone .settings-subsection-content {
  margin-top: var(--space-3, 12px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
}

#settings-modal .settings-danger-zone .settings-help-text {
  color: var(--color-red-700, #b91c1c);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

#settings-modal #account-delete-btn {
  align-self: flex-start;
  min-height: 44px;
}

body.dark-mode #settings-modal .settings-danger-zone {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.4);
}

body.dark-mode #settings-modal .settings-danger-zone > .settings-subsection-header,
body.dark-mode #settings-modal .settings-danger-zone .settings-help-text {
  color: var(--color-red-300, #fca5a5);
}

/* ============================================================
   "More options" disclosure (2026-06-13 Settings revamp)
   Per-section collapse for power-user settings. The existing
   .settings-subsection styles are scoped to .settings-danger-zone,
   so this is a fresh shared block; a bare <details> would otherwise
   render the default browser triangle with no chrome.
   ============================================================ */
#settings-modal .settings-more-options {
  border-top: 1px solid var(--border-color, #e5e7eb);
  padding-top: 12px;
}

#settings-modal .settings-more-options > .settings-more-options-header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  cursor: pointer;
  list-style: none;
  min-height: 32px;
  user-select: none;
}

/* Hide the default disclosure triangle (cross-browser) */
#settings-modal .settings-more-options > .settings-more-options-header::-webkit-details-marker {
  display: none;
}
#settings-modal .settings-more-options > .settings-more-options-header {
  list-style: none;
}

/* Custom chevron rotates open/closed */
#settings-modal .settings-more-options-chevron {
  font-size: 0.75rem;
  transition: transform 0.15s ease;
}
#settings-modal .settings-more-options[open] > .settings-more-options-header .settings-more-options-chevron {
  transform: rotate(90deg);
}

#settings-modal .settings-more-options > .settings-more-options-header:hover {
  color: var(--color-text-primary, #111827);
}

#settings-modal .settings-more-options > .settings-more-options-header:focus-visible {
  outline: 2px solid var(--primary-500, #2563eb);
  outline-offset: 2px;
  border-radius: 4px;
}

#settings-modal .settings-more-options-content {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

body.dark-mode #settings-modal .settings-more-options {
  border-top-color: var(--color-border-dark, rgba(255, 255, 255, 0.1));
}
body.dark-mode #settings-modal .settings-more-options > .settings-more-options-header {
  color: var(--color-text-secondary-dark, #9ca3af);
}
body.dark-mode #settings-modal .settings-more-options > .settings-more-options-header:hover {
  color: var(--color-text-primary-dark, #f3f4f6);
}

/* DEF-040 rev-2 (2026-07-03): the ✕ shown next to a Connect button while an
   OAuth connect is in flight. Small, muted, circular — a clean cancel affordance
   instead of the old ugly "Connecting… (click to cancel)" label. */
.int-connect-cancel-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--slate-100, #f1f5f9);
  color: var(--slate-500, #64748b);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.int-connect-cancel-x:hover {
  background: var(--slate-200, #e2e8f0);
  color: var(--slate-700, #334155);
}
body.dark-mode .int-connect-cancel-x {
  background: var(--slate-700, #334155);
  color: var(--slate-300, #cbd5e1);
}
body.dark-mode .int-connect-cancel-x:hover {
  background: var(--slate-600, #475569);
  color: var(--slate-100, #f1f5f9);
}

/* ── Two-line menu item: name + one-line description (2026-09-02) ───────────
   Used by "My booking page" in the ⋯ menu, which sits beside the group-level
   "Booking links for this group" and must read as a different object. The
   description is a real element, not a title attribute, so touch users see it.
   Lives here (a linked sheet) — css/main.css is not an input to the build. */
.menu-item .menu-item-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.menu-item .menu-item-desc { font-size: 0.75rem; font-weight: 400; line-height: 1.25; color: var(--text-secondary, #6b7280); white-space: normal; }
body.dark-mode .menu-item .menu-item-desc { color: var(--text-secondary, #9ca3af); }