/* =============================================================================
   FairFlow Theme Layer — Acier Glacé
   Light theme is the DEFAULT. Dark theme preserved via [data-theme="dark"].
   Loaded on every page AFTER new_styles.css so its variables/overrides win.
   ============================================================================= */

/* ---- Text tiers (dark defaults keep the existing look identical) ---------- */
:root {
    --ff-fg-1: rgba(255, 255, 255, 0.92); /* primary text */
    --ff-fg-2: rgba(255, 255, 255, 0.72); /* secondary text */
    --ff-fg-3: rgba(255, 255, 255, 0.55); /* muted text */
    --ff-fg-4: rgba(255, 255, 255, 0.40); /* faint text */
    --ff-fg-solid: #ffffff;

    /* themeable surfaces / borders (used by overrides below) */
    --ff-surface: rgba(255, 255, 255, 0.05);
    --ff-surface-2: rgba(255, 255, 255, 0.08);
    --ff-border: rgba(255, 255, 255, 0.12);
    --ff-page-a: #05080F;
    --ff-page-b: #0A1020;
    --ff-page-c: #0E1A2E;
    --ff-page-d: #16314F;
    --hairline: rgba(255, 255, 255, 0.12);

    /* WebApp Suite glass sheen (top edge highlight line on every panel) */
    --ff-sheen: rgba(255, 255, 255, 0.42);
}

[data-theme="light"] {
    --ff-sheen: rgba(16, 49, 79, 0.24);
}

/* =============================================================================
   WebApp Suite alignment (26/08) — one shared "glass panel" recipe (rounded
   22px corners + top sheen line) applied to every card/section/header already
   used across the app pages (dashboard, clients, projects, transactions,
   invoices, team, settings…) so they read as ONE UI kit, matching
   doc/frontend-yassin/FairFlow_WebApp_Suite.html. Reuses the same surfaces
   already themed above; only radius/blur/sheen are added here, per-page
   background/shadow tokens are left alone to avoid re-fighting specificity.
   ============================================================================= */
.chart-card, .liquid-card, .calculator-card, .settings-section, .stats-section,
.stat-card, .stat-card-small, .project-card, .client-card, .member-card,
.team-card, .team-cta, .content-section, .feature-card, .comparison-card,
.invoice-list-item, .plan-card, .current-plan-banner, .calendar-container,
.tl-upcoming, .tl-legend, .contact-form-section, .contact-info-section,
.contact-info-card, .org-management-item,
.projects-header, .clients-header, .team-header, .transactions-header-fixed {
    border-radius: 22px !important;
    position: relative;
    backdrop-filter: blur(20px) saturate(1.45) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.45) !important;
}
.chart-card::before, .liquid-card::before, .calculator-card::before,
.settings-section::before, .stats-section::before, .stat-card::before,
.stat-card-small::before, .project-card::before, .client-card::before,
.member-card::before, .team-card::before, .team-cta::before,
.content-section::before, .feature-card::before, .comparison-card::before,
.invoice-list-item::before, .plan-card::before, .current-plan-banner::before,
.calendar-container::before, .tl-upcoming::before, .tl-legend::before,
.contact-form-section::before, .contact-info-section::before,
.contact-info-card::before, .org-management-item::before,
.projects-header::before, .clients-header::before, .team-header::before,
.transactions-header-fixed::before {
    content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1.4px;
    border-radius: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--ff-sheen), transparent);
}

/* =============================================================================
   LIGHT THEME
   ============================================================================= */
[data-theme="light"] {
    color-scheme: light;

    /* text tiers */
    --ff-fg-1: #0B1524;
    --ff-fg-2: #33455F;
    --ff-fg-3: #5B6B86;
    --ff-fg-4: #8A99B0;
    --ff-fg-solid: #0B1524;

    /* re-map the core new_styles variables */
    --primary-color: #2E537E;
    --secondary-color: #4A78B8;
    --accent-color: #16314F;
    --text-primary: #0B1524;
    --text-secondary: #33455F;
    --text-muted: #5B6B86;
    --background-glass: rgba(255, 255, 255, 0.72);
    --background-glass-light: rgba(255, 255, 255, 0.85);
    --background-glass-solid: rgba(255, 255, 255, 0.92);
    --border-glass: rgba(16, 49, 79, 0.14);
    --border-subtle: rgba(16, 49, 79, 0.08);
    --border-glow: rgba(74, 120, 184, 0.40);
    --text-primary: #0B1524;

    /* themeable surfaces */
    --ff-surface: rgba(255, 255, 255, 0.78);
    --ff-surface-2: rgba(255, 255, 255, 0.92);
    --ff-border: rgba(16, 49, 79, 0.14);
    --ff-page-a: #EEF3FB;
    --ff-page-b: #E4EBF7;
    --ff-page-c: #EDF2FA;
    --ff-page-d: #DCE6F4;
    --hairline: rgba(16, 49, 79, 0.14);
}

/* ---- Page backgrounds ----------------------------------------------------- */
[data-theme="light"] body,
[data-theme="light"] .landing-page,
[data-theme="light"] .dashboard-page,
[data-theme="light"] .welcome-page,
[data-theme="light"] .pricing-page {
    background: linear-gradient(135deg, var(--ff-page-a) 0%, var(--ff-page-c) 35%, var(--ff-page-b) 70%, var(--ff-page-d) 100%) !important;
    background-attachment: fixed !important;
    color: var(--ff-fg-1);
}

/* landing/auth explicit body gradients */
[data-theme="light"] .login-container ~ *,
[data-theme="light"] .register-container ~ * { color: inherit; }

/* soften the animated orbs on light */
[data-theme="light"] body::before { opacity: 0.5; }
[data-theme="light"] .blob { mix-blend-mode: multiply; opacity: 0.22; filter: blur(120px); }
[data-theme="light"] .blob-1 { background: rgba(74, 120, 184, 0.35); }
[data-theme="light"] .blob-2 { background: rgba(46, 83, 126, 0.30); }
[data-theme="light"] .blob-3 { background: rgba(134, 176, 224, 0.30); }

/* ---- Glass surfaces (cards, headers, nav, panels) ------------------------- */
[data-theme="light"] .nav-bar,
[data-theme="light"] .nav-column,
[data-theme="light"] .chart-card,
[data-theme="light"] .liquid-card,
[data-theme="light"] .calculator-card,
[data-theme="light"] .settings-section,
[data-theme="light"] .stats-section,
[data-theme="light"] .stat-card,
[data-theme="light"] .stat-card-small,
[data-theme="light"] .project-card,
[data-theme="light"] .client-card,
[data-theme="light"] .member-card,
[data-theme="light"] .team-card,
[data-theme="light"] .team-cta,
[data-theme="light"] .projects-header,
[data-theme="light"] .clients-header,
[data-theme="light"] .team-header,
[data-theme="light"] .transactions-header-fixed,
[data-theme="light"] .content-section,
[data-theme="light"] .login-card,
[data-theme="light"] .register-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .comparison-card,
[data-theme="light"] .invoice-list-item,
[data-theme="light"] .member-row,
[data-theme="light"] .contact-form-section,
[data-theme="light"] .contact-info-section,
[data-theme="light"] .contact-info-card,
[data-theme="light"] .org-management-item,
[data-theme="light"] .calendar-container,
[data-theme="light"] .tl-upcoming,
[data-theme="light"] .tl-legend,
[data-theme="light"] .current-plan-banner,
[data-theme="light"] .plan-card {
    background: var(--ff-surface) !important;
    border-color: var(--ff-border) !important;
    box-shadow: 0 6px 24px rgba(16, 49, 79, 0.08) !important;
}

/* nested/interactive surfaces */
[data-theme="light"] .stat-item,
[data-theme="light"] .budget-input-section,
[data-theme="light"] .total-percent,
[data-theme="light"] .org-item,
[data-theme="light"] .org-switcher-btn,
[data-theme="light"] .checkbox-label,
[data-theme="light"] .radio-label,
[data-theme="light"] .member-email,
[data-theme="light"] .fchip,
[data-theme="light"] .pill,
[data-theme="light"] .info-icon,
[data-theme="light"] .section-icon {
    background: rgba(16, 49, 79, 0.05) !important;
    border-color: var(--ff-border) !important;
}

/* org-dropdown needs a solid background in light mode so content is readable */
[data-theme="light"] .org-dropdown {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: var(--ff-border) !important;
    box-shadow: 0 8px 32px rgba(16, 49, 79, 0.18) !important;
}

/* ---- Modals --------------------------------------------------------------- */
[data-theme="light"] .modal-content,
[data-theme="light"] .join-org-modal-content,
[data-theme="light"] .tl-modal-content,
[data-theme="light"] .tl-popover,
[data-theme="light"] .document-scanner-modal .scanner-container {
    background: #FFFFFF !important;
    border-color: var(--ff-border) !important;
    color: var(--ff-fg-1) !important;
    box-shadow: 0 20px 60px rgba(16, 49, 79, 0.25) !important;
}
[data-theme="light"] .modal-overlay { background: rgba(16, 49, 79, 0.28); }

/* ---- Form controls -------------------------------------------------------- */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-input,
[data-theme="light"] .form-group input,
[data-theme="light"] .modal-form input,
[data-theme="light"] .modal-form select,
[data-theme="light"] .modal-form textarea,
[data-theme="light"] .member-row input {
    background: #FFFFFF !important;
    border-color: rgba(16, 49, 79, 0.18) !important;
    color: #0B1524 !important;
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color: #93A2B8 !important; }
[data-theme="light"] select option { background: #FFFFFF !important; color: #0B1524 !important; }

/* ---- Tables --------------------------------------------------------------- */
[data-theme="light"] .tbl th,
[data-theme="light"] table th { color: var(--ff-fg-3); border-bottom-color: var(--ff-border); }
[data-theme="light"] .tbl td,
[data-theme="light"] table td { border-bottom-color: rgba(16, 49, 79, 0.08); }
[data-theme="light"] .tbl tr:hover td { background: rgba(16, 49, 79, 0.03); }

/* ---- Nav links ------------------------------------------------------------ */
[data-theme="light"] .nav-column a { color: var(--ff-fg-2); }
[data-theme="light"] .nav-column a:hover { background: rgba(16, 49, 79, 0.05); color: #16314F; }
[data-theme="light"] .nav-column a.active { color: #2E537E; }
[data-theme="light"] .brand-wordmark { color: #16314F; }

/* ---- Calendar cells ------------------------------------------------------- */
[data-theme="light"] .calendar-cell { border-color: rgba(16, 49, 79, 0.08); }
[data-theme="light"] .calendar-cell:hover { background: rgba(16, 49, 79, 0.04); }
[data-theme="light"] .calendar-weekday { color: var(--ff-fg-3); }

/* ---- Misc readability ----------------------------------------------------- */
[data-theme="light"] .hero-description,
[data-theme="light"] .content-subtitle,
[data-theme="light"] .team-subtitle,
[data-theme="light"] .form-help,
[data-theme="light"] .help-text { color: var(--ff-fg-3) !important; }

/* the frosted glass blur reads heavier on light; lighten it a touch */
[data-theme="light"] .modal-content,
[data-theme="light"] .nav-bar,
[data-theme="light"] .nav-column { backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); }

/* ---- Buttons -------------------------------------------------------------- */
/* Solid gradient buttons keep light text on light theme */
[data-theme="light"] .submit-btn,
[data-theme="light"] .save-button,
[data-theme="light"] .save-picture-btn,
[data-theme="light"] .cta-button,
[data-theme="light"] .newbtn,
[data-theme="light"] .primary-button,
[data-theme="light"] .btn-primary,
[data-theme="light"] .select-plan.btn-primary,
[data-theme="light"] .tl-btn-primary,
[data-theme="light"] .btn-add,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-save,
[data-theme="light"] .btn-delete,
[data-theme="light"] .add-member-btn,
[data-theme="light"] .try_now_button,
[data-theme="light"] .inverted_try_now_button,
[data-theme="light"] .next-btn,
[data-theme="light"] .prev-btn {
    color: #ffffff !important;
}

/* Translucent accent buttons need a darker steel label on light */
[data-theme="light"] .add-project-btn,
[data-theme="light"] .add-client-btn,
[data-theme="light"] .export-btn,
[data-theme="light"] .filter-btn,
[data-theme="light"] .pdf-btn,
[data-theme="light"] .project-action-btn,
[data-theme="light"] .client-action-btn {
    color: #2E537E !important;
}

/* Accent headings/links land darker for contrast on light */
[data-theme="light"] .projects-header-content h2,
[data-theme="light"] .clients-header-content h2,
[data-theme="light"] .team-header h2,
[data-theme="light"] .transactions-header-fixed h2,
[data-theme="light"] .settings-section h2,
[data-theme="light"] .invoice-number,
[data-theme="light"] .register-link a,
[data-theme="light"] .login-link a { color: #2E537E !important; }

/* ---- Landing / marketing sections (were hardcoded dark) ------------------- */
[data-theme="light"] .features-section,
[data-theme="light"] .pricing-section {
    background: transparent !important;
    border-top-color: rgba(16, 49, 79, 0.08) !important;
}

/* footer */
[data-theme="light"] .info {
    background: rgba(255, 255, 255, 0.72) !important;
    border-top-color: rgba(16, 49, 79, 0.12) !important;
}
[data-theme="light"] .info a { color: #2E537E; }

/* feature cards + icons */
[data-theme="light"] .feature-card h3 { color: #16314F !important; }
[data-theme="light"] .feature-card p { color: #5B6B86 !important; }
[data-theme="light"] .feature-icon.blue,
[data-theme="light"] .feature-icon.violet,
[data-theme="light"] .feature-icon.cyan { color: #2E537E !important; }

/* hero badge + secondary button */
[data-theme="light"] .badge-text { color: #2E537E !important; }
[data-theme="light"] .hero-badge {
    background: rgba(74, 120, 184, 0.12) !important;
    border-color: rgba(74, 120, 184, 0.30) !important;
}
[data-theme="light"] .btn-secondary {
    color: #33455F !important;
    background: rgba(16, 49, 79, 0.05) !important;
    border-color: rgba(16, 49, 79, 0.14) !important;
}
[data-theme="light"] .btn-secondary:hover { color: #16314F !important; }

/* the 3D app-preview mockup stays dark on purpose — keep its text light */
[data-theme="light"] .mockup-callout h3 { color: #ffffff !important; }

/* generic paragraphs / section intros that inherit undefined vars */
[data-theme="light"] .pricing-contact-intro,
[data-theme="light"] .comparison-card-description { color: #5B6B86 !important; }

/* ---- Dashboard chart text readability (light) ----------------------------- */
[data-theme="light"] .chart-title,
[data-theme="light"] .chart-card.chart-featured .chart-title { color: #16314F !important; }
[data-theme="light"] .chart-subtitle,
[data-theme="light"] .doughnut-value,
[data-theme="light"] .legend-name { color: #33455F !important; }
[data-theme="light"] .legend-value { color: #16314F !important; }
[data-theme="light"] .kpi-label,
[data-theme="light"] .stat-label,
[data-theme="light"] .stat-item-label { color: #5B6B86 !important; }
[data-theme="light"] .kpi-value,
[data-theme="light"] .stat-value,
[data-theme="light"] .stat-item-value,
[data-theme="light"] .doughnut-center-value { color: #0B1524 !important; }

/* clean, flat donuts in light mode — no canvas glow, no halo rings, no drop-shadow */
[data-theme="light"] .doughnut-container canvas,
[data-theme="light"] .chart-container canvas,
[data-theme="light"] .donut-canvas canvas,
[data-theme="light"] .doughnut-container,
[data-theme="light"] .chart-card.chart-featured .doughnut-container { filter: none !important; }
[data-theme="light"] .doughnut-container::before,
[data-theme="light"] .doughnut-container::after,
[data-theme="light"] .doughnut-center::before,
[data-theme="light"] .chart-card.chart-featured .doughnut-container::after { display: none !important; }
[data-theme="light"] .doughnut-center { text-shadow: none !important; }

/* ---- Modals: never light text on the light modal surface ------------------ */
[data-theme="light"] .modal-content,
[data-theme="light"] .join-org-modal-content,
[data-theme="light"] .tl-modal-content { color: #0B1524; }
[data-theme="light"] .modal-content [style*="color:#fff"],
[data-theme="light"] .modal-content [style*="color: #fff"],
[data-theme="light"] .modal-content [style*="color:#ffffff"],
[data-theme="light"] .modal-content [style*="color: #ffffff"],
[data-theme="light"] .modal-content [style*="color:white"],
[data-theme="light"] .modal-content [style*="color: white"] { color: #0B1524 !important; }
[data-theme="light"] .modal-content [style*="background:rgba(255,255,255"],
[data-theme="light"] .modal-content [style*="background: rgba(255,255,255"] {
    background: rgba(16, 49, 79, 0.05) !important;
    border-color: rgba(16, 49, 79, 0.12) !important;
}

/* ---- Light theme: ffn-menu account popup ---------------------------------- */
/* The sidebar stays dark (brand element) but the popup adapts for readability */
[data-theme="light"] .nav-column.ffnav .ffn-menu {
    background: #ffffff !important;
    border-color: rgba(16, 49, 79, 0.14) !important;
    box-shadow: 0 14px 40px rgba(16, 49, 79, 0.18) !important;
}
[data-theme="light"] .nav-column.ffnav .ffn-sec {
    color: #5B6B86 !important;
}
[data-theme="light"] .nav-column.ffnav .ffn-org,
[data-theme="light"] .nav-column.ffnav .ffn-mi {
    color: #33455F !important;
}
[data-theme="light"] .nav-column.ffnav .ffn-org:hover,
[data-theme="light"] .nav-column.ffnav .ffn-mi:hover {
    color: #0B1524 !important;
    background: rgba(16, 49, 79, 0.06) !important;
}
[data-theme="light"] .nav-column.ffnav .ffn-org.on {
    color: #2E537E !important;
    font-weight: 600;
}
[data-theme="light"] .nav-column.ffnav .ffn-org.on::after { color: #4A78B8 !important; }
[data-theme="light"] .nav-column.ffnav .ffn-prof {
    background: rgba(16, 49, 79, 0.07) !important;
    border-color: rgba(16, 49, 79, 0.14) !important;
}
[data-theme="light"] .nav-column.ffnav .ffn-who b  { color: #D8E4F4 !important; }
[data-theme="light"] .nav-column.ffnav .ffn-who span { color: #9BB4D0 !important; }

/* ---- Light theme: ffnav sidebar nav items (hardcoded dark text must go dark) */
/* In light mode theme.css turns .nav-column white — inline #AAB7D4 / #E7ECF8 become unreadable */
[data-theme="light"] .nav-column.ffnav a.ffn-item {
    color: #16314F !important;
}
[data-theme="light"] .nav-column.ffnav a.ffn-item:hover {
    color: #0B1524 !important;
    background: rgba(16, 49, 79, 0.08) !important;
}
[data-theme="light"] .nav-column.ffnav a.ffn-item.on {
    color: #0B1524 !important;
    background: rgba(74, 120, 184, 0.16) !important;
    border-color: rgba(74, 120, 184, 0.38) !important;
}
[data-theme="light"] .nav-column.ffnav a.ffn-sub      { color: #33455F !important; }
[data-theme="light"] .nav-column.ffnav a.ffn-sub:hover,
[data-theme="light"] .nav-column.ffnav a.ffn-sub.on   { color: #0B1524 !important; background: rgba(16,49,79,0.06) !important; }
[data-theme="light"] .nav-column.ffnav a.ffn-out       { color: #5B6B86 !important; border-top-color: rgba(16,49,79,0.1) !important; }
[data-theme="light"] .nav-column.ffnav a.ffn-out:hover { color: #0B1524 !important; background: rgba(16,49,79,0.06) !important; }
/* Profile row at bottom */
[data-theme="light"] .nav-column.ffnav .ffn-prof       { color: #16314F !important; border-color: rgba(16,49,79,0.1) !important; }
[data-theme="light"] .nav-column.ffnav .ffn-prof:hover { color: #0B1524 !important; background: rgba(16,49,79,0.06) !important; }
[data-theme="light"] .nav-column.ffnav .ffn-ini        { background: rgba(16,49,79,0.12) !important; border-color: rgba(16,49,79,0.22) !important; color: #16314F !important; }
[data-theme="light"] .nav-column.ffnav .ffn-who b      { color: #0B1524 !important; }
[data-theme="light"] .nav-column.ffnav .ffn-who span   { color: #5B6B86 !important; }
[data-theme="light"] .nav-column.ffnav .ffn-chev       { color: #5B6B86 !important; opacity: 1 !important; }
[data-theme="light"] .nav-column.ffnav .ffn-brand b    { color: #16314F !important; }
[data-theme="light"] .nav-column.ffnav .ffn-acct       { border-top-color: rgba(16,49,79,0.1) !important; }

/* ---- Light theme: calendar cell-day day number ---------------------------- */
[data-theme="light"] .cell-day { color: #33455F !important; }
[data-theme="light"] .calendar-cell.today .cell-day {
    background: var(--secondary-color) !important;
    color: #ffffff !important;
}

/* ---- General contrast improvements for light mode ------------------------- */
/* Strengthen faint text tiers so nothing goes below WCAG AA on light bg */
[data-theme="light"] { --ff-fg-4: #6B7A94 !important; }
[data-theme="light"] .ff-fg-4,
[data-theme="light"] .text-muted,
[data-theme="light"] small,
[data-theme="light"] .caption { color: #6B7A94 !important; }

/* Section labels / sub-headings that used rgba(white) in dark mode */
[data-theme="light"] .settings-section h2,
[data-theme="light"] .settings-section h3 { color: #16314F !important; }
[data-theme="light"] .section-description,
[data-theme="light"] .form-hint,
[data-theme="light"] .helper-text { color: #5B6B86 !important; }

/* Transaction table row text */
[data-theme="light"] .transaction-item,
[data-theme="light"] .transaction-date,
[data-theme="light"] .transaction-description { color: #0B1524 !important; }
[data-theme="light"] .transaction-category,
[data-theme="light"] .transaction-user  { color: #5B6B86 !important; }

/* Network graph panel (node-panel) */
[data-theme="light"] .node-panel {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(16,49,79,0.12) !important;
}
[data-theme="light"] .panel-label  { color: #5B6B86 !important; }
[data-theme="light"] .panel-value  { color: #0B1524 !important; }
[data-theme="light"] .panel-link   { color: #2E537E !important; background: rgba(16,49,79,0.04) !important; border-color: rgba(16,49,79,0.14) !important; }
[data-theme="light"] .panel-link:hover { background: rgba(16,49,79,0.09) !important; }
[data-theme="light"] .panel-sub    { color: #5B6B86 !important; }
[data-theme="light"] .panel-header { border-color: rgba(16,49,79,0.1) !important; }
[data-theme="light"] .panel-header h3 { color: #0B1524 !important; }

/* Network graph toolbar + net buttons */
[data-theme="light"] .network-toolbar {
    background: rgba(255,255,255,0.88) !important;
    border-color: rgba(16,49,79,0.1) !important;
}
[data-theme="light"] .net-search {
    background: #ffffff !important;
    border-color: rgba(16,49,79,0.18) !important;
    color: #0B1524 !important;
}
[data-theme="light"] .net-search::placeholder { color: #8A99B0 !important; }
[data-theme="light"] .net-btn { color: #33455F !important; background: rgba(16,49,79,0.05) !important; border-color: rgba(16,49,79,0.14) !important; }
[data-theme="light"] .net-btn:hover { background: rgba(16,49,79,0.1) !important; }
[data-theme="light"] .net-btn-primary { color: #2E537E !important; background: rgba(74,120,184,0.15) !important; border-color: rgba(74,120,184,0.4) !important; }
[data-theme="light"] .net-stat { color: #5B6B86 !important; }
[data-theme="light"] .net-legend {
    background: rgba(255,255,255,0.92) !important;
    border-color: rgba(16,49,79,0.12) !important;
}
[data-theme="light"] .leg-item  { color: #33455F !important; }

/* =============================================================================
   THEME TOGGLE BUTTON (injected by theme-toggle.js)
   ============================================================================= */
.ff-theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2147483000;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(134, 176, 224, 0.4);
    background: linear-gradient(180deg, rgba(74, 120, 184, 0.25), rgba(46, 83, 126, 0.35));
    color: #E7ECF8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.ff-theme-toggle:hover { transform: translateY(-2px) scale(1.05); }
.ff-theme-toggle svg { width: 20px; height: 20px; display: block; }
.ff-theme-toggle .ff-sun { display: none; }
.ff-theme-toggle .ff-moon { display: block; }

[data-theme="light"] .ff-theme-toggle {
    border-color: rgba(46, 83, 126, 0.25);
    background: linear-gradient(180deg, #FFFFFF, #E8EEF7);
    color: #2E537E;
    box-shadow: 0 8px 24px rgba(16, 49, 79, 0.18);
}
[data-theme="light"] .ff-theme-toggle .ff-sun { display: block; }
[data-theme="light"] .ff-theme-toggle .ff-moon { display: none; }

@media (max-width: 768px) {
    .ff-theme-toggle { width: 42px; height: 42px; bottom: 14px; right: 14px; }
}